/* ============ WEBSITE SETTINGS PANE (Master 3122:24600 + new SEO & GEO) ============
   Per-site settings subnav + panels for the Create Website canvas.
   Consumed by screens/chat-create-website-settings.html only.
   Reuses components.css primitives (kb / input / btn / bdg / toggle / segmented / menu).
   Merge into components.css when stable. */

/* ---- canvas-bar URL pill (shared canvas-bar spec) ---- */
.ws-url        { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px;
                 padding: 0 var(--space-2) 0 var(--space-5); min-width: 300px;
                 border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ws-url .ph    { font-size: 16px; color: var(--text-faint); }
.ws-url__path  { flex: 1 1 auto; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); }
.ws-url .icon-btn { width: 24px; height: 24px; }
.ws-url .icon-btn .ph { color: var(--text-muted); }

/* ---- chat reaction row ---- */
.ws-react      { display: flex; gap: var(--space-2); align-self: flex-start; }
.ws-react .icon-btn .ph { font-size: 16px; color: var(--text-faint); }

/* ---- panel section title / description (~15px) ---- */
.ws-title      { font: var(--fw-semibold) 15px/1.4 var(--font-sans); color: var(--text-primary); }
.ws-desc       { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-muted); margin-bottom: var(--space-6); }
.ws-sect       { padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.ws-sect:first-child { padding-top: 0; border-top: 0; }

/* ---- field card (stacked label/value rows with dividers) ---- */
.ws-card       { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ws-card--pad  { padding: var(--space-6); }
.ws-frow       { padding: var(--space-6); border-top: 1px solid var(--border); }
.ws-frow:first-child { border-top: 0; }
.ws-flabel     { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); margin-bottom: var(--space-4); }
.ws-fval       { display: flex; align-items: center; gap: var(--space-3); font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }

/* ---- status dot ---- */
.ws-dot        { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--neutral-400); flex: 0 0 8px; }
.ws-dot--ok    { background: var(--success-500); }

/* ---- generic head row (title + trailing controls) ---- */
.ws-head       { display: flex; align-items: center; gap: var(--space-4); }

/* ---- disabled button (dimmed, scoped to the website canvas) ---- */
.canvas-float .btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* ---- generic bordered list (domain / GEO rows) ---- */
.ws-list       { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ws-lrow       { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6); border-top: 1px solid var(--border); }
.ws-lrow:first-child { border-top: 0; }
.ws-lrow__main { flex: 1 1 auto; min-width: 0; }
.ws-lrow__name { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ws-lrow__sub  { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); }
.ws-link       { color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-2); }
.ws-link .ph   { font-size: 12px; }

/* ---- history ---- */
.ws-hist       { display: flex; flex-direction: column; gap: var(--space-5); }
.ws-hrow       { display: flex; gap: var(--space-6); align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.ws-hrow__body { flex: 1 1 auto; min-width: 0; }
.ws-hrow__time { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); margin-bottom: var(--space-4); }
.ws-hrow__desc { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.ws-hrow__acts { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.ws-thumb      { flex: 0 0 176px; width: 176px; height: 96px; border: 1px solid var(--border); border-radius: var(--radius-sm);
                 background: var(--surface-subtle); padding: var(--space-4); overflow: hidden;
                 display: flex; flex-direction: column; justify-content: space-between; }
.ws-thumb__nav { font: var(--fw-semibold) 8px/1 var(--font-sans); color: var(--text-secondary); }
.ws-thumb__h   { font: var(--fw-semibold) 11px/1.2 var(--font-sans); color: var(--text-primary); }

/* ---- empty state (AI / Database / Users placeholders) ---- */
.ws-empty      { max-width: 420px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-9); text-align: left; }
.ws-empty__ic  { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
                 border-radius: var(--radius-md); background: var(--surface-subtle); margin-bottom: var(--space-5); }
.ws-empty__ic .ph { font-size: 20px; color: var(--text-secondary); }

/* ---- counter (0/60) ---- */
.ws-counter    { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); flex: 0 0 auto; }

/* ============ SEO & GEO ============ */
/* 1 · Details */
.ws-titlerow   { display: flex; align-items: center; gap: var(--space-5); }
.ws-upload     { flex: 0 0 var(--space-11); width: var(--space-11); height: var(--space-11); border: 0.5px solid var(--border-strong); border-radius: var(--radius-lg);
                 display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface-subtle); }
.ws-upload .ph { font-size: 18px; color: var(--text-faint); }
.ws-titlefield { flex: 1 1 auto; min-width: 0; }
/* Social image drop zone (dashed, folder icon + prompt) */
.ws-dropzone   { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-subtle);
                 padding: var(--space-11) var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); }
