/* Skema guided onboarding — the overlay layer.
 *
 * Reads the portal's own tokens (`--gs-*`, declared in style.css) rather
 * than restating colours, so the tour inherits the workspace identity and
 * follows it if the workspace is ever retoned. Nothing here styles an
 * application element: every selector below is a `tour-` element this
 * layer creates and removes.
 *
 * The z-index band sits above the sign-in gate (1200) and the landing
 * overlay (1300), because a tour started from the workspace must not be
 * covered by either.
 */

.tour-shield {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;   /* the dim is the spotlight's outer shadow */
  cursor: default;
}

/* The spotlight IS the backdrop: one element, an enormous outer shadow,
   and a genuinely clear hole in the middle. Doing it with four rectangles
   leaves seams on fractional device pixels. */
.tour-spot {
  position: fixed;
  z-index: 2001;
  pointer-events: none;      /* visual only — .tour-shield does the blocking */
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgb(23 20 15 / .58);
  outline: 2px solid var(--gs-burgundy, #7e2230);
  outline-offset: 0;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}

.tour-card {
  position: fixed;
  z-index: 2002;
  width: min(370px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 20px 22px 16px;
  background: var(--gs-paper, #fffdfa);
  color: var(--gs-copy, #3a342c);
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: var(--gs-radius, 14px);
  box-shadow: 0 24px 60px -20px rgb(23 20 15 / .34);
  font-family: var(--gs-sans, system-ui, sans-serif);
  transition: top .22s ease, left .22s ease;
}

/* The card is `tabindex="-1"` and focus is moved to its primary button, so
   it never needs its ring suppressed — and suppressing one is how WO-49's
   focus failures happened. */
.tour-card:focus-visible { outline: 2px solid var(--gs-burgundy, #7e2230); outline-offset: 3px; }

/* While a step waits for its target the card holds still and says nothing,
   rather than flashing the previous step's copy at a new position. */
.tour-card.is-waiting { opacity: 0; pointer-events: none; }

.tour-card__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--gs-paper, #fffdfa);
  border: 1px solid var(--gs-line, #e3ded4);
  transform: rotate(45deg);
}
.tour-card[data-side="bottom"] .tour-card__arrow { top: -7px; margin-left: -6px; border-right: 0; border-bottom: 0; }
.tour-card[data-side="top"]    .tour-card__arrow { bottom: -7px; margin-left: -6px; border-left: 0; border-top: 0; }
.tour-card[data-side="right"]  .tour-card__arrow { left: -7px; margin-top: -6px; border-right: 0; border-top: 0; }
.tour-card[data-side="left"]   .tour-card__arrow { right: -7px; margin-top: -6px; border-left: 0; border-bottom: 0; }

.tour-card__title {
  margin: 0 26px 8px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--gs-ink, #17140f);
}

.tour-card__body {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--gs-copy, #3a342c);
}

.tour-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gs-muted, #6f6961);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.tour-card__close:hover { background: var(--gs-soft-line, #ede9e2); color: var(--gs-ink, #17140f); }

.tour-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gs-soft-line, #ede9e2);
}
.tour-card__foot-left,
.tour-card__foot-right { display: flex; align-items: center; gap: 10px; }

.tour-card__progress {
  font-family: var(--gs-mono, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gs-muted, #6f6961);
  font-variant-numeric: tabular-nums;
}

.tour-card__link {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--gs-muted, #6f6961);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tour-card__link:hover { color: var(--gs-ink, #17140f); }

.tour-card__button {
  padding: 7px 14px;
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: 8px;
  background: var(--gs-paper, #fffdfa);
  color: var(--gs-ink, #17140f);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tour-card__button:hover:not(:disabled) { background: var(--gs-soft-line, #ede9e2); }
.tour-card__button:disabled { opacity: .42; cursor: default; }
.tour-card__button--primary {
  background: var(--gs-burgundy, #7e2230);
  border-color: var(--gs-burgundy, #7e2230);
  color: #fffdfa;
}
.tour-card__button--primary:hover:not(:disabled) { background: #6b1428; }

.tour-card__button:focus-visible,
.tour-card__link:focus-visible,
.tour-card__close:focus-visible {
  outline: 2px solid var(--gs-burgundy, #7e2230);
  outline-offset: 2px;
}

/* -- the Manual's tour list ------------------------------------------- */

.tour-list { display: flex; flex-direction: column; gap: 1px; }
.tour-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--gs-soft-line, #ede9e2);
}
.tour-list__main { flex: 1 1 auto; min-width: 0; }
.tour-list__title { display: block; font-size: 14px; color: var(--gs-ink, #17140f); font-weight: 500; }
.tour-list__blurb { display: block; font-size: 12.5px; color: var(--gs-muted, #6f6961); line-height: 1.5; margin-top: 2px; }
.tour-list__meta {
  font-family: var(--gs-mono, monospace);
  font-size: 11px;
  color: var(--gs-muted, #6f6961);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tour-list__status { display: inline-block; min-width: 68px; }
.tour-list__status--completed { color: var(--gs-green, #2e6448); }
.tour-list__status--skipped { color: var(--gs-amber, #8a5a12); }

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
}

@media (max-width: 640px) {
  /* On a narrow shell an anchored card fights the layout more than it
     helps, so it docks to the bottom and the spotlight carries the
     anchoring on its own. */
  .tour-card {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
  }
  .tour-card__arrow { display: none !important; }
}

/* =====================================================================
   THE MANUAL — the reference surface.

   Shares this stylesheet with the coach marks on purpose: the Manual is
   the same system in reference mode, and splitting the two would let them
   drift apart visually. Everything below reads the portal's own `--gs-*`
   tokens, so the Manual retones with the workspace.
   ===================================================================== */

.ws-settings-manual__lede {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gs-muted, #6f6961);
}

/* -- the journey map -------------------------------------------------- */

.mn-map__frame {
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: var(--gs-radius, 14px);
  background: var(--gs-paper, #fffdfa);
  padding: 10px 14px;
  overflow-x: auto;            /* the tree keeps its shape on a narrow shell */
}
.mn-map__svg { width: 100%; min-width: 720px; height: auto; display: block; }

.mn-map__edge {
  fill: none;
  stroke: var(--gs-line, #e3ded4);
  stroke-width: 1.5;
}

.mn-map__box {
  fill: var(--gs-bg, #f7f5f1);
  stroke: var(--gs-line, #e3ded4);
  stroke-width: 1;
}
.mn-map__label {
  font-family: var(--gs-sans, system-ui, sans-serif);
  font-size: 12.5px;
  fill: var(--gs-ink, #17140f);
  dominant-baseline: auto;
}
.mn-map__progress {
  font-family: var(--gs-mono, monospace);
  font-size: 10.5px;
  fill: var(--gs-burgundy, #7e2230);
}

.mn-map__node--root .mn-map__box {
  fill: var(--gs-ink, #17140f);
  stroke: var(--gs-ink, #17140f);
}
.mn-map__node--root .mn-map__label { fill: var(--gs-bg, #f7f5f1); font-weight: 500; }

.mn-map__node--area .mn-map__box { fill: var(--gs-panel, #f4f1ec); }
.mn-map__node--area .mn-map__label { font-weight: 500; }

.mn-map__node--journey { cursor: pointer; }
.mn-map__node--journey .mn-map__box { fill: var(--gs-paper, #fffdfa); transition: fill .16s ease, stroke .16s ease; }
.mn-map__node--journey:hover .mn-map__box,
.mn-map__node--journey:focus-visible .mn-map__box {
  fill: #f6ebec;                                   /* --wine-tint */
  stroke: var(--gs-burgundy, #7e2230);
}
.mn-map__node--journey:focus-visible { outline: 2px solid var(--gs-burgundy, #7e2230); outline-offset: 2px; }
.mn-map__node--journey.is-running .mn-map__box {
  fill: #f6ebec;
  stroke: var(--gs-burgundy, #7e2230);
  stroke-width: 2;
}

/* -- what happens to a file ------------------------------------------- */

.mn-flows__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.mn-flow {
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: var(--gs-radius, 14px);
  background: var(--gs-paper, #fffdfa);
  padding: 22px 22px 20px;
}
.mn-flow__kinds { display: flex; gap: 6px; margin-bottom: 12px; }
.mn-flow__kind {
  font-family: var(--gs-mono, monospace);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--gs-panel, #f4f1ec);
  color: var(--gs-muted, #6f6961);
}
.mn-flow__title { margin: 0 0 4px; font-size: 16px; color: var(--gs-ink, #17140f); }
.mn-flow__lede { margin: 0 0 16px; font-size: 13px; color: var(--gs-burgundy, #7e2230); }

.mn-flow__stages { list-style: none; margin: 0 0 18px; padding: 0; }
.mn-flow__stage {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--gs-soft-line, #ede9e2);
}
.mn-flow__stage:first-child { border-top: 0; }
.mn-flow__n {
  font-family: var(--gs-mono, monospace);
  font-size: 10.5px;
  color: var(--gs-burgundy, #7e2230);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.mn-flow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-flow__stage-title { font-size: 13.5px; color: var(--gs-ink, #17140f); }
.mn-flow__stage-detail { font-size: 12.5px; line-height: 1.55; color: var(--gs-muted, #6f6961); }

/* -- the dictionary ---------------------------------------------------- */

.mn-dict__search { margin-bottom: 10px; }
.mn-dict__summary {
  margin: 0 0 16px;
  font-family: var(--gs-mono, monospace);
  font-size: 11px;
  color: var(--gs-muted, #6f6961);
}
.mn-dict__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.mn-dict__entry {
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: 10px;
  background: var(--gs-paper, #fffdfa);
  padding: 16px 18px 14px;
}
.mn-dict__entry--journey { border-color: #e8c0c6; background: #fdf8f8; }
.mn-dict__kind {
  display: inline-block;
  font-family: var(--gs-mono, monospace);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-burgundy, #7e2230);
  margin-bottom: 6px;
}
.mn-dict__term { margin: 0 0 6px; font-size: 15px; color: var(--gs-ink, #17140f); }
.mn-dict__definition { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--gs-copy, #3a342c); }
.mn-dict__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mn-dict__where { font-family: var(--gs-mono, monospace); font-size: 10.5px; color: var(--gs-muted, #6f6961); }
.mn-dict__see {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--gs-burgundy, #7e2230);
  cursor: pointer;
}
.mn-dict__see:hover { text-decoration: underline; text-underline-offset: 2px; }

.mn-dict__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--gs-soft-line, #ede9e2);
}
.mn-dict__related-label {
  font-family: var(--gs-mono, monospace);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted, #6f6961);
}
.mn-dict__chip {
  border: 1px solid var(--gs-line, #e3ded4);
  border-radius: 20px;
  background: var(--gs-bg, #f7f5f1);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--gs-copy, #3a342c);
  cursor: pointer;
}
.mn-dict__chip:hover { border-color: var(--gs-burgundy, #7e2230); color: var(--gs-burgundy, #7e2230); }
.mn-dict__chip:focus-visible,
.mn-dict__see:focus-visible {
  outline: 2px solid var(--gs-burgundy, #7e2230);
  outline-offset: 2px;
}
.mn-dict__empty { font-size: 13.5px; color: var(--gs-muted, #6f6961); }
.mn-dict__note {
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gs-amber, #8a5a12);
}

/* The flow stages number themselves. The numerals were literal text until
   `test_empty_store_invents_nothing` pointed out that a client writing
   digits onto a screen is exactly what that gate watches for — and these
   are sequence markers, not data, so the list should own them. */
.mn-flow__stages { list-style: decimal; padding-left: 26px; }
.mn-flow__stages::marker,
.mn-flow__stage::marker { color: var(--gs-burgundy, #7e2230); font-family: var(--gs-mono, monospace); font-size: 11px; }