/* Tapy Live. The sign-in page follows the light or dark look of the device, with Tapy's colours
   (the website's tokens). The app page is a screen for subtitles: its controls float over it in
   dark glass, like a video player's, and fade away while Tapy listens. */

/* Only the wordmark uses it, so the file holds only the letters of "Tapy Live" (fontTools subset). */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/be-vietnam-pro-800.woff2") format("woff2")}

:root{
  --paper:#F6F6F3; --surface:#FFFFFF; --surface-line:#E6E6E0;
  --text:#111317; --text-2:#3F4550; --text-3:#646B77;
  --ink:#173A63; --ink-text:#173A63; --ink-tint:rgba(23,58,99,.10);
  --record:#D93A2F; --record-text:#8E1F17;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --brand-font:"Be Vietnam Pro",var(--font);
  /* The app's controls, always dark over the subtitle screen. */
  --glass:rgba(22,24,28,.72); --glass-strong:rgba(28,30,34,.94); --glass-line:rgba(255,255,255,.12);
  --on-glass:#FFFFFF; --on-glass-2:rgba(255,255,255,.66); --on-glass-tint:rgba(255,255,255,.12);
  --focus:#7FB2F0;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#111214; --surface:#1C1D20; --surface-line:#2C2D31;
    --text:#F2F3F5; --text-2:#B8BDC7; --text-3:#9097A3;
    --ink:#3E6FB0; --ink-text:#A9C4EA; --ink-tint:rgba(62,111,176,.30);
    --record-text:#FF8A80;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.icon,button svg{width:1.25em;height:1.25em;flex:none;fill:currentColor}

.brand{display:flex;align-items:center;gap:12px}
.brand img{border-radius:22%}
.wordmark{font:800 24px/1 var(--brand-font);letter-spacing:-.01em}

/* ---------------------------------------------------------------- Sign in */

.login-page{display:grid;place-items:center;min-height:100%;padding:24px 16px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:28px}
.login .brand{justify-content:center;flex-direction:column;gap:14px}
.login .wordmark{font-size:30px;color:var(--text)}
.login form{display:flex;flex-direction:column;gap:14px}
.login label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--text-2)}
.login input{height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--surface-line);background:var(--surface);color:var(--text);font-size:17px}
.login input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-tint)}
.error{margin:0;color:var(--record-text);font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:0;border-radius:999px;font-weight:600;font-size:17px}
.btn.primary{background:var(--ink);color:#FFFFFF}
.btn.primary:hover{filter:brightness(1.12)}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------------------------------------------------------------- The subtitle screen */

.app{background:#0B0C0E;color:var(--on-glass);overflow:hidden}
.stage{position:fixed;inset:0;background:var(--screen,#0B0C0E);transition:background-color .3s}
.stage[data-screen="dark"]{--screen:#0B0C0E}
.stage[data-screen="black"]{--screen:#000000}
.stage[data-screen="white"]{--screen:#FFFFFF}
.stage[data-screen="green"]{--screen:#00B140}

/* The text's size follows the window, both ways: a size step is 1% of the shorter side or half a
   percent of the width, whichever is larger, so a wide, short window, such as a strip along the
   bottom of a presenting screen, keeps big text; and never more than lets the lines asked for fit
   the window's height (--line-units, from the page: the lines, and the original's when shown). */
.stage{--edge:clamp(8px,6vh,64px);--window-h:100vh}
@supports (height:100dvh){.stage{--window-h:100dvh}}
.subs{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(94vw,42ch);
  font-size:min(max(calc(var(--size,6) * 1vmin),calc(var(--size,6) * .5vw)),calc((var(--window-h) - 2 * var(--edge)) / var(--line-units,2.94)));
  line-height:1.34;text-align:center;
  font-family:var(--subs-font,var(--font));font-weight:var(--subs-weight,700);
  color:var(--subs-color,#FFFFFF);
  transition:opacity .5s, bottom .35s, top .35s;
  overflow-wrap:anywhere;
}
.subs[data-position="bottom"]{bottom:var(--edge)}
.subs[data-position="top"]{top:var(--edge)}
.subs[data-position="middle"]{top:50%;transform:translate(-50%,-50%)}
/* In a tall window the controls push the subtitles clear of them; in a short one they float over
   the subtitles until they fade, or the view is subtitles only. */
@media (min-height:421px){
  body:not(.calm):not(.clean) .subs[data-position="bottom"]{bottom:calc(var(--edge) + 96px)}
  body:not(.calm):not(.clean) .subs[data-position="top"]{top:calc(var(--edge) + 64px)}
}
.subs.quiet{opacity:0}
/* A sheet open beside them on a wide window: the subtitles keep to the space left of it, so the look
   being changed stays in full view (a phone's sheet comes from the bottom, see below). */
@media (min-width:641px){
  body.sheet-open .subs{left:calc((100vw - 404px) / 2);width:min(calc(100vw - 436px),42ch)}
}

/* The clip holds exactly the lines asked for, so no part of an older line shows above them. The
   roll inside it slides up when a new line comes (app.js), and new or changed words fade in. */
.subs .lines{display:flex;flex-direction:column;justify-content:flex-end;max-height:calc(var(--lines,2) * 1.34em);overflow:hidden}
.subs .roll{flex:none}
.subs .original{display:flex;flex-direction:column;justify-content:flex-end;max-height:calc(2 * 1.34em);overflow:hidden;font-size:.6em;font-weight:500;opacity:.86;margin-bottom:.35em}
.subs .fresh{animation:tapy-in .24s ease-out both}
@keyframes tapy-in{from{opacity:0}to{opacity:1}}
.subs .block{margin:0}
.subs .t{padding:.02em .26em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.subs[data-background="box"] .t{background:var(--box-soft,rgba(0,0,0,.62))}
.subs[data-background="solid"] .t{background:var(--box-solid,#000000)}
.subs[data-background="outline"] .t{-webkit-text-stroke:.13em var(--outline,rgba(0,0,0,.92));paint-order:stroke fill;text-shadow:0 .04em .18em var(--outline,rgba(0,0,0,.6))}
.subs[data-font="sans"]{--subs-font:var(--font)}
.subs[data-font="serif"]{--subs-font:"New York",ui-serif,Georgia,"Times New Roman",serif}
.subs[data-font="wide"]{--subs-font:Verdana,"DejaVu Sans",var(--font)}
.subs[data-font="mono"]{--subs-font:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ---------------------------------------------------------------- Controls over the screen */

.bar{position:fixed;left:0;right:0;display:flex;align-items:center;gap:10px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));transition:opacity .4s;z-index:2}
.bar.top{top:0;padding-top:max(12px,env(safe-area-inset-top))}
.bar.bottom{bottom:0;justify-content:center;flex-direction:column;gap:8px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
body.calm .bar{opacity:0;pointer-events:none}
body.calm .stage,body.clean .stage{cursor:none}
/* Subtitles only: nothing else on the screen until Esc, H or a double tap. */
body.clean .bar,body.clean .sheet{display:none}
.bar .brand{gap:10px;margin-right:4px}
/* The name and the status line sit straight on the screen, not on glass: they follow its colour,
   as the subtitles do (textColorFor in captions.js). */
.app{--on-screen:#FFFFFF;--on-screen-2:rgba(255,255,255,.66);--on-screen-shadow:0 1px 6px rgba(0,0,0,.6)}
.app[data-screen="white"]{--on-screen:#111317;--on-screen-2:rgba(17,19,23,.62);--on-screen-shadow:none}
.bar .wordmark{font-size:19px;color:var(--on-screen)}
.spacer{flex:1}

.chip,.pill,.round{display:inline-flex;flex:none;align-items:center;gap:8px;height:44px;white-space:nowrap;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--on-glass)}
.chip{padding:0 14px;font-size:15px;color:var(--on-glass-2);font-variant-numeric:tabular-nums}
.chip.low{color:#FFB4AB}
.pill{padding:0 16px;font-size:15px;font-weight:600;max-width:44vw;min-width:0;flex-shrink:1}
.pill span{overflow:hidden;text-overflow:ellipsis}
.round{width:44px;justify-content:center;padding:0}
.chip:empty{display:none}
button.pill:hover,button.round:hover{background:var(--glass-strong)}

.mic{position:relative;width:76px;height:76px;border-radius:50%;border:0;display:grid;place-items:center;background:#FFFFFF;color:#111317;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:background-color .2s,transform .15s}
.mic:active{transform:scale(.96)}
.mic svg{width:34px;height:34px;grid-area:1/1}
.mic .glyph-stop{display:none;width:30px;height:30px}
.mic.live{background:var(--record);color:#FFFFFF}
.mic.live .glyph-mic{display:none}
.mic.live .glyph-stop{display:block}
.mic .ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(217,58,47,.55);opacity:0;transform:scale(var(--level-scale,1));transition:transform .1s linear,opacity .2s}
.mic.live .ring{opacity:1}
.mic.waiting{opacity:.7}
.mic.blocked{background:#3A3B40;color:#9097A3}
.status{min-height:20px;font-size:14px;color:var(--on-screen-2);text-shadow:var(--on-screen-shadow)}
.app[data-screen="white"] .mic:not(.live):not(.blocked){background:#111317;color:#FFFFFF}

/* ---------------------------------------------------------------- Sheets */

.sheet{position:fixed;z-index:3;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));max-height:calc(100vh - 24px);width:min(380px,calc(100vw - 24px));overflow-y:auto;padding:18px 18px 22px;border-radius:24px;background:var(--glass-strong);border:1px solid var(--glass-line);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);color:var(--on-glass);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sheet header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet h2{margin:0;font-size:20px;font-weight:700}
.sheet .round{background:var(--on-glass-tint);border-color:transparent;backdrop-filter:none}
.row{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--glass-line)}
.row:first-of-type{border-top:0}
.row > .label{font-size:14px;font-weight:600;color:var(--on-glass-2)}
.row.inline{flex-direction:row;align-items:center;justify-content:space-between}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-line);background:var(--on-glass-tint);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:600;color:var(--on-glass-2)}
.seg button[aria-pressed="true"]{background:#FFFFFF;color:#111317;border-color:#FFFFFF}
.seg .aa{font-size:18px;line-height:1}
.seg.swatches button{width:52px;padding:0;background:var(--swatch);border:2px solid rgba(255,255,255,.18)}
.seg.swatches button[aria-pressed="true"]{border-color:#FFFFFF;box-shadow:0 0 0 2px var(--glass-strong) inset}
.seg .bg-sample{padding:.06em .32em;border-radius:.18em;font-weight:700}
.seg .pos{width:28px;height:20px;border-radius:5px;border:1.5px solid currentColor;position:relative}
.seg .pos::after{content:"";position:absolute;left:4px;right:4px;height:3px;border-radius:2px;background:currentColor}
.seg .pos.top::after{top:3px}.seg .pos.middle::after{top:7px}.seg .pos.bottom::after{bottom:3px}

input[type="range"]{width:100%;accent-color:#FFFFFF;height:28px}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;width:100%;height:48px;padding:0 44px 0 16px;border-radius:999px;border:1px solid var(--glass-line);background:var(--on-glass-tint);color:var(--on-glass);font-size:16px;font-weight:600}
.select select option{color:#111317}
.select svg{position:absolute;right:14px;top:12px;width:24px;height:24px;pointer-events:none;fill:var(--on-glass-2)}

.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.22);transition:background-color .2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s}
.switch input:checked + span{background:#34C759}
.switch input:checked + span::after{transform:translateX(20px)}
.switch input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

.help{margin:0 0 6px;font-size:16px;line-height:1.45;color:var(--on-glass)}
.steps{margin:6px 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45;color:var(--on-glass-2)}
.action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--glass-line);background:var(--on-glass-tint);color:var(--on-glass);font-size:16px;font-weight:600;text-decoration:none}
.action.primary{background:#FFFFFF;color:#111317;border-color:#FFFFFF}
.sheet{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}

.toast{position:fixed;z-index:4;left:50%;top:max(72px,calc(env(safe-area-inset-top) + 64px));transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-line);color:var(--on-glass);font-size:15px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* A short window, such as a strip along the bottom of a presenting screen: small controls. */
@media (max-height:420px){
  .bar{padding-top:8px;padding-bottom:8px}
  .bar.top{padding-top:max(8px,env(safe-area-inset-top))}
  .bar.bottom{flex-direction:row;justify-content:flex-start;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .bar .wordmark{display:none}
  .mic{width:52px;height:52px}
  .mic svg{width:26px;height:26px}
  .mic .glyph-stop{width:22px;height:22px}
  .chip,.pill,.round{height:40px}
  .round{width:40px}
  .sheet{top:8px;max-height:calc(100vh - 16px)}
}
@media (max-width:640px){
  .bar{gap:6px}
  .bar .brand,#fullButton{display:none}
  .chip .icon{display:none}
  .chip{padding:0 12px}
  .pill{padding:0 12px}
  .sheet{top:auto;left:8px;right:8px;width:auto;max-height:58vh;bottom:max(8px,env(safe-area-inset-bottom))}
  /* The look being changed stays in sight, above the sheet (and wins over the controls' room). */
  body.sheet-open:not(.clean) .subs[data-position="bottom"]{bottom:calc(58vh + 24px)}
  body.sheet-open:not(.clean) .subs[data-position="middle"]{top:calc(21vh - 4px)}
}
@media (max-height:420px){
  .toast{top:max(6px,env(safe-area-inset-top));padding:8px 14px;font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
  .subs .fresh{animation:none}
}