/* Free online timer (/online-timer/). The timer screen copies the GRIT iOS app's active
   timer (GRITApp/ActiveTimerView.swift, "GRIT Hybrid" face, the app default) and the
   settings borrow TimerSetupView. Colours are GritColor values from DesignSystem.swift,
   converted from 0-1 RGB to 0-255 without rounding. */
.ot{
  --ot-bg:rgb(4.59 5.1 6.12);                 /* GritColor.background (dark) 0.018,0.020,0.024 */
  --ot-panel:rgb(17.85 19.38 22.95);          /* GritColor.panel 0.070,0.076,0.090 */
  --ot-panel-raised:rgb(24.23 26.27 31.11);   /* GritColor.panelRaised 0.095,0.103,0.122 */
  --ot-border:rgba(255,255,255,.125);         /* GritColor.border */
  --ot-border-strong:rgba(255,255,255,.2);    /* GritColor.borderStrong */
  --ot-text:rgb(242.25 243.53 246.08);        /* GritColor.text 0.950,0.955,0.965 */
  --ot-muted:rgb(158.1 164.48 175.95);        /* GritColor.textMuted 0.620,0.645,0.690 */
  --ot-dim:rgb(109.65 116.03 127.5);          /* GritColor.textDim 0.430,0.455,0.500 */
  --ot-blue:rgb(59.93 138.98 255);            /* GritColor.blue 0.235,0.545,1.000 */
  --ot-work:rgb(22.95 229.5 91.8);            /* GritColor.work 0.090,0.900,0.360 */
  --ot-rest:rgb(255 39.53 30.6);              /* GritColor.rest 1.000,0.155,0.120 */
  --ot-font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ot-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:34px 0 8px;font-family:var(--ot-font)
}
.ot [hidden]{display:none!important}
.ot-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Mode choice: an iOS segmented control, as the app's count-in picker. */
.ot-modes{display:flex;gap:2px;margin:0 0 14px;padding:2px;border-radius:9px;background:rgba(118,118,128,.24)}
.ot-modes button{flex:1 1 0;min-width:0;min-height:40px;padding:6px 4px;border:0;border-radius:7px;background:transparent;color:var(--ot-text);font:600 .875rem/1.15 var(--ot-font);cursor:pointer}
.ot-modes button[aria-pressed="true"]{background:rgb(99 99 102);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.ot-modes button:disabled{opacity:.42;cursor:not-allowed}

/* ---------- The timer screen (ActiveTimerView) ---------- */
.ot-screen{
  --accent:var(--ot-muted);--digit:var(--ot-text);--label-op:.62;--wash:.04;
  position:relative;width:100%;aspect-ratio:2622/1206;max-height:calc(100svh - 24px);
  container-type:size;overflow:hidden;border-radius:14px;background:var(--ot-bg);color:var(--ot-text);
  -webkit-tap-highlight-color:transparent
}
/* TimerPhase.accent and ActiveTimerView.timerTextColor / isActiveCuePhase. */
.ot-screen[data-phase="countin"],.ot-screen[data-phase="rest"]{--accent:var(--ot-rest);--digit:var(--ot-rest);--label-op:1;--wash:.18}
.ot-screen[data-phase="work"]{--accent:var(--ot-work);--digit:var(--ot-work);--label-op:1;--wash:.18}
/* FINISH: the app's finishing phase, white with the active wash (TimerPhase.accent .text). */
.ot-screen[data-phase="finish"]{--accent:var(--ot-text);--digit:var(--ot-text);--label-op:1;--wash:.18}
.ot-screen[data-phase="done"]{--accent:var(--ot-text)}

.ot-stage{
  /* One app point, scaled so the layout keeps the proportions of an iPhone in landscape
     (844 x 390 pt) or portrait (390 x 763 pt safe area). */
  --u:clamp(.7px,min(100cqw / 844,100cqh / 390),4px);
  --px:calc(22 * var(--u));--py:calc(14 * var(--u));
  /* W and H are the GeometryReader size: the layout's proportional frames use the
     whole screen, while the 22 x 14 pt padding only moves the label, corners and buttons. */
  --W:100cqw;--H:100cqh;--CW:calc(100cqw - 2 * var(--px));
  position:absolute;inset:0
}

/* activeBackground: background, a blurred accent band at the top, then a dark gradient. */
.ot-bg{position:absolute;inset:0;background:var(--ot-bg);pointer-events:none}
.ot-bg::before{content:"";position:absolute;left:0;right:0;top:calc(-92 * var(--u));height:calc(220 * var(--u));background:var(--accent);opacity:var(--wash);filter:blur(calc(48 * var(--u)))}
.ot-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 50%,rgba(0,0,0,.28))}

