/* Dave's staging review, late 14 Oct 2026 (wave 2, stream E): which book is open, close buttons, and the active button.
   Colours come from tokens: --bk (the book's own colour, book-look.ts), --ys-btn / --ys-on-btn (the primary green and its
   text, which every palette and the high-contrast themes redefine). */

/* ---- 1. Book context: the colour + icon badge, the header chip, the lines ---------------------------------------- */
.ys-bk-badge { --bk-d: 24px; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: var(--bk-d); height: var(--bk-d); border-radius: 50%;
  background: var(--bk, #1f4a3d); color: #ffffff; border: 2px solid #ffffff; vertical-align: middle; }
.ys-bk-badge > svg { width: 62%; height: 62%; margin: 0; display: block; }

/* the chip in the bar: the book's colour as the fill, white words (every palette colour is 7:1+ with white, AAA), and a ring in the
   bar's own text colour so it shows on a dark bar and a light one. Words on wide screens, the badge alone on a phone. */
html body bmsg-topbar #ys-bookswitch { display: inline-flex; align-items: center; margin: 0 !important; min-width: 0; flex: 0 1 auto; }
html body bmsg-topbar #ys-bookswitch .ys-bs-btn {
  background: var(--bk, #1f4a3d) !important; color: #ffffff !important; border: 2px solid var(--bmsg-text, #ffffff) !important; border-radius: 999px !important;
  min-height: 44px !important; min-width: 44px !important; max-width: min(16em, 38vw); padding: 2px 12px 2px 4px !important; gap: 6px; font-size: 16px !important; font-weight: 700; box-shadow: none;
}
html body bmsg-topbar #ys-bookswitch .ys-bs-btn:hover { filter: brightness(1.12); }
html body bmsg-topbar #ys-bookswitch .ys-bs-btn .ys-bk-badge { --bk-d: 30px; border-color: #ffffff; }
html body bmsg-topbar #ys-bookswitch .ys-bs-btn > svg { width: 14px; height: 14px; flex: none; color: #ffffff; }
html body bmsg-topbar #ys-bookswitch .ys-bs-title { color: #ffffff; max-width: 11em; }
@media (max-width: 600px) {
  html body bmsg-topbar #ys-bookswitch .ys-bs-btn { padding: 2px !important; width: 44px; justify-content: center; }
  html body bmsg-topbar #ys-bookswitch .ys-bs-btn > :is(.ys-bs-title, svg.ys-ico-xs) { display: none !important; }
}
@media (max-width: 440px) { html body bmsg-topbar #ys-bookswitch .ys-bs-btn { width: 40px; min-width: 40px !important; min-height: 40px !important; } }

/* the title row of a book line (home buttons and the switcher list): badge, then the title */
.ys-hb-title { display: flex !important; align-items: center; gap: 6px; min-width: 0; }
.ys-hb-title > .ys-bk-badge { --bk-d: 22px; border-width: 1.5px; }
.ys-hb-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a stripe of the book's colour down the line's edge (the same colour as its badge and the chip). On the home page it is drawn on the
   line itself, because an inactive book's button is greyed with a filter that would grey a stripe drawn inside it. */
html body #welcome39 .ys-hb-line[data-book-colour] { position: relative; }
html body #welcome39 .ys-hb-line[data-book-colour]::before { content: ""; position: absolute; z-index: 3; inset-block: 5px; inset-inline-start: 0; width: 6px; border-radius: 3px; background: var(--bk); pointer-events: none; }
html body #ys-book-menu .ys-hb-go[data-book-colour] { box-shadow: inset 6px 0 0 var(--bk) !important; padding-inline-start: 14px; }
html[data-hand="left"] body #ys-book-menu .ys-hb-go[data-book-colour] { box-shadow: inset -6px 0 0 var(--bk) !important; padding-inline-start: initial; padding-inline-end: 14px; }
html body #ys-book-menu .ys-hb-go[aria-current="true"][data-book-colour] { box-shadow: inset 6px 0 0 var(--bk), inset 0 0 0 2px var(--ys-menu-gold) !important; }
/* the badge is its own colour wherever it sits: an inactive home line's badge stays in the grey like the rest of the button, its stripe does not */

/* ---- 2. Close buttons: a solid green circle with a white X, everywhere --------------------------------------------- */
html body :is(button.ys-close, #close-options, dialog#panel > #close, dialog .close.ys-icon-btn, #panel #close.ys-icon-btn, button.ys-size-close, button.sb-close, button.sb-answer-close, .ys-lib-head .ys-close):not([hidden]) {
  background: var(--ys-btn, #1f4a3d) !important; background-color: var(--ys-btn, #1f4a3d) !important; color: var(--ys-on-btn, #ffffff) !important;
  border: 2px solid var(--ys-btn, #1f4a3d) !important; border-radius: 50% !important; box-shadow: none;
}
html body :is(button.ys-close, #close-options, dialog#panel > #close, dialog .close.ys-icon-btn, #panel #close.ys-icon-btn, button.ys-size-close, button.sb-close, button.sb-answer-close, .ys-lib-head .ys-close) :is(svg, .ys-ico, path) { color: inherit; stroke: currentColor; }
html body :is(button.ys-close, #close-options, dialog#panel > #close, dialog .close.ys-icon-btn, #panel #close.ys-icon-btn, button.ys-size-close, button.sb-close, button.sb-answer-close):hover { background: var(--ys-btn-hover, #133328) !important; border-color: var(--ys-btn-hover, #133328) !important; }
html body :is(button.ys-close, #close-options, button.sb-close, button.sb-answer-close, button.ys-size-close):focus-visible { outline: 3px solid var(--ys-focus, #0b3d91) !important; outline-offset: 2px; }

/* ---- 3. The active button: ONE style, wherever a set of buttons has one "on" -------------------------------------
   A cream fill, dark words and a thick ring in the primary green (a white fill and a black ring in the high-contrast theme).
   Driven by aria-pressed="true" (toggles and segmented sets) and aria-current="step" (the step list). */
:root { --ys-on-bg: #fff3cf; --ys-on-text: #1b1b1b; --ys-on-ring: var(--ys-btn, #1f4a3d); }
html[data-ys-contrast="high"] { --ys-on-bg: #ffffff; --ys-on-text: #000000; --ys-on-ring: #000000; }
html body :is(button, [role="button"])[aria-pressed="true"]:not(bmsg-topbar *):not(.ys-pick):not([data-btn-exempt]):not(.ys-close),
html body #ys-workspace .ys-nav button[aria-current="step"],
html body :is(.view-switch, .ys-orbit-bar, .ys-composer-ways) :is(button)[aria-pressed="true"],
html body #ys-orbit-turn[aria-pressed="true"] {
  background: var(--ys-on-bg) !important; background-color: var(--ys-on-bg) !important; color: var(--ys-on-text) !important;
  border-color: var(--ys-on-ring) !important; box-shadow: 0 0 0 3px var(--ys-on-ring), inset 0 0 0 1px var(--ys-on-ring) !important; font-weight: 800;
}
html body :is(button, [role="button"])[aria-pressed="true"]:not(bmsg-topbar *):not(.ys-close) :is(svg, .ys-ico) { color: var(--ys-on-text); }
/* the ring needs a little room between neighbours */
html body :is(.view-switch, .ys-orbit-bar, .ys-composer-ways) { gap: 8px; }
html body #ys-workspace .ys-nav { gap: 6px; }
html body #ys-workspace .ys-nav button[aria-current="step"] { position: relative; }

/* A narrow phone: the chip took the brand's room, so the wordmark and motto give way and the petal heart stays (the brand link keeps its name). */
@media (max-width: 480px) { html body bmsg-topbar .bmsg-topbar__logo > .welcome-brand42, html body bmsg-topbar bmsg-motto { display: none !important; } }
/* The smallest phones (320 px): eight bar buttons must still sit on ONE row, so they close up a little. */
@media (max-width: 340px) {
  html body bmsg-topbar button { min-width: 36px !important; }
  html body bmsg-topbar :is(.bmsg-iconbtn, .bmsg-help__btn, #ys-topbar-newbook, #ys-topbar-feedback, #ys-bookswitch .ys-bs-btn) { min-width: 36px !important; width: 36px !important; }
  html body bmsg-topbar #ys-account-button.bmsg-avatar__btn { min-width: 38px !important; width: 38px !important; }
}
/* The map's bar is already full of the map's own tools: the chip is the badge alone there (its words are its name and roll-over). */
html body main > header bmsg-topbar #ys-bookswitch .ys-bs-btn { padding: 2px !important; width: 44px; justify-content: center; }
html body main > header bmsg-topbar #ys-bookswitch .ys-bs-btn > :is(.ys-bs-title, svg.ys-ico-xs) { display: none !important; }

/* The largest text size: a book's title may wrap instead of being cut, so no word of it is ever outside its button. */
html[data-ys-text="large"] .ys-hb-title { overflow: visible; align-items: flex-start; }
html[data-ys-text="large"] .ys-hb-title-text { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
/* A phone at the largest text size: the bar's icons are drawn at a fixed size (they grew with the text and no longer fitted the
   buttons, which close up to make room for the book chip). */
@media (max-width: 440px) {
  html body bmsg-topbar :is(.bmsg-iconbtn, .bmsg-help__btn) { padding: 0 !important; }
  html body bmsg-topbar :is(.bmsg-iconbtn, .bmsg-help__btn) svg { width: 22px !important; height: 22px !important; }
  html body bmsg-topbar .bmsg-avatar__btn .bmsg-av { width: 32px !important; height: 32px !important; min-width: 0; font-size: 14px; }
  html body bmsg-topbar .bmsg-avatar__btn { min-width: 0 !important; }
}