/* TimeLapse chooser (choose.html): Liquid Glass page sheet, unit U5.
   Loaded after tl-tokens.css; uses its --tl-* / --r-* / --sh-* / --font-* names and never redefines them.
   Spec: web-lg-spec.md §5.6.3 (D6 language, copy and device logic unchanged). Nothing here is blurred (§5.2.2).
   The behavioural rules (.stack column, this-device order, .note / .qr visibility) stay inline in
   choose.html, after this sheet. This sheet never sets display on .badge or .note, never overrides
   the hidden QR blocks, and carries no hidden-attribute rule: the inline script toggles them. */

*{ box-sizing:border-box; }
body{ font:400 15px/1.55 var(--font-ui); }

/* ---------- header: floating glass pill, 56 h, r28, not sticky, no blur ---------- */
.top{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:-webkit-max-content; width:max-content; max-width:calc(100% - 32px);
  min-height:56px; margin:12px auto 0; padding:0 22px 0 14px; border-radius:28px;
  background-color:var(--tl-glass);
  background-image:linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 42%);
  border:1px solid var(--tl-glass-border);
  box-shadow:var(--hi-inset), var(--sh-small);
}
.top .glyph{ flex:none; width:30px; height:30px; }
.top .w{ font:500 25px/1 var(--font-display); letter-spacing:-.02em; color:var(--tl-ink); white-space:nowrap; }
.top .w b{ font-weight:900; color:var(--tl-primary-text); }               /* large text on glass, 4.79+ */

/* ---------- column: 16 gutters (≤400), 20 (≤600), max 520 centred above ---------- */
.wrap{ max-width:568px; margin:0 auto; padding:0 24px 56px; text-align:center; }
@media (max-width:600px){ .wrap{ padding:0 20px 48px; } }
@media (max-width:400px){ .wrap{ padding:0 16px 40px; } }

/* ---------- "Ring account linked": glass pill, check disc 20 primary, text secondary 14/600 ---------- */
.linked{
  display:inline-flex; align-items:center; gap:10px;
  margin:26px auto 0; padding:6px 16px 6px 7px; border-radius:var(--r-pill);
  font:600 14px/1.3 var(--font-ui); color:var(--tl-secondary);              /* 6.14 on glass .72/glow */
  background-color:var(--tl-glass);
  background-image:linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 45%);
  border:1px solid var(--tl-glass-border);
  box-shadow:var(--hi-inset), var(--sh-icon);
}
.linked .ck{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--tl-primary); color:var(--tl-cream);
  display:inline-flex; align-items:center; justify-content:center; }
.linked .ck svg{ display:block; }

/* ---------- title + lede: text sits on the page background ---------- */
h1{
  font-family:var(--font-display); font-weight:900; font-size:clamp(28px, 5.4vw, 40px); line-height:1.1;
  letter-spacing:-.025em; color:var(--tl-ink); margin:18px auto 10px; max-width:620px;
}
.lede{
  font-size:16px; line-height:1.55; color:var(--tl-muted-on-tint);           /* 5.58 on bg, 4.68 at the glow peak */
  margin:0 auto 28px; max-width:460px;
}
@media (min-width:601px){ .lede{ font-size:17px; } }

/* ---------- platform cards: regular glass r32 (28 at ≤600 through --r-card) ---------- */
.stack{ gap:16px; text-align:left; }
.card{
  position:relative; display:flex; align-items:flex-start; gap:16px;
  padding:22px 22px 20px; border-radius:var(--r-card);
  background-color:var(--tl-glass);
  background-image:linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 42%);
  border:1px solid var(--tl-glass-border);
  box-shadow:var(--hi-inset), var(--sh-regular);
}
@media (max-width:400px){ .card{ padding:20px 18px 18px; gap:14px; } }
/* Priority (03/10 polish): the card of the device you are on is the strongest thing on the page at every
   width: brighter opaque-glass fill, 1.5px primary border, a soft primary halo and the green glow, and it
   is the only card that keeps a filled CTA. The other cards (web included, see below) step back. */
