/* 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. */
  --ys-fs-xs: 13px;
  --ys-fs-sm: 14px;
  --ys-fs-md: 16px;
  --ys-fs-lg: 17px;
  /* ~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; }
/* 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: calc(var(--ys-fs-lg) * var(--text-scale, 1)) !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: calc(var(--ys-fs-md) * var(--text-scale, 1)) !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: calc(var(--ys-fs-lg) * var(--text-scale, 1)) !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: calc(var(--ys-fs-sm) * var(--text-scale, 1)) !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: calc(var(--ys-fs-md) * var(--text-scale, 1)) !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;
}
.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; }
/* 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; }