/* largePhaseLabel: 22 pt semibold, tracking 5.6, accent colour at 1 or 0.62 opacity. */
.ot-label{position:absolute;left:0;right:0;top:calc(var(--py) + 4 * var(--u));margin:0;text-align:center;color:var(--accent);opacity:var(--label-op);font:600 calc(22 * var(--u))/1.2 var(--ot-display);letter-spacing:calc(5.6 * var(--u));white-space:nowrap}

/* SevenSegmentDisplay: glow is .shadow(color.opacity(0.42), radius: 7). */
.ot-digits,.ot-rounds{position:absolute;color:var(--digit)}
.ot-digits{left:50%;top:50%;width:calc(var(--W) * .65);height:calc(var(--H) * .60);transform:translate(-50%,-50%);filter:drop-shadow(0 0 calc(7 * var(--u)) color-mix(in srgb,var(--digit) 42%,transparent))}
.ot-digits svg,.ot-rounds svg{display:block;width:100%;height:100%;overflow:visible}
.ot-digits .on,.ot-rounds .on{fill:currentColor}
.ot-digits .off,.ot-rounds .off{fill:currentColor;fill-opacity:.035}
.ot-ready .ot-digits-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ot:not(.ot-ready) .ot-digits{display:flex;align-items:center;justify-content:center;font:800 calc(30 * var(--u)) var(--ot-display);font-size:min(22cqw,40cqh);font-variant-numeric:tabular-nums}

/* Round counter: SevenSegmentDisplay in GritColor.rest, glow 0.34, top left. */
.ot-rounds{--digit:var(--ot-rest);left:var(--px);top:var(--py);width:min(var(--W) * .10,90 * var(--u));height:min(var(--H) * .26,96 * var(--u));filter:drop-shadow(0 0 calc(7 * var(--u)) color-mix(in srgb,var(--ot-rest) 34%,transparent))}

