/* ============================================================================
   social.css — Social Media module.

   Scoped entirely to .soc-* on its OWN document (public/social.html). It shares
   no selector with index.html, so nothing here can reach the main app: the
   desktop app is byte-for-byte unchanged by this file existing.

   ── S8 PART B: ALIGNED TO THE PROTOTYPE ───────────────────────────────────
   S2–S7 were built against house conventions and behavioural specs but never
   against repark-social-prototype.html itself, and had drifted a long way: this
   module was a LIGHT theme on #f5f7f9 with a teal accent, while the prototype is
   a DARK theme on #0B0F16 with a gold signal colour. Every token below is copied
   verbatim from that file's :root — not approximated, not "close enough".

   TWO ACCENTS, AND THEY MEAN DIFFERENT THINGS. Do not blend them:
     --brand (gold #E8B75D)  the MODULE's own signal: actions, primary buttons,
                             live indicators, the selected state of a thing.
     --rms   (blue #38A3E0)  the AGENT's voice: reasoning, "why this", anything
                             the AI itself is saying or seeing.
   Using gold for the agent's reasoning would make the module's own chrome and
   the AI's opinions look like the same speaker. They are not.

   THREE FAMILIES, ALSO NOT INTERCHANGEABLE:
     Bricolage Grotesque   headings only
     Manrope               body
     JetBrains Mono        ALL data — numbers, timestamps, counts, tags, labels
   Mono on data is what makes figures line up and stay legible when they change.

   THE AMBER RULE (unchanged in meaning, corrected in execution). An unavailable
   capability is a STATEMENT OF CURRENT STATE, not an error, and must not look
   like one. It now uses the prototype's own .tag.warn / .banner.warn treatment
   rather than the ad-hoc amber S2 invented. Red is reserved for something that
   actually broke.
   ========================================================================== */

:root{
  /* --brand is the module's own signal colour. --rms-* are the RMS tokens, used
     sparingly so this section reads as part of the platform without copying it. */
  --brand:#E8B75D;
  --brand-dim:rgba(232,183,93,.14);
  --brand-line:rgba(232,183,93,.34);

  --rms:#38A3E0;
  --rms-dim:rgba(56,163,224,.13);
  --rms-line:rgba(56,163,224,.34);
  --rms-grad:linear-gradient(180deg,#0588B6,#03658E);

  --ink:#0B0F16;
  --panel:#121824;
  --panel-2:#19212F;
  --panel-3:#212B3C;
  --line:#232D3E;
  --line-soft:#1B2333;

  --ivory:#E9EDF4;
  --muted:#8994A8;
  --faint:#737F94;

  --tiktok:#4ED3DE;
  --instagram:#E67AAE;
  --youtube:#E5645C;
  --facebook:#5691E2;

  --ok:#63C08C;
  --warn:#DFA23C;
  --bad:#E0705F;

  --r:14px;
  --r-sm:9px;

  /* Compatibility aliases. S2–S7 markup references these names in a few places;
     they now RESOLVE to the prototype's tokens rather than the old light palette,
     so nothing had to be renamed across five prompts' worth of selectors. */
  --soc-ink:var(--ivory);
  --soc-body:var(--ivory);
  --soc-muted:var(--muted);
  --soc-paper:var(--ink);
  --soc-card:var(--panel);
  --soc-line:var(--line-soft);
  --soc-brand:var(--brand);
  --soc-accent:var(--brand);
  --soc-amber-bg:rgba(223,162,60,.08);
  --soc-amber-line:rgba(223,162,60,.28);
  --soc-amber-ink:#E8D3A6;
  --soc-ok-bg:rgba(99,192,140,.1);
  --soc-ok-line:rgba(99,192,140,.3);
  --soc-ok-ink:var(--ok);
  --soc-radius:var(--r);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font:15px/1.55 'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.15}

/* Data is mono, everywhere. Counts, clocks, tags, timestamps, allowances. */
.soc-mono,.soc-budget,.soc-conn-meta,.soc-saved-meta,.soc-concept-tags,
.soc-tx-label,.soc-cell-d,.soc-cal-dow,.soc-cevent-time{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
}

/* Prototype motion: transforms and opacity only, so nothing reflows. */
@keyframes soc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes soc-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes soc-shimmer{0%{background-position:-320px 0}100%{background-position:320px 0}}
.soc-anim{opacity:0;animation:soc-rise .52s cubic-bezier(.2,.72,.28,1) forwards;animation-delay:calc(var(--i,0) * 42ms)}
@media (prefers-reduced-motion:reduce){
  .soc-anim{animation:none;opacity:1}
}

/* ── topbar ───────────────────────────────────────────────────────────────── */
/* The bar is PANEL, not brand. S2 painted it with the accent colour, which under
   the prototype's tokens would render a solid gold header — gold is a signal
   here, not a background. */
.soc-topbar{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--panel);border-bottom:1px solid var(--line-soft);color:var(--ivory);
}
.soc-back{
  color:var(--ivory);text-decoration:none;font-size:20px;line-height:1;
  padding:6px 10px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);
}
.soc-back:hover{background:var(--panel-3)}
.soc-title{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
/* SAMPLE MODE is the prototype's .sample-flag: mono, uppercase, warn-coloured —
   a standing statement of what this build can do, not a decorative pill. */
.soc-mode{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warn);
  padding:4px 10px;border-radius:6px;
  background:rgba(223,162,60,.1);border:1px solid rgba(223,162,60,.3);
}
.soc-mode[data-state="loading"]{opacity:.6;color:var(--faint);background:var(--panel-2);border-color:var(--line)}

/* ── session states (S3) ──────────────────────────────────────────────────
   Three panes, exactly one visible: #socChecking / #socLoginBox / #socApp.
   .soc-hidden is this page's own hide class — deliberately NOT the main app's
   .hidden, so nothing here depends on index.html's stylesheet being present. */
.soc-hidden{display:none !important}

.soc-session-pane{
  max-width:420px;margin:0 auto;padding:48px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.soc-session-msg{margin:0;font-size:14px;color:var(--soc-muted)}

.soc-spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--soc-line);border-top-color:var(--soc-accent);
  animation:soc-spin .8s linear infinite;
}
@keyframes soc-spin{to{transform:rotate(360deg)}}
/* Respect a user who has asked the OS for less motion. */
@media (prefers-reduced-motion:reduce){
  .soc-spinner{animation:none;border-top-color:var(--soc-line)}
}

