/* TimeLapse web, Liquid Glass: shared token sheet (unit U1).
   Loaded first by every S3 page. No class selectors except the utilities .sr-only .tnum .mono .daychip,
   .switch, .opt-row/.opt-cell and .link (spec 5.1.1 as fixed by the critic). Page-specific rules,
   component classes and the blurred-surface fallbacks live in the page sheets.
   Light only. Values copied byte for byte from src/theme.js (spec 5.1.2). */

/* ---- 5.1.2 tokens ---- */
:root{
  color-scheme: only light;

  /* ---- tokens.* (theme.js) — 1:1, same order ---- */
  --tl-bg:                     #F3EFE4;
  --tl-ink:                    #1F2A1C;
  --tl-muted:                  #66705F;
  --tl-primary:                #37765A;
  --tl-primary-text:           #37765A;
  --tl-primary-tint:           rgba(55,118,90,0.12);
  --tl-secondary:              #2E644C;
  --tl-accent:                 #E3A21A;
  --tl-accent-text:            #7A5600;
  --tl-accent-bg:              rgba(227,162,26,0.20);
  --tl-line:                   rgba(31,42,28,0.12);
  --tl-line2:                  rgba(31,42,28,0.26);
  --tl-chip-bg:                rgba(31,42,28,0.06);
  --tl-field:                  rgba(255,255,255,0.70);
  --tl-danger:                 #B4552F;
  --tl-danger-on-dark:         #E0865F;
  --tl-danger-line:            rgba(180,85,47,0.45);
  --tl-danger-tint:            rgba(180,85,47,0.12);
  --tl-glass:                  rgba(251,250,246,0.72);
  --tl-glass-fallback:         rgba(251,250,246,0.94);
  --tl-glass-border:           rgba(255,255,255,0.62);
  --tl-glass-hi:               rgba(255,255,255,0.85);
  --tl-glass-hi2:              rgba(255,255,255,0.42);
  --tl-shadow:                 rgba(31,42,28,0.14);
  --tl-skel:                   rgba(31,42,28,0.08);
  --tl-skel-hi:                rgba(31,42,28,0.16);
  --tl-glow:                   rgba(55,118,90,0.14);
  --tl-glow2:                  rgba(227,162,26,0.12);
  --tl-over-photo:             rgba(251,250,246,0.84);
  --tl-over-photo-fallback:    rgba(251,250,246,0.94);
  --tl-over-photo-border:      rgba(255,255,255,0.65);
  --tl-on-photo-ink:           #1F2A1C;
  --tl-dark-over-photo:        rgba(31,42,28,0.42);
  --tl-dark-over-photo-fallback: rgba(31,42,28,0.62);
  --tl-dark-over-photo-border: rgba(255,255,255,0.22);
  --tl-dark-chip:              rgba(31,42,28,0.70);
  --tl-ready-chip:             #37765A;             /* opaque: the shipped contrast fix (pack had .92) */
  --tl-cream:                  #F3EFE4;
  --tl-cream-muted:            rgba(243,239,228,0.66);  /* dots only, never text (3.11:1) */
  --tl-knob:                   #FBFAF6;
  --tl-hero-bg:                #1F2A1C;

  /* ---- theme.colors keys not already covered above ---- */
  --tl-surface:                #FBFAF6;   /* colors.surface / surface2 */
  --tl-surface3:               #EAE5D8;   /* colors.surface3 */
  --tl-accent-dim:             rgba(55,118,90,0.38);   /* colors.accentDim (disabled green) */
  --tl-success-soft:           rgba(55,118,90,0.16);   /* colors.successSoft */
  --tl-muted-tint:             rgba(110,117,104,0.16); /* statusMeta paused/waiting `soft` */

  /* ---- contrast fixes the mobile screens shipped as literals (reused verbatim) ---- */
  --tl-danger-text:            #8F3F20;   /* ProjectsScreen errPill, SettingsScreen deleteText: danger TEXT on any tint/translucent surface */
  --tl-danger-tint-opaque:     #EBDDCE;   /* ProjectsScreen errPill: dangerTint pre-composited on bg */
  --tl-muted-on-tint:          #58624F;   /* SettingsScreen privacyBody, CreateProject tzOffsetOn: muted TEXT on tints */

  /* ---- web-only (computed in §5.9; no mobile equivalent) ---- */
  --tl-line-control:           #7D8576;   /* ≥3:1 boundary for inputs, code cells, toggle-off track (WCAG 1.4.11) */
  --tl-header-fill:            rgba(251,250,246,0.86);  /* floating header over scrolling photos */
  --tl-scrim:                  rgba(31,42,28,0.45);
}

