/* ─── 26 Sep 2026 — SOCIAL PLANNER (src/SocialPage.jsx) ───────────────────────────────────────────
   The Social page of a music or vlog project: Today (agent drafts to review, the next 7 days, no date
   yet), the post drawer (its own folder's files + media linked from the project, the pre-post checks),
   the media picker, Calendar (month grid, phone week agenda), Accounts (add, edit, archive), Coach.

   Rules this file keeps:
   - Colours ONLY through tokens. The component aliases below (--soc-*) read existing tokens and are
     declared on every root this page renders: the page (.soc-page) and the three portal roots
     (.soc-drawer-scrim, .soc-picker-backdrop, .soc-confirm-backdrop), which live in #modal-root.
     Tokens read: --sep-panel, --sep-panel-fill, --sep-card-fill, --sep-row-fill, --sep-row-fill-hover,
     --sep-panel-ink-muted, --card-border, --ink, --ink-muted, --status-ok/-warn/-bad/-off/-on/-on-warn,
     --cta-bg, --cta-ink, --danger, --leaf, --black, --disabled-fill/-ink/-line, --input-bg, --input-border.
   - Each level a step LIGHTER than the one it sits on: page panel (.view-page) -> panel (.glass /
     drawer) -> card (--sep-card-fill) -> row / thumbnail (--sep-row-fill).
   - No layout shift (invariant #20): fixed heights for the card's caption (2 lines), check line and
     footer; the drawer reserves the reel block, the manual ticks and the checks list at their tallest;
     both media rows are fixed 88 px strips that scroll sideways.
   - Buttons reuse the app's classes (.media-expand-pill, .psu-btn, .agent-seg, .np-input, .np-label,
     .confirm-delete-*); this file only places them.

   - Every phone rule (body[data-ui-tier="s"]) sits at the END of the file. */

.soc-page,
.soc-drawer-scrim,
.soc-picker-backdrop,
.soc-confirm-backdrop {
  --soc-panel: var(--sep-panel);
  --soc-panel-fill: var(--sep-panel-fill);
  --soc-card: var(--sep-card-fill);
  --soc-row: var(--sep-row-fill);
  --soc-row-hover: var(--sep-row-fill-hover);
  --soc-line: color-mix(in srgb, var(--card-border) 60%, transparent);
  --soc-line-strong: var(--card-border);
  --soc-ink: var(--ink);
  --soc-muted: var(--ink-muted);
  --soc-ok: var(--status-ok);
  --soc-warn: var(--status-warn);
  --soc-bad: var(--status-bad);
  --soc-off: var(--status-off);
  --soc-on: var(--status-on);
  --soc-on-warn: var(--status-on-warn);
  --soc-accent: var(--cta-bg);           /* "scheduled" = the app's primary fill, with its own readable ink */
  --soc-on-accent: var(--cta-ink);
  --soc-danger: var(--danger);
  --soc-focus: var(--leaf);
  --soc-scrim: color-mix(in srgb, var(--black) 45%, transparent);
  --soc-shadow: color-mix(in srgb, var(--black) 30%, transparent);
  --soc-thumb-bg: var(--sep-row-fill-hover);
  --soc-disabled-fill: var(--disabled-fill);
  --soc-disabled-ink: var(--disabled-ink);
  --soc-disabled-line: var(--disabled-line);
  --soc-strip-h: 88px;
  --soc-card-h: 232px;   /* the check line takes up to 2 lines (26 Sep 2026) */
  color: var(--soc-ink);
}

/* ── the page ── */
.view-page.soc-page { scrollbar-gutter: stable; }
.soc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  min-width: 0;
}
.soc-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.soc-eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  color: var(--soc-muted);
}
.soc-head-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soc-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.soc-page .psu-btn, .soc-drawer .psu-btn, .soc-picker .psu-btn { min-width: 84px; padding: 0 12px; font-family: inherit; }
.soc-page .psu-btn--do, .soc-drawer .psu-btn--do, .soc-picker .psu-btn--do { min-width: 120px; }
.soc-page .media-expand-pill,
.soc-drawer .media-expand-pill,
.soc-picker .media-expand-pill { margin-top: 0; font-family: inherit; white-space: nowrap; }
/* the primary pill (Approve, Save, a switch that is on): the solid check pair, which every skin family
   keeps at 4.5:1 or better (test/skinSeparation.test.js), never the faint .is-on tint (26 Sep 2026: it
   read as disabled in the dark glass skins) */
.soc-page .media-expand-pill.is-on,
.soc-drawer .media-expand-pill.is-on,
.soc-picker .media-expand-pill.is-on {
  background: var(--check-on-fill);
  border-color: var(--check-on-fill);
  color: var(--check-on-ink);
}
.soc-page .media-expand-pill.is-on:hover:not(:disabled),
.soc-drawer .media-expand-pill.is-on:hover:not(:disabled),
.soc-picker .media-expand-pill.is-on:hover:not(:disabled) { background: var(--check-on-fill); filter: brightness(1.08); }
/* a control that is off stays readable (the disabled pair keeps full ink); a reason line says why */
.soc-page .media-expand-pill:disabled,
.soc-drawer .media-expand-pill:disabled,
.soc-picker .media-expand-pill:disabled,
.soc-page .psu-btn:disabled,
.soc-drawer .psu-btn:disabled,
.soc-picker .psu-btn:disabled {
  opacity: 1;
  background: var(--soc-disabled-fill);
  color: var(--soc-disabled-ink);
  border-color: var(--soc-disabled-line);
  filter: none;
  cursor: default;
}
.soc-page :is(button, input, select, textarea):focus-visible,
.soc-drawer :is(button, input, select, textarea):focus-visible,
.soc-picker :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--soc-focus); outline-offset: 1px; }