/* ── login box ────────────────────────────────────────────────────────────── */
.soc-login{
  width:100%;background:var(--soc-card);border:1px solid var(--soc-line);
  border-radius:var(--soc-radius);padding:24px;
}
.soc-login-title{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--soc-ink)}
.soc-login-sub{
  margin:0 0 16px;font-size:13px;min-height:1.2em;color:var(--soc-amber-ink);
}
.soc-login-sub:empty{margin-bottom:8px}
.soc-login label{display:block;font-size:13px;font-weight:700;color:var(--soc-ink);margin:12px 0 4px}
.soc-login input{color:var(--ivory);
  width:100%;font:inherit;font-size:14px;color:var(--soc-ink);
  padding:10px 12px;border:1px solid var(--soc-line);border-radius:var(--r-sm);background:var(--panel-2);
}
.soc-login input:focus{outline:2px solid var(--soc-accent);outline-offset:-1px}
.soc-login-btn{width:100%;margin-top:18px}
.soc-login-alt{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--soc-line);
  font-size:12px;color:var(--soc-muted);line-height:1.5;
}
.soc-login-alt a{color:var(--soc-accent)}

/* Back-to-RMS text link in the topbar (the arrow alone is not obvious enough). */
.soc-back-text{
  color:var(--ivory);opacity:.75;text-decoration:none;font-size:13px;font-weight:600;
}
.soc-back-text:hover{opacity:1;text-decoration:underline}

/* Shown in place of the Save button for a social_view-only user. */
.soc-readonly-note{
  margin:0 0 4px;font-size:13px;color:var(--soc-amber-ink);
  background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);
  border-radius:8px;padding:10px 12px;
}

/* ══ SHELL (S9) — the prototype's .app / .rail / .main / .transmission ═══════
   S8 aligned colour, type and components but deliberately did not touch
   structure, which left the module the right colour and the wrong SHAPE: tabs
   across the top where the prototype has a full-height rail. This is that fix.
   Values below are the prototype's, not an approximation of them. */
.soc-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

.soc-rail{
  background:linear-gradient(180deg,#0D1420,#0B0F16);
  border-right:1px solid var(--line-soft);
  /* The faint blue inner edge is the platform signature — RMS blue, used once,
     where it says "this is part of Repark" without competing with the gold. */
  box-shadow:inset -1px 0 0 rgba(56,163,224,.09);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.soc-brandmark{display:flex;align-items:center;gap:10px;padding:2px 8px 20px}
.soc-brandmark-dot{
  width:26px;height:26px;border-radius:8px;background:var(--rms-grad);
  display:grid;place-items:center;color:#FFFFFF;font-weight:700;font-size:13px;
  font-family:'Bricolage Grotesque',sans-serif;
  box-shadow:0 0 0 1px rgba(56,163,224,.35),0 4px 12px -4px rgba(5,136,182,.6);
}
.soc-brandmark-text b{display:block;font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ivory)}
.soc-brandmark-text span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-family:'JetBrains Mono',monospace}

.soc-nav{display:flex;flex-direction:column;gap:2px}
.soc-navlink{
  appearance:none;border:0;cursor:pointer;background:transparent;
  display:flex;align-items:center;gap:10px;width:100%;position:relative;
  padding:8px 10px;border-radius:var(--r-sm);color:var(--muted);
  font:inherit;font-size:13.5px;font-weight:500;text-align:left;
  transition:background .16s,color .16s,padding-left .18s;
}
.soc-navlink:hover{background:var(--panel);color:var(--ivory)}
.soc-navlink.is-active{background:var(--brand-dim);color:var(--brand);padding-left:14px}
/* The prototype's active marker: a gold bar that grows out of the left edge. */
.soc-navlink::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:17px;border-radius:2px;background:var(--brand);
  transition:transform .2s cubic-bezier(.2,.72,.28,1);
}
.soc-navlink.is-active::before{transform:translateY(-50%) scaleY(1)}
.soc-navlink .soc-ic{width:16px;height:16px;flex:0 0 16px;opacity:.9;transition:transform .22s cubic-bezier(.2,.72,.28,1)}
.soc-navlink:hover .soc-ic{transform:scale(1.12)}
.soc-navcount{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  background:var(--panel-3);color:var(--ivory);border-radius:6px;padding:1px 6px;
}
.soc-navlink.is-active .soc-navcount{background:var(--brand);color:#0B0F16}
/* NOT-BUILT entries are NOT dimmed into looking broken. They read as ordinary
   items — the honesty lives on the screen they open, not in a grey-out that
   would be indistinguishable from "you lack permission". */
.soc-navlink[data-notbuilt] .soc-ic{opacity:.55}

.soc-rail-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:9px}
.soc-sample-flag{
  display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);
}
.soc-sample-flag i{width:6px;height:6px;border-radius:50%;background:var(--warn);display:block;flex:0 0 6px}
.soc-sample-flag[data-state="loading"]{color:var(--faint)}
.soc-sample-flag[data-state="loading"] i{background:var(--faint)}
.soc-sample-flag[data-state="live"]{color:var(--ok)}
.soc-sample-flag[data-state="live"] i{background:var(--ok)}
.soc-rail-back{font-size:12px;color:var(--muted);text-decoration:none}
.soc-rail-back:hover{color:var(--brand)}

/* ── layout ───────────────────────────────────────────────────────────────── */
.soc-main{min-width:0;display:flex;flex-direction:column}
.soc-stage{padding:26px;max-width:1320px;width:100%}
.soc-screen{display:none}
.soc-screen.is-active{display:block}

.soc-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.soc-pagehead h1{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0}
.soc-pagehead p{color:var(--muted);font-size:13px;margin:4px 0 0;max-width:62ch}
.soc-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.soc-panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);position:relative;overflow:hidden}
.soc-panel::before{content:'';position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}

/* ── the NOT-BUILT state ──────────────────────────────────────────────────
   Deliberately styled as the prototype's .empty, NOT as an error. It is a
   statement about the build, and it should feel like a page that is coming,
   not a page that has failed. */
.soc-notbuilt{text-align:center;padding:34px 20px;color:var(--muted)}
.soc-notbuilt h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:14px;margin:0 0 5px;color:var(--ivory)}
.soc-notbuilt p{font-size:12.5px;max-width:44ch;margin:0 auto 12px}

/* ── transmission bar ─────────────────────────────────────────────────────
   The prototype's signature element, values verbatim. Its correct state today
   is dormant: no next post, clock at --:--:--, both controls disabled. */
.soc-transmission{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 26px;
  background:rgba(11,15,22,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.soc-tx-live{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.soc-tx-pulse{width:8px;height:8px;border-radius:50%;background:var(--brand);position:relative;display:block}
.soc-tx-pulse::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--brand-line);animation:soc-ping 2.4s ease-out infinite}
@keyframes soc-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
/* Nothing is going out, so the pulse does not pretend anything is imminent. */
.soc-transmission[data-state="idle"] .soc-tx-pulse{background:var(--faint)}
.soc-transmission[data-state="idle"] .soc-tx-pulse::after{animation:none;border-color:transparent}
.soc-transmission[data-state="idle"] .soc-tx-label{color:var(--faint)}
.soc-tx-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.soc-tx-body{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 300px}
.soc-tx-thumb{width:30px;height:30px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;color:var(--faint)}
.soc-tx-thumb svg{width:14px;height:14px}
.soc-tx-text{min-width:0;display:block}
.soc-tx-title{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ivory)}
.soc-tx-meta{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.soc-tx-meta[data-state="loading"]{color:var(--faint)}
.soc-tx-clock{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ivory);font-variant-numeric:tabular-nums}
.soc-transmission[data-state="idle"] .soc-tx-clock{color:var(--faint)}
.soc-tx-actions{display:flex;gap:8px;margin-left:auto}
.soc-tx-note{margin:0;flex:1 1 100%;font-size:12px;color:var(--faint);max-width:64ch}
.soc-tx-note[data-state="loading"]{font-style:italic}

