/* Stock-CMS help engine — guide.css (GUIDE/CONTRACT.md, Lane A engine).
   Self-contained: every value lives on --sg-* custom properties scoped under #stockguide-root,
   so this file never reads or collides with whatever --vars the host page (index.html /
   docs.html) already defines. Identity Program: paper/ink/#FF0604, zero radius, zero shadow,
   Archivo.
   X4-01 (PANEL-LOG ROUND 4 §8.0, 4th sitting): GUIDE/CONTRACT.md's badge spec ("red circle,
   white number") is superseded here. The badge is now square-cornered like every other element
   in the system (no site-wide no-circles exception survives) and its resting field is ink, not
   red — a coach mark is not the One Red Action DESIGN.md reserves red fields for; red is still
   how every guide control answers a hover/press, same as the rest of the product. */

#stockguide-root{
  --sg-paper:#FFFFFF; --sg-ink:#0A0A0A; --sg-red:#FF0604; --sg-red-press:#D40503;
  --sg-line:rgba(10,10,10,.28); --sg-dim:#F5F5F3;
  /* lane CASE, fold MUST-3: this file is deliberately self-contained (--sg-* only, so the coach
     marks survive on any host page), so the design system's Button voice is mirrored here as
     two tokens rather than re-declared as bare numbers. --sg-weight-medium == --weight-medium,
     --sg-text-base == --text-base: the size and weight the product draws every Button at. */
  --sg-weight-medium:600; --sg-text-base:14px;
  --sg-font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sg-z:2147483000; /* above anything the app itself sets (its highest is a modal scrim at 100) */
}
/* NOTE: #stockguide-root and .sg-overlay are deliberately left `position: static` (the default).
   Badges/cards/pulse rings are `position: absolute` and are positioned in *document* coordinates
   (rect + scrollX/scrollY) computed in guide.js — that only works if nothing between them and
   <html> establishes a positioning/containing-block context. Do not add position/transform to
   either of these two elements. */
/* :where() zeroes out the #id's specificity contribution, so these resets keep their scoping
   (only apply inside the engine's own root) without out-specificity-ing component rules below
   like .sg-pill{background:...} — an ID selector otherwise beats a single class regardless of
   source order, which silently lost the pill/badge fills to browser default button chrome. */
:where(#stockguide-root) *{box-sizing:border-box; font-family:var(--sg-font); -webkit-font-smoothing:antialiased}
:where(#stockguide-root) button{cursor:pointer; border:none; background:none; color:inherit; font:inherit}
/* lane CASE, round 3 (SKILL rule 2): the overlay's links were Brand Red TYPE at text size with
   no underline at rest — red doing the work a rule should do. They wear the desk's own link
   idiom now (brand.css .textlink): ink words over a red underline, the underline pressing on
   hover. A link is marked by its underline, never by red text. */
:where(#stockguide-root) a{color:var(--sg-ink); text-decoration:underline; text-decoration-color:var(--sg-red); text-decoration-thickness:2px; text-underline-offset:3px}
:where(#stockguide-root) a:hover{color:var(--sg-ink); text-decoration-color:var(--sg-red-press)}

/* B11-17 (clause 1): every .75rem node in this file (the close button, the badge numeral, the
   Back/Next buttons, the step count) is now .8125rem — DESIGN.md's Label step. 12px was one step
   below the declared Caption voice and below anything else the help overlay renders. */

/* ── the persistent Help pill ─────────────────────────────────────────── */
.sg-pill{
  position:fixed; right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:var(--sg-z);
  min-width:44px; min-height:44px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  background:var(--sg-ink); color:#fff; border:1px solid var(--sg-ink);
  /* lane CASE, fold MUST-3 (SKILL rule 9): a button's text is prose. The pill's Press-Red
     hover is a BACKGROUND with white type, which is where rule 2 allows red; it stays. */
  font-weight:var(--sg-weight-medium); font-size:var(--sg-text-base); letter-spacing:normal; text-transform:none;
  transition:background 140ms ease-out, border-color 140ms ease-out;
}
.sg-pill:hover{background:var(--sg-red-press); border-color:var(--sg-red-press)}
/* X4-01: the pill's field no longer turns red when help is ON — a coach mark toggle is not the
   One Red Action, so an all-red field for it was a false second action. "On" is marked the way
   the rest of the system marks state, with a filled square (DESIGN.md's 7px ink/red squares),
   not a field wash; hover still turns red like every other interactive control (unchanged). */
.sg-pill--active::after{content:''; display:inline-block; width:7px; height:7px; background:var(--sg-red); margin-left:.5em; flex:none}
.sg-pill:focus-visible{outline:2px solid var(--sg-red); outline-offset:2px}
/* D14/C4/X-3/G1 fix: the pill sits at the highest z-index anything on the page can construct
   (--sg-z, above), so any host content that lands in its 89×44 corner is covered with no
   arbitration — measured live clipping a drawer's own inert-reason sentence and the crew's
   disabled-Save reason. The pill has no job while a host dialog owns the screen; it yields
   rather than overlapping it (visibility, not display, so positionPill()'s layout math is
   unaffected while it's hidden). */
.sg-pill--yield{visibility:hidden; pointer-events:none}

/* POLISH-B ruling 4 (walk SHOULD-9, 2026-09-05): the office rail IS the door to help. Where the
   rail is drawn (`body.with-rail`, paid by BRAND.ui.officeRail.mount) at the design system's own
   desk width, the account menu's **Help & support** row opens the engine on the screen it is
   teaching — the way ui_kits/office draws it — and the fixed pill has nothing left to do, so it
   is not shown. It is `display:none`, not `visibility:hidden`: the yield class above means "get
   out of the way of live content for a moment"; this means "there is no pill on this surface."
   Below 1024 (and on the crew phone, which never carries the rail) the pill is unchanged. */
@media (min-width:1024px){ body.with-rail .sg-pill{display:none} }

.sg-overlay{display:block}
.sg-overlay:empty{display:none}

/* ── header card (view label + intro; not anchored to any element) ─────── */
.sg-card{
  position:fixed; z-index:var(--sg-z);
  background:var(--sg-paper); color:var(--sg-ink); border:1px solid var(--sg-ink);
  width:min(320px, calc(100vw - 24px));
  padding:14px 16px;
}
.sg-card--header{ top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)) }
/* X4-01: compact header card (guide.js buildHeaderCard's `compact` mode) — no intro/link content
   left inside it, so the padding that gave those room is dead weight holding the card's height
   (and the content it's still sitting on top of) taller than it needs to be. */
.sg-card--header-compact{ padding:10px 16px }
.sg-card--header-compact .sg-label{ padding-right:72px }
/* X7-01 (PANEL-LOG ROUND 7 §8.0): was a bare × glyph in a 44×44 square — DESIGN.md's shape
   vocabulary has no icon for "close" (guide.js now renders the word). Same text-button idiom as
   .sg-step-nav button below (1px border, uppercase, 44px min tap target), sized to its own text
   rather than a fixed square. padding-right on the two labels below widened to clear it. */
.sg-x{
  position:absolute; top:8px; right:8px; min-height:44px; min-width:44px; padding:0 12px;
  border:1px solid var(--sg-ink);
  /* lane CASE, fold MUST-3: sentence case at the Button's own size and weight; the hover
     painted Brand Red type AND border at 13px (SKILL rule 2) and is ink on the dim field now. */
  font-weight:var(--sg-weight-medium); font-size:var(--sg-text-base); letter-spacing:normal; text-transform:none;
  line-height:1; display:flex; align-items:center; justify-content:center;
}
.sg-x:hover{color:var(--sg-ink); border-color:var(--sg-ink); background:var(--sg-dim)}
/* lane CASE, round 3 (SKILL rule 9): the overlay's two headings are prose. Both strings are
   already sentence case at source (guide.js:616 view.label, :653 cur.step.title). */
.sg-label{font-weight:800; font-stretch:118%; letter-spacing:-.005em; font-size:1rem; text-transform:none; padding-right:72px}
/* X6-01(a) (PANEL-LOG ROUND 6 §8.0 — the exit grep's new screened-ink-as-`color` rule, chair
   §0.4): this and the two siblings below (:124, :139) used to carry rgba(10,10,10,.75) as
   "composited-safe, accepted interim debt" — three sittings of judges re-applying `.75` as the
   correct PARTIAL fix for contrast without ever closing the underlying Flat World Rule breach it
   was flagged against. `.sg-card` (above) never sits on anything but a solid `var(--sg-paper)`
   field — fixed position, opaque background, no compositing ever happens under it — so the alpha
   channel here was doing no compositing work at all; it can only ever paint one flat, precomputed
   color. #474747 IS that composited value (10*.75 + 255*.25, rounded) — the exact same pixel,
   same 9.29:1 contrast — with the transparency (and the rule it broke) simply gone. */
/* X7-01 follow-up: the "no guide available" branch (guide.js's !view case) has no .sg-label
   ahead of it to push this below the close button's row — it's the first thing in the card, same
   row as .sg-x. The wider text button (was a 44×44 square) needs this to carry its own clearance
   now, the same 72px the label already has. */
.sg-intro{margin-top:.4rem; font-size:.875rem; line-height:1.5; color:#474747; padding-right:72px}
.sg-full{display:inline-block; margin-top:.6rem; font-size:.8125rem; font-weight:700; letter-spacing:.02em}
/* POLISH-B fold MUST-1: the compact header card keeps the whole-guide link — it is the office's
   only route back to /guide.html now that the account rail is the door — at one tight line, so
   the card that X4-01 shrank to ~40px lands near ~60px and not back at ~169px. It keeps the
   .8125rem Label step every other node in this file carries (B11-17 clause 1, pinned by
   verify-polish §8) — the margin is the only thing tightened. */
.sg-full--compact{margin-top:.35rem}

/* off-screen (unmatched, non-optional) step chips stack under the header card */
.sg-badge.sg-badge--stack{
  position:fixed; z-index:var(--sg-z);
  left:calc(12px + env(safe-area-inset-left));
  top:calc(12px + env(safe-area-inset-top) + 118px);
  /* B11-17 follow-on: the stack step was 30px for a 24px badge; at 44px the chips would sit on
     top of each other. 48px keeps the same 4px gap between them. */
  transform:translateY(calc(var(--sg-stack-i, 0) * 48px));
}

/* ── numbered badges — square-cornered, ink field at rest (see file header, X4-01) ────── */
.sg-badge{
  /* C1 (DEBI-READY §3): badges are now placed OUTSIDE the box they annotate, which puts some of
     them in the margin the step card is also offset into — measured live on the documents desk,
     badge 1 landed 13px clear of the rail and the step card (appended after it, same z-index)
     painted over the other 31px, hiding the very marker the card is explaining. One step above
     the cards: the badge is the mark, the card is the text about it. Badges can no longer land
     on the header card at all (guide.js placeBadge), so this changes nothing there. */
  position:absolute; z-index:calc(var(--sg-z) + 1);
  /* B11-17 (clause 2): the badge was a 24px control at every width but the 640px phone rule —
     under the 44px target the whole system holds, on a control that is clickable. 44px at EVERY
     width now; square, ruled, ink field, nothing else about it changes. */
  min-width:44px; min-height:44px; border-radius:0;
  background:var(--sg-ink); color:#fff; border:1px solid var(--sg-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8125rem; font-variant-numeric:tabular-nums;
  transform:translate(-50%, -50%);
  transition:transform 120ms ease-out;
}
.sg-badge:hover{background:var(--sg-red-press); border-color:var(--sg-red-press)}
.sg-badge--current{outline:2px solid var(--sg-ink); outline-offset:2px}
/* X4-01: an unmatched/off-screen step's badge used to fade by CSS opacity, which screens the ink
   fill DESIGN.md forbids screening. Recedes with a solid recessed field instead (the site's own
   --dim convention for muted/inactive fields, brand.css's --dim, mirrored here as --sg-dim) —
   same 800-weight number, same 1px border, no transparency anywhere on it. */
.sg-badge--dim{background:var(--sg-dim); color:var(--sg-ink); border-color:var(--sg-ink)}

/* ── the soft red pulse on the current step's element ───────────────────
   box-shadow-free per contract: an outline ring on a transparent overlay box. X4-01: the ring
   sits directly on top of the live control it's marking, so animating it by opacity was
   screening ink/red on a live control — forbidden twice over. The "soft pulse" is now a
   breathing outline-offset instead: full-strength red throughout, distance is what moves. */
.sg-pulse{
  position:absolute; z-index:calc(var(--sg-z) - 1);
  pointer-events:none;
  outline:3px solid var(--sg-red); outline-offset:3px;
  animation:sg-pulse-anim 2s ease-in-out infinite;
}
@keyframes sg-pulse-anim{ 0%,100%{outline-offset:3px} 50%{outline-offset:6px} }
@media (prefers-reduced-motion: reduce){ .sg-pulse{ animation:none } }

/* ── step card (title + note + Next/Back), anchored near its element ───── */
.sg-card--step{ position:absolute }
.sg-step-title{font-weight:800; font-stretch:118%; font-size:.9375rem; text-transform:none; padding-right:24px}
.sg-step-note{margin-top:.4rem; font-size:.875rem; line-height:1.5; color:#474747} /* X6-01(a) — see :79 */
.sg-step-nav{margin-top:.75rem; display:flex; align-items:center; gap:.75rem}
.sg-step-nav button{
  min-height:44px; padding:0 10px; border:1px solid var(--sg-ink);
  /* lane CASE, fold MUST-3: same conversion as .sg-x above — prose, the Button's size and
     weight, and a hover that is ink on the dim field instead of Brand Red at 13px. */
  font-weight:var(--sg-weight-medium); font-size:var(--sg-text-base); letter-spacing:normal; text-transform:none;
}
.sg-step-nav button:hover:not(:disabled){color:var(--sg-ink); border-color:var(--sg-ink); background:var(--sg-dim)}
/* X4-01: was opacity:.35 — a screened-ink fill on Back/Next. A disabled nav button now flips to
   the site's recessed --dim field instead (same idiom as the badge's dim state above); the
   step-count sibling already states which end of the sequence you're at, so no separate reason
   sentence is needed for a pagination boundary. */
.sg-step-nav button:disabled{background:var(--sg-dim); cursor:default}
/* X6-02 (PANEL-LOG ROUND 6 §8.0, 6th sitting — CLOSED): rgba(10,10,10,.55) composited to
   4.40:1, sub-AA. X6-01(a) — see :79 — for why this is now the flat #474747 rather than the
   .75-alpha partial fix its two siblings landed at R5/R6: same pixel, same 9.29:1, no alpha. */
.sg-step-count{margin-left:auto; font-size:.8125rem; font-weight:700; color:#474747; font-variant-numeric:tabular-nums}
.sg-card--center{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%)}

/* I2: on the mobile bottom sheet, a card anchored below a target in the lower part of the
   screen would cover that same target — dock it near the top instead (below the header card;
   JS sets `top` to the header card's measured bottom). Same fixed-width treatment as the header
   card, not full-width — it isn't a bottom sheet. */
.sg-card--step-top{
  position:fixed; left:calc(12px + env(safe-area-inset-left));
  width:min(320px, calc(100vw - 24px));
}

/* ── phone-first: 44px+ everywhere ≤640px, bottom-sheet step card ── */
@media (max-width:640px){
  /* C7-03 (PANEL-LOG ROUND 7 §8.3, MEDIUM/dim8, PINNED SURFACE): X6-02 took .sg-x (28×28) and
     Back/Next (32px) to 44px on this same media query; the badge was never on that list and was
     left at 32×32 — the identical defect, one control over. 44×44 now, same as its siblings. */
  /* B11-17: the base rule above now carries 44px at every width; only the phone's larger
     numeral is left here. */
  .sg-badge{font-size:.875rem}
  /* :not(...) exclusion (review M1 fix): forcing left/top/bottom/width here previously left the
     centered/docked-top variants' OWN `transform` from the desktop rules still active on top of
     these overrides, shoving them half off-screen. Excluding those two variants means they keep
     their own (untouched) positioning at every width instead of being fought over. */
  .sg-card--step:not(.sg-card--center):not(.sg-card--step-top){
    position:fixed !important; left:0 !important; right:0 !important; top:auto !important;
    bottom:0 !important; width:100% !important;
    border-left:none; border-right:none; border-bottom:none;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
}