/* Midlife Survivors parts, v1 (design system B1, Nov 10, 2026). Spec: docs/design/design-system-v1.md, section 5.
   Built only from assets/ui/ms-tokens.css. B1 adds the Button and the Sheet's header, action bar and legend;
   later steps add the Row, Card and the rest. */

/* 5.1 Button: one primary (coffee fill) per screen; secondary is an outline; quiet is text only. */
.ms-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--ms-touch, 44px); padding: var(--ms-space-2, 8px) var(--ms-space-4, 16px); box-sizing: border-box;
  border-radius: var(--ms-radius-m, 4px); border: var(--ms-border-w, 2px) solid var(--ms-border); background: transparent;
  color: var(--ms-text); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: transform var(--ms-fast, 120ms) var(--ms-ease), box-shadow var(--ms-fast, 120ms) var(--ms-ease), background var(--ms-fast, 120ms); }
.ms-btn .ms-btn-label { font: var(--ms-label-m, 13px)/1.1 var(--ms-font-label); letter-spacing: var(--ms-label-track); text-transform: uppercase; }
.ms-btn .ms-btn-sub { font: 600 var(--ms-body-s, 14px)/1.2 var(--ms-font-read); color: var(--ms-text-quiet); }
.ms-btn.primary { min-height: var(--ms-touch-primary, 48px); background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-surface); box-shadow: var(--ms-shadow-button); }
.ms-btn.primary .ms-btn-sub { color: var(--ms-surface); opacity: .8; }
.ms-btn.quiet { border-color: transparent; }
.ms-btn.quiet:focus-visible .ms-btn-label, .ms-btn.quiet.nav-focused .ms-btn-label { text-decoration: underline; }
@media (hover: hover) { .ms-btn:hover { background: rgba(255, 240, 207, .06); } .ms-btn.primary:hover { background: #F3A766; } }
.ms-btn:active, .ms-btn.pressed { transform: translateY(2px); box-shadow: none; }
.ms-btn[disabled], .ms-btn.disabled { opacity: .4; cursor: default; transform: none; }
/* the one focus ring: 3 px cream outside a 2 px navy gap, so it shows on any color */
.ms-btn:focus-visible, #ui-layer .ms-btn.ms-btn.nav-focused { outline: 3px solid var(--ms-paper) !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--ms-surface) !important; transform: none !important; border-color: var(--ms-border) !important; }
#ui-layer .ms-btn.primary.ms-btn.nav-focused { border-color: var(--ms-accent) !important; }

/* 5.4 Sheet: header (memo strip + title + one help line), body, action bar pinned at the bottom, legend */
.ms-sheet-strip { display: inline-flex; align-items: center; gap: var(--ms-space-2, 8px); align-self: flex-start;
  background: var(--ms-paper); color: var(--ms-surface); border-left: 4px solid var(--ms-accent); border-radius: var(--ms-radius-s, 2px);
  padding: 4px 10px; font: var(--ms-label-s, 11px)/1.2 var(--ms-font-label); letter-spacing: var(--ms-label-track); text-transform: uppercase; }
.ms-sheet-strip b { font: 700 var(--ms-body-s, 14px)/1.2 var(--ms-font-read); text-transform: none; letter-spacing: 0; }
.ms-sheet-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: stretch; gap: var(--ms-space-2, 8px);
  margin-top: var(--ms-space-4, 16px); padding: var(--ms-space-3, 12px) 0 calc(var(--ms-space-1, 4px) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(23, 28, 53, 0), var(--ms-surface) 24%); }
.ms-sheet-actions .ms-left { display: flex; gap: var(--ms-space-2, 8px); flex: 1 1 auto; min-width: 0; }
.ms-sheet-actions .ms-left .ms-btn { flex: 1 1 0; min-width: 0; }
.ms-sheet-actions .ms-btn.primary { flex: 0 0 auto; min-width: 128px; }
.ms-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: var(--ms-space-2, 8px);
  font: var(--ms-label-s, 11px)/1.4 var(--ms-font-label); letter-spacing: var(--ms-label-track); color: var(--ms-text-quiet); }
.ms-legend kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 4px;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius-s, 2px); font: inherit; color: var(--ms-text); }
@media (max-width: 599px) {
  .ms-sheet-actions { flex-wrap: wrap; }
  .ms-sheet-actions .ms-btn.primary { flex: 1 1 100%; order: -1; }   /* phone: PICK full width, right under the thumb */
}
@media (prefers-reduced-motion: reduce) { .ms-btn { transition: none; } .ms-btn:active, .ms-btn.pressed { transform: none; } }