.soc-body { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
.soc-status-line {
  height: 18px;
  line-height: 18px;
  font-size: var(--fs-12);
  color: var(--soc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.soc-status-line.is-err { color: var(--soc-danger); }
.soc-note { padding: 28px; text-align: center; font-size: var(--fs-13); color: var(--soc-muted); }

/* ── a panel (a Today group, the accounts list) ── */
.soc-panel { padding: 14px 16px 16px; border-radius: var(--r-md); }
.soc-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 26px;
  margin-bottom: 8px;
  min-width: 0;
}
.soc-group-title { font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; }
.soc-group-sub {
  min-width: 0;
  font-size: var(--fs-12);
  color: var(--soc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soc-group-count { margin-left: auto; font-size: var(--fs-12); color: var(--soc-muted); font-variant-numeric: tabular-nums; }
.soc-days { display: flex; flex-direction: column; }
.soc-day { padding: 10px 0; border-top: 1px solid var(--soc-line); }
.soc-day:first-child { border-top: 0; padding-top: 0; }
.soc-day-head { display: flex; align-items: baseline; gap: 10px; height: 22px; margin-bottom: 6px; }
.soc-day-name { font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap; }
.soc-day-date { font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; }
.soc-day-empty { height: 22px; line-height: 22px; font-size: var(--fs-12); color: var(--soc-muted); }

/* ── a post card ── */
.soc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 10px; align-items: stretch; }
.soc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the card's column never grows past the card (26 Sep 2026, phone overflow) */
  grid-template-rows: 24px 20px 36px 38px minmax(0, 1fr);
  row-gap: 6px;
  box-sizing: border-box;
  height: var(--soc-card-h);
  padding: 12px 12px 10px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-md);
  background: var(--soc-card);
  min-width: 0;
}
.soc-card--agent { border-color: color-mix(in srgb, var(--soc-accent) 55%, transparent); }
.soc-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soc-chip {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--soc-line-strong);
  border-radius: var(--r-xs);
  background: var(--soc-row);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-align: center;
}
.soc-card-kind { flex: 0 1 auto; min-width: 0; font-size: var(--fs-12); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-card-time { flex: 0 0 auto; font-size: var(--fs-12); color: var(--soc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc-card-top .soc-status { margin-left: auto; }
.soc-card-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the first red/amber line: up to 2 lines in a fixed 36 px row (the card never changes height) */
.soc-card-check { display: flex; align-items: flex-start; gap: 7px; min-width: 0; min-height: 36px; font-size: var(--fs-12); line-height: 18px; }
.soc-card-check .soc-dot { margin-top: 5px; }
.soc-card-check span:last-child { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soc-card-caption {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 19px;
  color: var(--soc-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}
.soc-card-foot { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 0; }
.soc-card-actions { display: flex; align-items: center; gap: 6px; height: 34px; overflow: hidden; }
.soc-card-actions .media-expand-pill, .soc-mark .media-expand-pill { height: 26px; box-sizing: border-box; padding: 0 9px; }
.soc-card-msg { height: 16px; line-height: 16px; font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-card-msg.is-err { color: var(--soc-danger); }
.soc-card-link { font-size: var(--fs-12); color: var(--soc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mark posted: an inline row (never a browser dialog), 34 px like the actions row and the drawer's Posted rows */
.soc-mark { display: flex; align-items: center; gap: 6px; height: 34px; min-width: 0; }
.soc-mark .np-input { flex: 1 1 auto; min-width: 0; height: 30px; box-sizing: border-box; padding: 0 10px; font-size: var(--fs-12); }

/* ── status pill (fixed width, fixed status colours) ── */
.soc-status {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 84px;
  height: 22px;
  line-height: 22px;
  border-radius: var(--r-round);
  text-align: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soc-on);
  background: var(--soc-off);
}
.soc-status--draft { background: var(--soc-warn); color: var(--soc-on-warn); }
.soc-status--scheduled { background: var(--soc-accent); color: var(--soc-on-accent); }
.soc-status--posted { background: var(--soc-ok); }
.soc-status--idea, .soc-status--skipped { background: var(--soc-off); color: var(--soc-on-warn); }   /* dark ink on the grey: 4.56:1 (white on it is 3.9) */

/* ── check dots ── */
.soc-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--soc-off); }
.soc-dot--green { background: var(--soc-ok); }
.soc-dot--amber { background: var(--soc-warn); }
.soc-dot--red { background: var(--soc-bad); }

/* ── the post drawer (portal into #modal-root) ── */
.soc-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--soc-scrim);
  backdrop-filter: blur(var(--blur-scrim-2));
}
.soc-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) auto;
  width: 520px;
  max-width: 100vw;
  box-sizing: border-box;
  border-left: 1px solid var(--soc-line-strong);
  background: var(--soc-panel);
  --ink-muted: var(--sep-panel-ink-muted);
  --soc-muted: var(--sep-panel-ink-muted);
  color: var(--soc-ink);
  box-shadow: -18px 0 48px var(--soc-shadow);
}
.soc-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--soc-line);
}
.soc-drawer-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.soc-drawer-title b {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soc-drawer-title span { font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-drawer-body { overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; scrollbar-gutter: stable; }
.soc-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--soc-line);
}
.soc-drawer-btns { display: flex; align-items: center; gap: 8px; }
.soc-drawer-btns .soc-grow { flex: 1 1 auto; }

/* a section of the drawer: a card on the drawer's panel */
.soc-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-md);
  background: var(--soc-card);
}
.soc-sec-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.soc-sec-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  color: var(--soc-muted);
}
.soc-sec-note { margin-left: auto; font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; }
.soc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.soc-field-top { display: flex; align-items: baseline; gap: 8px; }
.soc-count { margin-left: auto; font-size: var(--fs-12); color: var(--soc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc-count.is-over { color: var(--soc-danger); font-weight: var(--fw-semi); }
.soc-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* under Day / Time: the audience's clock when it reads differently (always drawn, one line) */
.soc-tz-line { height: 18px; margin-top: -2px; line-height: 18px; font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-drawer .np-input, .soc-page .np-input, .soc-picker .np-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font-size: var(--fs-13);
}
.soc-drawer textarea.np-input, .soc-page textarea.np-input {
  height: auto;
  padding: 8px 10px;
  line-height: 1.45;
  resize: none;
}
.soc-caption { min-height: 132px; }
.soc-notes { min-height: 70px; }
.soc-drawer .np-input:disabled, .soc-page .np-input:disabled {
  background: var(--soc-disabled-fill);
  color: var(--soc-disabled-ink);
  border-color: var(--soc-disabled-line);
}
.soc-drawer .agent-seg, .soc-page .agent-seg { margin-bottom: 0; flex-wrap: nowrap; }
.soc-drawer .agent-seg-btn:disabled { cursor: default; }
.soc-seg-row { display: flex; align-items: center; gap: 10px; min-height: 30px; flex-wrap: wrap; }

/* the reel block (hook / twist / ending + the coach's hook options): always the same height */
.soc-craft { min-height: 356px; box-sizing: border-box; }
.soc-craft.is-off .soc-field, .soc-craft.is-off .soc-hooks { opacity: 0.72; }
.soc-hooks { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.soc-hook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  border-radius: var(--r-sm);
  background: var(--soc-row);
  border: 1px solid transparent;
}
.soc-hook.is-pick { border-color: var(--soc-line-strong); }
.soc-hook-text { min-width: 0; display: flex; flex-direction: column; }
.soc-hook-text b, .soc-hook-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-hook-text b { font-size: var(--fs-13); font-weight: var(--fw-semi); }
.soc-hook-text span { font-size: var(--fs-12); color: var(--soc-muted); }
.soc-hooks-empty { font-size: var(--fs-12); color: var(--soc-muted); line-height: 1.45; }

/* media: two rows, each a fixed 88 px strip that scrolls sideways */
.soc-media-row { display: flex; flex-direction: column; gap: 6px; }
.soc-media-head { display: flex; align-items: center; gap: 8px; min-height: 26px; min-width: 0; }
.soc-media-name { font-size: var(--fs-12); font-weight: var(--fw-semi); white-space: nowrap; }
.soc-path {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--soc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.soc-media-head .media-expand-pill { margin-left: auto; }
.soc-strip {
  display: flex;
  gap: 6px;
  height: var(--soc-strip-h);
  box-sizing: border-box;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--soc-row);
  overflow-x: auto;
  overflow-y: hidden;
}
.soc-strip-empty { align-self: center; padding: 0 8px; font-size: var(--fs-12); color: var(--soc-muted); line-height: 1.4; }
.soc-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.soc-thumb-box {
  width: 72px;
  height: 62px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--soc-thumb-bg);
  display: grid;
  place-items: center;
  color: var(--soc-muted);
}
.soc-thumb-box img, .soc-thumb-box video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.soc-thumb-label { font-size: var(--fs-11); line-height: 16px; color: var(--soc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-thumb-size {
  position: absolute;
  left: 3px;
  top: 3px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--soc-card);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}
.soc-thumb-tag {
  position: absolute;
  left: 3px;
  bottom: 21px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--soc-card);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  line-height: 14px;
}
.soc-thumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--soc-line-strong);
  border-radius: 50%;
  background: var(--soc-card);
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-12);
  line-height: 18px;
  cursor: pointer;
}

/* ticks + the checks list (a fixed box: its length changes with the post, the drawer does not) */
.soc-ticks { display: flex; flex-direction: column; gap: 2px; min-height: 126px; }   /* 3 manual ticks + the AI label, the most any kind has */
.soc-tick { display: flex; align-items: center; gap: 8px; height: 30px; font-size: var(--fs-13); cursor: pointer; }
.soc-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--soc-accent); }
.soc-tick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-checks {
  height: 236px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 6px;
  list-style: none;
  border-radius: var(--r-sm);
  background: var(--soc-row);
}
.soc-check { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 2px; font-size: var(--fs-13); line-height: 1.4; }
.soc-check .soc-dot { transform: translateY(-1px); }
.soc-posted-row { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 0; }
.soc-posted-row .soc-card-link { flex: 1 1 auto; min-width: 0; }

/* ── the media picker (over the drawer) ── */
.soc-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-2);
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--soc-scrim);
}
.soc-picker {
  display: grid;
  grid-template-rows: 52px 44px minmax(0, 1fr) 56px;
  width: min(860px, 94vw);
  height: min(680px, 88vh);
  box-sizing: border-box;
  border: 1px solid var(--soc-line-strong);
  border-radius: var(--r-lg);
  background: var(--soc-panel);
  --ink-muted: var(--sep-panel-ink-muted);
  --soc-muted: var(--sep-panel-ink-muted);
  color: var(--soc-ink);
  box-shadow: 0 24px 64px var(--soc-shadow);
  overflow: hidden;
}
.soc-picker-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--soc-line); }
.soc-picker-head b { flex: 1 1 auto; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.soc-picker-tools { display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.soc-picker-tools .np-input { flex: 1 1 auto; }
.soc-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-rows: 134px;
  gap: 8px;
  padding: 10px 18px;
  overflow-y: auto;
  align-content: start;
}
.soc-pick {
  display: grid;
  grid-template-rows: 92px 18px 16px;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-sm);
  background: var(--soc-card);
  color: var(--soc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.soc-pick:hover:not(:disabled) { background: var(--soc-row-hover); }
.soc-pick.is-on { border-color: var(--soc-accent); box-shadow: inset 0 0 0 2px var(--soc-accent); }
.soc-pick:disabled { cursor: default; background: var(--soc-disabled-fill); color: var(--soc-disabled-ink); }
.soc-pick-img { border-radius: var(--r-xs); overflow: hidden; background: var(--soc-thumb-bg); display: grid; place-items: center; color: var(--soc-muted); }
.soc-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-pick-name { font-size: var(--fs-12); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-pick-sub { font-size: var(--fs-11); color: var(--soc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-picker-empty { grid-column: 1 / -1; padding: 24px; text-align: center; font-size: var(--fs-13); color: var(--soc-muted); }
.soc-picker-foot { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-top: 1px solid var(--soc-line); }
.soc-picker-foot .soc-status-line { flex: 1 1 auto; }

/* ── the styled confirm (reuses .confirm-delete-*) ── */
.soc-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-3);
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--soc-scrim);
}

/* ── Accounts: rows, the "Show archived" row (fixed height), the add / edit form ── */
.soc-accounts { display: flex; flex-direction: column; gap: 6px; }
.soc-accounts--archived { margin-top: 6px; }
.soc-acc-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 0.8fr) 90px minmax(0, 1fr) 124px 160px;   /* 9 Oct 2026: + the setup pill */
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--soc-card);
  font-size: var(--fs-13);
}
.soc-acc-acts { display: flex; justify-content: flex-end; gap: 6px; }
.soc-acc-empty { font-size: var(--fs-13); color: var(--soc-ink); line-height: 1.5; margin: 0 0 10px; }
.soc-acc-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-md);
  background: var(--soc-card);
}
.soc-acc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.soc-acc-grid .soc-field--wide { grid-column: span 2; }
.soc-acc-grid .soc-field--half { grid-column: span 2; align-self: stretch; }
.soc-acc-text { min-height: 76px; }
.soc-acc-btns { display: flex; align-items: center; gap: 8px; }
.soc-acc-btns .soc-status-line { flex: 1 1 auto; }

/* ── Calendar: one bar, a Monday-first month of 6 weeks (always), fixed-height days ── */
.soc-cal-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 36px; margin-bottom: 10px; }
.soc-cal-nav { display: flex; align-items: center; gap: 6px; }
.soc-cal-label { width: 160px; font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.soc-cal-state { width: 200px; margin-left: auto; font-size: var(--fs-12); color: var(--soc-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-cal-state.is-err { color: var(--soc-danger); }
.soc-cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: 22px; margin-bottom: 4px; }
.soc-cal-head span { font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--soc-muted); padding-left: 6px; }
.soc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 124px; gap: 4px; }   /* the number + 3 chips + "+N more" fit without squeezing */
.soc-cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: var(--soc-card);
  overflow: hidden;
}
.soc-cal-day.is-out { background: var(--soc-row); }
.soc-cal-day.is-out .soc-cal-num { color: var(--soc-muted); }
.soc-cal-day.is-today { border-color: var(--soc-accent); }
.soc-cal-add { position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.soc-cal-add:hover { background: var(--soc-row-hover); }
.soc-cal-num { position: relative; z-index: 1; height: 18px; line-height: 18px; font-size: var(--fs-12); font-weight: var(--fw-semi); pointer-events: none; }
.soc-cal-chip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  height: 22px;
  min-width: 0;
  padding: 0 6px 0 5px;
  border: 0;
  border-left: 3px solid var(--soc-off);
  border-radius: var(--r-xs);
  background: var(--soc-row);
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-11);
  text-align: left;
  cursor: pointer;
}
.soc-cal-chip:hover { background: var(--soc-row-hover); }
.soc-cal-chip b { font-weight: var(--fw-bold); }
.soc-cal-chip span { font-variant-numeric: tabular-nums; color: var(--soc-muted); }
.soc-cal-chip i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-cal-chip--draft { border-left-color: var(--soc-warn); }
.soc-cal-chip--scheduled { border-left-color: var(--soc-accent); }
.soc-cal-chip--posted { border-left-color: var(--soc-ok); }
.soc-cal-more { position: relative; z-index: 1; align-self: flex-start; height: 18px; padding: 0 4px; border: 0; background: transparent; color: var(--soc-ink); font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); text-decoration: underline; cursor: pointer; }
.soc-week { display: flex; flex-direction: column; gap: 6px; }
.soc-week-day { padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--soc-card); }
.soc-week-day.is-today { border-color: var(--soc-accent); }
.soc-week-add { margin-left: auto; }
.soc-week-chips { display: flex; flex-direction: column; gap: 4px; }
.soc-week-chips .soc-cal-chip { height: 30px; font-size: var(--fs-12); }
/* the "+N more" list of one day (reuses the picker's frame) */
.soc-picker.soc-daylist { grid-template-rows: 52px minmax(0, 1fr); width: min(560px, 94vw); height: min(520px, 80vh); }
.soc-daylist-rows { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; overflow-y: auto; }
.soc-daylist-row {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-sm);
  background: var(--soc-card);
  color: var(--soc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.soc-daylist-row:hover { background: var(--soc-row-hover); }
.soc-daylist-title { min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Coach: the intro line, the social chats list and the shared AgentChat (fixed height) ── */
.soc-coach-wrap { display: flex; flex-direction: column; gap: 12px; }
.soc-coach-intro { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.soc-coach-intro p { flex: 1 1 auto; margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--soc-ink); }
.soc-coach {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  height: clamp(480px, calc(var(--app-vh, 100vh) - 320px), 860px);
  min-height: 480px;
}
.soc-coach > .agent-chat { height: 100%; }
/* the social chat has no plan panel (like the Agent page's project chat, agent.css .agent-chat--project):
   one column, so the chat fills the room beside the chat list instead of leaving a 320 px strip */
.soc-coach > .agent-chat--social { grid-template-columns: minmax(0, 1fr); }
.soc-coach-listhead { justify-content: space-between; gap: 8px; }
/* 26 Sep 2026 — under a Social agent turn that drafted posts: one Undo per post (src/AgentPage.jsx) */
.agent-chat--social .agent-undo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agent-chat--social .agent-undo-row .agent-undo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chat--social .agent-undo-row .agent-undo:disabled { opacity: 1; background: var(--disabled-fill); color: var(--disabled-ink); border-color: var(--disabled-line); }   /* readable when off: "Undone" */

/* ── 26 Sep 2026 — SOCIAL PART B: heroes, reels ─────────────────────────────────────────────────
   The hero filter (a fixed 34 px row), the Accounts tab per hero (a panel card per hero, empty slots with
   Add / the template's suggestion), the Reels tab (a card per reel: the length meter, the craft marks,
   the craft fields, the shots, the checks, the posts), the agent's options popover. Same token aliases,
   same "each level lighter" steps: panel -> hero / reel card (--soc-card) -> row (--soc-row). */
.soc-sec-note { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.soc-sec-head .soc-sec-title { flex: 0 0 auto; white-space: nowrap; }   /* the title never wraps under a long note */
.soc-hero-filter { display: flex; align-items: center; gap: 10px; height: 34px; min-width: 0; }
.soc-hero-filter .agent-seg { max-width: 100%; overflow-x: auto; }
.soc-hero-name { font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-acc-slot-text { min-width: 0; font-size: var(--fs-13); color: var(--soc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-hero-add { display: grid; grid-template-columns: minmax(0, 320px) auto minmax(0, 1fr); align-items: center; gap: 8px; height: 36px; }
.soc-meter { display: flex; flex-direction: column; gap: 4px; }
.soc-meter-bar { position: relative; height: 10px; border-radius: var(--r-round); background: var(--soc-row); overflow: hidden; }
.soc-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--soc-off); }
.soc-meter-fill--green { background: var(--soc-ok); }
.soc-meter-fill--amber { background: var(--soc-warn); }
.soc-meter-fill--red { background: var(--soc-bad); }
.soc-meter-target { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--soc-ink); }
.soc-meter-text { display: flex; align-items: center; gap: 7px; height: 18px; font-size: var(--fs-12); min-width: 0; }
.soc-meter-text span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-reel-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.soc-reel-fields .soc-field-top .np-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-reel-foot { display: grid; grid-template-columns: 150px auto minmax(0, 1fr); align-items: end; gap: 8px; }
.soc-reel-foot .soc-status-line { align-self: center; }
.soc-optlink {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-12);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.soc-optlink:disabled { color: var(--soc-muted); text-decoration: none; cursor: default; }
.soc-reel-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.soc-reel-shotlist { display: flex; flex-direction: column; gap: 4px; }
.soc-reel-shot {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 92px 72px;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--soc-row);
  font-size: var(--fs-12);
}
.soc-reel-shot.is-twist { border-color: var(--soc-line-strong); }
.soc-reel-code { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--soc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-reel-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-reel-secs { font-size: var(--fs-11); color: var(--soc-muted); white-space: nowrap; }
.soc-page .np-input.soc-reel-secsin { height: 26px; padding: 0 6px; font-size: var(--fs-12); }
/* an ASSUMED length (no edit, no plan yet) is only a placeholder: muted and slanted, never read as a typed value */
.soc-page .np-input.soc-reel-secsin::placeholder { color: var(--soc-muted); font-style: italic; opacity: 0.75; }
/* the craft fields wrap their words inside a fixed two-line box: typing never moves anything below */
.soc-page textarea.np-input.soc-reel-craftin { height: 58px; min-height: 58px; padding: 6px 10px; line-height: 1.4; overflow-y: auto; }
.soc-reel-twist { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.soc-reel-twist input { margin: 0; accent-color: var(--soc-accent); }
.soc-reel-checks { height: 150px; }
.soc-reel-posts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.soc-reel-post {
  height: 22px;
  padding: 0 8px;
  border-left: 3px solid var(--soc-off);
  border-radius: var(--r-xs);
  background: var(--soc-row);
  font-size: var(--fs-11);
  line-height: 22px;
  white-space: nowrap;
}
.soc-reel-noposts { font-size: var(--fs-12); color: var(--soc-muted); }
.soc-reel-posts .media-expand-pill { margin-left: auto; }
/* a linked song's Play / Pause (the header music player plays it): the whole 72 x 62 box is the button */
.soc-song-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--soc-thumb-bg);
  color: var(--soc-ink);
  font: inherit;
  cursor: pointer;
}
/* the song tile: wider than a picture, fixed 80 px: circle | title (2 lines) + album */
.soc-thumb.soc-thumb--song { width: 232px; flex-direction: row; align-items: center; gap: 8px; box-sizing: border-box; padding: 0 26px 0 6px; border-radius: var(--r-xs); background: var(--soc-thumb-bg); }
.soc-thumb--song.is-on { background: var(--soc-row-hover); }
.soc-thumb--song .soc-song-btn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: transparent; }
.soc-thumb--song .soc-song-btn--none { display: grid; place-items: center; color: var(--soc-muted); }
.soc-song-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soc-song-text b { font-size: var(--fs-12); font-weight: var(--fw-semi); line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soc-song-text span { font-size: var(--fs-11); line-height: 15px; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-song-btn:hover:not(:disabled) { background: var(--soc-row-hover); }
.soc-song-btn.is-on { background: var(--soc-row-hover); }
.soc-song-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--soc-accent); color: var(--soc-on-accent); }
.soc-song-btn:disabled .soc-song-ico { background: var(--soc-disabled-line); color: var(--soc-disabled-ink); }
.soc-song-btn:disabled { background: var(--soc-disabled-fill); cursor: default; }
.soc-picker.soc-optpop { grid-template-rows: 52px minmax(0, 1fr); width: min(620px, 94vw); height: auto; max-height: min(420px, 80vh); }
.soc-optpop-rows { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 16px; overflow-y: auto; }

/* ── 26 Sep 2026 — Instagram through its API (checkpoint 4): the drawer's publish block, Accounts' panel ── */
.soc-pub { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--soc-line); }
.soc-pub-head { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; min-width: 0; }
.soc-pub-line { min-width: 0; font-size: var(--fs-12); line-height: 18px; color: var(--soc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soc-pub-line.is-err { color: var(--soc-danger); }
.soc-pub-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.soc-pub-note { font-size: var(--fs-12); color: var(--soc-muted); }
.soc-pub-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.soc-pub-num { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: var(--r-xs); background: var(--soc-row); min-width: 0; }
.soc-pub-num b { font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.soc-pub-num span { font-size: var(--fs-11); color: var(--soc-muted); }
.soc-ig-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 12px; }
.soc-ig-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--soc-line); border-radius: var(--r-md); background: var(--soc-card); }
.soc-ig-key { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-13); }
.soc-ig-key span { color: var(--soc-muted); }
.soc-ig-form { display: flex; flex-direction: column; gap: 6px; }
.soc-ig-btns { display: flex; gap: 6px; }
.soc-ig-note { margin: 0; font-size: var(--fs-12); line-height: 1.45; color: var(--soc-muted); }
.soc-ig-redirect { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soc-ig-redirect .soc-path { flex: 1 1 auto; }
.soc-ig-steps { margin: 0; padding-left: 20px; font-size: var(--fs-13); line-height: 1.5; }
.soc-ig-steps li { margin-bottom: 4px; }
.soc-ig-links { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-ig-acc-title { margin-bottom: 6px; }
.soc-acc-row.soc-ig-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.soc-ig-handle { min-width: 0; font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-ig-handle i { font-style: normal; font-weight: var(--fw-regular, 400); color: var(--soc-muted); }
.soc-ig-state { min-width: 0; font-size: var(--fs-12); color: var(--soc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-ig-state.is-ok { color: var(--soc-ok); font-weight: var(--fw-semi); }
.soc-ig-state.is-bad { color: var(--soc-danger); font-weight: var(--fw-semi); }
.soc-panel.soc-ig { margin-top: 0; }

/* ── Account setup (9 Oct 2026): the row's "Setup 7 / 12" pill + bar, and the checklist (the picker's frame).
   Fixed sizes everywhere: the pill is one width whatever its count, every step keeps its "who ticked" line
   (empty or not), so a tick moves nothing (invariant 20). Colours through the --soc-* aliases only. ── */
.soc-acc-setup { min-width: 0; display: flex; align-items: center; }
.soc-setup-pill {
  display: grid;
  grid-template-rows: 14px 4px;
  row-gap: 3px;
  align-content: center;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--soc-line-strong);
  border-radius: var(--r-sm);
  background: var(--soc-row);
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  text-align: left;
  cursor: pointer;
}
.soc-setup-pill:hover { background: var(--soc-row-hover); }
.soc-setup-pill:focus-visible { outline: 2px solid var(--soc-focus); outline-offset: 1px; }
.soc-setup-pill-text { line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-setup-bar { display: block; height: 4px; border-radius: 2px; background: var(--soc-line); overflow: hidden; }
.soc-setup-bar i { display: block; height: 100%; border-radius: 2px; background: var(--soc-accent); }
.soc-setup-pill.is-done .soc-setup-bar i { background: var(--soc-ok); }
.soc-picker.soc-setup { grid-template-rows: 52px minmax(0, 1fr) 56px; grid-template-columns: minmax(0, 1fr); width: min(760px, 94vw); height: min(760px, 90vh); }
.soc-setup .soc-picker-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-setup .soc-picker-foot .soc-status-line { min-width: 0; }
.soc-setup-count { flex: 0 0 auto; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--soc-muted); }
.soc-setup-body { display: flex; flex-direction: column; gap: 16px; padding: 14px 18px; overflow-y: auto; min-height: 0; }
.soc-setup-sec { display: flex; flex-direction: column; gap: 8px; }
.soc-setup-phase { display: flex; align-items: baseline; gap: 10px; height: 20px; }
.soc-setup-phase-n { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--soc-muted); }
.soc-setup-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.soc-setup-sheet-btn { display: flex; align-items: center; justify-content: flex-end; height: 32px; }
.soc-setup-note { margin: 0; font-size: var(--fs-12); color: var(--soc-muted); line-height: 1.4; }
.soc-setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.soc-setup-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  min-height: 70px;
  padding: 8px 10px 8px 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--soc-card);
}
.soc-setup-step.is-done { border-color: var(--soc-line); }
.soc-setup-tick { display: flex; align-items: center; gap: 6px; height: 20px; cursor: pointer; }
.soc-setup-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--soc-accent); }
.soc-setup-tick input:disabled { cursor: default; }
.soc-setup-n { width: 20px; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--soc-muted); text-align: right; }
.soc-setup-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-setup-line { font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 20px; }
.soc-setup-path { font-size: var(--fs-12); line-height: 1.4; color: var(--soc-muted); }
.soc-setup-who { height: 16px; font-size: var(--fs-11); line-height: 16px; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 26 Oct 2026 — CARDS: Today's lanes, the Accounts cards, the Reels cards (Hugo, a reels project: "it's all
   rows ... lots of wasted space"). Fixed rows in every card (nothing moves when a state, a count or a button
   label changes); the same token aliases; levels: panel -> card (--soc-card) -> chip / row (--soc-row). The beat
   chips read the Script page's beat colours (tokens.css --beat-*, styles/episode-script.css .escr-bk--*). ── */
