/* Component styles for BlueAI Adoption — imports icons, design tokens and layout. */

/* All three imports live HERE, flat, not nested inside each other: @imports are
   discovered serially, so a nested chain (main → layout → design-system → icons)
   cost four dependent round trips per navigation on the deployed site. Flat, the
   browser fetches all three in parallel after main.css. Order = cascade order:
   icon glyphs first, then tokens, then layout, then this file's components. */
@import './tabler-icons.css';
@import './design-system.css';
@import './layout.css';

/* The [hidden] attribute must win over any display-setting class (e.g. .quiz-form's
   display: flex) — same CSS specificity, so without this the later class rule wins
   and a toggled-hidden element stays visible. */
[hidden] {
  display: none !important;
}

/* Display typeface (Schibsted Grotesk) for headings and large figures. */
h1, h2, h3, h4,
.page-intro h1,
.hero-name,
.stat-value,
.pc-level-name {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ─── ERROR BANNER ───────────────────────────────────────────────────────────*/
.error-banner {
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

/* ─── PROFILE ────────────────────────────────────────────────────────────────*/
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--chelsea-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--chelsea-blue-light);
  flex-shrink: 0;
}

/* An avatar showing a real Entra photo. `background-size: cover` crops to fill the circle
   rather than letterboxing a non-square source, and transparent text hides the initials
   underneath without removing them — so the fallback is one class away if the image fails.
   Applied by mountAvatarPhoto(); see ui.js. */
.avatar-lg.has-photo,
.sb-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

/* ─── PAGE INTRO ─────────────────────────────────────────────────────────────*/
.page-intro {
  margin-bottom: 20px;
}

.page-intro h1 {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: 4px;
}

.page-intro p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 600px;
}

/* ─── HERO ───────────────────────────────────────────────────────────────────
   Always navy. Contains welcome message, quick-start actions, and progress card.
   ─────────────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin-bottom: 20px;
  overflow: hidden;   /* clips to the border-radius */
}

.hero-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-text);
  margin-bottom: 8px;
}

.hero-sub {
  font-size: var(--text-base);
  color: var(--hero-text-sub);
  line-height: 1.55;
  /* 72ch, not 56ch: the column offers roughly 80 characters, so the old cap left the copy
     wrapping to three lines while a quarter of the width sat unused — and being in ch it
     never reflowed however wide the window got. 72ch stays inside the readable 45-75ch
     band. text-wrap: pretty just avoids a lone word on the last line. */
  max-width: 72ch;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: 22px;
  flex-wrap: wrap;
}

/* ─── HERO BUTTONS ───────────────────────────────────────────────────────────*/
.ha-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  cursor: pointer;
  border: 0.5px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* Hero buttons share the card's hover language (see .tool-card) — but the glow has to
   read on the hero's dark blue, where a blue halo is invisible. So these get a white
   halo over a deep cast shadow; light-surface buttons get the blue version further down.
   1px of lift, not the card's 2px: a small control travelling as far as a card feels
   twitchy. */
.ha-btn:hover {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.10),
    0 8px 20px rgba(3, 10, 77, 0.38);
  transform: translateY(-1px);
}

.ha-btn:focus-visible {
  outline: 2px solid var(--hero-text);
  outline-offset: 2px;
}

.ha-btn i {
  font-size: 15px;
}

/* Vendor logos (Copilot) sit at the same optical size as the icon-font glyphs. */
.ha-btn-logo {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
}

/* White = the one primary action on the hero's blue. Everything else is ghost, so
   the eye lands on a single call to action rather than three competing solids. */
.ha-btn-white {
  background: var(--surface-primary);
  color: var(--chelsea-blue);
  border-color: var(--surface-primary);
  font-weight: 500;
}

.ha-btn-white:hover {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.90);
  color: var(--chelsea-blue);
  text-decoration: none;
}

.ha-btn-ghost {
  background: var(--hero-btn-ghost-bg);
  color: var(--hero-text);
  border-color: var(--hero-btn-ghost-border);
}

.ha-btn-ghost:hover {
  background: var(--hero-btn-ghost-hover);
  border-color: var(--hero-btn-ghost-border);
  color: var(--hero-text);
  text-decoration: none;
}

.ha-btn-primary {
  background: var(--hero-btn-primary-bg);
  color: var(--text-inverse);
  border-color: var(--hero-btn-primary-bg);
}

.ha-btn-primary:hover {
  background: var(--hero-btn-primary-hover);
  border-color: var(--hero-btn-primary-hover);
  text-decoration: none;
  color: var(--text-inverse);
}

.ha-btn-secondary {
  background: var(--hero-btn-secondary-bg);
  color: var(--hero-text-sub);
  border-color: var(--hero-btn-secondary-border);
}

.ha-btn-secondary:hover {
  background: var(--hero-btn-secondary-hover);
  text-decoration: none;
  color: var(--hero-text-sub);
}

/* ─── PROGRESS CARD ──────────────────────────────────────────────────────────
   Lives inside .hero. Semi-transparent against navy background.
   ─────────────────────────────────────────────────────────────────────────── */
.progress-card {
  background: var(--progress-card-bg);
  border: 0.5px solid var(--progress-card-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  min-width: 188px;
  flex-shrink: 0;
}

.pc-label {
  font-size: var(--text-xs);
  color: var(--chelsea-blue-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pc-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pc-level-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-inverse);
}

.pc-level-badge {
  font-size: var(--text-xs);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--chelsea-blue);
  color: var(--chelsea-blue-light);
}

.pc-bar-track {
  height: 5px;
  background: var(--progress-bar-track);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.pc-bar-fill {
  height: 100%;
  width: 0;
  background: var(--progress-bar-fill);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pc-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.pc-badge-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}

.pc-badge-dot.earned {
  background: var(--progress-badge-earned-bg);
  color: var(--progress-badge-earned-text);
}

.pc-badge-dot.locked {
  background: var(--progress-badge-locked-bg);
  color: var(--progress-badge-locked-text);
}

.pc-next {
  font-size: var(--text-xs);
  color: var(--chelsea-blue-mid);
  padding-top: var(--space-2);
  border-top: 0.5px solid var(--progress-divider);
}

/* ─── ONBOARDING CHECKLIST (dashboard AI-journey card) ───────────────────────*/
.pc-onb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pc-onb-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 12px 0 8px;
}

.pc-onb-pct {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-inverse);
  letter-spacing: -0.02em;
}

.pc-onb-caption {
  font-size: var(--text-xs);
  color: var(--hero-text-sub);
}

.pc-onb-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.pc-onb-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.pc-onb-step:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.pc-onb-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--progress-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pc-onb-step.done .pc-onb-dot {
  background: var(--progress-bar-fill);
  border-color: var(--progress-bar-fill);
}

.pc-onb-dot i {
  font-size: 11px;
  color: var(--chelsea-navy);
  stroke-width: 3;
}

.pc-onb-step-label {
  font-size: var(--text-sm);
  color: var(--hero-text-sub);
}

.pc-onb-step.done .pc-onb-step-label {
  color: var(--text-inverse);
}

/* ─── SECTION HEADER ─────────────────────────────────────────────────────────*/
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.section-label {
  font-size: var(--text-base);
  font-weight: 500;
}

.section-link {
  font-size: var(--text-sm);
  color: var(--chelsea-blue);
  text-decoration: none;
  cursor: pointer;
}

.section-link:hover {
  text-decoration: underline;
}

/* ─── CARDS ──────────────────────────────────────────────────────────────────*/
.card {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.card:hover {
  border-color: var(--border-strong);
}

/* ─── TOOL CARDS ─────────────────────────────────────────────────────────────
   Active tools: full opacity, blue icon background.
   Locked tools: reduced opacity — visible but clearly unavailable.
   Clicking a locked tool opens the access modal.
   ─────────────────────────────────────────────────────────────────────────── */
.tool-card {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s, opacity 0.12s, box-shadow 0.18s, transform 0.18s;
}

/* The dashboard renders these cards as <a>, so the card was inheriting link behaviour —
   an underline appearing under the title on hover. The card IS the target, not the words
   in it, so the affordance belongs to the whole card: a soft brand-blue glow and a 2px
   lift. Underline is suppressed on the card rather than the title, so nothing nested
   inside can reintroduce it. */
.tool-card,
.tool-card:hover,
.maker-link,
.maker-link:hover {
  text-decoration: none;
}

.tool-card:hover,
.maker-link:hover {
  border-color: rgba(5, 20, 150, 0.35);
  box-shadow:
    0 0 0 3px rgba(5, 20, 150, 0.07),      /* close halo — the glow itself */
    0 10px 28px rgba(5, 20, 150, 0.16),    /* cast shadow, tinted blue rather than grey */
    0 2px 6px rgba(5, 20, 150, 0.08);
  transform: translateY(-2px);
}

/* Keyboard users get the same glow plus a real outline — a soft halo alone is too
   subtle to serve as a focus indicator. */
.tool-card:focus-visible,
.maker-link:focus-visible {
  outline: 2px solid var(--chelsea-blue);
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(5, 20, 150, 0.07),
    0 10px 28px rgba(5, 20, 150, 0.16);
}

.tool-card.locked {
  opacity: 0.45;
}

/* A locked tool isn't a destination, so it gets clarity on hover but no glow or lift —
   the movement would read as "open me" for something that can't be opened. */
.tool-card.locked:hover {
  opacity: 0.65;
  border-color: var(--border-default);
  box-shadow: var(--shadow-card);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tool-card:hover {
    transform: none;   /* keep the glow, drop the movement */
  }
}

.tc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--chelsea-blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.tc-icon i {
  font-size: 18px;
  color: var(--chelsea-blue);
}

/* Vendor logo in place of the icon glyph. Sized to the glyph's optical weight so a
   logo card and an icon card read as the same family, and never stretched. */
.tc-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* Locked tools grey their glyph out; a full-colour logo can't be recoloured, so
   desaturate it instead to carry the same "not available to you" signal. */
.tc-icon.muted .tc-logo {
  filter: grayscale(1);
  opacity: 0.55;
}

.tc-icon.muted {
  background: var(--surface-secondary);
}

.tc-icon.muted i {
  color: var(--text-secondary);
}

.tc-name {
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: 2px;
}

.tc-provider {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tc-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ─── TAGS AND STATUS PILLS ──────────────────────────────────────────────────*/
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-weight: 400;
  white-space: nowrap;
}

.tag-active {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.tag-locked {
  background: var(--status-locked-bg);
  color: var(--status-locked-text);
}

.tag-future {
  background: var(--status-future-bg);
  color: var(--status-future-text);
}

.tag-blue {
  background: var(--chelsea-blue-pale);
  color: var(--text-info);
}

.tag-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

/* ─── SELECT CARDS (Requests type picker) ────────────────────────────────────*/
.select-card {
  cursor: pointer;
  transition: border-color 0.12s;
}

.select-card.selected {
  border-color: var(--chelsea-blue);
  box-shadow: 0 0 0 1px var(--chelsea-blue);
}

/* Department tags */
.tag-dept-commercial { background: var(--dept-commercial-bg); color: var(--dept-commercial-text); }
.tag-dept-football    { background: var(--dept-football-bg);   color: var(--dept-football-text); }
.tag-dept-finance     { background: var(--dept-finance-bg);    color: var(--dept-finance-text); }
.tag-dept-tech        { background: var(--dept-tech-bg);       color: var(--dept-tech-text); }

/* ─── GRIDS ───────────────────────────────────────────────────────────────────*/
/* Card grids fill the space they're given rather than holding three rigid columns:
   two tool cards in a fixed thirds-grid rendered as two squeezed cards beside an empty
   slot (Dan's 3.4k screen made it obvious — wrapped titles, clipped tags). auto-fill +
   minmax lets however many cards exist share the row at a readable width, on every
   consumer (dashboard tools/prompts, tools page, help actions, profile badges). */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

/* ─── PANEL ──────────────────────────────────────────────────────────────────
   Generic bordered panel used in dashboard two-column layout.
   ─────────────────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/* ─── ROSTER TABLE (admin) ────────────────────────────────────────────────────*/
.roster-meta {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

/* Wrap a wide table in this so it scrolls itself instead of clipping (or pushing the page into a
   horizontal scroll) on narrow screens. Reusable: several tables in the app are wider than 375px. */
.table-scroll {
  overflow-x: auto;
}

.roster-table {
  width: 100%;
  border-collapse: collapse;
}

.roster-table th,
.roster-table td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 0.5px solid var(--border-default);
  font-size: var(--text-base);
}

.roster-table th {
  color: var(--text-secondary);
  font-weight: 500;
}

.roster-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── LIST ITEMS (learn + spotlight) ─────────────────────────────────────────*/
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border-default);
}

.list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.list-item.clickable {
  cursor: pointer;
}

/* A list-item that is itself an anchor (e.g. Tools → "Prompts to try"). */
.list-item-link {
  text-decoration: none;
  color: inherit;
}

.list-item-link:hover {
  text-decoration: none;
}

.list-item.align-start {
  align-items: flex-start;
}

.li-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--chelsea-blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.li-icon i {
  font-size: 14px;
  color: var(--chelsea-blue);
}

/* Vendor logo in a list-item tile (Learn guides) — same optical size as the glyph. */
.li-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.li-icon.muted {
  background: var(--surface-secondary);
}

.li-icon.muted i {
  color: var(--text-secondary);
}

.li-body {
  flex: 1;
  min-width: 0;
}

.li-title {
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.li-title.muted {
  color: var(--text-secondary);
}

.li-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.li-status {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 500;
}

.li-status.done    { color: var(--status-success-text); }

/* Read state on Learn guides: a green tick chip instead of the word "Done" —
   reads at a glance and matches the affirmative-action colour language. */
.li-status.read-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--cfc-mint);
  color: var(--action-affirmative);
  font-size: 14px;
}
.li-status.next    { color: var(--chelsea-blue); }
.li-status.locked  { color: var(--text-secondary); }

/* ─── SPOTLIGHT ITEMS ────────────────────────────────────────────────────────*/
.spotlight-item {
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border-default);
}

.spotlight-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.spotlight-item .si-title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 3px;
  margin-top: 4px;
}

.spotlight-item .si-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ─── FILTER ROW ─────────────────────────────────────────────────────────────*/
.filter-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-pill {
  font-size: var(--text-sm);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  background: var(--surface-primary);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.filter-pill:hover:not(.active) {
  background: var(--surface-secondary);
}

.filter-pill.active {
  background: var(--chelsea-navy);
  color: var(--text-inverse);
  border-color: var(--chelsea-navy);
}

/* ─── MODAL ──────────────────────────────────────────────────────────────────
   Backdrop covers the viewport. Modal is centred.
   ─────────────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--content-padding);
}

.modal-backdrop.show {
  display: flex;
}

.modal {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 320px;
  max-width: 100%;
}

.modal-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.modal-icon-wrap i {
  font-size: 20px;
  color: var(--text-secondary);
}

.modal-title {
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: 6px;
}

.modal-badge {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--chelsea-blue-pale);
  color: var(--text-info);
  margin-bottom: 10px;
}

.modal-section-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 6px;
}

.modal-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}

.modal-use-list {
  list-style: none;
  padding: 0;
}

.modal-use-list li {
  font-size: var(--text-base);
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}

.modal-use-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chelsea-blue);
  margin-top: 6px;
  flex-shrink: 0;
}

.modal-btns {
  display: flex;
  gap: var(--space-2);
  margin-top: 16px;
}

.modal-btn-primary {
  flex: 1;
  padding: 9px;
  background: var(--chelsea-navy);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.12s;
}

.modal-btn-primary:hover {
  background: var(--chelsea-blue);
  color: var(--text-inverse);
  text-decoration: none;
}

.modal-btn-secondary {
  flex: 1;
  padding: 9px;
  background: transparent;
  color: var(--text-secondary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s;
}

.modal-btn-secondary:hover {
  background: var(--surface-secondary);
}

/* ─── PROMPT CARDS (Prompts library) ─────────────────────────────────────────*/
/* ─── PROMPT CARDS ───────────────────────────────────────────────────────────
   Collapsed, a card is a title, a one-line summary and a toggle — so the grid stays
   scannable at its existing two-column size. Expanding reveals the caution, the
   fill-in-the-blanks fields and the actions, growing the card's height in place
   rather than opening a modal or navigating away.
   ─────────────────────────────────────────────────────────────────────────── */
.prompt-card {
  align-self: start;   /* an expanded card must not stretch its neighbour */
}

.prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.prompt-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.prompt-title {
  font-weight: 500;
  color: var(--text-primary);
}

.prompt-summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.prompt-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.prompt-uses {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prompt-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.prompt-toggle:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.prompt-body {
  margin-top: 14px;
}

/* Gold, matching the incident card on Get help — the same "mind this" signal, and
   distinct from the blue .callout used for neutral asides. */
.prompt-caution {
  border-left: 3px solid var(--cfc-gold);
  background: var(--surface-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.prompt-fill-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.prompt-field {
  display: block;
  margin-bottom: 12px;
}

.prompt-field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--chelsea-blue);
  margin-bottom: 6px;
}

.prompt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-primary);
  resize: vertical;
}

.prompt-input:focus {
  outline: none;
  border-color: var(--chelsea-blue);
  box-shadow: 0 0 0 3px rgba(5, 20, 150, 0.07);
}

.prompt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The card's primary action is smaller than a page-level .btn-primary — it sits inside
   a card, so it shouldn't carry the same weight as a form submit. */
.prompt-actions .btn-primary {
  padding: 8px 14px;
  font-size: var(--text-sm);
}

.prompt-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  white-space: pre-wrap;
  line-height: 1.5;
  margin: var(--space-3) 0;
}

.prompt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
}

.prompt-copy-btn:hover {
  background: var(--surface-secondary);
}

.prompt-copy-btn.copied {
  color: var(--status-success-text);
  border-color: var(--status-success-text);
}

.tag-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── DETAIL HEADER (Tools / Learn drill-in views) ───────────────────────────*/
.back-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--chelsea-blue);
  font-family: var(--font-sans);
}

.back-link-btn:hover {
  text-decoration: underline;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.detail-header-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.detail-header-info {
  flex: 1;
  min-width: 0;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-title-row h1,
.detail-heading {
  font-size: var(--text-xl);
  font-weight: 500;
}

.dos-title    { color: var(--status-success-text); }
.donts-title  { color: var(--status-danger-text); }

/* ─── GLOBAL SEARCH ──────────────────────────────────────────────────────────
   Reuses .modal-backdrop/.modal (see MODAL section above) for the overlay
   shell; these rules add the search-specific input row and results list.
   ─────────────────────────────────────────────────────────────────────────── */
.search-modal {
  width: 520px;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--border-default);
}

.search-input-row i {
  font-size: 17px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-md);
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.search-results {
  max-height: 360px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 18px;
  color: var(--text-primary);
  border-bottom: 0.5px solid var(--border-subtle);
}

.search-result-item:hover {
  background: var(--surface-secondary);
  text-decoration: none;
}

.search-result-label {
  font-size: var(--text-base);
  font-weight: 500;
  flex: 1;
}

.search-result-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.search-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* ─── HIGHLIGHT / CALLOUT ────────────────────────────────────────────────────*/
.callout {
  background: var(--surface-secondary);
  border-left: 3px solid var(--chelsea-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: var(--space-3) 0;
  line-height: 1.5;
}

/* ─── LOADING STATE ──────────────────────────────────────────────────────────*/
.loading-shimmer {
  background: linear-gradient(90deg,
    var(--surface-secondary) 25%,
    var(--surface-tertiary) 50%,
    var(--surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── POLICY LAYOUT (sticky in-page TOC) ─────────────────────────────────────*/
/* ─── POLICY ─────────────────────────────────────────────────────────────────
   A policy is read under pressure ("can I paste this in?"), so the page leads with
   a hero and three rule cards, and only then the full text. Same crest treatment as
   the dashboard hero so the two read as one product.
   ─────────────────────────────────────────────────────────────────────────── */
.page-hero {
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin-bottom: 16px;
  overflow: hidden;   /* clips to the border-radius */
}

/* No width cap here on purpose: it used to be 56ch, which constrained the heading as well as
   the paragraph. The measure belongs on the paragraph alone — see .page-hero p below. */
.page-hero-copy {
  position: relative;
}

/* Reading progress inside the blue hero (Learn): light track, white fill,
   count label to the right — updates as guides are marked read. */
.hero-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.hero-progress-track {
  flex: 1;
  max-width: 340px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--hero-text);
  transition: width 0.4s ease;
}

.hero-progress-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--hero-text);
  white-space: nowrap;
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-text);
  margin-bottom: 8px;
}

.page-hero p {
  font-size: var(--text-base);
  color: var(--hero-text-sub);
  line-height: 1.55;
  /* Matches .hero-sub — see the note there for why 72ch rather than the old 56ch. */
  max-width: 72ch;
  text-wrap: pretty;
}

.rule-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

/* Three states, three edge colours — the border does the categorising so the label
   doesn't have to shout, and the cards stay scannable side by side. */
.rule-card {
  border-left: 3px solid var(--border-default);
}

.rule-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

.rule-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 6px;
}

.rule-always { border-left-color: var(--action-affirmative); }
.rule-always .rule-label { color: var(--action-affirmative); }
.rule-never { border-left-color: var(--action-destructive); }
.rule-never .rule-label { color: var(--action-destructive); }
.rule-ask { border-left-color: var(--cfc-gold); }
.rule-ask .rule-label { color: var(--cfc-gold); }

.policy-toc-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-left: 10px;
}

/* Numbers are tabular so 01–09 form a straight edge down the contents list. */
.toc-num,
.sec-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  opacity: 0.6;
  margin-right: 10px;
  font-weight: 400;
}

.policy-owner {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 14px;
  padding: 14px 10px 0;
  border-top: 0.5px solid var(--border-default);
}

.prose-numbered h2 {
  font-family: var(--font-serif);
  font-size: 21px;
  scroll-margin-top: 90px;   /* TOC jumps land below the sticky topbar */
}

.prose-numbered .sec-num {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* Blue markers tie the lists to the brand and read lighter than default discs. */
.prose-numbered ul {
  list-style: none;
  padding-left: 0;
}

.prose-numbered li {
  position: relative;
  padding-left: 18px;
}

.prose-numbered li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--chelsea-blue);
  opacity: 0.5;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.policy-table th,
.policy-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--border-default);
}

.policy-table th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 600;
}

.policy-table td {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .rule-cards {
    grid-template-columns: 1fr;
  }
}

.policy-layout {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.policy-toc {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.policy-toc a {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
}

.policy-toc a:hover {
  background: var(--surface-secondary);
  text-decoration: none;
}

.policy-toc a.active {
  color: var(--chelsea-blue);
  border-left-color: var(--chelsea-blue);
  font-weight: 500;
}

@media (max-width: 768px) {
  .policy-layout {
    flex-direction: column;
  }

  .policy-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ─── PROSE ──────────────────────────────────────────────────────────────────*/
.prose {
  max-width: 680px;
  line-height: 1.7;
}

.prose h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-3);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.prose ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

/* ─── STATS ──────────────────────────────────────────────────────────────────*/
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stats-grid.single {
  grid-template-columns: 1fr;
  max-width: 220px;
}

.stat-card {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--chelsea-blue);
  display: block;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.stat-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ─── BREAKDOWN BARS (value-type mix on Impact) ───────────────────────────────*/
.breakdown-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.breakdown-label {
  width: 90px;
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--chelsea-blue);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.breakdown-count {
  width: 28px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─── MONTHLY BAR CHART (Impact) ─────────────────────────────────────────────*/
.month-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 140px;
  padding-top: var(--space-2);
}

.month-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-2);
}

.month-chart-bar {
  width: 100%;
  max-width: 28px;
  background: var(--chelsea-blue);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 2px;
}

.month-chart-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ─── ROADMAP ─────────────────────────────────────────────────────────────────*/
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.roadmap-col-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.roadmap-item {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-left: 3px solid var(--chelsea-blue);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.roadmap-item.now    { border-left-color: var(--status-success-text); }
.roadmap-item.next   { border-left-color: var(--chelsea-blue); }
.roadmap-item.later  { border-left-color: var(--dept-finance-text); }

/* ─── FAQ ────────────────────────────────────────────────────────────────────*/
/* ─── GET HELP ───────────────────────────────────────────────────────────────
   FAQ column plus a contacts rail. The rail is fixed-width rather than a
   fraction: contact names and addresses have a natural length, and letting the
   column stretch on a wide screen just spreads three short cards thin.
   ─────────────────────────────────────────────────────────────────────────── */
.help-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.help-actions {
  margin-bottom: var(--space-6);
}

.help-action {
  display: block;
  text-decoration: none;
  color: inherit;
}

.help-action:hover {
  text-decoration: none;
}

.help-action-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.help-action-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.faq-count {
  font-size: var(--text-sm);
}

/* Tabular figures so 01–08 sit in a true column rather than drifting by digit width. */
.faq-num {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  flex-shrink: 0;
  margin-right: 14px;
}

.help-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aside-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.help-aside p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.help-aside a {
  font-size: var(--text-sm);
}

/* Contacts are the one thing on this page someone is looking for when something has
   gone wrong, so they get the blue card — the page's single point of emphasis. */
.contacts-card {
  background: var(--chelsea-blue);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.contacts-card .aside-label {
  color: var(--chelsea-blue-mid);
}

.contact + .contact {
  margin-top: 16px;
}

.contact-role {
  font-size: var(--text-sm);
  color: var(--chelsea-blue-mid);
  margin-bottom: 2px;
}

.contact-name {
  font-weight: 600;
  color: var(--text-inverse);
  margin-bottom: 2px;
}

.contact-link {
  font-size: var(--text-sm);
  color: var(--chelsea-blue-light);
  text-decoration: none;
  word-break: break-word;
}

.contact-link:hover {
  color: var(--text-inverse);
  text-decoration: underline;
}

/* Gold edge marks the one card that's about something going wrong — distinct from the
   blue contacts card without shouting like a red alert on a page nobody is panicking on. */
.incident-card {
  border-left: 3px solid var(--cfc-gold);
}

@media (max-width: 768px) {
  .help-layout {
    grid-template-columns: 1fr;   /* contacts fall under the questions */
  }
}

.faq-list {
  border-top: 0.5px solid var(--border-default);
  margin-bottom: var(--space-6);
}

.faq-item {
  border-bottom: 0.5px solid var(--border-default);
}

.faq-item summary {
  display: flex;
  /* The number and the question sit together on the left; only the +/× is pushed
     right — so `gap` + margin-auto on the icon, not space-between across all three. */
  align-items: center;
  gap: 0;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-left: auto;   /* pushes only the toggle to the far right */
  padding-left: 16px;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  font-size: var(--text-base);
  color: var(--text-secondary);
  padding-bottom: var(--space-4);
  line-height: 1.6;
}

/* ─── BUTTON ─────────────────────────────────────────────────────────────────*/
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--chelsea-blue);
  color: var(--text-inverse);
  /* Transparent rather than none, so it shares an identical box with .btn-secondary — otherwise a
     bordered secondary sits 2px taller and the two don't line up when paired. */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}

.btn-primary:hover {
  background: var(--text-info);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* The quieter partner to .btn-primary, for the secondary action in a pair (Cancel next to Submit).
   It was in use in the markup before it existed here, so those buttons rendered with default
   browser styling — matching .btn-primary's box exactly is what makes a pair line up. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}

.btn-secondary:hover {
  background: var(--surface-secondary);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── ADMIN CONSOLE ──────────────────────────────────────────────────────────
   The overview reads top-down as a health report: one joined KPI strip, then the
   trend and the ranking panels. Sub-lines under KPIs are derived figures only.
   ─────────────────────────────────────────────────────────────────────────── */
.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-sync {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.admin-sync-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* One card, internal dividers — five figures that read as a single summary. */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.kpi-cell {
  padding: 16px 18px;
}

.kpi-cell + .kpi-cell {
  border-left: 0.5px solid var(--border-default);
}

.kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 3px;
  min-height: 1em;   /* cells stay level whether or not a sub-line rendered */
}

/* Trend chart wide, tools narrow — the ranking has three rows, the trend has eight bars. */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
}

.admin-peak {
  font-size: var(--text-sm);
}

.tool-usage-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.rank-num {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  opacity: 0.6;
  flex-shrink: 0;
  width: 20px;
}

/* Ranked lists split into two columns on wide screens — 20 single rows hid the shape. */
.dept-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}

.admin-show-all {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}

.month-chart-count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.month-chart-bar.is-peak {
  background: var(--chelsea-blue);   /* the peak bar reads darker than its neighbours */
}

.funnel-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 6px 0 10px;
}

.funnel-cell + .funnel-cell {
  border-left: 0.5px solid var(--border-default);
  padding-left: 14px;
}

.funnel-rejected {
  color: var(--action-destructive);
}

/* Goal bars in gold — a different question from adoption, so a different colour. */
.goal-row .bar-fill {
  background: var(--cfc-gold);
}

@media (max-width: 900px) {
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
  .kpi-cell + .kpi-cell {
    border-left: 0;
    border-top: 0.5px solid var(--border-default);
  }
  .admin-grid,
  .dept-columns {
    grid-template-columns: 1fr;
  }
}

/* ─── ONBOARDING IDENTITY FACTS ──────────────────────────────────────────────
   Read-only rows, deliberately not styled as inputs: identity comes from the CFC
   directory (the API stamps it from Entra on save), and a disabled-looking input
   invites "why can't I edit this?" where a plain fact does not.
   ─────────────────────────────────────────────────────────────────────────── */
.ob-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.ob-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}

.ob-fact-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-secondary);
}

.ob-fact-value {
  font-size: var(--text-base);
  color: var(--text-primary);
  overflow-wrap: anywhere;   /* long emails wrap instead of overflowing the tile */
}

@media (max-width: 768px) {
  .ob-facts {
    grid-template-columns: 1fr;
  }
}

/* ─── DASHBOARD (main + rail) ────────────────────────────────────────────────
   Two-speed layout: the main column is the doing surface (hero, tools, prompts),
   the rail is the glancing surface (my request, my learning, help, news). The rail
   is fixed-width for the same reason the approvals panel is — its content has a
   natural size, and stretching three short cards across a 3.4k display serves no one.
   ─────────────────────────────────────────────────────────────────────────── */
/* One column. The 300px rail was retired once its three cards had gone their separate ways:
   Continue learning moved to a full-width band, Need a hand was removed as duplicated by the
   nav, and Your request moved into the main flow. Keeping a two-track grid for one
   conditionally-visible card left a dead 300px gutter for every user without a request. */
.dash-layout {
  display: grid;
  gap: 20px;
}

.hero-access {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--chelsea-blue-light);
}

/* ─── LEARN GUIDES ───────────────────────────────────────────────────────────
   Reading surface for the four guides: section cards with worked examples. The
   ✓/✗ lists carry the do-this/never-this teaching, so the mark is semantic colour,
   not decoration. */
.guide-section-h {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 8px;
}

.guide-section-body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}

.guide-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  line-height: 1.5;
}

.guide-mark {
  font-weight: 700;
  flex-shrink: 0;
}
.guide-list-item.good .guide-mark { color: var(--action-affirmative); }
.guide-list-item.bad .guide-mark  { color: var(--action-destructive); }

.guide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.guide-foot-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

.guide-foot-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Getting started, one step at a time (design canvas): the banner shows only the
   current step; its CTA records completion and moves the sequence on. Completing all
   three turns the banner into a slim green confirmation rather than removing it. */
.next-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.next-step-num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--chelsea-blue-pale);
  color: var(--chelsea-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.next-step-copy { flex: 1; min-width: 0; }

.next-step-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.next-step-title { font-weight: 500; }

.next-step-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.next-step-cta { flex-shrink: 0; }

.next-step.complete {
  background: var(--status-success-bg, var(--surface-secondary));
  border-color: var(--action-affirmative);
}

.next-step.complete .next-step-num {
  background: var(--action-affirmative);
  color: var(--text-inverse);
}

/* Prompts-to-try cards: category encoded as a top edge, not a fill — quiet until hovered. */
.ptw-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--border-strong);
}
.ptw-card:hover { text-decoration: none; }
.ptw-productivity { border-top-color: var(--chelsea-blue); }
.ptw-ideation     { border-top-color: var(--cfc-gold); }
.ptw-review       { border-top-color: var(--action-affirmative); }

.ptw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ptw-cat {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-secondary);
}

.ptw-uses {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ptw-title { font-weight: 500; margin-bottom: 4px; }

.ptw-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ptw-open {
  font-size: var(--text-sm);
  color: var(--chelsea-blue);
  font-weight: 500;
}

/* ── Rail cards ── */
.rail-card .aside-label { margin-bottom: 10px; }

.rail-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rail-request-title { font-weight: 600; margin-top: 2px; }

.rail-request-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 2px 0 10px;
}

/* Three-segment progress: submitted → approved → granted. */
.req-steps { display: flex; gap: 6px; margin-bottom: 10px; }
.req-step { flex: 1; }
.req-step-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--border-default);
}
.req-step.done .req-step-bar { background: var(--chelsea-blue); }
.req-step-label {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.req-step.done .req-step-label { color: var(--text-primary); }

.rail-request-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.rail-cta { width: 100%; justify-content: center; }

/* Your request, out of the 300px rail and into the main column. Same problem the learning
   band had, so the same answer: text left, progress + CTA right, rather than a narrow card's
   stacked layout stretched across the full width. Three-segment bars spanning ~900px read as
   a loading bar, and a 100%-width button gives away a component in the wrong slot. */
.rail-card.request-wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label steps cta"
    "title steps cta"
    "meta  steps cta"
    "note  steps cta";
  column-gap: var(--space-6);
  align-items: center;
}

.request-wide .rail-label-row      { grid-area: label; }
.request-wide .rail-request-title  { grid-area: title; }
.request-wide .rail-request-meta   { grid-area: meta; }
.request-wide .rail-request-note   { grid-area: note; margin-bottom: 0; }
.request-wide .req-steps           { grid-area: steps; width: 240px; margin-bottom: 0; }
.request-wide .rail-cta            { grid-area: cta; width: auto; white-space: nowrap; }

/* Narrow screens: the row has nowhere to go — fall back to the stacked card. */
@media (max-width: 760px) {
  .rail-card.request-wide { display: block; }
  .request-wide .req-steps { width: auto; margin-bottom: 10px; }
  .request-wide .rail-request-note { margin-bottom: 12px; }
  .request-wide .rail-cta { width: 100%; }
}

/* Learning card: the rail's one dark moment — the thing we most want clicked. */
.rail-learn {
  background: var(--cfc-midnight, var(--chelsea-blue));
  border-radius: var(--radius-lg);
  padding: 16px;
}
.rail-learn-label { color: var(--chelsea-blue-mid); }
.rail-learn-title { font-weight: 600; color: var(--text-inverse); margin-bottom: 4px; }
.rail-learn-sub {
  font-size: var(--text-sm);
  color: var(--chelsea-blue-light);
  line-height: 1.5;
  margin-bottom: 12px;
}
.rail-learn-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.rail-learn-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.rail-learn-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--text-inverse);
}
.rail-learn-count {
  font-size: var(--text-xs);
  color: var(--chelsea-blue-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rail-learn-cta { width: 100%; justify-content: center; background: var(--surface-primary); color: var(--chelsea-blue); border-color: var(--surface-primary); }
.rail-learn-cta:hover:not(:disabled) { background: rgba(255, 255, 255, 0.9); color: var(--chelsea-blue); }

/* All guides read: the dark card turns celebration-green, bar and all. */
.rail-learn.complete {
  background: var(--action-affirmative);
}
.rail-learn.complete .rail-learn-label,
.rail-learn.complete .rail-learn-sub,
.rail-learn.complete .rail-learn-count {
  color: rgba(255, 255, 255, 0.85);
}
.rail-learn.complete .rail-learn-track { background: rgba(255, 255, 255, 0.3); }
.rail-learn.complete .rail-learn-cta { color: var(--action-affirmative); }
.rail-learn.complete .rail-learn-cta:hover:not(:disabled) { color: var(--action-affirmative); }

/* The same card, promoted out of the 300px rail to a full-width band at the foot of the
   dashboard. Everything here relaxes sizing that was tuned for that rail: at full width the
   16px padding is tight, a progress bar stretching the whole dashboard reads as a loading
   bar, and a 100%-width button is the giveaway that a narrow component moved house. */
.rail-learn.learn-wide {
  padding: 20px 24px;
  /* Use the width the band now occupies: text on the left, progress + CTA on the right,
     vertically centred — stacked-in-a-corner reads as a rail card that forgot it moved. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label label label"
    "title progress cta"
    "sub   progress cta";
  column-gap: var(--space-6);
  align-items: center;
}

.learn-wide .rail-learn-label { grid-area: label; }
.learn-wide .rail-learn-title { grid-area: title; margin-bottom: 2px; }
.learn-wide .rail-learn-sub   { grid-area: sub; margin-bottom: 0; }
.learn-wide .rail-learn-progress { grid-area: progress; }
.learn-wide .rail-learn-cta   { grid-area: cta; }

.learn-wide .rail-learn-track {
  width: 240px;
  max-width: 240px;
  /* Segment the track into one dash per module instead of a single thin line — the JS fill
     percentage still works unchanged, the mask just slices both track and fill into dashes.
     The segment count is DERIVED, not hard-coded: index.html sets --learn-segments from
     modules.length beside the fill it already computes. Adding a guide is a content edit to
     modules.json, and nobody editing that JSON would think to come and change a stop here.
     The 4 below is only a fallback for the markup rendering before the script runs. */
  --learn-segments: 4;
  --learn-segment: calc(100% / var(--learn-segments));
  -webkit-mask: repeating-linear-gradient(90deg,
      black 0, black calc(var(--learn-segment) - 5px),
      transparent calc(var(--learn-segment) - 5px), transparent var(--learn-segment));
  mask: repeating-linear-gradient(90deg,
      black 0, black calc(var(--learn-segment) - 5px),
      transparent calc(var(--learn-segment) - 5px), transparent var(--learn-segment));
  height: 6px;
  border-radius: 3px;
}

.learn-wide .rail-learn-cta {
  width: auto;
  white-space: nowrap;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Narrow screens: the row layout has nowhere to go — fall back to the stacked card. */
@media (max-width: 760px) {
  .rail-learn.learn-wide { display: block; }
  .learn-wide .rail-learn-sub { margin-bottom: 12px; }
  .learn-wide .rail-learn-progress { margin-bottom: 12px; }
}

.rail-news-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 0.5px solid var(--border-default);
}
.rail-news-item:first-child { border-top: 0; padding-top: 0; }
.rail-news-date {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.rail-news-title { font-size: var(--text-sm); font-weight: 500; }
.rail-news-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}

/* ─── APPROVALS (admin) ──────────────────────────────────────────────────────
   Master–detail: the queue on the left, one request's decision on the right. The
   old page stacked full decision forms per card, so two open requests meant two
   half-scrolled forms; here exactly one decision is in front of the admin at a time.
   ─────────────────────────────────────────────────────────────────────────── */
.approvals-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.approvals-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.approvals-stat {
  min-width: 118px;
}

/* The one number that means work is waiting gets the accent; the rest stay quiet. */
.stat-accent {
  color: var(--cfc-gold);
}

.approvals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  margin-top: 4px;
}

.req-count {
  font-size: var(--text-sm);
  margin-bottom: 8px;
}

/* Count chip inside a filter pill — quiet on idle pills, legible on the active one. */
.filter-pill .pill-count {
  margin-left: 7px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.request-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Queue rows are <button>s — the whole row selects, and keyboard users get it free. */
.req-item {
  background: var(--surface-primary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.req-item:hover {
  border-color: rgba(5, 20, 150, 0.35);
}

.req-item.selected {
  border-color: var(--chelsea-blue);
  box-shadow: 0 0 0 3px rgba(5, 20, 150, 0.07), var(--shadow-card);
}

.req-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.req-item-name {
  font-weight: 500;
  color: var(--text-primary);
}

.req-item-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.req-item-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.decision-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;   /* the decision stays put while a long queue scrolls */
  top: var(--space-4);
}

.decision-hero {
  background: var(--chelsea-blue);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.decision-hero-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--chelsea-blue-mid);
  margin-bottom: 8px;
}

.decision-hero-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--hero-text);
  margin-bottom: 2px;
}

.decision-hero-sub {
  font-size: var(--text-sm);
  color: var(--chelsea-blue-light);
  margin-bottom: 8px;
}

.decision-hero-meta {
  font-size: var(--text-sm);
  color: var(--chelsea-blue-mid);
  line-height: 1.5;
}

.decision-section .aside-label {
  margin-bottom: 10px;
}

.vc-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.decision-other {
  border-top: 0.5px solid var(--border-default);
  padding-top: 10px;
  margin-top: 10px;
}

/* Licence options: radio semantics on buttons — one choice, visibly held. */
.alloc-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.alloc-option:hover {
  border-color: rgba(5, 20, 150, 0.35);
}

.alloc-option.selected {
  border-color: var(--chelsea-blue);
  background: var(--chelsea-blue-pale);
  color: var(--chelsea-blue);
  font-weight: 500;
}

.decision-reason-label {
  margin-top: 14px;
}

.decision-note {
  margin-bottom: 12px;
}

.decision-actions {
  display: flex;
  gap: 10px;
}

.decision-actions .btn-primary {
  flex: 1;
  justify-content: center;
}

.btn-decline {
  color: var(--action-destructive);
  border-color: var(--border-strong);
}

.btn-decline:hover:not(:disabled) {
  color: var(--action-destructive);
}

@media (max-width: 900px) {
  .approvals-layout {
    grid-template-columns: 1fr;   /* panel drops below the queue */
  }
  .decision-panel {
    position: static;
  }
}

/* ─── SEAMLESS NAVIGATION ────────────────────────────────────────────────────
   Cross-document view transitions are DISABLED (2026-08-15): Edge — the fleet's
   default browser — animates the fade from a first frame painted before the
   JS-injected sidebar exists, flashing a bare strip mid-transition. Chrome honours
   the render-blocking shell script and was clean; Edge does not (verified on a
   fresh machine, so not cache). Until Edge behaves, no transition beats a broken
   one — navigation speed comes from hover prerendering + long-cached assets,
   which work identically everywhere. To re-enable when Edge catches up:
   @view-transition { navigation: auto; } plus view-transition-name on
   .sidebar/.topbar and a 0.16s ::view-transition-old/new(root) duration.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── BOOT SPLASH ────────────────────────────────────────────────────────────
   Kills the login flash: pages painted, THEN MSAL decided nobody was signed in and
   redirected — so users saw a flash of app over the top of a bounce to login (and a
   half-authed flash on the way back). Every page ships <body class="booting">, which
   holds an opaque brand screen over everything until shell.js confirms a signed-in
   user. If MSAL redirects instead, the splash simply stays up until the browser
   navigates — the user sees brand → login, never app → login.

   Pure CSS (pseudo-elements) because the overlay must exist at FIRST PAINT — module
   scripts arrive over the network, so injected markup is always too late. The 0.15s
   appearance delay means a fast cache-hit auth (localhost, warm MSAL) removes the
   class before the splash ever becomes visible — no brand flash on every navigation.
   ─────────────────────────────────────────────────────────────────────────── */
/* The app's real children are hidden from the very first paint — the overlay alone
   isn't enough, because it fades in on a 0.15s delay and the page showed through the
   transparent window (the exact flash this exists to remove, round two). Child selector
   on purpose: it can't touch the ::before/::after pseudo-elements that ARE the splash. */
body.booting > * {
  visibility: hidden;
}

body.booting::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--sidebar-bg);
  z-index: calc(var(--z-modal) + 10);
  opacity: 0;
  animation: boot-splash-in 0.2s ease 0.15s forwards;
}

body.booting::after {
  content: "AI Toolkit";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: calc(var(--z-modal) + 11);
  /* Lion above the wordmark, both centred as one lockup. */
  background: url("/assets/img/RampantLion_NoCuts_White_RGB.svg") no-repeat top center / 48px auto;
  padding-top: 64px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hero-text);
  opacity: 0;
  animation: boot-splash-pulse 1.6s ease 0.15s infinite;
}

@keyframes boot-splash-in {
  to { opacity: 1; }
}

@keyframes boot-splash-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.booting::after {
    animation: boot-splash-in 0.2s ease 0.15s forwards;   /* visible, just not pulsing */
  }
}

/* ─── SHARED HOVER GLOW ──────────────────────────────────────────────────────
   One hover language across the product: a soft brand-blue halo, a blue-tinted cast
   shadow and a small lift. Defined once here for every control on a light surface —
   .tool-card carries its own copy (it lifts 2px as the larger target), and .ha-btn
   uses the white-on-blue variant because a blue glow can't be seen on the hero.
   Grouped rather than repeated per class so the effect can't drift between buttons.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.prompt-copy-btn,
.back-link-btn,
.help-action,
.ptw-card {
  transition: background 0.18s, border-color 0.18s, color 0.18s,
              box-shadow 0.18s, transform 0.18s;
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.prompt-copy-btn:hover:not(:disabled),
.back-link-btn:hover,
.help-action:hover,
.ptw-card:hover {
  box-shadow:
    0 0 0 3px rgba(5, 20, 150, 0.07),
    0 8px 20px rgba(5, 20, 150, 0.16),
    0 2px 6px rgba(5, 20, 150, 0.08);
  transform: translateY(-1px);
}

/* Buttons are frequently <a> elements (next-step CTA, rail CTAs) and were inheriting the
   UA's hover underline — a link affordance on something styled as a button. The glow IS
   the hover affordance; underlines never appear on button-shaped controls. */
.btn-primary,
.btn-secondary,
.btn-primary:hover,
.btn-secondary:hover,
.rail-learn-cta,
.rail-learn-cta:hover {
  text-decoration: none;
}

/* Focus needs a hard edge, not a soft halo — the glow alone fails as an indicator. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.prompt-copy-btn:focus-visible,
.back-link-btn:focus-visible,
.help-action:focus-visible,
.ptw-card:focus-visible {
  outline: 2px solid var(--chelsea-blue);
  outline-offset: 2px;
}

/* A disabled button must look inert: no glow, no lift, no pointer. */
.btn-primary:disabled,
.btn-secondary:disabled,
.prompt-copy-btn:disabled {
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled),
  .prompt-copy-btn:hover:not(:disabled),
  .back-link-btn:hover,
  .help-action:hover,
  .ptw-card:hover,
  .ha-btn:hover {
    transform: none;   /* the glow stays; the movement goes */
  }
}

/* ─── QUIZ ───────────────────────────────────────────────────────────────────*/
.quiz-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quiz-question-number {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.quiz-question-text {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color 0.12s, background 0.12s;
}

.quiz-option:hover {
  border-color: var(--chelsea-blue-mid);
  background: var(--chelsea-blue-pale);
}

.quiz-option input[type="radio"] {
  accent-color: var(--chelsea-blue);
  flex-shrink: 0;
}

.quiz-option:has(input:checked) {
  border-color: var(--chelsea-blue);
  background: var(--chelsea-blue-pale);
}

.quiz-option input[type="checkbox"] {
  accent-color: var(--chelsea-blue);
  flex-shrink: 0;
}

/* ─── ONBOARDING ─────────────────────────────────────────────────────────────*/
/* Reset the native fieldset chrome so it reads as a plain question group. */
.ob-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  min-width: 0;
}

/* Yes/No sit side by side; goal tags wrap as chips. */
.ob-yesno {
  flex-direction: row;
}

.ob-yesno .quiz-option {
  flex: 1;
  justify-content: center;
}

#ob-goal-tags {
  flex-direction: row;
  flex-wrap: wrap;
}

.quiz-submit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.quiz-validation-msg {
  font-size: var(--text-sm);
  color: var(--status-warning-text);
}

/* ─── FORM FIELDS (story submission) ──────────────────────────────────────────*/
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Inline "I confirm…" control on an approval card. A label so the text is part of the hit area. */
.discuss-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  cursor: pointer;
}

/* Advisory note under a field — informational, not a validation error (which uses .error-banner
   / .quiz-validation), so it stays muted and never implies the input is wrong. */
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.form-input,
.form-textarea,
.form-select {
  padding: var(--space-3);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-primary);
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--chelsea-blue);
}

/* Inline decision-note field in the Approvals action cell — sits beside the buttons. */
.note-input {
  width: 12rem;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-right: var(--space-2);
  font-size: var(--text-sm);
}

/* Licence-request value cases (onboarding + approvals) and the approver's action row. */
.value-case {
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.request-actions .tool-select,
.request-actions .note-input {
  width: auto;
  flex: 1 1 12rem;
  margin-right: 0;
}

.form-textarea {
  resize: vertical;
  min-height: 88px;
}

/* ─── UTILITY CLASSES ────────────────────────────────────────────────────────*/
.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;
}

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-secondary); opacity: 0.6; }
.font-medium    { font-weight: 500; }
.ml-2 { margin-left: var(--space-2); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────
   Component layout adjustments for narrow viewports.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    flex-direction: column;
  }

  .progress-card {
    min-width: unset;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .ha-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Learn: "Copilot or ChatGPT?" comparison card ------------------------------- */
/* Static page furniture answering the arrival question before it's asked. The table
   scrolls inside its own wrapper on narrow screens — the page never scrolls sideways. */

.compare-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.compare-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.compare-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.compare-wrap { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* below this the wrapper scrolls; the columns stay readable */
}

.compare-table th,
.compare-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  vertical-align: top;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-rowlabel {
  color: var(--text-secondary);
  font-weight: 500;
  width: 12ch;
}

.compare-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.compare-tier {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.compare-tier-free { color: var(--action-affirmative); }

.compare-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Learn: "From the tool makers" external links -------------------------------- */

.makers-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.makers-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
}

.makers-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.makers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

/* Hover speaks the tool-card language (glow + lift + no underline) — the shared rules
   live with .tool-card:hover above; only layout is defined here. */
.maker-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.maker-text { display: flex; flex-direction: column; min-width: 0; }

.maker-title { font-weight: 600; font-size: var(--text-sm); }

.maker-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maker-link .ti { margin-left: auto; color: var(--text-secondary); flex-shrink: 0; }

/* --- Admin: roster controls (tool pills + search side by side) ------------------- */

.roster-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.roster-controls .filter-row { margin-bottom: 0; }

.roster-search {
  margin-left: auto;
  min-width: 260px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-raised, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.roster-search:focus {
  outline: none;
  border-color: var(--text-secondary);
}

@media (max-width: 640px) {
  .roster-search { margin-left: 0; width: 100%; }
}