/* Your Story look and chrome (8 Oct 2026, spec update WS-2). Loaded LAST (after ys-buttons.css), so it wins over the
   carried v0.38 style.css and the earlier passes without editing them.
     Y2   one selected style for every selected button and chip
     Y22  the header: [menu][logo] ...... [Undo Redo][9-dot launcher][account], the launcher's panel
     Y18  the book switcher and its list
     Y26  signed out: everything greyed out except the sign-in card
     B8   "always be kind" in the Crew Comms style: Caveat 600, gold on dark, deep gold-brown on light */

/* ---- Y2: one selected style -------------------------------------------------------------------------------------- */
/* A selected button or chip: a 3 px ring in the palette accent with a 2 px gap in the surface colour (so the ring
   stands off the button on any fill) and a 1 px edge of the surface's text colour outside it (so the ring is seen on
   any palette), a slightly darker fill (a translucent black laid inside the button, whatever its colour) and, on a
   chip, a tick before the words. On a light surface the accent is mixed toward the surface's own text colour so the
   ring keeps 3:1 against the page (and the edge 4.5:1), in every palette and contrast; on a dark one the accent is the ring. */
:root {
  --ys-sel-ring: var(--ys-accent, #e5d3a4);
  --ys-sel-gap: var(--ys-canvas, #102b26);
  --ys-sel-edge: var(--ys-on-canvas, #f7f1e4);
}
:is(dialog, .sb-page, #sb-book, #sb-answer, .welcome-page39, .ys-sheet, .ys-view, #ys-workspace, .ys-composer) {
  --ys-sel-ring: color-mix(in srgb, var(--ys-accent, #8a5a00) 40%, var(--ys-ink, #173d32));
  --ys-sel-gap: var(--ys-paper, #fffdf7);
  --ys-sel-edge: var(--ys-ink, #173d32);
}
html body :is(button, [role="button"], [role="tab"], [role="option"], [role="menuitemradio"], a.button-like):is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
  outline: 3px solid var(--ys-sel-ring) !important; outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ys-sel-gap), 0 0 0 6px var(--ys-sel-edge), inset 0 0 0 999px rgba(0, 0, 0, .16) !important;
}
html body :is(.ys-pick, .ys-chip, .ys-sheet-opt, .ys-date-opt, .ys-date-mode, .ys-file-seg, .ys-chip-btn):is([aria-pressed="true"], [aria-selected="true"], .is-selected)::before {
  content: "\2713"; margin-inline-end: .4em; font-weight: 800;
}
@media (forced-colors: active) {
  html body :is(button, [role="button"], [role="tab"], [role="option"], a.button-like):is([aria-pressed="true"], [aria-selected="true"], .is-selected) {
    outline: 3px solid Highlight !important; box-shadow: none !important; forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
}

/* ---- Y1: the close button is always a round ✕ ---------------------------------------------------------------------- */
button.ys-close { overflow: hidden; }
button.ys-close > svg { flex: none; }

/* ---- Y22: the welcome header: [menu][logo] ...... [Undo Redo][9-dot launcher][account] ------------------------------- */
#welcome39 header.welcome-header39 { container-type: inline-size; }
/* Three round buttons now share the row (menu 46 + launcher 46 + avatar 56), so the wordmark's room is 190 px smaller. */
#welcome39 header.welcome-header39 > * {
  --ys-wordmark: max(13px, min(clamp(16px, 2.3vw, 29px), calc((100cqw - 190px - 36px) / 12.6)));
}
@media (min-width: 601px) {
  html body #welcome39 header.welcome-header39 { grid-template-columns: auto minmax(0, 1fr) auto auto auto !important; grid-template-rows: auto auto auto; column-gap: 10px !important; }
  html body #welcome39 header.welcome-header39 > #welcome-settings39 { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  html body #welcome39 header.welcome-header39 > .welcome-brand42 { grid-column: 2; grid-row: 1; }
  html body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 2 !important; grid-row: 2 !important; }
  html body #welcome39 header.welcome-header39 > #ys-main-undo-group { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  html body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 4; grid-row: 1 / 3; }
  html body #welcome39 header.welcome-header39 > #ys-account { grid-column: 5; grid-row: 1 / 3; }
  html body #welcome39 header.welcome-header39 > #ys-bookswitch { grid-column: 1 / -1; grid-row: 3; }
  /* the left hand mirrors it */
  html[data-hand="left"] body #welcome39 header.welcome-header39 { grid-template-columns: auto auto auto minmax(0, 1fr) auto !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #welcome-settings39 { grid-column: 5 !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-brand42 { grid-column: 4; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 4 !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-main-undo-group { grid-column: 3; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 2; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-account { grid-column: 1; }
}
@media (max-width: 600px) {
  html body #welcome39 header.welcome-header39 { grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: auto auto auto auto; column-gap: 8px !important; }
  html body #welcome39 header.welcome-header39 > #welcome-settings39 { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  html body #welcome39 header.welcome-header39 > .welcome-brand42 { grid-column: 2; grid-row: 1; }
  html body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 2 !important; grid-row: 2 !important; }
  html body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 3; grid-row: 1 / 3; }
  html body #welcome39 header.welcome-header39 > #ys-account { grid-column: 4; grid-row: 1 / 3; }
  html body #welcome39 header.welcome-header39 > #ys-bookswitch { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  html body #welcome39 header.welcome-header39 > #ys-main-undo-group { grid-column: 1 / -1; grid-row: 4; justify-self: end; margin-top: 4px; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 { grid-template-columns: auto auto minmax(0, 1fr) auto !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #welcome-settings39 { grid-column: 4 !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-brand42, html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 3 !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 2; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-account { grid-column: 1; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-main-undo-group { justify-self: start; }
  html[data-hand="left"] main > header > #ys-apps { order: -2; }
}
/* A narrow phone (<= 400 px) has no room for the wordmark beside three round buttons: the wordmark takes the width left
   of the menu button, and the launcher and the account button sit on the second row, under it. */
@media (max-width: 400px) {
  #welcome39 header.welcome-header39 > * { --ys-wordmark: max(13px, min(clamp(16px, 2.3vw, 29px), calc((100cqw - 54px - 12px) / 12.6))); }
  html body #welcome39 header.welcome-header39 { grid-template-columns: auto minmax(0, 1fr) auto auto !important; }
  html body #welcome39 header.welcome-header39 > .welcome-brand42 { grid-column: 2 / -1; grid-row: 1; }
  html body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 2 !important; grid-row: 2 !important; }
  html body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 3; grid-row: 2; }
  html body #welcome39 header.welcome-header39 > #ys-account { grid-column: 4; grid-row: 2; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 { grid-template-columns: auto auto minmax(0, 1fr) auto !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-brand42 { grid-column: 1 / 4; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > .welcome-tagline57 { grid-column: 3 !important; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-apps { grid-column: 2; }
  html[data-hand="left"] body #welcome39 header.welcome-header39 > #ys-account { grid-column: 1; }
}
/* The account button is the picture and a chevron only (the name is in its label, its roll-over and the menu). */
html body #ys-account-button { padding: 4px 8px 4px 4px !important; gap: 4px; border-radius: 28px !important; }

/* The 9-dot launcher: a round button like the menu button. */
html body .ys-apps-btn {
  box-sizing: border-box; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0 !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; flex: none; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
}
html body .ys-apps-btn > .ys-ico { width: 22px; height: 22px; }
html body .ys-apps-btn:focus-visible { outline: 3px solid var(--ys-accent, #e5d3a4) !important; outline-offset: 2px; }
main > header > .ys-apps-btn { align-self: center; }
/* The map's header is already full on a small phone: the launcher lives on the welcome page there. */
@media (max-width: 480px) { main > header > .ys-apps-btn { display: none !important; } }

/* Both pop-ups (the launcher and the book list): the account menu's surface, on the hand's side. */
html body :is(#ys-apps-panel, #ys-book-menu) {
  position: fixed; top: var(--ys-menu-top, 64px); z-index: 1000; box-sizing: border-box; padding: 10px 10px 12px;
  max-height: calc(100dvh - var(--ys-menu-top, 64px) - 12px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ys-menu-bg); color: var(--ys-menu-text); border: 1px solid var(--ys-menu-line); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); font: 400 var(--ys-fs-md)/1.3 'Segoe UI', system-ui, sans-serif; text-align: left;
}
html body :is(#ys-apps-panel, #ys-book-menu)[hidden] { display: none !important; }
html:not([data-hand="left"]) body :is(#ys-apps-panel, #ys-book-menu) { left: auto; right: 12px; }
html[data-hand="left"] body :is(#ys-apps-panel, #ys-book-menu) { right: auto; left: 12px; }
html body #ys-apps-panel { width: min(344px, calc(100vw - 16px)); }
html body #ys-book-menu { width: min(480px, calc(100vw - 16px)); }
.ys-apps-h, .ys-bm-h { margin: 2px 6px 8px; font-size: var(--ys-fs-lg); font-weight: 700; color: var(--ys-menu-text); background: none; text-transform: none; letter-spacing: 0; }
.ys-apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html body a.ys-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 10px 4px 8px; border-radius: 12px; box-sizing: border-box;
  color: var(--ys-menu-text) !important; text-decoration: none !important; text-align: center; font-size: var(--ys-fs-sm); line-height: 1.2; overflow-wrap: anywhere;
}
html body a.ys-app:hover { background: var(--ys-menu-hover); }
html body a.ys-app:focus-visible { outline: 3px solid var(--ys-menu-gold) !important; outline-offset: 1px; }
.ys-app-tile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--ys-menu-text) 14%, transparent); color: var(--ys-menu-gold); }
.ys-app-tile > svg { width: 28px; height: 28px; }
.ys-app-name { font-weight: 600; }
a.ys-app[aria-current="true"] { background: var(--ys-menu-hover); box-shadow: inset 0 0 0 2px var(--ys-menu-gold); }
.ys-app-here { font-size: var(--ys-fs-xs); color: var(--ys-menu-gold); }
.ys-apps-note { margin: 8px 6px 0; font-size: var(--ys-fs-sm); color: var(--ys-menu-text); }

