/* you-sheet.css — the Menu sheet (account, appearance, listen, help) and the Contents sheet.
   Layout follows iOS grouped settings (Kindle / Apple Books keep these behind one menu):
   small uppercase section titles over rounded cards of rows. Card fill and row separators are
   mixed from each theme's own text and sheet colours, so light, sepia and dark all work
   without per-theme values. */

#you-sheet {
  --you-card-bg: color-mix(in srgb, var(--text-color, #1a1a1a) 5%, var(--surface-raised));
  --you-sep: color-mix(in srgb, var(--text-color, #1a1a1a) 13%, var(--surface-raised));
  --you-pad: var(--space-4);
}

/* ============================================================
   SHEET LAYOUT
   ============================================================ */

/* Give the sheet an explicit height at .full snap so flex children
   can measure against it. dvh = browser viewport on mobile;
   on desktop-frame the sheet uses position:absolute so 92% resolves
   to 92% of the .phone-shell (844px). */
#you-sheet.full {
  height: 100dvh;
}

body.desktop-frame #you-sheet.full {
  height: 100%;
}

#you-sheet .you-sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.you-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--you-pad) var(--space-2) calc(var(--you-pad) + var(--space-1));
  flex-shrink: 0;
}

.you-sheet-greeting {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* iOS-style round close: 30px tinted circle, 44px hit area. */
.you-sheet-close,
.chapter-picker-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--you-card-bg, var(--surface-inset));
  color: var(--text-secondary, var(--text-muted));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.you-sheet-close::after,
.chapter-picker-close::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.you-sheet-close:hover,
.chapter-picker-close:hover {
  color: var(--text-primary);
}
/* Focus ring only for keyboard focus (UX-AUDIT S3: a loud ring showed on touch open). */
.you-sheet-close:focus { outline: none; }
.you-sheet-close:focus-visible,
.chapter-picker-close:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: 2px;
}

.you-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  /* Theme-coloured thin scrollbar: the default one is a light grey bar on dark themes. */
  scrollbar-width: thin;
  scrollbar-color: var(--edge-strong) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--you-pad) calc(var(--space-8) + var(--safe-bottom));
}

/* Row classes set display; [hidden] must still hide (author dashboard row, invite group). */
#you-sheet [hidden] { display: none !important; }

.you-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   GROUPS AND CARDS
   ============================================================ */
.you-group {
  margin-top: var(--space-6);
}
.you-group:first-child {
  margin-top: var(--space-2);
}

.you-section-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2) var(--you-pad);
}

.you-card {
  border-radius: var(--radius-lg, 12px);
  background: var(--you-card-bg);
  overflow: hidden;
}

.you-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--you-pad);
  box-sizing: border-box;
  width: 100%;
}
#you-sheet .you-card > * + *,
#you-sheet .you-personalization-settings > * + *,
#you-sheet .you-card > .you-personalization-settings > :first-child {
  border-top: 1px solid var(--you-sep);
}
.you-card-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.you-row-label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}
/* Secondary, not muted: muted grey is 4.2:1 on the light card (tests/test_menu_sheet.py). */
.you-row-hint {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--text-secondary, var(--text-muted));
}

.you-group-foot {
  margin: var(--space-2) var(--space-1) 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-muted);
}

/* A tappable row that opens something (Saved insights, Send feedback, Sign out). */
.you-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--you-pad);
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.you-list-row::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: var(--space-3);
  border-top: 2px solid var(--text-muted);
  border-right: 2px solid var(--text-muted);
  transform: rotate(45deg);
}
.you-list-row:active { background: var(--you-sep); }
@media (hover: hover) {
  .you-list-row:hover { background: color-mix(in srgb, var(--text-color, #1a1a1a) 8%, var(--surface-raised)); }
}
.you-list-row--danger {
  justify-content: center;
  color: var(--color-error, #b91c1c);
}
.you-list-row--danger::after { display: none; }
.you-list-row:focus-visible,
.you-switch-row:focus-visible,
.you-swatch:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: -2px;
}

/* Menu navigation rows are plain text rows now; .you-about-link keeps the readable colour. */
.you-about-links {
  display: block;
}
.you-about-link {
  color: var(--text-primary);
  text-decoration: none;
}

.you-version {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ============================================================
   ACCOUNT
   ============================================================ */
.you-account-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--you-pad);
  border-radius: var(--radius-lg, 12px);
  background: var(--you-card-bg);
}
.you-account[data-state="account"] .you-account-card {
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.you-account #you-signed-in {
  border-top: 1px solid var(--you-sep);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  background: var(--you-card-bg);
  overflow: hidden;
}

.you-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-filled-bg, var(--color-primary));
  color: var(--btn-filled-text, #fff);
  font-family: var(--font-heading, var(--font-body, Georgia, serif));
  font-size: 21px;
  font-weight: var(--font-semibold);
}
.you-account[data-state="guest"] .you-account-avatar {
  background: var(--surface-raised);
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.8 20c1.2-3.6 4-5.3 7.2-5.3s6 1.7 7.2 5.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}

.you-account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.you-account-name {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.you-account-sub {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary, var(--text-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Signed-in indicator: a small tinted pill with a dot. */
.you-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--font-semibold);
}
.you-account-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success, #15803d);
}
.you-account-badge[hidden] { display: none; }

.you-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.you-account-actions .you-group-foot { grid-column: 1 / -1; }
/* An invited reader gets only Create account (no Sign in under a "Signed in" badge). */
#you-account[data-state="reader"] .you-account-actions { grid-template-columns: 1fr; }
/* For a reader it is an optional link, not the loudest control on the sheet (blind review r3). */
#you-account[data-state="reader"] #you-signup-btn {
  justify-self: start;
  padding: 0 var(--space-1);
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#you-account[data-state="reader"] .you-group-foot { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.you-btn {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--font-semibold);
  padding: 0 var(--space-5);
  min-height: var(--touch-min, 44px);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
}
.you-btn--primary {
  background: var(--btn-filled-bg, var(--color-primary));
  border-color: var(--btn-filled-bg, var(--color-primary));
  color: var(--btn-filled-text, #fff);
}
.you-btn--quiet {
  background: var(--you-card-bg);
  border-color: var(--edge-strong);
  color: var(--text-primary);
}
.you-btn:active { filter: brightness(0.95); }
@media (hover: hover) {
  .you-btn:hover { filter: brightness(1.05); }
}
.you-btn:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: 2px;
}

/* Kept for other callers of the class (auth flows); readable on the sheet. */
.you-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  min-height: var(--touch-min, 44px);
  cursor: pointer;
}
.you-link:hover {
  color: var(--link-color, var(--color-primary));
  text-decoration: underline;
}

/* ============================================================
   APPEARANCE: page colour swatches
   ============================================================ */