.card[data-this-device]{
  background-color:var(--tl-glass-fallback);
  border:1.5px solid var(--tl-primary);
  box-shadow:var(--hi-inset), 0 0 0 4px rgba(55,118,90,.14), 0 16px 44px rgba(55,118,90,.24);
}

/* icon tile 56 r18: iOS ink + cream glyph, Android primary + cream glyph, web cream .12 on the secondary card */
.card .ic{
  flex:none; width:56px; height:56px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--tl-cream); background:var(--tl-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.card .ic svg{ width:28px; height:28px; }
#tl_card_android .ic{ background:var(--tl-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
/* web tile: secondary + cream glyph (6.01) on the glass card; cream .12 only on the dark this-device card */
#tl_card_web .ic{ background:var(--tl-secondary); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
#tl_card_web[data-this-device] .ic{ background:rgba(243,239,228,.12); border:1px solid rgba(243,239,228,.2); box-shadow:none; }

.card .bd{ flex:1; min-width:0; }
/* "You're on this device": mono 11 caps, secondary on primaryTint (5.27). No display here (the script sets it). */
.badge{
  font:700 11px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--tl-secondary); background:var(--tl-primary-tint);
  border-radius:var(--r-pill); padding:4px 10px; margin-bottom:10px;
}
.card h2{ font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.25; letter-spacing:-.01em; margin:0 0 4px; }
.card p{ font-size:14.5px; line-height:1.5; color:var(--tl-muted); margin:0 0 14px; }   /* muted on glass .72: 4.62+ */

/* ---------- web card ----------
   Not this device (phones, tablets): a plain glass card like the others, ink title, muted body, outline CTA.
   This device (desktop): D6 secondary fill + honey CTA, plus the primary halo, so it leads the row. */
#tl_card_web[data-this-device]{
  background-color:var(--tl-secondary); background-image:none;
  border:1.5px solid var(--tl-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 4px rgba(55,118,90,.18), 0 18px 44px rgba(55,118,90,.28);
}
#tl_card_web[data-this-device] h2{ color:var(--tl-cream); }                  /* 6.01 */
#tl_card_web[data-this-device] p{ color:rgba(243,239,228,.9); }             /* 5.22 */
#tl_card_web .badge{ background:var(--tl-accent); color:var(--tl-ink); }    /* honey + ink 6.72 (cream on .14 = 4.43 fails); shown only on this device */

/* ---------- buttons: the chooser's own family (tl-tokens.css carries none, §5.1.1) ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; padding:0 22px; border:0; border-radius:26px;
  font:700 15px/1.2 var(--font-ui); text-align:center; text-decoration:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition: transform var(--dur-press) var(--ease-spring), background-color var(--dur-fade), box-shadow var(--dur-press);
}
.btn:active{ transform:scale(.97); }
/* primary (PrimaryButton): cream on primary 4.68 */
.btn-primary{ background:var(--tl-primary); color:var(--tl-cream); box-shadow:var(--hi-primary), var(--sh-primary); }
/* Outline CTA for every card that is NOT this device (the store buttons of the other phone, and the web
   "Continue in the browser" on a phone): field fill, 1.5px primary edge drawn inset (no size change),
   secondary text (6.4 on field over glass; edge 4.9 vs the card). Same 52 h, same tap target. */
.btn-ghost,
.card:not([data-this-device]) .btn-primary{
  background:var(--tl-field); color:var(--tl-secondary);
  box-shadow:inset 0 0 0 1.5px var(--tl-primary);
}
/* web CTA on this device: honey fill + ink 6.72 (fill vs the secondary card 3.10) */
#tl_card_web[data-this-device] .btn-ghost{ background:var(--tl-accent); color:var(--tl-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px rgba(31,42,28,.22); }
@media (hover:hover){
  .btn-primary:hover{ background:var(--tl-secondary); }                      /* cream on secondary 6.01 */
  .btn-ghost:hover,
  .card:not([data-this-device]) .btn-primary:hover{ background:var(--tl-surface3); }   /* secondary on #EAE5D8 5.4 */
  #tl_card_web[data-this-device] .btn-ghost:hover{ background:var(--tl-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 32px rgba(31,42,28,.3); }
}
/* keep the inset edge under the token focus band (the band is box-shadow too) */
.btn-ghost:focus-visible,
.card:not([data-this-device]) .btn-primary:focus-visible{ box-shadow:inset 0 0 0 1.5px var(--tl-primary), 0 0 0 2px var(--tl-knob); }