.ws-dropzone .ph { font-size: 24px; color: var(--text-faint); }
.ws-dropzone__t  { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.ws-social__preview { aspect-ratio: 16 / 9; max-width: 420px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
                 background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.ws-social__preview .ph { font-size: 28px; color: var(--text-faint); }
.ws-sitecard   { display: flex; align-items: center; gap: var(--space-4); max-width: 420px;
                 border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.ws-sitecard__t { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); }
.ws-sitecard__u { font: var(--type-c1-weight) var(--type-c1-size)/1.3 var(--font-sans); color: var(--text-muted); }

/* 2 · Search visibility (two-line switch row) */
.ws-srow       { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.ws-srow__main { flex: 1 1 auto; min-width: 0; }
.ws-srow__name { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ws-srow__sub  { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); }

/* 3 · Health (filled card) */
.ws-fill       { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.ws-fill__hd   { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.ws-checklist  { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ws-check      { display: flex; align-items: center; gap: var(--space-4); }
.ws-check .ph  { font-size: 16px; flex: 0 0 16px; }
.ws-check--ok  { color: var(--success-500); }
.ws-check--warn{ color: var(--warning-500); }
.ws-check__t   { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-secondary); }

/* 4 · GEO status rows */
.ws-georow     { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6); border-top: 1px solid var(--border); }
.ws-georow:first-child { border-top: 0; }
.ws-georow__main { flex: 1 1 auto; min-width: 0; }
.ws-georow__name { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ws-georow__sub  { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); }
.ws-georow__note { color: var(--warning-700); }
.ws-georow__end  { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }
.ws-spin       { display: inline-block; animation: ws-spin 0.9s linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* 5 · Pages table */
/* DS table tonmana (Master 45:11324): open table — no outer card, no row rules;
   thin divider under header only, muted small header, roomy rows */
.ws-ptable     { }
.ws-prow       { display: grid; grid-template-columns: 120px 1.4fr 1.4fr 84px; align-items: center;
                 gap: var(--space-5); padding: var(--space-5) var(--space-2); min-height: 48px; }
.ws-prow--head { border-bottom: 1px solid var(--border); min-height: 0; padding-top: 0; padding-bottom: var(--space-4); }
.ws-prow--head .ws-pcell { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); }
.ws-pcell      { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pcell--page code { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-mono); color: var(--text-secondary); }
.ws-pcell--idx { display: flex; justify-content: flex-start; }
.ws-pcell--edit{ display: flex; justify-content: flex-end; }
.ws-pmuted     { color: var(--text-faint); }
.ws-is-active  { background: var(--surface-hover); }
.ws-prow--cap  { display: flex; align-items: center; gap: var(--space-3); min-height: 0; padding-top: 0;
                 font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); }
.ws-prow--cap .ph { font-size: 13px; }
.ws-pedit      { padding: var(--space-6); background: var(--surface-subtle); border-radius: var(--radius-md); margin: 0 0 var(--space-4); }

/* settings canvas: panel content padding = 16px 四辺 (2026-07-02 user request) */
.canvas-float .kb__main { padding: var(--space-6); }
/* GEO rows: purpose-first titles; artifact name as mono chip in description */
.ws-georow__file { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
                   background: var(--surface-subtle); border: 1px solid var(--border);
                   border-radius: var(--radius-xs, 4px); padding: 1px var(--space-2); }

/* Health score (Master 45:17238): donut gauge + category score cells */
.ws-score        { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-6) 0; }
.ws-score__gauge { position: relative; width: 88px; height: 88px; flex: 0 0 auto; }
.ws-score__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); }
.ws-score__cap   { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-secondary); }
.ws-score__num   { font: 600 24px/1 var(--font-sans); color: var(--success-500); }
.ws-score__cells { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ws-score__cell  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
                   background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
                   font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ws-score__cell b { font-weight: 600; }
.ws-score__v--ok   { color: var(--success-500); }
.ws-score__v--warn { color: var(--warning-500); }

/* GEO rows v2: instant toggles + generated-status caption (no chat round-trip) */
.ws-georow__st { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.ws-viewlink   { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-secondary);
                 font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ws-viewlink:hover { color: var(--text-primary); }
.ws-filepre    { margin: 0; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md);
                 padding: var(--space-5); font: 400 12px/1.7 var(--font-mono); color: var(--text-primary);
                 overflow-x: auto; white-space: pre; }

/* Discovery lifecycle status (Option A/B compare) */
.ws-st        { display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
                font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.ws-st .ph    { font-size:14px; }
.ws-st--draft { color: var(--warning-700); }
.ws-st--gen   { color: var(--text-muted); }
.ws-st--live  { color: var(--success-700); }
.ws-st--live .ws-viewlink, .ws-st--draft .ws-viewlink { color: inherit; }
.ws-pending   { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-5);
                background: var(--warning-50); border:1px solid var(--warning-100); border-radius:var(--radius-md);
                padding:var(--space-4) var(--space-5); font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color:var(--text-primary); }
.ws-pending .ph { color: var(--warning-700); font-size:16px; flex:0 0 auto; }
.ws-pending span { flex:1 1 auto; }


/* AI Discovery table (DS open-table, Master 45:11324 / ref 2958:26817) */
.ws-gtable     { }
.ws-grow       { display:grid; grid-template-columns: 1fr auto 64px 44px; align-items:center;
                 gap: var(--space-6); padding: var(--space-5) var(--space-2); min-height: 56px; }
.ws-grow--head { min-height:0; padding-top:0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.ws-grow--head > * { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted); }
.ws-gcell--name .n { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ws-gcell--name .d { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); }
.ws-gcell--view { text-align:left; }
.ws-gcell--tog  { display:flex; justify-content:flex-end; }
.ws-grow .bdg .ws-spin { font-size:13px; }

/* Auto-publish policy bar — a bounded, tinted band so the section toggle reads as a
   different layer than the table's per-row toggle column (no alignment tug-of-war). */
.ws-setbar        { display:flex; align-items:center; gap:var(--space-6); margin-top:var(--space-5);
                    padding:var(--space-5) var(--space-6); background:var(--surface-subtle);
                    border:1px solid var(--border); border-radius:var(--radius-md); }
.ws-setbar__txt   { flex:1 1 auto; min-width:0; }
.ws-setbar__t     { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color:var(--text-primary); }
.ws-setbar__d     { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color:var(--text-muted); margin-top:var(--space-2); }
.ws-setbar .toggle { flex:0 0 auto; }


/* ============ PUBLISH APPROVAL QUEUE (auto-publish off for generated files) ============ */
.pub-dot        { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
                  border-radius: var(--radius-full); background: var(--warning-500);
                  border: 1.5px solid var(--surface); }
.pub-queue      { width: 400px; padding: var(--space-5) var(--space-6); }
.pub-queue__head{ display: flex; align-items: center; gap: var(--space-4);
                  font: var(--type-b2-weight) var(--type-b2-size)/1.3 var(--font-sans); color: var(--text-primary); }
.pub-queue__sub { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted);
                  margin: var(--space-3) 0 var(--space-4); }