/* ---- 5.1.4 legacy aliases (inline styles emitted by dashboard.js) ---- */
:root{ --ink: var(--tl-ink); --muted: var(--tl-muted); }

/* ---- 5.2.3 token swap: less transparency / more contrast makes every translucent surface opaque.
   The blurred-surface selector rules of 5.2.3 are in tl-dashboard.css. ---- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  :root{
    --tl-glass: var(--tl-glass-fallback);
    --tl-header-fill: var(--tl-glass-fallback);
    --tl-over-photo: var(--tl-over-photo-fallback);
    --tl-dark-chip: rgba(31,42,28,0.86);
  }
}

/* ---- 5.2.4 page background: cream + two fixed glows ---- */
body{ background: var(--tl-bg); }
body::before, body::after{ content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; }
/* glow (green) — mobile "list": 520 at left −140, top −200, transparent at 68 % */
body::before{ width:520px; height:520px; left:-140px; top:-200px;
  background: radial-gradient(closest-side, var(--tl-glow), rgba(55,118,90,0) 68%); }
/* glow2 (honey) — 420 at right −180, top 380 */
body::after{ width:420px; height:420px; right:-180px; top:380px;
  background: radial-gradient(closest-side, var(--tl-glow2), rgba(227,162,26,0) 68%); }
@media (min-width:921px){  /* desktop scale (README: blobs 420–1200 off-canvas) */
  body::before{ width:900px; height:900px; left:-260px; top:-420px; }
  body::after { width:640px; height:640px; right:-220px; top:420px; }
}

/* ---- 5.3.1 fonts: metric-matched local fallbacks (no network request) + stacks ---- */
/* Metric-matched fallbacks: computed with fontTools against Arial / Arial Bold
   (English letter-frequency weighted advance; ascent/descent from hhea). On Android "Arial" resolves to Roboto. */
@font-face{ font-family:"Hanken Fallback";    src:local("Arial");      size-adjust:101.5%; ascent-override:98.5%;  descent-override:29.8%; line-gap-override:0%; }
@font-face{ font-family:"Hanken Fallback";    font-weight:700; src:local("Arial Bold"), local("Arial-BoldMT"); size-adjust:95.4%; ascent-override:104.8%; descent-override:31.8%; line-gap-override:0%; }
@font-face{ font-family:"Schibsted Fallback"; src:local("Arial");      size-adjust:106.2%; ascent-override:91.9%;  descent-override:24.3%; line-gap-override:0%; }
@font-face{ font-family:"Schibsted Fallback"; font-weight:900; src:local("Arial Bold"), local("Arial-BoldMT"); size-adjust:105.1%; ascent-override:92.9%; descent-override:24.5%; line-gap-override:0%; }

:root{
  --font-display: "Schibsted Grotesk", "Schibsted Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui:      "Hanken Grotesk", "Hanken Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- 5.3.2 base type ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; font:400 14.5px/1.55 var(--font-ui); color:var(--tl-ink); -webkit-font-smoothing:antialiased; font-synthesis:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--tl-ink); }
.tnum, .mono, .daychip{ font-variant-numeric: tabular-nums; }
::selection{ background: rgba(227,162,26,.35); }

/* ---- 5.3.3 spacing (4-pt) ---- */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-14:56px; --s-18:72px;
}

/* ---- 5.3.4 radii ---- */
:root{
  --r-card: 32px;  --r-media: 24px;   /* desktop card r32 pad 8 → media r24 (README) */
  --r-row: 26px;                      /* D1 side rows, spotlight panel */
  --r-section: 26px;                  /* settings blocks; notices use 24 */
  --r-notice: 24px; --r-bar: 32px;    /* header 64h r32 */
  --r-modal: 32px; --r-input: 18px; --r-cell: 16px; --r-opt: 14px; --r-pill: 999px;
}
@media (max-width:600px){ :root{ --r-card: 28px; --r-media: 21px; --r-row: 22px; --r-section: 22px; --r-modal: 28px; } } /* = mobile theme.radius card 28 / media 21 / section 22 */