/* "Not installed yet? …" / store link: 13.5 underline on glass. muted #66705F measured 4.04-4.26 over the
   glow (G7), so it takes muted-on-tint #58624F: 5.43 on the measured median, 4.94 on the darkest pixel */
.alt{
  display:inline-block; margin-top:10px; padding:2px 0;
  font-size:13.5px; line-height:1.45; color:var(--tl-muted-on-tint);
  text-decoration:underline; text-underline-offset:2px;
}
/* signed-in note (visibility is inline): secondary on glass 6.14 */
.card .note{ margin:8px 0 0; font-size:13.5px; line-height:1.45; color:var(--tl-secondary); }   /* (0,2,0) beats .card p */

/* ---------- desktop QR (visibility is inline): dashed control line, r16, field fill; canvas stays on white ---------- */
.qr{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 14px; padding:12px; border:1.5px dashed var(--tl-line-control); border-radius:var(--r-cell);
  background:var(--tl-field);
}
.qr canvas{ flex:none; width:112px; height:112px; border-radius:8px; background:#fff; image-rendering:pixelated; }
.qr span{ flex:1; min-width:120px; font-size:13.5px; line-height:1.45; color:var(--tl-muted); }

/* ---------- footer note: on the page background ---------- */
.foot{ margin:28px auto 0; max-width:460px; font-size:13px; line-height:1.6; color:var(--tl-muted-on-tint); }   /* 5.58 */
.foot a{ color:var(--tl-ink); text-decoration:underline; text-underline-offset:2px; }

/* ---------- touch: 44 px targets ---------- */
@media (pointer:coarse){
  .alt{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:0; }
  .foot a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
}

/* ---------- ≥ 1100: three 330 px cards in one row, centred text (D6) ---------- */
@media (min-width:1100px){
  .wrap{ max-width:1120px; padding:0 32px 72px; }
  .top{ margin-top:16px; }
  .linked{ margin-top:34px; }
  h1{ font-size:40px; margin:22px auto 14px; }
  .lede{ font-size:18px; margin-bottom:40px; }
  /* beats the later inline ".stack{flex-direction:column}" by specificity (0,1,1) */
  main .stack{ flex-direction:row; justify-content:center; align-items:stretch; gap:20px; }
  .card{ flex:0 0 330px; width:330px; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:30px 28px 26px; }
  .card .ic{ width:76px; height:76px; border-radius:24px; }
  .card .ic svg{ width:38px; height:38px; }
  .card .bd{ width:100%; display:flex; flex-direction:column; align-items:center; }
  .card h2{ margin-bottom:6px; }
  .card .btn{ margin-top:auto; }
  .qr{ flex-direction:column; justify-content:center; gap:10px; margin:2px 0 18px; padding:14px 14px 12px; }
  .qr span{ flex:none; min-width:0; }
  .foot{ margin-top:36px; }
}

/* ---------- reduced motion: component half of §5.3.6 (the universal part is in tl-tokens.css) ---------- */
@media (prefers-reduced-motion: reduce){
  .btn:active{ transform:none !important; }
}

/* ---------- focus: the ink ring vanishes on the secondary card (2.16); the cream band carries it (6.01) ---------- */
#tl_card_web[data-this-device] :focus-visible{ outline-color:var(--tl-cream); box-shadow:0 0 0 2px var(--tl-ink); }

/* ---------- forced colors: let the system draw edges, drop decoration ---------- */
@media (forced-colors: active){
  .top, .linked, .card, .card .ic, .badge, .btn, .qr{ border:1px solid CanvasText; box-shadow:none; background-image:none; }
  .qr canvas{ forced-color-adjust:none; }
  body::before, body::after{ display:none; }
}