/* ---- Y18: the book switcher ------------------------------------------------------------------------------------- */
.ys-bookswitch { display: flex; min-width: 0; margin: 0 !important; } /* (style.css gives every header > div margin-right: auto) */
main > .ys-bookswitch { padding: 2px 14px 0; }
html body .ys-bs-btn {
  display: inline-flex; align-items: center; gap: 8px; width: auto; min-width: 0; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 4px 14px; border-radius: 22px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); font: 600 var(--ys-fs-md)/1.2 'Segoe UI', system-ui, sans-serif; text-align: left;
}
html body .ys-bs-btn:focus-visible { outline: 3px solid var(--ys-accent, #e5d3a4) !important; outline-offset: 2px; }
.ys-bs-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-hand="left"] .ys-bookswitch { justify-content: flex-end; }
/* its list: the dashboard's own line (onebook.css), drawn here too */
#ys-book-menu .ys-hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#ys-book-menu .ys-hb-line { position: relative; }
#ys-book-menu .ys-hb-main { position: relative; border: 1px solid var(--ys-menu-line); border-radius: 14px; background: color-mix(in srgb, var(--ys-menu-text) 7%, transparent); }
#ys-book-menu .ys-hb-go {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; width: 100%; min-height: 72px; margin: 0;
  padding: 8px 12px 14px 8px; text-align: left; background: transparent !important; color: var(--ys-menu-text) !important; border: 0 !important; border-radius: 14px; font-size: var(--ys-fs-md); line-height: 1.3; cursor: pointer;
}
#ys-book-menu .ys-hb-go:hover { background: var(--ys-menu-hover) !important; }
#ys-book-menu .ys-hb-go:focus-visible { outline: 3px solid var(--ys-menu-gold) !important; outline-offset: 1px; }
#ys-book-menu .ys-hb-go[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ys-menu-gold) !important; }
#ys-book-menu .ys-hb-thumb { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #173d32; display: block; }
#ys-book-menu .ys-hb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ys-book-menu .ys-hb-title { grid-column: 2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ys-book-menu .ys-hb-stats { grid-column: 2; font-size: var(--ys-fs-sm); }
#ys-book-menu .ys-hb-bar { position: absolute; left: 76px; right: 14px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--ys-menu-line); overflow: hidden; pointer-events: none; }
#ys-book-menu .ys-hb-bar > span { display: block; height: 100%; background: var(--ys-menu-gold); }
html[data-hand="left"] #ys-book-menu .ys-hb-go { grid-template-columns: minmax(0, 1fr) 56px; }
html[data-hand="left"] #ys-book-menu .ys-hb-thumb { grid-column: 2; }
html[data-hand="left"] #ys-book-menu .ys-hb-title, html[data-hand="left"] #ys-book-menu .ys-hb-stats { grid-column: 1; text-align: right; }
html[data-hand="left"] #ys-book-menu .ys-hb-bar { left: 14px; right: 76px; }
.ys-bm-newrow { list-style: none; margin-top: 4px; }
html body #ys-book-menu .ys-bm-new {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 12px; font-weight: 600; cursor: pointer;
  background: transparent !important; color: var(--ys-menu-text) !important; border: 1.5px dashed var(--ys-menu-gold) !important;
}
html body #ys-book-menu .ys-bm-new:hover { background: var(--ys-menu-hover) !important; }
html body #ys-book-menu .ys-bm-new:focus-visible { outline: 3px solid var(--ys-menu-gold) !important; outline-offset: 2px; }

/* ---- Y26: signed out: everything but the sign-in card is greyed out and does nothing ----------------------------------- */
html[data-ys-locked] #welcome39 [data-ys-lock="1"], html[data-ys-locked] #panel-body [data-ys-lock="1"] { opacity: .5; filter: grayscale(1); cursor: not-allowed !important; }
html[data-ys-locked] :is(#welcome39, #panel-body) [data-ys-lock="1"]:hover { filter: grayscale(1); }
html[data-ys-locked] :is([data-demo34], .setup-demo34) { display: none !important; } /* no sample content before sign-in */
html[data-ys-locked] #ys-signin-card { position: relative; z-index: 2; }

/* ---- B8: "always be kind", the Crew Comms rule ---------------------------------------------------------------------- */
/* Caveat 600, lower case; the palette's gold on a dark background (the header, the menus), a deep gold-brown (#6e4400,
   7.6:1 on cream) on a light one (the Story Book cover, the book window, the sign-in card, the server pages). */
.ys-motto, .sb-motto {
  font-family: 'BMSG Caveat', Caveat, cursive; font-weight: 600; font-style: normal; text-transform: lowercase; letter-spacing: 0;
}
.sb-motto, .ys-ws-head .ys-motto, #ys-signin-card .ys-motto, .ys-help-motto { color: #6e4400 !important; }
html[data-ys-contrast="high"] :is(.sb-motto, .ys-ws-head .ys-motto) { color: #000 !important; }
@media (forced-colors: active) { .ys-motto, .sb-motto { color: CanvasText !important; } }