/* Your Story UI pass (1 Oct 2026): account menu as in Crew Comms, centred round icons, one type
   scale, tighter spacing, Crew Comms motto rule, smaller wordmark. Loaded LAST so it wins over the
   carried v0.38 style.css without editing it. Touch targets stay >= 44 px; text stays AAA. */

:root {
  /* One type scale for sibling tiles, rows and menu items; follows the Text size setting (--text-scale, set by the carried UI for everyone). */
  --ys-fs-xs: calc(13px * var(--text-scale, 1));
  --ys-fs-sm: calc(14px * var(--text-scale, 1));
  --ys-fs-md: calc(16px * var(--text-scale, 1));
  --ys-fs-lg: calc(17px * var(--text-scale, 1));
  /* ~15-20 % tighter than v0.38 (12px 16px / 5px). */
  --ys-menu-padding: 9px 13px;
  --ys-menu-gap: 4px;
  /* The wordmark ~28 % smaller than v0.38 (40 px -> 29 px on a desktop). */
  --ys-wordmark: clamp(16px, 2.3vw, 29px);
  /* Menu surface: the canvas colours of the active palette (AAA: on-canvas / accent on canvas >= 7:1). */
  --ys-menu-bg: var(--ys-canvas, #102b26);
  --ys-menu-text: var(--ys-on-canvas, #f7f1e4);
  --ys-menu-gold: var(--ys-accent, #e5d3a4);
  --ys-menu-line: color-mix(in srgb, var(--ys-menu-text) 32%, transparent);
  --ys-menu-hover: color-mix(in srgb, var(--ys-menu-text) 12%, transparent);
}

/* ---- 5. "always be kind": the Crew Comms rule -------------------------------------------------------
   Crew Comms: Caveat, weight 600, 1.1rem beside a 1.25rem name (0.88 of the wordmark), in the brand
   accent (--gold). Here: the self-hosted Caveat (assets/bmsg-caveat-v1.2.woff2, CSP font-src 'self'),
   weight 600, 0.88 x the wordmark but never below 16 px (Dave, 1 Oct 2026), in the palette accent (--ys-accent). */
#welcome39 .welcome-header39 .welcome-tagline57,
.ys-motto {
  font-family: 'BMSG Caveat', Caveat, cursive !important;
  font-weight: 600 !important;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0 !important;
}
#welcome39 .welcome-header39 .welcome-tagline57 {
  font-size: max(16px, calc(var(--ys-wordmark) * .88)) !important;
  line-height: 1.15 !important;
  color: var(--ys-accent, #e5d3a4) !important;
  margin-top: 0 !important;
  margin-left: calc(var(--ys-wordmark) * 1.2 + 10px) !important;
}
main > header .ys-motto-header { font-size: max(16px, calc(28px * .88)); color: var(--ys-accent, #e5d3a4); }
@media (max-width: 600px) { main > header .ys-motto-header { font-size: max(16px, calc(22px * .88)); } }
/* The book workspace is a light page: its accent is the light-theme gold (Crew Comms soft/hc-light). */
.ys-ws-head .ys-motto { font-size: calc(1.6em * .88); color: #6b3a00; }
html[data-ys-contrast="high"] .ys-ws-head .ys-motto { color: #000; }
@media (forced-colors: active) { #welcome39 .welcome-header39 .welcome-tagline57, .ys-motto { color: CanvasText !important; } }

/* ---- 6. Wordmark ~28 % smaller ---------------------------------------------------------------------- */
#welcome39 .welcome-brand42 strong { font-size: var(--ys-wordmark) !important; line-height: 1.15 !important; }
#welcome39 .welcome-brand42 > svg, #welcome39 .welcome-brand42 .ofr-heart49 {
  width: calc(var(--ys-wordmark) * 1.2) !important; height: calc(var(--ys-wordmark) * 1.2) !important;
}
#welcome39 .welcome-brand42 { gap: 10px !important; }

/* Narrow screens (1 Oct 2026): the wordmark may never clip against the round buttons. The header is a size
   container, and each of its children derives the wordmark size from the room left after the account and
   menu buttons (2 x 46 px + 2 gaps), allowing ~12.6 em for "OurFamilyRocks.com" (a wide serif fallback
   included). The desktop size stays the cap; the floor is 13 px. Below 480 px ".com" is set smaller. */
#welcome39 header.welcome-header39 { container-type: inline-size; }
#welcome39 header.welcome-header39 > * {
  --ys-wordmark: max(13px, min(clamp(16px, 2.3vw, 29px), calc((100cqw - 108px - 12px) / 12.6)));
}
#welcome39 .welcome-brand42 { min-width: 0; }
#welcome39 .welcome-brand42 > span { min-width: 0; }
@media (max-width: 480px) {
  #welcome39 .welcome-brand42 .ofr-domain49 { font-size: .72em; }
  #welcome39 .welcome-brand42 { gap: 7px !important; }
}

/* Header: brand + motto | account | menu. */
#welcome39 header.welcome-header39 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto auto;
  column-gap: 8px !important;
  align-items: center;
  padding-block: 0 6px !important;
}
#welcome39 header.welcome-header39 > #ys-account { grid-column: 2; grid-row: 1 / 3; }
#welcome39 header.welcome-header39 > #welcome-settings39 { grid-column: 3 !important; grid-row: 1 / 3 !important; }

/* ---- 2. Round icon buttons: icons centred on both axes ----------------------------------------------- */
.ys-ico { width: 24px; height: 24px; flex: none; display: block; pointer-events: none; }
.ys-ico-sm { width: 18px; height: 18px; }
.ys-ico-xs { width: 14px; height: 14px; }
/* Buttons the carried UI hides in some views keep its display:none (no !important on display here). */
button.ys-icon-btn,
#answer,
.bottom-nav > button { display: inline-flex; }
#welcome39 #welcome-settings39,
#welcome-pause39,
.ys-close,
#close-options { display: inline-flex !important; }
button.ys-icon-btn,
#welcome39 #welcome-settings39,
#welcome-pause39,
#home39,
#answer,
.bottom-nav > button,
.ys-close,
#close-options {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}
button.ys-icon-btn > .ys-ico, #welcome-settings39 > svg { width: 22px !important; height: 22px !important; margin: 0 !important; }
#welcome39 #welcome-settings39 { box-sizing: border-box !important; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 50% !important; }
/* Icon-only round buttons are exact circles (they were 48 x 44 ovals). */
html body #menu-toggle.ys-icon-btn, html body #home39 { box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 50% !important; }
html body #menu-toggle.ys-icon-btn > .ys-ico { width: 22px !important; height: 22px !important; }
/* An icon beside words sits on the words' centre line. */
main > header #quick-note svg { display: block; flex: none; align-self: center; }
#welcome-pause39 { width: 44px !important; height: 44px !important; min-width: 44px; border-radius: 50% !important; }
#welcome-pause39 > .ys-ico { width: 18px !important; height: 18px !important; }
.ys-close, #close-options { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; }
.ys-close > .ys-ico, #close-options > .ys-ico { width: 20px !important; height: 20px !important; }
/* The carried panel's close (×): its .large-glyph rule made it display:block, so the SVG sat at the
   left edge (10 px off centre). Flex-centre it like every other round button. */
html body dialog .close.ys-icon-btn, html body #panel #close.ys-icon-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
  padding: 0 !important; border-radius: 50% !important; line-height: 1 !important;
}
html body dialog .close.ys-icon-btn > .ys-ico { width: 20px !important; height: 20px !important; margin: 0 !important; }
/* Header "Review" (☑ + count badge) and "Choose book" (♙) were text glyphs: now SVGs on the centre. */
html body header #review-top:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; line-height: 1; }
html body header #review-top > .ys-chev { position: static; }
html body header #review-top > .ys-chev > .ys-ico { width: 22px; height: 22px; }
html body header #book-badge30.ys-icon-btn > .ys-ico { width: 24px !important; height: 24px !important; }
/* Chevrons and other one-glyph markers inside tiles sit on the row's centre line. */
.ys-chev { display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; }
/* Phones: the hero actions are narrow; their chevrons go (as in v0.38) and the words get the room. */
@media (max-width: 600px) {
  #welcome39 .home-quick47 > button > span.ys-chev:last-child { display: none !important; }
  html body #welcome39 .home-quick47 > button { font-size: calc(15px * var(--text-scale, 1)) !important; }
}
@media (min-width: 601px) { #welcome39 .home-quick47 > button > span.ys-chev:last-child { display: inline-flex !important; } }
.ys-ico-chev { width: 18px; height: 18px; }

/* ---- 3 + 4. One type scale, tighter tiles ------------------------------------------------------------- */
#welcome39 { padding: clamp(12px, 2.4vw, 36px) !important; }
/* The three hero actions are siblings: one size, one weight, one icon column. */
#welcome39 .home-quick47 > button {
  font-size: var(--ys-fs-lg) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  padding: 8px 12px !important;
  min-height: 44px !important;
}
#welcome39 .home-quick47 > button > span:first-child { font-size: 22px !important; width: 26px; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; }
#welcome39 .home-quick47 > button > span:first-child svg { width: 22px; height: 22px; }
#welcome39 .home-hero48 .home-quick47 { gap: 4px !important; grid-template-rows: repeat(3, minmax(48px, 1fr)) !important; }
/* A shorter hero: the photo sets the height of the three actions beside it. */
#welcome39 .home-hero48 .welcome-photo-frame41 { aspect-ratio: 16 / 9 !important; }
#welcome39 .home-hero48 .welcome-photo-frame41 > img { object-fit: cover !important; }
#welcome39 .home-hero48 .welcome-caption41 { padding: 6px 10px !important; }
#welcome39 .home-hero48 .welcome-caption41 h1 { font-size: clamp(19px, 2.1vw, 27px) !important; margin: 0 !important; line-height: 1.2 !important; }
#welcome39 .home-hero48 .welcome-caption41 p { font-size: var(--ys-fs-md) !important; margin: 2px 0 0 !important; }
#welcome39 .home-task-status57 { font-size: var(--ys-fs-xs) !important; padding: 3px 0 !important; }
#welcome39 .home-hero48 { margin-bottom: 8px !important; }

/* The book page tiles: every title the same size and weight; every second line the same. */
#welcome39 .welcome-page39 { padding: clamp(12px, 2vw, 28px) !important; }
#welcome39 .welcome-page39 > button {
  min-height: 44px !important;
  padding: var(--ys-menu-padding) !important;
  margin: 0 0 var(--ys-menu-gap) !important;
  font-size: var(--ys-fs-lg) !important;
  font-weight: 600 !important;
  gap: 10px !important;
}
#welcome39 .welcome-page39 > button strong { font-size: inherit !important; font-weight: 600 !important; line-height: 1.3 !important; }
#welcome39 .welcome-page39 > button small { font-size: var(--ys-fs-sm) !important; font-weight: 400 !important; line-height: 1.35 !important; margin-top: 1px !important; }
#welcome39 .welcome-page39 > :is(.welcome-action39, .welcome-opening39) > span:first-child { font-size: 20px !important; width: 24px !important; min-width: 24px !important; }
#welcome39 .welcome-page39 > .welcome-opening39, #welcome39 .welcome-page39 > .welcome-action39 { margin-top: 0 !important; }
#welcome39 .welcome-book39 img { width: 48px !important; height: 48px !important; }
#welcome39 .welcome-page39 nav button { font-size: var(--ys-fs-md) !important; font-weight: 600 !important; min-height: 44px !important; padding: 8px 12px !important; }
#welcome39 .welcome-region39 { font-size: var(--ys-fs-sm) !important; }

/* Map screen header: one size for the action buttons. */
@media (min-width: 601px) { main > header :is(#add-content, #quick-note, #ys-open) { font-size: var(--ys-fs-md) !important; font-weight: 600 !important; } }

/* ---- 1. Account button + menu (Crew Comms #who / #userMenu) -------------------------------------------- */
.ys-account { display: flex; align-items: center; }
html body #ys-account-button {
  display: inline-flex !important; align-items: center; gap: 7px; min-height: 44px; min-width: 44px;
  padding: 4px 10px 4px 4px !important; border-radius: 999px !important; cursor: pointer;
  background: transparent !important; color: var(--ys-on-canvas, #f7f1e4) !important;
  border: 1px solid color-mix(in srgb, var(--ys-accent, #e5d3a4) 60%, transparent) !important;
  font: 600 var(--ys-fs-sm)/1.2 'Segoe UI', system-ui, sans-serif !important; width: auto !important; height: auto !important;
}
html body #ys-account-button:hover { background: color-mix(in srgb, var(--ys-on-canvas, #f7f1e4) 12%, transparent) !important; }
html body #ys-account-button:focus-visible { outline: 3px solid var(--ys-accent, #e5d3a4) !important; outline-offset: 2px; }
html body #ys-account-button .ys-who-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  html body #ys-account-button { padding: 4px !important; gap: 0; border-radius: 50% !important; }
  html body #ys-account-button .ys-who-label, html body #ys-account-button > .ys-ico-xs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ys-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 'Segoe UI', system-ui, sans-serif; color: #ffffff; overflow: hidden; letter-spacing: .02em;
}
html body .ys-av { background: var(--ys-av-bg, transparent) !important; }
.ys-av > span { display: block; line-height: 1; }
.ys-av.emoji > span { font-size: 20px; color: #111; }
.ys-av.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ys-av-lg { width: 46px; height: 46px; font-size: 16px; }
.ys-av-lg.emoji > span { font-size: 28px; }

html body #ys-account-menu {
  position: fixed; z-index: 1000; width: min(320px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 12px; box-sizing: border-box;
  background: var(--ys-menu-bg); color: var(--ys-menu-text); border: 1px solid var(--ys-menu-line); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); font: 400 var(--ys-fs-md)/1.35 'Segoe UI', system-ui, sans-serif; text-align: left;
}
html body #ys-account-menu[hidden] { display: none !important; }
html body #ys-account-menu .umHead { display: flex; gap: 12px; align-items: center; padding: 2px 4px 12px; border-bottom: 1px solid var(--ys-menu-line); }
html body #ys-account-menu .umWho { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
html body #ys-account-menu .umName { font-weight: 700; font-size: var(--ys-fs-md); overflow-wrap: anywhere; line-height: 1.25; }
html body #ys-account-menu .umEmail { font-size: var(--ys-fs-sm); overflow-wrap: anywhere; line-height: 1.3; }
html body #ys-account-menu .umBadge {
  margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ys-menu-gold);
  border: 1px solid var(--ys-menu-gold); border-radius: 999px; padding: 0 8px; line-height: 1.6;
}
html body #ys-account-menu .mgrp { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; }
html body #ys-account-menu .mgrp h4 {
  margin: 0 0 2px; padding: 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ys-menu-gold); font-weight: 700;
}
html body #ys-account-menu .umBig {
  margin: 0; padding: 12px 8px 0; border-top: 1px solid var(--ys-menu-line); font-size: var(--ys-fs-md); font-weight: 700;
  display: flex; gap: 10px; align-items: center; color: var(--ys-menu-text); font-family: inherit;
}
html body #ys-account-menu .umBig .ys-ico { width: 18px; height: 18px; color: var(--ys-menu-gold); }
html body #ys-account-menu .umBig + .hint { margin: -6px 8px 0; min-height: 0; }
html body #ys-account-menu .nrow {
  display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 6px 8px !important; margin: 0 !important; border-radius: 8px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--ys-menu-text) !important; text-align: left; text-decoration: none;
  font: 400 var(--ys-fs-md)/1.25 'Segoe UI', system-ui, sans-serif !important; cursor: pointer; height: auto !important;
}
html body #ys-account-menu .nrow:hover { background: var(--ys-menu-hover) !important; border-color: var(--ys-menu-line) !important; }
html body #ys-account-menu .nrow .ys-ico, html body #ys-account-menu .fld > label .ys-ico { width: 18px; height: 18px; color: var(--ys-menu-gold); }
html body #ys-account-menu .nrow.signout { margin-top: 6px !important; border: 1px solid var(--ys-menu-text) !important; font-weight: 600 !important; }
html body #ys-account-menu .fld { display: flex; flex-direction: column; gap: 3px; padding: 4px 8px; }
html body #ys-account-menu .fld > label { display: flex; align-items: center; gap: 10px; font-size: var(--ys-fs-sm); font-weight: 600; margin: 0; color: var(--ys-menu-text); }
html body #ys-account-menu .fld select {
  width: 100%; min-height: 44px; margin: 0; padding: 6px 8px; border-radius: 8px; box-sizing: border-box;
  background: #ffffff; color: #111111; border: 2px solid var(--ys-menu-line); font: 400 var(--ys-fs-md)/1.2 'Segoe UI', system-ui, sans-serif;
}
html body #ys-account-menu .hint { font-size: var(--ys-fs-sm); margin: 2px 8px; color: var(--ys-menu-text); }
html body #ys-account-menu ol.hint { padding-left: 20px; margin: 4px 8px; }
html body #ys-account-menu .umMeta { display: flex; align-items: center; gap: 6px; font-size: var(--ys-fs-sm); margin: 0; padding: 2px 8px 0; }
html body #ys-account-menu details.helpx { margin: 4px 8px 0; font-size: var(--ys-fs-sm); }
html body #ys-account-menu details.helpx > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 0 0 26px; position: relative; }
html body #ys-account-menu details.helpx > summary::marker { content: ''; }
html body #ys-account-menu details.helpx > summary::before { content: '▸'; position: absolute; left: 8px; color: var(--ys-menu-gold); }
html body #ys-account-menu details.helpx[open] > summary::before { content: '▾'; }
html body #ys-account-menu :focus-visible { outline: 3px solid var(--ys-menu-gold) !important; outline-offset: 1px; }
html body #ys-account-menu .charPanel { padding: 4px 8px 6px; }
html body #ys-account-menu .charGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 6px 0; }
html body #ys-account-menu .charGrid button {
  display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 44px !important; height: 44px !important;
  padding: 0 !important; margin: 0 !important; border-radius: 10px !important; font-size: 22px !important; line-height: 1 !important;
  background: color-mix(in srgb, var(--ys-menu-text) 8%, transparent) !important; border: 2px solid transparent !important; color: inherit !important;
}
html body #ys-account-menu .charGrid button[aria-pressed="true"] { border-color: var(--ys-menu-gold) !important; }
html body #ys-account-menu .charGrid.cols button[aria-pressed="true"] { outline: 3px solid var(--ys-menu-gold); outline-offset: 2px; }
/* "Colour behind it" swatches: each paints its own colour (set as --ys-swatch through CSSOM). */
html body #ys-account-menu .charGrid button.ys-swatch { background: var(--ys-swatch, #ffffff) !important; border-color: var(--ys-menu-line) !important; }
html body #ys-account-menu .charGrid button.ys-swatch[aria-pressed="true"] { border-color: var(--ys-menu-gold) !important; }
/* On the light contrast themes the canvas is white or cream: the menu follows with dark text. */
body[data-palette$="-hc-light"] .ys-menu, body[data-palette$="-soft"] html body #ys-account-menu { box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }

/* ---- teller name quick picks (book workspace) ----------------------------------------------------------- */
.ys-teller legend { display: flex; align-items: center; font-weight: 600; }
.ys-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
html body html body dialog.ys-workspace .ys-picks button.ys-pick {
  min-height: 44px; padding: 6px 14px; border-radius: 22px; font-weight: 600;
  background: var(--ys-card) !important; color: var(--ys-ink) !important; border: 2px solid var(--ys-btn) !important;
}
html body dialog.ys-workspace .ys-picks button.ys-pick[aria-pressed="true"] { background: var(--ys-btn) !important; color: var(--ys-on-btn) !important; }
html body dialog.ys-workspace .ys-picks button.ys-pick[aria-pressed="true"]::before { content: "\2713\00a0"; }
html body dialog.ys-workspace .ys-picks button.ys-pick:hover { background: var(--ys-btn-hover) !important; color: var(--ys-on-btn) !important; }

/* ---- the workspace: a little tighter too ------------------------------------------------------------------- */
.ys-ws-head { padding: 12px 16px 8px !important; }
.ys-ws-head h1 { font-size: 1.45em !important; }
.ys-view { padding: 12px 18px 20px !important; }
.ys-ws-body > nav { padding: 10px 8px !important; }
.ys-nav { gap: 4px !important; }
.ys-field { margin: 10px 0 !important; }
.ys-card { margin: 10px 0 !important; padding: 10px 14px !important; }