/* ── buttons. Scoped so the global `button{color:white}` in style.css cannot
      bleed in — that rule has caused white-on-white before. ─────────────────*/
/* The prototype's .btn / .btn.primary / .btn.ghost, verbatim in behaviour:
   a primary button is GOLD WITH DARK TEXT (#0B0F16), not white text on teal. */
.soc-btn{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;font-weight:500;
  padding:7px 12px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);color:var(--ivory);
  transition:background .16s,border-color .16s,transform .14s cubic-bezier(.2,.72,.28,1),filter .16s;
}
.soc-btn:hover:not(:disabled){background:var(--panel-3)}
.soc-btn:active:not(:disabled){transform:scale(.98)}
.soc-btn:disabled{opacity:.4;cursor:not-allowed}
.soc-btn-primary{background:var(--brand);border-color:var(--brand);color:#0B0F16;font-weight:600}
.soc-btn-primary:hover:not(:disabled){background:var(--brand);filter:brightness(1.08)}
.soc-btn-ghost{background:transparent}
.soc-btn-stop{background:transparent;border-color:var(--line);color:var(--ivory)}
.soc-btn-stop:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}
.soc-link{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--soc-accent);text-decoration:underline;
}

/* ── cards / fields ───────────────────────────────────────────────────────── */
/* This is the prototype's .panel, including the top hairline. That 1px gradient
   across the top edge is what stops a dark card reading as a flat rectangle —
   it is the single most identifying detail of the prototype's surfaces. */
.soc-card{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:18px 20px;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.soc-card::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
}
.soc-card-title{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ivory)}
.soc-hint{margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.soc-field{margin-bottom:18px}
.soc-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ivory);margin-bottom:4px}
.soc-field .soc-hint{margin-bottom:8px}
.soc-field textarea,.soc-field input{
  width:100%;font:inherit;font-size:13.5px;color:var(--ivory);
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
}
.soc-field textarea::placeholder,.soc-field input::placeholder,
.soc-login input::placeholder{color:var(--faint)}
.soc-field textarea:focus,.soc-field input:focus{outline:1px solid var(--brand-line);outline-offset:0;border-color:var(--brand-line)}
.soc-field textarea:disabled,.soc-field input:disabled{background:var(--ink);color:var(--faint);cursor:not-allowed}
.soc-field textarea{resize:vertical;min-height:80px}

.soc-actions{display:flex;align-items:center;gap:12px}
.soc-save-state{font-size:13px;color:var(--soc-muted)}
.soc-save-state[data-state="saved"]{color:var(--soc-ok-ink);font-weight:600}
.soc-save-state[data-state="error"]{color:#a4342a;font-weight:600}
.soc-meta{margin:12px 0 0;font-size:12px;color:var(--soc-muted)}
.soc-meta[data-state="loading"]{font-style:italic}

/* ── capabilities panel — THE AMBER RULE lives here ───────────────────────── */
.soc-caps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.soc-cap{
  border:1px solid var(--soc-line);border-radius:8px;padding:12px 14px;background:var(--panel-2);
}
.soc-cap-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.soc-cap-name{font-weight:700;color:var(--soc-ink);font-size:14px}
.soc-cap-pill{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 9px;border-radius:999px;border:1px solid var(--soc-line);color:var(--soc-muted);
}
.soc-cap-reason{margin:8px 0 0;font-size:13px;color:var(--soc-body)}
.soc-cap-still{margin:5px 0 0;font-size:13px;color:var(--soc-muted)}

/* available = quiet green */
.soc-cap[data-state="available"]{background:var(--soc-ok-bg);border-color:var(--soc-ok-line)}
.soc-cap[data-state="available"] .soc-cap-pill{background:var(--panel-2);border-color:var(--soc-ok-line);color:var(--soc-ok-ink)}

/* NOT available = AMBER. Never red — this is information, not a failure. */
.soc-cap[data-state="unavailable"]{background:var(--soc-amber-bg);border-color:var(--soc-amber-line)}
.soc-cap[data-state="unavailable"] .soc-cap-pill{background:var(--panel-2);border-color:var(--soc-amber-line);color:var(--soc-amber-ink)}
.soc-cap[data-state="unavailable"] .soc-cap-reason{color:var(--soc-amber-ink)}

/* loading = neutral grey, and visibly NOT a verdict either way. */
.soc-cap[data-state="loading"]{background:var(--panel-2);border-style:dashed}
.soc-cap[data-state="loading"] .soc-cap-name{color:var(--soc-muted);font-style:italic;font-weight:500}

/* the list itself could fail to load — that IS an error, and reads as one */
.soc-caps[data-state="error"] .soc-cap{background:#fdf2f1;border-color:#e5b4ae}

.soc-envline{
  margin:0;font-size:13px;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--soc-line);color:var(--soc-body);
}
.soc-envline[data-state="loading"]{color:var(--soc-muted);font-style:italic}
.soc-envline code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--panel-3);padding:1px 5px;border-radius:4px}

/* ── calendar (S8) — the prototype's .cal / .cell / .cevent, verbatim ────── */
.soc-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.soc-cal-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.soc-btn-sm{padding:5px 10px;font-size:12px}
.soc-cal-views{display:inline-flex;gap:4px;margin-left:6px}
.soc-cal-views .is-on{background:var(--brand-dim);border-color:var(--brand-line);color:var(--brand)}

.soc-cal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;margin-top:12px;
}
.soc-cal-dow{
  background:var(--panel);padding:8px 10px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.soc-cell{background:var(--panel);min-height:104px;padding:8px;display:flex;flex-direction:column;gap:5px}
/* DAYS FROM THE NEIGHBOURING MONTHS.
   A month grid needs whole Monday–Sunday rows, so the first and last rows spill
   into the months either side — that is deliberate, and the prototype pads the
   same way. But a darker panel alone is not enough to say so: #0B0F16 against
   #121824 is a seven-point step on an already-dark screen, and with the day
   numbers rendered in the same --faint as everything else, July read as one
   continuous run from 29 June to 2 August. The number is now recessed as well,
   so these cells read as CONTEXT rather than content. */
.soc-cell.is-dim{background:var(--ink)}
.soc-cell.is-dim .soc-cell-d{opacity:.42}
.soc-cell-d{font-size:11px;color:var(--faint)}
.soc-cell.is-today .soc-cell-d{color:var(--brand);font-weight:600}
/* Drop target while a card is being dragged. */
.soc-cell.is-drop{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--brand-line)}

