/* Ortivio Pulse. Tokens from the Ortivio landing look (dark default); light designed to match.
   No red anywhere. Amber (#F5A623) for the shock button. Self-hosted Outfit. */

@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/outfit-latin-700-normal.woff2') format('woff2'); }

:root, :root[data-theme="dark"] {
  --base: #050C10;
  --card: #0C2027;
  --raised: #10303A;
  --line: #1D454D;
  --focus: #7DF2E8;
  --accent: #2EE6D6;
  --on-accent: #04201F;
  --text: #F2F7F8;
  --text2: #A9BDC2;
  --amber: #F5A623;
  --on-amber: #1B1200;
  --glow: 46, 230, 214;
  --grain-a: .15;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --base: #EEF5F6;
  --card: #FFFFFF;
  --raised: #DCEBED;
  --line: #9DB7BC;
  --focus: #0A5F59;
  --accent: #0B6F69;
  --on-accent: #FFFFFF;
  --text: #0A1F25;
  --text2: #3B565E;
  --amber: #F5A623;
  --on-amber: #1B1200;
  --glow: 11, 111, 105;
  --grain-a: .08;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  background-color: var(--base);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .88 0 0 0 0 .92 0 0 0 .15 -.065'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(420px 320px at 100% 0, rgba(var(--glow), .16), transparent 70%),
    radial-gradient(520px 200px at 20% 0, rgba(var(--glow), .10), transparent 70%);
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="light"] body { background-blend-mode: soft-light, normal, normal; }

.app {
  max-width: 480px; margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
}
.screen { display: flex; flex-direction: column; gap: 6px; }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.brand { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.mode { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mode-btn {
  min-width: 64px; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--text2);
  font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* Controls: at least 64px tall; Start/Stop at least 88px. */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 6px; min-height: 64px; }
.seg-item { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 15px; cursor: pointer; font-weight: 600; font-size: 1.1875rem; color: var(--text2); }
.seg-item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-item:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.seg-item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg-item:has(input:disabled) { opacity: .55; }

.switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.switch-text { flex: 1; font-size: 1.0625rem; line-height: 1.2; }
.switch-text strong { font-size: 1.375rem; font-weight: 700; margin-right: 4px; }
.sub { display: block; color: var(--text2); font-size: .8125rem; line-height: 1.2; margin-top: 2px; }
.track { flex: none; width: 56px; height: 34px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); position: relative; }
.thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--text2); transition: left .12s ease-out; }
.switch:has(input:checked) .track { background: var(--accent); border-color: var(--accent); }
.switch:has(input:checked) .thumb { left: 25px; background: var(--on-accent); }
.switch:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch:has(input:disabled) { opacity: .55; }

.status { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; text-align: center; }
.status-main { font-size: 2.125rem; font-weight: 700; line-height: 1.05; }
.status-sub { color: var(--text2); font-size: 1rem; }
.dot { margin: 0 8px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; background-image: radial-gradient(260px 120px at 90% 0, rgba(var(--glow), .10), transparent 70%); }
.rate { padding: 8px 12px 10px; }
.rate-fig { text-align: center; font-size: 4.25rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.rate-fig .unit { font-size: 1.375rem; font-weight: 600; color: var(--text2); letter-spacing: 0; }
.rate-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.round { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: var(--text); font: inherit; font-size: 2rem; font-weight: 600; line-height: 1; cursor: pointer; }

input[type=range] { flex: 1; min-width: 0; height: 64px; background: transparent; accent-color: var(--accent); margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--base); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 3px solid var(--base); }

.btn { display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--line); border-radius: 22px; font: inherit; font-weight: 700; color: var(--text); background: var(--raised); cursor: pointer; text-align: center; }
.btn.start { min-height: 88px; font-size: 2rem; background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--glow), .25), 0 10px 30px rgba(var(--glow), .22); }
.btn.big { min-height: 68px; font-size: 1.375rem; padding: 6px 10px; }
.btn.amber { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair > .btn:only-of-type, .pair:has(> .btn[hidden]) { grid-template-columns: 1fr; }
.pair:has(> .btn[hidden]) { grid-template-columns: 1fr; }
.btn:disabled { opacity: .5; cursor: default; }

/* Running: Stop is outlined, not red. Confirm step inverts it. */
.app[data-state="running"] .btn.start { background: var(--raised); color: var(--text); border: 2px solid var(--accent); box-shadow: none; }
.app[data-state="running"] .btn.start[data-confirm="1"] { background: var(--text); color: var(--base); border-color: var(--text); }

.tip { margin: 0; text-align: center; color: var(--text2); font-size: .8125rem; line-height: 1.15; }
.flash { min-height: 0; text-align: center; font-weight: 600; color: var(--text); font-size: 1rem; }
.flash:empty { display: none; }

button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Report */
.report-title { margin: 6px 0 2px; font-size: 1.75rem; font-weight: 700; }
.report { margin: 0; padding: 14px; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 1.0625rem; line-height: 1.45; }

/* Press feel (WI-727 numbers): 96% over 80 ms, overshoot 102% at 55%, settled by 180 ms. scale only. */
.press { transition: scale 80ms ease-out; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.press.is-pressed { scale: .96; }
.press.is-pop { animation: pop 180ms ease-out; }
@keyframes pop { 0% { scale: .96; } 55% { scale: 1.02; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .press, .press.is-pressed, .press.is-pop { scale: none; animation: none; transition: none; }
  .thumb { transition: none; }
}

@media (max-height: 700px) {
  .status-main { font-size: 1.875rem; }
  .rate-fig { font-size: 3.5rem; }
}

@media (max-height: 660px) {
  .status-main { font-size: 1.625rem; }
  .rate-fig { font-size: 3rem; }
  .rate { padding-top: 4px; }
}

@media print {
  body { background: #fff; color: #000; }
  .top, #screen-main, .pair, #pdf, #newrun, #report-msg { display: none !important; }
  #screen-report { display: block !important; }
  .report { border: 0; background: none; color: #000; font-size: 14pt; }
}