/* ============================================================================
   Shared customer lifecycle panel - styles
   Single source of truth for the #liveSO slide-out used by BOTH the Customers
   page (pages/01) and the Appointments page (pages/03). Only the slideout-
   specific rules live here; generic primitives (.badge, .btn, .empty, .meta,
   .skel) are provided by each page's own design system / canon stylesheet.
   Token-driven only - no hardcoded brand colour.
   ========================================================================== */

/* slide-out shell */
.so-backdrop{position:fixed;inset:0;background:var(--surface-modal-overlay,rgba(0,0,0,.5));opacity:0;pointer-events:none;transition:opacity var(--duration-medium,.18s) var(--ease);z-index:var(--z-modal,1000)}
.so-backdrop.open{opacity:1;pointer-events:auto;background:rgba(0,0,0,.5);backdrop-filter:blur(1.5px)}
.so-panel{position:fixed;top:0;right:0;bottom:0;width:clamp(360px,32vw,460px);max-width:94vw;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;transform:translateX(100%);transition:transform var(--duration-slow,.26s) var(--ease),right var(--motion-slow,.24s) ease;z-index:calc(var(--z-modal,1000) + 1);display:flex;flex-direction:column;box-shadow:-24px 0 60px -20px rgba(0,0,0,.55)}
.so-panel.open{transform:translateX(0)}
.so-head{padding:var(--space-lg) var(--space-lg) var(--space-md);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--surface);z-index:var(--z-raised,2)}
.so-name{font-family:var(--font-heading);font-size:var(--fs-lg,1.125rem);font-weight:var(--fw-semibold,600)}
.so-sub{font-size:var(--fs-xs,.75rem);color:var(--text-tertiary);font-family:var(--font-mono);margin-top:4px}
#liveSO .so-call-btn{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-sm);padding:6px 13px;border-radius:var(--radius-pill,999px);border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);font-family:inherit;font-size:var(--text-sm,.8rem);font-weight:var(--fw-semibold,600);cursor:pointer;transition:background .15s ease}
#liveSO .so-call-btn:hover{background:color-mix(in srgb, var(--accent) 26%, transparent)}
#liveSO .so-call-btn i{font-size:.75rem}
.so-close{position:absolute;top:var(--space-md);right:var(--space-md);z-index:2;appearance:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--color-bg-glass,rgba(255,255,255,.06));color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;padding:0}.so-close:hover{border-color:var(--text-tertiary)}
.so-body{flex:1;padding:0 var(--space-lg) var(--space-md)}