/* 5.2 Row (B2): one list row for settings now, and the shop, Lounge, leaderboard and credits later.
   Leading icon, title + one help line, one trailing slot (value, switch, chevron). The whole row is the tap target. */
.ms-rows { display: flex; flex-direction: column; gap: var(--ms-space-1, 4px); }
.ms-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ms-space-3, 12px); width: 100%; box-sizing: border-box;
  min-height: 56px; padding: var(--ms-space-2, 8px) var(--ms-space-3, 12px); text-align: left; cursor: pointer;
  background: var(--ms-raised); color: var(--ms-text); border: var(--ms-border-w, 2px) solid transparent; border-radius: var(--ms-radius-m, 4px);
  -webkit-tap-highlight-color: transparent; transition: background var(--ms-fast, 120ms); }
.ms-row .ms-row-title { display: block; font: 700 var(--ms-body-l, 18px)/1.2 var(--ms-font-read); }
.ms-row .ms-row-sub { display: block; font: 600 var(--ms-body-s, 14px)/1.3 var(--ms-font-read); color: var(--ms-text-quiet); margin-top: 2px; }
.ms-row .ms-row-val { font: var(--ms-label-m, 13px)/1 var(--ms-font-label); letter-spacing: var(--ms-label-track); color: var(--ms-paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-row .ms-row-val.on { color: var(--ms-ok); }
.ms-row .ms-row-val.off { color: var(--ms-text-quiet); }
@media (hover: hover) { .ms-row:hover { background: #3a4260; } }
.ms-row:active { transform: translateY(1px); }
#ui-layer .ms-row.ms-row.nav-focused { outline: 3px solid var(--ms-paper) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--ms-surface) !important;
  transform: none !important; border-color: var(--ms-border) !important; }
.ms-section-head { font: var(--ms-label-s, 11px)/1 var(--ms-font-label); letter-spacing: var(--ms-label-track); color: var(--ms-text-quiet);
  text-transform: uppercase; margin: var(--ms-space-4, 16px) 0 var(--ms-space-2, 8px); }
.ms-meter { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.ms-meter i { width: 6px; height: 12px; background: var(--ms-line); }
.ms-meter i.on { background: var(--ms-paper); }

/* The Sheet's card: one look for every menu that pauses (B2 uses it for Settings and Pause) */
#ui-layer .ms-sheet { width: min(640px, 94vw); max-height: min(88dvh, 920px); overflow-y: auto; display: flex; flex-direction: column;
  background: var(--ms-surface); border: var(--ms-border-w, 2px) solid var(--ms-border); border-radius: var(--ms-radius-l, 8px);
  box-shadow: var(--ms-shadow-card); padding: var(--ms-space-5, 24px) var(--ms-space-5, 24px) 0; box-sizing: border-box; text-align: left; }
#ui-layer .ms-sheet .ms-sheet-title { font: 700 var(--ms-display-s, 22px)/1.1 var(--ms-font-label); letter-spacing: var(--ms-label-track); color: var(--ms-text); margin: var(--ms-space-3, 12px) 0 var(--ms-space-1, 4px); }
#ui-layer .ms-sheet .ms-sheet-help { font: 600 var(--ms-body-s, 14px)/1.35 var(--ms-font-read); color: var(--ms-text-quiet); margin: 0; }
@media (max-width: 599px) {
  #ui-layer .ms-sheet { width: 100vw; max-height: 88dvh; border-radius: var(--ms-radius-l, 8px) var(--ms-radius-l, 8px) 0 0; padding: var(--ms-space-4, 16px) var(--ms-space-4, 16px) 0; align-self: flex-end; }
}
/* the overlay behind a Sheet: solid scrim, no blur (spec 2.3: no glass) */
#ui-layer .ui-modal.ms-sheet-host { background: var(--ms-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 599px) { #ui-layer .ui-modal.ms-sheet-host { padding: 0; align-items: flex-end; } }

/* Shells (design system B7): every small pop-up uses one of two. A Sheet card for prompts (account, We moved),
   a Moment card for the big beats (retire at 80, the bonus chest). Same surface, border, corners, strip and buttons. */
#ui-layer .ms-shell.ms-shell, body > .ui-modal .ms-shell.ms-shell { background: var(--ms-surface) !important; border: var(--ms-border-w, 2px) solid var(--ms-border) !important;
  border-radius: var(--ms-radius-l, 8px) !important; box-shadow: var(--ms-shadow-card) !important; padding: var(--ms-space-5, 24px) !important; color: var(--ms-text);
  width: min(560px, calc(100vw - 2 * var(--ms-space-4, 16px))); max-width: none; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ms-space-2, 8px); }
#ui-layer .ms-shell.ms-moment { width: min(640px, calc(100vw - 2 * var(--ms-space-4, 16px))); text-align: center; }
#ui-layer .ms-shell .ms-sheet-strip, body > .ui-modal .ms-shell .ms-sheet-strip { margin: 0 0 var(--ms-space-1, 4px); }
#ui-layer .ms-shell.ms-moment .ms-sheet-strip { align-self: center; }
#ui-layer .ms-shell .modal-title, body > .ui-modal .ms-shell .modal-title { font: 700 var(--ms-display-s, 22px)/1.15 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track);
  color: var(--ms-text) !important; text-shadow: none !important; margin: 0 !important; }