.pub-row        { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0;
                  border-top: 1px solid var(--border); }
.pub-row > .ph  { font-size: 16px; color: var(--text-secondary); flex: 0 0 auto; }
.pub-row__b     { flex: 1 1 auto; min-width: 0; }
.pub-row__n     { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary);
                  font-family: var(--font-mono); font-size: 12px; }
.pub-row__d     { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); margin-top: 2px; }
.pub-row--muted > .ph, .pub-row--muted .pub-row__n { color: var(--text-faint); }
.pub-queue__foot{ display: flex; align-items: center; gap: var(--space-4);
                  border-top: 1px solid var(--border); padding-top: var(--space-5); margin-top: var(--space-1); }

/* ============ BLOG PANEL (Part B) ============ */
.ws-fcap        { font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-faint); margin-top: var(--space-3); }
/* connected-source strip under the Posts title — account chips (Master 1508:18244) */
.ws-srcstrip    { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.chip--acct     { background: var(--surface-hover); border: 0; border-radius: var(--radius-sm); color: var(--text-primary);
                  font: var(--type-b4-weight) var(--type-b4-size)/16px var(--font-sans); }
.chip--acct .ph { color: var(--text-primary); cursor: default; }
.chip--add      { background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
                  color: var(--text-muted); cursor: pointer;
                  font: var(--type-b4-weight) var(--type-b4-size)/16px var(--font-sans); }
.chip--add .ph  { font-size: 14px; color: var(--text-muted); }
.chip--add:hover{ background: var(--surface-subtle); }
.ws-srcicon     { font-size: 18px; color: var(--text-muted); flex: 0 0 auto; }
.ws-srcactions  { display: flex; align-items: center; gap: var(--space-5); flex: 0 0 auto; }
.ws-grow--blog  { grid-template-columns: 1fr 148px 128px 72px 32px; } /* last col = row kebab */
.ws-grow--blog .menu-wrap { position: relative; justify-self: end; }
.ws-blogcell    { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-muted); }


/* Blog Posts rows link to the Content Library (edit lives there, rule J) */
.ws-grow--link { cursor: pointer; border-radius: var(--radius-sm); }
.ws-grow--link:hover { background: var(--surface-hover); }