/* ---- 5.3.5 shadows ---- */
:root{
  --sh-regular:  0 18px 44px var(--tl-shadow);
  --sh-bar:      0 20px 50px var(--tl-shadow);
  --sh-icon:     0 8px 24px var(--tl-shadow);
  --sh-small:    0 14px 36px var(--tl-shadow);
  --sh-panel:    0 24px 60px var(--tl-shadow);
  --sh-photo:    0 12px 30px rgba(0,0,0,0.18);
  --sh-primary:  0 12px 28px rgba(55,118,90,0.30);   /* PrimaryButton */
  --hi-inset:    inset 0 1px 0 var(--tl-glass-hi);
  --hi-primary:  inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ---- 5.3.6 motion ---- */
:root{
  --ease-spring: cubic-bezier(.2,.8,.2,1);   /* README web equivalent of damping 18 / stiffness 180 */
  --dur-press: 150ms;  --dur-spring: 320ms;  --dur-toggle: 250ms;
  --dur-sheet-in: 380ms; --dur-fade: 120ms; --dur-shimmer: 1600ms; --dur-pulse: 1800ms;
}
@keyframes tl-in{ from{ opacity:0; transform: translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes tl-ring{ from{ transform:scale(1); opacity:.55; } to{ transform:scale(1.9); opacity:0; } }
@keyframes tl-shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }

/* 5.3.6 reduced motion, universal part. The component lines of the same block (press transforms,
   card hover, modal / error-state fade, capture pulse, skeleton shimmer) are in tl-dashboard.css. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: var(--dur-fade) !important; transition-property: opacity, background-color, color, border-color !important;
    scroll-behavior: auto !important;
  }
}
@keyframes tl-fade{ from{opacity:0} to{opacity:1} }

/* ---- 5.4.5 focus, element level ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible){ outline:none; }
:where(a, button, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--tl-ink); outline-offset:2px;
  box-shadow:0 0 0 2px var(--tl-knob);          /* cream band between element and ink ring */
}

/* ---- 5.4.9 fields, element level (16px: no zoom on focus in iOS WKWebView) ---- */
input, select, textarea{
  width:100%; min-height:48px; padding:0 16px;
  border:1.5px solid var(--tl-line-control); border-radius:16px;
  background:var(--tl-field); color:var(--tl-ink);
  font:500 16px/1.3 var(--font-ui);
  transition: border-color 200ms, box-shadow 200ms;
}
input::placeholder{ color:var(--tl-muted); opacity:1; }
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--tl-primary); box-shadow:0 0 0 1.5px var(--tl-primary), 0 0 0 5px rgba(55,118,90,.18); }
input:disabled, select:disabled{ background:var(--tl-chip-bg); cursor:not-allowed; }
select{ appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F2A1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
input[type=time]{ min-width:0; }
input[type=time]::-webkit-date-and-time-value{ text-align:left; }

/* ---- 5.4.10 toggle (no consumer in phase 1) ---- */
input[type=checkbox].switch{ appearance:none; -webkit-appearance:none; position:relative; width:51px; height:31px; min-height:0; padding:0;
  border:0; border-radius:999px; background:var(--tl-line-control); cursor:pointer; transition:background-color var(--dur-toggle); }
input[type=checkbox].switch::after{ content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:var(--tl-knob); box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform var(--dur-toggle) var(--ease-spring); }
input[type=checkbox].switch:checked{ background:var(--tl-primary); }
input[type=checkbox].switch:checked::after{ transform:translateX(20px); }

/* ---- 5.4.11 option cells (no consumer in phase 1) ---- */
.opt-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; }
.opt-cell{ min-height:48px; padding:0 6px; border-radius:var(--r-opt); border:1.5px solid var(--tl-line-control);
  background:transparent; color:var(--tl-muted-on-tint); font:500 14px var(--font-ui); cursor:pointer;
  transition: background-color var(--dur-toggle), border-color var(--dur-toggle), color var(--dur-toggle); }
.opt-cell[aria-pressed="true"], .opt-cell[aria-checked="true"]{ background:var(--tl-primary); border-color:var(--tl-primary); color:var(--tl-cream); font-weight:700; }

/* ---- 5.4.4 TextLink ---- */
.link{ color:var(--tl-secondary); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---- 5.4.13 visually hidden ---- */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- 5.1.5 dark set: recorded, NOT wired (theme.js lines 53-58, copied from its comment). Every page is color-scheme only light.
   bg #14241C, ink #F3EFE4, muted rgba(243,239,228,.66), glass rgba(46,100,76,.42),
   fallback rgba(46,100,76,.94), glassBorder rgba(243,239,228,.16), glassHi .22, glassHi2 .10,
   shadow rgba(0,0,0,.45), chipBg .10, field .08, line .14, line2 .28, primaryText #8FC7A6,
   primaryTint rgba(143,199,166,.14), accentText #F4C24B, accentBg .24, danger #E0865F,
   dangerLine rgba(224,134,95,.45), dangerTint .16, glow rgba(55,118,90,.28), glow2 rgba(227,162,26,.14).
*/