/* Polish: the last of the UI clean-up (docs/UI-CLEANUP.md), as one override stylesheet.
   "Make it the most smooth appearance, feeling", and as clean as Snapchat's.

   Loaded LAST, after every other <link> in index.html (dev/qa/polish-wiring.mjs adds that link).
   To take it all back out, remove that one <link>: no other file depends on it.

   Rules this file keeps (CLAUDE.md):
   - only selectors the app already has; nothing changes what a feature does or where things are
   - tokens from css/tokens.css (spacing, corners, type, colours, shadows), with plain fallbacks
   - iPhones on iOS 15: no color-mix(), no :has(), a vh line before any dvh (there is none here),
     one rule per ::-webkit-… selector (there is none here), :focus-visible in a rule of its own
   - only transform and opacity move (never width, top, filter or backdrop-filter)
   - Reduce Motion: app.css already turns every transition and animation off; the block at the end
     says so again for what's added here
   - a few stylesheets are added later by code (faces, whatsnew, triprecap, lifeimport): rules for
     those start with :root, so they still win whatever order the sheets end up in */

/* ================================================================== 1. Text: bold, not heavy
   (UI clean-up A2) 800 is the iPhone's "Heavy". It stays on screen titles and big numbers; small
   labels, kickers and buttons go to 700, like the rest of the app. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no surprise text zoom when an iPhone turns sideways */

/* camera: the carousel's Effects / Lenses tabs, and the names under the looks (a short tab such as
   "Info" keeps a 44px finger's width now its letters are slimmer: dev/a11y-scan.mjs) */
.fs-tab { font-weight: var(--fw-bold, 700); min-width: var(--tap, 44px); justify-content: center; }
.fs-chip.fs-look span { font-weight: var(--fw-bold, 700); }
.mt-done { font-weight: var(--fw-bold, 700); }
.tx-done { font-weight: var(--fw-bold, 700); }
.st-label { font-weight: var(--fw-bold, 700); }

/* chat: plans and polls */
.cc-what small { font-weight: var(--fw-bold, 700); }
.cc-in { font-weight: var(--fw-bold, 700); }

/* the walk-through and its coach marks */
.fr-count { font-weight: var(--fw-bold, 700); }
.fr-promise b { font-weight: var(--fw-bold, 700); }
.fr-details summary { font-weight: var(--fw-bold, 700); }
.fr-pointer { font-weight: var(--fw-bold, 700); }
.tour-next { font-weight: var(--fw-bold, 700); }
.tour-tip h2 { font-weight: var(--fw-bold, 700); }

/* Family History: letters, stories, documents, keepers */
.lt-idea small { font-weight: var(--fw-bold, 700); }
.lt-sheet-kicker { font-weight: var(--fw-bold, 700); }
.lt-recipe-label { font-weight: var(--fw-bold, 700); }
.lt-home-kicker { font-weight: var(--fw-bold, 700); }
.fst-kicker { font-weight: var(--fw-bold, 700); }
.fst-ai { font-weight: var(--fw-bold, 700); }
.fst-art-n { font-weight: var(--fw-bold, 700); }
.fst-speed { font-weight: var(--fw-bold, 700); }
.fst-ch-n { font-weight: var(--fw-bold, 700); }
.fhd-add-btn { font-weight: var(--fw-bold, 700); }
.rd-editor-actions button { font-weight: var(--fw-bold, 700); }
.fhd-badge { font-weight: var(--fw-bold, 700); }
.fhd-where { font-weight: var(--fw-bold, 700); }
.rd-typed-tag, .rd-ai-tag { font-weight: var(--fw-bold, 700); }
.kp-month { font-weight: var(--fw-bold, 700); }
.kp-ok { font-weight: var(--fw-bold, 700); }

/* trips and trip books */
.trips-year { font-weight: var(--fw-bold, 700); }
.tb-kicker { font-weight: var(--fw-bold, 700); }
.tb-ch-num { font-weight: var(--fw-bold, 700); }
.tb-next span { font-weight: var(--fw-bold, 700); }
.tb-bar-title b { font-weight: var(--fw-bold, 700); }
.tb-toc-item i { font-weight: var(--fw-bold, 700); }
.tb-pick-when { font-weight: var(--fw-bold, 700); }
.trip-stop span { font-weight: var(--fw-bold, 700); }

/* the rest: photo books, capsules, baby books, faces, What's new */
.pb-guide summary { font-weight: var(--fw-bold, 700); }
.cap-count { font-weight: var(--fw-bold, 700); }
.mbm-cell .mbm-label { font-weight: var(--fw-bold, 700); }
:root .fv-h { font-weight: var(--fw-bold, 700); }
:root .wn-sheet .wn-badge { font-weight: var(--fw-bold, 700); }
:root .wn-sheet .wn-release h3 { font-weight: var(--fw-bold, 700); }