/* ============================================================================
   CONTENT LIBRARY PAGE (Master 1784:15131 + connected-source rows)
   Single bordered block on the "Daily check" Pages page.
   ============================================================================ */
.cl-block        { margin-top: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg);
                   padding: var(--space-6) var(--space-7) var(--space-7); background: var(--surface); }
.cl-block__head  { display: flex; align-items: center; gap: var(--space-4); }
.cl-block__title { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.2 var(--font-sans); color: var(--text-primary); }
.cl-block__tools { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

.cl-bar          { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.cl-bar__spacer  { flex: 1 1 auto; }
.cl-rows         { font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-muted); }
.cl-rows b       { font-weight: 600; color: var(--text-primary); }

.cl-chiprow      { margin-top: var(--space-5); }
.cl-chip         { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-5);
                   border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
                   font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); color: var(--text-secondary); }
.cl-chip__x      { font-size: 14px; color: var(--text-faint); }
.cl-chip__sep    { width: 1px; height: 16px; background: var(--border); }
.cl-chip__val    { color: var(--text-primary); }

/* table: reuse .crm-table; column sizing + cell tone specific to the Library */
.cl-table        { margin-top: var(--space-6); table-layout: fixed; }
/* cols: App / Account / Content(auto) / Source / Status / Posted At / Scheduled At */
.cl-table th:nth-child(1), .cl-table td:nth-child(1) { width: 56px; }
.cl-table th:nth-child(2), .cl-table td:nth-child(2) { width: 168px; }
.cl-acct         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--space-5); }
.cl-table th:nth-child(4), .cl-table td:nth-child(4) { width: 132px; }
.cl-table th:nth-child(5), .cl-table td:nth-child(5) { width: 116px; }
.cl-table th:nth-child(6), .cl-table td:nth-child(6),
.cl-table th:nth-child(7), .cl-table td:nth-child(7) { width: 144px; }
.cl-app          { color: var(--text-primary); }
.cl-app .ph      { font-size: 18px; }
.cl-acct         { color: var(--text-muted); }
.cl-content      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                   color: var(--text-primary); font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); }
.cl-meta         { color: var(--text-faint); white-space: nowrap; }

/* ============================================================================
   BLOG SOURCE — authoring-origin taxonomy, external connect flow, read-only
   Shared by pages-content-library.html (Source column) and
   chat-create-website-settings.html (Blog Posts Source column + connect modals).
   Origin badge = neutral icon+label (no decorative color; icon carries meaning).
   ============================================================================ */
/* Source badge (In Agos / Notion / Google Sheets / RSS) — table cell chip */
.src             { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%;
                   font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-secondary); }
.src .ph         { font-size: 15px; color: var(--text-muted); flex: 0 0 auto; }
.src__t          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Content Library: source filter (underline tabs) + entry-point buttons */
.cl-filter       { margin-top: var(--space-6); }
.cl-block__tools .btn { flex: 0 0 auto; }

/* Connect-source modals: OAuth mock row + field-mapping table + edge helper */
.cs-auth         { display: flex; align-items: center; gap: var(--space-5); background: var(--surface-subtle);
                   border-radius: var(--radius-md); padding: var(--space-5); }
.cs-auth__ic     { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
                   border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.cs-auth__ic .ph { font-size: 18px; color: var(--text-primary); }
.cs-auth__b      { flex: 1 1 auto; min-width: 0; }
.cs-auth__t      { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.cs-auth__d      { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); margin-top: var(--space-2); }
.cs-map          { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.cs-maprow       { display: grid; grid-template-columns: 116px 16px 1fr; align-items: center; gap: var(--space-5);
                   padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
.cs-maprow:first-child { border-top: 0; }
.cs-maprow__f    { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.cs-maprow > .ph { color: var(--text-faint); font-size: 14px; }
.cs-maprow .select { min-height: 34px; }
.cs-err          { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4);
                   font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); }
.cs-err .ph      { font-size: 14px; color: var(--warning-700); flex: 0 0 auto; margin-top: 1px; }

/* Read-only preview (external source): banner + grayed content, distribution stays live */
.ro-banner       { display: flex; align-items: center; gap: var(--space-5); background: var(--surface-subtle);
                   border-radius: var(--radius-md); padding: var(--space-5); }
.ro-banner > .ph { font-size: 20px; color: var(--text-muted); flex: 0 0 auto; }
.ro-banner__t    { flex: 1 1 auto; min-width: 0; font: var(--type-c1-weight) var(--type-c1-size)/1.5 var(--font-sans); color: var(--text-muted); }
.ro-banner__t b  { color: var(--text-primary); font-weight: var(--fw-semibold); }
.ro-banner .btn  { flex: 0 0 auto; }
.ro-preview      { opacity: .5; pointer-events: none; user-select: none; }