.you-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--you-pad) var(--space-3);
}
.you-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg, 12px);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.you-swatch-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 64px;
  border-radius: 50%;
  font-family: var(--font-body, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  /* Same neutral edge on every face, so no unselected swatch looks half-selected (sepia's own tan
     edge read as a weak ring) and Light / Auto's dark half keep an outline on a matching sheet. */
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  transition: box-shadow var(--transition-fast, 150ms);
}
/* Fixed colours: each face previews its own theme, whatever theme the sheet is in. */
.you-swatch-face--light { background: #FAFAFA; color: #1a1a1a; }
.you-swatch-face--sepia { background: #F4ECD8; color: #3E2723; }
.you-swatch-face--dark  { background: #111827; color: #F3F4F6; }
.you-swatch-face--auto  {
  background: linear-gradient(90deg, #FAFAFA 0 50%, #111827 50% 100%);
}
.you-swatch-face--auto span:first-child { color: #1a1a1a; }
.you-swatch-face--auto span:last-child  { color: #F3F4F6; }

.you-swatch-name {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary, var(--text-muted));
}
/* Selected: a ring in the theme's button colour, with a sheet-coloured gap, plus a bold name. */
.you-swatch[aria-checked="true"] .you-swatch-face {
  box-shadow:
    0 0 0 2px var(--you-card-bg),
    0 0 0 4px var(--btn-filled-bg, var(--color-primary));
}
/* Check badge on the selected face (shape, not only colour, says "this one"). */
.you-swatch[aria-checked="true"] .you-swatch-face::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--btn-filled-bg, var(--color-primary));
  box-shadow: 0 0 0 2px var(--you-card-bg);
}
.you-swatch[aria-checked="true"] .you-swatch-name {
  color: var(--text-primary);
  font-weight: var(--font-bold, 700);
}

/* ============================================================
   SLIDERS (text size, line spacing)
   ============================================================ */
.you-slider-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  min-height: 52px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.you-slider-caption {
  flex: 1 0 100%;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary, var(--text-muted));
}
.you-slider-end {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-family: var(--font-body, Georgia, serif);
  color: var(--text-secondary, var(--text-muted));
  line-height: 1;
}
.you-slider-end--small { font-size: 13px; }
.you-slider-end--large { font-size: 22px; }

.you-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--edge-strong);   /* 3:1 against the sheet (UX-AUDIT S4) */
  outline: none;
  cursor: pointer;
  /* The row gives us 44px height; disable scroll/zoom gestures on the slider
     itself so drags always go to the thumb instead of panning the page. */
  touch-action: none;
}
.you-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.you-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
/* Firefox track — required or browser renders its own default gray */
.you-slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--edge-strong);
  border: none;
}
.you-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: 2px;
}

/* ============================================================
   SELECTS (voice, speed): value right-aligned, iOS settings style
   ============================================================ */
.you-select {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-secondary, var(--text-muted));
  flex: 0 1 62%;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 22px 0 var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 4px center;
  text-align: right;
  text-align-last: right;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
}
.you-select:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: 2px;
}

/* ============================================================
   SWITCHES (Hands-free player, Personalize)
   ============================================================ */
.you-switch-row {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font: inherit;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.you-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.you-switch-track,
.you-personalization-track {
  position: relative;
  flex: 0 0 51px;
  height: 31px;
  border-radius: 16px;
  /* Off: pale track like iOS, with a 3:1 outline so the switch still reads on the card
     (UX-AUDIT S4). A solid --edge-strong track looked switched on (blind review r3). */
  background: color-mix(in srgb, var(--text-color, #1a1a1a) 8%, var(--surface-raised));
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  transition: background var(--transition-fast, 150ms);
}
.you-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  transition: transform 200ms cubic-bezier(.3, .7, .4, 1);
}
.you-switch-row[aria-checked="true"] .you-switch-track,
.you-personalization-toggle[aria-checked="true"] .you-personalization-track {
  background: var(--btn-filled-bg, var(--color-primary));
  box-shadow: none;
}
.you-switch-row[aria-checked="true"] .you-switch-thumb {
  transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
  .you-switch-thumb, .you-switch-track, .you-personalization-track { transition: none; }
}

body.personalization-off .qa-action[data-action="personalize"],
body.personalization-off .chat-hint-chip[data-hint="2"],
body.personalization-off .paragraph-context-menu-item[data-action="personalize"],
body.personalization-off #section-personalizing-indicator,
body.personalization-off #personalization-progress,
body.personalization-off .rail-proof { display: none !important; }

/* ============================================================
   STYLE CHIPS + PROFESSION (personalization details)
   ============================================================ */
.you-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.you-chip {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-2) var(--space-4);
  min-height: var(--touch-min); /* 44px — meets touch target minimum */
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.you-chip[aria-pressed="true"],
.you-chip.selected {
  background: var(--button-bg, var(--color-primary));
  border-color: var(--button-bg, var(--color-primary));
  color: var(--button-text, var(--text-inverse));
}

.you-row--profession {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.you-profession-input {
  font-family: var(--font-ui);
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  color: var(--text-primary);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--edge-strong);
  background: var(--surface-raised);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.you-profession-input::placeholder {
  color: var(--text-muted);
}
.you-profession-input:focus {
  border-color: var(--button-bg, var(--color-primary));
}

/* Help: the <details> sits in a card row. */
#you-sheet .you-controls-help {
  padding: 0 var(--you-pad);
}
#you-sheet .you-controls-help > summary {
  min-height: 48px;
  font-size: 15px;
  font-weight: var(--font-medium);
}
#you-sheet .you-controls-help > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: 2px;
  border: 0;
  border-bottom: 2px solid var(--text-muted);
  border-right: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
}
#you-sheet .you-controls-help[open] > summary::after {
  content: '';
  transform: rotate(225deg) translateY(-2px);
}
.you-sheet-header {
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
#you-sheet.is-scrolled .you-sheet-header { border-bottom-color: var(--you-sep); }

/* ============================================================
   CONTENTS (chapter list): a sheet from the bottom with a dimmed page behind
   ============================================================ */
.chapter-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet, 300) + 20);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body.desktop-frame .chapter-picker-overlay { position: absolute; }
.chapter-picker-overlay[hidden] { display: none; }