#ui-layer .ms-shell .modal-sub, #ui-layer .ms-shell .gameover-cause, body > .ui-modal .ms-shell .modal-sub { font: 600 var(--ms-body, 16px)/1.4 var(--ms-font-read) !important; color: var(--ms-text-quiet) !important; margin: 0 !important; font-style: normal !important; }
#ui-layer .ms-shell .ms-shell-actions { display: flex; gap: var(--ms-space-2, 8px); margin-top: var(--ms-space-3, 12px); }
#ui-layer .ms-shell .ms-shell-actions .ms-btn { flex: 1 1 0; }
#ui-layer .ms-shell .ms-shell-actions .ms-btn.primary { order: 2; }
@media (max-width: 599px) { #ui-layer .ms-shell .ms-shell-actions { flex-direction: column; } #ui-layer .ms-shell .ms-shell-actions .ms-btn.primary { order: -1; } }

/* B8 (Nov 10): the title's sub-screens, patch notes and lore. One header (strip, title, help line), no repeated logo,
   nothing you read under 14 px (body-s), labels on the label tokens. */
#ui-layer .tp-panel .tp-sub-title { font: 700 var(--ms-display-s, 22px)/1.1 var(--ms-font-label); letter-spacing: var(--ms-label-track); color: var(--ms-text); margin: var(--ms-space-3, 12px) 0 var(--ms-space-1, 4px); text-align: center; }
#ui-layer .tp-panel .tp-sub-help { font: 600 var(--ms-body-s, 14px)/1.35 var(--ms-font-read); color: var(--ms-text-quiet); margin: 0 0 var(--ms-space-3, 12px); text-align: center; }
#ui-layer .tp-panel > .ms-sheet-strip { align-self: center; }
#ui-layer #title-modal .title-version { font: 600 var(--ms-body-s, 14px)/1.3 var(--ms-font-read) !important; color: var(--ms-text-quiet) !important; }
#ui-layer #title-modal .tp-band-toggle { font: var(--ms-label-s, 11px)/1 var(--ms-font-label) !important; min-height: var(--ms-touch, 44px); }
#ui-layer #title-modal .title-style-switcher > span { font: var(--ms-label-s, 11px)/1.2 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track); }
#ui-layer #title-modal .ms-poll-opt, #ui-layer #title-modal .ms-poll-foot { font-size: var(--ms-body-s, 14px) !important; }
/* Extras as Rows */
#ui-layer .extras-rows { margin: var(--ms-space-2, 8px) 0 var(--ms-space-4, 16px); }
#ui-layer .extras-rows .ms-row-val { font-size: var(--ms-label-l, 16px); color: var(--ms-text-quiet); }
#ui-layer .extras-rows .ms-row.danger { border-left: 4px solid var(--ms-danger); }
@media (min-width: 600px) { #ui-layer .extras-rows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space-2, 8px); } }
/* Achievements */
#ui-layer #title-modal .ach-name { font: 700 var(--ms-body, 16px)/1.25 var(--ms-font-read) !important; }
#ui-layer #title-modal .ach-desc { font: 600 var(--ms-body-s, 14px)/1.35 var(--ms-font-read) !important; color: var(--ms-text-quiet) !important; }
#ui-layer #title-modal .ach-reward { font: var(--ms-label-s, 11px)/1.2 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track); color: var(--ms-ok) !important; }
#ui-layer #title-modal .ach-tile.locked .ach-reward { color: var(--ms-paper) !important; }
/* Leaderboard */
#ui-layer #title-leaderboard th { font: var(--ms-label-s, 11px)/1.2 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track); }
#ui-layer #title-leaderboard td, #ui-layer #title-leaderboard .lb-status { font-size: var(--ms-body-s, 14px) !important; font-family: var(--ms-font-read) !important; }
#ui-layer #title-leaderboard .lb-empty { font: 600 var(--ms-body, 16px)/1.4 var(--ms-font-read) !important; }
#ui-layer #title-leaderboard .lb-scope-btn { min-height: var(--ms-touch, 44px); font: var(--ms-label-s, 11px)/1 var(--ms-font-label) !important; }
/* Credits */
#ui-layer #title-modal .credit-role { font: var(--ms-label-s, 11px)/1.3 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track); color: var(--ms-text-quiet) !important; text-transform: uppercase; }
#ui-layer #title-modal .credit-name { font: 700 var(--ms-body, 16px)/1.35 var(--ms-font-read) !important; }
#ui-layer #title-modal .credit-closing { font: 600 var(--ms-body-s, 14px)/1.4 var(--ms-font-read) !important; }
/* Patch notes and lore on the Sheet */
#ui-layer .ms-sheet.ms-b8 { width: min(760px, 94vw) !important; max-width: none !important; background: var(--ms-surface) !important; border: var(--ms-border-w, 2px) solid var(--ms-border) !important;
  border-radius: var(--ms-radius-l, 8px) !important; box-shadow: var(--ms-shadow-card) !important; padding: var(--ms-space-5, 24px) var(--ms-space-5, 24px) 0 !important; }
#ui-layer .ms-b8 .changelog-list, #ui-layer .ms-b8 .lore-content { max-height: none !important; overflow: visible !important; margin-top: var(--ms-space-3, 12px); }
#ui-layer .ms-b8 .changelog-entry, #ui-layer .ms-b8 .lore-card { background: var(--ms-raised) !important; border: 0 !important; border-left: 4px solid var(--ms-line) !important; border-radius: var(--ms-radius-m, 4px) !important;
  box-shadow: none !important; padding: var(--ms-space-3, 12px) var(--ms-space-4, 16px) !important; margin-bottom: var(--ms-space-2, 8px) !important; }