/* Close: xmark 15 pt semibold, textMuted, in a 38 pt square. */
.ot-close{position:absolute;z-index:2;right:var(--px);top:var(--py);display:flex;align-items:center;justify-content:center;width:max(38px,38 * var(--u));height:max(38px,38 * var(--u));padding:0;border:0;border-radius:10px;background:transparent;color:var(--ot-muted);cursor:pointer}
/* The path spans half the 24-unit box, so a 23.5 u box draws the ~12 pt cross of a 15 pt SF xmark. */
.ot-close svg{width:calc(23.5 * var(--u));height:calc(23.5 * var(--u));min-width:20px;min-height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* Controls: TimerControlButtonStyle. Running: one 128 pt Pause in a 174 pt row. */
.ot-actions{position:absolute;left:50%;bottom:calc(var(--py) + 4 * var(--u));transform:translateX(-50%);display:flex;justify-content:center;gap:calc(12 * var(--u));width:calc(174 * var(--u));min-width:150px;min-height:max(44px,44 * var(--u));align-items:center}
.ot-screen[data-actions="pair"] .ot-actions{width:calc(300 * var(--u));min-width:268px}
.ot-screen[data-actions="paused"] .ot-actions{width:min(var(--CW),420 * var(--u));min-width:min(var(--CW),300px)}
.ot-screen[data-actions="none"] .ot-actions{visibility:hidden}
.ot:not(.ot-ready) .ot-actions{visibility:hidden}
.ot-tb{display:flex;align-items:center;justify-content:center;width:calc(128 * var(--u));min-width:128px;height:max(44px,44 * var(--u));padding:0 8px;border:1px solid rgba(255,255,255,.065);border-radius:calc(12 * var(--u));background:rgba(255,255,255,.04);color:var(--ot-muted);font:600 max(13px,13 * var(--u))/1 var(--ot-font);cursor:pointer}
.ot-tb.ot-emphasis{height:max(50px,50 * var(--u));border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.095);color:var(--ot-text);font-size:max(15px,15 * var(--u))}
.ot-screen[data-actions="paused"] .ot-tb{flex:1 1 0;width:auto;min-width:0}
/* Start (not in the app's timer screen): the setup screen's PrimaryActionButtonStyle. */
.ot-tb.ot-primary{width:100%;height:max(50px,50 * var(--u));border:0;border-radius:calc(16 * var(--u));background:var(--ot-blue);color:#fff;font:700 max(17px,18 * var(--u))/1 var(--ot-font)}
.ot-tb:active{opacity:.72}
.ot-tb:focus-visible,.ot-close:focus-visible{outline:2px solid var(--ot-blue);outline-offset:2px}

/* Tap the full-screen timer to hide its buttons, as in the app. */
.ot-screen[data-controls="hidden"] .ot-actions{visibility:hidden}
.ot-screen[data-controls="hidden"] .ot-close{opacity:0}

/* Portrait: hybridPortraitLayout, scaled to the safe area of a 390 x 844 pt iPhone (390 x 763),
   which is the space the app's GeometryReader gets. VStack(spacing 18): top bar, Spacer(min 40), label,
   digits (0.88 W x min(0.24 H, 190)), Spacer(min 30), controls; padding 22 x 20. */
@container (orientation:portrait){
  .ot-stage{
    --u:clamp(.7px,min(100cqw / 390,100cqh / 763),4px);
    --py:calc(20 * var(--u));--bar:calc(38 * var(--u));
    display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--u));
    padding:calc(var(--py) + var(--bar) + 18 * var(--u)) var(--px) var(--py);box-sizing:border-box
  }
  .ot-screen[data-rounds="yes"] .ot-stage{--bar:max(38 * var(--u),min(var(--H) * .11,88 * var(--u)))}
  .ot-stage::before,.ot-stage::after{content:"";flex:1 1 0}
  .ot-stage::before{order:0;min-height:calc(40 * var(--u))}
  .ot-label{position:relative;top:auto;order:1}
  .ot-digits{position:relative;left:auto;top:auto;transform:none;order:2;flex:none;width:calc(var(--W) * .88);height:min(var(--H) * .24,190 * var(--u))}
  .ot-stage::after{order:3;min-height:calc(30 * var(--u))}
  .ot-actions{position:relative;left:auto;bottom:auto;order:4;transform:none;flex:none;width:var(--CW)!important;min-width:0!important}
  .ot-rounds{width:min(var(--W) * .20,76 * var(--u));height:min(var(--H) * .11,88 * var(--u))}
  .ot-close svg{width:calc(25 * var(--u));height:calc(25 * var(--u))}
}

/* Full screen (Fullscreen API, or a fixed full-window view on iPhone). */
.ot-screen.is-full{position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0}
.ot-screen:fullscreen{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0}
.ot-screen:-webkit-full-screen{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0}
.ot-screen.is-full .ot-stage{padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px)}
html.ot-locked,html.ot-locked body{overflow:hidden}

.ot-sub{margin:10px 0 12px;color:var(--ot-muted);font:500 .94rem/1.35 var(--ot-font);text-align:center}
.ot-nojs{margin:14px 0 0;color:var(--ot-muted);font-size:.92rem}

/* Sound and Fullscreen: SecondaryActionButtonStyle (panel fill, borderStrong, radius 16). */
.ot-controls{display:flex;gap:12px}
.ot-sec{flex:1 1 0;min-height:50px;padding:8px 12px;border:1px solid var(--ot-border-strong);border-radius:16px;background:var(--ot-panel);color:var(--ot-text);font:600 1rem/1.2 var(--ot-font);cursor:pointer}
.ot-sec[aria-pressed="true"]{color:var(--ot-blue)}
.ot-sec:disabled{opacity:.42;cursor:not-allowed}
.ot-sec:active{opacity:.85}

/* ---------- Settings (TimerSetupView SetupControlRow and gritCard) ---------- */
.ot-settings{margin:18px 0 0}
.ot-settings fieldset{display:grid;gap:12px;margin:0;padding:0;border:0;min-width:0}
.ot-settings fieldset:disabled{opacity:.42}
.ot-settings legend{padding:0;margin:0 0 10px;color:var(--ot-muted);font:600 13px/1.25 var(--ot-font);letter-spacing:1.8px;text-transform:uppercase}
.ot-row{display:flex;align-items:center;gap:8px;min-height:68px;padding:12px 16px;border:1px solid var(--ot-border);border-radius:14px;background:var(--ot-panel);box-shadow:0 6px 10px rgba(0,0,0,.055)}
.ot-row>label{flex:none;min-width:72px;color:var(--ot-muted);font:600 16px/1.2 var(--ot-font)}
.ot-value{display:flex;align-items:baseline;gap:4px;min-width:0}
.ot-value input,.ot-value select{width:3.4ch;min-height:44px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--ot-text);font:700 24px/1 var(--ot-display);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.ot-value select{width:auto;padding-right:22px;appearance:none;-webkit-appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239ea5b0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 6px center/11px 8px no-repeat}
.ot-value select option{background:var(--ot-panel);color:var(--ot-text)}
.ot-value input::-webkit-outer-spin-button,.ot-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ot-value input:focus,.ot-value select:focus{background-color:rgba(242,243,246,.16);outline:none}
.ot-value input:focus-visible,.ot-value select:focus-visible{outline:2px solid var(--ot-blue);outline-offset:1px}
.ot-rest input{color:var(--ot-rest)}
.ot-rest input:focus{background-color:rgba(255,40,31,.16)}
.ot-unit{color:var(--ot-muted);font:500 15px/1 var(--ot-font)}
.ot-adjust{display:flex;gap:10px;margin-left:auto}
.ot:not(.ot-ready) .ot-adjust{display:none}
.ot-step{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--ot-border);border-radius:50%;background:var(--ot-panel-raised);color:var(--ot-text);cursor:pointer}
.ot-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.ot-step:active{opacity:.6}
.ot-step:focus-visible{outline:2px solid var(--ot-blue);outline-offset:2px}
.ot-step:disabled{opacity:.42;cursor:not-allowed}

/* Count-in: an iOS switch tinted GritColor.blue. */
.ot-check{justify-content:space-between;cursor:pointer;color:var(--ot-text);font:600 17px/1.2 var(--ot-font)}
.ot-check input{position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:16px;background:rgba(120,120,128,.32);appearance:none;-webkit-appearance:none;cursor:pointer}
.ot-check input::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06)}
.ot-check input:checked{background:var(--ot-blue)}
.ot-check input:checked::before{left:22px}
.ot-check input:focus-visible{outline:2px solid var(--ot-blue);outline-offset:3px}
.ot[data-mode="clock"] .ot-settings,.ot[data-mode="clock"] .ot-hint{display:none}
.ot-hint{margin:14px 0 0;color:var(--ot-dim);font-size:.84rem}

.ot-app{margin:18px 0 0;padding:18px 20px;border:1px solid var(--ot-border);border-radius:14px;background:var(--ot-panel)}
.ot-app p{margin:0 0 12px;color:var(--ot-muted);font-size:.95rem}
.ot-app .btn{min-height:42px}

@media(max-width:560px){
  .ot-screen{aspect-ratio:390/640}
  .ot-modes button{font-size:.8rem}
  .ot-row{padding:10px 12px;gap:6px}
  .ot-row>label{min-width:60px;font-size:15px}
  .ot-adjust{gap:8px}
}
@media(max-width:360px){
  .ot-row>label{min-width:0}
  .ot-value input{width:3ch;padding:0 4px}
  .ot-unit{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .ot-check input,.ot-check input::before{transition:background-color .2s ease,left .2s ease}
  .ot-tb.ot-primary:active{transform:scale(.97)}
}