/* Phase 9 UI: theme toggle, help menu, command palette, shortcuts reference,
 * guided tour, methodology guides, session timeout, accessibility polish.
 * Kept in its own file so components.css doesn't grow further.
 */

/* --- Visually hidden helper (used by sr-only labels on icon buttons) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Theme toggle --- */
.theme-toggle {
  font-size: var(--font-size-lg);
  line-height: 1;
  min-width: 32px;
  padding: var(--space-1) var(--space-2);
}
.theme-toggle-icon { display: inline-block; }

/* --- Help menu --- */
.help-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.help-menu > button { font-size: var(--font-size-lg); line-height: 1; }
.help-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: none;
  z-index: 30;
}
.help-menu.is-open .help-menu-list { display: block; }
.help-menu-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: left;
  background: transparent;
  color: var(--color-text);
}
.help-menu-item:hover,
.help-menu-item:focus-visible { background: var(--color-surface-alt); }
.help-menu-label { font-weight: 500; }
.help-menu-hint { font-size: var(--font-size-sm); }

/* --- Shortcuts reference overlay --- */
.shortcuts-modal { max-width: 680px; }
.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.shortcuts-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.shortcuts-group {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 600;
}
.shortcuts-group-list { display: flex; flex-direction: column; gap: var(--space-1); }
.shortcut-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.shortcut-row:hover { background: var(--color-surface-alt); }
.shortcut-keys {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: 2px var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.shortcut-desc { color: var(--color-text); }

/* --- Command palette --- */
.command-palette-modal {
  max-width: 560px;
  padding: var(--space-3);
  margin-top: 10vh;
  align-self: start;
}
.command-palette-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-lg);
}
.command-palette-list {
  margin-top: var(--space-3);
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.command-palette-item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.command-palette-item:hover,
.command-palette-item.is-active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.command-palette-kind {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 84px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.command-palette-title { color: var(--color-text); font-weight: 500; }

/* --- Guided tour --- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
}
.tour-spotlight {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px var(--color-overlay);
  pointer-events: none;
  /* No CSS transition between steps. The transition was animating the
     spotlight from the previous step's rect to the new one over 160ms,
     and a screenshot taken mid-animation showed the spotlight on the
     previous element (e.g. step 8 "Search" appearing to highlight the
     Documents/Codebook area where the prior Memos rect had been
     overshooting through). Snap immediately. */
  border: 2px solid var(--color-accent);
}
.tour-tooltip {
  position: absolute;
  max-width: 360px;
  /* Never exceed the viewport (matches layoutAround's margin*2 = 32). A tall
     step on a short viewport scrolls its BODY (below) rather than overflowing
     off-screen, while the counter/title/actions stay pinned and visible. */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  pointer-events: auto;
  z-index: 1501;
}
.tour-step-counter {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}
.tour-tooltip h3 { margin-bottom: var(--space-2); flex-shrink: 0; }
/* The body is the one flex child that may scroll, so a long step never pushes
   the actions off-screen on a short viewport. */
.tour-tooltip p {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.tour-step-counter { flex-shrink: 0; }
.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.tour-actions-right { display: flex; gap: var(--space-2); }

/* --- Methodology guides page --- */
.methodology-page { display: flex; flex-direction: column; gap: var(--space-4); }
.methodology-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.methodology-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.methodology-card[open] { border-color: var(--color-accent); }
.methodology-card summary {
  cursor: pointer;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.methodology-card summary::-webkit-details-marker { display: none; }
.methodology-card summary h2 { font-size: var(--font-size-lg); }
.methodology-body {
  padding: 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text);
}
.methodology-phase-heading {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.methodology-checklist {
  list-style: decimal;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.methodology-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.methodology-project-select {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 32px;
}
.methodology-actions-hint {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
}

/* --- Session timeout modal --- */
.session-warning-modal { max-width: 460px; }
.session-warning-modal h2 { margin-bottom: var(--space-3); }

/* --- Code highlight accessibility pattern --- */
/* When the project opts into color-plus-pattern highlights, every coded
 * segment gets a subtle bottom border so users with colour-vision
 * differences can still distinguish overlapping regions by texture. */
html[data-highlight-pattern="on"] .coded-segment {
  text-decoration: underline dotted var(--color-text-muted);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
/* QA #28 — "Underline only" highlight style: drop the tinted background fill so
 * only the per-code colored underline (the inline border-bottom / stacked
 * box-shadows from coding-text.js) marks the text. !important beats the inline
 * background the renderer sets, while the colored underline stays inline. */
html[data-highlight-style="underline"] .coded-segment {
  background: transparent !important;
}

/* --- ARIA tree view (codebook) --- */
[role="tree"] { outline: none; }
/* QA #8 — the legacy `[role="treeitem"] { display:block }` (and its dead
   `.code-label` active style) targeted an older codebook tree that no longer
   exists. Because `[role="treeitem"]` ties `.code-row` on specificity but loaded
   later, it silently clobbered `.code-row`'s `display:grid`, forcing every code
   row to wrap onto three lines (the "rows feel too tall" report). The modern
   `.code-row` rule owns its own grid layout + `.is-active` styling, so the
   legacy override is removed. */

/* --- Info popover (for "?" help icons) --- */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  margin-left: var(--space-1);
  cursor: help;
}
.info-icon:hover,
.info-icon:focus-visible { background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* --- Toast / live region announcements --- */
.live-region {
  position: fixed;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}