/* ═══ The guides (docs/design/ONBOARDING_PLAN_2026_10.md section 8) ══════════
   The tip, its arrow, the home tour's spotlight, and the Aide sheet's rows.

   NOTHING HERE TOUCHES THE PAGE'S LAYOUT. The tip and the spotlight are
   `popover="manual"` elements in the top layer (core/guideTip.js), placed with
   the custom properties the script writes through CSSOM (--guide-x, --guide-y,
   --guide-arrow-x/y, --guide-cut-*): no rule below sets a box on anything
   outside them, so no row, panel or footer can change size because a guide
   opened. The z-index each carries is the existing ladder's, read only by a
   browser without the Popover API, where they fall back to fixed layers at the
   dialog's and the scrim's level.

   A popover's user-agent box (centred, inset 0, a border, Canvas colours) is
   undone here; display is left to the [hidden] attribute the script moves with
   showPopover/hidePopover, because an author display would beat the UA's
   "closed popover is not displayed" rule.

   Linked by index.html, render-blocking, with the data-if-sheet="guide" marker
   core/guideTip.js guards on before linking it as the fallback (resolved against
   the module's own URL, so it stays inside the versioned bundle): a tip cannot
   show unstyled. Every value comes from the token set in styles.css. */

/* ── the tip ── */
.guide-tip {
  position: fixed; inset: auto; left: var(--guide-x); top: var(--guide-y);
  margin: 0; z-index: var(--layer-dialog);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(22rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  overflow: visible;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  animation: if-rise var(--dur-3) var(--ease-out);
}
.guide-tip[hidden] { display: none; }
.guide-tip-head { display: flex; align-items: baseline; gap: var(--space-3); }
.guide-tip-title {
  flex: 1 1 auto; margin: 0;
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  color: var(--ink-strong);
}
.guide-tip-title:focus { outline: none; }
.guide-tip-title:focus-visible { border-radius: var(--radius-xs); } /* the ring: styles.css's shared focus rule */
.guide-tip-count { flex: none; font-size: var(--text-xs); color: var(--ink-muted); }
.guide-tip-body { margin: 0; font-size: var(--text-sm); line-height: var(--leading); color: var(--ink); }
.guide-tip-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-2);
}
.guide-tip-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* The arrow: a square turned a quarter, half outside the tip on the side that
   faces the anchor, its two outer edges drawn with the tip's border. */
.guide-tip-arrow {
  position: absolute; width: var(--space-3); height: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}
.guide-tip[data-side="bottom"] .guide-tip-arrow {
  top: calc(var(--space-3) / -2); left: calc(var(--guide-arrow-x) - var(--space-3) / 2);
  border-right: 0; border-bottom: 0;
}
.guide-tip[data-side="top"] .guide-tip-arrow {
  bottom: calc(var(--space-3) / -2); left: calc(var(--guide-arrow-x) - var(--space-3) / 2);
  border-left: 0; border-top: 0;
}
.guide-tip[data-side="right"] .guide-tip-arrow {
  left: calc(var(--space-3) / -2); top: calc(var(--guide-arrow-y) - var(--space-3) / 2);
  border-top: 0; border-right: 0;
}
.guide-tip[data-side="left"] .guide-tip-arrow {
  right: calc(var(--space-3) / -2); top: calc(var(--guide-arrow-y) - var(--space-3) / 2);
  border-bottom: 0; border-left: 0;
}

/* ── the spotlight (the home tour only) ──
   A scrim over the whole window with a hole cut around the anchor by clip-path
   (the even-odd rule leaves the inner rectangle out), and a ring on the hole's
   edge. The hole is cut from the hit-testing too, so the control the step names
   can still be pressed. */
.guide-spot {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  z-index: var(--layer-scrim);
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.guide-spot[hidden] { display: none; }
.guide-scrim {
  position: absolute; inset: 0;
  background: var(--surface-scrim);
  pointer-events: auto;
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--guide-cut-l) var(--guide-cut-t), var(--guide-cut-r) var(--guide-cut-t),
    var(--guide-cut-r) var(--guide-cut-b), var(--guide-cut-l) var(--guide-cut-b),
    var(--guide-cut-l) var(--guide-cut-t));
  animation: if-fade var(--dur-2) var(--ease-out);
}
.guide-ring {
  position: absolute;
  left: var(--guide-cut-l); top: var(--guide-cut-t);
  width: calc(var(--guide-cut-r) - var(--guide-cut-l));
  height: calc(var(--guide-cut-b) - var(--guide-cut-t));
  border-radius: var(--radius-md);
  /* The spotlight's outline marks a place, not keyboard focus, so it is drawn
     in the accent and never with the focus ring's payload, which stays the
     focus rule's alone (tests/focusLandmarks). */
  outline: var(--kit-focus-width) solid var(--accent);
  pointer-events: none;
}

/* ── Aide (screens/help.js) ──
   The sheet is the import sheet's component (.sheet in styles.css); only its
   contents are placed here. */
.guide-help-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.guide-help-sub { margin: 0; font-size: var(--text-sm); color: var(--ink-strong); }
.guide-help-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.guide-help-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-2);
  padding: var(--row-pad-y-dense) 0;
  border-bottom: 1px solid var(--rule);
}
.guide-help-name { font-size: var(--text-sm); color: var(--ink-strong); }
.guide-help-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }