/* Dave's shared top bar in Your Story (Phase 1 WP5, D45): <bmsg-topbar> from @bmsg/ui 0.2.0 (header-chrome.ts).
   The kit styles the bar itself (bmsg-ui.css, its AAA tokens). These rules only make room for it in the two headers the
   carried UI draws, and stop the carried UI's header rules (sized for its own round buttons) reaching the kit's. */

/* The welcome page: the bar is the header's first row, the book switcher the second. */
html body #welcome39 header.welcome-header39.ys-has-topbar {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px !important;
  padding: 0 0 8px !important;
}
html body #welcome39 header.welcome-header39.ys-has-topbar > bmsg-topbar { width: 100%; border-radius: 14px; }
html body #welcome39 header.welcome-header39.ys-has-topbar > #ys-bookswitch { margin: 0 !important; }

/* The map: the bar is the header. */
html body main > header.ys-has-topbar {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}
html body main > header.ys-has-topbar > bmsg-topbar { width: 100%; }

/* The brand pieces Your Story moved in keep their own look; the wordmark fits the bar. */
html body bmsg-topbar { --ys-wordmark: max(15px, min(clamp(16px, 2.3vw, 26px), calc((100vw - 330px) / 13))); }
bmsg-topbar .bmsg-topbar__logo > .welcome-brand42 { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
bmsg-topbar .bmsg-topbar__logo > .welcome-brand42 strong { font-size: var(--ys-wordmark, clamp(18px, 2.3vw, 28px)) !important; }
bmsg-topbar .bmsg-topbar__logo > .welcome-brand42 svg { width: 2.25em; height: 2.25em; flex: none; }
bmsg-topbar .bmsg-topbar__logo > div { margin: 0 !important; min-width: 0; }
bmsg-topbar .bmsg-topbar__logo > div > h1 { margin: 0; }

/* The kit's own buttons keep the kit's sizes (the carried UI sizes every header button for its emoji glyphs). */
html body bmsg-topbar :is(.bmsg-topbar__tail) button {
  font-size: 1em !important;
  min-width: 0;
  line-height: 1.2;
  box-shadow: none;
}
html body bmsg-topbar .bmsg-iconbtn { min-width: max(44px, 2.75em) !important; min-height: max(44px, 2.75em) !important; padding: .35em .55em !important; border-radius: 999px !important; }
html body bmsg-topbar .bmsg-avatar__btn { min-height: max(44px, 2.75em) !important; padding: .2em .35em .2em .2em !important; border-radius: 999px !important; }
html body bmsg-topbar .bmsg-help__btn { width: auto !important; max-width: none !important; white-space: nowrap; }
html body bmsg-topbar .bmsg-help__text { white-space: nowrap; }
html body bmsg-topbar .bmsg-topbar__actions button { font-size: 16px !important; }
html body bmsg-topbar .bmsg-panel button, html body bmsg-topbar .bmsg-panel a { font-size: 1em; }
html body bmsg-topbar .bmsg-panel { text-align: left; }

/* Every button in the bar is a finger-sized target (44 px), whatever the root font size. */
html body bmsg-topbar button { min-height: 44px !important; min-width: 44px !important; }
/* The motto follows Your Story's rule: 0.88 x the wordmark, never under 16 px (Crew Comms' rule, 1 Oct 2026). */
html body #welcome39 bmsg-topbar bmsg-motto { font-size: max(16px, calc(var(--ys-wordmark) * .88)); }
/* The picture's colours are the kit's (the carried UI paints every span in a button with the button's colour). */
html body :is(#ys-account, bmsg-avatar-menu) .bmsg-av, html body :is(#ys-account, bmsg-avatar-menu) .bmsg-av > span { color: var(--bmsg-av-fg, #ffffff) !important; }
html body :is(#ys-account, bmsg-avatar-menu) .bmsg-av { background: var(--bmsg-av-bg, #2f3b4a) !important; }

/* The kit's fields (dates, names) carry their own themed surface; their words keep the kit's AAA colours inside Your
   Story's cards (whose label rules are written for Your Story's own fields). */
html body :is(bmsg-datetime, bmsg-name) :is(legend, label, .bmsg-dt-zone-h, .bmsg-dt-understood, .bmsg-hint, .bmsg-dt-hint, .bmsg-name-h, .bmsg-name-none) { color: var(--bmsg-text) !important; }

/* A photo chosen on this device, laid over the kit's picture (account-menu.ts). */
.bmsg-av.ys-av-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* The left hand mirrors the bar (Dave, 1 Oct 2026: the one-thumb controls sit on the hand's side): the menu button at the
   far edge, the account button on the left; the menus open on the left. */
html[data-hand="left"] bmsg-topbar .bmsg-topbar__bar { flex-direction: row-reverse; }
html[data-hand="left"] bmsg-topbar :is(.bmsg-topbar__actions, .bmsg-topbar__tail) { flex-direction: row-reverse; margin-left: 0; margin-right: auto; }
html[data-hand="left"] bmsg-topbar .bmsg-panel { right: auto; left: .75em; }

@media (max-width: 600px) {
  html body #welcome39 header.welcome-header39.ys-has-topbar > bmsg-topbar { border-radius: 10px; }
}

/* The account menu keeps Your Story's menu colours (its rows are Your Story's): the kit's name and email follow them. */
html body #ys-account-menu :is(.bmsg-avatar__name, .bmsg-avatar__email) { color: inherit !important; }

/* Your Story's brand words take the bar's own AAA colours in every kit theme. */
html body bmsg-topbar .bmsg-topbar__logo :is(strong, h1, small) { color: var(--bmsg-text) !important; }
html body bmsg-topbar .bmsg-topbar__logo .ofr-domain49 { color: var(--bmsg-motto-ofr) !important; }

/* Dave's home-screen review, 12 Oct 2026 (docs/FEEDBACK-20261011.md YSF-1142..1146). */
/* YSF-1142: no Undo / Redo on the home screen while there is nothing to undo; they appear only once a change made
   elsewhere (the Story Book, the map) can be undone. The map keeps them always. Ctrl+Z / Ctrl+Y work either way. */
html body #welcome39 bmsg-topbar #ys-main-undo-group:not(:has(button:enabled)) { display: none !important; }
/* YSF-1143: Get help is an icon only, to the LEFT of the 9-dot launcher. Its words stay as the button's accessible
   name (visually hidden, still read out) and its roll-over title. */
html body bmsg-topbar .bmsg-topbar__tail > bmsg-help { order: -1; }
html body bmsg-topbar .bmsg-help__btn { width: max(44px, 2.75em) !important; padding: .35em !important; justify-content: center; }
html body bmsg-topbar .bmsg-help__text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* YSF-1144: the bar takes Your Story's colour instead of the kit's navy. Only where the kit would paint navy (its
   standard theme, and "system" on a dark screen); light, soft and high-contrast themes keep the kit's AAA colours.
   #1D4337 with the kit's #EAF1FF text = 10.3:1 (AAA). */
[data-bmsg-theme=std] bmsg-topbar, html bmsg-topbar[data-bmsg-theme=std] { --bmsg-bar-bg: var(--ys-bar-bg, #1D4337); }
@media (prefers-color-scheme: dark) and (not (prefers-contrast: more)) {
  [data-bmsg-theme=system] bmsg-topbar, html bmsg-topbar[data-bmsg-theme=system] { --bmsg-bar-bg: var(--ys-bar-bg, #1D4337); }
}
/* YSF-1149: "Add a new book" sits in the home screen's bar only (the map's bar is full of the map's own tools). */
html body main > header bmsg-topbar #ys-topbar-newbook { display: none !important; }
html body bmsg-topbar #ys-topbar-newbook { display: inline-flex; align-items: center; justify-content: center; gap: .35em; white-space: nowrap; width: auto !important; max-width: none !important; min-width: 0; padding: .35em .95em .35em .7em !important; border-radius: 999px !important; border: 1px solid var(--bmsg-text) !important; background: transparent !important; color: var(--bmsg-text) !important; font-weight: 700; }
html body bmsg-topbar #ys-topbar-newbook svg { width: 1.1em; height: 1.1em; flex: none; }
html body bmsg-topbar #ys-topbar-newbook > .ys-btn-ico { display: inline-flex; }
/* A phone: the plus only, the words kept as its name. */
@media (max-width: 600px) { html body bmsg-topbar #ys-topbar-newbook { padding: .35em !important; min-width: 44px; min-height: 44px; } html body bmsg-topbar #ys-topbar-newbook { font-size: 0 !important; gap: 0; } html body bmsg-topbar #ys-topbar-newbook > .ys-btn-ico { font-size: 18px; display: inline-flex; } }
/* YSF-1146: no book button under the logo on the home screen (the book list below it already picks the book). */
html body #welcome39 header.welcome-header39 > #ys-bookswitch { display: none !important; }

/* YSF-1151 (Dave, 12 Oct 2026): search the book - the bar's magnifier and its pop-up (search.ts). */
html body bmsg-topbar #ys-search-open { display: inline-flex; align-items: center; justify-content: center; }
html body bmsg-topbar #ys-search-open .ys-ico { width: 1.25em; height: 1.25em; }
dialog.ys-search { width: min(680px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 16px; border: 1px solid var(--ys-line, #cec6b1); border-radius: 16px; background: var(--ys-paper, #f7f2e5); color: var(--ys-ink, #173d32); display: none; flex-direction: column; gap: 10px; }
dialog.ys-search[open] { display: flex; }
dialog.ys-search::backdrop { background: rgba(0, 0, 0, .55); }
.ys-search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ys-search-head h2 { margin: 0; font-size: var(--ys-fs-lg, 20px); font-weight: 700; color: var(--ys-ink, #173d32); }
.ys-search-q { width: 100%; min-height: 44px; padding: 8px 12px; font-size: var(--ys-fs-md, 16px); border: 2px solid var(--ys-accent, #214c3f); border-radius: 10px; background: #fff; color: #1f1a12; }
.ys-search-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; border: 0; }
.ys-search-filters legend { float: left; margin-right: 6px; font-weight: 700; line-height: 36px; }
.ys-search-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 12px 2px 8px; border: 1px solid var(--ys-line, #cec6b1); border-radius: 999px; cursor: pointer; }
.ys-search-chip:has(input:checked) { border-color: var(--ys-accent, #214c3f); font-weight: 700; }
.ys-search-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--ys-accent, #214c3f); }
.ys-search-status { margin: 0; font-size: var(--ys-fs-sm, 14px); }
.ys-search-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; min-height: 0; }
html body dialog.ys-search .ys-search-hit { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; width: 100%; padding: 8px 12px; text-align: left; border: 1px solid var(--ys-line, #cec6b1); border-radius: 12px; background: #fff !important; color: #1f1a12 !important; cursor: pointer; font: inherit; font-weight: 400; min-height: 0; box-shadow: none; }
html body dialog.ys-search .ys-search-hit:hover, html body dialog.ys-search .ys-search-hit:focus-visible { border-color: var(--ys-accent, #214c3f); outline: 2px solid var(--ys-accent, #214c3f); outline-offset: 1px; }
html body dialog.ys-search .ys-search-kind { grid-row: 1 / span 3; align-self: start; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e8efe9 !important; color: #173d32 !important; }
html body dialog.ys-search .ys-search-hit[data-kind="story"] .ys-search-kind { background: #f3e7cf !important; color: #4a3200 !important; }
html body dialog.ys-search .ys-search-hit[data-kind="memory"] .ys-search-kind { background: #e6e9f6 !important; color: #1d2a5a !important; }
html body dialog.ys-search .ys-search-hit[data-kind="category"] .ys-search-kind { background: #f2e4ea !important; color: #5a1d33 !important; }
html body dialog.ys-search .ys-search-title { grid-column: 2; overflow-wrap: anywhere; color: #1f1a12 !important; font-weight: 700; }
html body dialog.ys-search .ys-search-snip { grid-column: 2; font-size: var(--ys-fs-sm, 14px); color: #3b3a33; overflow-wrap: anywhere; }
html body dialog.ys-search .ys-search-where { grid-column: 2; font-size: 13px; color: #4b5b52; }
.ys-search mark { background: #ffe28a; color: #000; border-radius: 2px; padding: 0 1px; }

/* Beta feedback (feedback.ts): a pill with its words on wide screens, a round icon on a phone, like "Add a new book". */
html body bmsg-topbar #ys-topbar-feedback { display: inline-flex; align-items: center; justify-content: center; gap: .35em; white-space: nowrap; width: auto !important; max-width: none !important; min-width: 0; padding: .35em .95em .35em .7em !important; border-radius: 999px !important; border: 1px solid var(--bmsg-text) !important; background: transparent !important; color: var(--bmsg-text) !important; font-weight: 700; }
html body bmsg-topbar #ys-topbar-feedback svg { width: 1.1em; height: 1.1em; flex: none; }
html body bmsg-topbar #ys-topbar-feedback > .ys-btn-ico { display: inline-flex; }
@media (max-width: 600px) { html body bmsg-topbar #ys-topbar-feedback { padding: .35em !important; min-width: 44px; font-size: 0 !important; gap: 0; } html body bmsg-topbar #ys-topbar-feedback > .ys-btn-ico { font-size: 18px; display: inline-flex; } }
/* On the map the bar also carries Review, Add, the microphone and My book: the feedback button is the round icon there
   (its words are its name and roll-over), so the bar stays one row and the map keeps its height. */
html body main > header bmsg-topbar #ys-topbar-feedback { padding: .35em !important; min-width: 44px; font-size: 0 !important; gap: 0; }
html body main > header bmsg-topbar #ys-topbar-feedback > .ys-btn-ico { font-size: 18px; display: inline-flex; }
/* ---- Story page groups (Dave, 14 Oct 2026): the same five labelled groups, in the same order, on every story and question
   page - Your words / Add to these words / When and where / In the book / More… - so the Storyteller sees what each part
   of the page is for. One small heading per group and a light line between groups (no boxes); one gap, from the tokens. */
.sb-story, .ys-composer { --ys-grp-gap: 6px; }
.sb-grp, .ys-grp { display: grid; gap: var(--ys-grp-gap); margin: 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--ys-line, #8a8172); min-width: 0; }
.sb-story > .sb-grp:first-of-type, .sb-story > .sb-grp-words, .ys-composer > .ys-grp-words { border-top: 0; padding-top: 0; }
.sb-story { display: grid; gap: var(--ys-grp-gap); }
.sb-grp-h, .ys-grp-h, .ys-media-h {
  margin: 0; font: 700 var(--ys-fs-xs, 13px)/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ys-muted, #425c50); text-align: start;
}
.sb-grp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sb-grp-more { padding-top: 0; }
.sb-grp-more > summary.sb-grp-h { color: var(--ys-ink, #173d32); text-transform: none; letter-spacing: 0; font-size: var(--ys-fs-sm, 14px); }
.sb-in-chapter, .sb-story-meta { font: var(--ys-fs-sm, 14px)/1.3 system-ui, sans-serif; color: var(--ys-muted, #425c50); overflow-wrap: anywhere; }
.sb-grp .sb-when, .sb-grp .sb-cut { margin: 4px 0 0; }
.sb-grp .sb-confirm { margin: 4px 0 0; }
.sb-grp .sb-add-media { margin: 0; }
.sb-grp .ys-ax-control, .sb-grp .sb-photo-control { margin: 0; }
.ys-composer { gap: var(--ys-grp-gap); }
.ys-composer .ys-grp-words { border-top: 0; }
.ys-composer .ys-media { padding: 6px 0 0; border: 0; border-top: 1px solid var(--ys-line, #8a8172); border-radius: 0; background: none; gap: var(--ys-grp-gap); }
.ys-composer .ys-media-hint { font-size: var(--ys-fs-xs, 13px); }
.ys-composer .ys-composer-text { min-height: 7em; }
.sb-grp-row { font: .9em/1.3 system-ui, sans-serif; }
.sb-grp .sb-check { margin-block: -4px; }