/* ================================================================== 2. Family History: one card style
   (F3) "Letters to the future" and "Forever archive" were serif, next to sans "My life" and
   "Documents": every card title is the same sans bold now; serif stays for the page title and the
   quoted question. */
.lt-home-quiet b { font-family: inherit; font-size: 16px; font-weight: var(--fw-bold, 700); }
.fv-card b { font-family: inherit; font-weight: var(--fw-bold, 700); }
/* the chosen tab ("Home"): a brown pill had a dark ring round it (two rules disagreed) */
.fh .tab[aria-pressed="true"] { border-color: var(--fh-accent, var(--chip-on)); }

/* ================================================================== 3. Settings: iPhone switches
   (A6, the optional part) The tick boxes become the switches every iPhone setting uses, on the right
   of their label, green when on. No markup change: still a checkbox to VoiceOver and TalkBack, and
   the whole row still toggles it. Only in Settings (js/sheets.js checkRow); every other tick box
   (choosing things in a list) stays a tick box. */
.settings-sheet .row-check { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; }
.settings-sheet .row-check .rc-text { flex: 1 1 auto; }
.settings-sheet .row-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 44px; height: 26px; margin: -1px 0 0; padding: 0; border: 0; border-radius: 13px;
  background: rgba(120,120,128,.24); cursor: pointer; vertical-align: middle;
  transition: background-color .2s var(--ease-out, ease);
}
.settings-sheet .row-check input[type="checkbox"]::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.06);
  transition: transform .3s var(--spring, ease);
}
.settings-sheet .row-check input[type="checkbox"]:checked { background: var(--ok, #1fbf6a); }
.settings-sheet .row-check input[type="checkbox"]:checked::before { transform: translateX(18px); }
.settings-sheet .row-check input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.settings-sheet .row-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--send, #0eadff); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .settings-sheet .row-check input[type="checkbox"] { background: rgba(120,120,128,.4); }
  .settings-sheet .row-check input[type="checkbox"]:checked { background: var(--ok, #1fbf6a); }
}

/* ================================================================== 4. Chat: Snapchat's message box
   A round grey pill; typing shows a faint blue edge, not a grey border plus a glow. */
.talk-view .chat-bar textarea { border-radius: 22px; }
.talk-view .chat-bar textarea:focus { border-color: transparent; box-shadow: 0 0 0 2px rgba(14,173,255,.28); }

/* ================================================================== 5. Pressing things: a quick dip, a springy return
   app.css gives most buttons a dip already. The camera's own icons, your avatar and the five
   screens' tabs snapped in and out with no motion: now they dip fast (80 ms) and spring back. */
.ibtn, .avatar { transition: transform .32s var(--spring, ease), opacity .2s var(--ease-out, ease); }
.ibtn:active, .avatar:active { transition-duration: .08s, .08s; transition-timing-function: var(--ease-out, ease); }
.cam-controls #memoriesBtn { transition: opacity .15s, transform .32s var(--spring, ease); }   /* (camera.css gives it its own fade) */
.cam-controls #memoriesBtn:active { transition-duration: .15s, .08s; }
.nav-tab svg { transition: transform .32s var(--spring, ease); }
.nav-tab:active svg { transition-duration: .08s; transition-timing-function: var(--ease-out, ease); }
.nav-tab .nav-label { transition: opacity .2s var(--ease-out, ease); }
.nav-tab:active .nav-label { opacity: .7; transition-duration: .08s; }

/* no "stuck" hover after a tap on a phone (a phone has no mouse to move away) */
@media (hover: none) {
  .tcard:hover rect { stroke: var(--line); }
  .tcard.focus:hover rect { stroke: var(--accent); }
  :root .tr-mem:hover { transform: rotate(-2deg); }
  :root .tr-mem:nth-of-type(even):hover { transform: rotate(2deg); }
}

/* ================================================================== 6. Things that float: sheets and toasts
   One soft shadow lifts a sheet off the shaded page; its handle shows in dark mode too (it was the
   line colour, nearly black on black). Toasts are frosted glass that drops in with a little spring. */
.sheet, .sheet-leaving { box-shadow: 0 -6px 28px rgba(0,0,0,.16); }
.sheet .grab, .sheet-leaving .grab { background: rgba(120,120,128,.32); }
#toast, .st-toast {
  background: rgba(28,28,30,.86);
  box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.22));
  transition: opacity .2s var(--ease-out, ease), transform .36s var(--spring, ease);
}
/* (the frost only while one shows: a hidden toast is still on the page, and a blur kept under it
   would be worked out again on every frame of the camera) */
#toast.show, .st-toast.show { -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
.scrub-pill { box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.22)); }
.talk-latest { box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.22)); }

