/* Day or night: light-dark() picks by color-scheme, which follows the device (Auto) or the Settings pick. */
:root { color-scheme: light dark;
  --bg: light-dark(#f4f1ea, #161513); --card: light-dark(#fffdf8, #211f1c); --ink: light-dark(#1d1b18, #ece8e1);
  --muted: light-dark(#6b665d, #a39d92); --line: light-dark(#e2ddd2, #36332e); --accent: light-dark(#c2410c, #fb923c);
  --good: light-dark(#15803d, #4ade80); --bad: light-dark(#b91c1c, #f87171); --bar: light-dark(#d6d0c4, #3a3732); }
:root[data-night=day] { color-scheme: light; } :root[data-night=night] { color-scheme: dark; }
/* The phone app says which the phone is in (data-sys, from MainActivity): its WebView misses a switch made while it runs. */
:root[data-night=auto][data-sys=dark] { color-scheme: dark; } :root[data-night=auto][data-sys=light] { color-scheme: light; }
* { box-sizing: border-box; }
/* A long press on a phone selects a button's words instead of pressing it (GAME-55). */
button { -webkit-user-select: none; user-select: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, sans-serif; }
/* The page never scrolls: panels scroll inside, the dock stays put. */
html, body { height: 100%; overflow: hidden; } /* iPhone: safe areas need viewport-fit=cover (index.html) */
/* Left: You (only as tall as it needs) over Money. Middle: Work, full height.
   Right: a short, scrollable Story (about a third) over Who you know. */
main { --dock: 64px; height: calc(100dvh - env(safe-area-inset-top, 0px)); max-width: 1840px; margin: env(safe-area-inset-top, 0px) auto 0; padding: 12px 16px calc(var(--dock) + 12px);
  display: grid; gap: 12px; grid-template-columns: 1fr 1.2fr 1.2fr; grid-template-rows: auto auto 1fr 5fr;
  grid-template-areas: "top top top" "stats work log" "money work log" "money work people"; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 0; overflow: auto; }
.dock { position: fixed; inset: auto 0 0 0; background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
/* Dock: actions on the left, Age up in the middle (Michael, 2026-11-04), shortcuts and version on the right */
.acts { max-width: 1840px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.acts .dl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acts .dr { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.acts .primary { margin: 0; padding-left: 28px; padding-right: 28px; }
.acts .left { color: var(--muted); font-size: 13px; white-space: nowrap; margin-right: 4px; }
.short, .tabs, .mini { display: none; }
@media (max-width: 1100px) { .long { display: none; } .short { display: inline; } }
@media (max-width: 760px) {
  main { --dock: 150px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "top" "panel"; padding: 10px 12px calc(var(--dock) + 10px); gap: 10px; }
  main > section:not(.top) { grid-area: panel; display: none; }
  main > section.on { display: block; }
  .top h1 { font-size: 18px; } .top p { font-size: 13px; } .top { padding: 8px 12px; }
  .top .mini { display: block; color: var(--ink); }
  .top .avatar { width: 52px; height: 60px; } .top .who { gap: 10px; }
  .admenu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .status { gap: 4px; } .status :is(span, .chipbtn) { font-size: 12px; border-radius: 8px; padding: 1px 7px; }
  .topbtns { flex-direction: column; align-items: stretch; gap: 6px; } .topbtns button, .admin > button { padding: 4px 8px; font-size: 12px; }
  .acts { display: grid; grid-template-columns: repeat(4, 1fr); }
  .acts .dl, .acts .dr { display: contents; }
  .acts .ver { order: 2; justify-self: center; align-self: center; }
  .acts button { padding: 9px 4px; }
  @media (max-width: 400px) { .acts button { font-size: 13px; padding: 9px 2px; } }
  .long { display: none; } .short { display: inline; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
  .tabs button { padding: 7px 2px; font-size: 13px; }
  .tabs button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
}
h1 { margin: 0; font-size: 22px; } h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.top { grid-area: top; overflow: visible; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.who { display: flex; gap: 14px; align-items: flex-start; }
.avatar { width: 80px; height: 92px; flex: none; image-rendering: pixelated; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px !important; color: var(--ink) !important; }
.status .chipbtn { all: unset; cursor: pointer; } /* a chip you can tap is the button itself, so all of it answers (GAME-55) */
.status :is(span, .chipbtn) { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 13px; }
.status .chipbtn:hover { border-color: var(--accent); }
@media (pointer: coarse) { .status .chipbtn { min-height: 24px; display: inline-flex; align-items: center; } }
.status .chg { white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-left: 4px; }
.status .chg.good { color: var(--good, #15803d); } .status .chg.bad { color: var(--bad, #b91c1c); }
.linkbtn { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.row.flash { animation: flash 2.4s ease-out; border-radius: 6px; }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
/* Faces in Who you know, rings, and the wedding screen (GAME-8) */
.pname { display: inline-flex; align-items: center; gap: 8px; } .pface { width: 24px; height: 28px; flex: none; }
.tring { width: 14px; height: 14px; vertical-align: -2px; margin: 0 4px 0 2px; }
#event.wedding { width: min(760px, calc(100vw - 32px)); max-width: none; }
.wedhead { text-align: center; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 12px; }
.couple { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.couple figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.couple figure > .pface:first-child { width: 120px; height: 138px; image-rendering: pixelated; }
.couple figcaption { font-weight: 600; } .couple small { color: var(--muted); }
.couple .and { align-self: center; font-size: 28px; color: var(--muted); margin-top: -40px; }
.bigring { width: 44px; height: 44px; }
.metals { display: flex; gap: 5px; } .swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--line); }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.terms { margin: 14px 0 6px; display: grid; gap: 6px; } .terms .chips { flex-wrap: wrap; }
.wedbtns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; } .wedbtns .primary { padding: 8px 28px; }
@media (max-width: 760px) { .couple { gap: 10px; } .couple figure > .pface:first-child { width: 84px; height: 97px; } .swatch { width: 18px; height: 18px; } }
.restart { font-size: 13px; color: var(--muted); white-space: nowrap; }
.top p { margin: 2px 0 0; color: var(--muted); }
.stats { grid-area: stats; } .money { grid-area: money; } .work { grid-area: work; } .people { grid-area: people; }
.log { grid-area: log; }
.stat { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 8px; margin: 4px 0; }
.bar { height: 8px; background: var(--bar); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.muted { color: var(--muted); font-size: 13px; }
.good { color: var(--good); } .bad { color: var(--bad); }
button { font: inherit; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
/* Buttons keep their label on one line; the text beside them wraps instead (Michael, 2026-11-04: squished,
   two-line buttons). Long choices inside dialogs and the status chips still wrap. Audited at 6 widths. */
main button, nav button { white-space: nowrap; }
.row > span:first-child { min-width: 0; } .row > button, .row > .pm { flex: none; }
dialog .btns button, .status .chipbtn { white-space: normal; }
/* A dialog opens focused on itself, not on its first button: no ring around the first option (Chrome, Brave). */
dialog:focus { outline: none; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: 10px 18px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
.log p { margin: 0 0 8px; } .log b { color: var(--accent); margin-right: 6px; }
/* Dialogs use the screen they have: as tall as the window allows, scrolling only when the content truly doesn't fit
   (Michael, 2026-11-04: no scrolling when there is room). */
/* Dialogs are centered: leaving both safe areas out of the height keeps the top clear of the iPhone clock (0 in browsers). */
:root { --safe-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); }
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); max-width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - var(--safe-y)); overflow: auto; padding: 20px; }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog .btns { flex-direction: column; } dialog .btns button { text-align: left; }
#event.wide { width: min(1180px, calc(100vw - 32px)); max-width: none; }
#event.wide .btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px; } /* 27 businesses fit without scrolling */
dialog ul { padding-left: 18px; }
.pointer { border-left: 3px solid var(--accent); padding-left: 10px; margin: 6px 0; }
.pcard { border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.row.partner { font-weight: 600; }
.ver { color: var(--muted); font-size: 12px; margin-left: auto; margin-right: 8px; border: 1px dashed var(--line); background: none; padding: 3px 8px; border-radius: 999px; }
.ver:hover { color: var(--accent); border-color: var(--accent); }

kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin: 0 1px; color: var(--muted); background: var(--card); }
dialog kbd { margin-right: 6px; }
.keys { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.keys + .ver { margin-left: 12px; }
@media (max-width: 1600px) { .keys { display: none; } .keys + .ver { margin-left: auto; } }
.chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 0; }
.chips button { padding: 2px 10px; }
.chips button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.row.acct { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
.pm { display: flex; gap: 4px; justify-content: flex-end; min-width: 76px; }
.pm button { min-width: 34px; padding: 3px 8px; }
.pct { font-size: 12px; font-weight: 600; margin-right: 8px; }

.hint { font-size: 12px; color: var(--muted); padding: 2px 0 8px; line-height: 1.45; }

/* Settings: pick how your face is drawn; every option is a preview of your own face */
.setbody { padding: 16px 22px 22px; overflow: auto; }
.setbody h3 { margin: 4px 0 2px; font-size: 15px; } .setbody > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.opts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 8px; min-width: 96px; font-size: 13px; }
.admenu a.tool { display: inline-block; padding: 4px 10px; border: 1px solid var(--line, #ccc); border-radius: 6px; color: inherit; text-decoration: none; font-size: 13px; white-space: nowrap; } .admenu a.tool:hover { border-color: var(--accent); color: var(--accent); }
.musrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; font-size: 14px; }
.musrow > span:first-child { width: 7.5em; color: var(--muted); }
.musrow .sfxlbl { margin-left: 18px; } .musrow .btns { margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; } .musrow button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.opts button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.opts svg.avatar { width: auto; height: 72px; pointer-events: none; }
.opts small { color: var(--muted); font-weight: 400; max-width: 120px; text-align: center; line-height: 1.3; }

/* Changelog: a timeline, newest on top */
#settings { width: min(1000px, calc(100vw - 32px)); }
#changes { width: min(720px, calc(100vw - 32px)); }
#place { width: min(1100px, calc(100vw - 32px)); }
#place .find { display: flex; gap: 8px; margin: 0 0 6px; } #place .find input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
#place .hits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } #place .hits button { white-space: nowrap; }
#place .facts2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; margin: 0 0 12px; }
#place .facts2 div { font-size: 14px; } #place .facts2 .k { color: var(--muted); } #place .facts2 .wide { grid-column: 1 / -1; }
#place .src { font-size: 12px; color: var(--muted); margin-top: 10px; } #place .src summary { cursor: pointer; }
#place .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#welcome { width: min(560px, calc(100vw - 32px)); }
#changes, #settings, #welcome, #place { max-width: none; max-height: calc(100dvh - 32px - var(--safe-y)); padding: 0; overflow: hidden; display: none; flex-direction: column; }
#changes[open], #settings[open], #welcome[open], #place[open] { display: flex; }
.born { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; } .born select, .born input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); } .born input { width: 7em; }
#changes header, #settings header, #welcome header, #place header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color: #fff; }
#changes header h2, #settings header h2, #welcome header h2, #place header h2 { margin: 0; color: #fff; font-size: 22px; text-transform: none; letter-spacing: 0; }
#changes .kicker, #settings .kicker, #welcome .kicker, #place .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
/* The state's flag beside the place card's title (tools/build-flags.mjs, sources in tools/sources/flags.md). */
#place header .ttl { display: flex; align-items: center; gap: 14px; min-width: 0; }
#place header .flag { height: 32px; width: auto; flex: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .55); }
#changes header button, #settings header button, #place header button { background: rgb(255 255 255 / .15); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; }
.timeline { list-style: none; margin: 0; padding: 18px 22px 22px 40px; overflow: auto; position: relative; }
.timeline::before { content: ''; position: absolute; left: 25px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.timeline > li { position: relative; padding: 0 0 18px; }
.timeline > li::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--muted); }
.timeline > li.current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.vhead { display: flex; align-items: center; gap: 8px; }
.vpill { font: 600 12px ui-monospace, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.current .vpill { background: var(--accent); border-color: var(--accent); color: #fff; }
.you { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.vdate { margin-left: auto; font-size: 12px; color: var(--muted); }
.timeline h3 { margin: 6px 0 4px; font-size: 16px; }
.timeline ul { margin: 0; padding: 0; list-style: none; }
.timeline ul li { margin: 4px 0; font-size: 14px; line-height: 1.45; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
.tag.new { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tag.fix { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.tag.data { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.paid { display: block; font-size: 11px; color: var(--muted); }
.pcard.biz .row { padding: 2px 0; }
.pcard.biz .btns { margin-top: 6px; }

.topbtns { display: flex; gap: 8px; align-items: flex-start; }
.admin { position: relative; }
.admin > button { font-size: 13px; border-style: dashed; }
.admin > button.on { border-color: var(--accent); color: var(--accent); }
.admenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; min-width: 190px; width: min(420px, 90vw); max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.admenu .muted { margin-top: 8px; }
.admenu .btns { margin-top: 6px; }

.pcard.street .row { padding: 2px 0; }
.pcard.street .btns { margin-top: 6px; }
.bar.heat i { background: var(--bad, #b3261e); }

/* Your look: what you own, worn ones lit, × to sell or cancel */
.look { padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.look .items { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
.look .item { display: inline-flex; align-items: center; }
.look .item > button:first-child, .look .kept { padding: 2px 8px; font-size: 12px; }
.look .item > button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.look .kept { border: 1px dashed var(--line, #8886); border-radius: 6px; }
.look button.x { padding: 2px 6px; margin-left: 2px; font-size: 12px; opacity: .7; }
/* Pictures of cars, homes, rentals and businesses */
svg.pic { display: block; height: auto; image-rendering: pixelated; border-radius: 6px; }
.picrow { display: flex; gap: 10px; align-items: center; }
.picrow svg.pic { width: 96px; flex: none; }
.musctl { display: inline-flex; align-items: center; gap: 6px; } .musctl input { width: 80px; margin: 0; accent-color: var(--accent); }
@media (max-width: 700px) { .musctl input { display: none; } } /* phones: volume lives in Settings */
svg.pic.ithumb { display: inline-block; width: 20px; vertical-align: middle; margin-right: 5px; border-radius: 3px; }
svg.pic.thumb { display: inline-block; width: 64px; vertical-align: middle; margin-right: 8px; }
svg.pic.bizpic { float: right; width: 128px; margin: 0 0 6px 10px; }
dialog .btns button.withpic { display: flex; align-items: center; gap: 10px; }
dialog .btns button.withpic svg.pic { width: 72px; flex: none; }

/* ===== Design v1 (GAME-25): themes on the same panels. Admin can switch back to v0 (everything above). =====
   Two themes, each with day and night through light-dark(): Case File (paper, typewriter, red stamp; the default)
   and The Odds (bold, light, blue and orange). Fonts are served from assets/fonts (OFL), never from a CDN. */
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(assets/fonts/plexmono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(assets/fonts/plexmono-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 400; font-display: swap; src: url(assets/fonts/plexserif-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 400; font-style: italic; font-display: swap; src: url(assets/fonts/plexserif-400i.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 600; font-display: swap; src: url(assets/fonts/plexserif-600.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 400 900; font-display: swap; src: url(assets/fonts/archivo.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500 700; font-display: swap; src: url(assets/fonts/jetbrainsmono.woff2) format('woff2'); }

:root[data-design=v1] {
  --f-head: 'IBM Plex Mono', ui-monospace, monospace; --f-body: 'IBM Plex Serif', Georgia, serif; --f-num: 'IBM Plex Mono', ui-monospace, monospace;
  --bg: light-dark(#e9e3d5, #16140f); --card: light-dark(#f6f1e5, #1f1c16); --paper: light-dark(#fbf8f0, #26221b);
  --ink: light-dark(#1d1b17, #ece4d2); --muted: light-dark(#6b6457, #a99f8a); --line: light-dark(#b9b09d, #4a4436);
  --frame: light-dark(#1d1b17, #5c5545); --accent: light-dark(#9e2a1f, #e6806f); --good: light-dark(#2d6a35, #86c48d);
  --bad: light-dark(#9e2a1f, #ef8a7a); --bar: light-dark(#d8d0bd, #3a352b); --legit: light-dark(#2b4c7e, #92b4e3);
  --street: var(--accent); --street-bg: transparent; --legit-bg: transparent;
  --head-bg: var(--card); --head-fg: var(--ink); --head-muted: var(--muted);
  --r: 0; --rs: 0; --rule: 1px dashed var(--line); --shadow: 6px 6px 0 var(--frame);
  --age-bg: var(--accent); --age-fg: light-dark(#fbf8f0, #16140f); --age-shadow: 4px 4px 0 var(--frame);
  --prim-bg: var(--ink); --prim-fg: var(--paper); --caps: uppercase;
}
:root[data-design=v1][data-theme=odds] {
  --f-head: Archivo, system-ui, sans-serif; --f-body: Archivo, system-ui, sans-serif; --f-num: 'JetBrains Mono', ui-monospace, monospace;
  --bg: light-dark(#f4f4f1, #0b0d11); --card: light-dark(#ffffff, #161a21); --paper: light-dark(#ffffff, #1c212a);
  --ink: light-dark(#0e1116, #e8eaee); --muted: light-dark(#5d6470, #9aa3b2); --line: light-dark(#e2e2dc, #262c36);
  --frame: var(--line); --accent: light-dark(#b84a12, #ff8a4c); --good: light-dark(#15803d, #4ade80);
  --bad: light-dark(#b91c1c, #f87171); --bar: light-dark(#e2e2dc, #2a303a); --legit: light-dark(#1f4fd8, #7ea2ff);
  --street-bg: light-dark(#fdebe0, #3a2112); --legit-bg: light-dark(#dde5fb, #18254a);
  --head-bg: #0e1116; --head-fg: #f4f4f1; --head-muted: #aab1bd;
  --r: 16px; --rs: 10px; --rule: 1px solid var(--line); --shadow: 0 24px 60px rgb(0 0 0 / .35);
  --age-bg: light-dark(#0e1116, #e8eaee); --age-fg: light-dark(#ffffff, #0e1116); --age-shadow: none;
  --prim-bg: var(--legit); --prim-fg: #fff; --caps: none;
}
:root[data-design=v1][data-theme=odds][data-night=night] { --head-bg: #161a21; }
@media (prefers-color-scheme: dark) { :root[data-design=v1][data-theme=odds]:not([data-night=day]):not([data-sys=light]) { --head-bg: #161a21; } }
:root[data-design=v1][data-theme=odds][data-sys=dark]:not([data-night=day]) { --head-bg: #161a21; }

[data-design=v1] body { font-family: var(--f-body); }
[data-design=v1] main { gap: 16px 20px; padding-top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.05fr); }
[data-design=v1] section { background: var(--card); border: 1px solid var(--frame); border-radius: var(--r); padding: 14px 16px; }
[data-design=v1][data-theme=odds] section { border: 0; }
[data-design=v1] section h2 { font: 600 12px/1.2 var(--f-head); letter-spacing: .12em; color: var(--muted); border-bottom: 2px solid var(--frame); padding-bottom: 7px; margin-bottom: 4px; }
[data-design=v1][data-theme=odds] section h2 { font: 900 17px/1.2 var(--f-head); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 0; }
/* :where keeps these below single-class rules (ring swatches set their own background) */
:where([data-design=v1]) button { font-family: var(--f-head); border-radius: var(--rs); border-color: var(--frame); background: transparent; }
:where([data-design=v1][data-theme=odds]) button { border-color: light-dark(#c5c7c0, #3a4250); font-weight: 600; }
:where([data-design=v1]) button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
:where([data-design=v1]) button:disabled { border-style: dashed; }
[data-design=v1] .row { border-bottom: var(--rule); padding: 6px 0; }
[data-design=v1] .money .row > span:nth-child(2) { font-family: var(--f-num); } /* amounts only, never a sentence */
[data-design=v1] .muted, [data-design=v1] .hint { color: var(--muted); }
[data-design=v1] .pcard { border-color: var(--frame); border-radius: var(--rs); background: var(--paper); }
[data-design=v1] .chips button.on, [data-design=v1] .tabs button.on { color: var(--accent); border-color: var(--accent); }

/* Header: the file on you */
[data-design=v1] .top { margin: 0 -16px; border: 0; border-bottom: 2px solid var(--frame); border-radius: 0; background: var(--head-bg); color: var(--head-fg); padding: 16px 24px 14px; }
[data-design=v1][data-theme=odds] .top { border-bottom: 0; }
[data-design=v1] .top .avatar { width: 84px; height: 96px; background: light-dark(#d8d0bd, #2c281f); border: 1px solid var(--frame); }
[data-design=v1][data-theme=odds] .top .avatar { background: #1c2230; border: 0; border-radius: 12px; }
[data-design=v1] .who { flex: 1; min-width: 0; gap: 20px; }
[data-design=v1] .who > div { flex: 1; min-width: 0; }
[data-design=v1] .kicker { font: 600 11px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--head-muted); }
[data-design=v1] .top h1 { font: 600 30px/1.15 var(--f-head); margin: 6px 0 10px; }
[data-design=v1][data-theme=odds] .top h1 { font-weight: 900; letter-spacing: -.02em; }
/* Three short facts on one line, Right now under them across the whole width (chips in one line, not stacked; Framework 1504). */
[data-design=v1] .facts { display: grid; grid-template-columns: max-content max-content max-content; gap: 6px 28px; font-size: 14px; }
[data-design=v1] .facts .now { grid-column: 1 / -1; order: 5; display: flex; align-items: baseline; gap: 10px; }
[data-design=v1] .facts .now .k { margin: 0; flex: none; }
[data-design=v1] .top .who > div > p:not(.mini) { font-size: 12px; margin-top: 4px; }
[data-design=v1] .facts > div { min-width: 0; }
[data-design=v1] .facts .k { display: block; font: 600 10px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--head-muted); margin-bottom: 5px; }
[data-design=v1] .facts .status { margin: 0 !important; color: var(--head-fg) !important; }
[data-design=v1] .top .status :is(span, .chipbtn) { background: transparent; border-color: var(--head-muted); color: var(--head-fg); }
[data-design=v1] .top p { color: var(--head-muted); }
[data-design=v1] .top .restart, [data-design=v1] .top .admin > button { color: var(--head-fg); border-color: var(--head-muted); }
[data-design=v1] .worth { text-align: right; margin-top: 10px; } [data-design=v1] .worth b { display: block; font: 700 28px/1.1 var(--f-num); }
[data-design=v1] .topbtns { flex-direction: column; align-items: flex-end; }
[data-design=v1] .topbtns > .tb { display: flex; gap: 8px; align-items: center; }
[data-design=v1] .top .admenu { color: var(--ink); }

/* You: five numbers in a row */
[data-design=v1] .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 10px 6px; }
[data-design=v1] .stats h2 { display: none; }
[data-design=v1] .stat { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; margin: 0; text-align: center; min-width: 0; }
[data-design=v1] .stat + .stat { border-left: var(--rule); }
[data-design=v1] .stat .bar { display: none; }
[data-design=v1] .stat span:last-child { font: 700 24px/1.1 var(--f-num); }
[data-design=v1] .stat span:first-child { font: 600 10px/1.2 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
[data-design=v1] .stat.lo span:last-child { color: var(--bad); }

/* Work: jobs as rows; who can help (a face and a name) or why not; the odds as a number */
[data-design=v1] .work > .row:first-of-type { background: var(--paper); border: 1px solid var(--frame); border-radius: var(--rs); padding: 10px 12px; margin: 8px 0 4px; font-weight: 600; }
[data-design=v1][data-theme=odds] .work > .row:first-of-type { border: 0; background: var(--bg); }
[data-design=v1] .work > .row:first-of-type .btns { flex-wrap: nowrap; } /* the job title wraps, its buttons stay side by side */
[data-design=v1] .jobhead, [data-design=v1] .row.jobrow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 62px 96px; gap: 12px; align-items: center; }
[data-design=v1] .jobhead { font: 600 10px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 0 4px; }
[data-design=v1] .jobhead span:nth-child(3) { text-align: right; }
[data-design=v1] .jobrow .jt { display: flex; flex-direction: column; min-width: 0; }
[data-design=v1] .jobrow .jt b { font-weight: 600; } [data-design=v1] .jobrow .jt .muted { font-size: 13px; }
[data-design=v1] .jobrow .help { font-size: 13px; color: var(--muted); min-width: 0; }
[data-design=v1] .jobrow .odds { text-align: right; font: 700 19px var(--f-num); }
[data-design=v1] .jobrow.shut .odds { font-size: 14px; color: var(--muted); }
[data-design=v1] .jobrow.shut .jt b { color: var(--muted); }
[data-design=v1] .jobrow.street .jt b, [data-design=v1] .jobrow.street .odds { color: var(--street); }
[data-design=v1] .jobrow > button { justify-self: stretch; }
[data-design=v1] .jobrow:not(.shut):not(.street) > button { background: var(--prim-bg); color: var(--prim-fg); border-color: var(--prim-bg); }
[data-design=v1] .jobrow.street > button { color: var(--street); border: 2px solid var(--street); }
[data-design=v1] .vouch { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 600 12px var(--f-head); color: var(--legit); background: var(--legit-bg);
  border: 1px solid var(--legit); padding: 1px 10px 1px 2px; border-radius: var(--rs); }
[data-design=v1][data-theme=odds] .vouch { border: 0; border-radius: 999px; }
[data-design=v1] .vouch.street { color: var(--street); background: var(--street-bg); border-color: var(--street); }
[data-design=v1] .vouch .pface { width: 18px; height: 21px; } [data-design=v1] .vouch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* People and story */
[data-design=v1] .ptag { font: 600 12px var(--f-num); }
[data-design=v1] .ptag.street { color: var(--street); } [data-design=v1] .ptag.trades, [data-design=v1] .ptag.tech, [data-design=v1] .ptag.business { color: var(--legit); }
[data-design=v1] .log p { font-size: 14px; line-height: 1.45; } [data-design=v1] .log b { font-family: var(--f-num); color: var(--accent); }
[data-design=v1][data-theme=odds] .log b { color: var(--legit); }

/* Dock */
[data-design=v1] .dock { background: var(--card); border-top: 2px solid var(--frame); }
[data-design=v1][data-theme=odds] .dock { border-top: 1px solid var(--line); }
[data-design=v1] .acts .primary { background: var(--age-bg); border: 0; color: var(--age-fg); box-shadow: var(--age-shadow); font: 600 17px var(--f-head); letter-spacing: .06em; text-transform: var(--caps); }
[data-design=v1][data-theme=odds] .acts .primary { font-weight: 900; border-radius: 14px; }
[data-design=v1] .acts .left { font-family: var(--f-num); }
/* The actions never wrap: their column grows to fit them, Age up stays as central as the room allows (Framework at 1504). */
[data-design=v1] .acts { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); }
[data-design=v1] .acts .dl { flex-wrap: nowrap; }

/* The year's question: a centered card */
.evtag { display: none; }
[data-design=v1] #event:not(.wedding) { background: var(--paper); border: 2px solid var(--frame); border-radius: var(--r); box-shadow: var(--shadow); padding: 34px 30px 26px; overflow: visible auto; width: min(620px, calc(100vw - 32px)); }
[data-design=v1] #event.wide { width: min(1180px, calc(100vw - 32px)); }
[data-design=v1] #event .evtag { display: inline-block; font: 600 11px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; background: var(--accent); color: var(--age-fg); padding: 7px 10px; margin: -12px 0 14px; }
[data-design=v1] #event:not(.wedding) > p { font: 400 24px/1.32 var(--f-body); margin: 0 0 20px; }
[data-design=v1] #event .btns { gap: 10px; } [data-design=v1] #event .btns button { border: 2px solid var(--frame); padding: 12px 14px; font-weight: 600; background: var(--paper); }
[data-design=v1][data-theme=odds] #event:not(.wedding) { background: #e2611b; color: #fff; border: 0; }
[data-design=v1][data-theme=odds] #event .evtag { background: none; color: #ffe1cf; padding: 0; margin: 0 0 10px; }
[data-design=v1][data-theme=odds] #event:not(.wedding) > p { font-weight: 800; }
[data-design=v1][data-theme=odds] #event .btns button { background: #fff; color: #0e1116; border: 0; }
[data-design=v1][data-theme=odds] #event kbd { color: #a8430f; background: #fff; }
[data-design=v1] dialog { background: var(--paper); border-color: var(--frame); border-radius: var(--r); }

/* Settings: theme and night */
.themeopts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

/* Smaller screens. 1366: the job row puts who-can-help under the title. Phones keep tabs, one panel at a time. */
@media (max-width: 1850px) {
  [data-design=v1] .long { display: none; } [data-design=v1] .short { display: inline; }
  [data-design=v1] .top h1 { font-size: 25px; margin: 2px 0 8px; }
}
@media (max-width: 1600px) {
  [data-design=v1] .jobhead { display: none; }
  [data-design=v1] .row.jobrow { grid-template-columns: minmax(0, 1fr) 56px 88px; grid-template-areas: "t o b" "h h h"; row-gap: 4px; }
  [data-design=v1] .jobrow .jt { grid-area: t; } [data-design=v1] .jobrow .help { grid-area: h; } [data-design=v1] .jobrow .help:empty { display: none; }
  [data-design=v1] .jobrow .odds { grid-area: o; } [data-design=v1] .jobrow > button { grid-area: b; }
}
@media (max-width: 1100px) { [data-design=v1] .facts { grid-template-columns: repeat(2, minmax(0, auto)); } [data-design=v1] .top h1 { font-size: 22px; } [data-design=v1] .worth b { font-size: 22px; } }
@media (max-width: 760px) {
  [data-design=v1] main { padding-top: 0; grid-template-columns: 1fr; }
  [data-design=v1] .top { margin: 0 -12px; padding: 8px 12px; }
  [data-design=v1] .top .avatar { width: 52px; height: 60px; }
  [data-design=v1] .top h1 { font-size: 18px; margin: 2px 0 4px; }
  [data-design=v1] .kicker, [data-design=v1] .facts > div:not(.now), [data-design=v1] .facts .k, [data-design=v1] .worth { display: none; }
  [data-design=v1] .facts { display: block; }
  [data-design=v1] .topbtns { flex-direction: column; }
  [data-design=v1] .topbtns > .tb { flex-direction: column; align-items: stretch; gap: 6px; }
  [data-design=v1] .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  [data-design=v1] .stats.on { display: grid; }
  [data-design=v1] #event:not(.wedding) { padding: 26px 18px 18px; } [data-design=v1] #event:not(.wedding) > p { font-size: 20px; }
}

/* ===== Every common screen (GAME-27): phones, phones on their side, tablets. `node tools/sizes.mjs` audits 21 sizes. ===== */
/* Phones: the v1 dock rule above outranks the phone grid, and the stats row must hide like any other tab. */
@media (max-width: 760px) {
  [data-design=v1] .acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  [data-design=v1] .stats:not(.on) { display: none; }
  /* The top: buttons in one short row above the name, so the name and status get the full width. */
  [data-design=v1] .top { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  [data-design=v1] .topbtns, [data-design=v1] .topbtns > .tb { flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; }
  [data-design=v1] .acts .primary { padding-top: 8px; padding-bottom: 8px; }
  [data-design=v1] .topbtns > .tb { flex-wrap: wrap; }
  /* Seven actions fill two rows but one cell: the version takes it, and "2 left" sits beside Age up (GAME-55; a third
     row cost the smallest phones their panel room) */
  [data-design=v1] .acts .ver { grid-column: 4; grid-row: 2; justify-self: center; align-self: center; margin: 0; }
}
.admset, .admenu .admclose { display: none; } /* phones only: Admin opens from Settings and closes from its own menu */
/* Phones (Michael, 2026-11-09): Settings, Music and Admin live behind the cog in the tabs (no You tab: the stats line says it). */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .musctl, .top [data-a=settings], .top [data-a=restart] { display: none; } /* Start over: top of Settings */
  .tabs, [data-design=v1] .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; }
  .tabs .cog { font-size: 16px; line-height: 1.1; }
  .top .admin > button { display: none; } .admset { display: block !important; margin-bottom: 12px; } .admenu .admclose { display: block !important; margin-left: auto; }
  .admenu { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-height: calc(100dvh - 24px); } /* the base rule below line 38's won */
}
/* Phones standing up: the top as short as it can be. The face sits left and the name, chips and stats wrap around it,
   centered; Start over (and Admin) sit under the stats line. */
@media (max-width: 760px) and (min-height: 521px) {
  [data-design=v1] .top { flex-direction: column; gap: 2px; }
  [data-design=v1] .topbtns, [data-design=v1] .topbtns > .tb { justify-content: center; }
  [data-design=v1] .top .who { display: block; text-align: center; }
  [data-design=v1] .top .who > .avatar { float: left; margin: 0 10px 2px 0; width: 70px; height: 80px; } /* as tall as name, net worth and stats */
  [data-design=v1] .facts .now, [data-design=v1] .top .status { display: block; }
  [data-design=v1] .top .status :is(span, .chipbtn) { display: inline-block; margin: 2px; max-width: 100%; box-sizing: border-box; vertical-align: middle; }
  [data-design=v1] .top h1 { margin: 2px 0; }
  [data-design=v1] .top .mini { margin: 0 0 6px; font-size: 13px; line-height: 1.35; }
  [data-design=v1] .top .mini .nw { display: block; font: 700 22px/1.15 var(--f-num); margin-bottom: 1px; } /* net worth: the number to watch */
  [data-design=v1] .top .facts { clear: left; } /* the chips start under the face, at full width */
  [data-design=v1] .top .topbtns button { min-height: 24px; padding: 1px 10px; font-size: 12px; }
  [data-design=v1] .top .status :is(span, .chipbtn) { margin: 1px 2px; }
}
/* A small phone on its side (iPhone SE, 667x375): the dock is one row, as on a laptop. */
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .acts, [data-design=v1] .acts { grid-template-columns: auto repeat(7, minmax(0, 1fr)) auto; gap: 4px; } /* seven actions since Go out */
  .acts .primary { padding-left: 14px; padding-right: 14px; }
  .acts .ver { display: none; }
  .acts button { padding: 5px 2px; font-size: 13px; }
}
/* The smallest phones on their side (568x320): ten things in one dock row, so tighter type ("Work out" wrapped). */
@media (max-width: 600px) and (max-height: 520px) and (orientation: landscape) { .acts button, [data-design=v1] .acts button { font-size: 12px; padding-left: 1px; padding-right: 1px; } }
/* Tablets standing up (761-1100 wide, taller than wide): two columns. Stats across, Money | Work, People | Story. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto 1fr 1fr;
    grid-template-areas: "top top" "stats stats" "money work" "people log"; }
}
/* Below 1100 the top's buttons stack (as in v0) so the facts keep their width; volume lives in Settings. */
@media (max-width: 1100px) and (min-width: 761px) {
  [data-design=v1] .topbtns > .tb { flex-direction: column; align-items: stretch; gap: 6px; }
  .musctl input { display: none; }
  /* The dock: every piece gets its own width (the version sat on Age up at 768), tighter buttons to make room. */
  [data-design=v1] .acts { grid-template-columns: max-content auto max-content; justify-content: space-between; gap: 8px; }
  [data-design=v1] .acts .dl { gap: 4px; } [data-design=v1] .acts .dl button { padding: 6px 7px; font-size: 14px; }
  [data-design=v1] .acts .primary { padding-left: 16px; padding-right: 16px; }
}
/* Phones on their side (short and wide): one panel at a time with tabs, a one-line top, the dock in one row. */
@media (max-height: 520px) and (orientation: landscape) {
  main { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; grid-template-areas: "top" "panel"; padding: 6px 12px calc(var(--dock) + 6px); gap: 6px; }
  main > section:not(.top) { grid-area: panel; display: none !important; }
  main > section.on { display: block !important; } [data-design=v1] main > section.stats.on { display: grid !important; }
  .top { padding: 6px 12px !important; } [data-design=v1] .top { margin: 0 -12px; flex-direction: row; } .top .avatar { width: 40px !important; height: 46px !important; }
  .top h1 { font-size: 17px !important; margin: 0 0 2px !important; } .top p:not(.mini), .top .kicker, .top .worth, .top .facts > div:not(.now), .top .facts .k { display: none; }
  .top .facts { display: block; } .top .mini { display: block; font-size: 12px; margin: 0; color: var(--head-fg, var(--ink)); }
  .topbtns, .topbtns > .tb { flex-direction: row !important; align-items: center !important; gap: 6px; } .topbtns button, .admin > button { padding: 3px 8px; font-size: 12px; }
  .musctl input { display: none; }
  .dock { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .acts .primary { padding-top: 6px; padding-bottom: 6px; } .acts button { padding: 5px 8px; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; } .tabs button { padding: 4px 2px; font-size: 13px; }
  .long { display: none; } .short { display: inline; }
  .admenu { position: fixed; left: 12px; right: 12px; top: 50px; width: auto; max-height: calc(100dvh - 60px); }
}
/* The smallest phones (320-360 wide, iPhone SE 1st gen): smaller type in the top so a panel keeps room. */
@media (max-width: 360px) {
  [data-design=v1] .topbtns button, [data-design=v1] .admin > button { font-size: 11px; padding: 3px 6px; min-height: 28px; }
  .musctl .lbl { display: none; } /* just the note on the smallest phones, so the header buttons fit one row (tooltip and label say Music) */
  [data-design=v1] .acts button { padding-top: 7px; padding-bottom: 7px; } [data-design=v1] .acts .primary { padding-top: 6px; padding-bottom: 6px; }
  [data-design=v1] .tabs button { padding-top: 5px; padding-bottom: 5px; }
  [data-design=v1] .top h1 { font-size: 16px; } [data-design=v1] .top .mini { font-size: 12px; line-height: 1.3; }
  [data-design=v1] .top .status :is(span, .chipbtn) { font-size: 11px; padding: 0 6px; }
  /* One line per chip: a long one ("Living in a nice apartment in a good part of town") ends in an ellipsis, not a second line. */
  .top .status :is(span, .chipbtn) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 104px); } /* the space beside the face */
}
/* The year's question on a short screen (a phone on its side): smaller type so the choices show without scrolling. */
@media (max-height: 520px) {
  [data-design=v1] #event:not(.wedding) { padding: 16px 18px 14px; } [data-design=v1] #event:not(.wedding) > p { font-size: 17px; margin-bottom: 10px; }
  [data-design=v1] #event .evtag { margin: 0 0 8px; } [data-design=v1] #event .btns { gap: 6px; } [data-design=v1] #event .btns button { padding: 7px 12px; }
}
/* Phones on their side, 640+ wide (Michael, 2026-11-09): more than Story. Settings picks the layout (ui.land, <html data-land>):
   a (default) Story beside Money / Work / People; b the same with the actions in a rail on the right; c Money and Work side
   by side under a strip of the latest story. Narrower phones on their side keep one panel. */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) {
  main { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; grid-template-areas: "top top" "log panel"; }
  main > section.log { grid-area: log; display: block !important; }
  .tabs [data-k=story] { display: none; }
  .tabs, [data-design=v1] .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; }
}
/* b needs 800px of width (on a 667px iPhone SE the Work panel wrapped a word per line and ran under its buttons), else a. */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 800px) {
  /* b: the dock becomes a column on the right, so the panels get the full height */
  [data-land=b] main { padding: 6px calc(184px + env(safe-area-inset-right, 0px)) 6px 12px !important; }
  [data-land=b] .dock { inset: 0 0 0 auto !important; width: calc(172px + env(safe-area-inset-right, 0px)); border-top: 0 !important; border-left: 2px solid var(--frame, var(--line));
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px calc(8px + env(safe-area-inset-right, 0px)) 8px 8px !important; box-sizing: border-box; overflow-y: auto; }
  [data-land=b] .acts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
  [data-land=b] .acts .dl, [data-land=b] .acts .dr { display: contents !important; }
  [data-land=b] .acts > *, [data-land=b] .acts .dl > *, [data-land=b] .acts .dr > * { order: 0 !important; }
  [data-land=b] .acts .ver, [data-land=b] .acts .keys { display: none !important; }
  [data-land=b] .acts .ageup { grid-column: 1 / -1 !important; grid-row: 5 !important; display: flex; flex-direction: column; gap: 4px; } /* the rail is too narrow for side by side */
  [data-land=b] .acts .ageup .left { order: -1; align-self: center; }
  [data-land=b] .acts .ageup .primary { padding: 8px 4px !important; font-size: 15px; }
  [data-land=b] .acts .dl button { font-size: 12px; padding: 5px 2px !important; }
  [data-land=b] .tabs, [data-design=v1][data-land=b] .tabs { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 2px; }
}
/* c needs 380px of height (an iPhone SE on its side has 375: Money and Work got 71px each), else it shows a. */
@media (max-height: 520px) and (min-height: 380px) and (orientation: landscape) and (min-width: 640px) {
  /* c: Money and Work both open (the Money tab shows the pair), People takes both columns when picked */
  [data-land=c] main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto 74px minmax(0, 1fr); grid-template-areas: "top top" "log log" "money work"; }
  [data-land=c] main > section.log { overflow: auto; } [data-land=c] main > section.log h2 { display: none; }
  [data-land=c] main > section.money { grid-area: money; display: block !important; }
  [data-land=c] main > section.work { grid-area: work; display: block !important; }
  [data-land=c] main > section.people { grid-area: 3 / 1 / 4 / 3; }
  [data-land=c] main:has(> section.people.on) > :is(section.money, section.work) { display: none !important; }
  [data-land=c] .tabs [data-k=work] { display: none; }
  [data-land=c] .tabs, [data-design=v1][data-land=c] .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; }
}
/* Age up sits in the exact middle with "2 left" beside it (Michael, 2026-11-09), on every screen: the group is a 1fr|Age up|1fr grid,
   and both 1fr columns size to the label, so Age up is centered in it. Phones standing up: its own row. Phones on their side:
   four actions, the group, three actions and an empty cell. */
.acts .ageup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.acts .ageup .primary { grid-column: 2; }
.acts .ageup .left { grid-column: 3; justify-self: start; margin: 0; }
@media (max-width: 760px) {
  .acts .ageup, [data-design=v1] .acts .ageup { grid-column: 1 / -1; grid-row: 3; }
  .acts .ageup .primary { min-width: min(280px, 58vw); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .acts, [data-design=v1] .acts { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } /* under 800 wide: actions, then Age up */
  .acts .dl, .acts .dr { display: contents; }
  .acts .ageup, [data-design=v1] .acts .ageup { grid-column: 1 / -1; grid-row: 2; }
  .acts .ageup .primary { min-width: 220px; }
  .acts .ver, .acts .keys { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) and (min-width: 800px) {
  .acts, [data-design=v1] .acts { grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(4, minmax(0, 1fr)); }
  .acts .ageup, [data-design=v1] .acts .ageup { grid-column: 5; grid-row: 1; }
  .acts .ageup .primary { min-width: 0; }
  .acts .dl button, [data-design=v1] .acts .dl button { font-size: 13px; padding-left: 2px; padding-right: 2px; } /* "Work out" wrapped at 844 */
}
/* Start over at the top of Settings (every screen; on phones it is the only place). */
.setrestart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }