/* SPoT Smoker Diagnostic — the capture screen (dba 2).
   Loaded by app/Views/spot/diagnostic/index.php, so it styles the tool whether it
   is rendered full-page or inside the 560px slide-out iframe. Kept off app.css
   because nothing outside this route uses it. */

.spot-diag-root {
    color: #e2e8f0;
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Inside the slide-out iframe (body.spot-diag-embed, set by layouts/main.php)
   The panel is 560px; reclaim the page padding sized for a full-width screen.
   Same trim the Subscriptions panel applies (tt-subscriptions.css). */
body.spot-diag-embed .main {
    padding: 12px 14px;
}

.sd-cust {
    font-size: 12px;
    color: #cbd5e1;
    padding: 6px 10px;
    background: rgba(224, 169, 58, .08);
    border: 1px solid rgba(224, 169, 58, .25);
    border-radius: 5px;
    margin-bottom: 12px;
}

.sd-cust strong { color: #e0a93a; }

.sd-cust-none {
    background: rgba(148, 163, 184, .08);
    border-color: rgba(148, 163, 184, .22);
    color: #94a3b8;
}

.sd-cust-none-t { margin-bottom: 8px; }

/* Sits inside .sd-cust, so it inherits the 12px/slate treatment and reads as
   part of the customer strip rather than as a second card competing with the
   "Unit being diagnosed" heading below it. */
.sd-custsearch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-cust-dd {
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    z-index: 60;
    margin-top: 2px;
    max-height: 240px;
    overflow: auto;
    background: #111827;
    border: 1px solid rgba(224, 169, 58, .3);
    border-radius: 5px;
}

.sd-cust-item {
    display: block;
    width: 100%;
    /* 38px floor: this list is used one-handed next to a machine, and the SPoT
       book is thousands of rows deep — a cramped hit target picks the wrong
       customer, which is the one mistake here that is annoying to undo. */
    min-height: 38px;
    padding: 7px 10px;
    text-align: left;
    font: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #e2e8f0;
    cursor: pointer;
}

.sd-cust-item:hover { background: rgba(224, 169, 58, .12); }
.sd-cust-item:last-child { border-bottom: 0; }

.sd-cust-item-n { display: block; font-size: 12px; font-weight: 600; color: #fff; }
.sd-cust-item-m { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }

.sd-cust-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: #94a3b8;
}

.sd-cust-clear { margin-left: 8px; }

/* ── convert to sales order ───────────────────────────────────────────────── */
.sd-so {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
}

.sd-so-h {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.sd-so-done {
    background: rgba(134, 239, 172, .08);
    border-color: rgba(134, 239, 172, .30);
}

/* An <a> styled as .sd-btn — the created order opens in a new tab rather than
   navigating the slide-out away from the diagnosis it belongs to. */
.sd-so-open {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.sd-h {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
}

.sd-sub {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 12px;
}

.sd-loading {
    font-size: 12px;
    color: #94a3b8;
    padding: 18px 0;
}

/* ── messages ─────────────────────────────────────────────────────────────── */
.sd-msg {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 5px;
    margin-bottom: 12px;
    border: 1px solid transparent;
}
.sd-msg-ok    { background: rgba(134, 239, 172, .10); border-color: rgba(134, 239, 172, .35); color: #86efac; }
.sd-msg-warn  { background: rgba(251, 191, 36, .10);  border-color: rgba(251, 191, 36, .35);  color: #fbbf24; }
.sd-msg-error { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
.sd-msg-info  { background: rgba(148, 163, 184, .10); border-color: rgba(148, 163, 184, .30); color: #cbd5e1; }

/* ── equipment picker ─────────────────────────────────────────────────────── */
.sd-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.sd-pick {
    display: block;
    width: 100%;
    text-align: left;
    /* 44px min keeps the row a comfortable tap target on the shop tablet — the
       picker is the one control staff hit with a customer on the phone. */
    min-height: 44px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #e2e8f0;
    cursor: pointer;
    font: inherit;
}

.sd-pick:hover {
    background: rgba(224, 169, 58, .10);
    border-color: rgba(224, 169, 58, .45);
}

.sd-pick-model { display: inline; font-weight: 600; color: #fff; font-size: 14px; }
.sd-pick-nick  { display: inline; font-size: 12px; color: #94a3b8; margin-left: 8px; }
.sd-pick-meta  { display: block; font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ── badges / links ───────────────────────────────────────────────────────── */
.sd-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.sd-badge {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(134, 239, 172, .12);
    border: 1px solid rgba(134, 239, 172, .35);
    color: #86efac;
    white-space: nowrap;
}

.sd-badge-manual {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .32);
    color: #cbd5e1;
}

.sd-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: #94a3b8;
    text-decoration: underline;
    cursor: pointer;
}

.sd-link:hover { color: #e0a93a; }

/* ── form ─────────────────────────────────────────────────────────────────── */
.sd-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.sd-field { display: block; }

.sd-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
    letter-spacing: .02em;
}

.sd-hint {
    display: block;
    font-size: 10.5px;
    color: #6b7280;
    margin-top: 4px;
}

.sd-in {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px;
    color: #fff;
    font: inherit;
    font-size: 13px;
    color-scheme: dark;
}

.sd-in:focus {
    outline: none;
    border-color: rgba(224, 169, 58, .6);
    background: rgba(0, 0, 0, .42);
}

.sd-pair { display: flex; gap: 8px; }
.sd-pair .sd-mfr-month { flex: 0 0 45%; }
.sd-pair .sd-mfr-year  { flex: 1 1 auto; }

/* fuel segmented control */
.sd-seg { display: flex; gap: 6px; flex-wrap: wrap; }

.sd-fuel {
    /* 34px tall: below the 44px picker target but still a comfortable hit for a
       three-way toggle, and it keeps all three on one line at 560px. */
    min-height: 34px;
    padding: 6px 14px;
    font: inherit;
    font-size: 12px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #94a3b8;
    cursor: pointer;
}

.sd-fuel:hover { border-color: rgba(255, 255, 255, .3); color: #cbd5e1; }

.sd-fuel-on {
    background: rgba(224, 169, 58, .18);
    border-color: rgba(224, 169, 58, .6);
    color: #e0a93a;
}

/* model typeahead */
.sd-typeahead { position: relative; }

.sd-dd {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    margin-top: 2px;
    /* A CEILING, not the height. spot-diagnostic.js fitDropdown() lowers this
       inline to whatever room there is above the fuel buttons — the list used to
       open straight over them, so a click meant for "LP" picked a model. Keep the
       two in step: DD_MAX in that file is this number. */
    max-height: 190px;
    overflow: auto;
    background: #111827;
    border: 1px solid rgba(224, 169, 58, .3);
    border-radius: 5px;
}

.sd-dd-item {
    padding: 7px 10px;
    font-size: 12px;
    color: #e2e8f0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.sd-dd-item:hover { background: rgba(224, 169, 58, .12); }

/* ── actions ──────────────────────────────────────────────────────────────── */
.sd-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.sd-btn {
    align-self: flex-start;
    min-height: 38px;
    padding: 8px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    background: rgba(134, 239, 172, .12);
    border: 1px solid rgba(134, 239, 172, .45);
    color: #86efac;
    cursor: pointer;
}

.sd-btn:hover:not(:disabled) { background: rgba(134, 239, 172, .2); }
.sd-btn:disabled { opacity: .55; cursor: default; }

/* ── captured summary ─────────────────────────────────────────────────────── */
.sd-next {
    padding: 10px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
}

.sd-next-h {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.sd-next-body { font-size: 13px; color: #fff; }

.sd-next-note {
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
}

/* ── step navigation ──────────────────────────────────────────────────────── */
.sd-step-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* The forward action. Gold rather than the green save buttons: saving to a
   profile and moving to the next step are different kinds of act, and the two
   sit on screen together. */
.sd-btn.sd-primary {
    background: rgba(224, 169, 58, .16);
    border-color: rgba(224, 169, 58, .55);
    color: #e0a93a;
}

.sd-btn.sd-primary:hover:not(:disabled) { background: rgba(224, 169, 58, .26); }

/* ── problem type grid (screen 2) ─────────────────────────────────────────── */
.sd-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.sd-type {
    display: block;
    text-align: left;
    /* 56px: two lines of content, and the same comfortable tap target the unit
       picker uses — this is chosen with a customer on the phone. */
    min-height: 56px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #e2e8f0;
    cursor: pointer;
    font: inherit;
}

.sd-type:hover {
    background: rgba(224, 169, 58, .09);
    border-color: rgba(224, 169, 58, .4);
}

.sd-type-on {
    background: rgba(224, 169, 58, .18);
    border-color: rgba(224, 169, 58, .65);
}

.sd-type-on .sd-type-label { color: #e0a93a; }

.sd-type-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.sd-type-hint {
    display: block;
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.35;
}

.sd-badge-unit {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #cbd5e1;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

/* ── description ──────────────────────────────────────────────────────────── */
.sd-textarea {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px;
    color: #fff;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    color-scheme: dark;
}

.sd-textarea:focus {
    outline: none;
    border-color: rgba(224, 169, 58, .6);
    background: rgba(0, 0, 0, .42);
}

/* ── session recap (screen 3) ─────────────────────────────────────────────── */
.sd-recap {
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
    overflow: hidden;
}

.sd-recap-row {
    display: flex;
    gap: 12px;
    padding: 7px 11px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
}

.sd-recap-row:last-child { border-bottom: 0; }

.sd-recap-k {
    flex: 0 0 88px;
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 1px;
}

.sd-recap-v {
    flex: 1 1 auto;
    color: #e2e8f0;
    word-break: break-word;
}

/* ══ ONE-SCREEN CAPTURE ══════════════════════════════════════════════════════
   Unit and problem now share a screen, so it is long. These rules exist to make
   a long form readable: sub-headings that separate sections without shouting,
   and reference illustrations that carry their own explanation. */

/* Section heading INSIDE the form — smaller than the screen's .sd-h so the
   hierarchy still reads once there are three of them on one screen. */
.sd-h-sub {
    font-size: 13.5px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sd-field-desc { margin-top: 14px; }

/* ── data plate callout ───────────────────────────────────────────────────── */
.sd-plate {
    margin: 10px 0 4px;
    padding: 11px 12px;
    background: rgba(224, 169, 58, .06);
    border: 1px solid rgba(224, 169, 58, .22);
    border-radius: 8px;
}

.sd-plate-h {
    font-size: 12.5px;
    font-weight: 600;
    color: #e0a93a;
    margin-bottom: 5px;
}

.sd-plate-body {
    font-size: 11.5px;
    color: #cbd5e1;
    line-height: 1.5;
}

.sd-plate-body strong { color: #fff; }

/* The illustration is reference, not decoration: it gets real width so the
   etched field labels stay legible, and caps out so the full-page view does not
   blow it up past its native 880px. */
.sd-plate-img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 10px auto 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .10);
}

.sd-plate-note {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.45;
}

/* ── controller cards ─────────────────────────────────────────────────────── */
/* 168px is the narrowest these illustrations stay readable at — below that the
   6-button panel and the 2-button panel stop being tellable apart, which is the
   entire job of the picture. The slide-out (≈480px of content) therefore shows
   them stacked or two-up rather than squeezing three across. */
.sd-ctrls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.sd-ctrl {
    display: block;
    text-align: left;
    padding: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #e2e8f0;
    cursor: pointer;
    font: inherit;
}

.sd-ctrl:hover {
    background: rgba(224, 169, 58, .09);
    border-color: rgba(224, 169, 58, .4);
}

.sd-ctrl-on {
    background: rgba(224, 169, 58, .18);
    border-color: rgba(224, 169, 58, .65);
}

.sd-ctrl-on .sd-ctrl-label { color: #e0a93a; }

.sd-ctrl-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 7px;
    background: #111c30;
}

.sd-ctrl-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.sd-ctrl-hint {
    display: block;
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.35;
}

/* ── procedure matching (P2a) ─────────────────────────────────────────────────
   The ranked picker, its chosen-procedure card, and the nothing-matched state.

   ⚠ 28px TAPS. Every row here is a real touch target on a shop tablet held in one
   hand next to a hot smoker — the rows are generous on purpose and must not be
   compacted to fit more of them on screen. If the list is long, it scrolls. */
.sd-match {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
}

.sd-match .sd-h   { margin-bottom: 0; }
.sd-match .sd-sub { margin-bottom: 4px; }

/* A procedure is ON this session — green, matching the "saved" language the
   sales-order card already uses, so "recorded" reads the same way everywhere. */
.sd-match-chosen {
    background: rgba(134, 239, 172, .08);
    border-color: rgba(134, 239, 172, .30);
}

.sd-match-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #86efac;
    background: rgba(134, 239, 172, .14);
    border: 1px solid rgba(134, 239, 172, .30);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Nothing matched is an ANSWER, not a failure — neutral, not red. An operator
   who reads it as an error will go looking for the thing that broke. */
.sd-match-empty {
    background: rgba(148, 163, 184, .07);
    border-color: rgba(148, 163, 184, .22);
}

.sd-match-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.sd-match-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-height: 56px;
    padding: 11px 12px;
    text-align: left;
    font: inherit;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.sd-match-row:hover:not(:disabled) {
    background: rgba(224, 169, 58, .10);
    border-color: rgba(224, 169, 58, .40);
}

.sd-match-row:disabled { opacity: .55; cursor: default; }

/* The top row is the cheapest read on the screen: gold edge, its rank spelled
   out, so the common case ("the first one is right") costs one glance. */
.sd-match-top {
    background: rgba(224, 169, 58, .08);
    border-color: rgba(224, 169, 58, .35);
}

.sd-match-rank {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #e0a93a;
}

.sd-match-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.sd-match-summary {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.35;
}

/* WHY it matched — the badges are the whole point of showing a list rather than
   an answer, so they sit above the score, not beside it. */
.sd-match-why {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 1px;
}

.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
}

.sd-chip b { color: #86efac; font-weight: 700; }

/* A chip worth no points ("applies to every unit") states scope, not strength. */
.sd-chip-flat { opacity: .7; }

.sd-match-score {
    font-size: 10.5px;
    color: #94a3b8;
}

.sd-conf-high   { color: #86efac; }
.sd-conf-medium { color: #fbbf24; }
.sd-conf-low    { color: #94a3b8; }

/* Last row of the list. Deliberately not a match — dashed, no fill, so it reads
   as the way OUT of the list rather than the weakest thing in it. */
.sd-match-none {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .18);
}

.sd-match-none:hover:not(:disabled) {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .30);
}

.sd-match-again {
    align-self: flex-start;
    margin-top: 8px;
}

/* ── P2b hand-off: "write the missing procedure" ────────────────────────────
   Shown inside the sd-match-empty card when the engine found nothing, and after
   an operator answers "None of these". Manager-and-above only; everyone else
   gets the note instead of a button that would 403. */
.sd-buildit {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(224, 169, 58, .14);
    border: 1px solid rgba(224, 169, 58, .45);
    border-radius: 5px;
    color: #e0a93a;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.sd-buildit:hover { background: rgba(224, 169, 58, .22); }

.sd-buildit-note { margin-top: 8px; font-style: italic; }

/* ═══ P3 — THE WALKTHROUGH ═══════════════════════════════════════════════════
   Sized for the 560px slide-out first: this is read off a screen while somebody
   is on the phone, so the current step is the largest thing on it and the answers
   are full-width targets rather than inline links. */

/* Two doors now: an open diagnosis and an unfinished procedure. gap + wrap
   because at 375px the second label cannot share the line with the first, and
   the pair must stack rather than collide. */
.sd-resume-bar {
    display: flex;
    justify-content: flex-end;
    gap: 6px 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sd-walk-start { margin-top: 12px; }

.sd-walk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.sd-walk-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0a93a;
    flex: 1;
    min-width: 0;
}

/* The FROZEN unit snapshot — never re-read from the registry. */
.sd-walk-unit {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 10px;
    margin-bottom: 12px;
    background: rgba(148, 163, 184, .08);
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 5px;
    font-size: 11px;
}
.sd-walk-unit-m { color: #cbd5e1; font-weight: 600; }
.sd-walk-unit-p { color: #94a3b8; }

/* the trail so far */
.sd-trail {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(148, 163, 184, .2);
}
.sd-trail li { margin-bottom: 5px; font-size: 11px; }
.sd-trail-q { display: block; color: #64748b; }
.sd-trail-a { display: block; color: #cbd5e1; font-weight: 600; }

/* warnings — caveat matching fails OPEN, so some of these say why they are here */
.sd-caveats { margin-bottom: 12px; }
.sd-caveat {
    padding: 8px 10px;
    border-radius: 5px;
    margin-bottom: 6px;
    font-size: 12px;
    border-left: 3px solid;
}
.sd-caveat-info    { background: rgba(56, 189, 248, .09);  border-color: #38bdf8; }
.sd-caveat-warning { background: rgba(224, 169, 58, .09);  border-color: #e0a93a; }
.sd-caveat-danger  { background: rgba(239, 68, 68, .11);   border-color: #ef4444; }
.sd-caveat-t { font-weight: 700; margin-bottom: 2px; }
.sd-caveat-b { color: #cbd5e1; white-space: pre-wrap; }
.sd-caveat-u {
    margin-top: 4px;
    font-size: 10px;
    font-style: italic;
    color: #94a3b8;
}

/* IMPORTANT INFORMATION FOR THIS STEP.
   Sits ABOVE the step card — a caution read after the act it qualifies has
   already failed — and looks like neither of the step's two texts: an amber rule
   and a wash where the step is a bordered slate panel, an uppercase label where
   the step has a heading, and no prose treatment at all. It is also unlike a
   caveat above it: no severity icon, no severity colours, because a notice is not
   graded and pretending it might be would invite the question. */
.sd-notice {
    padding: 10px 12px 10px 13px;
    margin-bottom: 10px;
    background: rgba(224, 169, 58, .10);
    border: 1px solid rgba(224, 169, 58, .28);
    border-left: 3px solid #e0a93a;
    border-radius: 5px;
}
.sd-notice-l {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #e0a93a;
    margin-bottom: 3px;
}
.sd-notice-b {
    color: #f1f5f9;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* the current step */
.sd-node {
    padding: 14px;
    background: #111827;
    border: 1px solid rgba(224, 169, 58, .3);
    border-radius: 6px;
    margin-bottom: 12px;
}
.sd-node .sd-h { font-size: 16px; margin-bottom: 6px; }
.sd-node-body {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.sd-node-staff {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #e0a93a;
    background: rgba(224, 169, 58, .15);
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.sd-node-instruction { border-color: rgba(148, 163, 184, .3); }

/* answers — full-width targets, not inline links */
.sd-answers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sd-answer {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 6px;
    color: #e2e8f0;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.sd-answer:hover:not([disabled]) {
    border-color: #e0a93a;
    background: rgba(224, 169, 58, .1);
}
.sd-answer[disabled] { opacity: .5; cursor: default; }
.sd-answer-end {
    display: block;
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}

.sd-walk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* the outcome */
.sd-outcome {
    padding: 14px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 6px;
    margin-bottom: 12px;
}
.sd-outcome-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4ade80;
    margin-bottom: 4px;
}
.sd-outcome .sd-h { font-size: 16px; }
.sd-outcome-body { color: #cbd5e1; margin: 6px 0; white-space: pre-wrap; }
.sd-outcome-sec { margin-top: 8px; font-size: 12px; color: #cbd5e1; white-space: pre-wrap; }
.sd-outcome-sec > span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4ade80;
    margin-bottom: 1px;
}

/* a branch a customer may not walk (P6 renders this; the rule lives in P3) */
.sd-walk-blocked {
    padding: 14px;
    background: rgba(224, 169, 58, .09);
    border: 1px solid rgba(224, 169, 58, .35);
    border-radius: 6px;
}

/* resume list */
.sd-resume-list { display: flex; flex-direction: column; gap: 6px; }
.sd-resume-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 6px;
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
}
.sd-resume-row:hover { border-color: #e0a93a; }
.sd-resume-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sd-resume-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 3px;
}
.sd-resume-paused { background: rgba(224, 169, 58, .18); color: #e0a93a; }
.sd-resume-active { background: rgba(56, 189, 248, .18); color: #38bdf8; }
.sd-resume-unit { font-weight: 600; font-size: 13px; }
.sd-resume-proc { display: block; font-size: 12px; color: #cbd5e1; }
.sd-resume-step { display: block; font-size: 11px; color: #64748b; }

/* ── UNFINISHED PROCEDURES ──────────────────────────────────────────────────
   The draft list borrows the resume row's shape on purpose: they are the same
   act (pick something back up) reached from the same bar, and giving them two
   looks would suggest two different kinds of resumption. It is a SEPARATE class
   rather than a shared one because the click handlers must not overlap — see the
   ordering note in the click handler. */
.sd-draft-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 6px;
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
}
.sd-draft-row:hover { border-color: #e0a93a; }

/* The status word itself, wherever a procedure is named — the builder header,
   the draft list, the parked-draft note. ONE class so "Draft" cannot come to
   mean three different-looking things across three screens. */
.sd-status-pill {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.sd-status-draft     { background: rgba(224, 169, 58, .18); color: #e0a93a; }
.sd-status-published { background: rgba(52, 211, 153, .16); color: #34d399; }
.sd-status-retired   { background: rgba(148, 163, 184, .16); color: #94a3b8; }

/* The parked draft, stated on the screen the builder dropped back to. Bordered
   in the draft colour rather than the error/ok palette: it is neither a problem
   nor a completion, it is a thing waiting. */
.sd-draftnote {
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(224, 169, 58, .07);
    border: 1px solid rgba(224, 169, 58, .32);
    border-radius: 6px;
}
.sd-draftnote-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.sd-draftnote-title { font-weight: 600; font-size: 13px; color: #f1f5f9; }
.sd-draftnote-sub   { font-size: 12px; color: #cbd5e1; line-height: 1.45; }
.sd-draftnote-acts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* The two ways out of the builder, side by side. The draft exit is deliberately
   NOT a quiet link: it is the answer to "I have to stop", and an operator who
   cannot see it concludes the only exit is the button that is refusing them. */
/* The sentence explains BOTH buttons, so it takes its own line rather than
   competing with them for the row — at 560px and at 375px it would otherwise
   squeeze the two actions into two words each. */
.sd-bexit-nav .sd-hint { flex: 1 0 100%; }
.sd-bexit-nav .sd-build-draft-exit {
    border-color: rgba(224, 169, 58, .38);
    color: #e0a93a;
}
.sd-bexit-nav .sd-build-draft-exit:hover:not(:disabled) {
    background: rgba(224, 169, 58, .12);
}

/* ── P4: reference documents on the walkthrough ─────────────────────────────
   Attachment matching fails CLOSED, so nothing here is ever "maybe yours" — the
   styling says settled reference material, not a warning. */
/* ─── PICTURES OF THE STEP ──────────────────────────────────────────────── */
/* Inline, under the words they illustrate. The tool runs in a ~600px iframe on
   the storefront and in a slide-out in the Hub, so the grid wraps rather than
   assuming a width, and each picture is capped in HEIGHT — a portrait phone
   photo left to its own aspect ratio would push the answer buttons off the
   screen, which is the one thing a diagnostic step must never do. */
.sd-stepimgs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.sd-stepimg {
    margin: 0;
    flex: 1 1 220px;
    max-width: 100%;
    min-width: 0;
}
.sd-stepimg a { display: block; }
.sd-stepimg img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 5px;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, .2);
}
.sd-stepimg figcaption {
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
    margin-top: 4px;
}

.sd-files { margin-bottom: 12px; }
.sd-files-h {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 5px;
}
.sd-file {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 5px;
    text-decoration: none;
    color: #e2e8f0;
    font-size: 12px;
}
.sd-file:hover { border-color: #38bdf8; }
.sd-file-i { font-size: 15px; line-height: 1.2; }
.sd-file-t { flex: 1; min-width: 0; font-weight: 600; }
.sd-file-d { display: block; font-weight: 400; color: #94a3b8; margin-top: 1px; }
.sd-file-w { display: block; font-weight: 400; font-size: 10px; color: #64748b; margin-top: 2px; }

/* ── P5: parts a step calls for ─────────────────────────────────────────────
   Hub-side these are a note for whoever raises the order — no add-to-cart here;
   staff put parts on a Sales Order. P6 renders the same data as buttons. */
.sd-parts { margin-bottom: 12px; }
.sd-parts-h {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 5px;
}
.sd-part {
    padding: 8px 10px;
    margin-bottom: 5px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .25);
    border-left: 3px solid #4ade80;
    border-radius: 5px;
    font-size: 12px;
}
.sd-part-call { border-left-color: #e0a93a; }
.sd-part-n { font-weight: 600; }
.sd-part-q { color: #94a3b8; font-weight: 400; }
.sd-part-req {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4ade80;
    background: rgba(34, 197, 94, .15);
    padding: 1px 5px;
    border-radius: 3px;
}
.sd-part-m { color: #94a3b8; font-size: 11px; margin-top: 1px; }
.sd-part-w { color: #e0a93a; font-size: 11px; margin-top: 3px; }

/* ── P7: send the diagnosis to the customer (Hub only) ──────────────────────
   The link is always present and copyable, even when a channel is unavailable —
   which is the state SMS is in until a Southern Pride sending number exists. */
.sd-share-bar { margin: 12px 0; }

.sd-share {
    margin: 12px 0;
    padding: 12px;
    background: #111827;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 6px;
}
.sd-share-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 8px;
}
.sd-share-url { display: flex; gap: 6px; margin-bottom: 4px; }
.sd-share-url .sd-in { flex: 1; font-size: 11px; }
.sd-share-row { display: flex; gap: 6px; margin-top: 8px; }
.sd-share-row .sd-in { flex: 1; }
/* Not disabled — the field and the button both still work and produce a message
   that explains the gate. A greyed control that says nothing is a dead end. */
.sd-share-row-off { opacity: .75; }
.sd-share-gated { color: #e0a93a; }

.sd-share-hist { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, .15); }
.sd-share-hist-h {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: 4px;
}
.sd-share-hist-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #94a3b8;
    padding: 2px 0;
}
.sd-share-sent    { color: #86efac; }
.sd-share-failed  { color: #fca5a5; }
.sd-share-dry_run { color: #64748b; font-style: italic; }

.sd-msg-info {
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .3);
    color: #7dd3fc;
}

/* ══ WHO CALLED (capture without a customer record) ═════════════════════════
   Sits inside .sd-cust-none, under the customer search, so the visual order is
   the working order: look them up first, take a name only if that fails. */
.sd-caller {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.sd-caller-h {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.sd-caller-row { display: flex; gap: 6px; }
/* Name takes the room — a phone number is a known width and a name is not. */
.sd-caller-row .sd-caller-name  { flex: 1 1 60%; }
.sd-caller-row .sd-caller-phone { flex: 1 1 40%; }

/* The same two facts once the session exists: a read, not a form. */
.sd-caller-known {
    font-size: 12px;
    color: #cbd5e1;
    padding: 6px 10px;
    background: rgba(56, 189, 248, .08);
    border: 1px solid rgba(56, 189, 248, .22);
    border-radius: 5px;
    margin-bottom: 12px;
}
.sd-caller-known strong { color: #38bdf8; }
.sd-caller-known-p { color: #94a3b8; margin-left: 8px; }

/* ══ CANCEL / RESET ═════════════════════════════════════════════════════════
   Deliberately a LINK, not a button: it sits beside Start and beside the walk
   controls, and a second solid button next to the primary one would read as a
   second thing to press rather than the way out. */
.sd-cancel {
    color: #94a3b8;
    align-self: center;
}
.sd-cancel:hover { color: #fca5a5; }
.sd-cancel[disabled] { opacity: .5; cursor: default; }
/* On a step-nav row, push it to the far end so it can never be mistaken for the
   next step in the flow. */
.sd-cancel-bar { margin-left: auto; }

/* ── KEEP OUT OF THE HELP WIDGET'S CORNER ─────────────────────────────────
   app.css .legend-btn is a 44px circle fixed at bottom:20px right:20px — a
   ~64px square the viewport's bottom-right corner is never free of, at any
   scroll position. On the FULL page this tool runs to the viewport edge, and
   the rows that carry Clear put it at the far right end (margin-left:auto), so
   it landed underneath the widget at every width measured: at 1920 the link
   spanned x 1816-1892 against the widget's 1856-1900, and at 375 the widget
   owned the link's exact centre.

   Reserving the column is the fix, not a bigger z-index: two controls stacked
   in one corner still means aiming at a 26px sliver of the one underneath.

   Gated on body.app — the Hub chrome — and NOT on the two bodies that have no
   widget to dodge: the slide-out iframe (body.spot-diag-embed; layouts/main.php
   now keeps every floating-chrome script to the parent window, so the panel's
   corner is genuinely free and a 72px gutter in 560px would just be lost width)
   and the public tool (body.spot-diagnose-public, which renders no Hub chrome at
   all and must not gain a margin it has no reason for). */
body.app:not(.spot-diag-embed) .sd-step-nav,
body.app:not(.spot-diag-embed) .sd-walk-actions {
    padding-right: 72px;
}

/* ══ P2b IN THE PANEL — the mid-call procedure builder ══════════════════════ */

.sd-buildit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.sd-buildit-row .sd-hint { flex: 1 0 100%; }

/* ═══ THE IN-PANEL PROCEDURE BUILDER ══════════════════════════════════════
   Two panes: the editor (step cards, each owning its answers) and the flow
   chart. The chart is a RENDER of the same adjacency list the cards edit —
   see the header block in spot-diagnostic.js for the model.

   ── WIDTH, AND WHERE IT COMES FROM ────────────────────────────────────────
   The tool is normally iframed by a 560px slide-out. 560px is right for the
   capture form (single column) and wrong for this screen, so the builder asks
   its host for room over postMessage and main.php's panel answers with
   .spot-diag-wide (75vw on a desktop, 100vw under 900px) — that rule lives in
   spot-diag-slideout.css. Everything below keys off the width the frame
   actually GETS, not off which surface it is, so the full page at /spot/
   diagnostic lays out identically at the same width and there is one
   breakpoint to reason about.

   ── 375px ─────────────────────────────────────────────────────────────────
   The chart is DESKTOP-ONLY and hidden below 820px. A layered graph in 360
   CSS pixels is unreadable at any node size, and shrinking it would make the
   one thing it exists for — seeing the shape at a glance — impossible. It
   degrades to a line of text pointing at the "what's left" list, which is
   already the complete written account of every defect the chart draws
   (unreachable steps, answers with no destination, loops), so nothing is only
   available in the picture. */

.sd-bstart {
    padding: 12px;
    background: rgba(148, 163, 184, .06);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 6px;
}
.sd-bstart .sd-in { margin: 8px 0; }

/* ── the two panes, in TWO MODES ────────────────────────────────────────── */
.sd-build2 { display: block; }

/* LIST mode keeps the older rule: the cards, and the chart beside them on a
   desktop only. */
.sd-build2-list .sd-bpane-chart { display: none; }

@media (min-width: 820px) {
    .sd-build2-list {
        display: grid;
        grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .sd-build2-list .sd-bpane-chart { display: block; }
    .sd-bnochart { display: none; }
}

/* CHART mode (the default since 2026-09-10): the chart IS the editor at every
   width, and the step being edited sits in a drawer — a column beside the chart
   on a desktop, a sheet sliding up over it at 375px. */
.sd-build2-chart { position: relative; }
.sd-build2-chart .sd-bpane-chart { display: block; position: static; }

@media (min-width: 820px) {
    .sd-build2-chart {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        gap: 14px;
        align-items: start;
    }
}

.sd-bnochart {
    margin: 10px 0 4px;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ── the one save indicator ─────────────────────────────────────────────── */
.sd-bbar {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0 8px;
}
.sd-bsave {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(148, 163, 184, .12);
    color: #94a3b8;
    white-space: nowrap;
}
.sd-bsave-saving { color: #e0a93a; background: rgba(224, 169, 58, .14); }
.sd-bsave-saved  { color: #86efac; background: rgba(134, 239, 172, .12); }
.sd-bsave-error  { color: #fca5a5; background: rgba(252, 165, 165, .14); white-space: normal; }
.sd-bbar-hint    { font-size: 11px; color: #64748b; flex: 1 1 160px; }

/* ── what's left: three bands, only the first one blocks ────────────────── */
.sd-bleft { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.sd-bband {
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(148, 163, 184, .18);
    border-left-width: 3px;
}
.sd-bband-stop { border-left-color: #fca5a5; }
.sd-bband-open { border-left-color: #7dd3fc; }
.sd-bband-warn { border-left-color: rgba(224, 169, 58, .8); }

.sd-bband-h {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
    color: #cbd5e1;
}
.sd-bband-stop .sd-bband-h { color: #fca5a5; }
.sd-bband-open .sd-bband-h { color: #7dd3fc; }
.sd-bband-warn .sd-bband-h { color: #e0a93a; }

.sd-bitem { padding: 6px 0; border-top: 1px solid rgba(148, 163, 184, .12); }
.sd-bitem:first-of-type { border-top: 0; }

/* The action first and in the operator's words; the rule underneath it, small.
   The old panel had only the rule. */
.sd-bitem-do  { font-size: 13px; font-weight: 600; color: #e2e8f0; line-height: 1.35; }
.sd-bitem-why { font-size: 11px; color: #94a3b8; margin-top: 2px; line-height: 1.35; }

.sd-bact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sd-bact {
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(224, 169, 58, .14);
    border: 1px solid rgba(224, 169, 58, .45);
    color: #e0a93a;
    cursor: pointer;
}
.sd-bact:hover  { background: rgba(224, 169, 58, .26); }
.sd-bact:focus-visible { outline: 2px solid #e0a93a; outline-offset: 1px; }

.sd-bleft-clear {
    padding: 8px 10px;
    background: rgba(134, 239, 172, .08);
    border: 1px solid rgba(134, 239, 172, .25);
    border-radius: 6px;
}
.sd-bleft-clear .sd-bleft-h   { font-size: 13px; font-weight: 600; color: #86efac; }
.sd-bleft-clear .sd-bleft-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* ── a step, and the answers that belong to it ──────────────────────────── */
.sd-btree { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }

.sd-bnode {
    padding: 10px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(148, 163, 184, .2);
    border-left: 3px solid rgba(148, 163, 184, .35);
    border-radius: 6px;
}
/* The start step is the one the operator has to find again. */
.sd-bnode-root    { border-left-color: #e0a93a; }
.sd-bnode-outcome { border-left-color: #86efac; }
/* The step the chart is pointing at. */
.sd-bnode-on {
    border-color: rgba(224, 169, 58, .55);
    box-shadow: 0 0 0 1px rgba(224, 169, 58, .35);
}

/* ── THE FOLD ───────────────────────────────────────────────────────────────
   Every step is ONE LINE until it is opened: number, type, audience, the title
   cut to fit, how many answers, a warning glyph, a caret. The header is a real
   button so the keyboard opens it too. Only the title may shrink. */
.sd-bnode-h {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #e2e8f0;
    cursor: pointer;
}
.sd-bnode-h:hover .sd-bnh-title { color: #fff; }
.sd-bnode-h:focus-visible { outline: 2px solid #e0a93a; outline-offset: 2px; }
.sd-bnode-h > * { flex: 0 0 auto; }
.sd-bnh-type, .sd-bnh-aud, .sd-bnh-count {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    white-space: nowrap;
}
.sd-bnh-type-outcome   { color: #86efac; }
.sd-bnh-aud-staff_only { color: #e0a93a; }
.sd-bnh-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.sd-bnh-untitled { color: #64748b; font-weight: 500; font-style: italic; }
/* Amber = worth fixing or unfinished; red = stops it publishing. The title
   attribute carries the sentences, the band above carries the buttons. */
.sd-bnh-warn       { font-size: 13px; line-height: 1; color: #e0a93a; cursor: help; }
.sd-bnh-warn-error { color: #fca5a5; }
.sd-bnh-caret {
    font-size: 11px;
    color: #64748b;
    transition: transform .15s ease;
}
.sd-bnode-closed .sd-bnh-caret  { transform: rotate(-90deg); }
/* Hidden, not removed — the fields keep their values behind the fold. */
.sd-bnode-closed .sd-bnode-body { display: none; }
.sd-bnode-body   { margin-top: 8px; }
/* Compact when folded — thirty steps should read as a list. */
.sd-bnode-closed { padding: 6px 10px; }

/* The type, the audience and the tools: first in the OPEN card, where the
   header used to keep them. */
.sd-bnode-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}
.sd-bnode-ctl .sd-in { width: auto; flex: 0 1 auto; padding: 4px 8px; font-size: 12px; }
.sd-bnode-tools { margin-left: auto; display: flex; gap: 6px; }

/* Expand all / Collapse all, above the list. */
.sd-btree-ctl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.sd-btree-n    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #cbd5e1; }
.sd-btree-hint { font-size: 11px; color: #64748b; flex: 1 1 auto; }

@media (max-width: 479px) {
    /* "Everyone" is the default and says nothing at 375px; the exception still shows. */
    .sd-bnh-aud-both { display: none; }
}

.sd-bnode-num {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #e0a93a;
    background: rgba(224, 169, 58, .15);
    border-radius: 3px;
    padding: 3px 7px;
    align-self: center;
}

/* Every field says what it is. The old cards were three unlabelled boxes. */
.sd-bfield { display: block; margin-bottom: 8px; }
.sd-bfield-inline { display: inline-flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
.sd-blab {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 3px;
}
/* A note under a field, for the one field whose rules are not obvious from its
   label — where the text lands, and whose visibility it inherits. */
.sd-bhint {
    display: block;
    font-size: 10px;
    line-height: 1.45;
    color: #64748b;
    margin-top: 3px;
}
.sd-bnode-end {
    font-size: 11px;
    color: #86efac;
    background: rgba(134, 239, 172, .08);
    border-radius: 4px;
    padding: 5px 8px;
}

/* ─── PICTURES ON A STEP, IN THE PANEL ──────────────────────────────────────
   Same rows and the same endpoint as the full page; a narrower column, so the
   thumb is smaller and the actions sit in a row rather than a stack. */
.sd-bpics {
    border-top: 1px dashed rgba(148, 163, 184, .2);
    margin-top: 10px;
    padding-top: 9px;
}
.sd-bpic {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 8px;
    margin-bottom: 5px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 5px;
}
/* Contained, not cropped: a portrait shot of a control board and a wide wiring
   photo have to sit in one column without either losing the thing the caption
   is pointing at. */
.sd-bpic-th {
    flex: 0 0 74px;
    width: 74px;
    height: 58px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, .18);
}
.sd-bpic-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sd-bpic-b { flex: 1; min-width: 0; }
.sd-bpic-cap { width: 100%; font-size: 12px; padding: 4px 6px; }
.sd-bpic-web {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 11px;
    color: #cbd5e1;
}
.sd-bpic-m { display: block; font-size: 10px; color: #64748b; margin-top: 3px; word-break: break-all; }
.sd-bpic-m em { color: #e0a93a; font-style: normal; }
.sd-bpic-a { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.sd-bpic-a .sd-bbtn { min-width: 30px; text-align: center; padding: 3px 6px; }
/* Faded, not blank — a single picture has BOTH arrows disabled, and at a lower
   opacity the glyphs vanish and read as a broken control rather than an
   unavailable one. */
.sd-bpic-a .sd-bbtn[disabled] { opacity: .5; cursor: default; }
.sd-bpic-note {
    font-size: 10px;
    color: #94a3b8;
    margin: 4px 0 6px;
    padding: 5px 7px;
    border-left: 2px solid rgba(224, 169, 58, .5);
    background: rgba(224, 169, 58, .06);
}
.sd-bpic-msg { margin-top: 6px; font-size: 11px; }

/* THE PASTE TARGET. A real button, so it takes focus — which is the entire
   targeting mechanism — and so the focus ring is a visible answer to "which step
   will this land on". Dashed until it is armed, solid amber when it is. */
.sd-bpaste {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 10px;
    text-align: left;
    font: inherit;
    color: #94a3b8;
    background: rgba(148, 163, 184, .05);
    border: 1px dashed rgba(148, 163, 184, .35);
    border-radius: 5px;
    cursor: pointer;
}
.sd-bpaste:hover { border-color: rgba(224, 169, 58, .5); color: #cbd5e1; }
.sd-bpaste:focus,
.sd-bpaste-over {
    outline: none;
    border-style: solid;
    border-color: #e0a93a;
    background: rgba(224, 169, 58, .12);
    color: #f1f5f9;
}
.sd-bpaste[disabled] { cursor: default; opacity: .7; }
.sd-bpaste-i { margin-right: 6px; font-size: 13px; }
.sd-bpaste-t { font-size: 12px; font-weight: 600; }
/* The armed state says so in words as well as in colour — a focus ring alone is
   not an answer for anyone who cannot see the amber. */
.sd-bpaste:focus .sd-bpaste-t::after {
    content: ' — ready, paste now';
    font-weight: 400;
    color: #e0a93a;
}
.sd-bpaste-s { display: block; font-size: 10px; margin-top: 2px; color: #64748b; }
.sd-bpaste:focus .sd-bpaste-s { color: #94a3b8; }
.sd-bpic-file {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: 10px;
    color: #64748b;
}
.sd-bpic-file input[type="file"] { font-size: 10px; color: #94a3b8; max-width: 210px; }

.sd-bbtn {
    padding: 5px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    background: rgba(148, 163, 184, .12);
    border: 1px solid rgba(148, 163, 184, .3);
    color: #cbd5e1;
    cursor: pointer;
}
.sd-bbtn:hover { border-color: #e0a93a; color: #e0a93a; }
.sd-bbtn.sd-primary { background: rgba(224, 169, 58, .2); border-color: #e0a93a; color: #e0a93a; }
.sd-bn-del:hover, .sd-be-del:hover { border-color: #fca5a5; color: #fca5a5; }

/* ── ANSWERS LIVE INSIDE THE STEP ───────────────────────────────────────── */
.sd-banswers {
    margin-top: 10px;
    padding: 8px 8px 8px 10px;
    border-left: 2px solid rgba(224, 169, 58, .35);
    background: rgba(224, 169, 58, .05);
    border-radius: 0 5px 5px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.sd-banswers-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #e0a93a;
}
.sd-banswers-none { font-size: 11px; color: #fca5a5; }

.sd-bedge { width: 100%; }
.sd-bedge-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* "goes to" is what makes the row a sentence rather than two controls. */
.sd-be-arrow {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex: 0 0 auto;
}
.sd-bedge .sd-be-label { flex: 1 1 34%; min-width: 90px; padding: 5px 8px; font-size: 12px; }
.sd-bedge .sd-be-next  { flex: 1 1 44%; min-width: 130px; padding: 5px 8px; font-size: 12px; }
.sd-be-del {
    flex: 0 0 auto;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(148, 163, 184, .12);
    border: 1px solid rgba(148, 163, 184, .3);
    color: #94a3b8;
    cursor: pointer;
}
/* An answer with no destination is visibly unfinished, in the editor as well
   as in the chart. */
.sd-bedge-open .sd-be-next { border-color: rgba(125, 211, 252, .55); }
.sd-be-hint { font-size: 11px; color: #7dd3fc; margin: 4px 0 0 2px; }
.sd-be-note { font-size: 11px; color: #fca5a5; margin: 4px 0 0 2px; line-height: 1.35; }
.sd-bedge-bad .sd-be-next { border-color: #fca5a5; }
.sd-bedge-flash { animation: sd-flash 1.2s ease-out 1; }
@keyframes sd-flash {
    0%   { background: rgba(224, 169, 58, .3); }
    100% { background: transparent; }
}

.sd-be-newrow { display: flex; gap: 6px; width: 100%; margin-top: 6px; flex-wrap: wrap; }
.sd-be-newrow .sd-in { flex: 1 1 160px; padding: 5px 8px; font-size: 12px; }

/* ── PUBLISH ────────────────────────────────────────────────────────────── */
/* Not disabled — blocked. A dead control tells the operator nothing; this one
   takes them to the first thing in the way, which now has a button on it. */
.sd-build-publish.sd-blocked {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .35);
    color: #94a3b8;
}

.sd-bfull {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .15);
}

/* ═══ THE FLOW CHART ═══════════════════════════════════════════════════════
   Absolutely-positioned HTML boxes over an SVG edge layer: the labels wrap,
   the boxes are real buttons, and clicking one is an ordinary click. Sticky so
   the shape stays on screen while the editor scrolls past it. */
.sd-bpane-chart { position: sticky; top: 6px; align-self: start; }

.sd-chart {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 6px;
    background: rgba(0, 0, 0, .22);
    overflow: hidden;
}
.sd-chart-h {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    background: rgba(148, 163, 184, .06);
}
.sd-chart-title { font-size: 12px; font-weight: 700; color: #e0a93a; }
.sd-chart-legend { display: flex; gap: 10px; font-size: 10px; color: #94a3b8; align-items: center; }
.sd-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    font-style: normal;
    font-size: 9px;
    margin-right: 3px;
    border: 1px solid;
}
.sd-lg-q { color: #7dd3fc; border-color: rgba(125, 211, 252, .6); }
.sd-lg-i { color: #cbd5e1; border-color: rgba(203, 213, 225, .5); }
.sd-lg-o { color: #86efac; border-color: rgba(134, 239, 172, .6); }
.sd-lg-x { color: #fca5a5; border-color: rgba(252, 165, 165, .6); }

.sd-chart-scroll { overflow: auto; max-height: calc(100vh - 150px); min-height: 180px; }
.sd-chart-canvas { position: relative; }
.sd-chart-svg { position: absolute; inset: 0; pointer-events: none; }
.sd-chart-foot { font-size: 10px; color: #64748b; padding: 5px 10px; border-top: 1px solid rgba(148, 163, 184, .12); }

.sd-chart-empty { padding: 22px 16px; text-align: center; }
.sd-chart-empty-h { font-size: 13px; font-weight: 600; color: #cbd5e1; }
.sd-chart-empty-s { font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.4; }

/* edges */
.sd-ce { fill: none; stroke: rgba(148, 163, 184, .55); stroke-width: 1.5; }
.sd-ce-back { stroke-dasharray: 5 3; }
/* An answer that leads nowhere, and a loop the server refused — the two
   defects that are hard to see in a list and obvious in a picture. */
.sd-ce-open { stroke: #7dd3fc; stroke-dasharray: 3 3; }
.sd-ce-loop { stroke: #fca5a5; stroke-width: 2; stroke-dasharray: 4 3; }

/* answer labels, riding the middle of their curve */
.sd-cl {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    background: #16181f;
    border: 1px solid rgba(148, 163, 184, .35);
    color: #cbd5e1;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.sd-cl-open { color: #7dd3fc; border-color: rgba(125, 211, 252, .5); }

/* nodes */
.sd-cn {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 6px 8px;
    border-radius: 5px;
    background: #1a1d26;
    border: 1px solid rgba(148, 163, 184, .4);
    color: #e2e8f0;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
}
.sd-cn-question    { border-color: rgba(125, 211, 252, .55); }
.sd-cn-outcome     { border-color: rgba(134, 239, 172, .6); }
.sd-cn-instruction { border-color: rgba(203, 213, 225, .45); }
.sd-cn-root        { box-shadow: inset 3px 0 0 #e0a93a; }
.sd-cn-on          { outline: 2px solid #e0a93a; outline-offset: 1px; }
.sd-cn-stray       { border-style: dashed; border-color: #fca5a5; }
.sd-cn-loop        { border-color: #fca5a5; box-shadow: 0 0 0 1px rgba(252, 165, 165, .5); }
.sd-cn:hover       { background: #22262f; }

.sd-cn-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.sd-cn-question .sd-cn-tag { color: #7dd3fc; }
.sd-cn-outcome  .sd-cn-tag { color: #86efac; }
.sd-cn-t {
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* the "leads nowhere" stub, and the band that holds what the start can't reach */
.sd-cn-open {
    border: 1px dashed #7dd3fc;
    color: #7dd3fc;
    background: rgba(125, 211, 252, .07);
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.sd-cband {
    position: absolute;
    left: 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fca5a5;
    border-top: 1px dashed rgba(252, 165, 165, .5);
    padding-top: 5px;
}

/* ═══ THE CHART AS THE EDITOR (2026-09-10) ═════════════════════════════════
   A fixed-height viewport (`.sd-chart-view`) with an absolutely positioned
   canvas that carries the pan/zoom as one transform. Boxes are DIVs now — they
   hold the Yes / No / + answer / ✕ buttons — and an answer's label is the drag
   handle that re-points it. */
.sd-chart-tools { margin-left: auto; display: flex; gap: 4px; }
.sd-chart-tools .sd-bbtn { padding: 2px 8px; font-size: 12px; line-height: 1.2; min-width: 26px; }

.sd-chart-view {
    position: relative;
    overflow: hidden;
    touch-action: none;
    height: min(calc(100vh - 170px), 640px);
    min-height: 260px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background-image: radial-gradient(rgba(148, 163, 184, .13) 1px, transparent 1px);
    background-size: 18px 18px;
}
.sd-chart-view:active { cursor: grabbing; }
.sd-chart-primary .sd-chart-view { height: clamp(340px, calc(100vh - 330px), 760px); }
@media (max-width: 819px) {
    .sd-chart-primary .sd-chart-view { height: 56vh; min-height: 300px; }
}
.sd-chart-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.sd-chart-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #fca5a5;
    background: rgba(252, 165, 165, .08);
    border-bottom: 1px solid rgba(252, 165, 165, .3);
}
.sd-chart-note-x { margin-left: auto; background: none; border: 0; color: #fca5a5; cursor: pointer; font: inherit; }

.sd-chart-empty-body { padding: 26px 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sd-chart-empty-body .sd-cpop-acts { justify-content: center; margin-top: 6px; }

/* boxes */
.sd-cn { cursor: pointer; user-select: none; -webkit-user-select: none; }
.sd-cn:focus-visible { outline: 2px solid #e0a93a; outline-offset: 2px; }
.sd-cn-top { display: flex; align-items: center; gap: 6px; min-height: 14px; }
.sd-cn-top .sd-cn-tag { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sd-cn-warn { font-size: 12px; line-height: 1; color: #e0a93a; cursor: help; }
.sd-cn-flag-error .sd-cn-warn { color: #fca5a5; }
/* The band above names the defect; the box it is about wears it. */
.sd-cn-flag-error { box-shadow: 0 0 0 2px rgba(252, 165, 165, .5); }
.sd-cn-flag-warn  { box-shadow: 0 0 0 2px rgba(224, 169, 58, .4); }
.sd-cn-root.sd-cn-flag-error { box-shadow: inset 3px 0 0 #e0a93a, 0 0 0 2px rgba(252, 165, 165, .5); }
.sd-cn-root.sd-cn-flag-warn  { box-shadow: inset 3px 0 0 #e0a93a, 0 0 0 2px rgba(224, 169, 58, .4); }
.sd-cn-hot  { background: #2a2f3b; outline: 2px dashed #e0a93a; outline-offset: 2px; }
.sd-cn-drop { background: rgba(125, 211, 252, .18); border-color: #7dd3fc; outline: 2px solid #7dd3fc; outline-offset: 1px; }
.sd-cn-refused { animation: sd-refused 1s ease-out 1; }
@keyframes sd-refused {
    0%, 55% { box-shadow: 0 0 0 3px rgba(252, 165, 165, .85); }
    100%    { box-shadow: none; }
}
.sd-cn-x {
    margin-left: auto;
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: #64748b;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    cursor: pointer;
}
.sd-cn-x:hover { color: #fca5a5; background: rgba(252, 165, 165, .12); }
.sd-cn-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.sd-cn-b {
    font: inherit;
    font-size: 10px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgba(148, 163, 184, .1);
    color: #cbd5e1;
    cursor: pointer;
    white-space: nowrap;
}
.sd-cn-b:hover { border-color: #e0a93a; color: #e0a93a; }
.sd-cn-b-add { border-style: dashed; }
.sd-cn-end { font-size: 10px; color: #86efac; margin-top: auto; }

/* the placeholder — a real button now */
.sd-cn-open {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font: inherit;
}
.sd-cn-open-t { font-size: 10px; font-weight: 700; color: #7dd3fc; }
.sd-cn-open-s { font-size: 9px; color: rgba(125, 211, 252, .75); }
.sd-cn-open:hover, .sd-cn-open:focus-visible { background: rgba(125, 211, 252, .16); outline: none; }

/* the answer label is the drag handle */
.sd-cl { pointer-events: auto; cursor: grab; touch-action: none; }
.sd-cl:hover { border-color: #e0a93a; color: #fff; }
.sd-cl-dragging { opacity: .45; }
.sd-ce-drag { fill: none; stroke: #e0a93a; stroke-width: 2; stroke-dasharray: 5 4; }

/* the popover on the canvas */
.sd-cpop {
    position: absolute;
    z-index: 5;
    width: 256px;
    padding: 9px 10px;
    border-radius: 6px;
    background: #1f232c;
    border: 1px solid rgba(224, 169, 58, .55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}
.sd-cpop-h { font-size: 12px; font-weight: 600; color: #e2e8f0; line-height: 1.35; }
.sd-cpop-s { font-size: 11px; color: #94a3b8; line-height: 1.4; }
.sd-cpop .sd-in { padding: 5px 8px; font-size: 12px; width: 100%; }
.sd-cpop-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sd-cpop-err { font-size: 11px; color: #fca5a5; line-height: 1.35; }
.sd-cpop-danger { border-color: #fca5a5; color: #fca5a5; }
.sd-cpop-danger:hover { background: rgba(252, 165, 165, .15); border-color: #fca5a5; color: #fca5a5; }

/* Chart | List */
.sd-bmode { margin-left: auto; display: inline-flex; }
.sd-bmode-b { border-radius: 0; }
.sd-bmode-b:first-child { border-radius: 4px 0 0 4px; }
.sd-bmode-b:last-child  { border-radius: 0 4px 4px 0; margin-left: -1px; }
.sd-bmode-on { background: rgba(224, 169, 58, .2); border-color: #e0a93a; color: #e0a93a; position: relative; z-index: 1; }

/* the drawer */
.sd-bdrawer {
    background: #16181f;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 6px;
    padding: 10px;
}
.sd-bdrawer .sd-btree { margin: 0; }
.sd-bdrawer .sd-bnode-h { cursor: default; }
.sd-bdrawer .sd-bnh-caret { display: none; }
.sd-bdrawer-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sd-bdrawer-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #e0a93a; }
.sd-bdrawer-x { margin-left: auto; }
.sd-bdrawer-empty { padding: 18px 8px; }
@media (min-width: 820px) {
    .sd-bdrawer { position: sticky; top: 6px; max-height: calc(100vh - 20px); overflow: auto; }
}
@media (max-width: 819px) {
    .sd-bdrawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        max-height: 86vh;
        overflow: auto;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
        transform: translateY(105%);
        transition: transform .2s ease;
    }
    .sd-bdrawer-open { transform: none; }
}

/* a what's-left item that names a step opens it */
.sd-bitem-go { cursor: pointer; border-radius: 4px; }
.sd-bitem-go:hover { background: rgba(224, 169, 58, .08); }

/* parts on a step */
.sd-bparts { border-top: 1px dashed rgba(148, 163, 184, .2); margin-top: 10px; padding-top: 9px; }
.sd-bpart { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 11px; padding: 4px 0; }
.sd-bpart-n { color: #e2e8f0; font-weight: 600; }
.sd-bpart-m { color: #94a3b8; }
.sd-bpart-call { color: #e0a93a; }
.sd-bpart-x { margin-left: auto; }
.sd-bpart-q { margin-top: 6px; }
.sd-bpart-res { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; max-height: 220px; overflow: auto; }
.sd-bpart-hit {
    text-align: left;
    font: inherit;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: rgba(148, 163, 184, .08);
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sd-bpart-hit:hover { border-color: #e0a93a; }
.sd-bpart-hit-m { color: #94a3b8; font-size: 10px; }
.sd-bpart-none { font-size: 11px; color: #64748b; padding: 4px 0; line-height: 1.4; }
.sd-bpart-note { margin-top: 6px; }

/* ═══ THE COUNTER BESIDE PUBLISH (bands retired 2026-09-10) ═══════════════════
   One line — "2 blocking · 5 suggestions" — and a popover of the same items the
   bands used to spread over the top of the screen. The band CSS above is what
   the popover's content still uses. */
.sd-walk-head .sd-bmode { margin-left: 0; }
/* The embedded page carries the Hub's FIXED top-right chrome — the SMS inbox
   button and the notification bell, ~120px of it, z 10060. The title line keeps
   Chart | List at its LEFT and leaves that end to them. */
.spot-diag-embed .sd-walk-head { padding-right: 120px; }
.sd-bcount-wrap { position: relative; display: inline-flex; }
.sd-bcount {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(148, 163, 184, .1);
    color: #cbd5e1;
    cursor: pointer;
    white-space: nowrap;
}
.sd-bcount:hover, .sd-bcount[aria-expanded="true"] { border-color: #e0a93a; color: #fff; }
.sd-bcount-stop { border-color: rgba(252, 165, 165, .6); color: #fca5a5; background: rgba(252, 165, 165, .1); }
.sd-bcount-warn { border-color: rgba(224, 169, 58, .6); color: #e0a93a; background: rgba(224, 169, 58, .1); }
.sd-bcount-ok   { border-color: rgba(134, 239, 172, .5); color: #86efac; background: rgba(134, 239, 172, .08); cursor: default; }
.sd-bpop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 70;
    width: min(420px, calc(100vw - 32px));
    max-height: 60vh;
    overflow: auto;
    padding: 10px;
    border-radius: 8px;
    background: #1f232c;
    border: 1px solid rgba(224, 169, 58, .5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.sd-bpop[hidden] { display: none; }
.sd-bpop .sd-bleft { margin: 0; }
.sd-bpop .sd-bitem-do { font-size: 12px; }
.sd-bpop-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #e0a93a; }
.sd-bpop-x { margin-left: auto; }
.sd-bexit-nav .sd-bsave { margin-left: auto; }
/* A PUBLISHED tree in the builder: no Publish, a green Done, and the counter
   reads "Live — no issues". The exit is the same function as the draft exit. */
.sd-bexit-nav .sd-build-done {
    border-color: rgba(134, 239, 172, .5);
    color: #86efac;
}
.sd-bexit-nav .sd-build-done:hover:not(:disabled) { background: rgba(134, 239, 172, .12); }

/* Hosted inside /spot/procedures/{id} ("Edit in chart"): the frame is the page's
   full content width and most of its height, so the chart viewport takes the room
   the slide-out never had. */
.spot-diag-hostpage .sd-chart-primary .sd-chart-view { height: clamp(420px, calc(100vh - 250px), 900px); }

@media (max-width: 819px) {
    .sd-bpop {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-height: 70vh;
    }
}