.soc-cevent{
  display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;
  background:var(--panel-2);border:1px solid var(--line);
  font:inherit;font-size:11.5px;color:var(--ivory);cursor:grab;text-align:left;width:100%;
}
.soc-cevent:hover{background:var(--panel-3)}
.soc-cevent span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc-cevent-time{font-size:10px;color:var(--faint);flex:0 0 auto}
/* A drag in flight is DISTINCT — not an instant snap. It stays visible in its
   original cell, dimmed, until the save actually returns. */
.soc-cevent.is-dragging{opacity:.45;cursor:grabbing}
.soc-cevent.is-pending{opacity:.6;border-style:dashed;border-color:var(--brand-line);cursor:progress}
.soc-cevent.is-failed{border-color:rgba(223,162,60,.5);background:rgba(223,162,60,.08)}

/* The best-time suggestion: the prototype's dashed ghost slot. */
.soc-cevent.soc-slot{border-style:dashed;background:transparent;color:var(--faint);justify-content:center;cursor:pointer}
.soc-cevent.soc-slot:hover{color:var(--brand);border-color:var(--brand-line)}

.soc-pdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}
.soc-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.soc-legend span{display:flex;align-items:center;gap:6px}
.soc-slot-key{width:14px;height:0;border-top:1px dashed var(--faint);display:inline-block}

.soc-cal[data-state="loading"],.soc-cal[data-state="unavailable"]{display:block;padding:0;border:0;background:transparent}
.soc-cal-msg{
  border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--muted);font-size:13px;background:var(--panel-2);
}
.soc-cal[data-state="unavailable"] .soc-cal-msg{
  border-style:solid;border-color:rgba(223,162,60,.28);background:rgba(223,162,60,.08);color:#E8D3A6;
}

/* Week view: same cells, one row, taller. */
.soc-cal.is-week .soc-cell{min-height:220px}

.soc-sched-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.soc-sched-item{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 12px;cursor:grab;
}
.soc-sched-item:hover{border-color:var(--brand-line)}
.soc-sched-item.is-picked{border-color:var(--brand-line);background:var(--brand-dim)}
.soc-sched-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-sched-empty{color:var(--muted);font-size:12.5px;padding:14px;text-align:center}

/* Toast — the prototype's pattern, with a real Undo. */
.soc-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 16px;font-size:13px;color:var(--ivory);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .26s,transform .34s cubic-bezier(.2,.9,.3,1);
}
.soc-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.soc-toast button{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  color:var(--brand);font-weight:600;font-size:13px;
}
.soc-toast[data-tone="warn"]{border-color:rgba(223,162,60,.4);color:#E8D3A6}

/* ── studio (S6) ──────────────────────────────────────────────────────────
   Amber for "cannot generate", never red — same rule as the capability panel.
   A server without an AI key is a statement about set-up, not a fault. */
.soc-optional{font-weight:400;color:var(--soc-muted);font-size:12px}
.soc-hint-tight{margin-top:4px;font-size:11px}

.soc-dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.soc-dir{
  text-align:left;background:var(--panel-2);border:1px solid var(--soc-line);border-radius:10px;
  padding:11px 13px;cursor:pointer;font:inherit;color:var(--soc-ink);
  display:flex;flex-direction:column;gap:2px;transition:border-color .12s,background .12s;
}
.soc-dir:hover{background:var(--panel-2);border-color:var(--soc-brand)}
.soc-dir.is-chosen{background:var(--soc-ok-bg);border-color:var(--soc-brand);box-shadow:inset 0 0 0 1px var(--soc-brand)}
.soc-dir-label{font-weight:700;font-size:13px}
.soc-dir-blurb{font-size:11px;color:var(--soc-muted);line-height:1.35}

.soc-studio-actions{align-items:center;gap:14px}
.soc-budget{font-size:12px;color:var(--soc-muted)}
.soc-budget.is-low{color:var(--soc-amber-ink);font-weight:700}
.soc-gen-note{margin:8px 0 0;font-size:12px;color:var(--soc-muted);min-height:1em}
.soc-gen-note[data-state="amber"]{color:var(--soc-amber-ink)}
.soc-gen-note:empty{min-height:0}

/* ── concepts ─────────────────────────────────────────────────────────── */
.soc-concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.soc-concepts-empty{grid-column:1/-1;margin:0;padding:26px;text-align:center;color:var(--soc-muted);font-size:13px}
.soc-concepts-amber{
  grid-column:1/-1;border:1px solid var(--soc-amber-line);background:var(--soc-amber-bg);
  border-radius:10px;padding:16px;text-align:center;
}
.soc-amber-msg{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--soc-amber-ink)}
.soc-amber-sub{margin:0;font-size:12px;color:var(--soc-muted)}

.soc-concept{
  border:1px solid var(--soc-line);border-radius:10px;padding:13px;background:var(--panel-2);
  display:flex;flex-direction:column;gap:8px;
}
.soc-concept.is-loading{
  min-height:190px;border-style:dashed;background:
    linear-gradient(90deg,var(--panel-2) 8%,var(--panel-3) 20%,var(--panel-2) 34%) 0 0/200% 100%;
  animation:soc-shimmer 1.3s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .soc-concept.is-loading{animation:none} }
.soc-concept-head{display:flex;align-items:baseline;gap:8px}
.soc-concept-title{margin:0;font-size:14px;font-weight:800;color:var(--soc-ink);flex:1 1 auto}
.soc-concept-sample{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 7px;border-radius:999px;flex:none;
  background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);color:var(--soc-amber-ink);
}
.soc-concept-hook{margin:0;font-size:13px;font-weight:600;color:var(--soc-ink);line-height:1.4}
.soc-concept-caption{margin:0;font-size:12px;color:var(--soc-muted);line-height:1.5;white-space:pre-wrap}
.soc-concept-tags{margin:0;font-size:11px;color:var(--soc-brand);font-weight:600}

/* The reasoning is FIRST-CLASS, not a tooltip: it is what lets an operator
   disagree with the agent rather than only accept or reject a hook. */
.soc-concept-why{
  margin-top:auto;padding:9px 10px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--soc-line);
}
.soc-concept-why.is-missing{background:var(--panel-2)}
.soc-why-label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--soc-muted);margin-bottom:3px;
}
.soc-why-text{margin:0;font-size:12px;color:var(--soc-ink);line-height:1.45}
.soc-concept-why.is-missing .soc-why-text{color:var(--soc-muted);font-style:italic}
.soc-concept-use{width:100%;padding:8px;font-size:13px}

/* ── draft editor + saved list ────────────────────────────────────────── */
.soc-draft-badge{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--soc-line);color:var(--soc-muted);
}
.soc-draft-badge[data-status="draft"]{
  background:var(--soc-ok-bg);border-color:var(--soc-ok-line);color:var(--soc-ok-ink);
}
.soc-saved{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.soc-saved-empty{color:var(--soc-muted);font-size:13px;padding:14px;text-align:center}
.soc-saved-open{
  width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--soc-line);
  border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--soc-ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.soc-saved-open:hover{background:var(--panel-2);border-color:var(--soc-brand)}
.soc-saved-title{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-saved-meta{font-size:11px;color:var(--soc-muted);flex:none}

/* ── per-platform variants, reroll, assets, product link (S7) ───────────── */
.soc-variants{border-top:1px solid var(--soc-line);margin-top:18px;padding-top:16px}
.soc-var-head{margin-bottom:10px}
.soc-var-title{margin:0;font-size:14px;font-weight:800;color:var(--soc-ink)}
.soc-var-for{font-weight:400;font-size:12px;color:var(--soc-muted)}

.soc-var-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.soc-var-tab{
  background:var(--panel-2);border:1px solid var(--soc-line);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:12px;font-weight:700;color:var(--soc-muted);
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.soc-var-tab:hover{background:var(--panel-2);color:var(--soc-ink)}
.soc-var-tab.is-active{background:var(--brand-dim);border-color:var(--brand-line);color:var(--brand);font-weight:500}
/* The unsaved dot: "I edited that tab" must be visible FROM another tab. */
.soc-var-dot{font-size:16px;line-height:0;color:var(--soc-amber-ink)}
.soc-var-tab.is-active .soc-var-dot{color:var(--brand)}

.soc-reroll{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.soc-btn-mini{padding:6px 11px;font-size:12px}
.soc-steer{flex:1 1 200px;min-width:0;font-size:12px;padding:7px 10px}
.soc-field-note{font-size:11px;color:var(--soc-muted);flex-basis:100%}
.soc-field-note[data-state="amber"]{color:var(--soc-amber-ink);font-weight:600}
.soc-field-note[data-state="busy"]{color:var(--soc-brand);font-weight:600}

.soc-tiktok-note{
  margin:10px 0 0;font-size:12px;line-height:1.5;
  background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);
  color:var(--soc-amber-ink);border-radius:8px;padding:10px 12px;
}

/* ── assets ──────────────────────────────────────────────────────────── */
.soc-assets-block,.soc-product-block{border-top:1px solid var(--soc-line);margin-top:18px;padding-top:16px}
.soc-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:10px}
.soc-assets[data-state="no-product"],.soc-assets[data-state="none"],
.soc-assets[data-state="loading"],.soc-assets[data-state="unavailable"]{display:block}
.soc-assets-empty{
  border:1px dashed var(--soc-line);border-radius:10px;padding:18px;text-align:center;background:var(--panel-2);
}
.soc-assets[data-state="unavailable"] .soc-assets-empty{
  border-style:solid;border-color:var(--soc-amber-line);background:var(--soc-amber-bg);
}
.soc-assets-msg{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--soc-ink)}
.soc-assets[data-state="unavailable"] .soc-assets-msg{color:var(--soc-amber-ink)}
.soc-assets-sub{margin:0;font-size:11px;color:var(--soc-muted);line-height:1.45}

.soc-asset{
  position:relative;padding:0;border:2px solid var(--soc-line);border-radius:9px;
  background:var(--panel-2);cursor:pointer;overflow:hidden;aspect-ratio:1;display:block;
}
.soc-asset:hover{border-color:var(--soc-brand)}
.soc-asset.is-on{border-color:var(--soc-brand);box-shadow:0 0 0 2px rgba(17,107,138,.18)}
.soc-asset-img{width:100%;height:100%;object-fit:cover;display:block}
.soc-asset-src{
  position:absolute;left:0;bottom:0;right:0;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;padding:3px 5px;
  background:rgba(11,15,22,.82);color:var(--ivory);
}
.soc-asset-tick{
  position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#0B0F16;font-size:12px;font-weight:800;
  display:grid;place-items:center;
}

/* ── product link ────────────────────────────────────────────────────── */
.soc-product-current{margin:8px 0 10px;font-size:13px;color:var(--soc-ink)}
.soc-product-current[data-choice="unset"]{color:var(--soc-muted)}
.soc-product-current[data-choice="linked"]{font-weight:700}
.soc-product-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.soc-product-pick input{flex:1 1 220px;min-width:0}
.soc-product-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;max-height:220px;overflow-y:auto}
.soc-product-list[data-state="idle"]{display:none}
.soc-product-empty{color:var(--soc-muted);font-size:12px;padding:10px;text-align:center}
.soc-product-opt{
  width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--soc-line);
  border-radius:8px;padding:8px 11px;cursor:pointer;font:inherit;color:var(--soc-ink);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.soc-product-opt:hover{background:var(--panel-2);border-color:var(--soc-brand)}
.soc-product-name{font-weight:600;font-size:13px}
.soc-product-cat{font-size:11px;color:var(--soc-muted);flex:none}

/* ── connections (S4) ─────────────────────────────────────────────────────
   Status colour follows the same rule as the capability panel: amber for
   "needs attention", never red. An expiring token is a thing to do, not a
   failure. Red is reserved for something that actually broke. */
.soc-sample-note{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 8px;border-radius:999px;
  background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);color:var(--soc-amber-ink);
}

.soc-conns{display:grid;gap:10px}
.soc-conn{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--soc-line);border-radius:10px;padding:12px 14px;background:var(--panel-2);
}
.soc-conn-avatar{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#0B0F16;font-size:13px;font-weight:700;letter-spacing:.5px;
  object-fit:cover;
}
.soc-conn-body{min-width:0;flex:1 1 auto}
.soc-conn-handle{font-weight:700;color:var(--soc-ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-conn-platform{font-size:12px;color:var(--soc-muted);margin-top:1px}
.soc-conn-meta{font-size:11px;color:var(--soc-muted);margin-top:4px}
.soc-conn-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.soc-conn-pill{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--soc-line);color:var(--soc-muted);
}
.soc-conn-btn{padding:7px 13px;font-size:13px}

/* connected = quiet green */
.soc-conn[data-state="connected"]{background:var(--soc-ok-bg);border-color:var(--soc-ok-line)}
.soc-conn[data-state="connected"] .soc-conn-pill{border-color:var(--soc-ok-line);color:var(--soc-ok-ink)}
/* needs attention = AMBER, never red */
.soc-conn[data-state="expiring"],
.soc-conn[data-state="expired"],
.soc-conn[data-state="disconnected"]{background:var(--soc-amber-bg);border-color:var(--soc-amber-line)}
.soc-conn[data-state="expiring"] .soc-conn-pill,
.soc-conn[data-state="expired"] .soc-conn-pill,
.soc-conn[data-state="disconnected"] .soc-conn-pill{border-color:var(--soc-amber-line);color:var(--soc-amber-ink)}
/* loading / busy = neutral, visibly NOT a verdict */
.soc-conn[data-state="loading"],
.soc-conn[data-state="busy"]{background:var(--panel-2);border-style:dashed}
.soc-conn[data-state="loading"] .soc-conn-avatar,
.soc-conn[data-state="busy"] .soc-conn-avatar{background:var(--soc-line);color:var(--soc-muted)}
.soc-conn[data-state="loading"] .soc-conn-pill,
.soc-conn[data-state="busy"] .soc-conn-pill{font-style:italic;font-weight:500}

/* skeleton bar where the handle will land */
.soc-conn-skel{
  display:inline-block;width:110px;height:11px;border-radius:4px;
  background:linear-gradient(90deg,var(--panel-2) 8%,var(--panel-3) 20%,var(--panel-2) 34%);
  background-size:200% 100%;animation:soc-shimmer 1.3s linear infinite;
}
@keyframes soc-shimmer{to{background-position:-200% 0}}

/* the small working indicator that stands where an action button would be */
.soc-conn-working{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--soc-line);border-top-color:var(--soc-accent);
  animation:soc-spin .8s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .soc-conn-skel,.soc-conn-working{animation:none}
}

/* contained failure — this section only; the rest of the page is fine */
.soc-conn-error{
  border:1px solid var(--soc-amber-line);background:var(--soc-amber-bg);
  border-radius:10px;padding:16px;text-align:center;
}
.soc-conn-error-msg{margin:0 0 4px;font-size:14px;color:var(--soc-amber-ink);font-weight:600}
.soc-conn-error-sub{margin:0 0 12px;font-size:12px;color:var(--soc-muted)}
.soc-conn-empty{margin:0;padding:22px;text-align:center;color:var(--soc-muted);font-size:14px}

/* ── empty state ──────────────────────────────────────────────────────────── */
.soc-empty{
  background:var(--soc-card);border:1px dashed var(--soc-line);
  border-radius:var(--soc-radius);padding:44px 24px;text-align:center;
}
.soc-empty h2{margin:0 0 8px;font-size:17px;color:var(--soc-ink)}
.soc-empty p{margin:0 auto;max-width:52ch;font-size:14px;color:var(--soc-muted)}

/* ── error / signed-out banner ────────────────────────────────────────────── */
.soc-banner{
  border-radius:var(--soc-radius);padding:14px 16px;margin-bottom:18px;font-size:14px;
  background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);color:var(--soc-amber-ink);
}
.soc-banner a{color:inherit;font-weight:700}
.soc-banner[data-kind="error"]{background:#fdf2f1;border-color:#e5b4ae;color:#8c2f26}

/* ── mobile ───────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .soc-main{padding:14px}
  .soc-topbar{padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top))}
  .soc-title{font-size:16px}
  /* The topbar has four children on a narrow screen; the text link is the one
     that can go, since the arrow does the same job. */
  .soc-back-text{display:none}
  .soc-session-pane{padding:28px 14px}
  .soc-login{padding:18px}
  .soc-card{padding:15px 16px}
  /* SHELL ON A PHONE — the prototype's own answer, not an invented one.
     The rail leaves the side entirely and becomes a FIXED BOTTOM BAR: icons
     above short labels, horizontally scrollable because ten items will not fit
     across 390px, with the brandmark and the rail foot hidden (both are
     identity, not navigation, and neither is worth the height). The stage gains
     bottom padding so the last card is never trapped under the bar. */
  .soc-shell{grid-template-columns:1fr}
  .soc-rail{
    position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;
    flex-direction:row;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid var(--line);z-index:40;
    background:#0D1420;box-shadow:none;
  }
  .soc-brandmark,.soc-rail-foot{display:none}
  .soc-nav{flex-direction:row;gap:2px}
  .soc-navlink{
    flex-direction:column;gap:3px;font-size:10px;padding:6px 9px;
    /* width:auto UNDOES the desktop rule's width:100%. Left in place, each of
       the ten items took the full width of the scroll container — measured at
       641px on a 390px screen — so the bottom bar became ten full-width buttons
       to swipe through instead of a row of icons. */
    flex:0 0 auto;width:auto;min-width:60px;text-align:center;
  }
  .soc-nav{flex:1 1 auto;min-width:0}
  .soc-navlink.is-active{padding-left:9px}
  .soc-navlink::before{display:none}       /* the left bar means nothing here */
  .soc-navcount{position:absolute;top:2px;right:6px;margin-left:0;font-size:9px;padding:0 4px}
  .soc-stage{padding:16px 14px 84px}
  .soc-transmission{padding:10px 14px;gap:10px}
  .soc-tx-clock{font-size:16px}
  .soc-tx-actions{width:100%;margin-left:0}
  .soc-tx-note{max-width:none}
  .soc-pagehead h1{font-size:21px}
  /* Queue cards: the thumbnail shrinks and the action row wraps to full width
     rather than four buttons fighting over a phone's worth of space. */
  .soc-qcard{gap:11px}
  .soc-qcard .soc-qthumb{width:56px;height:76px}
  .soc-qacts{width:100%}
  .soc-qacts .soc-btn{flex:1 1 auto;justify-content:center;padding:9px 10px}
  /* Comfortable touch targets. */
  .soc-btn{padding:11px 16px}
  .soc-empty{padding:32px 16px}
  /* Connection cards: the status pill and action drop below the handle rather
     than squeezing four things onto one narrow row. */
  .soc-conn{flex-wrap:wrap;gap:10px}
  .soc-conn-body{flex:1 1 60%}
  .soc-conn-right{margin-left:0;width:100%;justify-content:space-between}
  .soc-conn-btn{padding:10px 14px}
  .soc-conn-meta{font-size:11px}
  /* Studio: three across is unreadable on a phone. Directions go two-up
     (they're short), concepts stack — a concept card carries a caption and its
     reasoning, and squeezing that to a third of 390px makes both unreadable. */
  .soc-dirs{grid-template-columns:1fr 1fr;gap:6px}
  .soc-dir{padding:10px}
  .soc-concepts{grid-template-columns:1fr}
  .soc-concept.is-loading{min-height:120px}
  .soc-studio-actions{flex-wrap:wrap}
  .soc-budget{width:100%}
  /* S7: the variant tabs scroll rather than wrap into a tall block, and the
     steer row stacks so the input keeps a usable width. */
  .soc-var-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px}
  .soc-var-tab{flex:none;padding:8px 14px}
  .soc-reroll{gap:6px}
  .soc-steer{flex-basis:100%;order:3}
  .soc-field-note{order:4}
  .soc-assets{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .soc-product-pick input{flex-basis:100%}
  .soc-product-list{max-height:180px}

  /* CALENDAR ON A PHONE — the month grid becomes an AGENDA LIST.
     Seven columns in 390px gives each day ~50px, which cannot hold a date, a
     platform dot and a title; shrinking until it "fits" produces a grid nobody
     can read or tap. So on a phone the same data renders as a chronological
     list of days that actually have something in them, which is what someone
     checking their phone wants anyway — "what's going out, and when" — rather
     than a shape-accurate month. Empty days are omitted; the ghost slots stay,
     so scheduling still works from a phone. */
  .soc-cal{display:block;background:transparent;border:0;border-radius:0}
  .soc-cal-dow{display:none}
  .soc-cell{
    min-height:0;background:var(--panel);border:1px solid var(--line-soft);
    border-radius:var(--r-sm);margin-bottom:6px;padding:10px 12px;
  }
  /* Days outside the month, and days with nothing on them, are not worth a row. */
  .soc-cell.is-dim,.soc-cell.is-empty{display:none}
  .soc-cell-d{
    font-size:11px;color:var(--muted);border-bottom:1px solid var(--line-soft);
    padding-bottom:6px;margin-bottom:2px;
  }
  .soc-cell.is-today .soc-cell-d{color:var(--brand)}
  .soc-cevent{padding:8px 10px;font-size:12.5px}
  .soc-cal.is-week .soc-cell{min-height:0}
  .soc-cal-head{gap:8px}
  .soc-cal-nav{width:100%}
  .soc-toast{left:12px;right:12px;bottom:12px;transform:translateY(10px);justify-content:space-between}
  .soc-toast.is-on{transform:translateY(0)}
}