/* sections + field rows */
.slideout-section{margin-top:var(--space-lg)}
.slideout-section:first-child{margin-top:0}
.slideout-section-title{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-sm)}
.field-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm)}
.field-row:last-child{border-bottom:0}
.field-label{color:var(--text-tertiary)}
.field-value{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* call summaries */
.so-calls{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-sm);padding-right:4px}
.so-call{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-sm)}
.so-call:last-child{border-bottom:0;padding-bottom:0}
.so-call-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);margin-bottom:5px}
.so-call-tag{text-transform:capitalize;letter-spacing:.02em;padding:1px 7px;border-radius:var(--radius-pill);background:var(--glass-bg);color:var(--text-secondary)}
.so-call-tag.ok{background:var(--ok-bg,var(--glass-bg));color:var(--ok)}
.so-call-body{font-size:var(--text-sm);color:var(--text);line-height:1.5}
/* older calls collapse to a one-line, expand-on-click row */
.so-call-mini{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-sm)}
.so-call-mini:last-child{border-bottom:0;padding-bottom:0}
.so-call-mini>.so-call-body{margin-top:6px}
.so-call-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}
.so-call-sum::-webkit-details-marker{display:none}
.so-call-when{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);flex-shrink:0}
.so-call-gist{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.so-call-mini .so-call-tag{flex-shrink:0}

/* memory: inline stat chips + short labelled lines with more/less */
.so-stats{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.so-stat{display:inline-flex;flex-direction:column;gap:2px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:6px 10px;min-width:72px}
.so-stat-k{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.so-stat-v{font-size:var(--text-sm);color:var(--text);font-variant-numeric:tabular-nums}
.so-mem-line{display:flex;flex-direction:column;gap:2px;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm)}
.so-mem-line:last-child{border-bottom:0}
.so-mem-k{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.so-mem-v{color:var(--text);line-height:1.5}
.so-more{background:none;border:0;color:var(--accent);cursor:pointer;font-family:var(--font-mono);font-size:var(--text-2xs);padding:0 2px;margin-top:2px;align-self:flex-start}
.so-more:hover{text-decoration:underline}

/* risk line - pulled out as the emphasis of the AI narrative, not a fifth equal-weight paragraph */
#liveSO .so-risk-line{display:flex;align-items:baseline;gap:8px;padding:var(--space-sm) var(--space-md);margin:var(--space-sm) 0;border-radius:var(--radius-sm);background:var(--warn-bg);border-left:3px solid var(--warn);font-size:var(--text-sm)}
#liveSO .so-risk-line[data-risk="clear"]{background:var(--ok-bg,var(--glass-bg));border-left-color:var(--ok)}
#liveSO .so-risk-k{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);flex-shrink:0}
#liveSO .so-risk-v{color:var(--text);font-weight:var(--fw-medium,500)}

/* note / calm line */
.so-panel .note{display:flex;gap:var(--space-sm);background:color-mix(in srgb, var(--accent) 6%, transparent);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin:var(--space-sm) 0;font-size:var(--text-sm);color:var(--text-secondary)}
.so-panel .note strong{color:var(--text)}
.so-panel .note .tag{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);flex-shrink:0;padding-top:2px}

/* compact lifecycle timeline */
.lifecycle-timeline{display:flex;align-items:center;gap:0;padding:var(--space-md) 0;overflow-x:auto}
.tl-step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:50px;position:relative}
.tl-step::after{content:'';position:absolute;top:11px;left:60%;right:-40%;height:1px;background:var(--border-subtle);z-index:0}
.tl-step:last-child::after{display:none}
.tl-dot{width:22px;height:22px;border-radius:50%;background:var(--surface-raised);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);color:var(--text-tertiary);position:relative;z-index:1}
.tl-step.done .tl-dot{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.tl-step.done::after{background:var(--accent)}
.tl-step.current .tl-dot{background:var(--bg);border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.tl-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-top:8px;text-align:center}
.tl-step.current .tl-label,.tl-step.done .tl-label{color:var(--text-secondary)}
/* Unknown onboarding_state (never tracked / not honestly derivable yet): every dot dashed
   and dimmed - visibly NOT the same as "hasn't reached this step yet", never dot 0 lit as
   current. See components/lifecycle-timeline.js renderDots(). */
.tl-step.unknown .tl-dot{border-style:dashed;opacity:.55}
.tl-step.unknown::after{background:var(--border-subtle);opacity:.55}
.tl-step.unknown .tl-label{opacity:.55}
.lifecycle-unknown-note{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:var(--space-xs)}

/* onboarding checklist disclosure */
.stages{margin-top:var(--space-md);display:flex;flex-direction:column;gap:8px}
.stage{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.stage-summary{list-style:none;cursor:pointer;padding:10px var(--space-md);display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm)}
.stage-summary::-webkit-details-marker{display:none}
.stage-summary::before{content:'\25B8';color:var(--text-tertiary);transition:transform var(--motion-fast,.12s) var(--ease)}
.stage[open] .stage-summary::before{transform:rotate(90deg)}
.stage-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-tertiary)}
.stage[data-state="done"] .stage-dot{background:var(--ok)}
.stage[data-state="partial"] .stage-dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.stage-name{font-weight:500;color:var(--text)}
.stage-progress{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;color:var(--text-tertiary)}
.stage-pdf-hint{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;color:var(--text-tertiary);margin-right:var(--space-sm)}
.stage-body{padding:0 var(--space-md) var(--space-md) calc(var(--space-md) + 16px)}
.checklist-step{display:grid;grid-template-columns:22px 1fr auto;gap:var(--space-sm);align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--border-subtle);font-size:var(--text-sm)}
.checklist-step:last-child{border-bottom:0}
.check-box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:12px;cursor:pointer;margin-top:2px}
.check-box[data-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.check-label{color:var(--text);display:flex;flex-direction:column;gap:4px;min-width:0}
.check-label small{color:var(--text-tertiary);font-family:var(--font-mono);font-size:var(--text-2xs)}
.check-when{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);white-space:nowrap;align-self:flex-start;padding-top:2px}
/* Step metadata badges (owner / system / auto-derivable vs manual tick) - config-driven from
   vertical_lifecycle_stages.step_meta, see renderStages()/stageDefs() in lifecycle-panel.js. */