/* ================================================================== 7. Corners: one set
   (tokens.css) grid tiles 4, fields 12, cards 16. Small differences (3 / 13 / 14 / 18) made
   neighbouring things look slightly off. */
.tile { border-radius: var(--r-tile, 4px); }
.talk-g-tile { border-radius: var(--r-tile, 4px); }
#memories.selecting .grid .tile.picked::before { border-radius: var(--r-tile, 4px); }
.field input, .field select { border-radius: var(--r-md, 12px); }
.search-top input { border-radius: var(--r-md, 12px); }
.setup-card, .date-card, .coming-card, .fam-big { border-radius: var(--r-lg, 16px); }
.setup-step, .pchip { border-radius: var(--r-md, 12px); }

/* sizes: list rows and a sheet's grey line on the 15 / 13 scale (half-pixel sizes folded in) */
.list .item { font-size: var(--fs-md, 15px); }
.sheet .hint, .sheet-leaving .hint { font-size: var(--fs-sm, 13px); }

/* ================================================================== 8. Dark mode: no pale cards on a black page
   (as D1 did for "Coming up") the time capsule and baby book banners stayed light pastel. */
@media (prefers-color-scheme: dark) {
  .cap-banner { background: linear-gradient(135deg, #3a1f2b, #3a2616); color: #ffe6ec; }
  .cap-banner.soon { background: linear-gradient(135deg, #3a2a14, #3a1f2b); }
  .cap-banner.baby { background: linear-gradient(135deg, #12283a, #133022); color: #dff3ff; }
  .cap-soon { background: linear-gradient(135deg, #3a1f2b, #3a2616); color: #ffe6ec; }
}

/* ================================================================== 9. Older iPhones (iOS 15.0–16.1)
   (A11, the rest) These colours are written as color-mix() with var() inside, after a plain one.
   An iPhone before iOS 16.2 accepts the line (it has var() in it) and then can't work it out, so
   the plain colour above it is lost too: sticky headers went see-through over what scrolls under
   them, and some borders and tints vanished. Here the plain colours win again, only on those phones. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fv-head { background: var(--fv-paper); }
  .tb-top { background: var(--bg); }
  :root .tr-reader-top { background: var(--fh-paper); }
  :root .tr-edit .tr-row { background: var(--fh-paper); }
  :root .li-warn { background: rgba(255,159,10,.18); }
  .lp-row.year { background: rgba(128,128,128,.08); }
  .lp-sugg { background: rgba(128,128,128,.06); }
  .lt-person.child .lt-avatar { background: var(--fh-card); }
  .lt-tile.written { background: var(--fh-card); }
  .lt-opens-fixed.legacy { background: var(--fh-card); }
  .lt-pick-btn { border: 1.5px dashed var(--fh-accent); }
  .sheet.lt-sheet .field input:focus { outline: 2px solid var(--fh-accent); }
  .sheet.lt-sheet .cap-letter-input:focus { outline: 2px solid var(--fh-accent); }
  .sheet.lt-sheet .cap-letter-input::placeholder { color: var(--fh-muted); }
  .sheet.lt-sheet .field input::placeholder { color: var(--fh-muted); }
  .sheet.lt-sheet .cap-letter-input.lt-paper { background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(128,128,128,.28) 27px 28px); }
  .fh-cite { border: 1px solid rgba(128,128,128,.35); }
  .fh-lead[data-status="confirmed"] { background: rgba(53,122,68,.1); }
  .fh-badge.strong { background: rgba(63,138,79,.16); }
  .fh-badge.weak { background: var(--_card); }
  .fhd-badge { background: rgba(128,128,128,.22); }
  .fh-docs mark { background: rgba(128,128,128,.42); }
  mark.fst-mark { background: rgba(128,128,128,.32); }
  .fst-theme[aria-pressed="true"] { background: var(--fst-card); }
  .fst-art { background: var(--fst-paper); }
  .fst-seg::before { background: rgba(128,128,128,.15); }
  .fst-seg[aria-current="true"]::before { background: rgba(128,128,128,.3); }
  .tour-tip { box-shadow: 0 12px 40px rgba(0,0,0,.38), 0 0 0 1px rgba(128,128,128,.12); }
  .mbm-ph { color: var(--muted); }
}

/* ================================================================== 10. Reduce Motion
   (app.css already stops every transition and animation; this says it for what's added here, so
   the switch, the toasts and the presses just change, with no movement) */
@media (prefers-reduced-motion: reduce) {
  .ibtn, .avatar, .nav-tab svg, .nav-tab .nav-label, #toast, .st-toast { transition: none; }
  .settings-sheet .row-check input[type="checkbox"] { transition: none; }
  .settings-sheet .row-check input[type="checkbox"]::before { transition: none; }
}