.chapter-picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 240ms ease;
}
.chapter-picker-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(78%, calc(100% - var(--safe-top, 0px) - 48px));
  border-radius: var(--radius-2xl, 20px) var(--radius-2xl, 20px) 0 0;
  background: var(--surface-raised);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  padding-bottom: var(--safe-bottom, 0px);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
  --you-card-bg: color-mix(in srgb, var(--text-color, #1a1a1a) 5%, var(--surface-raised));
  --you-sep: color-mix(in srgb, var(--text-color, #1a1a1a) 13%, var(--surface-raised));
}
.chapter-picker-panel:focus { outline: none; }
.chapter-picker-overlay.is-open .chapter-picker-scrim { opacity: 1; }
.chapter-picker-overlay.is-open .chapter-picker-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .chapter-picker-scrim, .chapter-picker-panel { transition: none; }
}

.chapter-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--you-sep);
  flex-shrink: 0;
}
.chapter-picker-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chapter-picker-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
}
.chapter-picker-book {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-picker-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-1) 0 var(--space-4);
}
.chapter-picker-empty {
  margin: var(--space-6) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.chapter-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  border: none;
  border-bottom: 1px solid var(--you-sep);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body, Georgia, serif);
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chapter-picker-item:last-child { border-bottom: none; }
.chapter-picker-item:active { background: var(--you-card-bg); }
@media (hover: hover) {
  .chapter-picker-item:hover { background: var(--you-card-bg); }
}
.chapter-picker-item:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: -2px;
}
.chapter-picker-item[aria-current="true"] {
  font-weight: 600;
  background: var(--you-card-bg);
}
.chapter-picker-handle {
  width: 36px;
  height: 5px;
  margin: var(--space-2) auto 0;
  border-radius: 3px;
  background: var(--edge-strong);
  flex-shrink: 0;
}
.chapter-picker-item-num {
  flex: 0 0 24px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, var(--text-muted));
}
.chapter-picker-item-text {
  flex: 1;
  min-width: 0;
}
.chapter-picker-check {
  flex: 0 0 auto;
  display: flex;
  color: var(--btn-filled-bg, var(--color-primary));
  visibility: hidden;
}
.chapter-picker-item[aria-current="true"] .chapter-picker-check { visibility: visible; }

/* Plain sections still injected by code (feedback-modes-ui.js "Feedback lab"). */
.you-section {
  margin-top: var(--space-6);
}
.you-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-min, 44px);
}
.you-row--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

/* Feedback beta: personalization controls stay out of Menu until personalization is offered
   (body.personalization-controls, set in shell/app/chatapp-personalization.js). */
body:not(.personalization-controls) .you-personalization-section,
body:not(.personalization-controls) .you-personalization-settings {
  display: none;
}