.step-badges{display:flex;flex-wrap:wrap;gap:4px}
.step-badge{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:var(--radius-xs);border:1px solid var(--border-subtle);color:var(--text-tertiary);background:var(--surface-raised)}
.step-owner[data-owner="support"]{color:var(--accent)}
.step-owner[data-owner="field"]{color:var(--warn)}
.step-owner[data-owner="customer"]{color:var(--text-secondary)}
.step-owner[data-owner="system"]{color:var(--success,var(--accent))}
.step-auto[data-auto="true"]{border-style:dashed}
.cap-form{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:flex-end;margin:var(--space-xs) 0 var(--space-sm) calc(22px + var(--space-sm))}
.cap-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;text-transform:capitalize;color:var(--text-tertiary)}
.cap-form input{background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);padding:4px 8px;color:var(--text);font-family:var(--font-mono);font-size:var(--text-xs);min-width:160px}

/* location card */
.map{height:160px;background:linear-gradient(135deg,#1A2336 0%,#0F1422 100%);border-radius:var(--radius-md);position:relative;overflow:hidden}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--accent);font-size:1.6rem;filter:drop-shadow(0 4px 12px rgba(152,226,199,.6))}
.map-label{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-secondary);background:rgba(0,0,0,.5);padding:4px 8px;border-radius:var(--radius-xs)}

/* ============================================================================
   PREMIUM LAYER (2026-06-23) - everything below is scoped under #liveSO so the
   shared stylesheet is the single source of truth and wins over the Customers
   page's legacy inline panel rules. Token-driven only, no raw brand colour.
   ========================================================================== */

/* head: a touch of depth + breathing room */
#liveSO .so-head{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)) 0%,var(--surface) 100%);border-bottom:1px solid var(--border-subtle)}
#liveSO .so-name{font-size:var(--fs-lg,1.125rem);letter-spacing:-.01em}

/* section titles get a small leading accent tick */
#liveSO .slideout-section{margin-top:var(--space-lg)}
#liveSO .slideout-section-title{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:var(--space-sm)}
#liveSO .slideout-section-title::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--accent);opacity:.85;flex-shrink:0}

/* grouped field card - lifts the order/account block off the bare panel bg */
#liveSO .so-card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:2px var(--space-md)}
#liveSO .so-card .field-row{padding:var(--space-sm) 0}

/* account+billing merged card: primary facts run 2-up on desktop, 1-up narrow, so the card reads
   as one compact block instead of a long single-column list. Auto-flow means an omitted (empty)
   fact just closes the gap - no dead cell. */
#liveSO .so-fact-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-lg)}
#liveSO .so-fact-grid .field-row{padding:var(--space-sm) 0}
@media (max-width:420px){#liveSO .so-fact-grid{grid-template-columns:1fr}}

/* location: real OSM tile when coordinates exist, token gradient otherwise */
#liveSO .map{height:172px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:radial-gradient(120% 120% at 50% 18%,color-mix(in srgb,var(--accent) 22%,var(--surface-raised)) 0%,var(--surface-raised) 70%)}
#liveSO .map-tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
/* PANEL-1: OSM slippy-tile mosaic (staticmap.openstreetmap.de is gone). The 768px 3x3 grid is
   anchored at the card centre and shifted by the fractional tile offset so the pin sits on the
   building. Attribution chip is an ODbL requirement of tile.openstreetmap.org. */
#liveSO .map-osm{inset:auto;left:50%;top:50%;width:768px;height:768px;object-fit:unset}
#liveSO .map-osm-tile{position:absolute;width:256px;height:256px;filter:saturate(.92) contrast(1.02)}
#liveSO .map-attr{position:absolute;right:6px;bottom:6px;z-index:2;font-size:9px;color:var(--text-tertiary);background:color-mix(in srgb,var(--surface) 70%,transparent);padding:1px 5px;border-radius:var(--radius-xs)}
/* PANEL-1: Go live + Install booking side by side (pair row; stacks on narrow panels) */
#liveSO .so-pair{display:flex;gap:var(--space-sm);align-items:stretch}
#liveSO .so-pair>*{flex:1;min-width:0}
#liveSO .so-pair>*:empty{display:none}
#liveSO .so-pair .slideout-section{margin-top:var(--space-lg)}
@media (max-width:420px){#liveSO .so-pair{flex-direction:column;gap:0}}
#liveSO .map-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--border) 60%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 60%,transparent) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none}
#liveSO .map.map-has-tile .map-grid{display:none}
#liveSO .map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--accent);font-size:1.7rem;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--accent) 55%,transparent));z-index:2}
#liveSO .map-label{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:1px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(4px);border:1px solid var(--border-subtle);padding:6px 10px;border-radius:var(--radius-sm);z-index:2}
#liveSO .map-name{font-size:var(--text-sm);color:var(--text);font-weight:var(--fw-medium,500)}
#liveSO .map-loc{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}

/* lifecycle timeline: stronger dots, current-step pulse */
#liveSO .lifecycle-timeline{padding:var(--space-md) 2px}
#liveSO .tl-dot{width:24px;height:24px;font-weight:var(--fw-semibold,600);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#liveSO .tl-step.done::after,#liveSO .tl-step.done .tl-dot{background:var(--accent);border-color:var(--accent)}
#liveSO .tl-step.current .tl-dot{animation:soPulse 2s var(--ease,ease) infinite}
@keyframes soPulse{0%,100%{box-shadow:0 0 0 4px var(--warn-bg)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--warn) 18%,transparent)}}

/* trust: confidence donut + side stats */
#liveSO .trust-row{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}
#liveSO .trust-donut{position:relative;width:64px;height:64px;flex-shrink:0}
#liveSO .td-track{fill:none;stroke:var(--border-subtle);stroke-width:7}
#liveSO .td-arc{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset var(--duration-slow,.5s) var(--ease)}
#liveSO .td-center{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:1px}
#liveSO .td-pct{font-family:var(--font-heading);font-size:var(--fs-md,1rem);font-weight:var(--fw-semibold,600);color:var(--text)}
#liveSO .td-unit{font-size:var(--text-2xs);color:var(--text-tertiary)}
#liveSO .trust-side{flex:1;min-width:0}
#liveSO .trust-cap{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
#liveSO .trust-side .so-stats{margin-bottom:0}

/* billing and payments */
#liveSO .so-bill-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm)}
#liveSO .so-bill-mrr{display:flex;align-items:baseline;gap:3px}
#liveSO .so-bill-amt{font-family:var(--font-heading);font-size:var(--fs-lg,1.125rem);font-weight:var(--fw-semibold,600);color:var(--text);font-variant-numeric:tabular-nums}
#liveSO .so-bill-cy{font-size:var(--text-2xs);color:var(--text-tertiary)}
#liveSO .so-bill-meta{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--text-tertiary);text-align:right}
#liveSO .so-bill-list{margin-top:var(--space-sm)}
#liveSO .so-bill-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-sm);align-items:center;padding:7px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm)}
#liveSO .so-bill-row:last-child{border-bottom:0}
#liveSO .so-bill-d{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary)}
#liveSO .so-bill-g{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#liveSO .so-bill-st{justify-self:start;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.02em;text-transform:capitalize;padding:1px 8px;border-radius:var(--radius-pill);background:var(--glass-bg);color:var(--text-secondary)}
#liveSO .so-bill-st.ok{background:var(--ok-bg,var(--glass-bg));color:var(--ok)}
#liveSO .so-bill-st.warn{background:var(--warn-bg,var(--glass-bg));color:var(--warn)}
#liveSO .so-bill-amt2{font-variant-numeric:tabular-nums;color:var(--text);text-align:right}
#liveSO .so-bill-amt2.pos{color:var(--ok)}
#liveSO .so-bill-amt2.neg{color:var(--warn)}
#liveSO .so-bill-empty{font-size:var(--text-sm);color:var(--text-tertiary);line-height:1.5}

/* ============================================================================
   TWO-AXIS REBUILD (2026-06-23) - tabs, account-status chip, live fibre feed,
   reliability heatmap, trust pre-state. All bound to semantic status tokens.
   ========================================================================== */

/* header account-status chip (axis B) */
#liveSO .so-head{padding-top:var(--space-md)}
#liveSO .so-status{display:flex;align-items:center;gap:6px;margin-bottom:4px}
#liveSO .so-status-chip{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-semibold,600);letter-spacing:.14em;text-transform:uppercase;padding:2px 9px;border-radius:var(--radius-pill);color:var(--status-active);background:var(--status-active-bg);border:1px solid color-mix(in srgb, var(--status-active) 30%, transparent)}
#liveSO .so-status-chip[data-status="lead"]{color:var(--status-lead);background:var(--status-lead-bg);border-color:color-mix(in srgb, var(--status-lead) 30%, transparent)}
#liveSO .so-status-chip[data-status="shipped"]{color:var(--status-shipped);background:var(--status-shipped-bg);border-color:color-mix(in srgb, var(--status-shipped) 30%, transparent)}
#liveSO .so-status-chip[data-status="active"]{color:var(--status-active);background:var(--status-active-bg);border-color:color-mix(in srgb, var(--status-active) 30%, transparent)}
#liveSO .so-status-chip[data-status="overdue"]{color:var(--status-overdue);background:var(--status-overdue-bg);border-color:color-mix(in srgb, var(--status-overdue) 30%, transparent)}
#liveSO .so-status-chip[data-status="churned"]{color:var(--status-churned);background:var(--status-churned-bg);border-color:color-mix(in srgb, var(--status-churned) 30%, transparent)}
#liveSO .so-test-badge{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);color:var(--warn);background:var(--warn-bg)}

/* inline status pill (Account card + billing meta) */
#liveSO .so-status-inline{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:var(--radius-pill);color:var(--status-active);background:var(--status-active-bg)}
#liveSO .so-status-inline[data-status="lead"]{color:var(--status-lead);background:var(--status-lead-bg)}
#liveSO .so-status-inline[data-status="shipped"]{color:var(--status-shipped);background:var(--status-shipped-bg)}
#liveSO .so-status-inline[data-status="overdue"]{color:var(--status-overdue);background:var(--status-overdue-bg)}
#liveSO .so-status-inline[data-status="churned"]{color:var(--status-churned);background:var(--status-churned-bg)}
#liveSO .so-sys{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary)}

/* tabs */
#liveSO .so-tabs{display:flex;gap:var(--space-md);border-bottom:1px solid var(--border-subtle);margin:var(--space-xs) 0 0;position:sticky;top:0;background:var(--surface);z-index:var(--z-raised,2)}
#liveSO .so-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--text-tertiary);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;padding:10px 2px;cursor:pointer;margin-bottom:-1px}
#liveSO .so-tab:hover{color:var(--text-secondary)}
#liveSO .so-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}
#liveSO .so-pane[hidden]{display:none}

/* go live row */
#liveSO .so-golive{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}

/* live fibre indicator (reads client_building_health, never the button/DB) */
#liveSO .fibre-ind{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:var(--radius-pill);background:var(--glass-bg);color:var(--text-secondary)}
#liveSO .fibre-dot{width:7px;height:7px;border-radius:50%;background:var(--text-tertiary)}
#liveSO .fibre-ind[data-fibre="live"]{color:var(--status-active);background:var(--status-active-bg)}
#liveSO .fibre-ind[data-fibre="live"] .fibre-dot{background:var(--status-active);box-shadow:0 0 0 3px color-mix(in srgb, var(--status-active) 22%, transparent)}
#liveSO .fibre-ind[data-fibre="down"]{color:var(--status-overdue);background:var(--status-overdue-bg)}
#liveSO .fibre-ind[data-fibre="down"] .fibre-dot{background:var(--status-overdue)}
#liveSO .fibre-ind[data-fibre="degraded"]{color:var(--warn);background:var(--warn-bg)}
#liveSO .fibre-ind[data-fibre="degraded"] .fibre-dot{background:var(--warn)}

/* reliability heatmap */
#liveSO .so-hm{margin-bottom:var(--space-sm)}
#liveSO .so-hm-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
#liveSO .so-hm-sq{width:18px;height:18px;border-radius:3px;background:var(--surface-raised);border:1px solid var(--border-subtle)}
#liveSO .so-hm-sq[data-pay="paid"]{background:var(--status-active);border-color:transparent}
#liveSO .so-hm-sq[data-pay="unpaid"]{background:var(--status-overdue);border-color:transparent}
#liveSO .so-hm-sq[data-pay="void"]{background:var(--status-churned);border-color:transparent}
#liveSO .so-hm-sq[data-pay="other"]{background:var(--warn);border-color:transparent}

/* trust pre-state */
#liveSO .trust-pre{padding:var(--space-md);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center}
#liveSO .trust-pre .empty-title{color:var(--text-secondary);margin-bottom:2px}
#liveSO .trust-pre>div:last-child{font-size:var(--text-sm);color:var(--text-tertiary)}

/* ============================================================================
   PANEL-REUSE-FIX (2026-06-23) - reused canonical components ported into the
   shared panel stylesheet (the page links only tokens.css): the coloured status
   card, the connection (line indicator) card, the conic-gradient .donut, and the
   12-month payment-reliability strip. Bound to the semantic status tokens.
   ========================================================================== */

/* dominant coloured status card (axis B) - the bold state cue from the mockup */
#liveSO .so-statuscard{position:relative;border-radius:var(--radius-md);padding:var(--space-md);background:var(--status-active-bg);border:1px solid color-mix(in srgb,var(--status-active) 30%,transparent)}
#liveSO .so-statuscard[data-status="lead"]{background:var(--status-lead-bg);border-color:color-mix(in srgb,var(--status-lead) 30%,transparent)}
#liveSO .so-statuscard[data-status="shipped"]{background:var(--status-shipped-bg);border-color:color-mix(in srgb,var(--status-shipped) 30%,transparent)}
#liveSO .so-statuscard[data-status="active"]{background:var(--status-active-bg);border-color:color-mix(in srgb,var(--status-active) 30%,transparent)}
#liveSO .so-statuscard[data-status="overdue"]{background:var(--status-overdue-bg);border-color:color-mix(in srgb,var(--status-overdue) 30%,transparent)}
#liveSO .so-statuscard[data-status="churned"]{background:var(--status-churned-bg);border-color:color-mix(in srgb,var(--status-churned) 30%,transparent)}
#liveSO .sc-label{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
#liveSO .sc-big{font-family:var(--font-heading);font-size:1.5rem;font-weight:var(--fw-bold,700);line-height:1.05;margin:4px 0 3px;color:var(--status-active)}
#liveSO .so-statuscard[data-status="lead"] .sc-big{color:var(--status-lead)}
#liveSO .so-statuscard[data-status="shipped"] .sc-big{color:var(--status-shipped)}
#liveSO .so-statuscard[data-status="active"] .sc-big{color:var(--status-active)}
#liveSO .so-statuscard[data-status="overdue"] .sc-big{color:var(--status-overdue)}
#liveSO .so-statuscard[data-status="churned"] .sc-big{color:var(--text-secondary)}
#liveSO .sc-meta{font-size:var(--text-xs);color:var(--text);opacity:.85}

/* status + connection side by side - neither needs a full-width bar */
#liveSO .so-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);align-items:stretch}
#liveSO .so-duo>*{min-width:0}
#liveSO .so-duo .sc-big{font-size:1.15rem}
@media (max-width:420px){#liveSO .so-duo{grid-template-columns:1fr}}

/* connection / line indicator card (reused .tile-status pattern) */
#liveSO .so-conncard{border-radius:var(--radius-md);padding:var(--space-md);background:var(--surface-raised);border:1px solid var(--border-subtle)}
#liveSO .so-conncard.st-up{background:color-mix(in srgb,var(--ok) 16%,var(--surface-raised))}
#liveSO .so-conncard.st-down{background:color-mix(in srgb,var(--danger) 16%,var(--surface-raised))}
#liveSO .so-conncard.st-degraded{background:color-mix(in srgb,var(--warn) 16%,var(--surface-raised))}
#liveSO .so-conncard.st-unknown{background:color-mix(in srgb,var(--color-status-muted) 18%,var(--surface-raised))}
#liveSO .so-conncard .sc-big{font-size:1.25rem;color:var(--ok)}
#liveSO .so-conncard.st-down .sc-big{color:var(--danger)}
#liveSO .so-conncard.st-degraded .sc-big{color:var(--warn)}
#liveSO .so-conncard.st-unknown .sc-big{color:var(--text-secondary)}
#liveSO .so-conn-last{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);margin-top:6px}

/* conic-gradient donut (canonical 00-global donut; defined locally since the page links only tokens.css) */
#liveSO .donut{border-radius:var(--radius-circle);position:relative;flex-shrink:0}
#liveSO .donut::after{content:'';position:absolute;inset:16px;border-radius:var(--radius-circle);background:var(--surface)}
#liveSO .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
#liveSO .donut-center .v{font-family:var(--font-heading);font-weight:var(--fw-bold,700);font-size:var(--fs-md,1rem);color:var(--text);line-height:1.1}
#liveSO .donut-center .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
#liveSO .so-trust-row{display:flex;align-items:center;gap:var(--space-md)}
#liveSO .so-trust-side{flex:1;min-width:0}
#liveSO .so-trust-meta{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin-top:4px}
#liveSO .so-trust-meta strong{color:var(--text)}

/* 12-month payment-reliability strip (reused from 02-subscribers) */
#liveSO .billing-strip{display:flex;gap:3px;align-items:flex-end;height:42px;margin-top:var(--space-xs)}
#liveSO .bs-month{flex:1;border-radius:2px}
#liveSO .bs-paid{background:var(--ok);height:100%}
#liveSO .bs-late{background:var(--warn);height:72%}
/* a real gap: billed month, no payment on record - a genuine signal, styled distinctly softer
   than "late" so it reads as noteworthy without screaming, and never confused with... */
#liveSO .bs-gap{background:color-mix(in srgb,var(--danger) 55%,var(--surface-raised));height:48%}
/* ...months outside the account's active billing life (pre-signup or post-termination) - always
   neutral, dashed border reads as "not applicable", never as missed/bad behaviour */
#liveSO .bs-outside{background:var(--glass-bg);height:24%;border:1px dashed var(--border-subtle)}
#liveSO .bs-none{background:var(--glass-bg);height:30%;border:1px solid var(--border-subtle)}

/* per-stage Advance (rule-48 clickable): sits under the stage's steps */
#liveSO .stage-advance{display:flex;justify-content:flex-end;padding:10px 0 4px}
#liveSO .stage-adv[disabled]{opacity:.6;cursor:progress}

/* ============================================================================
   LAYOUT REVISION (2026-08 owner mock) - accessible info tooltip (moved the old
   "Go live" explainer + the billing-cache source line off the main flow), the
   hero trust donut, and plain (no table/box) lifetime facts lines.
   ========================================================================== */

/* info tooltip: real toggle (click/Enter/Space), not hover-only - works on touch and for
   keyboard users. Default focus ring is left alone on purpose (keyboard accessibility). */
#liveSO .so-info-btn{appearance:none;width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);background:var(--glass-bg);color:var(--text-tertiary);font-family:var(--font-mono);font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#liveSO .so-info-btn:hover{color:var(--text);border-color:var(--text-tertiary)}
#liveSO .so-info-btn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
#liveSO .so-tooltip{position:absolute;top:100%;left:0;z-index:10;width:max-content;max-width:260px;margin-top:6px;padding:var(--space-sm) var(--space-md);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;font-family:var(--font-body,inherit);text-transform:none;letter-spacing:normal}
#liveSO .so-tooltip[hidden]{display:none}

/* hero trust donut - larger, centred, standalone above the payment timeline. The ring stroke
   width is a fixed 16px inset (.donut::after) at any diameter, so scaling this up keeps the same
   ring width per the owner's mock, just a bigger overall donut. */
#liveSO .so-trust-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-sm);margin:var(--space-sm) 0 var(--space-lg)}
#liveSO .so-donut-hero{width:176px;height:176px}
#liveSO .so-donut-hero .donut-center .v{font-size:1.6rem}
#liveSO .so-donut-hero .donut-center .l{font-size:10px}
#liveSO .so-trust-hero-legend{font-size:var(--text-sm);color:var(--text-secondary)}

/* lifetime facts - plain muted lines, no table, no box */
#liveSO .so-facts-plain{display:flex;flex-direction:column;gap:4px;margin-top:var(--space-sm)}