@media (prefers-reduced-motion: reduce) { #ys-account-menu, #ys-account-menu * { transition: none !important; } }
html[data-ys-motion="reduce"] #ys-account-menu * { transition: none !important; animation: none !important; }

/* Anonymous visitor: the Sign in card above the welcome page. */
.ys-signin-card { max-width: 34rem; margin: 12px auto; padding: 16px 20px; border-radius: 14px; background: var(--ys-surface, #fffaf0); color: var(--ys-on-surface, #2b2417); border: 2px solid var(--ys-accent, #c9a24a); }
.ys-signin-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.ys-signin-steps { margin: 8px 0 14px; padding-left: 1.4rem; line-height: 1.5; }
.ys-signin-btn { min-height: 48px; padding: 10px 28px; font-size: 1.1rem; font-weight: 700; border-radius: 12px; border: 0; cursor: pointer; background: var(--ys-accent, #c9a24a); color: #1b1b1b; }
.ys-signin-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---- Background noise reduction chip (1 Oct 2026) ---- */
.ys-noise-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font-size: .85em; font-weight: 600; line-height: 1.4; }
.ys-noise-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ys-muted); }
.ys-noise-chip[data-level="strong"]::before { background: #1f8a4c; }
.ys-noise-chip[data-level="off"]::before { background: transparent; border: 1px solid var(--ys-muted); }

/* ---- Quick Capture: "Record a memory" + "My memories" (1 Oct 2026) ---- */
.ys-quick-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; gap: 8px; align-items: center; justify-content: center; width: max-content; max-width: calc(100vw - 16px); flex-wrap: wrap; }
body:has(dialog[open]) .ys-quick-bar, body:has(#ys-account-menu:not([hidden])) .ys-quick-bar, html:not([data-ys-signed-in="1"]) .ys-quick-bar { display: none; }
.ys-quick-record { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; border: 2px solid #fff;
  background: #a1141c; color: #fff; font: inherit; font-size: calc(17px * var(--ys-scale, 1)); font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); cursor: pointer; }
.ys-quick-record:hover { background: #7f0f16; }
.ys-quick-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.ys-quick-library { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 2px solid #fff;
  background: #102b26; color: #fff; font: inherit; font-size: calc(15px * var(--ys-scale, 1)); font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); cursor: pointer; }
.ys-quick-library .ys-ico { width: 20px; height: 20px; }
.ys-quick-count { background: #f5c15a; color: #20242c; border-radius: 999px; padding: 1px 9px; font-size: .9em; font-weight: 700; white-space: nowrap; }
.ys-quick-count[hidden] { display: none; }
dialog.ys-quick, dialog.ys-memories {
  width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); box-sizing: border-box; padding: 16px 18px 20px; border-radius: 18px; margin: auto;
  background: var(--ys-paper); color: var(--ys-ink); border: 2px solid var(--ys-line); font-size: calc(16px * var(--ys-scale, 1)); line-height: 1.5; overflow: auto;
}
dialog.ys-quick::backdrop, dialog.ys-memories::backdrop { background: rgba(8, 20, 16, .78); }
dialog.ys-quick .ys-view, dialog.ys-memories .ys-view { padding: 0 !important; }
.ys-quick h2, .ys-lib-head h2 { margin: 2px 0 10px; font-size: 1.35em; }
.ys-quick-lead { margin: 0 0 10px; }
.ys-quick-time { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: 4px; }
.ys-view button.ys-quick-big { display: flex; width: 100%; justify-content: center; gap: 12px; min-height: 76px; margin: 14px 0 8px; border-radius: 22px;
  font-size: 1.3em; font-weight: 800; background: #a1141c; border-color: #a1141c; color: #fff; }
.ys-view button.ys-quick-big .ys-ico { width: 28px; height: 28px; }
.ys-view button.ys-quick-stop { background: var(--ys-btn); border-color: var(--ys-btn); }
.ys-quick-upload { font-weight: 600; margin: 8px 0; }
.ys-quick-upload[data-state="waiting"] { color: var(--ys-warn); }
.ys-quick-upload[data-state="uploaded"] { color: var(--ys-ok); }
.ys-lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ys-lib-head .ys-close { min-width: 44px; min-height: 44px; border-radius: 50%; border: 2px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ys-lib-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.ys-view button.ys-lib-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border-radius: 14px; padding: 10px 14px; }
.ys-lib-name { font-weight: 700; overflow-wrap: anywhere; }
.ys-lib-meta { grid-column: 1; color: var(--ys-muted); font-size: .9em; font-weight: 500; }
.ys-lib-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85em; font-weight: 700;
  background: var(--ys-note-bg); color: var(--ys-ink); border: 1px solid var(--ys-line); white-space: nowrap; }
p.ys-lib-badge { margin: 4px 0 8px; }
.ys-lib-badge[data-level="unreviewed"] { background: #fff1cc; color: #5a2d00; }
.ys-lib-badge[data-level="waiting"] { background: #fde2e1; color: #7a0000; }
.ys-lib-badge[data-level="filed"] { background: #e2f0d9; color: #14532d; }
.ys-lib-file { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border: 1px dashed var(--ys-line); border-radius: 12px; }
.ys-lib-file[hidden], .ys-lib-confirm[hidden] { display: none; }
.ys-lib-file select, .ys-memories input[type="text"] { min-height: 44px; font: inherit; width: 100%; box-sizing: border-box; }
.ys-lib-confirm { margin: 8px 0; padding: 10px 12px; border: 2px solid var(--ys-error); border-radius: 12px; background: #fff4f2; }
.ys-view button.ys-danger { background: var(--ys-error); border-color: var(--ys-error); color: #fff; }
.ys-memories textarea { width: 100%; box-sizing: border-box; font: inherit; }
.ys-install ol { margin: 4px 0 8px; padding-left: 1.3em; }
@media (max-width: 420px) { .ys-quick-record { padding: 0 16px; } .ys-quick-bar { bottom: calc(70px + env(safe-area-inset-bottom)); } }

/* ---- One-thumb capture + handedness (Dave, 1 Oct 2026) ----
   <html data-hand="right|left">: the big Start/Stop, the floating actions and the field microphones sit at the
   bottom corner / trailing edge the thumb reaches. Logical properties: inline-end for the right hand,
   inline-start for the left. */
.ys-quick-bar { left: auto; transform: none; inset-inline-end: 14px; inset-inline-start: auto; flex-direction: column; align-items: flex-end; bottom: calc(18px + env(safe-area-inset-bottom)); }
html[data-hand="left"] .ys-quick-bar { inset-inline-end: auto; inset-inline-start: 14px; align-items: flex-start; }
@media (max-width: 420px) { .ys-quick-bar { bottom: calc(14px + env(safe-area-inset-bottom)); } }
.ys-capture { position: relative; padding-bottom: 150px; }
.ys-capture-dock { position: fixed; z-index: 80; bottom: calc(22px + env(safe-area-inset-bottom)); inset-inline-end: 22px; }
html[data-hand="left"] .ys-capture-dock { inset-inline-end: auto; inset-inline-start: 22px; }
.ys-view button.ys-capture-btn, button.ys-capture-btn {
  width: 124px; height: 124px; border-radius: 50%; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #a1141c; border: 4px solid #fff; color: #fff; font-size: calc(19px * var(--ys-scale, 1)); font-weight: 800; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); cursor: pointer; }
.ys-view button.ys-capture-btn:hover { background: #7f0f16; }
.ys-view button.ys-capture-btn.ys-capture-stop { background: #1b3329; }
.ys-view button.ys-capture-btn[hidden] { display: none; }
.ys-capture-dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.ys-capture-square { width: 30px; height: 30px; border-radius: 6px; background: #fff; }
.ys-capture-label { line-height: 1; }
.ys-capture-status { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 1.6em; }
.ys-capture-status .ys-rec-live[hidden] { display: none; }
.ys-capture-meter[hidden] { display: none; }
.ys-toast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0; padding: 8px 12px; border-radius: 12px; background: #e2f0d9; color: #14532d; border: 1px solid #14532d; font-weight: 600; }
.ys-toast[hidden] { display: none; }
.ys-toast .ys-ico { width: 18px; height: 18px; vertical-align: -3px; }
.ys-view .ys-toast button.ys-link-button { color: #14532d; font-weight: 700; }
.ys-just-h { font-size: 1em; margin: 12px 0 4px; }
.ys-just-h[hidden] { display: none; }
.ys-just { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ys-just li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--ys-line); border-radius: 12px; background: var(--ys-card); }
.ys-just-name { font-weight: 700; }
.ys-just-words { grid-column: 1; color: var(--ys-muted); font-size: .92em; }
.ys-just-state { grid-column: 1; font-size: .9em; color: var(--ys-muted); }
.ys-just li[data-state="waiting"] .ys-just-state { color: var(--ys-warn); font-weight: 600; }
.ys-just li[data-state="saved"] .ys-just-state { color: var(--ys-ok); font-weight: 600; }
.ys-just-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; gap: 6px; align-items: center; }
details.ys-howto, details.ys-setup, details.ys-type, details.ys-saved { margin: 8px 0; border: 1px solid var(--ys-line); border-radius: 12px; padding: 0 12px; background: var(--ys-card); }
details.ys-howto > summary, details.ys-setup > summary, details.ys-type > summary, details.ys-saved > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
details[open].ys-howto, details[open].ys-setup, details[open].ys-type, details[open].ys-saved { padding-bottom: 10px; }
.ys-lib-ai { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--ys-line); border-radius: 12px; }
.ys-lib-ai h4, .ys-lib-related h4 { margin: 0 0 4px; }
.ys-ai-row { margin: 4px 0; }
.ys-lib-related ul { margin: 4px 0; padding-left: 1.2em; }
.ys-memories select, .ys-memories input[type="datetime-local"] { min-height: 44px; font: inherit; width: 100%; box-sizing: border-box; }

/* The microphone inside a text field (bmsg-voice-note), at the trailing edge (leading for the left hand). */
.bvn-field { position: relative; }
.bvn-field > input, .bvn-field > textarea { width: 100%; box-sizing: border-box; padding-inline-end: 54px; }
.bvn-field-line > input { min-height: 50px; }
.bvn-field > bmsg-voice-note { display: block; }
.bvn-field > bmsg-voice-note > .bvn-mic { position: absolute; z-index: 2; inset-inline-end: 3px; top: calc(var(--bvn-h, 50px) / 2 - 22px);
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bvn-field-box > bmsg-voice-note > .bvn-mic { top: calc(var(--bvn-h, 120px) - 50px); inset-inline-end: 20px; }
html[data-hand="left"] .bvn-field > input, html[data-hand="left"] .bvn-field > textarea { padding-inline-end: 12px; padding-inline-start: 54px; }
html[data-hand="left"] .bvn-field > bmsg-voice-note > .bvn-mic { inset-inline-end: auto; inset-inline-start: 3px; }
html[data-hand="left"] .bvn-field-box > bmsg-voice-note > .bvn-mic { inset-inline-start: 6px; }
/* The carried UI paints every dialog button green (with !important): the record button stays red. */
html body button.ys-capture-btn { background: #a1141c !important; color: #fff !important; border-color: #fff !important; }
html body button.ys-capture-btn.ys-capture-stop { background: #1b3329 !important; }
html body button.ys-quick-record { background: #a1141c !important; color: #fff !important; }
html body button.ys-quick-library { background: #102b26 !important; color: #fff !important; }
.ys-capture { padding-bottom: 8px; }
.ys-view:has(.ys-capture-dock) { padding-bottom: 170px !important; }
/* (beats the palette's `html body[data-palette] :is(button, …)` rule) */
html body[data-palette] #ys-quick-bar button.ys-quick-record, html body[data-palette] .ys-capture-dock button.ys-capture-btn { background-color: #a1141c !important; color: #fff !important; }
html body[data-palette] .ys-capture-dock button.ys-capture-btn.ys-capture-stop { background-color: #1b3329 !important; }
html body[data-palette] #ys-quick-bar button.ys-quick-library { background-color: #102b26 !important; color: #fff !important; }
html body[data-palette] .ys-just button.ys-secondary, html body[data-palette] .ys-lib-list button.ys-lib-item { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
@media (max-width: 600px) { dialog.ys-quick { height: calc(100dvh - 16px); } }

/* ---- Review deck, chips, bottom sheet, chapter tray, drag and drop (docs/REVIEW-FLOW.md) ---- */
dialog.ys-review { width: min(560px, calc(100vw - 16px)); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); box-sizing: border-box; padding: 14px 16px; border-radius: 18px; margin: auto;
  background: var(--ys-paper); color: var(--ys-ink); border: 2px solid var(--ys-line); font-size: calc(16px * var(--ys-scale, 1)); line-height: 1.5; overflow: hidden; display: flex; flex-direction: column; }
dialog.ys-review:not([open]) { display: none; }
dialog.ys-review::backdrop { background: rgba(8, 20, 16, .78); }
.ys-deck-stage { position: relative; flex: 1; min-height: 0; overflow: auto; }
.ys-deck-card { position: relative; box-sizing: border-box; min-height: 100%; padding: 14px 14px 150px; border: 2px solid var(--ys-line); border-radius: 18px; background: var(--ys-card);
  touch-action: pan-y; user-select: none; transition: transform .15s ease-out; }
.ys-deck-card:focus-visible { outline: 3px solid var(--ys-focus); outline-offset: 2px; }
.ys-deck-card[data-swipe="accept"] { box-shadow: inset 0 0 0 4px #1f8a4c; }
.ys-deck-card[data-swipe="later"] { box-shadow: inset 0 0 0 4px #b26a00; }
.ys-deck-ghost { position: absolute; inset: 0; pointer-events: none; transition: transform .3s ease-in, opacity .3s ease-in; }
.ys-card-count { margin: 0; color: var(--ys-muted); font-size: .9em; }
.ys-card-when { margin: 2px 0 6px; font-size: 1.15em; }
.ys-card-len { font-weight: 500; color: var(--ys-muted); }
.ys-card-words { margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ys-card-open .ys-card-words { display: block; -webkit-line-clamp: unset; }
.ys-deck-legend { margin: 4px 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--ys-note-bg); font-weight: 600; }
.ys-card-edit { display: grid; gap: 6px; margin: 6px 0; }
.ys-card-edit[hidden] { display: none; }
.ys-card-edit input, .ys-card-edit textarea { width: 100%; box-sizing: border-box; font: inherit; min-height: 44px; }
.ys-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ys-chips[data-loading] { opacity: .7; }
.ys-view button.ys-chip, button.ys-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 52px; max-width: 100%; padding: 6px 14px; border-radius: 16px;
  border: 2px solid var(--ys-btn); background: var(--ys-card); color: var(--ys-ink); font: inherit; cursor: pointer; text-align: start; touch-action: manipulation; }
html body[data-palette] button.ys-chip { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
.ys-chip-k { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ys-muted); }
.ys-chip-v { font-weight: 700; overflow-wrap: anywhere; }
.ys-deck-dock { position: absolute; bottom: 12px; inset-inline: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; justify-content: flex-end; }
.ys-deck-dock[data-accept="left"] { flex-direction: row-reverse; }
.ys-view button.ys-deck-btn, button.ys-deck-btn { min-height: 52px; min-width: 52px; padding: 8px 16px; border-radius: 26px; font: inherit; font-weight: 700; }
button.ys-deck-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; min-height: 64px; border-radius: 32px; padding: 0 18px; font: inherit; font-weight: 800; }
html body[data-palette] button.ys-deck-play { background-color: var(--ys-btn) !important; color: #fff !important; }
html body[data-palette] button#ys-deck-accept { background-color: #1f6b3d !important; color: #fff !important; }
.ys-deck-play .ys-ico { width: 24px; height: 24px; }
.ys-deck-done { display: grid; place-items: center; gap: 12px; min-height: 60%; text-align: center; font-size: 1.1em; }
.ys-deck-toast { margin: 8px 0 0; }
dialog.ys-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(560px, 100vw); max-height: 70dvh; box-sizing: border-box; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border: 0; border-radius: 18px 18px 0 0; background: var(--ys-paper); color: var(--ys-ink); overflow: auto; font-size: calc(16px * var(--ys-scale, 1)); }
dialog.ys-sheet::backdrop { background: rgba(8, 20, 16, .6); }
/* No blur behind our dialogs: the carried style.css gives every dialog::backdrop a full-screen
   backdrop-filter: blur(5px), and our dialogs stack (My memories → a story → "When was this?"). WebKit
   (Safari) re-blurs every stacked backdrop on each repaint: one tap in the date picker cost ~0.8 s of
   paint (52 ms without), so taps stalled and the WebKit e2e run timed out. The dark tint stays. */
dialog:is(.ys-quick, .ys-memories, .ys-review, .ys-sheet)::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ys-sheet h3 { margin: 0 0 8px; }
.ys-sheet-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
button.ys-sheet-opt { width: 100%; min-height: 48px; text-align: start; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font: inherit; font-weight: 600; }
html body[data-palette] button.ys-sheet-opt { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
button.ys-sheet-opt[aria-pressed="true"] { border-color: var(--ys-btn); box-shadow: inset 0 0 0 2px var(--ys-btn); }
.ys-sheet-new { display: grid; gap: 6px; margin: 8px 0; }
.ys-sheet-new input { min-height: 48px; font: inherit; width: 100%; box-sizing: border-box; }
.ys-tray { position: fixed; z-index: 90; bottom: calc(10px + env(safe-area-inset-bottom)); inset-inline-end: 10px; max-width: calc(100vw - 20px); display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  padding: 8px; border-radius: 16px; background: rgba(16, 43, 38, .94); box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
html[data-hand="left"] .ys-tray { inset-inline-end: auto; inset-inline-start: 10px; justify-content: flex-start; }
.ys-tray-live { outline: 3px dashed #f5c15a; }
button.ys-tray-target { min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 2px solid #fff; background: #fffdf7; color: #1b3329; font: inherit; font-weight: 700; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body[data-palette] button.ys-tray-target { background-color: #fffdf7 !important; color: #1b3329 !important; }
button.ys-tray-target.ys-drop-over { outline: 4px solid #f5c15a; transform: scale(1.06); }
.ys-tray-empty { color: #fff; font-size: .9em; align-self: center; }
.ys-drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; padding: 8px 12px; border-radius: 12px; background: #1b3329; color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); max-width: 70vw; }
.ys-lib-list li.ys-dragging { opacity: .5; }
.ys-lib-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }
.ys-lib-list li[hidden] { display: none; }
.ys-lib-list li[data-memory] { touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.ys-view button.ys-review-open { width: 100%; justify-content: center; min-height: 56px; margin: 4px 0 8px; font-size: 1.05em; }
dialog.ys-memories .ys-lib-view { padding-bottom: 90px !important; }
.ys-order { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.ys-order-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--ys-line); border-radius: 12px; background: var(--ys-card); }
.ys-order-item.ys-dragging { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.ys-drag-handle { cursor: grab; font-size: 1.4em; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; touch-action: none; }
.ys-order-btns { display: flex; gap: 4px; }
.ys-view .ys-order-btns button { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ys-deck-card, .ys-deck-ghost, button.ys-tray-target { transition: none !important; } }
html[data-ys-motion="reduce"] .ys-deck-card, html[data-ys-motion="reduce"] .ys-deck-ghost { transition: none !important; }
dialog.ys-review .ys-view { padding: 0 !important; }
.ys-lib-badge { color: var(--ys-ink) !important; }
.ys-lib-badge[data-level="unreviewed"] { color: #5a2d00 !important; }
.ys-lib-badge[data-level="waiting"] { color: #7a0000 !important; }
.ys-lib-badge[data-level="filed"] { color: #14532d !important; }
.ys-lib-name, .ys-lib-meta { color: inherit; }

html body[data-palette] .ys-lib-list button.ys-lib-item, html body[data-palette] .ys-lib-list button.ys-lib-item:is(:hover, :focus-visible) { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
html body[data-palette] .ys-lib-list button.ys-lib-item .ys-lib-badge[data-level] { color: var(--ys-ink) !important; }
html body[data-palette] .ys-lib-list button.ys-lib-item .ys-lib-badge[data-level="unreviewed"] { color: #5a2d00 !important; }
html body[data-palette] .ys-lib-list button.ys-lib-item .ys-lib-badge[data-level="waiting"] { color: #7a0000 !important; }
html body[data-palette] .ys-lib-list button.ys-lib-item .ys-lib-badge[data-level="filed"] { color: #14532d !important; }
html body[data-palette] .ys-lib-list button.ys-lib-item .ys-lib-meta { color: var(--ys-muted) !important; }

/* The library's Undo toast sits above the chapter tray, never under it. */
#ys-lib-toast { position: fixed; z-index: 95; bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline: 12px; margin: 0 auto; max-width: 536px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }

html body[data-palette] .ys-deck-card button.ys-link-button, html body[data-palette] .ys-lib-list button.ys-link-button { background-color: transparent !important; color: var(--ys-ink) !important; border: 0 !important; min-height: 44px; }
.ys-deck-dock { flex-wrap: nowrap; gap: 6px; }
.ys-deck-dock > button { flex: 0 1 auto; }
button.ys-deck-play { min-width: 84px; padding: 0 14px; }
.ys-view button.ys-deck-btn, button.ys-deck-btn { padding: 8px 12px; }

/* ---- My memories: the one organising home (Dave, 2 Oct 2026) ------------------------------------------
   Chapters, Categories and Unfiled memories as sortable lists; the drag handle and the ↑ ↓ … buttons sit on
   the thumb side (html[data-hand]); one type scale (the item name 1em/700, its count .9em/500, as the
   memory items); icons centred in round buttons; no underlined button-links in the sheet; "Record a memory"
   and "Review my memories (N)" in the thumb zone (a sticky dock). Tokens only, so every palette, high
   contrast (light and dark) and the text-size setting apply. */
.ys-org-sec { margin: 14px 0 6px; }
.ys-org-sec > h3 { margin: 0 0 2px; font-size: 1.1em; }
.ys-org-sec > .ys-hint { margin: 0 0 6px; }
.ys-org-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.ys-org-list > li[hidden] { display: none; }
.ys-org-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ys-org-row { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 2px 4px; border: 1px solid var(--ys-line); border-radius: 14px; background: var(--ys-paper); color: var(--ys-ink); }
html[data-hand="left"] .ys-org-row { flex-direction: row-reverse; }
.ys-org-row > .ys-org-name, .ys-org-row > .ys-lib-item { flex: 1 1 auto; min-width: 0; }
.ys-org-name { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 6px 8px; min-height: 48px; text-align: start; font: inherit; color: var(--ys-ink); background: transparent; border: 0; border-radius: 12px; }
button.ys-org-name { cursor: pointer; }
.ys-org-title { font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.ys-org-count { font-size: .9em; font-weight: 500; color: var(--ys-muted); line-height: 1.3; }
.ys-org-tools { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
html[data-hand="left"] .ys-org-tools { flex-direction: row-reverse; }
.ys-view button.ys-org-btn, button.ys-org-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ys-ink); }
button.ys-org-btn .ys-ico { width: 22px; height: 22px; }
.ys-org-tools .ys-drag-handle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; color: var(--ys-ink); font-size: 1em; }
.ys-org-tools .ys-drag-handle .ys-ico { width: 22px; height: 22px; }
.ys-org-memories { margin: 6px 0 4px; padding-inline-start: 14px; }
html[data-hand="left"] .ys-org-memories { padding-inline-start: 0; padding-inline-end: 14px; }
.ys-org-mem .ys-org-row { min-height: 48px; background: var(--ys-paper); }
.ys-view .ys-org-mem button.ys-lib-item { border: 0; background: transparent; padding: 6px 8px; border-radius: 12px; }
.ys-org-none { padding: 6px 4px; }
.ys-org-item.ys-dragging > .ys-org-row { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); outline: 3px solid var(--ys-btn); }
.ys-sorting .ys-org-item:not(.ys-dragging) > .ys-org-row { transition: transform .12s ease-out; }
.ys-no-motion .ys-org-item > .ys-org-row, .ys-no-motion .ys-org-item { transition: none !important; }
.ys-filing li[data-drop-chapter] > .ys-org-row { outline: 2px dashed var(--ys-line); }
li[data-drop-chapter].ys-drop-over > .ys-org-row { outline: 4px solid #f5c15a; background: var(--ys-note-bg); }
.ys-org-add { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; }
html[data-hand="left"] .ys-org-add { flex-direction: row-reverse; }
.ys-org-add > .bvn-field, .ys-org-add > input { flex: 1 1 auto; min-width: 0; }
.ys-org-rename { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--ys-btn); border-radius: 14px; background: var(--ys-paper); }
.ys-memories .ys-org-add input[type="text"], .ys-memories .ys-org-rename input[type="text"] { min-height: 48px; }
.ys-lib-empty { padding: 8px 4px; font-weight: 600; }
/* Unfiled memories: "Move…" is a real (outlined) button, never an underlined link. */
.ys-view button.ys-lib-move { min-height: 44px; padding: 6px 14px; border-radius: 22px; border: 2px solid var(--ys-btn); background: var(--ys-paper); color: var(--ys-ink); text-decoration: none; }
dialog.ys-memories button.ys-link-button, dialog.ys-review button.ys-link-button { text-decoration: none; border: 2px solid var(--ys-line); border-radius: 22px; padding: 6px 14px; min-height: 44px; background: var(--ys-paper); color: var(--ys-ink); }
/* The thumb-zone dock: Record + Review my memories (N), Review nearest the thumb. */
/* The dialog is a column: header, the scrolling list, then the dock (never over a row). */
dialog.ys-memories[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.ys-memories > .ys-lib-head { flex: 0 0 auto; }
dialog.ys-memories > .ys-lib-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ys-lib-dock { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
  margin: 8px -18px -20px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ys-paper); border-top: 1px solid var(--ys-line); }
.ys-lib-dock[hidden] { display: none; }
dialog.ys-memories .ys-lib-dock.ys-view { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
html[data-hand="left"] .ys-lib-dock { flex-direction: row-reverse; justify-content: flex-end; }
dialog.ys-memories .ys-lib-dock.ys-view button.ys-review-open { width: auto; flex: 0 1 auto; margin: 0; font-size: 1em; min-height: 52px; padding: 10px 14px; border-radius: 26px; }
dialog.ys-memories .ys-lib-dock.ys-view button.ys-lib-record { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #a1141c; color: #fff; font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
dialog.ys-memories .ys-lib-dock.ys-view button.ys-lib-record.ys-lib-record-wide { width: auto; padding: 0 18px; border-radius: 26px; }
button.ys-lib-record .ys-ico { width: 24px; height: 24px; }
dialog.ys-memories .ys-lib-view { padding-bottom: 0 !important; }
#ys-lib-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Palette guards: every button in the organiser keeps its own colours under every palette. */
html body[data-palette] dialog.ys-memories button.ys-org-name, html body[data-palette] dialog.ys-memories button.ys-org-name:is(:hover, :focus-visible, :active) { background-color: transparent !important; color: var(--ys-ink) !important; border: 0 !important; }
html body[data-palette] dialog.ys-memories button.ys-org-btn, html body[data-palette] dialog.ys-memories button.ys-org-btn:is(:hover, :focus-visible, :active) { background-color: transparent !important; color: var(--ys-ink) !important; border: 0 !important; }
html body[data-palette] dialog.ys-memories button.ys-org-btn:is(:hover, :focus-visible) { background-color: var(--ys-note-bg) !important; }
html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item, html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item:is(:hover, :focus-visible) { background-color: transparent !important; color: var(--ys-ink) !important; }
html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item .ys-lib-meta { color: var(--ys-muted) !important; }
html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item .ys-lib-badge[data-level] { color: var(--ys-ink) !important; }
html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item .ys-lib-badge[data-level="unreviewed"] { color: #5a2d00 !important; }
html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item .ys-lib-badge[data-level="filed"] { color: #14532d !important; }
html body[data-palette] dialog.ys-memories button.ys-lib-move, html body[data-palette] dialog.ys-memories button.ys-link-button, html body[data-palette] dialog.ys-review button.ys-link-button { background-color: var(--ys-paper) !important; color: var(--ys-ink) !important; }
html body[data-palette] dialog.ys-memories button.ys-lib-record, html body[data-palette] dialog.ys-memories button.ys-lib-record:is(:hover, :focus-visible) { background-color: #a1141c !important; color: #fff !important; }
html body[data-palette] dialog.ys-memories .ys-lib-dock button.ys-review-open:not(:disabled) { background-color: var(--ys-btn) !important; color: var(--ys-on-btn) !important; }
@media (prefers-reduced-motion: reduce) { .ys-org-item, .ys-org-row { transition: none !important; } }
/* Narrow screens and large text: the name keeps at least 8em; the tools wrap under it (still on the thumb side). */
.ys-org-list > li { min-width: 0; }
.ys-org-row { flex-wrap: wrap; }
.ys-org-row > .ys-org-name { flex: 1 1 8em; }
.ys-org-row > .ys-lib-item { flex: 1 1 10em; }
.ys-org-tools { margin-left: auto; }
html[data-hand="left"] .ys-org-tools { margin-left: 0; margin-right: auto; }
.ys-org-count, .ys-org-title { overflow-wrap: anywhere; }
/* High contrast (light or dark): --ys-card is not a palette colour, so every surface in the sheet uses the
   palette's paper and ink (the unfiled items too: white-on-white in hc-dark before). */
html body[data-palette] dialog.ys-memories .ys-lib-list button.ys-lib-item, html body[data-palette] dialog.ys-memories .ys-lib-list button.ys-lib-item:is(:hover, :focus-visible) { background-color: var(--ys-paper) !important; color: var(--ys-ink) !important; border-color: var(--ys-ink) !important; }
html body[data-palette] dialog.ys-memories .ys-org-row { border-color: var(--ys-ink); }
html body[data-palette] dialog.ys-memories button.ys-org-name .ys-org-count, html body[data-palette] dialog.ys-memories .ys-org-count { color: var(--ys-ink) !important; opacity: .85; }
.ys-view .ys-org-row button.ys-org-name { display: flex; align-items: flex-start; justify-content: center; text-align: start; border: 0; border-radius: 12px; padding: 6px 8px; background: transparent; }
/* One line per row on a phone when it fits: the handle is a drag target (32 px wide, full height), the
   buttons stay 44 px; a memory's state badge sits under its date so the name keeps its width. */
.ys-org-tools { gap: 0; }
.ys-org-tools .ys-drag-handle { width: 32px; }
.ys-org-row > .ys-org-name { flex-basis: 6em; }
dialog.ys-memories .ys-view button.ys-lib-item { grid-template-columns: minmax(0, 1fr); }
dialog.ys-memories .ys-lib-item .ys-lib-badge { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 2px; }
dialog.ys-memories .ys-lib-list > li { grid-template-columns: minmax(0, 1fr) auto; }
html body[data-palette] dialog.ys-memories .ys-lib-list button.ys-lib-item .ys-lib-meta, html body[data-palette] dialog.ys-memories .ys-org-mem button.ys-lib-item .ys-lib-meta { color: var(--ys-ink) !important; }

/* ---- Step 5 "Tell the family": the family chat (2 Oct 2026, src/family.ts) ----------------------------
   Thumb-first: the big buttons fill the row on a phone and sit at the holding thumb's side (html[data-hand]);
   the code is large and spaced so it can be read aloud; one type scale as the rest of the workspace. */
.ys-fam { border: 1px solid var(--ys-line); border-radius: 12px; padding: 10px 14px; margin: 10px 0 16px; }
.ys-fam h3 { margin: 0 0 6px; }
.ys-fam h4 { margin: 14px 0 4px; font-size: 1em; }
.ys-fam .ys-big { min-height: 52px; min-width: 52px; font-size: 1.05em; }
.ys-fam-choice > div { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ys-fam-have { margin: 10px 0; }
.ys-fam-have > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.ys-fam-code { font: 700 1.6em/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; margin: 6px 0; }
#ys-fam-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ys-fam-qr { display: block; background: #fff; border-radius: 8px; padding: 6px; margin: 8px 0; }
.ys-fam-list { list-style: none; padding: 0; margin: 4px 0 10px; }
.ys-fam-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ys-line); min-height: 44px; }
.ys-thumb { justify-content: flex-end; }
html[data-hand="left"] .ys-thumb { justify-content: flex-start; }
html[data-hand="left"] .ys-fam-list li { flex-direction: row-reverse; }
@media (max-width: 560px) {
  .ys-fam .ys-thumb > button, .ys-fam-choice button { flex: 1 1 100%; }
}

/* ---- Stories by date, lifetime themes, the timeline (Dave, 2 Oct 2026) ---------------------------------
   The date picker and the story sheet are bottom sheets (thumb zone) with 48 px targets; the timeline is one
   column, earliest first, decade markers, chapter bands as coloured dots (six tokens), undated stories in a
   "When was this?" tray at the top. Tokens only, so every palette and high contrast apply. */
.ys-org-story > .ys-org-row { background: var(--ys-paper); }
.ys-org-when[data-known="false"] { font-style: italic; }
.ys-org-story-mems { list-style: none; margin: 4px 0 2px; padding-inline-start: 18px; display: grid; gap: 4px; }
.ys-org-sortbar { list-style: none; display: flex; justify-content: flex-end; }
html[data-hand="left"] .ys-org-sortbar { justify-content: flex-start; }
.ys-view button.ys-org-timeline { min-height: 48px; border-radius: 24px; margin: 4px 0; }
.ys-date-body { display: grid; gap: 10px; }
.ys-date-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.ys-date-grid.ys-date-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ys-date-grid.ys-date-days { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
dialog.ys-sheet button.ys-date-opt, dialog.ys-sheet button.ys-date-mode { min-height: 48px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font: inherit; font-weight: 700; touch-action: manipulation; }
dialog.ys-sheet button.ys-date-opt[aria-pressed="true"], dialog.ys-sheet button.ys-date-mode[aria-pressed="true"] { border-color: var(--ys-btn); box-shadow: inset 0 0 0 2px var(--ys-btn); }
.ys-date-modes { display: flex; gap: 6px; }
.ys-date-modes > button { flex: 1 1 0; }
dialog.ys-sheet .ys-date-wide { width: 100%; min-height: 48px; }
.ys-date-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
html[data-hand="left"] .ys-date-nav { flex-direction: row-reverse; justify-content: flex-end; }
.ys-date-nav > button { min-height: 48px; }
html body[data-palette] dialog.ys-sheet button:is(.ys-date-opt, .ys-date-mode) { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
.ys-story-sheet .ys-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.ys-story-label { font-weight: 700; min-width: 3.5em; }
.ys-story-sheet button.ys-story-date { min-height: 48px; flex: 1 1 auto; }
.ys-story-sheet input[type="text"] { min-height: 48px; font: inherit; flex: 1 1 10em; min-width: 0; box-sizing: border-box; }
.ys-story-themes { border: 1px solid var(--ys-line); border-radius: 12px; padding: 6px 10px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ys-story-themes .ys-theme-opt, .ys-theme-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0; font-weight: 600; }
.ys-theme-opt input { width: 22px; height: 22px; }
.ys-when-tray { border: 2px dashed var(--ys-line); border-radius: 14px; padding: 6px 10px 10px; margin: 6px 0 10px; }
.ys-when-tray h4 { margin: 4px 0 6px; }
.ys-when-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ys-view button.ys-when-chip { min-height: 44px; border-radius: 22px; padding: 6px 14px; border: 2px solid var(--ys-btn); background: var(--ys-paper); color: var(--ys-ink); font: inherit; font-weight: 700; }
.ys-tl-bands { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .9em; }
.ys-tl-band { display: inline-flex; align-items: center; gap: 6px; }
.ys-tl-swatch, .ys-tl-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--ys-muted); border: 2px solid var(--ys-paper); box-shadow: 0 0 0 1px var(--ys-ink); flex: 0 0 auto; }
[data-band="0"] > .ys-tl-swatch, [data-band="0"] .ys-tl-dot { background: #1f6b3d; }
[data-band="1"] > .ys-tl-swatch, [data-band="1"] .ys-tl-dot { background: #a1141c; }
[data-band="2"] > .ys-tl-swatch, [data-band="2"] .ys-tl-dot { background: #1d4ed8; }
[data-band="3"] > .ys-tl-swatch, [data-band="3"] .ys-tl-dot { background: #b26a00; }
[data-band="4"] > .ys-tl-swatch, [data-band="4"] .ys-tl-dot { background: #6b21a8; }
[data-band="5"] > .ys-tl-swatch, [data-band="5"] .ys-tl-dot { background: #0f766e; }
.ys-tl { list-style: none; margin: 0; padding: 0 0 0 10px; border-inline-start: 3px solid var(--ys-line); display: grid; gap: 4px; }
html[data-hand="left"] .ys-tl { padding: 0 10px 0 0; border-inline-start: 0; border-inline-end: 3px solid var(--ys-line); }
.ys-tl-decade { font-weight: 800; color: var(--ys-muted); margin: 8px 0 2px; }
.ys-view button.ys-tl-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot when" "dot title" "dot chapter"; align-items: center; column-gap: 10px; width: 100%; min-height: 52px;
  text-align: start; padding: 6px 10px; border: 1px solid var(--ys-line); border-radius: 12px; background: var(--ys-paper); color: var(--ys-ink); font: inherit; }
.ys-tl-item .ys-tl-dot { grid-area: dot; }
.ys-tl-when { grid-area: when; font-size: .9em; font-weight: 600; color: var(--ys-muted); }
.ys-tl-title { grid-area: title; font-weight: 700; overflow-wrap: anywhere; }
.ys-tl-chapter { grid-area: chapter; font-size: .9em; color: var(--ys-muted); }
html body[data-palette] dialog.ys-memories button:is(.ys-tl-item, .ys-when-chip) { background-color: var(--ys-paper) !important; color: var(--ys-ink) !important; }
html body[data-palette] dialog.ys-memories :is(.ys-tl-when, .ys-tl-chapter, .ys-tl-decade) { color: var(--ys-ink) !important; opacity: .85; }

/* Long lists (1,000 memories): rows off screen are not laid out or painted until they scroll near. */
.ys-lib-list > li { content-visibility: auto; contain-intrinsic-size: auto 140px; }
.ys-lib-more { height: 1px; }

/* ---- The calm 3D map: thumb-side controls, the selection card, the list (rail) ----------------------- */
#spatial38 .map-ctl38 { position: absolute; z-index: 23000; bottom: 44px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 6px; }
html[data-hand="left"] #spatial38 .map-ctl38 { inset-inline-end: auto; inset-inline-start: 8px; }
#spatial38 button.map-ctl-btn38 { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ys-accent, #e5d3a4); background: var(--ys-canvas, #102b26); color: var(--ys-on-canvas, #f7f1e4); touch-action: manipulation; }
#spatial38 button.map-ctl-btn38 .ys-ico { width: 22px; height: 22px; }
#spatial38 button.map-ctl-btn38[aria-expanded="true"] { background: var(--ys-accent, #e5d3a4); color: var(--ys-canvas, #102b26); }
#spatial38 .map-card38 { position: absolute; z-index: 23000; top: 8px; inset-inline: 8px 64px; margin: 0 auto; max-width: 360px; padding: 8px 12px; border-radius: 14px;
  background: var(--ys-canvas, #102b26); color: var(--ys-on-canvas, #f7f1e4); border: 2px solid var(--ys-accent, #e5d3a4); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); display: grid; gap: 2px; }
html[data-hand="left"] #spatial38 .map-card38 { inset-inline: 64px 8px; }
#spatial38 .map-card38[hidden] { display: none; }
.map-card-title38 { font-size: 1.05em; overflow-wrap: anywhere; }
.map-card-meta38 { opacity: .9; }
.map-card-actions38 { display: flex; gap: 6px; margin-top: 4px; }
#spatial38 .map-card-actions38 button { min-height: 44px; padding: 4px 14px; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ys-accent, #e5d3a4); background: transparent; color: inherit; font: inherit; font-weight: 700; }
#spatial38 .map-card-actions38 .ys-ico { width: 18px; height: 18px; }
#spatial38 .map-rail38 { position: absolute; z-index: 23001; top: 8px; bottom: 44px; inset-inline-end: 64px; width: min(260px, 60%); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px;
  background: var(--ys-canvas, #102b26); color: var(--ys-on-canvas, #f7f1e4); border: 2px solid var(--ys-accent, #e5d3a4); }
html[data-hand="left"] #spatial38 .map-rail38 { inset-inline-end: auto; inset-inline-start: 64px; }
#spatial38 .map-rail38[hidden] { display: none; }
.map-rail38 ul { list-style: none; margin: 0; padding: 4px; display: grid; gap: 4px; }
#spatial38 button.map-rail-item38 { width: 100%; min-height: 48px; display: grid; text-align: start; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; touch-action: pan-y; }
#spatial38 button.map-rail-item38[aria-pressed="true"] { border-color: var(--ys-accent, #e5d3a4); background: color-mix(in srgb, var(--ys-accent, #e5d3a4) 18%, transparent); }
#spatial38 button.map-rail-item38[data-held="true"] { outline: 3px solid var(--ys-accent, #e5d3a4); }
#spatial38[data-steering="true"] { cursor: grabbing; }
html body[data-palette] #spatial38 button:is(.map-ctl-btn38, .map-rail-item38) { background-color: var(--ys-canvas, #102b26) !important; color: var(--ys-on-canvas, #f7f1e4) !important; }
html body[data-palette] #spatial38 button.map-ctl-btn38[aria-expanded="true"] { background-color: var(--ys-accent, #e5d3a4) !important; color: var(--ys-canvas, #102b26) !important; }

/* ---- Signed out, said out loud (2 Oct 2026): a non-blocking banner at the top of whatever is open ---- */
.ys-signedout { position: fixed; z-index: 2147483000; top: calc(8px + env(safe-area-inset-top)); inset-inline: 8px; margin: 0 auto; max-width: 40rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border-radius: 14px;
  background: #fff4d6; color: #3d2a00; border: 2px solid #8a5a00; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); font-size: calc(16px * var(--ys-scale, 1)); line-height: 1.4; }
.ys-signedout[hidden] { display: none; }
.ys-signedout-text { margin: 0; font-weight: 700; flex: 1 1 14rem; }
html body .ys-signedout button.ys-signin-btn { min-height: 48px; background: #8a5a00 !important; color: #fff !important; }
.ys-live[data-state="signed-out"] .ys-live-state { color: var(--ys-warn); font-weight: 700; }
.ys-toast-trim { font-weight: 600; }
.ys-toast-trim::before { content: '· '; }

/* ---- A chapter always, a theme if it fits (file-step.ts): the thumb zone, the side of the holding hand ---- */
.ys-file { position: fixed; z-index: 81; bottom: calc(10px + env(safe-area-inset-bottom)); inset-inline: 10px; margin: 0 auto; max-width: 34rem; max-height: min(70dvh, 560px);
  overflow: auto; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: var(--ys-paper, #fffaf0); color: var(--ys-ink); border: 2px solid var(--ys-btn);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 6px; }
.ys-file[hidden] { display: none; }
.ys-file h3 { margin: 0; font-size: 1.15em; }
.ys-file .ys-hint { margin: 0; }
.ys-file-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--ys-btn); background: var(--ys-card); font-weight: 700;
  touch-action: none; user-select: none; cursor: grab; position: relative; z-index: 2; }
.ys-file-card.ys-dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: .95; }
.ys-file-card-grip { font-size: 1.3em; color: var(--ys-muted); }
.ys-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ys-view button.ys-file-opt, button.ys-file-opt { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: start;
  padding: 8px 14px; border-radius: 14px; border: 2px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font: inherit; font-weight: 700; cursor: pointer; }
html body[data-palette] button.ys-file-opt { background-color: var(--ys-card) !important; color: var(--ys-ink) !important; }
html body[data-palette] button.ys-file-opt[data-suggested="true"] { border-color: var(--ys-btn) !important; box-shadow: inset 0 0 0 2px var(--ys-btn); }
button.ys-file-opt.ys-drop-over, html body[data-palette] button.ys-file-opt.ys-drop-over { outline: 3px solid var(--ys-focus, #1f6b3d); background-color: var(--ys-note-bg) !important; }
.ys-file-badge { font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--ys-btn); color: var(--ys-on-btn, #fff); }
.ys-file-new { display: flex; gap: 8px; align-items: flex-start; }
.ys-file-new > :first-child { flex: 1; min-width: 0; }
.ys-file-new input { width: 100%; min-height: 50px; box-sizing: border-box; font: inherit; }
.ys-file-actions { display: flex; justify-content: flex-end; gap: 8px; }
html[data-hand="left"] .ys-file-actions, html[data-hand="left"] .ys-file-new { flex-direction: row-reverse; }
html[data-hand="left"] .ys-file-opt { flex-direction: row-reverse; }
.ys-view button.ys-file-later, button.ys-file-later { min-height: 52px; min-width: 120px; border-radius: 26px; font-weight: 800; }
.ys-file-done { margin: 0; font-weight: 700; color: var(--ys-ok, #1f6b3d); }
.ys-theme-chips { margin: 4px 0; }
html[data-hand="left"] .ys-theme-chips { flex-direction: row-reverse; justify-content: flex-start; }
button.ys-theme-chip[data-suggested="true"], html body[data-palette] button.ys-theme-chip[data-suggested="true"] { box-shadow: inset 0 0 0 2px var(--ys-btn); }
.ys-capture[data-state="filing"] { padding-bottom: min(70dvh, 560px); }
.ys-view:has(.ys-capture[data-state="filing"]) { padding-bottom: min(72dvh, 580px) !important; }
.ys-card-badge { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: #fff4d6; color: #3d2a00; border: 1px solid #8a5a00; font-weight: 700; font-size: .9em; }
button#ys-chip-category[data-none="true"] .ys-chip-v { color: var(--ys-muted); font-weight: 600; }

/* ---- Settings › Recording / Camera (moved out of Add a memory) ---- */
#ys-account-menu details.ys-setup { padding: 0 8px; }
.ys-camera-preview { display: block; width: 100%; max-height: 220px; margin-top: 8px; border-radius: 12px; background: #000; object-fit: cover; }
.ys-camera-preview[hidden], .ys-camera-photo[hidden] { display: none; }
.ys-camera-photo { display: block; max-width: 100%; max-height: 180px; margin-top: 8px; border-radius: 12px; }
/* Dave's family rulings (2 Oct 2026): the yes/no question, the owner's Accept / Decline, the switches. */
.ys-fam-question { font-weight: 700; font-size: 1.1em; margin: 6px 0; }
.ys-fam-name { font-weight: 700; font-size: 1.15em; margin: 4px 0 8px; }
.ys-fam-decide { display: flex; gap: 6px; }
.ys-fam-decide button { min-height: 44px; }
.ys-fam-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ys-fam-toggle input[type="checkbox"] { width: 24px; height: 24px; }
html[data-hand="left"] .ys-fam-decide { flex-direction: row-reverse; }