#ui-layer .ms-b8 .changelog-entry.latest { border-left-color: var(--ms-accent) !important; }
#ui-layer .ms-b8 .changelog-ver, #ui-layer .ms-b8 .lore-card-code { font: var(--ms-label-s, 11px)/1.3 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track); color: var(--ms-paper) !important; }
#ui-layer .ms-b8 .changelog-date { font: 600 var(--ms-body-s, 14px)/1.3 var(--ms-font-read) !important; color: var(--ms-text-quiet) !important; }
#ui-layer .ms-b8 .changelog-title, #ui-layer .ms-b8 .lore-card-title { font: 700 var(--ms-body-l, 18px)/1.25 var(--ms-font-read) !important; color: var(--ms-text) !important; margin: var(--ms-space-1, 4px) 0 !important; }
#ui-layer .ms-b8 .changelog-notes li, #ui-layer .ms-b8 .lore-card-body, #ui-layer .ms-b8 .lore-card-meta, #ui-layer .ms-b8 .lore-card-quote {
  font-family: var(--ms-font-read) !important; font-size: var(--ms-body-s, 14px) !important; line-height: 1.45 !important; color: var(--ms-text) !important; }
#ui-layer .ms-b8 .lore-card-body { font-size: var(--ms-body, 16px) !important; }
#ui-layer .ms-b8 .lore-card-quote { color: var(--ms-text-quiet) !important; font-style: italic; }
#ui-layer .ms-b8 .lore-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ms-space-2, 8px); margin-top: var(--ms-space-3, 12px); }
#ui-layer .ms-b8 .lore-tab-btn { min-height: var(--ms-touch, 44px); font: var(--ms-label-m, 13px)/1.1 var(--ms-font-label) !important; letter-spacing: var(--ms-label-track);
  background: transparent !important; color: var(--ms-text) !important; border: var(--ms-border-w, 2px) solid var(--ms-border) !important; border-radius: var(--ms-radius-m, 4px) !important; box-shadow: none !important; }
#ui-layer .ms-b8 .lore-tab-btn.active { background: var(--ms-paper) !important; color: var(--ms-surface) !important; border-color: var(--ms-paper) !important; }
@media (max-width: 599px) { #ui-layer .ms-b8 .lore-tabs { grid-template-columns: 1fr 1fr; } #ui-layer .ms-sheet.ms-b8 { width: 100vw !important; padding: var(--ms-space-4, 16px) var(--ms-space-4, 16px) 0 !important; } }
#ui-layer .ms-b8 .changelog-ver { background: transparent !important; padding: 0 !important; border: 0 !important; }
#ui-layer .ms-b8 .ms-sheet-actions { justify-content: flex-end; }
#ui-layer #title-modal .title-style-switcher .t-style-btn { font: var(--ms-label-s, 11px)/1.1 var(--ms-font-label) !important; min-height: var(--ms-touch, 44px); }