/* ══ APPROVALS QUEUE (S9) ════════════════════════════════════════════════════
   The prototype's .qcard, matched rather than approximated: portrait thumbnail
   on the left; tags, title, caption, hashtags and the agent's reasoning in the
   body; a four-action row at the bottom. */
.soc-queue{padding:14px 16px 16px}
.soc-queue[data-state="loading"] .soc-qmsg,
.soc-queue[data-state="error"] .soc-qmsg{display:block}

.soc-qmsg{padding:26px 20px;text-align:center;color:var(--muted);font-size:13px}
.soc-qmsg[data-tone="error"]{color:var(--bad)}
.soc-qempty{text-align:center;padding:34px 20px;color:var(--muted)}
.soc-qempty h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:14px;margin:0 0 5px;color:var(--ivory)}
.soc-qempty p{font-size:12.5px;max-width:38ch;margin:0 auto 12px}

.soc-qcard{
  display:flex;gap:14px;padding:14px 0;align-items:flex-start;
  border-bottom:1px solid var(--line-soft);
}
.soc-qcard:last-child{border-bottom:none}
.soc-qthumb{
  width:74px;height:100px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;
  overflow:hidden;position:relative;color:var(--faint);
  transition:border-color .2s;
}
.soc-qthumb img{width:100%;height:100%;object-fit:cover;display:block}
.soc-qthumb svg{width:18px;height:18px;opacity:.3}
.soc-qcard:hover .soc-qthumb{border-color:var(--panel-3)}
.soc-qbody{flex:1;min-width:0}
.soc-qtags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.soc-tag{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--panel-2);color:var(--muted);border:1px solid var(--line);
}
.soc-qwhen{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}
.soc-qtitle{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:14px;font-weight:600;margin-top:9px;color:var(--ivory)}
.soc-qcap{font-size:13px;line-height:1.55;margin:7px 0 9px;color:var(--ivory)}
.soc-qhash{font-size:12px;color:var(--faint);font-family:'JetBrains Mono',monospace;word-break:break-word}
/* The agent's reasoning is RMS BLUE — the module is gold, the AI's voice is
   blue, and the two never blend. */
.soc-qwhy{font-size:12px;color:var(--faint);margin-top:9px;display:flex;gap:7px;align-items:flex-start}
.soc-qwhy .soc-ai{color:var(--rms);display:inline-flex;flex:0 0 auto}
.soc-qwhy .soc-ai svg{width:13px;height:13px}
.soc-qacts{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}

/* PENDING — the named failure mode's whole reason for existing.
   A card being decided stays exactly where it is, visibly busy, until the
   server answers. It never slides out optimistically: the prototype's own
   decide() removes the card on a timer regardless of any server, and that is
   the one behaviour deliberately NOT copied. */
.soc-qcard.is-pending{opacity:.62}
.soc-qcard.is-pending .soc-qthumb{border-color:var(--brand-line)}
.soc-qbusy{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);
}
.soc-qbusy i{
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--brand-line);
  border-top-color:var(--brand);display:block;animation:soc-qspin .7s linear infinite;
}
@keyframes soc-qspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .soc-qbusy i{animation:none} }

/* The reject reason. Required by the API, so the form says so rather than
   letting somebody discover it by being refused. */
.soc-qreject{margin-top:11px;padding:11px;border:1px solid var(--brand-line);border-radius:var(--r-sm);background:var(--panel-2)}
.soc-qreject label{display:block;font-size:12.5px;font-weight:600;color:var(--ivory);margin-bottom:4px}
.soc-qreject p{margin:0 0 7px;font-size:12px;color:var(--muted)}
.soc-qreject textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--ivory);
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink);resize:vertical;min-height:62px;
}
.soc-qreject textarea:focus{outline:1px solid var(--brand-line);outline-offset:0;border-color:var(--brand-line)}
.soc-qreject-acts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.soc-qreject-err{margin:7px 0 0;font-size:12px;color:var(--warn)}

/* The decision, once made — shown on the card that is leaving. */
.soc-qdecided{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.soc-qdecided[data-verdict="approved"]{color:var(--ok)}
.soc-qdecided[data-verdict="rejected"]{color:var(--bad)}

/* ── autonomy switches (Settings) — stored, enforced by nothing ──────────── */
.soc-amber-note{
  margin:0 0 12px;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;
  color:var(--soc-amber-ink);background:var(--soc-amber-bg);border:1px solid var(--soc-amber-line);
}
.soc-autonomy{display:flex;flex-direction:column;gap:2px}
.soc-autonomy[data-state="loading"]::after{content:'Loading…';color:var(--faint);font-size:12.5px}
.soc-auto-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ivory);
}
.soc-auto-row:last-child{border-bottom:none}
.soc-auto-row .soc-auto-state{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.soc-auto-row .soc-auto-state[data-on="1"]{color:var(--warn)}

/* ══ S10 PART A — THE PROTOTYPE'S LAYOUT PRIMITIVES ══════════════════════════
   S8 aligned colour and type; S9 aligned the shell. Neither touched the INSIDE
   of the screens built in S2–S7, so four of them had the right colours and the
   wrong structure — stacked single columns where the prototype is two, and
   missing the panels it groups things into. These are the prototype's own grid
   and panel primitives, copied verbatim, so the four screens can be corrected
   with the same pieces rather than four bespoke layouts. */
.soc-grid{display:grid;gap:14px}
.soc-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.soc-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The prototype's asymmetric split: the working column, then a narrower rail. */
.soc-g-side{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.soc-col{display:flex;flex-direction:column;gap:14px;min-width:0}

.soc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.soc-panel-head h3{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:14px;font-weight:600;margin:0;letter-spacing:-.01em}
.soc-panel-body{padding:14px 16px 16px}
.soc-panel-body.is-tight{padding:10px 16px 14px}

/* Key/value rows — the prototype's .kv, used for spend, permissions, accounts. */
.soc-kv{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line-soft);
}
.soc-kv:last-child{border-bottom:none}
.soc-kv b{color:var(--ivory);font-weight:500;font-family:'JetBrains Mono',monospace;font-size:13px}

/* Step indicator (Studio). Reflects real progress, not decoration. */
.soc-steps{display:flex;gap:6px;flex-wrap:wrap}
.soc-step{
  display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--line);font-size:12.5px;color:var(--faint);
}
.soc-step .soc-step-n{font-family:'JetBrains Mono',monospace;font-size:11px}
.soc-step.is-on{border-color:var(--brand-line);background:var(--brand-dim);color:var(--brand);font-weight:500}
.soc-step.is-done{color:var(--muted)}

/* Spend bar. */
.soc-bar{height:5px;border-radius:3px;background:var(--panel-3);overflow:hidden}
.soc-bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}

/* Read-only state pill for a switch row. There is deliberately NO flippable
   control here yet: the per-post-type autonomy values are stored and read by
   nothing (S9), and a toggle that appears to do something while doing nothing
   would be worse than a label that states the truth. Making them flippable is a
   BEHAVIOUR change and is deliberately not part of this layout pass. */
.soc-switch-row{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.soc-switch-row:last-child{border-bottom:none}
.soc-switch-row .soc-switch-text{flex:1;min-width:0}
.soc-switch-row .soc-switch-name{font-size:13px;font-weight:500;color:var(--ivory)}
.soc-switch-row .soc-switch-sub{font-size:12px;color:var(--faint);margin-top:2px}
.soc-switch-state{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
  background:var(--panel-2);border-radius:6px;padding:2px 8px;flex:0 0 auto;
}
.soc-switch-state[data-on="1"]{color:var(--warn);border-color:rgba(223,162,60,.3);background:rgba(223,162,60,.1)}

/* A panel footer bar — the prototype's "two strong slots" strip under the
   calendar grid. */
.soc-footbar{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:10px 16px 14px;font-size:13px;color:var(--muted);
}

/* ── S10: page-head tools, and the four corrected screens ─────────────────── */
.soc-headtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* CALENDAR — legend now sits above the grid, so it needs bottom margin rather
   than the top margin it had when it hung underneath. */
.soc-legend{margin:0 0 14px}
.soc-cal-foot{margin-top:14px}
.soc-sched-panel{margin-top:14px}

/* CONNECTIONS — one panel per account inside a two-column grid. The old rules
   laid .soc-conn out as a full-width horizontal strip; it is a card now. */
.soc-conn{display:block;padding:0;gap:0}
.soc-conn .soc-panel-head h3{display:flex;align-items:center;gap:9px}
.soc-conn-idrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.soc-conn-idrow .soc-conn-avatar{margin:0}
.soc-conn-handle{font-size:13.5px;font-weight:600;color:var(--ivory);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-conn-note{margin:10px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
.soc-conn .soc-conn-right{margin:0;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-start}
.soc-conn-how{margin-top:14px}
.soc-conn-how p{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.soc-conn-how p:last-child{margin-bottom:0}
.soc-tag-warn{color:var(--warn);border-color:rgba(223,162,60,.3);background:rgba(223,162,60,.1)}

/* STUDIO — the draft editor's right rail. */
.soc-draft-grid{margin-top:4px}
.soc-preview-frame{
  width:100%;aspect-ratio:9/16;max-height:300px;margin:0 auto;
  border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--faint);
}
.soc-preview-frame svg{width:26px;height:26px;opacity:.35}
.soc-preview-note{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.soc-preview-cap{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap}
.soc-preview-cap:empty{display:none}
.soc-preview-tags{margin:7px 0 0;font-size:11.5px;color:var(--faint);font-family:'JetBrains Mono',monospace;word-break:break-word}
.soc-preview-tags:empty{display:none}

/* SETTINGS — the two-column grid is .soc-g2; nothing screen-specific needed
   beyond letting the left column's panels breathe. */
.soc-settings-grid{align-items:start}

/* ══ S10 PART A — MOBILE, AND IT MUST BE THE LAST BLOCK IN THIS FILE ═════════
   These rules were originally added INSIDE the S9 media query near line 786,
   which sits ABOVE the layout primitives appended below it. Same specificity,
   later rule wins — so `.soc-g2{grid-template-columns:repeat(2,…)}` beat the
   mobile override at EVERY width and the collapse silently never happened. It
   measured as two 180px columns on a phone and looked, in a source diff, like it
   was handled. Anything screen-collapsing added later belongs here, at the end,
   for the same reason. */
@media (max-width:1180px){
  /* EVERY multi-column grid from Part A collapses, written once against the
     shared primitives so a fifth screen using .soc-g2 cannot be forgotten. */
  .soc-g2,.soc-g3,.soc-g-side{grid-template-columns:1fr}
  .soc-pagehead{align-items:flex-start;gap:12px}
  .soc-pagehead h1{font-size:21px}
  .soc-headtools{width:100%}
  .soc-footbar{padding:10px 14px 12px}
  .soc-legend{margin-bottom:10px}
  /* Studio's right rail follows the fields rather than sitting beside them, and
     the preview stops being a tall portrait block that pushes the facts off. */
  .soc-preview-frame{max-height:220px;aspect-ratio:3/4}
  /* Connections: the account card's action row gets full-width tap targets. */
  .soc-conn .soc-conn-right{width:100%}
  .soc-conn .soc-conn-right .soc-btn{flex:1 1 auto;justify-content:center}
}

/* ── S11: the transmission bar comes alive ────────────────────────────────
   S9 built this permanently dormant. It now has three real states and they must
   look different at a glance — a bar that looks identical whether something is
   about to go out or nothing is scheduled is worse than no bar. */
.soc-transmission[data-state="loading"] .soc-tx-pulse{background:var(--faint)}
.soc-transmission[data-state="loading"] .soc-tx-pulse::after{animation:none;border-color:transparent}
.soc-transmission[data-state="loading"] .soc-tx-label{color:var(--faint)}
/* LIVE — a post is genuinely queued AND publishing is armed. This is the only
   state where the pulse actually pulses, so the animation means something. */
.soc-transmission[data-state="live"] .soc-tx-pulse{background:var(--brand)}
.soc-transmission[data-state="live"] .soc-tx-label{color:var(--brand)}
.soc-transmission[data-state="live"] .soc-tx-clock{color:var(--ivory)}
.soc-tx-meta[data-state="unavailable"]{color:var(--warn)}