/* Partner page. Subtle glow (Stephen, 2026-11-07, canvas "Gentler tones" C): warm charcoal menu and buttons, white
   cards on a warm off-white page, the flame orange for what needs you, and a blue-leaning green for done (darker than the
   orange, so the two differ in lightness as well as hue). The glow is kept small: a faint warm light behind Home's
   greeting and a soft halo around Needs you, never a peach fill over the page. Colour is never the only signal. */
:root {
  --bg: #fffcf8; --fg: #2b2521; --muted: #6a5f55; --card: #ffffff; --line: #f0e6d9; --accent: #2b2521; --on-accent: #fff; --flame: #e8742a; --flame-text: #a84c0d;
  --glow: #ffebd6; --halo-line: #f3d9bf; --halo: rgba(232, 116, 42, .35); --ico-glow: rgba(232, 116, 42, .16);
  --seen: #137a5e; --seen-bg: #d8eee6; --seen-fg: #0d5443; --seen-text: #137a5e;
  --idle: #cfcbc2; --idle-bg: #efede8; --idle-fg: #4a463e;
  --gap: #c2410c; --gap-bg: #f6dccb; --gap-fg: #8a3b12;
  --unknown: #857b70; --unknown-bg: #efe9e0; --unknown-fg: #4a433c;
  --error: #a3261b; --empty: #f6efe6; --band: #eadfd0;
  --review: #a3261b; --review-bg: #f3d6d0; --review-fg: #7a1c14;
  --moment: #a86b0c; --moment-bg: #f3e2bd; --moment-fg: #6e4508;
  --quiet: #5d6474; --quiet-bg: #efe9e0;
  /* Picked days (2026-11-07, as the app's date picker A): the lamp's amber, the first and last deeper. */
  --pick: #f8d3b0; --pick-end: #efa66b; --pick-fg: #2b2521; --pick-sub: #5a3a22; --pick-line: #efb98c; --pick-tick: #2b2521; --pick-tick-fg: #fff;
  --show-bg: #2b2521; --show-fg: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16120f; --fg: #f7efe6; --muted: #c8bcae; --card: #261f1a; --line: #4a3f35; --accent: #f08a45; --on-accent: #1f1a17; --flame: #f08a45; --flame-text: #f5b07a;
    --glow: rgba(240, 138, 69, .14); --halo-line: #5a3a22; --halo: rgba(240, 138, 69, .28); --ico-glow: rgba(240, 138, 69, .2);
    --seen: #5cc29f; --seen-bg: #12392f; --seen-fg: #d8eee6; --seen-text: #7fd6b6;
    --idle: #5a574f; --idle-bg: #34322c; --idle-fg: #e4e0d6;
    --gap: #e08a5a; --gap-bg: #6b2e10; --gap-fg: #f6dccb;
    --unknown: #8a8577; --unknown-bg: #3a3830; --unknown-fg: #e4e0d6;
    --error: #ff9a8c; --empty: #1e1915; --band: #0e0b09;
    --review: #ff8a7a; --review-bg: #5a1c15; --review-fg: #ffd9d2;
    --moment: #e6b44f; --moment-bg: #4d3810; --moment-fg: #f6e2b5;
    --quiet: #a9b0c0; --quiet-bg: #2e2d29;
    --pick: #4a2c16; --pick-end: #7a421a; --pick-fg: #fff3e6; --pick-sub: #f2d2b4; --pick-line: #8a5228; --pick-tick: #ffc48a; --pick-tick-fg: #2b1a0c;
    --show-bg: #f7efe6; --show-fg: #1f1a17;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.4rem; margin: 1.2em 0 .4em; }
h3 { font-size: 1.05rem; margin: .8em 0 .3em; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.who { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.lead { font-size: 1.05rem; }
.muted { color: var(--muted); margin: .2em 0; overflow-wrap: anywhere; }
.small { font-size: .85rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 12px 0; }
.card.danger { border: 1px solid var(--line); background: transparent; }
form.card { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
label { font-weight: 600; margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.check input { width: auto; margin-top: 4px; }
.check label { margin-top: 0; font-weight: 400; }
input, select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; max-width: 420px; }
button { font: inherit; line-height: 1.25; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.link { border: none; padding: 4px 0; text-decoration: underline; background: none; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gap); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.daynav strong { flex: 1; text-align: center; min-width: 120px; }
.notice { padding: 10px 14px; border-radius: 10px; }
.notice.error { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.notice.info { background: var(--seen-bg); color: var(--seen-fg); }
ul { padding-left: 1.2em; }

.bar { position: relative; height: 32px; border-radius: 6px; background: var(--empty); overflow: hidden; margin-top: 12px; }
.seg { position: absolute; top: 0; bottom: 0; }
.seg.tone-seen { background: var(--seen); }
.seg.tone-idle { background: var(--idle); }
.seg.tone-gap { background: var(--gap); }
.seg.tone-unknown { background: repeating-linear-gradient(135deg, var(--unknown-bg) 0 5px, var(--unknown) 5px 7px); }
.ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.chip.tone-seen { background: var(--seen-bg); color: var(--seen-fg); }
.chip.tone-idle { background: var(--idle-bg); color: var(--idle-fg); }
.chip.tone-gap { background: var(--gap-bg); color: var(--gap-fg); }
.chip.tone-unknown { background: var(--unknown-bg); color: var(--unknown-fg); }

ol.bands { list-style: none; padding: 0; margin: 0; }
ol.bands li { background: var(--card); border-radius: 14px; margin: 8px 0; }
button.band { width: 100%; border: none; border-radius: 14px; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 12px; }
.band .when { flex: 1; min-width: 110px; }
.band .basis { font-size: .85rem; font-weight: 600; }
.band .small { flex-basis: 100%; }
.detail { padding: 0 12px 12px; }
button.danger { background: var(--error); color: var(--bg); border-color: var(--error); margin-top: 8px; }

/* Public pages: privacy policy and account deletion (static, no scripts). */
a { color: inherit; text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--gap); outline-offset: 2px; }
.top h1 a { text-decoration: none; }
.doc { max-width: 760px; }
.doc h3 { font-size: 1.15rem; margin-top: 1.6em; }
.doc h4 { font-size: 1rem; margin: 1em 0 .2em; }
.doc li { margin: .25em 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.doc th { font-size: .9rem; color: var(--muted); }
.steps li { background: var(--card); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.notice.draft { background: var(--gap-bg); color: var(--gap-fg); margin-top: 16px; }
.todo { background: var(--gap-bg); color: var(--gap-fg); border-radius: 4px; padding: 0 4px; }
.docfoot { margin: 32px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.pagefoot { max-width: 860px; margin: 0 auto; padding: 0 16px 24px; color: var(--muted); font-size: .9rem; }
@media (max-width: 520px) { .doc th, .doc td { padding: 6px 4px; } }

/* Screenshots by session. App types have a letter as well as a colour. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 12px 0; }
.tabs button { border: none; border-radius: 10px 10px 0 0; padding: 8px 12px; font-weight: 600; font-size: .95rem; color: var(--muted); }
.tabs button.on { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
button.pill { padding: 5px 11px; font-size: .85rem; }
button.pill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cat { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-weight: 700; font-size: .8rem; flex: none; }
.cat-browser { background: #3b6fb6; } .cat-video { background: #b6463b; } .cat-social { background: #7b4fb6; }
.cat-messaging { background: #2f8a63; } .cat-games { background: #b07a12; } .cat-phone { background: #5d6b78; }
.cat-other { background: #7a7568; } .cat-unknown { background: #8a8577; }
.spent summary { cursor: pointer; }
.spent[open] summary { margin-bottom: 8px; }
.spentrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.spentlabel { width: 11em; flex: none; font-size: .92rem; }
.spentbar { flex: 1; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 8%, transparent); overflow: hidden; }
.spentbar i { display: block; height: 100%; }
.session { background: var(--card); border-radius: 16px; padding: 12px; margin: 12px 0; }
.sesshead { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; overflow-wrap: anywhere; }
.gapnote { background: var(--gap-bg); color: var(--gap-fg); border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: .92rem; }
/* About 3 across on a phone (6 on screen at once), more on wider screens. */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
/* Dense grid: as small as is still readable (about 5 across on a phone, 12 on a wide screen). */
.thumbs.dense { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; }
.thumbs.dense button.thumb { border-radius: 6px; }
.thumbs.dense .thumb .time { padding: 10px 4px 2px; font-size: .68rem; }
.thumbs.dense .thumb .why { font-size: .66rem; padding: 4px; }
.pick h2 { margin-top: 0; }
.tabs { overflow-x: auto; }
.tabs button { flex: none; }
button.thumb { position: relative; padding: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 9 / 19; background: var(--empty); border: 1px solid var(--line); cursor: zoom-in; display: block; width: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Tablets and computers used sideways (Stephen, 2026-10-18): wide tiles when most of the set is wide (app.js shaped);
   a screenshot that doesn't match its tiles is shown whole rather than cut. */
.thumbs.landscape:not(.bpage) { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.thumbs.dense.landscape:not(.bpage) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.thumbs.landscape button.thumb { aspect-ratio: 16 / 10; }
.thumbs:not(.landscape) .thumb.wide img, .thumbs.landscape .thumb:not(.wide) img { object-fit: contain; object-position: center; }
/* Among upright tiles, a sideways screenshot (a computer's) takes two tiles' width at the same height (Stephen,
   2026-10-26, as Worth a look shows them wider): stretched to its row, or nearly that shape in a row of its own. */
.thumbs:not(.landscape):not(.bpage) .thumb.wide { grid-column: span 2; aspect-ratio: 18.6 / 19; align-self: stretch; }
.thumb .time { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: .75rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .65)); text-align: left; }
.thumb .reason { position: absolute; top: 4px; left: 4px; right: 4px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 4px; font-size: .62rem; line-height: 1.2; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.thumb .reason.strong { background: var(--gap); color: #fff; border-color: var(--gap); }
.thumb .reason.locked { color: var(--muted); border-style: dashed; }
.thumb:has(.flagmark:not([hidden])) .reason { right: 30px; }
.thumb .flagmark { position: absolute; top: 5px; right: 5px; background: var(--gap); color: #fff; border-radius: 6px; padding: 0 6px; font-size: .8rem; }
.thumb.missing { background: repeating-linear-gradient(45deg, var(--unknown-bg) 0 6px, var(--empty) 6px 12px); cursor: pointer; }
.thumb .why { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-size: .78rem; color: var(--unknown-fg); text-align: center; }
.thumb.missing .time { color: var(--fg); background: none; }

/* Viewer: one screenshot at a time, full screen. */
body.noscroll { overflow: hidden; }
/* Above the sheets (20): a screenshot opened from a sheet shows on top, and Close goes back to it. */
.viewer { position: fixed; inset: 0; z-index: 30; background: #14162a; color: #ece6d8; display: flex; flex-direction: column; padding: 12px 16px; }
.viewer button { color: #ece6d8; border-color: #ffffff40; }
.vtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; overflow-wrap: anywhere; }
.vstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
.vimg { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.vimg img { max-height: 100%; max-width: 100%; border-radius: 10px; object-fit: contain; transform-origin: center; cursor: zoom-in; }
.vstage { overflow: hidden; }
.vimg { touch-action: none; } /* pinch and drag zoom the screenshot, not the page */
.vimg.zoomed img { cursor: zoom-out; border-radius: 0; }
.viewer .nav { position: relative; z-index: 2; } /* above a zoomed screenshot */
.vtools { display: flex; gap: 8px; flex: none; }
.viewer .zoombtn { width: 40px; padding: 0; font-size: 1.3rem; line-height: 1; }
.vimg .why { max-width: 280px; text-align: center; background: #ffffff14; padding: 16px; border-radius: 10px; }
.viewer .nav { width: 48px; height: 48px; padding: 0; font-size: 1.6rem; flex: none; }
.vbottom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.viewer .flagbtn { background: #ece6d8; color: #14162a; font-weight: 600; }
.viewer .flagbtn.on { background: var(--gap); color: #fff; border-color: var(--gap); }
.viewer .keys { color: #b5ad9c; margin: 0; text-align: center; }
.viewer .keys.narrow { display: none; }
.viewer .close { white-space: nowrap; }
@media (max-width: 520px) {
  .viewer .nav { width: 34px; height: 34px; font-size: 1.2rem; } /* swiping works too */
  .vstage { gap: 4px; }
  .viewer .keys.wide { display: none; }
  .viewer .keys.narrow { display: block; }
  .spentlabel { width: 7.5em; }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  button.pill { flex: none; }
  .thumbs.dense { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
  .thumbs.dense.landscape:not(.bpage) { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .card.pick { padding: 12px 10px; }
  .tabs button { padding: 8px 10px; font-size: .9rem; }
}

/* Signed-in layout: a navy sidebar on wide screens; a top bar and a bottom bar on phones. */
:root { --side-bg: #2b2521; --side-fg: #f6eee6; --side-on: #4a3f38; --warn-bg: #fbe9c6; --warn-fg: #7a4f00; }
@media (prefers-color-scheme: dark) { :root { --side-bg: #110e0b; --side-on: #2d261f; --warn-bg: #4a3710; --warn-fg: #fbe9c6; } }
#app.wide { max-width: none; padding: 0; }
body.inapp .pagefoot { display: none; }
/* Inside the app: its own top bar replaces the page's bars and menu. */
body.embedded .content { padding-bottom: 24px; padding-top: 12px; }
/* No sidebar in the app, so no column for it on a tablet either (Stephen, 2026-10-18: squashed to the left). */
body.embedded .shell { display: block; }
body.embedded .content { margin: 0 auto; }
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.content { padding: 22px 28px 40px; min-width: 0; max-width: 1180px; }
nav.side { background: var(--side-bg); color: var(--side-fg); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
nav.side .brand { font-weight: 700; font-size: 1.05rem; margin: 0 10px 18px; color: #fff; }
nav.side .brand small { display: block; font-weight: 400; opacity: .7; font-size: .78rem; }
/* The lantern and "lamp313": "313" and the flame in the flame colour (as in the app's header). */
.mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: -.02em; }
.mark svg { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.mark .frame { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mark .flame { fill: var(--flame); fill-rule: evenodd; }
.mark .num { color: var(--flame-text); }
nav.side .mark .num, .mtop .mark .num { color: #f5a66a; }
nav.side .mark .flame, .mtop .mark .flame { fill: #f08a45; }
nav.side button, nav.side a.navitem { color: var(--side-fg); border: none; border-radius: 10px; padding: 9px 12px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-decoration: none; font-size: .95rem; }
nav.side button:hover:not(:disabled), nav.side a.navitem:hover { background: #ffffff12; }
nav.side .on { background: var(--side-on); color: #fff; font-weight: 600; }
nav.side .sec { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 18px 12px 4px; }
nav.side .person { justify-content: flex-start; }
nav.side .person > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
nav.side .person small { opacity: .7; font-size: .76rem; font-weight: 400; }
nav.side .person.waiting { opacity: .75; }
nav.side .grow { flex: 1; min-height: 16px; }
nav.side .me { font-size: .78rem; opacity: .6; padding: 8px 12px 0; overflow-wrap: anywhere; }
nav.side :focus-visible { outline: 3px solid #e08a5a; outline-offset: -3px; }
.badge { background: var(--gap); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .75rem; line-height: 1.6; font-weight: 600; }
.av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .78rem; color: #fff; background: #4f7a55; flex: none; }
.mtop, nav.bottom { display: none; }

.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.phead h1 { font-size: 1.5rem; margin: 0; }
.phead p { margin: 2px 0 0; }
.daynav { display: flex; gap: 6px; flex-wrap: wrap; }
.daynav .pill:disabled { opacity: 1; }
.daynav .pill.on:disabled { opacity: 1; }
.devsel { margin-bottom: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cards .card { margin: 0; }
.ident { display: flex; gap: 10px; align-items: center; overflow-wrap: anywhere; }

/* Overview */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { margin: 0; }
.kpi .n { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.kpi .l { color: var(--muted); font-size: .85rem; }
.kpi.tone-gap .n { color: var(--gap); }
.kpi.tone-seen .n { color: var(--seen); }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }
.two .card { margin-top: 0; }
.two > div > .card + .card { margin-top: 12px; }
.card h2 { font-size: 1.1rem; margin: 0 0 10px; }
.worth ul { list-style: none; padding: 0; margin: 0; }
.worth li + li { border-top: 1px solid var(--line); }
button.worthitem { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: none; border-radius: 10px; padding: 10px 4px; }
button.worthitem:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
button.worthitem > span:last-child { display: flex; flex-direction: column; }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.session.focus { outline: 3px solid var(--gap); }
/* Chronological feed: one grid; markers and gaps take a full row. */
.feed .marker { grid-column: 1 / -1; font-weight: 700; font-size: 1.15rem; padding: 18px 2px 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.feed .marker:first-child { padding-top: 0; }
/* Gaps in monitoring must stand out in the flow: full width, a strong edge and a symbol (not colour alone). */
.feed .feedgap { grid-column: 1 / -1; }
.feed .feedgap .gapnote { margin: 8px 0; border-left: 6px solid var(--gap); font-size: .95rem; }
.thumb.focus { outline: 3px solid var(--gap); outline-offset: 1px; }
.feedstatus { margin: 12px 0; min-height: 1.5em; }
.sentinel { height: 1px; }

@media (max-width: 900px) {
  .shell { display: block; }
  nav.side { display: none; }
  .content { padding: 0 16px 96px; }
  .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5; background: var(--side-bg); color: #fff; margin: 0 -16px 14px; padding: 10px 16px; }
  .mtop .brand { font-weight: 700; font-size: .95rem; white-space: nowrap; }
  .mtop select { margin-left: auto; width: auto; max-width: 45vw; padding: 6px 10px; background: var(--side-on); color: #fff; border-color: transparent; }
  .mtop .gear { margin-left: auto; color: #fff; border-color: #ffffff40; padding: 4px 12px; font-size: 1.1rem; }
  .mtop select + .gear { margin-left: 0; }
  nav.bottom { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  nav.bottom button { border: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: .75rem; color: var(--muted); }
  nav.bottom button .ico { font-size: 1.15rem; line-height: 1; }
  nav.bottom button.on { color: var(--fg); font-weight: 700; }
  .phead h1 { font-size: 1.25rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .n { font-size: 1.35rem; }
  .two { grid-template-columns: 1fr; }
}
.card.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Privacy settings (ADR-0011): always visible above the screenshots; changes sit in the feed. */
.privacybar { background: var(--card); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.privacybar .muted { display: block; margin-top: 2px; }
.gapnote.privacy, .feed .feedgap .gapnote.privacy { background: var(--unknown-bg); color: var(--fg); border-left: 6px solid var(--accent); }

/* People this partner supports, as chips above the page (2026-10-14). Scrolls sideways on a phone. */
.people { display: flex; gap: 8px; margin: 4px 0 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.people::-webkit-scrollbar { display: none; }
button.pchip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; font-weight: 600; }
button.pchip .av { width: 28px; height: 28px; font-size: .72rem; }
button.pchip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pchip .dot { width: 9px; height: 9px; border-radius: 50%; background: #c46a2b; box-shadow: 0 0 0 2px var(--bg); }
@media (min-width: 900px) { .people { flex-wrap: wrap; overflow: visible; } }

/* Requests for support, at the top of a person's pages. */
.card.asks { border-left: 4px solid #c46a2b; }
.asks ul { list-style: none; margin: 0; padding: 0; }
.asks li { padding: 8px 0; }
.asks li + li { border-top: 1px solid var(--line); }
.asks .note { margin: 4px 0 0; font-style: italic; }
.spent h3 { margin: 12px 0 6px; color: var(--muted); font-weight: 600; }
.asks .answers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.asks .answered { margin: 6px 0 0; color: var(--seen-text); font-weight: 600; }


/* A person's pages, top (2026-10-14): people, then devices, then one notice, then the screenshots. Small controls. */
.people { margin: 0 0 6px; }
button.pchip { padding: 3px 12px 3px 3px; font-size: .9rem; gap: 6px; }
button.pchip .av { width: 24px; height: 24px; font-size: .66rem; }
.mtop .gear + .gear { margin-left: 0; }
.devices { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.devices::-webkit-scrollbar { display: none; }
.devices .wideonly { margin-left: auto; }
button.dchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
button.dchip.on { color: var(--fg); border-color: var(--fg); font-weight: 600; }
button.dchip .mark { color: var(--seen); font-size: .7rem; }
button.dchip.quiet .mark { color: var(--muted); }
button.dchip.stale .mark { color: var(--gap); font-weight: 700; font-size: .85rem; }
button.dchip.stale { color: var(--gap-fg); background: var(--gap-bg); border-color: var(--gap-bg); }
button.dchip.privacy .mark { color: var(--accent); font-size: .85rem; }
.privslot:empty { display: none; }
.privacybar { margin: 0 0 8px; }
details.attn { background: var(--warn-bg); color: var(--warn-fg); border-radius: 12px; margin: 0 0 8px; }
details.attn.review { background: var(--gap-bg); color: var(--gap-fg); }
details.attn > summary { cursor: pointer; padding: 8px 12px; display: flex; gap: 8px; align-items: center; list-style: none; }
details.attn > summary::-webkit-details-marker { display: none; }
details.attn > summary::after { content: '▾'; margin-left: auto; }
details.attn[open] > summary::after { content: '▴'; }
details.attn > :not(summary) { color: var(--fg); }
details.attn ul { list-style: none; margin: 0 12px; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
details.attn li { padding: 8px 0; font-size: .92rem; }
details.attn li + li { border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
details.attn .note { margin: 2px 0 0; font-style: italic; }
details.attn .answered { margin: 4px 0 0; font-weight: 600; }
.attn .answers, .asks .answers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.attn .answers button, .asks .answers button { padding: 4px 11px; font-size: .84rem; }
details.attn > button.link { margin: 0 12px; }
.attnfoot { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 4px 12px 10px; }
details.about > summary { cursor: pointer; color: var(--muted); }
details.about p { margin: 6px 0 0; color: var(--muted); }
details.about.small { margin: 10px 0; }
.dayline { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.dayline strong { font-size: .95rem; }
.phead .daynav .pill, .dayline .pill { min-width: 34px; }
@media (max-width: 900px) { .wideonly { display: none; } .mtop { margin-bottom: 8px; } }

/* Household & billing (ADR-0014) */
.plan-status { display: inline-block; padding: 2px 10px; border-radius: 999px; margin: 4px 0; }
.plan-status.ok { background: var(--seen-bg); color: var(--seen-fg); }
.plan-status.warn { background: var(--warn-bg); color: var(--warn-fg); }
.plan-status.bad { background: var(--gap-bg); color: var(--gap-fg); }
.plan-status.muted { background: var(--unknown-bg); color: var(--unknown-fg); }
ul.plain { list-style: none; padding: 0; margin: 8px 0; }
ul.plain > li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.row.spread { justify-content: space-between; }
.code.big { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .04em; overflow-wrap: anywhere; }
/* Signing up: three dots on a line (done ✓ / now / next). Colour is never the only signal: ✓, bold, screen-reader text. */
ol.stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 8px 0 4px; width: 100%; max-width: 420px; }
ol.stepper::before, ol.stepper::after { content: ""; position: absolute; top: 17px; left: 16.7%; height: 3px; }
ol.stepper::before { right: 16.7%; background: var(--line); }
ol.stepper::after { width: 0; background: var(--seen); }
ol.stepper.at-1::after { width: 33.3%; }
ol.stepper.at-2::after { width: 66.6%; }
ol.stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .82rem; color: var(--muted); text-align: center; }
ol.stepper .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bg); border: 3px solid var(--line); }
ol.stepper li.done { color: var(--seen-fg); }
ol.stepper li.done .dot { background: var(--seen); border-color: var(--seen); color: #fff; }
ol.stepper li.now { color: var(--fg); font-weight: 700; }
ol.stepper li.now .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The offer, and "or: someone else pays?" under it. */
.card.offer { max-width: 520px; gap: 10px; }
.offer h2 { margin: 0; }
.offer .price { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 0; }
.offer .price span { font-size: .95rem; font-weight: 400; color: var(--muted); }
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
ul.ticks li::before { content: "✓"; color: var(--seen); font-weight: 800; margin-right: 8px; }
.offer .where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer .where label { margin: 0; font-weight: 400; }
.offer .where select { width: auto; padding: 6px 10px; }
.offer button.primary { align-self: stretch; padding: 12px 18px; font-weight: 600; }
.offer details summary { cursor: pointer; text-decoration: underline; }
.offer details p { margin: 6px 0 0; }
a.button { display: inline-block; text-align: center; text-decoration: none; padding: 12px 18px; border-radius: 999px; font-weight: 600; }
a.button.primary { align-self: stretch; background: var(--accent); color: var(--on-accent); }
.offer .notice { margin: 0; align-self: stretch; }
/* The partner agreement before the first look (ADR-0029 section 6), in the offer's card. */
.terms h1 { margin: 0; font-size: 1.5rem; }
.terms h1:focus { outline: none; } /* focused only so it's read out (termsScreen); not a control */
.terms p { margin: 0; }
.terms ul.termslist { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.terms .rcheck { align-self: stretch; margin: 4px 0 0; font-weight: 600; }
.terms button.link { align-self: center; }
ul.next { margin: 0; padding-left: 1.2em; color: var(--muted); }
ul.next li { margin: 2px 0; }
.invite-panel { width: 100%; max-width: 420px; }
.invite-result { align-self: stretch; max-width: 560px; }
.invite-result p { margin: 0; }
.invite-result .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; background: var(--bg); color: var(--fg); padding: 8px 10px; border-radius: 8px; align-self: stretch; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; max-width: 520px; margin: 4px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
section.alt { border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; max-width: 520px; }
.alt .row { margin: 0; flex-wrap: nowrap; width: 100%; }
.alt p { margin: 0; }
div.stack, section.alt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
div.stack[hidden] { display: none; }

/* "Who pays for your plan?": two equal choices, neither looking like the default. */
.paychoices { display: grid; gap: 10px; align-self: stretch; }
button.paychoice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); padding: 14px 16px; }
button.paychoice strong { font-size: 1.1rem; }
button.paychoice span { color: var(--muted); font-size: .92rem; }
button.paychoice:hover { border-color: var(--accent); }
.offer .codebox { display: flex; flex-direction: column; align-self: stretch; }
.offer .codebox .row { margin: 4px 0 0; flex-wrap: nowrap; }
.offer .codebox input { flex: 1; min-width: 0; }

/* Sign-up's steps (ADR-0035): joining a household has two. */
ol.stepper.n-2 { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
ol.stepper.n-2::before, ol.stepper.n-2::after { left: 25%; }
ol.stepper.n-2::before { right: 25%; }
ol.stepper.n-2.at-1::after { width: 50%; }
/* A warning: the sign and its words carry it, the colour only adds to them. */
.notice.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* The household builder (ADR-0035 C2, Stephen's "Set up your household" board): a card per person, "+ Add a device",
   and a bar with the price pinned to the bottom of the page area. The bar is a raised surface, darker than the page
   in the light theme and lighter than it in the dark one, so it stands apart by lightness in both. */
:root { --hb-bg: #2b2521; --hb-fg: #fffcf8; --hb-muted: #ddd2c4; --hb-link: #f5b27a; --hb-go-bg: #e8742a; --hb-go-fg: #1f1a17; }
@media (prefers-color-scheme: dark) { :root { --hb-bg: #3a2f27; --hb-fg: #fff7ee; --hb-muted: #e3d6c7; --hb-link: #ffc08f; --hb-go-bg: #f08a45; --hb-go-fg: #1f1a17; } }
section.hb { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
section.hb h2 { margin: 0; font-size: 1.6rem; }
section.hb h2:focus { outline: none; }
section.hb .lead { margin: 0; color: var(--muted); }
section.hb .hbgate { margin: 0; }
.hbpeople { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin: 8px 0 4px; }
.hbperson { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; width: 260px; display: flex; flex-direction: column; gap: 10px; }
.hbperson p { margin: 0; }
.hbpname { display: flex; align-items: center; gap: 10px; }
.hbpname .av { width: 38px; height: 38px; font-size: .95rem; }
.hbpname > span:last-child { display: flex; flex-direction: column; line-height: 1.3; overflow-wrap: anywhere; }
.hbpname strong { font-size: 1.05rem; }
.hbrole { font-size: .8rem; color: var(--muted); }
ul.hbdevs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
li.hbdev { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 4px 4px 10px; background: var(--bg); font-size: .92rem; }
li.hbdev > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
svg.hbico { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.hbx { border: none; border-radius: 10px; min-width: 40px; min-height: 40px; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); }
button.hbx:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
button.hbadd { width: 260px; min-height: 120px; border: 2px dashed var(--muted); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; color: var(--flame-text); background: transparent; }
button.hbadd small { font-weight: 400; color: var(--muted); font-size: .82rem; }
button.hbadd:hover { border-style: solid; }
p.hbfull { width: 260px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }
.hbbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: var(--hb-bg); color: var(--hb-fg); box-shadow: 0 -4px 16px #0000001f; }
.hbbar p { margin: 0; }
.hbprice { flex: 1 1 320px; min-width: 0; }
.hbbig { font-size: 1.75rem; font-weight: 800; line-height: 1.15; }
.hbbig span { font-size: 1rem; font-weight: 400; }
.hbline { color: var(--hb-muted); font-size: .9rem; }
.hbwhere { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .9rem; color: var(--hb-muted); }
.hbwhere b { color: var(--hb-fg); }
.hbwhere button.link { color: var(--hb-link); font-weight: 600; }
.hbwhere label { margin: 0; color: var(--hb-fg); font-weight: 600; }
.hbwhere select { width: auto; padding: 6px 10px; background: var(--bg); color: var(--fg); }
.hbbar :focus-visible { outline-color: var(--hb-link); }
.hbact { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.hbbar .hbgo, .hbbar a.button.hbgo { background: var(--hb-go-bg); color: var(--hb-go-fg); border-color: var(--hb-go-bg); padding: 13px 24px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.hbbar button.hbcancel { color: var(--hb-link); align-self: center; }
.hbbar .notice.error { background: var(--bg); color: var(--error); max-width: 320px; }
.hbsummary { margin: 0; }
/* The panel: from the right on a wide screen, the whole screen on a phone (its buttons at the bottom). */
.sheetwrap.hbwrap { align-items: stretch; justify-content: flex-end; }
.hbpanel { background: var(--bg); color: var(--fg); width: 420px; max-width: 100%; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px calc(20px + env(safe-area-inset-bottom)); border-left: 1px solid var(--line); }
.hbpanel h2 { margin: 0; font-size: 1.4rem; }
.hbpanel h2:focus { outline: none; }
.hbpbody { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hbpbody p { margin: 0; }
.hblbl { font-weight: 600; }
.hbchips { display: flex; flex-wrap: wrap; gap: 8px; }
button.hbchip { border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); padding: 10px 14px; }
button.hbchip.on { border: 2.5px solid var(--fg); padding: 9px 13px; font-weight: 700; background: var(--glow); }
.hbnew input { max-width: none; }
.hbpfoot { display: flex; flex-direction: column; gap: 8px; }
.hbpfoot button { min-height: 48px; border-radius: 14px; }
.hbpfoot button.primary { font-weight: 700; }
@media (max-width: 900px) {
  /* Above the phone layout's bottom menu. */
  body:not(.embedded) .hbbar { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 639px) {
  .hbperson, button.hbadd, p.hbfull { width: 100%; }
  button.hbadd { min-height: 88px; }
  .hbbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .hbprice { flex: none; }
  .hbbig { font-size: 1.5rem; }
  .hbwhere { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
  .hbbar .hbgo, .hbbar a.button.hbgo { width: 100%; white-space: normal; }
  .hbbar .notice.error { max-width: none; }
  .hbpanel { width: 100%; border-left: none; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* Add a person: by email or with a household code (no email). */
.choice { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; width: 100%; max-width: 420px; }
.choice button { border: none; border-radius: 0; padding: 9px 6px; }
.choice button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.bigcode { font: 700 1.9rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-align: center; background: var(--bg); border: 2px dashed var(--line); border-radius: 14px; padding: 12px 8px; margin: 0; width: 100%; max-width: 420px; box-sizing: border-box; }
.invite-result h3 { margin: 0; font-size: 1.05rem; }
span.block { display: block; }

.badge.new { background: var(--moment); color: var(--bg); }

/* ---- Screenshots, new design (trial, 2026-10-17) ---- */
.bpick h1 { margin: 8px 0 14px; }
.bpeople, .bdevices { list-style: none; margin: 0; padding: 0; }
/* A card per person: the name, then their devices always shown beneath, indented behind a guide line. */
.bpeople > li { margin: 0 0 12px; background: var(--card); border-radius: 16px; padding: 12px 12px 12px; }
.bperson { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.bperson .bname { font-size: 1.1rem; font-weight: 700; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bdevices { margin: 8px 0 0 20px; padding-left: 14px; border-left: 2px solid var(--line); }
.bdevices .bnone { padding: 8px 0 2px; }
.bdevice { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 12px; padding: 12px 14px; background: var(--bg); margin-top: 6px; }
.bdevice strong { flex: 1; }
.bdevice .warn { color: var(--gap-fg); font-weight: 600; }
/* Removed devices, folded under one line (2026-11-01). */
.bremoved summary { cursor: pointer; padding: 10px 14px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; list-style: none; font-size: .9rem; }
.bremoved summary::-webkit-details-marker { display: none; }
.bremoved summary::before { content: "›"; display: inline-block; transition: transform .15s ease; }
.bremoved details[open] summary::before { transform: rotate(90deg); }
.bremoved .bdevices { margin: 0; padding: 0; border: 0; }
.bremoved .bdevice { border: 1px dashed var(--line); }

/* The switch stays at the top while scrolling (below the page's own bar on a phone browser). */
.bhead { position: sticky; top: 0; z-index: 4; background: var(--bg); margin: 0 -16px; padding: 8px 16px 10px; border-bottom: 1px solid var(--line); }
.bwho { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 8px; }
.bwho .link { padding: 0; }
.switch { display: flex; justify-content: center; max-width: 420px; margin: 0 auto; background: var(--card); border-radius: 999px; padding: 4px; gap: 4px; }
.switch .swopt { flex: 1; border: none; border-radius: 999px; padding: 11px 12px; font-size: 1.05rem; font-weight: 700; color: var(--muted); }
.switch .swopt.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 4px #0003; }
.bfilters { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bchip { padding: 5px 12px; font-size: .85rem; border-color: var(--line); }
.bchip.on { background: var(--card); border-color: var(--accent); font-weight: 600; }

.bfeed { padding-bottom: 90px; }
.bdaysec { margin: 4px 0 14px; }
.bday { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 1.05rem; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--line); }
.bdaysec .feedgap { grid-column: 1 / -1; }
.bdaysec .feedgap .gapnote { margin: 4px 0; border-left: 6px solid var(--gap); font-size: .9rem; }

/* Pull to refresh: opens above the page while pulled down from the top. */
.ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .9rem; font-weight: 600; transition: height .2s ease; }
.ptr.dragging { transition: none; }
.ptr .ptrsym { font-size: 1.3rem; display: inline-block; }
.ptr.ready { color: var(--accent); }
.ptr.busy .ptrsym { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* An episode where it happened, in All's list of screenshots: across the whole row, tap to review. */
.epmark { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; margin: 4px 0; padding: 10px 14px; border: none; border-left: 6px solid var(--review); border-radius: 10px; background: var(--review-bg); color: var(--review-fg); font-size: .9rem; }
.epmark .sym { font-weight: 800; font-size: 1.1rem; }
.epmark .eptext { flex: 1; min-width: 0; }
.epmark .go { font-size: 1.2rem; }
.epmark.done { background: var(--card); color: var(--fg); border-left-color: var(--line); }

/* Notices floating over the screenshots, like islands: no bar behind them. */
.islands { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 12px; pointer-events: none; }
.island { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: .82rem; font-weight: 600; border: none; box-shadow: 0 3px 12px #0004; }
.island .sym { font-weight: 800; }
.island.review { background: var(--review-bg); color: var(--review-fg); }
.island.gap { background: var(--gap-bg); color: var(--gap-fg); }
.island.issue { background: var(--warn-bg); color: var(--warn-fg); }

/* Sheets for the date list, the apps and the notices. */
.sheetwrap { position: fixed; inset: 0; z-index: 20; background: #0006; display: flex; align-items: flex-end; justify-content: center; }
/* Sized against the overlay, not vh: inside the app's web view vh can come out far too small (2026-10-17). */
.sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: calc(100% - 48px); overflow-y: auto; border-radius: 20px 20px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
.sheethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.daylist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.dayopt { text-align: left; border-radius: 12px; padding: 10px 14px; }
.dayopt.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dayopt.on .muted { color: inherit; }
.sheet .primary.wide { width: 100%; }
@media (max-width: 900px) {
  body:not(.embedded) .bhead { top: 50px; }
  body:not(.embedded) .islands { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Worth a look: each day's picks as pages of two rows, as many across as fit (app.js reads --thumb-min and --thumb-gap and
   sets --cols); swipe (or ‹ ›) for the next. Keep the sizes in step with .thumbs.dense. */
.bstrip { --thumb-min: 76px; --thumb-gap: 5px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; overscroll-behavior-x: contain; }
.bstrip::-webkit-scrollbar { display: none; }
/* Even rows (Stephen, 2026-10-21, B2): each tile in its screenshot's own shape, sized by worthRows; the riskiest
   on the left of every row. */
.bstrip > .bpage { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--thumb-gap); }
.bstrip .brow { display: flex; gap: var(--thumb-gap); }
.bstrip .brow button.thumb { flex: none; aspect-ratio: auto; width: auto; }
.bstrip .brow .thumb img { object-fit: cover; object-position: top; }
/* At most two phones wide (Stephen, 2026-10-23, B): a wider screenshot whole, centred, with bands above and below. */
.bstrip .brow button.thumb.boxed { background: var(--band); }
.bstrip .brow .thumb.boxed img { object-fit: contain; object-position: center; }
@media (max-width: 520px) { .bstrip { --thumb-min: 52px; --thumb-gap: 4px; } }
.bday .pager { display: inline-flex; align-items: center; gap: 4px; }
/* The risk dial (Stephen, 2026-10-18): no taller than the buttons; the needle eases to the riskiest pick in view. */
.bdial { display: inline-flex; align-self: center; border: none; background: none; padding: 4px; margin: -4px 0; border-radius: 8px; cursor: pointer; }
.bday.hasdial .btag { margin-right: 0; }
.bday .bdial { margin-right: auto; }
.bdaysec { position: relative; }
.dialtip { position: absolute; z-index: 4; width: max-content; max-width: min(280px, 100%); box-sizing: border-box; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .85rem; line-height: 1.4; box-shadow: 0 4px 14px #0000002e; }
.bdial svg { width: 30px; height: 18px; overflow: visible; }
.bdial path { fill: none; stroke-width: 3; }
.bdial .r { stroke: var(--review); }
.bdial .m { stroke: var(--moment); }
.bdial .l { stroke: var(--seen); }
.bdial .needle { stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; transform-origin: 15px 16px; transition: transform .45s ease; }
.bdial circle { fill: var(--fg); }
@media (prefers-reduced-motion: reduce) { .bdial .needle { transition: none; } }
/* Locked details (ADR-0030): what was found isn't known, so the dial is grey with a lock and no needle, never green. */
.bdial { position: relative; }
.bdial .dlock { display: none; position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); font-size: .7rem; line-height: 1; }
.bdial.locked .dlock { display: block; }
.bdial.locked path { stroke: var(--line); }
.bdial.locked .needle, .bdial.locked circle { display: none; }
.pagebtn { padding: 2px 12px; font-size: .85rem; font-weight: 600; }
.worthstop { background: var(--card); border-radius: 16px; padding: 12px 16px; margin: 8px 0 20px; }
.worthstop p { margin: 0 0 8px; }
.worthstop .row { justify-content: center; margin: 0; }
.worthwhy { margin: 0 4px 16px; }
button.small { padding: 7px 14px; font-size: .88rem; }

/* People list: a phone not used lately can be dragged left to ask about it. */
.bswipe { position: relative; margin-top: 6px; border-radius: 12px; overflow: hidden; }
.bswipe .bdevice { position: relative; margin-top: 0; touch-action: pan-y; transition: transform .2s ease; }
.bswipe .bdevice.dragging { transition: none; }
.bswipe-act { position: absolute; top: 0; right: 0; bottom: 0; width: 190px; border-radius: 0; border: none; background: var(--gap); color: #fff; font-weight: 700; font-size: .9rem; }
.msgpreview { white-space: pre-wrap; background: var(--card); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.sheet .wide { width: 100%; display: block; margin-top: 8px; }
.sheet ul.eplist { list-style: none; margin: 8px 0 0; padding: 0; }
.sheet ul.eplist > li { padding: 10px 0; border-top: 1px solid var(--line); }
.sheet ul.eplist .note { margin: 2px 0 0; font-style: italic; }
/* A note that can't be read here (ADR-0031): said in words (🔒, why), not italic like a quote, and muted. */
.note.locked, .asks .note.locked, details.attn .note.locked, .sheet ul.eplist .note.locked { font-style: normal; color: var(--muted); }
.sheet ul.eplist .answered { margin: 4px 0 0; font-weight: 600; }
.sheet ul.eplist .answers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sheet ul.eplist .answers button { padding: 3px 8px; font-size: .76rem; white-space: nowrap; }
.sheet ul.eplist .answers button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* On a phone the four still fit on one line. */
@media (max-width: 420px) { .sheet ul.eplist .answers button { padding: 3px 6px; font-size: .72rem; } }
.sheet .epshots { margin-top: 8px; }

/* Week reviews (Stephen, 2026-10-18): the break after each Monday, the days' New / Seen marks, the jump button. */
.bweek { margin: 22px 0; padding: 16px 12px; text-align: center; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.bweek .muted { margin: 2px 0; }
.bweekbtn { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; }
button.bweekbtn { cursor: pointer; border: 1px solid var(--line); }
button.bweekbtn.done { background: var(--seen-bg); color: var(--seen-fg); border-color: transparent; font-weight: 600; }
.bspin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--seen); animation: bspin .8s linear infinite; }
@keyframes bspin { to { transform: rotate(360deg); } }
.btick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--seen); color: #fff; font-size: 15px; animation: btick .25s ease-out; }
@keyframes btick { from { transform: scale(.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bspin, .btick { animation: none; } }
.bday .btag { margin-right: auto; font-size: .72rem; font-weight: 500; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.btag.new { background: var(--accent); color: var(--on-accent); }
.btag.seen { background: var(--seen-bg); color: var(--seen-fg); }
.bdaysec.seen .thumb { opacity: .72; }
.bjump { margin-top: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.breview { color: var(--muted); }
.breview.done { color: var(--seen-fg); }

/* A day's heading stays on one line on a phone (Stephen, 2026-10-18). */
.bday { container-type: inline-size; flex-wrap: nowrap; }
.bday .bdtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bday .btag, .bday .pager, .bday .bcount { flex-shrink: 0; white-space: nowrap; }
@container (max-width: 430px) { .bday .bdate { display: none; } }

/* What kind each device is (Stephen, 2026-10-18). */
.bkind { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--fg); }
.bkind svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* All devices at once (Stephen, 2026-10-19) */
.btogether { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 34px; font-weight: 400; cursor: pointer; }
.tswitch { appearance: none; -webkit-appearance: none; width: 42px; height: 26px; padding: 0; border-radius: 999px; background: var(--line); position: relative; flex: none; cursor: pointer; margin: 0; max-width: none; border: 0; }
.tswitch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: left .15s; }
.tswitch:checked { background: var(--accent); }
.tswitch:checked::after { left: 19px; }
.tswitch:focus-visible { outline: 3px solid var(--gap); outline-offset: 2px; }
.bdevice.tall { align-items: flex-start; }
.tdevs { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tdev { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdev strong { flex: none; font-weight: 600; }
.tdev .tstatus { flex-basis: 100%; padding-left: 22px; }
.tdev .tkind { width: 16px; height: 16px; }
.tgone { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; }
.tdev.gone strong { color: var(--muted); font-weight: 500; }
.tdev.gone .tkind { opacity: .6; }
.tkind { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thumb .time { display: flex; align-items: center; gap: 3px; }
.thumb .time .tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .time .tname + span::before { content: "· "; }
.thumb .time > span:last-child { flex: none; white-space: nowrap; }
.thumbs.dense .thumb .time .tname { display: none; }
.thumbs.dense .thumb .time .tname + span::before { content: none; }

/* Viewing key (ADR-0019) */
.keybanner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.keybanner p { margin: 0; flex: 1 1 260px; }
.wordboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 4px 0; list-style: none; }
.wordboxes li { display: flex; align-items: center; gap: 6px; }
.wordboxes .n { flex: none; width: 1.6em; text-align: right; color: var(--muted); }
.wordboxes input { min-width: 0; max-width: none; flex: 1; }
.wordchecks:empty { display: none; }
.wordchecks .notice { margin: 6px 0 0; }

/* Placeholders while loading (Stephen, 2026-10-21): the page's shape at once, instead of "Loading…". */
.skel { display: grid; gap: 10px; margin: 12px 0; }
.skel-line, .skel-row, .skel-tile, .skel-card { background: var(--empty); border-radius: 8px; }
.skel-line { height: 18px; width: 40%; }
.skel-line.wide { width: 60%; height: 24px; }
.skel-card { background: var(--card); padding: 14px; display: grid; gap: 10px; border-radius: 16px; }
.skel-card .skel-line { background: var(--empty); }
.skel-row { height: 52px; background: var(--bg); }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; max-height: calc(2 * (76px * 19 / 9) + 5px); overflow: hidden; }
.skel-tile { aspect-ratio: 9 / 19; }
@media (max-width: 520px) { .skel-tiles { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; } }
@media (prefers-reduced-motion: no-preference) { .skel > * { animation: skel 1.4s ease-in-out infinite; } @keyframes skel { 50% { opacity: .55; } } }
.keybanner .waitline { flex-basis: 100%; font-weight: 600; color: var(--gap-fg); }
/* The notices just under Worth a look / All (Stephen, 2026-10-21), not floating at the bottom. */
.islands.top { position: static; justify-content: center; padding: 2px 0 6px; z-index: auto; }
body:not(.embedded) .islands.top { bottom: auto; }
.islands.top .island { box-shadow: none; }
/* "What to tell them" under a stopped device's notice (ADR-0021). */
details.stophelp { background: var(--card); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
/* "Not monitored this week": each gap folds to one line; opened, why and what to do (Stephen, 2026-11-03). */
.gapitem > details > summary { cursor: pointer; list-style: none; padding: 4px 0; }
.gapitem > details > summary::-webkit-details-marker { display: none; }
.gapitem > details > summary::after { content: ' ▾'; color: var(--muted); }
.gapitem > details[open] > summary::after { content: ' ▴'; }
.gapitem .gapline { display: block; margin-top: 2px; }
.gapitem .answered { display: block; margin-top: 2px; font-weight: 600; }
details.stophelp summary { cursor: pointer; font-weight: 600; }
details.stophelp ol { margin: 8px 0 4px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }

/* A person's summary, before their screenshots (Stephen, 2026-11-01). */
.islands.rows { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; margin: 4px 0 12px; z-index: auto; pointer-events: auto; }
.islands.rows[hidden] { display: none; }
body:not(.embedded) .islands.rows { bottom: auto; }
.islands.rows .island { display: flex; width: 100%; justify-content: flex-start; padding: 12px 14px; border-radius: 14px; font-size: .95rem; box-shadow: none; text-align: left; }
.islands.rows .island::after { content: "›"; margin-left: auto; font-weight: 700; }
button.worthitem .wtext { display: flex; flex-direction: column; }
button.worthitem .go { margin-left: auto; align-self: center; color: var(--muted); }
.chip.late { background: #e9e4f5; color: #4b3b7a; }
.chip.long { background: var(--warn-bg); color: var(--warn-fg); }
.chip.new { background: #e6eef7; color: #2e5a8c; }
@media (prefers-color-scheme: dark) { .chip.late { background: #2f2748; color: #ddd3f5; } .chip.new { background: #1d2c40; color: #cfe0f5; } }
.bigsee { display: block; width: 100%; padding: 16px; font-size: 1.05rem; border-radius: 999px; box-shadow: 0 4px 14px #0003; }
/* The summary's days, Where the time went and Stood out on one card; See …'s screenshots stays at the bottom. */
/* The summary (design A, Stephen 2026-11-04): the name and days on top, one switch for the days, plain sections. */
.sumhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 8px 0 18px; }
.sumwho h1 { margin: 0; font-size: 1.75rem; }
.sumwho p { margin: 2px 0 0; }
.sumwho .link { padding: 0; }
.segs { display: flex; background: var(--empty); border-radius: 999px; padding: 4px; gap: 2px; }
.segs button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .92rem; padding: 8px 14px; border-radius: 999px; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.segs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (max-width: 640px) { .sumhead { flex-direction: column; align-items: stretch; } .segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .segs button { justify-content: center; padding: 8px 6px; } }
.sumbody { display: flex; flex-direction: column; gap: 22px; }
.sumbody > section h2 { margin: 0 0 10px; font-size: 1.1rem; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sechead h2 { margin: 0 !important; }
.spenttime { white-space: nowrap; min-width: 6.5em; text-align: right; }
.daylist.weeks { margin-top: 0; }
.weekopt { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.weekopt .muted { white-space: nowrap; }
.daystrip { display: flex; overflow-x: auto; margin: 6px 0 4px; padding-bottom: 6px; scroll-snap-type: x proximity; }
.daychip { flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--fg); scroll-snap-align: start; }
.daychip .dw, .daychip .dm { font-size: .7rem; color: var(--muted); }
.daychip strong { font-size: 1rem; }
.daychip.on { background: var(--empty); }
.daychip.end { background: var(--fg); color: var(--bg); border-radius: 12px; }
.daychip.end .dw, .daychip.end .dm { color: inherit; }
.card.period { padding: 0; overflow: hidden; }
.period .periodhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.period .periodhead .bchip { font-size: .95rem; font-weight: 600; padding: 7px 14px; background: var(--bg); }
.period > section { padding: 14px 16px; }
.period > section + section { border-top: 1px solid var(--line); }
.seebar { position: sticky; bottom: 0; z-index: 3; margin: 6px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
@media (max-width: 900px) { body:not(.embedded) .seebar { bottom: calc(66px + env(safe-area-inset-bottom)); padding-bottom: 10px; } }
/* Worth a look's date rail (Stephen, 2026-11-01): the day down the left, its picks beside it, three pages at most. */
.bdaysec.railday { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; margin: 18px 0; }
.brail { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-right: 8px; border-right: 2px solid var(--line); font-size: .78rem; color: var(--muted); line-height: 1.2; }
.brail b { font-size: 1.35rem; color: var(--fg); }
.brail .btag { margin-top: 6px; font-size: .64rem; padding: 1px 5px; border-radius: 999px; white-space: nowrap; }
.bday.railed { margin: 0 0 6px; padding: 0; border: 0; font-size: .9rem; min-height: 26px; align-items: center; }
.bdots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.bdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--band); }
.bdots i.on { background: var(--fg); }
.bstrip > .bseemore { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--band); border-radius: 12px; padding: 16px; }
.sharemsg { margin-top: 12px; }
.sharemsg .row { display: flex; gap: 8px; flex-wrap: wrap; }
.sharemsg p { margin: 6px 0 0; }
.hourschange { background: var(--warn-bg, #f6e7c8); color: var(--warn-fg, #5a3d05); border-radius: 8px; padding: 6px 8px; font-weight: 600; }

/* Home on the web (Stephen, 2026-11-05): needs you, the people you support, your devices. */
.hsection { margin: 18px 0; }
.hlabel { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #625a52); margin: 0 0 8px; }
.hneeds { border-left: 5px solid var(--flame); border-radius: 0 16px 16px 0; padding: 4px 16px; }
.hneed { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hneed:last-child { border-bottom: 0; }
.hneed .grow { flex: 1; min-width: 0; }
.hneed > button { flex: none; }
.hperson { display: flex; flex-direction: column; gap: 8px; }
.hdev { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.hdev .hname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hok, .hask { flex: none; width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; }
.hok { background: var(--seen); color: var(--bg); }
.hask { background: #f3e2bd; color: #6e4508; border: 1px solid #d9b46a; }
.navnote { font-size: .8rem; opacity: .8; margin: 8px 12px; }
.navnote .link { color: inherit; text-decoration: underline; }
.hperson > .link { align-self: flex-start; color: var(--accent-text, #a84c0d); font-weight: 700; text-decoration: none; }
.navnote .link { padding: 0; }
/* Long device names (Stephen, 2026-11-05: "Lauren's Redmi Note 15" broke mid-word): the name wraps between words,
   and the check-in time moves under it when there isn't room beside it. */
.hdev { flex-wrap: wrap; row-gap: 2px; }
.hdev .hname { flex: 1 1 9em; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.hdev .hname + .muted { margin-left: auto; }
.hperson .ident > div { min-width: 0; overflow-wrap: break-word; }
.hdev.hopen { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg); cursor: pointer; }
.hdev.hopen:hover { border-color: var(--ink, #1f1a17); }
.hdev.hopen::after { content: "›"; margin-left: 4px; font-size: 1.2rem; }

/* Home, option C (Stephen, 2026-11-05): a card per person, two side by side on a wide screen, one under another on a phone. */
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; margin: 8px 0 18px; }
.hcards .hperson { margin: 0; gap: 10px; }
.hwho { display: flex; gap: 12px; align-items: center; }
.hwho .hname { flex: 1; min-width: 0; overflow-wrap: break-word; }
.hwho .hname strong { font-size: 1.15rem; }
.hring { --p: 0%; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--seen) var(--p), var(--line) 0); }
.hring span { width: 40px; height: 40px; border-radius: 50%; background: var(--card, #fff); display: grid; place-items: center; font: 700 .8rem/1 system-ui, sans-serif; }
.halert { display: flex; gap: 10px; align-items: center; background: var(--card); border-left: 4px solid var(--flame); border-radius: 0 12px 12px 0; padding: 10px 12px; }
.halert .grow { flex: 1; min-width: 0; }
.halert ul.plain { margin: 0; flex: 1; }
.hperson .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hmine { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hmine .grow { flex: 1 1 14em; min-width: 0; }

/* Home cards, simpler (Stephen, 2026-11-05): the card opens the summary; one action; devices as status lines. */
.hclick { cursor: pointer; }
.hclick:hover { box-shadow: 0 0 0 1.5px var(--ink, #1f1a17) inset; }
.hwho .hname { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.hgo { color: var(--muted, #625a52); }
.hdevlines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted, #625a52); }
.hdevlines li { display: flex; gap: 8px; align-items: center; overflow-wrap: break-word; }
.hperson > button { align-self: flex-start; }
.hmine { display: block; }
.hminehead { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hchips { list-style: none; padding: 0; margin: 10px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.hchips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .9rem; background: var(--bg); }
.hchips li.quiet { background: #fbe9c6; border-color: #d9b46a; color: #6e4508; }
/* The viewer's top-right buttons, smaller (Stephen, 2026-11-05: they were quite big): still 36 px to tap. */
.viewer .vtools { display: flex; gap: 6px; align-items: center; }
.viewer .vtools button { padding: 6px 12px; font-size: .88rem; min-height: 36px; line-height: 1; }
.viewer .vtools .zoombtn { width: 36px; height: 36px; padding: 0; font-size: 1.05rem; }

/* Home, the same every week (Stephen, 2026-11-06, canvas 2a/2b): Needs you is three fixed rows; person cards are the
   same height with one line and one button; Your record has the same shape. */
.hneeds { margin: 4px 0 18px; }
.card.needs { padding: 0; overflow: hidden; margin: 0; }
.nrow { display: grid; grid-template-columns: 26px minmax(150px, 210px) 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; min-height: 52px; box-sizing: border-box; }
.nrow + .nrow { border-top: 1px solid var(--line); }
.nico { width: 24px; height: 24px; border-radius: 12px; display: inline-grid; place-items: center; font: 700 13px/1 system-ui, sans-serif; border: 1.5px solid var(--line); color: var(--muted); }
.nrow.has .nico { background: var(--flame); border-color: var(--flame); color: #1f1a17; }
.nbody { min-width: 0; overflow-wrap: anywhere; }
.nreq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.nreq ul.plain { margin: 0; padding: 0; list-style: none; }
.nreq ul.plain li { display: inline; }
.nreq .answers { display: inline-flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.hcards .hperson { min-height: 170px; }
.hperson .hline { margin: 0; display: flex; gap: 8px; align-items: center; }
.hnew { width: 10px; height: 10px; border-radius: 5px; background: var(--flame); flex: none; }
.hperson .hact { margin-top: auto; }
.hyou .hwho { flex-wrap: wrap; }
.hyouacts { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.av.you { background: var(--fg); color: var(--bg); }
.hdevrow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hdevrow li { display: flex; gap: 8px; align-items: center; }
nav.side .navhead { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #bbae9f; margin: 14px 12px 4px; padding: 0; font-weight: 700; background: none; }
nav.side button.navhead { padding: 4px 12px; margin: 10px 0 2px; }
nav.side .nperson { justify-content: flex-start; }
nav.side .nperson .av { width: 22px; height: 22px; font-size: .62rem; }
nav.side .nperson .badge { margin-left: auto; }
@media (max-width: 700px) {
  .nrow { grid-template-columns: 26px 1fr auto; }
  .nrow .nlabel { grid-column: 2 / 4; }
  .nrow .nbody { grid-column: 2 / 3; }
  .hcards .hperson { min-height: 0; }
  .hperson .hact button { width: 100%; }
}

/* A person's page frame (Stephen, 2026-11-06, canvas 3a/3b): name, devices and dial; the 7-day strip; the tabs. */
.pframe { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.pfhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pfhead h1 { margin: 0; font-size: 1.6rem; }
.pfhead .av { width: 42px; height: 42px; font-size: .95rem; }
.pfhead .hring { margin-left: auto; }
.dpills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: 8px; }
.dpill { padding: 6px 13px; font-weight: 600; font-size: .9rem; background: var(--bg); border-color: var(--line); }
.dpill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pstrip { display: flex; gap: 8px; align-items: stretch; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.pday { flex: 1 0 84px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; border-radius: 14px; padding: 8px 10px; background: var(--card); border: 1.5px solid var(--line); white-space: nowrap; font-size: .85rem; }
.pday b { font-size: .92rem; }
.pday.pweek { flex-basis: 104px; }
.pday.on { border: 2px solid var(--fg); padding: 7.5px 9.5px; }
.pnav { flex: none; width: 40px; border-radius: 14px; padding: 0; font-size: 1.2rem; font-weight: 700; background: var(--bg); }
/* The days (Stephen, 2026-11-07): four tiles on a desktop, one button on a phone. */
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 820px; }
.ptile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; border-radius: 14px; padding: 9px 12px; background: var(--card); border: 1.5px solid var(--line); font-size: .85rem; position: relative; min-width: 0; }
.ptile b { font-size: .95rem; display: flex; gap: 6px; align-items: center; }
.ptile .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ptile.pickt { border-style: dashed; }
.ptile .pcal { width: 16px; height: 16px; flex: none; }
.ptile.on { background: var(--pick); border: 1.5px solid var(--pick-end); color: var(--pick-fg); }
.ptile.on .muted { color: var(--pick-sub); }
.ptile.on::after { content: "✓"; position: absolute; top: 8px; right: 9px; width: 18px; height: 18px; border-radius: 9px; background: var(--pick-tick); color: var(--pick-tick-fg); font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pdatebtn { display: none; width: 100%; align-items: center; gap: 10px; text-align: left; border-radius: 999px; padding: 10px 16px; background: var(--card); border: 1.5px solid var(--line); }
.pdatebtn .pdname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdcaret { color: var(--muted); }
@media (max-width: 700px) { .ptiles { display: none; } .pdatebtn { display: flex; } }
/* The date picker (as the app's A): only the days scroll; Show stays at the bottom. */
.dssheet .sheet { display: flex; flex-direction: column; gap: 10px; height: min(720px, calc(100% - 48px)); overflow: hidden; }
@media (min-width: 701px) { .sheetwrap.dssheet { align-items: center; } .dssheet .sheet { border-radius: 20px; max-width: 440px; } }
.dsweeks, .dslist { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.dsweek, .dsday { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--fg); width: 100%; }
.dsweek + .dsweek, .dsday + .dsday { border-top: 1px solid var(--line); }
.dst { flex: 1; display: flex; flex-direction: column; min-width: 0; } .dst b { font-size: .95rem; } .dst span { font-size: .78rem; color: var(--muted); }
.dsweek.on { background: var(--fg); color: var(--bg); } .dsweek.on .dst span { color: var(--bg); opacity: .75; }
.dsday.mid { background: var(--pick); color: var(--pick-fg); } .dsday.end { background: var(--pick-end); color: var(--pick-fg); }
.dsday.mid .dst span, .dsday.end .dst span { color: var(--pick-sub); }
.dsday.mid + .dsday.mid, .dsday.end + .dsday.mid, .dsday.mid + .dsday.end { border-top-color: var(--pick-line); }
.dspick { width: 22px; height: 22px; border-radius: 11px; background: var(--pick-tick); color: var(--pick-tick-fg); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.dshead { display: flex; justify-content: space-between; align-items: baseline; }
.dslbl { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.dsscroll { flex: 1; min-height: 0; overflow-y: auto; }
.dsend { text-align: center; margin: 10px 0 4px; }
.dsshow { background: var(--show-bg); color: var(--show-fg); border: 0; border-radius: 999px; padding: 13px; font-weight: 700; font-size: 1rem; min-height: 48px; box-shadow: 0 10px 24px rgba(43, 37, 33, .3); }
.dsshow:disabled { opacity: .55; box-shadow: none; }
.pmark { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; font-size: .82rem; }
.pmark.seen { color: var(--seen-text); }
.pmark.new { color: var(--flame-text); }
.pmark.new i { width: 9px; height: 9px; border-radius: 5px; background: var(--flame); display: inline-block; }
.pmark.nil { color: var(--muted); font-weight: 500; }

.ptabs { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1.5px solid var(--line); }
.ptablist { display: flex; gap: 4px; }
.ptab { border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 14px; font-weight: 700; color: var(--muted); margin-bottom: -1.5px; background: none; }
.ptab.on { color: var(--fg); border-bottom-color: var(--fg); }
.pshotopts { margin-left: auto; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.pperiod { margin: 0 0 6px; }
@media (max-width: 700px) {
  .pfhead h1 { font-size: 1.3rem; }
  .dpills { margin-left: 0; width: 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; }
  .dpill { white-space: nowrap; }
  .pday { flex: 0 0 72px; }
  .pday.pweek { flex-basis: 90px; }
  .ptab { flex: 1; }
  .ptablist { width: 100%; }
  .pshotopts { margin-left: 0; width: 100%; }
}

/* The Summary tab (Stephen, 2026-11-06, canvas 3a): Stood out and the time on the left, one button under them; the side
   panel on the right: Needs you (always there) and Devices. On a phone: Needs you first, Devices last. */
.sumgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main needs" "main devs"; grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
.smain { grid-area: main; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.smain > .card { margin: 0; }
.smain > section h2 { margin: 0 0 10px; font-size: 1.1rem; }
.sneeds { grid-area: needs; margin: 0; }
.sdevs { grid-area: devs; margin: 0; }
.sneeds .islands.rows { margin: 0 0 4px; }
.sneeds .islands.rows .island { padding: 10px 12px; font-size: .9rem; }
.sneeds .wordchecks:empty { display: none; }
.sdevlist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sdevlist li { display: flex; gap: 10px; align-items: flex-start; }
.smain .seebar { margin: 0; padding-left: 0; padding-right: 0; }
@media (max-width: 900px) {
  .sumgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "needs" "main" "devs"; grid-template-rows: auto; }
}

/* On a phone, from Stephen's A16 (2026-11-06). */
.hneeds { border-left: none; border-radius: 0; padding: 0; }
.dpills, .pstrip { scrollbar-width: none; }
.dpills::-webkit-scrollbar, .pstrip::-webkit-scrollbar { display: none; }
.sneeds h2.hlabel, .sdevs h2.hlabel { font-size: .8rem; margin: 0 0 10px; }
.switch .swopt { white-space: nowrap; }
.bjump { font-size: .85rem; }
nav.bottom .ico svg { display: block; margin: 0 auto 2px; }
@media (max-width: 700px) {
  /* Needs you: the words get the width, the button goes under them; an empty row says it on one line. */
  .nrow { grid-template-columns: 26px 1fr; row-gap: 4px; }
  .nrow .nlabel { grid-column: 2; }
  .nrow .nbody { grid-column: 2; }
  .nrow > :last-child { grid-column: 2; justify-self: start; }
  .nrow:not(.has) { grid-template-columns: 26px auto 1fr; }
  .nrow:not(.has) .nlabel { grid-column: 2; }
  .nrow:not(.has) .nbody { grid-column: 3; justify-self: end; }
  .nrow:not(.has) > :last-child { display: none; }
  /* Your record: Partners and My record on their own line; "Still using it?" under its device when it doesn't fit. */
  .hyouacts { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
  .hyou .hname { flex: 1; }
  .hdevrow li { flex-wrap: wrap; }
  /* Screenshots: the frame scrolls away with the page, so the pictures get the screen. */
  .bhead, body:not(.embedded) .bhead { position: static; margin: 0; padding: 0 0 8px; border-bottom: none; }
  .pshotopts .switch { width: 100%; max-width: none; }
}
/* The frame scrolls away on every screen size (it was the old screenshots header's stickiness). */
.bhead, body:not(.embedded) .bhead { position: static; margin: 0; padding: 0 0 8px; border-bottom: none; }
/* A day jumped to lands below the bar at the top of the page (on a phone the dark top bar stays). */
.bdaysec { scroll-margin-top: 12px; }
@media (max-width: 900px) { body:not(.embedded) .bdaysec { scroll-margin-top: 76px; } }

/* The strip's marks as on the canvas (Stephen, 2026-11-06): Seen a filled circle with a tick, New a ringed dot, so
   the two differ in shape and fill, not colour alone. */
.pmark .tick { width: 16px; height: 16px; border-radius: 50%; background: var(--seen); color: var(--bg); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pmark.new i { width: 14px; height: 14px; border: 2px solid var(--flame); box-sizing: border-box; background: radial-gradient(circle, var(--flame) 0 3px, transparent 3.5px); }
/* Stood out: a picture beside each item (canvas 3a); striped until it comes, or when there's none. */
.sothumb { width: 64px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; align-self: center; background: repeating-linear-gradient(135deg, var(--band) 0 6px, var(--empty) 6px 12px); }
.sothumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sothumb .why { display: none; }
/* Blurred for a partner who chose blur, as a tile (.thumb.blurred): likely explicit, details locked or a score not known. */
.sothumb.blurred img { filter: blur(14px); transform: scale(1.08); }
/* Screenshots tab: a larger date, mark and Less / More (Stephen, 2026-11-06: too small on a computer). */
.brail .btag { font-size: .72rem; padding: 2px 7px; font-weight: 700; }
.pagebtn { padding: 4px 12px; min-height: 32px; }
@media (min-width: 901px) {
  .bdaysec.railday { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
  .brail { font-size: .92rem; gap: 2px; }
  .brail b { font-size: 2rem; line-height: 1.1; }
  .brail .btag { margin-top: 8px; font-size: .82rem; padding: 3px 11px; }
  .bday.railed { min-height: 40px; font-size: 1rem; }
  .pagebtn { padding: 7px 18px; font-size: .95rem; min-height: 38px; }
}
/* Home's person and Your record cards: the larger circle of the canvas (Stephen, 2026-11-06). */
.hwho .av { width: 42px; height: 42px; font-size: .95rem; }
/* Needs you on a phone (Stephen, 2026-11-06: "not tidy"): every row the same shape. The icon, the title with its detail
   under it (smaller), and a compact button on the right; an empty row the same, with "None" as its detail. */
@media (max-width: 700px) {
  .nrow, .nrow:not(.has) { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; min-height: 64px; }
  .nrow .nico { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .nrow .nlabel, .nrow:not(.has) .nlabel { grid-column: 2; grid-row: 1; font-size: .95rem; }
  .nrow .nbody, .nrow:not(.has) .nbody { grid-column: 2; grid-row: 2; justify-self: start; font-size: .85rem; line-height: 1.35; color: var(--muted); }
  .nrow > :last-child, .nrow:not(.has) > :last-child { grid-column: 3; grid-row: 1 / 3; justify-self: end; display: block; }
  .nrow > button:last-child { padding: 6px 12px; font-size: .85rem; min-height: 36px; white-space: nowrap; }
}
@media (max-width: 700px) {
  .nrow .nico { grid-row: 1; }
  .nrow .nreq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
  .nrow .nreq ul { margin: 0; padding: 0; }
}
/* The glow (canvas "Gentler tones" C): a faint warm light behind Home's greeting, a soft halo around Needs you and its marks. */
/* Home only: the glow starts in the very corner of the page area, beside the menu (Stephen, 2026-11-07: it started
   a little way in). Under the phone's top bar it simply continues below it. */
.content:has(> .hgreet) { background: radial-gradient(760px 340px at 0 0, var(--glow) 0, transparent 72%) no-repeat; }
@media (max-width: 900px) { .content:has(> .hgreet) { background: radial-gradient(130% 360px at 0 0, var(--glow) 0, transparent 72%) no-repeat; } }
.hneeds .card.needs { border-color: var(--halo-line); box-shadow: 0 8px 28px -12px var(--halo); }
.nrow.has .nico { box-shadow: 0 0 0 4px var(--ico-glow); }
/* "Not monitored this week", calmer (Stephen, 2026-11-07, canvas): counts at the top, two groups, one line per gap
   (mark, what happened, device and day, how long); tap one to open its explanation and buttons. */
.gcounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.gchip { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: .88rem; font-weight: 600; }
.gchip.look { background: var(--gap-bg); color: var(--gap-fg); }
.gchip.ok { background: var(--seen-bg); color: var(--seen-fg); }
.ggroup { margin-top: 14px; }
.ggroup h3.hlabel { font-size: .78rem; margin: 0 0 6px; }
ul.gaplist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
ul.gaplist > li + li { border-top: 1px solid var(--line); }
.gapitem > details > summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; }
.gapitem > details > summary::after, .gapitem > details[open] > summary::after { content: none; }
.gapitem .glen::after { content: ' ▾'; }
.gapitem > details[open] .glen::after { content: ' ▴'; }
.gapitem .gtext { display: flex; flex-direction: column; min-width: 0; }
.gapitem .glen { white-space: nowrap; }
.gico { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; background: var(--flame); color: #2b2521; box-shadow: 0 0 0 4px var(--ico-glow, transparent); }
.gico.ok { background: var(--card); color: var(--muted); border: 1.5px solid var(--line); box-shadow: none; }
.gapitem.reasoned .gtext strong { font-weight: 600; }
.gapitem .gopen { padding: 0 14px 12px 50px; }
.gapitem .gopen p { margin: 0 0 8px; }
.gapitem .gopen .answers { display: flex; flex-wrap: wrap; gap: 6px; }
.gapitem .gopen .answers button { padding: 6px 12px; font-size: .85rem; min-height: 34px; }
.gapitem .gopen .answers button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 480px) { .gapitem .gopen { padding-left: 14px; } }

/* Hiding and deleting a screenshot (ADR-0028) */
.sheetwrap.overviewer { z-index: 40; }
.viewer .binbtn { width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #bdb4ab; border-color: #4a423c; border-radius: 999px; }
.vimg.removed .why { font-weight: 600; }
.ico { display: inline-flex; flex: none; }
.ropt { display: flex; gap: 12px; text-align: left; width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); color: var(--fg); margin: 0 0 10px; font: inherit; }
.ropt > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.rtag { align-self: flex-start; margin-top: 4px; font-size: .75rem; font-weight: 700; color: #6e4508; background: #f6ebd5; border-radius: 999px; padding: 1px 8px; }
.rlabel { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 4px 0 6px; }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rchip { border-radius: 999px; padding: 7px 12px; font-weight: 600; }
.rchip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rinfo { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; font-size: .92rem; margin-bottom: 12px; }
.rinfo ul { margin: 4px 0 0; padding-left: 18px; }
.rcheck { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 12px; cursor: pointer; }
.rcheck input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.rcheck > span { display: flex; flex-direction: column; gap: 2px; }
.delbtn { display: flex; gap: 8px; justify-content: center; align-items: center; background: #7a2e12; color: #fff; border-color: #7a2e12; font-weight: 700; border-radius: 999px; padding: 12px; }
.delbtn:disabled { opacity: .55; }
.checkinbox { width: 100%; box-sizing: border-box; min-height: 150px; font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); margin-bottom: 8px; }
.row.spread { justify-content: space-between; }

/* Many at once, and blurring likely explicit ones (Stephen, 2026-11-08) */
.bursts { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.burst { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.burst button { flex: none; }
.thumb .tick { display: none; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / .28); box-sizing: border-box; }
body.selecting .thumb .tick { display: block; }
body.selecting .thumb .flagmark { display: none; }
body.selecting .thumb:not(:has(.tick)) { opacity: .55; }
.thumb.picked { outline: 3px solid var(--fg); outline-offset: -3px; }
.thumb.picked .tick { background: var(--fg); }
.thumb.picked .tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bg); font-size: 11px; font-weight: 700; }
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--card); border-top: 1px solid var(--line); padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -4px 16px rgb(0 0 0 / .08); }
.selbar .selhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.selbar .selacts { display: flex; gap: 10px; }
.selbar .selacts > button { flex: 1; min-height: 46px; }
body.selecting .bfeed { padding-bottom: 120px; }
.removedrun { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; border: 1.5px dashed var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.removedrun .ico { color: var(--muted); }
.thumb.blurred img { filter: blur(14px); transform: scale(1.08); }
.thumb .blurcov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgb(26 21 18 / .55); color: #fff; font-size: .62rem; font-weight: 700; text-align: center; padding: 4px; }
.thumb .blurcov .ico svg { width: 16px; height: 16px; }
.vcover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; padding: 24px; max-width: 360px; margin: auto; }
.vcover[hidden] { display: none; }
.vcover p { margin: 0; color: #dcd3ca; }
.vcover .ico { color: #cfc7bf; }
.vcover .showit { border: 1.5px solid #cfc7bf; border-radius: 999px; padding: 10px 22px; font-weight: 700; color: #fff; background: none; }
.rseg { margin-bottom: 10px; }

/* Download my data (ADR-0032): the "Your data" card and the days to download. A ticked day shows its tick, never colour alone. */
#your-data .notice { margin: 4px 0 0; align-self: stretch; }
.daylist { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; }
.daylist li + li { border-top: 1px solid var(--line); }
.daylist label { display: flex; gap: 11px; align-items: center; padding: 10px 13px; cursor: pointer; }
.daylist input { width: 20px; height: 20px; margin: 0; flex: none; }
.daylist input:disabled + span { color: var(--muted); }

/* Agreements (ADR-0034 C4): each row in words (Agreed at, Turned off at, Still in force), never colour alone. */
.agblock { border-top: 1px solid var(--line); padding-top: 10px; }
.agrow ul.plain { margin: 2px 0 0; }
.agrow ul.plain > li { padding: 2px 0; border-bottom: 0; }
.agree-terms .check { margin-top: 0; }
@media print {
  .side, .bottom, .mtop, .noprint, .sheetwrap { display: none !important; }
  .agreements a { color: inherit; text-decoration: none; }
}

/* B11 (ADR-0036): "Dev" beside the name on dev. In words, not colour alone. */
.devmark { font-size: .7em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid currentColor; }

/* Get the app (ADR-0036 decision 11). */
.getapp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0; font-size: .9rem; }
.getapp-facts[hidden] { display: none; }
.getapp-facts dt { color: var(--muted); }
.getapp-facts dd { margin: 0; overflow-wrap: anywhere; }
.getapp-facts code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.getapp details.about ol { margin: 6px 0 0; padding-left: 1.3em; }
.card.getapp.compact { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }