/* ============================================================
   SCHEDMATE GUIDE — DESIGN SYSTEM

   Builds on the existing dashboard tokens (--sm-card, --sm-border,
   --sm-primary, --sm-text, --sm-muted, --sm-radius) so the Guide reads
   as part of SchedMate rather than a bolted-on help site. Guide-local
   tokens below only add what the shared set does not already cover.

   Constraints this file is written to hold:

     - every animation is opt-out via prefers-reduced-motion, and the
       reduced-motion block at the end disables them wholesale rather
       than per-rule, so a new animation cannot forget to opt in;
     - no rule sets a width that can exceed its container, and long
       content (article prose, the flow diagram, the glossary) either
       wraps or scrolls inside its own box — the page body must never
       scroll sideways;
     - focus is always visible, and never removed without a replacement;
     - light and dark are both explicit. Every colour comes from a token
       that has a value in each theme.
============================================================ */

:root {
  --guide-surface: var(--sm-card, #fff);
  --guide-surface-2: var(--sm-card2, rgba(15, 23, 42, 0.04));
  --guide-border: var(--sm-border, rgba(15, 23, 42, 0.1));
  --guide-border-strong: var(--sm-border-strong, rgba(15, 23, 42, 0.16));
  --guide-text: var(--sm-text, #0f172a);
  --guide-muted: var(--sm-muted, rgba(15, 23, 42, 0.62));
  --guide-accent: var(--sm-primary, #5b5cff);
  --guide-accent-2: var(--sm-primary2, #22d3ee);
  --guide-on-accent: #fff;
  --guide-ok: var(--sm-good, #16a34a);
  --guide-warn: var(--sm-warn, #f59e0b);
  --guide-ok-bg: rgba(22, 163, 74, 0.12);
  --guide-warn-bg: rgba(245, 158, 11, 0.14);
  --guide-info-bg: rgba(91, 92, 255, 0.1);

  /* Accent and status colours used as TEXT need more contrast than the
     same hues used as a fill or a border. The shared --sm-primary reads
     at 4.1:1 on the Guide's tinted surfaces, which fails WCAG AA for the
     small text in badges and kickers, so the Guide keeps its own text
     variants. These are darker (light theme) or lighter (dark theme)
     shades of the same hue — the palette is unchanged, only the
     luminance moves far enough to be readable. --guide-accent itself is
     untouched, because as a button fill it is fine: white on #5b5cff is
     4.75:1. Worst measured ratio for each token is noted beside it. */
  --guide-accent-text: #4344e0;   /* 5.81 on the info tint */
  --guide-badge-ok: #0f6b31;      /* 5.75 on the ok tint */
  --guide-badge-warn: #92400e;    /* 6.32 on the warn tint */
  --guide-badge-info: #3a3bc4;    /* 7.01 on the info tint */
  --guide-radius: var(--sm-radius, 18px);
  --guide-radius-sm: var(--sm-radius2, 14px);
  --guide-shadow: var(--sm-shadow2, 0 12px 32px rgba(15, 23, 42, 0.1));
  --guide-motion: 220ms;
  --guide-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

html.dark,
body.dark,
:root[data-theme="dark"] {
  --guide-ok-bg: rgba(34, 197, 94, 0.16);
  --guide-warn-bg: rgba(251, 191, 36, 0.16);
  --guide-info-bg: rgba(124, 124, 255, 0.18);
  --guide-on-accent: #0b0f19;   /* 5.64 on the accent fill */

  --guide-accent-text: #a5a6ff;  /* 6.20 on the info tint */
  --guide-badge-ok: #4ade80;     /* 7.68 on the ok tint */
  --guide-badge-warn: #fcd34d;   /* 8.71 on the warn tint */
  --guide-badge-info: #a5a6ff;   /* 6.20 on the info tint */
}

/* ---------- Layout shell ---------- */
.guide-root {
  color: var(--guide-text);
  /* The Guide never contributes to horizontal page scroll: anything that
     cannot fit is handled inside its own component. */
  max-width: 100%;
  overflow-x: clip;
}

.guide-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--sm-max, 1200px);
  margin: 0 auto;
  padding: 4px 0 48px;
}

.guide-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Screen-reader-only text, used by the checklist status icons. */
.guide-root .sr-only,
.guide-checklist .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero + search ---------- */
.guide-hero {
  position: relative;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius);
  background:
    radial-gradient(900px 320px at 12% -20%, var(--guide-info-bg), transparent 65%),
    var(--guide-surface);
  box-shadow: var(--guide-shadow);
  padding: clamp(20px, 4vw, 40px);
  animation: guide-rise var(--guide-motion) var(--guide-ease) both;
}

.guide-hero-title {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Route changes move focus to the new heading so keyboard and screen
   reader users land on the content. The ring is deliberately tighter and
   rounder than a control's: at a 6px offset a full-width h1 draws a long
   rectangle that reads as a text input, which is actively confusing
   directly above the real search field. */
.guide-hero-title:focus-visible,
.guide-collection-title:focus-visible,
.guide-article-title:focus-visible,
.guide-empty-title:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 3px;
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
}

.guide-hero-sub {
  margin: 8px 0 0;
  color: var(--guide-muted);
  font-size: 15px;
  max-width: 60ch;
}

.guide-search {
  margin-top: 22px;
}

.guide-search-label {
  display: block;
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 650;
  margin-bottom: 10px;
}

.guide-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--guide-border-strong);
  border-radius: 999px;
  background: var(--guide-surface);
  padding: 4px 8px 4px 16px;
  transition: border-color var(--guide-motion) var(--guide-ease),
    box-shadow var(--guide-motion) var(--guide-ease);
}

.guide-search-field:focus-within {
  border-color: var(--guide-accent);
  box-shadow: 0 0 0 4px var(--guide-info-bg);
}

.guide-search-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--guide-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-search-input {
  flex: 1 1 auto;
  min-width: 0; /* lets the input shrink instead of forcing the row wide */
  border: 0;
  background: transparent;
  color: var(--guide-text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  padding: 12px 0;
}

/* The pill is one composite control: the icon, the field and the clear
   button read as a single widget, so focus is shown once on the wrapper
   (.guide-search-field:focus-within above) rather than twice. The inner
   outline is suppressed only in that exact context, so an input that
   somehow renders outside the wrapper keeps the browser default. */
.guide-search-field:focus-within .guide-search-input {
  outline: none;
}

.guide-search-input::-webkit-search-cancel-button {
  display: none;
}

.guide-search-clear {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--guide-surface-2);
  color: var(--guide-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.guide-search-hint {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--guide-muted);
}

.guide-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.guide-chip {
  border: 1px solid var(--guide-border);
  background: var(--guide-surface-2);
  color: var(--guide-text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--guide-motion) var(--guide-ease),
    transform var(--guide-motion) var(--guide-ease);
}

.guide-chip:hover {
  border-color: var(--guide-accent);
  transform: translateY(-1px);
}

/* ---------- Filters ---------- */
.guide-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.guide-filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.guide-filter-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--guide-muted);
}

.guide-filter select {
  border: 1px solid var(--guide-border-strong);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  color: var(--guide-text);
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  max-width: 100%;
}

.guide-result-count {
  margin: 0 0 9px;
  font-size: 13px;
  color: var(--guide-muted);
  margin-inline-start: auto;
}

/* ---------- Section headings ---------- */
.guide-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: guide-rise var(--guide-motion) var(--guide-ease) both;
}

.guide-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-section-title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.guide-section-sub {
  margin: 0;
  font-size: 14px;
  color: var(--guide-muted);
}

/* ---------- Cards ---------- */
.guide-grid {
  display: grid;
  /* minmax(0, …) rather than a fixed min: at 320px a 240px minimum plus
     grid gap still overflows, and this is the rule that prevents it. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.guide-grid--collections {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.guide-grid--workflows {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: start;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  color: var(--guide-text);
  padding: 16px;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  transition: transform var(--guide-motion) var(--guide-ease),
    border-color var(--guide-motion) var(--guide-ease),
    box-shadow var(--guide-motion) var(--guide-ease);
}

.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--guide-border-strong);
  box-shadow: var(--guide-shadow);
}

.guide-card:focus-visible,
.guide-chip:focus-visible,
.guide-btn:focus-visible,
.guide-link:focus-visible,
.guide-crumb:focus-visible,
.guide-learn-btn:focus-visible,
.guide-toc-link:focus-visible,
.guide-related-item:focus-visible,
.guide-search-clear:focus-visible,
.guide-filter select:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 2px;
}

.guide-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guide-accent-text);
}

.guide-card-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.guide-card-summary {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--guide-muted);
}

.guide-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.guide-card-matched {
  font-size: 11.5px;
  color: var(--guide-muted);
  align-self: center;
}

.guide-card-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--guide-info-bg);
}

.guide-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--guide-accent-text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-card-count {
  font-size: 12px;
  color: var(--guide-muted);
}

/* ---------- Badges ---------- */
.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
}

.guide-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-badge--ok {
  background: var(--guide-ok-bg);
  color: var(--guide-badge-ok);
}

.guide-badge--warn {
  background: var(--guide-warn-bg);
  color: var(--guide-badge-warn);
}

.guide-badge--info {
  background: var(--guide-info-bg);
  color: var(--guide-badge-info);
}

.guide-badge--plain {
  background: var(--guide-surface-2);
  color: var(--guide-muted);
  border-color: var(--guide-border);
}

/* ---------- Buttons and links ---------- */
.guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--guide-border-strong);
  background: var(--guide-surface);
  color: var(--guide-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform var(--guide-motion) var(--guide-ease),
    background-color var(--guide-motion) var(--guide-ease),
    border-color var(--guide-motion) var(--guide-ease);
}

.guide-btn:hover {
  transform: translateY(-1px);
  border-color: var(--guide-accent);
}

.guide-btn--primary {
  background: var(--guide-accent);
  border-color: var(--guide-accent);
  color: var(--guide-on-accent);
}

.guide-btn--ghost {
  background: var(--guide-surface-2);
}

.guide-btn--sm {
  font-size: 13px;
  padding: 7px 13px;
}

.guide-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--guide-accent-text);
  font: inherit;
  font-size: inherit;
  text-align: start;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.guide-link:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Workflows ---------- */
.guide-workflow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  padding: 16px;
  min-width: 0;
}

.guide-workflow-title {
  margin: 0;
  font-size: 15px;
}

.guide-workflow-blurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--guide-muted);
}

.guide-workflow-steps {
  margin: 4px 0 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

/* ---------- Panels ---------- */
.guide-section--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.guide-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  padding: 18px;
  min-width: 0;
}

.guide-panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.guide-panel-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--guide-accent-text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-panel-title {
  margin: 0;
  font-size: 16px;
}

.guide-panel-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--guide-muted);
}

.guide-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-panel-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}

.guide-panel-date {
  font-size: 12px;
  color: var(--guide-muted);
}

.guide-panel .guide-btn {
  align-self: flex-start;
}

/* ---------- Breadcrumbs + collection header ---------- */
.guide-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.guide-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--guide-muted);
  font: inherit;
  font-size: 13.5px;
  padding: 6px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.guide-crumb:hover {
  color: var(--guide-accent-text);
}

.guide-crumb svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-collection-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: guide-rise var(--guide-motion) var(--guide-ease) both;
}

.guide-collection-title {
  margin: 0;
  font-size: clamp(21px, 3.4vw, 28px);
  letter-spacing: -0.02em;
}

.guide-collection-blurb {
  margin: 0;
  color: var(--guide-muted);
  font-size: 14.5px;
  max-width: 70ch;
}

/* ---------- Article ---------- */
.guide-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

@media (min-width: 1080px) {
  .guide-article-layout {
    grid-template-columns: minmax(0, 1fr) 232px;
  }
}

.guide-article {
  min-width: 0;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius);
  background: var(--guide-surface);
  padding: clamp(18px, 3.4vw, 34px);
  animation: guide-rise var(--guide-motion) var(--guide-ease) both;
}

.guide-article-head {
  border-bottom: 1px solid var(--guide-border);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.guide-article-title {
  margin: 0;
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.guide-article-summary {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--guide-muted);
  max-width: 68ch;
}

.guide-article-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.guide-availability-detail {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--guide-muted);
}

.guide-article-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.guide-part {
  scroll-margin-top: calc(var(--sm-topbar-h, 70px) + 20px);
}

.guide-part-title {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.guide-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 70ch;
}

.guide-list {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 70ch;
}

.guide-list--check {
  list-style: none;
  padding-inline-start: 0;
}

.guide-list--check li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.guide-li-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  fill: none;
  stroke: var(--guide-ok);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: guide-step;
}

.guide-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  min-width: 0;
}

.guide-step-num {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--guide-info-bg);
  color: var(--guide-accent-text);
  font-size: 12.5px;
  font-weight: 700;
}

.guide-step-copy {
  min-width: 0;
  max-width: 68ch;
}

.guide-step-do {
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 550;
}

.guide-step-note {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--guide-muted);
}

.guide-scenario {
  margin: 0;
  border-inline-start: 3px solid var(--guide-accent);
  background: var(--guide-surface-2);
  border-radius: 0 var(--guide-radius-sm) var(--guide-radius-sm) 0;
  padding: 15px 18px;
  max-width: 70ch;
}

.guide-scenario-who {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guide-accent-text);
  margin-bottom: 7px;
}

.guide-scenario-story {
  margin: 0;
}

.guide-scenario-story p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
}

.guide-mistakes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 70ch;
}

.guide-mistake {
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  padding: 13px 15px;
  background: var(--guide-surface-2);
}

.guide-mistake-what {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 550;
}

.guide-mistake-what .guide-li-icon {
  stroke: var(--guide-warn);
}

.guide-mistake-fix {
  margin: 7px 0 0 25px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--guide-muted);
}

.guide-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  color: var(--guide-text);
  font: inherit;
  font-size: 14px;
  text-align: start;
  padding: 12px 15px;
  cursor: pointer;
  transition: border-color var(--guide-motion) var(--guide-ease),
    transform var(--guide-motion) var(--guide-ease);
}

.guide-related-item:hover {
  border-color: var(--guide-accent);
  transform: translateX(3px);
}

.guide-related-arrow {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--guide-accent-text);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-updated {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  color: var(--guide-muted);
}

.guide-updated .guide-li-icon {
  stroke: var(--guide-muted);
}

/* ---------- Contents rail ---------- */
.guide-toc {
  display: none;
}

@media (min-width: 1080px) {
  .guide-toc {
    display: block;
    position: sticky;
    top: calc(var(--sm-topbar-h, 70px) + 16px);
    border-inline-start: 2px solid var(--guide-border);
    padding-inline-start: 15px;
  }
}

.guide-toc-title {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guide-muted);
}

.guide-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* A <button>, not an <a>: an in-page anchor and the dashboard's hash
   router cannot share one hash without the anchor hijacking the route.
   These declarations strip the button chrome back to the link look. */
.guide-toc-link {
  position: relative;
  display: block;
  width: 100%;
  padding: 6px 0 6px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
  color: var(--guide-muted);
  text-decoration: none;
  border-radius: 5px;
  transition: color var(--guide-motion) var(--guide-ease);
}

/* Sections are focus targets so the reader's next Tab continues from
   where they jumped. They must not draw a focus ring — the reader did
   not focus a control, and a box around a whole section reads as an
   error state. */
.guide-part:focus,
.guide-part:focus-visible {
  outline: none;
}

/* The moving indicator: one element per link, scaled rather than
   animated on a layout property, so it cannot cause reflow. */
.guide-toc-link::before {
  content: "";
  position: absolute;
  inset-inline-start: -17px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--guide-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--guide-motion) var(--guide-ease);
}

.guide-toc-link.is-active {
  color: var(--guide-accent-text);
  font-weight: 600;
}

.guide-toc-link.is-active::before {
  transform: scaleY(1);
}

/* ---------- Feedback ---------- */
.guide-feedback {
  margin-top: 30px;
  border-top: 1px solid var(--guide-border);
  padding-top: 20px;
}

.guide-feedback-title {
  margin: 0 0 12px;
  font-size: 15px;
}

.guide-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.guide-feedback-note,
.guide-feedback-thanks {
  margin: 11px 0 0;
  font-size: 13px;
  color: var(--guide-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.guide-feedback-thanks {
  animation: guide-pop var(--guide-motion) var(--guide-ease) both;
}

/* ---------- Empty states ---------- */
.guide-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border: 1px dashed var(--guide-border-strong);
  border-radius: var(--guide-radius);
  background: var(--guide-surface);
  padding: clamp(20px, 4vw, 36px);
}

.guide-empty-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--guide-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-empty-title {
  margin: 0;
  font-size: 19px;
}

.guide-empty-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--guide-muted);
  max-width: 62ch;
  overflow-wrap: anywhere;
}

.guide-empty-guesses,
.guide-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.guide-empty-label {
  font-size: 13px;
  color: var(--guide-muted);
}

.guide-empty-support {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--guide-muted);
}

/* ---------- Flow diagram ---------- */
.guide-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}

.guide-flow-step {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.guide-flow-arrow {
  display: none;
}

/* The connecting arrows only make sense once the steps sit side by side.
   Below that the cards stack and the numbers carry the sequence. */
@media (min-width: 720px) {
  .guide-flow-arrow {
    display: flex;
    align-items: center;
    position: absolute;
    inset-inline-start: -13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .guide-flow-arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--guide-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
  }
}

.guide-flow-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  padding: 14px;
  transition: border-color var(--guide-motion) var(--guide-ease),
    transform var(--guide-motion) var(--guide-ease);
}

.guide-flow-card:hover,
.guide-flow-card:focus-within {
  border-color: var(--guide-accent);
  transform: translateY(-2px);
}

.guide-flow-index {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--guide-info-bg);
  color: var(--guide-accent-text);
  font-size: 11.5px;
  font-weight: 700;
}

.guide-flow-label {
  font-size: 15px;
  font-weight: 650;
}

.guide-flow-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--guide-muted);
}

.guide-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Glossary ---------- */
.guide-glossary {
  margin: 0;
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius-sm);
  background: var(--guide-surface);
  padding: 6px 18px 18px;
}

.guide-glossary-term {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--guide-accent-text);
}

.guide-glossary-def {
  margin: 5px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--guide-text);
  max-width: 74ch;
}

.guide-glossary-def .guide-link {
  font-size: 13px;
}

/* ---------- "Learn this page" ---------- */
.guide-learn-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.sm-view-head.guide-has-learn,
.sm-module-head.guide-has-learn {
  flex-wrap: wrap;
}

.guide-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--guide-border-strong);
  border-radius: 999px;
  background: var(--guide-surface-2);
  color: var(--guide-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--guide-motion) var(--guide-ease),
    color var(--guide-motion) var(--guide-ease);
}

.guide-learn-btn:hover {
  border-color: var(--guide-accent-text);
  color: var(--guide-accent-text);
}

.guide-learn-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Module empty-state help ---------- */
.guide-empty-help {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.guide-empty-help-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--guide-muted);
  max-width: 54ch;
  text-align: center;
}

.guide-empty-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ---------- Launch checklist ---------- */
.guide-checklist {
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius);
  background:
    radial-gradient(700px 260px at 5% -30%, var(--guide-info-bg), transparent 60%),
    var(--guide-surface);
  box-shadow: var(--guide-shadow);
  padding: clamp(16px, 2.6vw, 24px);
  margin-bottom: 20px;
  animation: guide-rise var(--guide-motion) var(--guide-ease) both;
}

.guide-checklist--dismissed {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 0 12px;
}

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

.guide-checklist-heading {
  min-width: 0;
}

.guide-checklist-title {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.guide-checklist-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--guide-muted);
}

.guide-checklist-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.guide-progress {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 4px;
}

.guide-progress-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 999px;
  background: var(--guide-surface-2);
  overflow: hidden;
}

.guide-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--guide-accent), var(--guide-accent-2));
  /* Width, not transform: the track clips, so this cannot shift layout. */
  transition: width 520ms var(--guide-ease);
}

.guide-progress-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--guide-muted);
  min-width: 34px;
  text-align: end;
}

.guide-checklist-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.guide-checklist.is-collapsed .guide-checklist-list,
.guide-checklist.is-collapsed .guide-checklist-done {
  display: none;
}

.guide-checklist-loading {
  font-size: 13.5px;
  color: var(--guide-muted);
  padding: 10px 2px;
}

.guide-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 2px;
  border-top: 1px solid var(--guide-border);
  min-width: 0;
}

.guide-check:first-child {
  border-top: 0;
}

.guide-check-status {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--guide-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.guide-check-status svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-check-status.is-done {
  background: var(--guide-ok);
  border-color: var(--guide-ok);
  color: #fff;
  animation: guide-pop 320ms var(--guide-ease) both;
}

.guide-check-status.is-self {
  background: transparent;
  border-color: var(--guide-ok);
  color: var(--guide-ok);
}

.guide-check-status.is-unknown {
  border-color: var(--guide-warn);
  color: var(--guide-warn);
}

.guide-check-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.guide-check-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.guide-check.is-done .guide-check-title {
  color: var(--guide-muted);
}

.guide-check-why {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--guide-muted);
}

.guide-check-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--guide-muted);
  overflow-wrap: anywhere;
}

.guide-check-note--self {
  color: var(--guide-warn);
}

.guide-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.guide-checklist-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--guide-radius-sm);
  background: var(--guide-ok-bg);
  animation: guide-pop 380ms var(--guide-ease) both;
}

.guide-checklist-done-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--guide-ok);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-checklist-done-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--guide-text);
}

/* ---------- Theme cascade guard ----------

   theme.css styles elements, not just classes:

     html.dark body button { color: var(--sm-text); }   (0,1,2)

   That outranks a single-class rule like .guide-btn--primary (0,1,0), so
   in dark mode every Guide control built as a <button> — the primary
   button, links, breadcrumbs — silently reverted to body text colour.
   For the primary button that meant near-white on the accent fill at
   3.09:1, below WCAG AA.

   Rather than weaken the shared rule (it is correct for the rest of the
   app) or reach for !important, these selectors carry a second class so
   they legitimately win on specificity. They restate the same tokens
   declared above; nothing new is introduced here. */
.guide-root .guide-btn--primary,
.guide-checklist .guide-btn--primary,
.guide-empty-help .guide-btn--primary {
  color: var(--guide-on-accent);
}

.guide-root .guide-btn--ghost,
.guide-checklist .guide-btn--ghost,
.guide-empty-help .guide-btn--ghost {
  color: var(--guide-text);
}

.guide-root .guide-link,
.guide-checklist .guide-link {
  color: var(--guide-accent-text);
}

.guide-root .guide-crumb {
  color: var(--guide-muted);
}

.guide-root .guide-crumb:hover {
  color: var(--guide-accent-text);
}

.guide-root .guide-chip,
.guide-root .guide-card,
.guide-root .guide-related-item,
.guide-root .guide-search-clear {
  color: var(--guide-text);
}

/* ---------- Motion ---------- */
@keyframes guide-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes guide-pop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion is handled in one place, deliberately.

   Per-rule opt-in fails the moment someone adds an animation and forgets
   the media query. This block neutralises every transition and animation
   inside the Guide regardless of where it was declared, so the promise
   holds for code written after this file. Elements animating in with
   opacity:0 are forced back to full opacity — otherwise disabling the
   animation would leave them invisible. */
@media (prefers-reduced-motion: reduce) {
  .guide-root *,
  .guide-root *::before,
  .guide-root *::after,
  .guide-checklist,
  .guide-checklist *,
  .guide-checklist *::before,
  .guide-checklist *::after,
  .guide-empty-help,
  .guide-empty-help *,
  .guide-learn-btn {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .guide-hero,
  .guide-section,
  .guide-article,
  .guide-collection-head,
  .guide-checklist,
  .guide-checklist-done,
  .guide-feedback-thanks,
  .guide-check-status.is-done {
    opacity: 1 !important;
    transform: none !important;
  }

  .guide-card:hover,
  .guide-chip:hover,
  .guide-btn:hover,
  .guide-flow-card:hover,
  .guide-related-item:hover {
    transform: none !important;
  }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 640px) {
  .guide-shell {
    gap: 22px;
    padding-bottom: 32px;
  }

  .guide-result-count {
    margin-inline-start: 0;
    width: 100%;
  }

  .guide-check-actions {
    width: 100%;
  }

  .guide-checklist-head {
    flex-direction: column;
  }

  .guide-article-summary,
  .guide-empty-copy {
    font-size: 14px;
  }
}

/* At 320px the padding itself is most of the screen, so it comes down
   further and the mistake-fix indent is dropped rather than letting the
   text run into a 12-character column. */
@media (max-width: 380px) {
  .guide-hero,
  .guide-article,
  .guide-empty {
    padding: 16px;
  }

  .guide-mistake-fix {
    margin-inline-start: 0;
  }

  .guide-step {
    gap: 10px;
  }

  .guide-suggestions .guide-chip {
    width: 100%;
    text-align: start;
  }
}