.soc-card-title {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.soc-card-title:hover { text-decoration: underline; }
.soc-card-actions .soc-card-do { min-width: 104px; }
.soc-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.soc-lane { display: flex; flex-direction: column; min-width: 0; }
.soc-lane .soc-group-head { align-items: center; }
.soc-lane-n {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--soc-accent);
  color: var(--soc-on-accent);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.soc-lane-cards { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 1180px) { .soc-lanes { grid-template-columns: minmax(0, 1fr); } }
.soc-today-foot { display: flex; align-items: center; height: 30px; }

/* Accounts: a row per hero (its name, then its three cards), the series on top; a flat grid without heroes */
.soc-acc-headbtns { display: flex; align-items: center; gap: 8px; }
.soc-acc-rows { display: flex; flex-direction: column; gap: 12px; }
.soc-acc-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: stretch; min-width: 0; }
.soc-acc-hero + .soc-acc-hero { padding-top: 12px; border-top: 1px solid var(--soc-line); }
.soc-acc-hero-head { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding-left: 2px; }
.soc-acc-hero-head .soc-hero-name, .soc-reel-hero-head .soc-hero-name { font-size: var(--fs-18); }
.soc-acc-hero-count { font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.soc-acc-hero--archived { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--soc-line); }
.soc-acc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.soc-acc-cards--flat { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.soc-acard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px 28px 18px 38px 34px 28px;
  row-gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--soc-line);
  border-radius: var(--r-md);
  background: var(--soc-card);
}
.soc-acard.is-slot { border-style: dashed; background: var(--soc-row); }
.soc-acard.is-archived { background: var(--soc-row); }
.soc-acard.is-editing { border-color: var(--soc-line-strong); }
.soc-acard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soc-acard-plat { min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-acard-state {
  flex: 0 0 auto;
  margin-left: auto;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-round);
  background: var(--soc-off);
  color: var(--soc-on-warn);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
}
.soc-acard-state.is-ok { background: var(--soc-ok); color: var(--soc-on); }
.soc-acard-state.is-on { background: var(--soc-accent); color: var(--soc-on-accent); }
.soc-acard-state.is-warn { background: var(--soc-warn); color: var(--soc-on-warn); }
.soc-acard-handle { min-width: 0; font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-acard-handle a { color: var(--soc-ink); text-decoration: none; }
.soc-acard-handle a:hover, .soc-acard-url:hover { text-decoration: underline; }
.soc-acard-handle .soc-acard-none { font-size: var(--fs-16); }
.soc-acard-none { color: var(--soc-muted); font-weight: var(--fw-semi); }
.soc-acard-link { min-width: 0; font-size: var(--fs-12); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-acard-link .soc-acard-none { font-weight: var(--fw-regular, 400); }
.soc-acard-url { color: var(--soc-muted); text-decoration: none; }
.soc-acard-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; min-width: 0; }
.soc-acard-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-acard-facts dt { font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--soc-muted); }
.soc-acard-facts dd { margin: 0; font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.soc-acard-setup { display: flex; align-items: center; min-width: 0; }
.soc-acard-setup .soc-acc-setup { width: 100%; }
.soc-acard-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.soc-acard-foot .media-expand-pill { height: 28px; box-sizing: border-box; padding: 0 12px; }
.soc-acard--add { grid-template-rows: 24px minmax(0, 1fr); }
.soc-acard--add .soc-hero-add { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; height: auto; row-gap: 8px; }
.soc-acard--add .soc-hero-add .media-expand-pill { justify-self: start; height: 28px; box-sizing: border-box; padding: 0 12px; }
.soc-drawer .soc-acc-form { margin-top: 0; }
.soc-drawer--acc .soc-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.soc-drawer--acc .soc-acc-grid .soc-field--wide { grid-column: 1 / -1; }
/* Instagram publishing: one bar; its window holds the keys, the address and each account's Connect */
.soc-ig-bar .soc-group-head { align-items: center; margin-bottom: 0; }
.soc-ig-facts { display: flex; gap: 16px; min-width: 0; overflow: hidden; font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; }
.soc-picker.soc-ig-pop { grid-template-rows: 52px minmax(0, 1fr) 56px; grid-template-columns: minmax(0, 1fr); width: min(980px, 94vw); height: min(760px, 90vh); }
.soc-ig-pop-body { min-height: 0; overflow-y: auto; padding: 14px 18px; }
.soc-ig-pop .soc-picker-foot .soc-status-line { min-width: 0; }
.soc-copylink { margin-left: 10px; }

/* Reels: hero -> episode -> a grid of reel cards */
.soc-reel-groups { display: flex; flex-direction: column; gap: 14px; }
.soc-reel-hero { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.soc-reel-hero + .soc-reel-hero { padding-top: 14px; border-top: 1px solid var(--soc-line); }
.soc-reel-hero-head { display: flex; align-items: baseline; gap: 12px; height: 28px; min-width: 0; }
.soc-reel-ep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.soc-reel-ep-head { display: flex; align-items: baseline; gap: 10px; height: 20px; min-width: 0; }
.soc-reel-ep-title { min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-reel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; }
.soc-rcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 32px 44px 24px 32px 20px 26px 28px 16px;
  row-gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  padding: 12px 14px 10px;
  border: 1px solid var(--soc-line);
  border-left: 3px solid var(--soc-off);
  border-radius: var(--r-md);
  background: var(--soc-card);
}
.soc-rcard--green { border-left-color: var(--soc-ok); }
.soc-rcard--amber { border-left-color: var(--soc-warn); }
.soc-rcard--red { border-left-color: var(--soc-bad); }
.soc-rcard-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.soc-rcard-num { flex: 0 0 auto; font-family: var(--font-display); font-size: var(--fs-26); line-height: 30px; letter-spacing: var(--track-005); color: var(--soc-ink); }
.soc-rcard-shots { margin-left: auto; font-size: var(--fs-12); color: var(--soc-muted); white-space: nowrap; }
.soc-rcard-title {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-ink);
  font: inherit;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.soc-rcard-title:hover { text-decoration: underline; }
.soc-rcard-len { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.soc-rcard .soc-meter-text { color: var(--soc-muted); }
.soc-rcard .soc-meter-text .soc-rcard-len { color: var(--soc-ink); }
.soc-rcard-state { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-13); font-weight: var(--fw-semi); line-height: 20px; }
.soc-rcard-state span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-rcard-posts { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.soc-rcard-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.soc-rcard-foot .media-expand-pill { height: 28px; box-sizing: border-box; padding: 0 12px; }
button.soc-reel-post { flex: 0 0 auto; border-top: 0; border-right: 0; border-bottom: 0; color: var(--soc-ink); font: inherit; font-size: var(--fs-11); cursor: pointer; }
button.soc-reel-post:hover { background: var(--soc-row-hover); }
/* the beats: Hook, Twist, Cliffhanger, Leaves open - the edge always in the beat's colour, the chip filled with a
   tint of it once the beat is written (dim until then) */
.soc-beat--hook, .soc-bk--hook { --soc-beat-c: var(--beat-hook, var(--leaf)); }
.soc-beat--twist, .soc-bk--twist { --soc-beat-c: var(--beat-twist, var(--warn)); }
.soc-beat--cliff, .soc-bk--cliff { --soc-beat-c: var(--beat-cliff, var(--danger)); }
.soc-beat--open, .soc-bk--open { --soc-beat-c: var(--beat-open, var(--ink-muted)); }
.soc-beats { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.soc-beat {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--soc-line);
  border-left: 3px solid var(--soc-beat-c);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--soc-muted);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}
.soc-beat.is-on { border-color: var(--soc-beat-c); background: color-mix(in srgb, var(--soc-beat-c) 26%, transparent); color: var(--soc-ink); }
.soc-drawer--reel { width: 600px; }
.soc-beat-field .soc-field-top .np-label { align-self: flex-start; padding: 1px 7px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--soc-beat-c) 26%, transparent); color: var(--soc-ink); }
.soc-beat-field .np-input { border-left: 3px solid var(--soc-beat-c); }

/* ── PHONE (tier "s"): cards in one column; the drawer and picker are full-screen sheets that stop
   above the bottom tab bar (--mtab-h, styles/mobile.css); bigger touch targets. Kept last. ── */
/* 26 Oct 2026 - "How this page works": collapsible card at the top. Collapsed height is fixed (the head row). */
.soc-how { flex: 0 0 auto; border: 1px solid var(--soc-line); background: var(--soc-card); border-radius: var(--r-12, 12px); }
.soc-how-head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 16px; background: transparent; border: 0; color: var(--soc-ink); font: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer; text-align: left; }
.soc-how-chev { width: 8px; height: 8px; border-right: 2px solid var(--soc-muted); border-bottom: 2px solid var(--soc-muted); transform: rotate(45deg); }
.soc-how.is-open .soc-how-chev { transform: rotate(-135deg); }
.soc-how-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 24px; padding: 4px 16px 16px; border-top: 1px solid var(--soc-line); }
.soc-how-h { font-size: var(--fs-13); font-weight: 700; color: var(--soc-ink); margin: 10px 0 6px; }
.soc-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.soc-how-list li { font-size: var(--fs-13); line-height: 1.4; color: var(--soc-ink); }
body[data-ui-tier="s"] .soc-head { height: 44px; }
body[data-ui-tier="s"] .soc-head-title { font-size: var(--fs-16); }
body[data-ui-tier="s"] .soc-panel { padding: 12px 10px; }
body[data-ui-tier="s"] .soc-cards { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] :is(.soc-body, .soc-panel, .soc-days, .soc-day, .soc-cards, .soc-card, .soc-week, .soc-week-day, .soc-accounts, .soc-acc-form) { min-width: 0; max-width: 100%; box-sizing: border-box; }
body[data-ui-tier="s"] .soc-page { --soc-card-h: 284px; }   /* meta 2 lines + check 3 lines + actions 2 rows, always reserved */
body[data-ui-tier="s"] .soc-card { grid-template-rows: 46px 20px 54px 38px minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-card-check { min-height: 54px; }
body[data-ui-tier="s"] .soc-card-check span:last-child { -webkit-line-clamp: 3; }
body[data-ui-tier="s"] .soc-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 24px 18px; column-gap: 8px; row-gap: 4px; align-items: center; }
body[data-ui-tier="s"] .soc-card-top .soc-chip { grid-column: 1; grid-row: 1; }
body[data-ui-tier="s"] .soc-card-kind { grid-column: 2; grid-row: 1; }
body[data-ui-tier="s"] .soc-card-top .soc-status { grid-column: 3; grid-row: 1; margin-left: 0; }
body[data-ui-tier="s"] .soc-card-time { grid-column: 1 / -1; grid-row: 2; min-width: 0; line-height: 18px; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .soc-card-actions { height: 58px; flex-wrap: wrap; align-content: flex-start; row-gap: 6px; overflow: hidden; }
body[data-ui-tier="s"] .soc-mark { height: 58px; flex-wrap: wrap; align-content: flex-start; row-gap: 6px; }
body[data-ui-tier="s"] .soc-mark .np-input { flex: 1 1 100%; height: 26px; }
body[data-ui-tier="s"] .soc-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 26px; height: 26px; align-items: center; }   /* 26 Oct 2026: no subtitle row (help text removed) */
body[data-ui-tier="s"] .soc-group-title { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .soc-group-count { grid-column: 2; grid-row: 1; margin-left: 0; }
body[data-ui-tier="s"] .soc-cal-nav { flex-wrap: wrap; width: 100%; }
body[data-ui-tier="s"] .soc-cal-label { order: -1; width: 100%; padding-left: 0; }
body[data-ui-tier="s"] .soc-week-day .soc-day-head { min-width: 0; }
body[data-ui-tier="s"] .soc-week-day .soc-day-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .soc-acc-acts .media-expand-pill { padding: 0 9px; }
body[data-ui-tier="s"] .soc-drawer-scrim { bottom: var(--mtab-h); backdrop-filter: none; }
body[data-ui-tier="s"] .soc-drawer { width: 100%; border-left: 0; box-shadow: none; }
body[data-ui-tier="s"] .soc-drawer-body { padding: 12px; }
body[data-ui-tier="s"] .soc-drawer-foot { padding: 8px 12px 10px; }
body[data-ui-tier="s"] .soc-drawer-btns { flex-wrap: wrap; }
body[data-ui-tier="s"] .soc-row2 { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-thumb-x { width: 32px; height: 32px; line-height: 30px; top: -2px; right: -2px; }
body[data-ui-tier="s"] .soc-tick { height: 40px; }
body[data-ui-tier="s"] .soc-ticks { min-height: 166px; }
body[data-ui-tier="s"] .soc-picker-backdrop { bottom: var(--mtab-h); padding: 0; }
body[data-ui-tier="s"] .soc-picker { width: 100%; height: 100%; border-radius: 0; border: 0; }
body[data-ui-tier="s"] .soc-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
body[data-ui-tier="s"] .soc-picker.soc-daylist { width: 100%; height: 100%; }
body[data-ui-tier="s"] .soc-cal-bar { gap: 8px; }
body[data-ui-tier="s"] .soc-cal-bar .agent-seg { max-width: 100%; overflow-x: auto; }
body[data-ui-tier="s"] .soc-cal-state { flex: 0 0 100%; width: auto; height: 18px; line-height: 18px; margin-left: 0; text-align: left; }   /* the line is always there: Prev / Next move nothing */
body[data-ui-tier="s"] .soc-acc-grid { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-acc-grid .soc-field--wide, body[data-ui-tier="s"] .soc-acc-grid .soc-field--half { grid-column: auto; }
body[data-ui-tier="s"] .soc-coach-intro { flex-direction: column; align-items: flex-start; }
body[data-ui-tier="s"] .soc-coach { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px minmax(420px, 1fr); height: auto; }
/* part B on the phone: one column; the hero filter scrolls sideways; a shot row drops its code column */
body[data-ui-tier="s"] .soc-reel-shot { grid-template-columns: minmax(0, 1fr) 72px 64px; }
body[data-ui-tier="s"] .soc-reel-code { display: none; }
body[data-ui-tier="s"] .soc-reel-fields .soc-field-top { flex-wrap: wrap; row-gap: 2px; }
body[data-ui-tier="s"] .soc-reel-fields .soc-field-top .np-label { white-space: normal; overflow: visible; text-overflow: clip; }
body[data-ui-tier="s"] .soc-reel-fields .soc-optlink { margin-left: 0; }
body[data-ui-tier="s"] .soc-page textarea.np-input.soc-reel-craftin { height: 78px; min-height: 78px; }
body[data-ui-tier="s"] .soc-reel-foot { grid-template-columns: minmax(0, 1fr) auto; }
body[data-ui-tier="s"] .soc-reel-foot .soc-status-line { grid-column: 1 / -1; }
body[data-ui-tier="s"] .soc-hero-add { grid-template-columns: minmax(0, 1fr) auto; height: auto; row-gap: 6px; }
body[data-ui-tier="s"] .soc-hero-add .soc-status-line { grid-column: 1 / -1; }
body[data-ui-tier="s"] .soc-setup-pill { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 32px; column-gap: 12px; align-items: center; height: 34px; padding: 0 10px; }
body[data-ui-tier="s"] .soc-setup-body { padding: 12px; }
body[data-ui-tier="s"] .soc-setup-sheet { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-setup-sheet-btn { justify-content: flex-start; }
body[data-ui-tier="s"] .soc-setup-step { grid-template-columns: 50px minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-setup-tick { height: 24px; }
body[data-ui-tier="s"] .soc-setup-tick input { width: 22px; height: 22px; }
body[data-ui-tier="s"] .soc-ig-grid { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-acc-row.soc-ig-row { grid-template-columns: 32px minmax(0, 1fr) auto; height: auto; min-height: 44px; }
body[data-ui-tier="s"] .soc-ig-row .soc-ig-state { grid-column: 2 / -1; grid-row: 2; }
body[data-ui-tier="s"] .soc-pub-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-ui-tier="s"] .soc-acc-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body[data-ui-tier="s"] .soc-acc-hero-head { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
body[data-ui-tier="s"] .soc-acc-cards { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] :is(.soc-acc-rows, .soc-acc-hero, .soc-acc-cards, .soc-acard, .soc-reel-groups, .soc-reel-hero, .soc-reel-ep, .soc-reel-cards, .soc-rcard) { min-width: 0; max-width: 100%; box-sizing: border-box; }
body[data-ui-tier="s"] .soc-rcard { grid-template-rows: 32px 44px 50px 32px 20px 26px 40px 16px; }   /* the four beats take two rows on a phone, always reserved */
body[data-ui-tier="s"] .soc-beats { flex-wrap: wrap; align-content: flex-start; row-gap: 6px; }
body[data-ui-tier="s"] .soc-ig-bar .soc-group-head { grid-template-rows: 26px 18px; height: auto; }
body[data-ui-tier="s"] .soc-ig-facts { grid-column: 1 / -1; grid-row: 2; }
body[data-ui-tier="s"] .soc-acc-headbtns { gap: 6px; }
body[data-ui-tier="s"] .soc-acard { grid-template-rows: 24px 28px 18px 38px 34px 40px; }
body[data-ui-tier="s"] .soc-acard--add { grid-template-rows: 24px minmax(0, 1fr); }
body[data-ui-tier="s"] .soc-group-head.soc-acc-head { grid-template-rows: 26px auto; height: auto; row-gap: 8px; }
body[data-ui-tier="s"] .soc-acc-head .soc-acc-headbtns { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }