/* ============================================================
   ta-asf-v1.5.13.css
   INBXIFY TA Studio — ASF (Asset Submission Form)
   Companion script: ta-asf-v1.5.13.js

   v1.5.13 — .asf-mainog-img: removed hardcoded aspect-ratio:1/1
   and background-size:cover. Ad preview boxes take their true
   per-format ratio (banner 700/235, sidebar 480/400, splash 1/1)
   via inline style, rendered contain so the whole creative shows.
   Content is identical to the v1.5.12 css already installed —
   renumbered only to pair with v1.5.13.js. If you keep the
   installed v1.5.12 css, no action needed; this file just keeps
   the pair numbering consistent. HC-ASF-ADIMG-01.

   v1.3.17 — No style change from v1.3.16 (JS-only: post-submit
             Workbench redirect). Version-matched bump.
   ──────────────────────────────────────────────────────────── */
/* ============================================================
   ta-asf-v1.3.16.css
   INBXIFY TA Studio — ASF (Asset Submission Form)
   Companion script: ta-asf-v1.3.16.js

   v1.3.16 — No style change from v1.3.15 (JS-only: URL conditioner).
             Version-matched bump for JS self-load sync.
   ──────────────────────────────────────────────────────────── */
/* ============================================================
   ta-asf-v1.3.15.css
   INBXIFY TA Studio — ASF (Asset Submission Form)
   Companion script: ta-asf-v1.3.15.js

   v1.3.15 — No style change from v1.3.14 (JS-only: inline MEDIA-id
             extraction for Scenario 104 Route 4). Version-matched
             bump so JS self-load stays in sync.
   ──────────────────────────────────────────────────────────── */
/* ============================================================
   ta-asf-v1.3.14.css
   INBXIFY TA Studio — ASF (Asset Submission Form)
   Companion script: ta-asf-v1.3.14.js

   v1.3.14 — overscroll-behavior:contain on .asf-overlay (swipe-back
             prevention; paired with JS history guard). No other
             style changes from v1.3.13.
   ──────────────────────────────────────────────────────────── */
/* ============================================================
   ta-asf-v1.3.13.css
   INBXIFY TA Studio — ASF (Asset Submission Form)
   Companion script: ta-asf-v1.3.13.js

   v1.3.13 — pickerRoleMap entry for 'splash-image' (JS only; no
   style changes). Companion v1.3.12 header preserved below.

   v1.3.12 — Splash Ad zone reuses existing .asf-mainog-zone / .asf-mainog-card
   styles (no new classes needed). Companion JS introduces splashImageSrc,
   splashImageMediaId, splashAdLink + matching attach/replace/preview actions.

   v1.3.11 — Event venue split, asf-ev-grid-2-1 + asf-ev-grid-2-1-1.
   v1.3.10 — Event auto-fill: condition the picked image (live).
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   §1  Tokens — scoped to .ta-asf
   ─────────────────────────────────────────────────────────── */
.ta-asf {
  --teal:#1a3a3a;
  --teal-light:#244a4a;
  --teal-faint:rgba(26,58,58,0.06);
  --cream:#f0edd8;
  --cream-bg:#faf9f5;
  --canvas:#ffffff;
  --tile-bg:#fff;
  --tile-border:#e8e4d8;
  --tile-hover:#c4a35a;
  --gold:#c4a35a;
  --gold-soft:#fdfcf8;
  --gold-bg:#fbf7ed;
  --gold-deep:#a98639;
  --blue:#5b7fff;
  --blue-soft:#eff3ff;
  --diamond:#dc2626;
  --diamond-soft:#fef2f2;
  --text-dark:#1a3a3a;
  --text-mid:#5a6a5a;
  --text-light:#8a8a7a;
  --text-tiny:#a0a090;
  --input-border:#ddd9c8;
  --danger:#c0392b;
  --danger-soft:#fce8e6;
  --ok:#27ae60;
  --ok-soft:#e8f5e9;
  --pending:#e8a030;
  --pending-soft:#fff8e1;
  --row-bg:#fafaf6;
  --article-width:780px;

  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}

.ta-asf *,
.ta-asf *::before,
.ta-asf *::after {
  box-sizing:border-box;
}

/* ───────────────────────────────────────────────────────────
   §2  Overlay shell — full-page mount, matches InbxRTE pattern
   ─────────────────────────────────────────────────────────── */
.asf-overlay {
  position:fixed;
  inset:0;
  background:#1A3A3A;
  z-index:10000;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow-y:auto;
  /* v1.3.14 — contain the scroll so an inadvertent horizontal
     trackpad swipe (or pull) does NOT bubble to browser back/forward
     navigation and unmount the overlay (lost-draft fix). Paired with
     the JS history guard for browsers that ignore overscroll-behavior. */
  overscroll-behavior:contain;
}

.asf-panel {
  width:100%;
  max-width:1480px;
  background:transparent;       /* v1.0.6: was var(--cream-bg) */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Body scroll lock helper (set by JS) */
body.asf-open {
  overflow:hidden;
}

/* ───────────────────────────────────────────────────────────
   §3  Header — Row 1 (title + sponsor pill + dirty stamp + close)
        v1.0.2 compact redesign — replaces the old §3 topbar
        breadcrumb block and §4 1fr/320/280 tile-grid title bar.
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-hdr-row1 {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 28px;
  margin:0 32px;                /* v1.0.7: align bg edges with .asf-body rows */
  background:#fff;
  border-bottom:1px solid var(--tile-border);
}
.ta-asf .asf-hdr-left {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  flex:1;
}
.ta-asf .asf-hdr-mark {
  width:28px; height:28px;
  background:var(--teal); color:var(--gold);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace;
  font-size:10px; font-weight:600;
  letter-spacing:0.08em;
  flex-shrink:0;
}
.ta-asf .asf-hdr-title {
  font-family:'Fraunces','Georgia',serif;
  font-size:24px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.005em;
  color:var(--text-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.ta-asf .asf-hdr-sponsor-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px 5px 8px;
  background:var(--gold-bg);
  border:1px solid var(--gold);
  color:var(--gold-deep);
  border-radius:14px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:12px;
  white-space:nowrap;
  flex-shrink:0;
}
.ta-asf .asf-hdr-sponsor-pill::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.ta-asf .asf-hdr-sponsor-pill .lbl {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-deep);
  opacity:0.7;
  margin-right:2px;
}
.ta-asf .asf-hdr-sponsor-pill.editorial {
  background:var(--cream-bg);
  border-color:var(--tile-border);
  color:var(--text-mid);
}
.ta-asf .asf-hdr-sponsor-pill.editorial::before {
  background:var(--text-light);
}
.ta-asf .asf-hdr-sponsor-pill.editorial .lbl {
  color:var(--text-mid);
}

.ta-asf .asf-hdr-right {
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.ta-asf .asf-hdr-dirty-stamp {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-light);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color 0.15s;
}
.ta-asf .asf-hdr-dirty-stamp .dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text-light);
  transition:background 0.15s;
}
.ta-asf .asf-hdr-dirty-stamp.on {
  color:#c5443a;
}
.ta-asf .asf-hdr-dirty-stamp.on .dot {
  background:#c5443a;
  box-shadow:0 0 0 2px rgba(197,68,58,0.18);
}
.ta-asf .asf-hdr-close {
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--tile-border);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--text-mid);
  line-height:1;
  padding:0;
  transition:all 0.15s;
}
.ta-asf .asf-hdr-close:hover {
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.ta-asf .asf-hdr-close:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ───────────────────────────────────────────────────────────
   §4  Header — Row 2 (Readiness bar + Newsletter bar)
        Dual horizontal status bars, ~52px tall, each its own
        clickable button. Replaces the old tall tile pair.
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-hdr-row2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0 32px;                /* v1.0.9: align bg edges with .asf-body rows */
  background:#fff;
  border-bottom:1px solid var(--tile-border);
}
.ta-asf .asf-status-bar {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 24px;
  border:none;
  border-right:1px solid var(--tile-border);
  background:#fff;
  font-family:'DM Sans',sans-serif;
  text-align:left;
  cursor:pointer;
  transition:background 0.12s;
  min-width:0;
}
.ta-asf .asf-status-bar:last-child { border-right:none; }
.ta-asf .asf-status-bar:hover { background:var(--gold-soft); }
.ta-asf .asf-status-bar:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:-2px;
}

/* State-tinted gradient backgrounds: color on the left, fading
   to white near the chevron so the bar reads as colored without
   feeling like a heavy tile fill. */
.ta-asf .asf-status-bar.readiness {
  background:linear-gradient(to right,var(--gold-bg) 0%,var(--gold-bg) 55%,#fff 100%);
}
.ta-asf .asf-status-bar.readiness.ready {
  background:linear-gradient(to right,var(--ok-soft) 0%,var(--ok-soft) 55%,#fff 100%);
}
.ta-asf .asf-status-bar.newsletter.committed {
  background:linear-gradient(to right,var(--blue-soft) 0%,var(--blue-soft) 55%,#fff 100%);
}
.ta-asf .asf-status-bar.newsletter.tentative {
  background:linear-gradient(to right,var(--gold-bg) 0%,var(--gold-bg) 55%,#fff 100%);
}
.ta-asf .asf-status-bar.newsletter.unassigned {
  background:#fff;
}

.ta-asf .asf-sb-icon {
  width:28px; height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-weight:700;
  font-size:14px;
  color:#fff;
}
.ta-asf .asf-sb-icon.warn  { background:var(--pending); }
.ta-asf .asf-sb-icon.ok    { background:var(--ok); }
.ta-asf .asf-sb-icon.empty { background:var(--text-light); }
.ta-asf .asf-sb-icon.blue  { background:var(--blue); }
.ta-asf .asf-sb-icon.gold  { background:var(--gold); }

.ta-asf .asf-sb-status {
  font-family:'Fraunces','Georgia',serif;
  font-size:16px;
  font-weight:600;
  color:var(--text-dark);
  flex-shrink:0;
}
.ta-asf .asf-sb-status.warn-text { color:#a87814; }
.ta-asf .asf-sb-status.ok-text   { color:var(--ok); }
.ta-asf .asf-sb-status--muted    { color:var(--text-mid); font-weight:500; }

.ta-asf .asf-sb-detail {
  font-size:13px;
  color:var(--text-mid);
  flex-shrink:0;
}
.ta-asf .asf-sb-detail strong {
  color:var(--text-dark);
  font-weight:600;
}

.ta-asf .asf-sb-issue-num {
  font-family:'Fraunces','Georgia',serif;
  font-size:22px;
  font-weight:600;
  color:var(--text-dark);
  line-height:1;
  flex-shrink:0;
}
.ta-asf .asf-sb-issue-num .hash {
  color:var(--blue);
  font-weight:500;
}
.ta-asf .asf-status-bar.newsletter.tentative .asf-sb-issue-num .hash {
  color:var(--gold-deep);
}
.ta-asf .asf-sb-issue-num .date {
  font-family:'DM Mono',monospace;
  font-size:10px;
  font-weight:400;
  color:var(--text-mid);
  letter-spacing:0.04em;
  margin-left:6px;
}

.ta-asf .asf-sb-state-pill {
  padding:3px 8px;
  border-radius:2px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  flex-shrink:0;
  white-space:nowrap;
}
.ta-asf .asf-sb-state-pill.committed  { background:#fff; border:1px solid var(--blue);       color:var(--blue); }
.ta-asf .asf-sb-state-pill.tentative  { background:var(--gold-bg); border:1px solid var(--gold); color:var(--gold-deep); }
.ta-asf .asf-sb-state-pill.unassigned { background:#fff; border:1px solid var(--text-light); color:var(--text-mid); }

.ta-asf .asf-sb-chevron {
  margin-left:auto;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-light);
  letter-spacing:0.12em;
  text-transform:uppercase;
  flex-shrink:0;
  white-space:nowrap;
}
.ta-asf .asf-sb-chevron .caret {
  display:inline-block;
  margin-left:4px;
}
.ta-asf .asf-status-bar:hover .asf-sb-chevron {
  color:var(--teal);
}

/* ───────────────────────────────────────────────────────────
   §5  RTP Checklist Panel
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-rtp {
  background:#fff;
  border:1px solid var(--tile-border);
  border-radius:6px;
  margin:0 32px 18px;
  overflow:hidden;
}
.ta-asf .asf-rtp-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  background:#fafaf6;
  border-bottom:1px solid var(--tile-border);
}
.ta-asf .asf-rtp-head-title {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
}
.ta-asf .asf-rtp-head-count {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--text-mid);
}
.ta-asf .asf-rtp-head-count strong { color:var(--teal); }
.ta-asf .asf-rtp-head .close {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-light);
  background:none; border:none; cursor:pointer;
}
.ta-asf .asf-rtp-head .close:hover { color:var(--teal); }

.ta-asf .asf-rtp-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.ta-asf .asf-rtp-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  border-bottom:1px solid var(--tile-border);
  border-right:1px solid var(--tile-border);
  font-size:13px;
}
.ta-asf .asf-rtp-item:nth-child(2n) { border-right:none; }

.ta-asf .asf-rtp-icon {
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:11px;
  font-weight:600;
  color:#fff;
}
.ta-asf .asf-rtp-icon.pass { background:var(--ok); }
.ta-asf .asf-rtp-icon.fail { background:var(--pending); }
.ta-asf .asf-rtp-icon.manual { background:var(--blue); font-size:9px; }

.ta-asf .asf-rtp-label {
  flex:1;
  font-weight:500;
  color:var(--text-dark);
  font-size:12.5px;
}
.ta-asf .asf-rtp-label.passed { color:var(--text-mid); }
.ta-asf .asf-rtp-label.failed { color:#8a6f2f; }

.ta-asf .asf-rtp-type {
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:2px;
  font-weight:600;
}
.ta-asf .asf-rtp-type.t1 { background:var(--ok-soft); color:#1e7e34; }
.ta-asf .asf-rtp-type.t2 { background:var(--cream-bg); color:var(--text-mid); border:1px solid var(--input-border); }
.ta-asf .asf-rtp-type.t3 { background:var(--blue-soft); color:var(--blue); }

.ta-asf .asf-rtp-na {
  display:flex; align-items:center; gap:6px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-light);
  letter-spacing:0.04em;
  cursor:pointer;
  user-select:none;
}
.ta-asf .asf-rtp-na input { accent-color:var(--gold); cursor:pointer; }
.ta-asf .asf-rtp-na.checked { color:var(--gold); font-weight:600; }

/* Image pip strip (spans both grid columns) */
.ta-asf .asf-rtp-images {
  grid-column:span 2;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:14px 18px;
  border-top:1px solid var(--tile-border);
  background:#fcfbf6;
}
.ta-asf .asf-rtp-images-label {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
  padding-top:4px;
  white-space:nowrap;
}
.ta-asf .asf-rtp-images-strip {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.ta-asf .asf-rtp-image-pip {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.ta-asf .asf-rtp-image-pip .dot {
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid #fff;
}
.ta-asf .asf-rtp-image-pip .dot.green { background:var(--ok); box-shadow:0 0 0 1px var(--ok); }
.ta-asf .asf-rtp-image-pip .dot.red { background:var(--pending); box-shadow:0 0 0 1px var(--pending); }
.ta-asf .asf-rtp-image-pip .dot.empty { background:#f4f1ea; border-color:#fff; box-shadow:0 0 0 1px var(--input-border); }
.ta-asf .asf-rtp-image-pip .pip-label {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.04em;
  color:var(--text-mid);
  font-weight:500;
}
.ta-asf .asf-rtp-image-pip.main .pip-label {
  color:var(--teal);
  font-weight:700;
}
.ta-asf .asf-rtp-images-summary {
  margin-left:auto;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-mid);
  letter-spacing:0.04em;
  padding-top:6px;
}
.ta-asf .asf-rtp-images-summary strong { color:var(--teal); }

/* ───────────────────────────────────────────────────────────
   §6  Body (row container)
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-body { padding:0 32px 24px; }
.ta-asf .asf-row {
  background:#fbfaf5;          /* v1.0.5: unified cream (was var(--tile-bg)/#fff) */
  border:1px solid var(--tile-border);
  border-radius:6px;
  margin-bottom:18px;
  overflow:hidden;
}
.ta-asf .asf-row.assignment-row { border-left:4px solid var(--blue); }

.ta-asf .asf-row-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:#fff;             /* v1.0.5: white header against cream row body */
  border-bottom:1px solid var(--tile-border);
}
.ta-asf .asf-row-header-left { display:flex; align-items:center; gap:12px; }
.ta-asf .asf-row-num {
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--text-light);
  background:var(--tile-bg);
  border:1px solid var(--tile-border);
  padding:2px 7px;
  border-radius:11px;
  letter-spacing:0.06em;
}
.ta-asf .asf-row-num.blue {
  color:var(--blue);
  border-color:var(--blue);
  background:var(--blue-soft);
  font-weight:600;
}
.ta-asf .asf-row-title {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px; font-weight:600;
  color:var(--teal); letter-spacing:-0.005em;
}
.ta-asf .asf-row-hint {
  font-family:'DM Mono',monospace;
  font-size:10px; color:var(--text-tiny);
  letter-spacing:0.04em;
}
.ta-asf .asf-row-header-right { display:flex; align-items:center; gap:10px; }
.ta-asf .asf-row-edit-link {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue);
  background:none;
  border:1px solid var(--blue);
  padding:4px 10px;
  border-radius:3px;
  cursor:pointer;
  transition:all .12s;
}
.ta-asf .asf-row-edit-link:hover { background:var(--blue); color:#fff; }

/* ───────────────────────────────────────────────────────────
   §7  Row 01 — Newsletter Assignment
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-assignment-state-bar {
  padding:10px 18px;
  background:#fff;
  border-bottom:1px solid var(--tile-border);
  display:flex;
  align-items:center;
  gap:14px;
}
.ta-asf .asf-state-pill {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:11px;
  font-weight:600;
}
.ta-asf .asf-state-pill.unassigned {
  background:var(--cream-bg);
  color:var(--text-mid);
  border:1px solid var(--input-border);
}
.ta-asf .asf-state-pill.tentative {
  background:var(--gold-bg);
  color:#a87814;
  border:1px solid var(--gold);
}
.ta-asf .asf-state-pill.committed {
  background:var(--blue-soft);
  color:var(--blue);
  border:1px solid var(--blue);
}
.ta-asf .asf-state-detail {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-mid);
  letter-spacing:0.04em;
}
.ta-asf .asf-state-detail strong { color:var(--teal); }

.ta-asf .asf-assignment-fields {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  padding:18px;
}

/* ───────────────────────────────────────────────────────────
   §8  Row 02 — Article Type segmented control + Meta sections
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-article-type-block {
  padding:16px 18px;
  background:#fafaf6;
  border-bottom:1px solid var(--tile-border);
  display:flex;
  align-items:center;
  gap:18px;
}
.ta-asf .asf-at-label {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
  white-space:nowrap;
}
.ta-asf .asf-at-segments {
  display:flex;
  gap:0;
  background:#fff;
  border:1.5px solid var(--input-border);
  border-radius:4px;
  overflow:hidden;
}
.ta-asf .asf-at-seg {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  padding:8px 18px;
  border:none;
  background:#fff;
  color:var(--text-mid);
  cursor:pointer;
  transition:all .12s;
  border-right:1px solid var(--input-border);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.ta-asf .asf-at-seg:last-child { border-right:none; }
.ta-asf .asf-at-seg:hover { background:var(--cream-bg); color:var(--teal); }
.ta-asf .asf-at-seg.active { background:var(--teal); color:#fff; font-weight:600; }
.ta-asf .asf-at-seg .soon-tag {
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--gold);
  color:#fff;
  padding:1px 5px;
  border-radius:2px;
  font-weight:600;
}
.ta-asf .asf-at-current {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.04em;
  margin-left:auto;
}

.ta-asf .asf-meta-sections { padding:6px 0; position:relative; }

.ta-asf .asf-meta-section {
  padding:14px 20px;
  border-bottom:1px solid var(--tile-border);
}
.ta-asf .asf-meta-section:last-child { border-bottom:none; }
.ta-asf .asf-meta-section.refs { background:#fefaf9; }

.ta-asf .asf-meta-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.ta-asf .asf-meta-section-title {
  display:flex; align-items:center; gap:8px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
}
.ta-asf .asf-meta-section-title .letter {
  width:18px; height:18px;
  background:var(--teal);
  color:var(--cream);
  border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace;
  font-size:9px; font-weight:600;
}
.ta-asf .asf-meta-section.refs .asf-meta-section-title .letter {
  background:var(--diamond);
  color:#fff;
}
.ta-asf .asf-meta-section-hint {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.04em;
}

/* Read-only section treatment — v1.0.5: bg override removed.
   The cream comes from .asf-row now (single source of truth), so a
   second cream here was creating a subtle two-tone where editing-state
   sections inherited the row's old white. Visual cue for readonly
   is now carried by the input styling below, not by section bg. */
.ta-asf .asf-meta-section.readonly { opacity:0.97; }
.ta-asf .asf-meta-section.readonly .asf-field-label { color:var(--text-light); }
.ta-asf .asf-meta-section.readonly .asf-input,
.ta-asf .asf-meta-section.readonly .asf-select,
.ta-asf .asf-meta-section.readonly .asf-textarea {
  background:transparent;
  border:none;
  border-bottom:1px dotted var(--input-border);
  border-radius:0;
  padding-left:0;
  padding-right:0;
  color:var(--text-dark);
  cursor:default;
  pointer-events:none;
  font-weight:500;
}
.ta-asf .asf-meta-section.readonly .asf-charcount { display:none; }
.ta-asf .asf-meta-section.readonly .asf-switch-row {
  pointer-events:none;
  opacity:0.85;
}

/* Cancel link visible only when section is dirty */
.ta-asf .asf-section-cancel {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--danger);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  letter-spacing:0.04em;
  padding:0;
  margin-left:10px;
}
.ta-asf .asf-section-cancel:hover { opacity:0.7; }

/* ───────────────────────────────────────────────────────────
   §9  Form grids + fields
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-fgrid { display:grid; gap:14px 20px; }
.ta-asf .asf-fgrid-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.ta-asf .asf-fgrid-3 { grid-template-columns:1fr 1fr 1fr; }
.ta-asf .asf-fgrid-2 { grid-template-columns:1fr 1fr; }
.ta-asf .asf-fgrid-2-skew { grid-template-columns:2fr 1fr; }  /* v1.0.5: teaser 2/3, short summary 1/3 */
.ta-asf .asf-fgrid-title { grid-template-columns:2.5fr 1fr 1fr; }
.ta-asf .asf-fgrid-identity-bottom { grid-template-columns:1fr 1fr 1.4fr; }
.ta-asf .asf-fgrid .span-2 { grid-column:span 2; }
.ta-asf .asf-fgrid .span-3 { grid-column:span 3; }
.ta-asf .asf-fgrid .span-4 { grid-column:span 4; }
.ta-asf .asf-fgrid-spacer { height:14px; }

.ta-asf .asf-field {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  position:relative;
}
.ta-asf .asf-field-label {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-light);
  display:flex;
  align-items:center;
  gap:5px;
}
.ta-asf .asf-field-label .req { color:var(--danger); margin-left:1px; }
.ta-asf .asf-field-label .hint {
  color:var(--text-tiny);
  margin-left:6px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:10px;
}
.ta-asf .asf-field-label .req-dot {
  width:7px; height:7px;
  background:var(--gold);
  border-radius:50%;
  display:inline-block;
  margin-right:2px;
}
.ta-asf .asf-field-label .diamond {
  color:var(--diamond);
  font-size:9px;
  margin-right:2px;
  line-height:1;
}

.ta-asf .asf-input,
.ta-asf .asf-select,
.ta-asf .asf-textarea {
  width:100%;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  color:var(--text-dark);
  background:var(--cream-bg);
  border:1.5px solid var(--input-border);
  border-radius:3px;
  padding:8px 10px;
  outline:none;
  transition:border-color .12s, background .12s;
}
.ta-asf .asf-input:focus,
.ta-asf .asf-select:focus,
.ta-asf .asf-textarea:focus {
  border-color:var(--teal);
  background:#fff;
}

/* Dirty contract — gold 2px border + white bg */
.ta-asf .asf-input.dirty,
.ta-asf .asf-select.dirty,
.ta-asf .asf-textarea.dirty {
  border:2px solid var(--gold);
  padding:7px 9px;
  background:#fff;
}

/* Over-limit contract — danger 2px border + danger-soft bg */
.ta-asf .asf-input.over,
.ta-asf .asf-textarea.over {
  border:2px solid var(--danger);
  padding:7px 9px;
  background:#fff5f4;
}

/* Select — custom chevron */
.ta-asf .asf-select {
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8a7a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.ta-asf .asf-select.diamond-select {
  border-left:3px solid var(--diamond);
  padding-left:10px;
}
.ta-asf .asf-select.diamond-select.dirty { padding-left:9px; }

.ta-asf .asf-textarea {
  resize:vertical;
  min-height:140px;             /* v1.0.5: raised from 60 — fits 400-char teaser */
  line-height:1.45;
}
.ta-asf .asf-textarea.long { min-height:140px; } /* v1.0.5: aligned to teaser height */

/* v1.0.5: Readonly textarea variant — renders as a div, auto-sizes
   to content, no scrollbar, no resize handle, no clip. Used by
   renderTextarea() when called with readonly:true (e.g. Narrative
   section's teaser/short-summary when section is not in edit mode).
   Visual: looks like prose, not a form field — the value is meant
   to be read, not interacted with. */
.ta-asf .asf-textarea-readout {
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--text-dark);
  padding:8px 0 2px;
  white-space:pre-wrap;         /* preserve newlines + soft-wrap */
  word-wrap:break-word;
  min-height:auto;
  background:transparent;
  border:none;
  border-bottom:1px dotted var(--input-border);
}
.ta-asf .asf-textarea-readout.empty {
  color:var(--text-light);
  font-style:italic;
}
.ta-asf .asf-readout-placeholder {
  color:var(--text-light);
  font-style:italic;
}

/* Locked ref pill (TITLE-ADMIN, TITLE, NEWSLETTER when set) */
.ta-asf .asf-ref-locked-pill {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--diamond-soft);
  border:1.5px solid var(--diamond);
  border-radius:3px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  color:var(--teal);
  font-weight:600;
}
.ta-asf .asf-ref-locked-pill .diamond-marker { color:var(--diamond); font-size:11px; }
.ta-asf .asf-ref-locked-pill .lock-icon {
  margin-left:auto;
  color:var(--text-light);
  font-size:11px;
}

/* Char counter */
.ta-asf .asf-charcount {
  position:absolute;
  bottom:6px;
  right:10px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.02em;
  background:rgba(255,255,255,0.85);
  padding:1px 6px;
  border-radius:8px;
  pointer-events:none;
  transition:color .15s;
}
.ta-asf .asf-charcount.near { color:var(--pending); font-weight:600; }
.ta-asf .asf-charcount.over {
  color:var(--danger);
  font-weight:600;
  background:var(--danger-soft);
}
.ta-asf .asf-textarea ~ .asf-charcount { bottom:8px; }

/* Switch */
.ta-asf .asf-switch-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:var(--cream-bg);
  border:1.5px solid var(--input-border);
  border-radius:3px;
  cursor:pointer;
  user-select:none;
}
.ta-asf .asf-switch-row.on {
  border-color:var(--gold);
  background:var(--gold-soft);
}
.ta-asf .asf-switch-row.dirty {
  border:2px solid var(--gold);
  padding:7px 11px;
  background:#fff;
}
.ta-asf .asf-switch-row.dirty.on { background:var(--gold-soft); }
.ta-asf .asf-switch-label {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12px;
  color:var(--text-dark);
  font-weight:500;
}
.ta-asf .asf-switch {
  position:relative;
  width:34px;
  height:18px;
  background:#ccc;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s;
  flex-shrink:0;
}
.ta-asf .asf-switch.on { background:var(--gold); }
.ta-asf .asf-switch::after {
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:14px; height:14px;
  background:#fff;
  border-radius:50%;
  transition:left .15s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.ta-asf .asf-switch.on::after { left:18px; }

/* Read-only input */
.ta-asf .asf-input.readonly {
  background:#f4f1ea;
  color:var(--text-mid);
  font-family:'DM Mono',monospace;
  font-size:11px;
  border-style:dashed;
  cursor:not-allowed;
}

/* URL field — DM Mono, full URL, scroll horizontally if needed */
.ta-asf .asf-input.url {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:0;
  white-space:nowrap;
  overflow-x:auto;
}

/* ───────────────────────────────────────────────────────────
   §10  Photo Essay / Video — Coming Soon overlay (Q3/Q4)
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-coming-soon-overlay {
  position:absolute;
  inset:0;
  background:rgba(250,249,245,0.92);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:80px;
  text-align:center;
  pointer-events:auto;
}
.ta-asf .asf-coming-soon-icon {
  font-size:48px;
  margin-bottom:14px;
}
.ta-asf .asf-coming-soon-title {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--teal);
  margin-bottom:8px;
}
.ta-asf .asf-coming-soon-body {
  font-size:13px;
  color:var(--text-mid);
  max-width:420px;
  line-height:1.5;
  margin-bottom:18px;
}
.ta-asf .asf-coming-soon-tag {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--gold);
  color:#fff;
  padding:5px 14px;
  border-radius:3px;
  font-weight:600;
}

/* ───────────────────────────────────────────────────────────
   §11  Row 03 — Media (two-zone + OG preview)
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-media-zones {
  display:grid;
  grid-template-columns:380px 1px 1fr;
  gap:0;
  padding:0;
}
.ta-asf .asf-media-zone { padding:20px; }
.ta-asf .asf-media-zone-rule {
  background:linear-gradient(to bottom, transparent, var(--tile-border) 12%, var(--tile-border) 88%, transparent);
  width:1px;
}

.ta-asf .asf-zone-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
  gap:10px;
}
.ta-asf .asf-zone-title {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:8px;
}
.ta-asf .asf-zone-title .badge-count {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-light);
  background:var(--cream-bg);
  border:1px solid var(--tile-border);
  padding:2px 8px;
  border-radius:9px;
  letter-spacing:0.04em;
}
.ta-asf .asf-zone-sub {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.04em;
}

/* Main image card */
.ta-asf .asf-mi-card {
  background:var(--cream-bg);
  border:2px solid var(--gold);
  border-radius:5px;
  overflow:hidden;
  margin-bottom:14px;
}
.ta-asf .asf-mi-card.empty {
  border:2px dashed var(--input-border);
  background:#fafaf6;
  text-align:center;
  padding:30px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ta-asf .asf-mi-empty-icon {
  font-size:32px;
  color:var(--text-light);
}
.ta-asf .asf-mi-empty-prompt {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  color:var(--text-mid);
  max-width:260px;
  line-height:1.4;
}
.ta-asf .asf-mi-preview {
  aspect-ratio:1180/600;
  background:#e6dec8 center/cover no-repeat;
  position:relative;
}
.ta-asf .asf-mi-preview-label {
  position:absolute;
  top:8px; left:8px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:#fff;
  background:rgba(0,0,0,0.45);
  padding:3px 7px;
  border-radius:2px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.ta-asf .asf-mi-preview-aspect {
  position:absolute;
  bottom:8px; right:8px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:#fff;
  background:rgba(0,0,0,0.45);
  padding:3px 7px;
  border-radius:2px;
  letter-spacing:0.04em;
}
.ta-asf .asf-mi-info {
  padding:10px 12px;
  background:#fff;
  border-top:1px solid var(--tile-border);
}
.ta-asf .asf-mi-name {
  font-size:12px;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ta-asf .asf-mi-dims {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.02em;
}
.ta-asf .asf-mi-actions {
  display:flex;
  gap:6px;
  padding:8px 12px 10px;
  background:#fff;
}
.ta-asf .asf-mi-btn {
  flex:1;
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:6px 8px;
  border:1px solid var(--input-border);
  background:var(--cream-bg);
  color:var(--text-mid);
  cursor:pointer;
  border-radius:2px;
  transition:all .12s;
}
.ta-asf .asf-mi-btn:hover { border-color:var(--teal); color:var(--teal); }
.ta-asf .asf-mi-btn.primary {
  background:var(--teal);
  color:var(--cream);
  border-color:transparent;
}
.ta-asf .asf-mi-btn.primary:hover { background:var(--teal-light); }

.ta-asf .asf-mi-meta-fields {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ta-asf .asf-upload-options {
  display:flex;
  gap:6px;
  margin-top:12px;
  padding:10px;
  background:#fff;
  border:1.5px dashed var(--input-border);
  border-radius:4px;
  flex-wrap:wrap;
}
.ta-asf .asf-upload-btn {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:6px 10px;
  border:1px solid var(--input-border);
  background:#fff;
  color:var(--text-mid);
  cursor:pointer;
  border-radius:2px;
  transition:all .12s;
}
.ta-asf .asf-upload-btn:hover { border-color:var(--gold); color:var(--gold); }
.ta-asf .asf-upload-btn.primary {
  background:var(--gold);
  color:#fff;
  border-color:transparent;
}

/* Inline images zone */
.ta-asf .asf-inline-strip {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.ta-asf .asf-inline-card {
  background:var(--cream-bg);
  border:1.5px solid var(--input-border);
  border-radius:4px;
  overflow:hidden;
  transition:all .15s;
  cursor:grab;
  position:relative;
}
.ta-asf .asf-inline-card:hover {
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(26,58,58,0.08);
}
.ta-asf .asf-inline-card.placed {
  border-color:var(--ok);
  background:#f7fcf7;
}
.ta-asf .asf-inline-card.unassigned {
  border-color:var(--input-border);
  background:#fafaf6;
}

.ta-asf .asf-inline-thumb {
  background-size:cover;
  background-position:center;
  position:relative;
  border-bottom:1px solid var(--tile-border);
  aspect-ratio:3/2;
  background-color:#e6dec8;
}
.ta-asf .asf-inline-thumb.t-3-2 { aspect-ratio:3/2; }
.ta-asf .asf-inline-thumb.t-4-3 { aspect-ratio:4/3; }
.ta-asf .asf-inline-thumb.t-1-1 { aspect-ratio:1/1; }

.ta-asf .asf-inline-state {
  position:absolute;
  top:6px; left:6px;
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:9px;
  font-weight:600;
}
.ta-asf .asf-inline-state.placed { background:var(--ok); color:#fff; }
.ta-asf .asf-inline-state.unassigned {
  background:rgba(255,255,255,0.92);
  color:var(--text-mid);
  border:1px solid var(--input-border);
}
.ta-asf .asf-inline-aspect {
  position:absolute;
  bottom:5px; right:5px;
  font-family:'DM Mono',monospace;
  font-size:8px;
  color:#fff;
  background:rgba(0,0,0,0.45);
  padding:1px 5px;
  border-radius:2px;
}

.ta-asf .asf-inline-info { padding:8px 10px; }
.ta-asf .asf-inline-name {
  font-size:11px;
  font-weight:600;
  color:var(--text-dark);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:3px;
}
.ta-asf .asf-inline-meta {
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--text-tiny);
  letter-spacing:0.02em;
  line-height:1.4;
}
.ta-asf .asf-inline-meta .placed-where {
  color:var(--ok);
  font-weight:600;
}

.ta-asf .asf-inline-actions {
  display:flex;
  gap:4px;
  padding:0 10px 10px;
}
.ta-asf .asf-ia-btn {
  flex:1;
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 4px;
  border:1px solid var(--input-border);
  background:#fff;
  color:var(--text-mid);
  cursor:pointer;
  border-radius:2px;
  transition:all .12s;
}
.ta-asf .asf-ia-btn:hover { border-color:var(--teal); color:var(--teal); }
.ta-asf .asf-ia-btn.primary {
  background:var(--teal);
  color:var(--cream);
  border-color:transparent;
}
.ta-asf .asf-ia-btn.gold {
  background:var(--gold);
  color:#fff;
  border-color:transparent;
}
.ta-asf .asf-ia-btn.gold:hover { background:#b89549; }

.ta-asf .asf-attach-more {
  background:#fff;
  border:1.5px dashed var(--input-border);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text-light);
  cursor:pointer;
  transition:all .15s;
  padding:20px 12px;
  min-height:140px;
}
.ta-asf .asf-attach-more:hover { border-color:var(--gold); color:var(--gold); }
.ta-asf .asf-attach-more-icon { font-size:22px; }
.ta-asf .asf-attach-more-label {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* Social/OG preview block */
.ta-asf .asf-og-block {
  margin:18px 20px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--tile-border);
  border-radius:4px;
}
.ta-asf .asf-og-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}
.ta-asf .asf-og-title {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
}
.ta-asf .asf-og-hint {
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--text-tiny);
  letter-spacing:0.04em;
}
.ta-asf .asf-og-card {
  background:#f4f1ea;
  border:1px solid var(--input-border);
  border-radius:6px;
  overflow:hidden;
  max-width:520px;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.ta-asf .asf-og-card-img {
  aspect-ratio:1200/630;
  background:#e6dec8 center/cover no-repeat;
  position:relative;
}
.ta-asf .asf-og-card-img-label {
  position:absolute;
  top:8px; left:8px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:#fff;
  background:rgba(0,0,0,0.45);
  padding:2px 8px;
  border-radius:2px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.ta-asf .asf-og-card-text {
  padding:11px 14px;
  background:#fff;
}
.ta-asf .asf-og-card-site {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-tiny);
  letter-spacing:0.04em;
  text-transform:lowercase;
  margin-bottom:4px;
}
.ta-asf .asf-og-card-title {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--text-dark);
  line-height:1.25;
  margin-bottom:4px;
}
.ta-asf .asf-og-card-desc {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12px;
  color:var(--text-mid);
  line-height:1.4;
}
.ta-asf .asf-og-fields {
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--text-light);
  letter-spacing:0.04em;
  margin-top:8px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.ta-asf .asf-og-fields span strong { color:var(--teal); }

/* ───────────────────────────────────────────────────────────
   §12  Row 04 — Body (Path 2 — read-only canvas + Edit button)
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-body-status-pill {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:9px;
  font-weight:600;
  background:var(--blue-soft);
  color:var(--blue);
  border:1px solid var(--blue);
}
.ta-asf .asf-body-status-pill.has-content {
  background:var(--ok-soft);
  color:var(--ok);
  border-color:var(--ok);
}
.ta-asf .asf-body-status-pill.empty {
  background:var(--cream-bg);
  color:var(--text-mid);
  border-color:var(--input-border);
}

.ta-asf .asf-complete-toggle {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  padding:4px 10px;
  border-radius:3px;
  background:var(--blue-soft);
  color:var(--blue);
  border:1.5px solid var(--blue);
  cursor:pointer;
  transition:all .15s;
}
.ta-asf .asf-complete-toggle.checked {
  background:var(--ok);
  color:#fff;
  border-color:var(--ok);
}
.ta-asf .asf-complete-toggle:hover { box-shadow:0 0 0 2px rgba(91,127,255,0.15); }
.ta-asf .asf-complete-toggle.checked:hover { box-shadow:0 0 0 2px rgba(39,174,96,0.15); }

.ta-asf .asf-body-readonly-frame {
  background:#f4f1ea;
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.ta-asf .asf-body-readonly-meta {
  max-width:var(--article-width);
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--text-tiny);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0 4px;
}
.ta-asf .asf-body-canvas {
  max-width:var(--article-width);
  width:100%;
  background:var(--canvas);
  border:1px solid var(--tile-border);
  border-radius:3px;
  padding:38px 48px 44px;
  box-shadow:0 6px 24px rgba(26,58,58,0.05);
  font-family:'Lora','Georgia',serif;
  font-size:15px;
  line-height:1.65;
  color:#2a2a2a;
}
.ta-asf .asf-body-canvas .empty-state {
  text-align:center;
  padding:60px 0;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px;
  color:var(--text-light);
  font-style:italic;
}
.ta-asf .asf-body-canvas p { margin-bottom:14px; }
.ta-asf .asf-body-canvas h2 {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--teal);
  margin:22px 0 12px;
  letter-spacing:-0.01em;
}
.ta-asf .asf-body-canvas h3 {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--teal);
  margin:18px 0 10px;
}
.ta-asf .asf-body-canvas figure {
  margin:14px 0;
  text-align:center;
}
.ta-asf .asf-body-canvas figure img {
  max-width:100%;
  height:auto;
  border-radius:2px;
}
.ta-asf .asf-body-canvas figcaption {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:11px;
  color:var(--text-light);
  font-style:italic;
  margin-top:6px;
}

.ta-asf .asf-edit-body-btn {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  padding:10px 22px;
  border-radius:3px;
  border:1.5px solid var(--gold-deep);
  cursor:pointer;
  transition:all .12s;
  background:linear-gradient(180deg,#cdaf69 0%,#b89549 100%);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ta-asf .asf-edit-body-btn:hover {
  background:linear-gradient(180deg,#d4b673 0%,#bd9b50 100%);
}
.ta-asf .asf-edit-body-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  background:#d4d0c8;
  border-color:#b8b4ad;
  box-shadow:none;
}

/* Technical drawer */
.ta-asf .asf-tech-drawer {
  background:#fafaf6;
  border-top:1px solid var(--tile-border);
  padding:10px 18px;
}
.ta-asf .asf-tech-drawer-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.ta-asf .asf-tech-drawer-title {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-light);
  font-weight:600;
}
.ta-asf .asf-tech-drawer-toggle {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-mid);
  background:none;
  border:none;
  cursor:pointer;
}
.ta-asf .asf-tech-drawer-body { padding-top:8px; display:none; }
.ta-asf .asf-tech-drawer.open .asf-tech-drawer-body { display:block; }
.ta-asf .asf-tech-drawer textarea {
  width:100%;
  min-height:80px;
  font-family:'DM Mono',monospace;
  font-size:11px;
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:3px;
  background:#fff;
  color:var(--text-mid);
  resize:vertical;
  line-height:1.4;
}

/* ───────────────────────────────────────────────────────────
   §13  Sticky footer
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-footer {
  position:sticky;
  bottom:0;
  margin:0 32px;                /* v1.0.7: align bg edges with .asf-body rows */
  z-index:60;
  background:#fff;
  border-top:3px solid var(--gold);   /* v1.0.8: 3px gold (was 1px tile-border) */
  box-shadow:0 -4px 16px rgba(26,58,58,0.06);
  padding:12px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.ta-asf .asf-footer-left {
  display:flex;
  align-items:center;
  gap:14px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-light);
  letter-spacing:0.04em;
}
.ta-asf .asf-footer-state-dot {
  width:7px; height:7px;
  background:var(--gold);
  border-radius:50%;
  animation:asfPulse 2s infinite;
}
@keyframes asfPulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.45; }
}
.ta-asf .asf-footer-actions { display:flex; align-items:center; gap:10px; }
.ta-asf .asf-f-cancel {
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--danger);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  letter-spacing:0.04em;
  padding:6px 8px;
}
.ta-asf .asf-f-cancel:hover { opacity:0.7; }
.ta-asf .asf-f-btn {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  padding:8px 18px;
  border-radius:3px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:all .12s;
  letter-spacing:0.01em;
}
.ta-asf .asf-f-btn-secondary {
  background:#fff;
  color:var(--teal);
  border-color:var(--input-border);
}
.ta-asf .asf-f-btn-secondary:hover {
  border-color:var(--teal);
  background:var(--cream-bg);
}
.ta-asf .asf-f-btn-secondary.has-pending { background:var(--gold-bg); border-color:var(--gold); }

.ta-asf .asf-f-btn-primary {
  background:linear-gradient(180deg,#cdaf69 0%,#b89549 100%);
  color:#fff;
  border-color:var(--gold-deep);
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset;
}
.ta-asf .asf-f-btn-primary:hover {
  background:linear-gradient(180deg,#d4b673 0%,#bd9b50 100%);
}
.ta-asf .asf-f-btn-primary:disabled {
  opacity:0.5;
  cursor:not-allowed;
  background:#d4d0c8;
  border-color:#b8b4ad;
  box-shadow:none;
}

/* Async pending state (universal for buttons that fire scenarios) */
.ta-asf .asf-f-btn[data-pending="true"] {
  opacity:0.7;
  cursor:wait;
  pointer-events:none;
}
.ta-asf .asf-f-btn[data-pending="true"]::after {
  content:'';
  display:inline-block;
  width:10px; height:10px;
  margin-left:8px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:asfSpin 0.8s linear infinite;
  vertical-align:-1px;
}
@keyframes asfSpin {
  to { transform:rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────
   §14  Toast (success / error feedback)
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-toast {
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:10005;
  background:var(--teal);
  color:#fff;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  font-weight:500;
  padding:10px 18px;
  border-radius:3px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  opacity:0;
  transition:all .25s;
  pointer-events:none;
}
.ta-asf .asf-toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.ta-asf .asf-toast.success { background:var(--ok); }
.ta-asf .asf-toast.error { background:var(--danger); }

/* ───────────────────────────────────────────────────────────
   §14  Picker modal — v1.0.4
        Generic searchable list-picker. Two visual modes:
          .asf-pick-grid → MEDIA picker (card grid w/ thumbnails)
          .asf-pick-list → CMS-ref picker (vertical row list)
        Mounted inside .ta-asf as a sibling above .asf-overlay.
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-pick-host { /* container — no styling, just a slot */ }
.ta-asf .asf-pick-host:empty { display:none; }  /* v1.0.8: phantom-div fix */

.ta-asf .asf-pick-overlay {
  position:fixed;
  inset:0;
  background:rgba(26,58,58,0.65);
  z-index:10500;            /* above .asf-overlay (10000) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  animation:asf-pick-fade-in 0.15s ease-out;
}
@keyframes asf-pick-fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}

.ta-asf .asf-pick-modal {
  background:var(--cream-bg);
  width:100%;
  max-width:980px;
  max-height:calc(100vh - 80px);
  border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:asf-pick-slide-in 0.2s ease-out;
}
@keyframes asf-pick-slide-in {
  from { opacity:0; transform:translateY(12px) scale(0.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* Header */
.ta-asf .asf-pick-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid var(--tile-border);
  background:#fff;
  flex-shrink:0;
}
.ta-asf .asf-pick-title {
  font-family:'Fraunces','Georgia',serif;
  font-size:20px;
  font-weight:600;
  color:var(--text-dark);
}
.ta-asf .asf-pick-close {
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--tile-border);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--text-mid);
  line-height:1;
  padding:0;
  transition:all 0.15s;
}
.ta-asf .asf-pick-close:hover {
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}

/* Filters row */
.ta-asf .asf-pick-filters {
  display:flex;
  gap:10px;
  padding:14px 24px;
  background:#fafaf6;
  border-bottom:1px solid var(--tile-border);
  flex-shrink:0;
}
.ta-asf .asf-pick-search {
  flex:1;
  padding:8px 12px;
  border:1px solid var(--input-border);
  border-radius:3px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:var(--text-dark);
  background:#fff;
  outline:none;
  transition:border-color 0.15s;
}
.ta-asf .asf-pick-search:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,163,90,0.15);
}
.ta-asf .asf-pick-fsel {
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:3px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:var(--text-dark);
  background:#fff;
  cursor:pointer;
  min-width:160px;
  outline:none;
}
.ta-asf .asf-pick-fsel:focus { border-color:var(--gold); }

/* Body — scrollable */
.ta-asf .asf-pick-body {
  flex:1;
  overflow-y:auto;
  padding:16px 24px;
  background:var(--cream-bg);
}

/* MEDIA card grid */
.ta-asf .asf-pick-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.ta-asf .asf-pick-card {
  background:#fff;
  border:1px solid var(--tile-border);
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.12s;
  display:flex;
  flex-direction:column;
}
.ta-asf .asf-pick-card:hover {
  border-color:var(--gold);
  box-shadow:0 2px 8px rgba(196,163,90,0.15);
  transform:translateY(-1px);
}
.ta-asf .asf-pick-card.selected {
  border:2px solid var(--gold);
  box-shadow:0 0 0 3px rgba(196,163,90,0.2);
  transform:translateY(-1px);
}
.ta-asf .asf-pick-thumb {
  width:100%;
  aspect-ratio:16/10;
  background:var(--cream-bg);
  position:relative;
  overflow:hidden;
}
.ta-asf .asf-pick-thumb-img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ta-asf .asf-pick-thumb.empty {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-light);
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.ta-asf .asf-pick-card-body {
  padding:10px 12px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ta-asf .asf-pick-card-name {
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text-dark);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.ta-asf .asf-pick-card-sub {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-mid);
  letter-spacing:0.04em;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* CMS-ref row list */
.ta-asf .asf-pick-list {
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--tile-border);
  border:1px solid var(--tile-border);
  border-radius:4px;
  overflow:hidden;
}
.ta-asf .asf-pick-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:#fff;
  cursor:pointer;
  transition:background 0.1s;
}
.ta-asf .asf-pick-row:hover {
  background:var(--gold-soft);
}
.ta-asf .asf-pick-row.selected {
  background:var(--gold-bg);
  border-left:3px solid var(--gold);
  padding-left:15px;
}
.ta-asf .asf-pick-row-name {
  flex:1;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--text-dark);
}
.ta-asf .asf-pick-row-sub {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--text-mid);
  letter-spacing:0.04em;
}
.ta-asf .asf-pick-row-mark {
  color:var(--gold-deep);
  font-weight:600;
  font-size:14px;
  flex-shrink:0;
}

/* Empty state */
.ta-asf .asf-pick-empty {
  padding:48px 24px;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  color:var(--text-mid);
  background:#fff;
  border:1px dashed var(--input-border);
  border-radius:4px;
}

/* Footer */
.ta-asf .asf-pick-foot {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-top:1px solid var(--tile-border);
  background:#fff;
  flex-shrink:0;
}
.ta-asf .asf-pick-btn {
  padding:9px 18px;
  border-radius:3px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:1px solid;
  transition:all 0.12s;
}
.ta-asf .asf-pick-btn.ghost {
  background:#fff;
  border-color:var(--tile-border);
  color:var(--text-mid);
}
.ta-asf .asf-pick-btn.ghost:hover:not([disabled]) {
  border-color:var(--text-mid);
  color:var(--text-dark);
}
.ta-asf .asf-pick-btn.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:var(--gold);
  font-weight:600;
}
.ta-asf .asf-pick-btn.primary:hover:not([disabled]) {
  background:var(--teal-tint);
}
.ta-asf .asf-pick-btn[disabled] {
  opacity:0.45;
  cursor:not-allowed;
}

/* Make clickable readonly refs visually distinct on hover */
.ta-asf .asf-input.readonly.clickable {
  cursor:pointer;
  transition:all 0.12s;
}
.ta-asf .asf-input.readonly.clickable:hover {
  background:var(--gold-soft);
  border-bottom-color:var(--gold);
}
/* v1.0.12: re-enable clicks on .clickable refs that sit inside
   readonly sections. The .asf-meta-section.readonly rule above
   sets pointer-events:none on all .asf-input descendants, which
   blocked the CMS-ref picker click handlers. Override here. */
.ta-asf .asf-meta-section.readonly .asf-input.readonly.clickable,
.ta-asf .asf-meta-section .asf-input.readonly.clickable {
  pointer-events:auto;
  cursor:pointer;
}

/* ───────────────────────────────────────────────────────────
   §15  Create-mode badge — v1.0.10
   ─────────────────────────────────────────────────────────── */
.ta-asf .asf-hdr-create-badge {
  display:inline-flex;
  align-items:center;
  font-family:'DM Mono',monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 9px;
  background:var(--gold);
  color:var(--teal);
  border-radius:11px;
  margin-right:6px;
}
.ta-asf .asf-hdr-title.placeholder {
  color:var(--text-mid);
  font-style:italic;
  font-weight:500;
}

/* ===========================================================
   v1.1.0 additions — layout rebuild per Transcriber Review &
   Edit format. Two-column shell inside the existing overlay.
   Class names are new (no collision with v1.0.x classes); v1.0
   selectors remain valid for components still in use during
   Chunks 2/3/4 (body editor button, media zones, picker).
   =========================================================== */

/* Thin context bar — small, faded, top of overlay */
.ta-asf .asf-context-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 14px;
  background:var(--cream-bg);
  color:var(--text-light);
  font-size:10.5px;
  font-family:'DM Mono', monospace;
  letter-spacing:0.04em;
  border-bottom:0.5px solid var(--input-border);
}
.ta-asf .asf-context-bar .asf-cx-name { opacity:0.85; }
.ta-asf .asf-context-bar .asf-cx-close {
  cursor:pointer;
  opacity:0.6;
  font-size:14px;
  padding:2px 6px;
  border-radius:3px;
}
.ta-asf .asf-context-bar .asf-cx-close:hover { opacity:1; background:rgba(0,0,0,0.04); }

/* Two-column shell — main 75% / sidebar 25% */
.ta-asf .asf-shell {
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:0;
  min-height:calc(100vh - 38px);   /* full overlay minus context bar */
  background:var(--canvas);
}
.ta-asf .asf-main {
  padding:24px 28px 88px;          /* v1.1.9: bottom padding clears fixed action bar */
  border-right:0.5px solid var(--input-border);
  background:var(--canvas);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ta-asf .asf-side {
  padding:20px 18px 88px;          /* v1.1.9: bottom padding clears fixed action bar */
  background:var(--cream-bg);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* T3 — in-place big-font headline title */
.ta-asf .asf-title-headline {
  font-family:'Fraunces', Georgia, serif;
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  color:var(--text-dark);
  padding:6px 0 8px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  outline:none;
  width:100%;
  transition:border-color .12s;
}
.ta-asf .asf-title-headline:hover { border-bottom-color:var(--input-border); }
.ta-asf .asf-title-headline:focus { border-bottom-color:var(--teal); }
.ta-asf .asf-title-headline.dirty { border-bottom-color:var(--gold); }
.ta-asf .asf-title-headline.placeholder-state,
.ta-asf .asf-title-headline:empty:before {
  content:attr(data-placeholder);
  color:var(--text-tiny);
  font-style:italic;
  font-weight:400;
}
.ta-asf .asf-title-headline-label {
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:2px;
}

/* Source-screenshots strip — conditional (only when launched from Transcriber) */
.ta-asf .asf-source-strip {
  display:flex;
  gap:8px;
  padding:10px 12px;
  background:var(--gold-soft);
  border:0.5px solid var(--input-border);
  border-left:3px solid var(--gold);
  border-radius:4px;
  overflow-x:auto;
}
.ta-asf .asf-source-strip-label {
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  align-self:center;
  white-space:nowrap;
}
.ta-asf .asf-source-strip-img {
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:3px;
  border:0.5px solid var(--input-border);
  cursor:pointer;
  flex-shrink:0;
}

/* Subtle inline N/A toggle — sits next to its parent field's label */
.ta-asf .asf-na-toggle {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  margin-left:8px;
  cursor:pointer;
  user-select:none;
  padding:2px 6px;
  border-radius:3px;
  background:transparent;
  border:0.5px solid transparent;
  transition:background .12s, border-color .12s;
}
.ta-asf .asf-na-toggle:hover { background:var(--cream-bg); border-color:var(--input-border); }
.ta-asf .asf-na-toggle .asf-na-box {
  display:inline-block;
  width:10px;
  height:10px;
  border:1.5px solid var(--text-light);
  border-radius:2px;
  background:transparent;
}
.ta-asf .asf-na-toggle.on .asf-na-box {
  background:var(--teal);
  border-color:var(--teal);
}
.ta-asf .asf-na-toggle.on { color:var(--teal); }

/* Sidebar sections — S1–S8 */
.ta-asf .asf-side-section {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ta-asf .asf-side-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
  padding-bottom:2px;
}
.ta-asf .asf-side-section.has-dirty .asf-side-section-head { color:var(--gold-deep); }
.ta-asf .asf-side-section-cancel {
  font-family:'DM Mono', monospace;
  font-size:9px;
  color:var(--danger);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  letter-spacing:0.04em;
  padding:0;
  text-transform:none;
}
.ta-asf .asf-side-section-cancel:hover { opacity:0.7; }

/* Sidebar fields — slightly more compact than main column inputs */
.ta-asf .asf-side .asf-input,
.ta-asf .asf-side .asf-select,
.ta-asf .asf-side .asf-textarea {
  font-size:12px;
  padding:6px 8px;
}
.ta-asf .asf-side .asf-input.dirty,
.ta-asf .asf-side .asf-select.dirty,
.ta-asf .asf-side .asf-textarea.dirty {
  padding:5px 7px;   /* compensate for 2px border */
}
.ta-asf .asf-side .asf-field-label { font-size:9px; }
.ta-asf .asf-side .asf-field { gap:3px; }
.ta-asf .asf-side .asf-fgrid { gap:8px 10px; }

/* Article type segmented control (S1) */
.ta-asf .asf-type-seg {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2px;
  background:var(--tile-bg);
  border:0.5px solid var(--input-border);
  border-radius:4px;
  padding:2px;
}
.ta-asf .asf-type-seg-item {
  font-size:11px;
  text-align:center;
  padding:5px 6px;
  border-radius:3px;
  cursor:pointer;
  color:var(--text-mid);
  transition:background .12s, color .12s;
}
.ta-asf .asf-type-seg-item.on {
  background:var(--teal);
  color:#fff;
  font-weight:500;
}
.ta-asf .asf-type-seg-item:not(.on):hover {
  background:var(--cream-bg);
}
.ta-asf .asf-type-seg-item.disabled {
  color:var(--text-tiny);
  cursor:not-allowed;
}
.ta-asf .asf-type-seg-item.disabled:hover { background:transparent; }

/* Status line (S8) */
.ta-asf .asf-status-line {
  padding-top:10px;
  border-top:0.5px solid var(--input-border);
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ta-asf .asf-status-line .asf-rtp-count {
  color:var(--text-mid);
  font-weight:500;
}
.ta-asf .asf-status-line .asf-rtp-count.complete { color:var(--ok); }

/* Issues banner (T10) — only rendered on validation failure */
.ta-asf .asf-issues {
  background:var(--danger-soft);
  border:0.5px solid var(--danger);
  border-radius:4px;
  padding:10px 14px;
  margin-top:8px;
}
.ta-asf .asf-issues-hdr {
  font-size:11px;
  font-weight:500;
  color:var(--danger);
  margin-bottom:4px;
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.ta-asf .asf-issues-list {
  margin:0;
  padding-left:18px;
  font-size:12px;
  color:var(--text-dark);
  line-height:1.5;
}

/* Action bar (T11) — sits at bottom of main column */
/* Action bar (T11) — v1.1.9: fixed at the bottom of the viewport,
   centered to the 1480px panel width. Was previously inline at the
   end of the main column. */
.ta-asf .asf-action-bar {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1480px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 28px;
  background:#fff;
  border-top:1px solid var(--input-border);
  box-shadow:0 -2px 14px rgba(0,0,0,0.07);
  z-index:60;
}
.ta-asf .asf-action-cancel {
  font-size:12px;
  padding:8px 14px;
  color:var(--danger);
  background:transparent;
  border:0.5px solid var(--danger);
  border-radius:4px;
  cursor:pointer;
  font-family:'DM Sans', system-ui, sans-serif;
}
.ta-asf .asf-action-cancel:hover { background:var(--danger-soft); }
.ta-asf .asf-action-save {
  font-size:13px;
  padding:9px 18px;
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-family:'DM Sans', system-ui, sans-serif;
  font-weight:500;
}
.ta-asf .asf-action-save:hover { background:var(--teal-light); }
.ta-asf .asf-action-save:disabled {
  background:var(--text-tiny);
  cursor:not-allowed;
  opacity:0.7;
}
.ta-asf .asf-action-save.saving {
  cursor:wait;
  opacity:0.8;
}

/* Writer/co-writer row — 2-column grid */
.ta-asf .asf-writer-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* Field-label can host an N/A toggle inline */
.ta-asf .asf-field-label-row {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}

/* Hide legacy v1.0.x topbar/title-bar/footer/RTP — superseded by new shell.
   Kept as a safety net while render is being rewritten; once render() no
   longer emits them, these rules become no-ops. */
.ta-asf .asf-shell ~ .asf-topbar,
.ta-asf .asf-shell ~ .asf-title-bar,
.ta-asf .asf-shell ~ .asf-rtp-panel,
.ta-asf .asf-shell ~ .asf-footer { display:none !important; }

/* ===========================================================
   v1.1.1 — Chunk 2 inline Trix body editor
   Styling matches Transcriber Review & Edit body block so the
   font/layout discontinuity Jeff flagged is gone. Targets the
   Trix custom elements (trix-toolbar, trix-editor) along with
   the ASF wrapper layer.
   =========================================================== */

/* Wrapper — gold border on dirty, danger on over-limit */
.ta-asf .asf-trix-wrap {
  border:1.5px solid var(--input-border);
  border-radius:4px;
  background:#fff;
  overflow:visible;             /* v1.3.3 — was hidden; allow the sticky toolbar */
  transition:border-color .12s;
}
.ta-asf .asf-trix-wrap.dirty {
  border:2px solid var(--gold);
}
.ta-asf .asf-trix-wrap.over {
  border:2px solid var(--danger);
  background:#fff5f4;
}

/* Trix toolbar — slim, mono affordance row above the editor */
.ta-asf trix-toolbar#asf-trix-toolbar {
  display:block;
  background:#fafafa;
  border-bottom:0.5px solid var(--input-border);
  position:sticky;                      /* v1.3.3 — stay visible while editing the body */
  top:var(--asf-hdr-h, 56px);           /* sits just below the sticky header */
  z-index:40;                           /* above editor content, below header (z 50) */
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px;
  padding:4px 8px;
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button-group {
  display:flex;
  border:none;
  margin:0 4px 0 0;
  background:transparent;
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:11px;
  font-weight:500;
  color:var(--text-mid);
  background:transparent;
  border:none;
  border-radius:3px;
  padding:5px 8px;
  margin:0 1px;
  cursor:pointer;
  min-width:28px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button:hover {
  background:var(--cream-bg);
  color:var(--text-dark);
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button.trix-active {
  background:var(--teal);
  color:#fff;
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button:disabled {
  opacity:0.4;
  cursor:not-allowed;
}
.ta-asf trix-toolbar#asf-trix-toolbar .trix-dialogs { position:relative; }
.ta-asf trix-toolbar#asf-trix-toolbar .trix-dialog {
  background:#fff;
  border:0.5px solid var(--input-border);
  border-radius:4px;
  padding:8px;
  margin-top:4px;
  font-size:12px;
}

/* Editor — matches body type & spacing of the published article */
/* Editor — matches body type & spacing of the published article.
   v1.1.9: removed max-height + overflow-y so the body grows with
   content; the .asf-overlay is the single scroll surface (top-to-
   bottom scroll approximates the published reading experience). */
.ta-asf trix-editor.asf-trix-editor {
  display:block;
  min-height:320px;
  padding:14px 18px;
  font-family:'Spectral', Georgia, serif;   /* v1.3.2 — match published page */
  font-size:18px;                            /* v1.3.2 */
  line-height:1.95;                          /* v1.3.2 */
  color:var(--text-dark);
  background:#fff;
  outline:none;
}
.ta-asf trix-editor.asf-trix-editor:empty:before {
  content:attr(placeholder);
  color:var(--text-tiny);
  font-style:italic;
}
.ta-asf trix-editor.asf-trix-editor h1,
.ta-asf trix-editor.asf-trix-editor h2,
.ta-asf trix-editor.asf-trix-editor h3 {
  font-family:'Fraunces', Georgia, serif;   /* v1.3.2 — match published page */
  font-weight:600;
  color:#1A3A3A;                             /* v1.3.2 — teal, matches live headings */
  line-height:1.25;
}
.ta-asf trix-editor.asf-trix-editor h1 { font-size:28px; margin:32px 0 14px; }            /* v1.3.2 */
.ta-asf trix-editor.asf-trix-editor h2 { font-size:24px; margin:32px 0 12px; }            /* v1.3.2 */
.ta-asf trix-editor.asf-trix-editor h3 { font-size:22px; line-height:1.3; margin:24px 0 10px; }  /* v1.3.2 */
.ta-asf trix-editor.asf-trix-editor p {
  margin:0 0 0.85em;
}
.ta-asf trix-editor.asf-trix-editor ul,
.ta-asf trix-editor.asf-trix-editor ol {
  margin:0 0 0.85em;
  padding-left:1.5em;
}
.ta-asf trix-editor.asf-trix-editor blockquote {
  border-left:3px solid var(--gold);
  margin:0.5em 0;
  padding:2px 14px;
  color:var(--text-mid);
  font-style:italic;
}
.ta-asf trix-editor.asf-trix-editor a {
  color:var(--blue);
  text-decoration:underline;
}
.ta-asf trix-editor.asf-trix-editor pre,
.ta-asf trix-editor.asf-trix-editor code {
  font-family:'DM Mono', monospace;
  font-size:12px;
  background:var(--cream-bg);
  padding:1px 5px;
  border-radius:3px;
}
.ta-asf trix-editor.asf-trix-editor pre {
  padding:10px 14px;
  margin:0.5em 0;
  overflow-x:auto;
}

/* Inline images inside Trix editor — sized to fit, no stretching */
.ta-asf trix-editor.asf-trix-editor figure {
  margin:1em 0;
  text-align:center;
}
.ta-asf trix-editor.asf-trix-editor img {
  max-width:100%;
  height:auto;
  border-radius:4px;
}
.ta-asf trix-editor.asf-trix-editor figcaption {
  font-size:12px;
  color:var(--text-light);
  margin-top:6px;
  font-style:italic;
}

/* Footer row — Insert image button on left, char counter on right */
.ta-asf .asf-trix-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px;
  background:#fafafa;
  border-top:0.5px solid var(--input-border);
}
.ta-asf .asf-trix-insert-image {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:11px;
  color:var(--blue);
  background:transparent;
  border:0.5px solid transparent;
  border-radius:3px;
  padding:4px 10px;
  cursor:pointer;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:background .12s, border-color .12s;
}
.ta-asf .asf-trix-insert-image:hover {
  background:var(--blue-soft);
  border-color:var(--blue);
}
.ta-asf .asf-trix-insert-icon {
  font-size:14px;
  line-height:1;
}
.ta-asf .asf-trix-charcount {
  font-family:'DM Mono', monospace;
  font-size:10px;
  color:var(--text-light);
}
.ta-asf .asf-trix-charcount.near { color:var(--pending); }
.ta-asf .asf-trix-charcount.over { color:var(--danger); font-weight:500; }

/* Body-dirty dot — small inline indicator next to "Body" label */
.ta-asf .asf-body-dirty-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  margin-left:4px;
  vertical-align:middle;
}

/* Body field container — tighter top margin so it visually
   continues from the media zones above */
.ta-asf .asf-body-field { margin-top:14px; }

/* Suppress Trix's default file-tools button group entirely.
   Files (images) get inserted via the custom "Insert inline image"
   button which routes to the MEDIA library picker, not the OS
   file picker. */
.ta-asf trix-toolbar#asf-trix-toolbar .trix-button-group--file-tools {
  display:none;
}

/* ===========================================================
   v1.1.3 — Chunk 3 inline image picker (sidebar swap)
   Picker takes over the entire .asf-side container when
   S.inlinePicker.open === true. Header + tabs + search at the
   top, scrolling bundle list below.
   =========================================================== */

/* Picker-mode sidebar — v1.1.10: FIXED to the top-right of the
   viewport so it stays in reach no matter how far you've scrolled
   into the body. Right edge aligns to the 1480px panel's right
   edge (offset by the centering margin on wide screens). Full
   viewport height; the bundle list scrolls internally while the
   header / tabs / search / selected-actions stay pinned.

   The empty 1fr grid track left behind sits directly under this
   fixed panel, so there's no visible gap and the main column keeps
   its 75% width. */
.ta-asf .asf-side.asf-side--picker {
  position:fixed;
  top:0;
  bottom:0;
  right:calc((100vw - min(100vw, 1480px)) / 2);
  width:370px;
  z-index:70;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--cream-bg);
  box-shadow:-6px 0 24px rgba(0,0,0,0.15);
}

.ta-asf .asf-picker-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--teal);
  color:#fff;
  flex-shrink:0;
}
.ta-asf .asf-picker-title {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:13px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
}
.ta-asf .asf-picker-title-icon {
  font-size:16px;
  line-height:1;
}
.ta-asf .asf-picker-close {
  cursor:pointer;
  font-size:14px;
  padding:2px 8px;
  border-radius:3px;
  opacity:0.75;
  transition:opacity .12s, background .12s;
}
.ta-asf .asf-picker-close:hover {
  opacity:1;
  background:rgba(255,255,255,0.1);
}

/* Tab strip — Available / Attached */
.ta-asf .asf-picker-tabs {
  display:flex;
  gap:6px;
  padding:8px 14px;
  background:#fff;
  border-bottom:0.5px solid var(--input-border);
  flex-shrink:0;
}
.ta-asf .asf-picker-tab {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:11px;
  font-weight:500;
  background:transparent;
  color:var(--text-mid);
  border:0.5px solid var(--input-border);
  border-radius:3px;
  padding:5px 11px;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ta-asf .asf-picker-tab:hover {
  background:var(--cream-bg);
  color:var(--text-dark);
}
.ta-asf .asf-picker-tab.on {
  background:var(--blue-soft);
  color:var(--blue);
  border-color:var(--blue);
  font-weight:500;
}

/* Search input */
.ta-asf .asf-picker-search-wrap {
  padding:8px 14px;
  background:#fff;
  border-bottom:0.5px solid var(--input-border);
  flex-shrink:0;
}
.ta-asf .asf-picker-search {
  width:100%;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:12px;
  color:var(--text-dark);
  background:var(--cream-bg);
  border:1.5px solid var(--input-border);
  border-radius:3px;
  padding:6px 9px;
  outline:none;
  transition:border-color .12s;
}
.ta-asf .asf-picker-search:focus {
  border-color:var(--teal);
  background:#fff;
}

/* Scrolling bundle list */
.ta-asf .asf-picker-bundles {
  flex:1;
  overflow-y:auto;
  padding:8px 12px 14px;
  background:var(--cream-bg);
}

/* Bundle folder */
.ta-asf .asf-picker-bundle {
  margin-bottom:10px;
}
.ta-asf .asf-picker-bundle-head {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  background:#fff;
  border:0.5px solid var(--input-border);
  border-radius:3px;
  cursor:pointer;
  font-size:11px;
  color:var(--text-dark);
  margin-bottom:4px;
  transition:background .12s, border-color .12s;
}
.ta-asf .asf-picker-bundle-head:hover {
  background:var(--gold-soft);
  border-color:var(--gold);
}
.ta-asf .asf-picker-bundle-caret {
  font-size:9px;
  color:var(--text-light);
  width:10px;
  flex-shrink:0;
}
.ta-asf .asf-picker-bundle-label {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.ta-asf .asf-picker-bundle-count {
  font-family:'DM Mono', monospace;
  font-size:10px;
  color:var(--text-light);
  background:var(--cream-bg);
  padding:1px 6px;
  border-radius:9px;
  flex-shrink:0;
}

/* Thumb grid — 3 columns. Each thumb clickable for insert.
   v1.1.6: was 4 columns; widened to 3 for larger square thumbs. */
.ta-asf .asf-picker-thumbs {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:4px;
  padding:0 4px 4px 18px;     /* left padding aligns under folder caret */
}
.ta-asf .asf-picker-thumb {
  position:relative;
  cursor:pointer;
  border-radius:3px;
  border:1.5px solid transparent;
  overflow:hidden;
  background:#fff;
  transition:border-color .12s, transform .08s;
}
.ta-asf .asf-picker-thumb img {
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:var(--cream-bg);
}
.ta-asf .asf-picker-thumb-name {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:rgba(26,58,58,0.85);
  color:#fff;
  font-size:9px;
  padding:2px 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transition:opacity .12s;
}
.ta-asf .asf-picker-thumb:hover {
  border-color:var(--blue);
  transform:scale(1.02);
}
.ta-asf .asf-picker-thumb:hover .asf-picker-thumb-name {
  opacity:1;
}
.ta-asf .asf-picker-thumb:active {
  transform:scale(0.98);
}

/* Empty state */
.ta-asf .asf-picker-empty {
  padding:24px 16px;
  text-align:center;
  font-size:12px;
  color:var(--text-light);
  font-style:italic;
}

/* Visual divider before the loose tray */
.ta-asf .asf-picker-loose-divider {
  height:1px;
  background:linear-gradient(to right, transparent, var(--input-border), transparent);
  margin:14px 0 10px;
}

/* ===========================================================
   v1.1.4 — Chunk 4 main + OG side-by-side
   Compact 50/50 grid replacing the legacy renderRow03 vertical
   stack. Sits in the main column above the body editor.
   =========================================================== */

/* Two-column responsive grid. Collapses below ~720px main-column
   width — useful when the overlay is in a narrower window. */
.ta-asf .asf-mainog-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:6px;
}
@container (max-width: 720px) {
  .ta-asf .asf-mainog-grid {
    grid-template-columns:1fr;
  }
}

/* Individual zone card */
.ta-asf .asf-mainog-zone {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:#fff;
  border:0.5px solid var(--input-border);
  border-radius:4px;
}

/* Zone head — title + meta badges */
.ta-asf .asf-mainog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
}
.ta-asf .asf-mainog-title {
  color:var(--text-mid);
}
.ta-asf .asf-mainog-badge {
  color:var(--ok);
  font-weight:500;
}
.ta-asf .asf-mainog-hint {
  color:var(--text-tiny);
  text-transform:none;
  font-size:9px;
}

/* Card body — empty state vs attached state */
.ta-asf .asf-mainog-card {
  border-radius:4px;
  overflow:hidden;
}
.ta-asf .asf-mainog-card.empty {
  background:var(--cream-bg);
  border:1.5px dashed var(--input-border);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:24px 16px;
  cursor:pointer;
  min-height:120px;
  transition:background .12s, border-color .12s;
}
.ta-asf .asf-mainog-card.empty:hover {
  background:var(--gold-soft);
  border-color:var(--gold);
}
.ta-asf .asf-mainog-empty-icon {
  font-size:28px;
  opacity:0.7;
}
.ta-asf .asf-mainog-empty-prompt {
  font-size:12px;
  color:var(--text-mid);
  font-weight:500;
}
.ta-asf .asf-mainog-empty-sub {
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
}

/* Attached-state thumbnail */
.ta-asf .asf-mainog-card.has-image { background:transparent; }
.ta-asf .asf-mainog-img {
  width:100%;
  /* v1.5.13 — aspect-ratio + background-size now set INLINE per format
     (banner 700/235, sidebar 480/400, splash 1/1) so each ad preview
     takes its true shape and shows the whole creative (contain). The
     old hardcoded `aspect-ratio:1/1; background-size:cover` squashed
     every format into a square and cropped it. HC-ASF-ADIMG-01.
     (Content identical to the v1.5.12 css you already installed —
     renumbered to pair with ta-asf-v1.5.13.js.) */
  background-repeat:no-repeat;
  background-position:center;
  background-color:var(--cream-bg);
  border-radius:3px;
  cursor:pointer;
  transition:opacity .12s;
}
.ta-asf .asf-mainog-img:hover { opacity:0.85; }
.ta-asf .asf-mainog-caption {
  font-size:11px;
  color:var(--text-mid);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Action buttons row */
.ta-asf .asf-mainog-actions {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.ta-asf .asf-mainog-act {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:10px;
  font-weight:500;
  background:transparent;
  color:var(--text-mid);
  border:0.5px solid var(--input-border);
  border-radius:3px;
  padding:4px 9px;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ta-asf .asf-mainog-act:hover {
  background:var(--cream-bg);
  color:var(--text-dark);
  border-color:var(--text-mid);
}
.ta-asf .asf-mainog-act.primary {
  background:var(--gold-soft);
  color:var(--gold-deep);
  border-color:var(--gold);
}
.ta-asf .asf-mainog-act.primary:hover {
  background:var(--gold);
  color:#fff;
}

/* Meta region — alt text input, OG source caption */
.ta-asf .asf-mainog-meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}
.ta-asf .asf-mainog-meta .asf-input {
  font-size:11px;
  padding:5px 7px;
}
.ta-asf .asf-mainog-meta .asf-input.dirty {
  padding:4px 6px;
}
.ta-asf .asf-mainog-meta .asf-field-label {
  font-size:9px;
}
.ta-asf .asf-field-req {
  color:var(--danger);
  font-size:8px;
  letter-spacing:0.05em;
}

/* Secondary affordance row (Upload / Generate / Use main as OG) */
.ta-asf .asf-mainog-secondary {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:2px;
}
.ta-asf .asf-mainog-secondary-btn {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:10px;
  font-weight:500;
  background:var(--cream-bg);
  color:var(--text-mid);
  border:0.5px solid var(--input-border);
  border-radius:3px;
  padding:5px 10px;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ta-asf .asf-mainog-secondary-btn:hover {
  background:#fff;
  color:var(--text-dark);
  border-color:var(--text-mid);
}
.ta-asf .asf-mainog-secondary-btn.primary {
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.ta-asf .asf-mainog-secondary-btn.primary:hover {
  background:var(--teal-light);
}

/* OG preview card — image on top, text panel below */
.ta-asf .asf-mainog-og-card {
  border:0.5px solid var(--input-border);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
}
.ta-asf .asf-mainog-og-img {
  width:100%;
  aspect-ratio:1200 / 630;
  background-size:cover;
  background-position:center;
  background-color:var(--cream-bg);
  position:relative;
}
.ta-asf .asf-mainog-og-img.empty {
  display:flex;
  align-items:center;
  justify-content:center;
}
.ta-asf .asf-mainog-og-img-label {
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  background:rgba(255,255,255,0.85);
  padding:3px 8px;
  border-radius:3px;
}
.ta-asf .asf-mainog-og-text {
  padding:8px 10px;
  background:var(--cream-bg);
  border-top:0.5px solid var(--input-border);
}
.ta-asf .asf-mainog-og-site {
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  margin-bottom:2px;
}
.ta-asf .asf-mainog-og-title {
  font-size:12px;
  font-weight:600;
  color:var(--text-dark);
  line-height:1.3;
  margin-bottom:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ta-asf .asf-mainog-og-desc {
  font-size:10px;
  color:var(--text-mid);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ta-asf .asf-mainog-og-source {
  font-size:10px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  padding:4px 0;
}
.ta-asf .asf-mainog-og-source strong {
  color:var(--text-dark);
  font-weight:500;
}

/* ===========================================================
   v1.1.5 — Mode-specific picker header tints
   Inline (default teal) is set by the base .asf-picker-header
   rule from Chunk 3. Main + OG override with their accent.
   =========================================================== */

.ta-asf .asf-picker-header[data-asf-picker-mode="main"] {
  background:var(--gold);
  color:#fff;
}
.ta-asf .asf-picker-header[data-asf-picker-mode="og"] {
  background:var(--blue, #5b7fff);
  color:#fff;
}

/* ===========================================================
   v1.1.8 — Inline image size + align controls (picker, inline
   mode only) + figure.rte-inserted-image rendering inside the
   Trix editor (WYSIWYG parity with ta-rte v1.1.24).
   =========================================================== */

/* Control strip — sits below the picker search in inline mode */
.ta-asf .asf-picker-imgctl {
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 14px;
  background:#fff;
  border-bottom:0.5px solid var(--input-border);
  flex-shrink:0;
  flex-wrap:wrap;
}
.ta-asf .asf-picker-imgctl-group {
  display:flex;
  align-items:center;
  gap:6px;
}
.ta-asf .asf-picker-imgctl-label {
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* Size buttons (33/50/75/100%) */
.ta-asf .asf-picker-size-strip,
.ta-asf .asf-picker-align-strip {
  display:flex;
  gap:2px;
  background:var(--cream-bg);
  border:0.5px solid var(--input-border);
  border-radius:4px;
  padding:2px;
}
.ta-asf .asf-picker-size-btn,
.ta-asf .asf-picker-align-btn {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:10px;
  font-weight:500;
  color:var(--text-mid);
  background:transparent;
  border:none;
  border-radius:3px;
  padding:4px 8px;
  cursor:pointer;
  transition:background .12s, color .12s;
  min-width:30px;
  text-align:center;
}
.ta-asf .asf-picker-align-btn {
  min-width:26px;
  font-size:11px;
}
.ta-asf .asf-picker-size-btn:hover,
.ta-asf .asf-picker-align-btn:hover {
  background:#fff;
  color:var(--text-dark);
}
.ta-asf .asf-picker-size-btn.active,
.ta-asf .asf-picker-align-btn.active {
  background:var(--teal);
  color:#fff;
}

/* ── figure.rte-inserted-image rendering inside the Trix editor ──
   Mirrors ta-rte v1.1.24 injectStyles() so the in-editor preview
   matches what the published article will show. Scoped to
   .asf-trix-editor. The inline style on each figure is primary;
   these rules are the data-attr backstop. */
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image {
  display:block;
  margin:16px auto;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--input-border);
}
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image img {
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
}
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image figcaption {
  padding:6px 10px;
  font-size:12px;
  color:var(--text-mid);
  font-style:italic;
  background:var(--cream-bg);
  text-align:center;
}

/* Size variants — control the figure's max-width */
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-size="small"]  { max-width:33%; }
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-size="medium"] { max-width:50%; }
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-size="large"]  { max-width:75%; }
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-size="full"]   { max-width:100%; }

/* Alignment — margin-based block alignment (not float) */
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-align="left"]   { margin-left:0;    margin-right:auto; }
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-align="center"] { margin-left:auto; margin-right:auto; }
.ta-asf trix-editor.asf-trix-editor figure.rte-inserted-image[data-img-align="right"]  { margin-left:auto; margin-right:0; }

/* ===========================================================
   v1.1.9 — Toolbar image buttons (in the Trix toolbar, inline
   with bullet/number) + after-select size/align actions panel.
   =========================================================== */

/* Toolbar separator between Trix's native groups and our buttons */
.ta-asf trix-toolbar#asf-trix-toolbar .asf-toolbar-sep {
  display:inline-block;
  width:1px;
  height:18px;
  background:var(--input-border);
  margin:0 4px;
  vertical-align:middle;
}

/* "⊕ Image" — gold-tinted, mirrors ta-rte .rte-img-insert-btn.
   !important needed to beat Trix's own .trix-button reset. */
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-insert-btn {
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:0 10px !important;
  font-family:'DM Mono', monospace !important;
  font-size:10px !important;
  color:#854F0B !important;
  background:rgba(196,163,90,0.12) !important;
  border:1px solid var(--gold) !important;
  border-radius:4px !important;
  margin-left:4px !important;
  height:26px !important;
  min-width:auto !important;
  cursor:pointer !important;
}
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-insert-btn:hover {
  background:rgba(196,163,90,0.22) !important;
}
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-insert-btn span {
  pointer-events:none;
  color:#854F0B !important;
}

/* "⬆ Upload" — teal, mirrors ta-rte .rte-img-upload-btn */
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-upload-btn {
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:0 12px !important;
  font-family:'DM Mono', monospace !important;
  font-size:10px !important;
  font-weight:600 !important;
  color:#fff !important;
  background:var(--teal) !important;
  border:1px solid var(--teal) !important;
  border-radius:4px !important;
  margin-left:4px !important;
  height:26px !important;
  min-width:auto !important;
  cursor:pointer !important;
  letter-spacing:0.02em;
}
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-upload-btn:hover {
  background:var(--teal-light) !important;
  border-color:var(--teal-light) !important;
}
.ta-asf trix-toolbar#asf-trix-toolbar .asf-img-upload-btn span {
  pointer-events:none;
  color:#fff !important;
}

/* ── After-select actions panel (inline mode) ──
   Sticky at the bottom of the picker once a thumbnail is selected.
   Holds the selected-image preview + size + align + Insert. */
.ta-asf .asf-picker-selected {
  flex-shrink:0;
  border-top:1px solid var(--gold);
  background:var(--gold-soft);
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ta-asf .asf-picker-selected-head {
  display:flex;
  align-items:center;
  gap:8px;
}
.ta-asf .asf-picker-selected-thumb {
  width:36px;
  height:36px;
  border-radius:3px;
  background-size:cover;
  background-position:center;
  background-color:#fff;
  border:0.5px solid var(--input-border);
  flex-shrink:0;
}
.ta-asf .asf-picker-selected-name {
  flex:1;
  font-size:11px;
  color:var(--text-dark);
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ta-asf .asf-picker-selected-cancel {
  background:transparent;
  border:none;
  color:var(--text-light);
  font-size:13px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:3px;
  flex-shrink:0;
}
.ta-asf .asf-picker-selected-cancel:hover {
  background:rgba(0,0,0,0.06);
  color:var(--text-dark);
}
.ta-asf .asf-picker-selected .asf-picker-imgctl {
  padding:0;
  background:transparent;
  border:none;
  gap:12px;
}
.ta-asf .asf-picker-insert-confirm {
  width:100%;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:12px;
  font-weight:500;
  color:#fff;
  background:var(--teal);
  border:none;
  border-radius:4px;
  padding:8px 0;
  cursor:pointer;
  transition:background .12s;
}
.ta-asf .asf-picker-insert-confirm:hover {
  background:var(--teal-light);
}

/* Selected thumbnail highlight in the grid */
.ta-asf .asf-picker-thumb.selected {
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold);
}

/* ===========================================================
   v1.2.0 — Real Estate variant
   =========================================================== */

/* Full-width property address, slightly larger like a headline */
.ta-asf .asf-re-headline { margin-bottom:4px; }
.ta-asf .asf-re-headline .asf-field .asf-input {
  font-family:'Fraunces', Georgia, serif;
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  color:var(--text-dark);
  padding:6px 2px 8px;
}

/* 2-column grid for status / price / MLS / link */
.ta-asf .asf-re-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin:4px 0 8px;
}
@media (max-width:720px) {
  .ta-asf .asf-re-grid { grid-template-columns:1fr; }
}

/* Property image zone — constrain to a sensible width (not full
   bleed like the Article main+OG row) */
.ta-asf .asf-re-imagezone {
  max-width:420px;
  margin-top:8px;
}

/* RE sidebar status pill */
.ta-asf .asf-statusline {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:8px 12px;
  background:var(--cream-bg);
  border:0.5px solid var(--input-border);
  border-radius:6px;
}
.ta-asf .asf-statusline-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.ta-asf .asf-statusline-text {
  font-size:11px;
  color:var(--text-mid);
  font-family:'DM Mono', monospace;
}

/* ════════════════════════════════════════════════════════════
   v1.2.1 — EVENT (EV) VARIANT
   ════════════════════════════════════════════════════════════ */

/* Event name headline — reuse RE headline sizing */
.ta-asf .asf-ev-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:8px;
}
@media (max-width:900px) {
  .ta-asf .asf-ev-images { grid-template-columns:1fr; }
}

/* 2×2 start/end date + time grid */
.ta-asf .asf-ev-datetime-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin:4px 0 10px;
}
@media (max-width:640px) {
  .ta-asf .asf-ev-datetime-grid { grid-template-columns:1fr 1fr; }
}
/* Native date/time inputs inherit .asf-input box styling; normalize
   height + cursor so they sit flush with text inputs. */
.ta-asf .asf-ev-datetime-grid input[type="date"],
.ta-asf .asf-ev-datetime-grid input[type="time"] {
  min-height:38px;
  cursor:text;
  font-family:inherit;
}
.ta-asf .asf-ev-datetime-grid input[type="date"]::-webkit-calendar-picker-indicator,
.ta-asf .asf-ev-datetime-grid input[type="time"]::-webkit-calendar-picker-indicator {
  cursor:pointer;
  opacity:0.55;
}

/* Event Description — lightweight Trix. Reuses .asf-trix-wrap /
   .asf-trix-editor; just give it a comfortable working height
   (shorter than the article body editor). */
.ta-asf .asf-ev-desc-wrap trix-editor.asf-ev-desc-editor {
  min-height:150px;
}

/* ════════════════════════════════════════════════════════════
   v1.2.3 — AD (ADS) VARIANT
   Four optional creative sections (Banner, Sidebar, The Find,
   Local Business Profile) + sidebar Default Redirect URL (from
   Customer record) + bottom Default Art Ad reference. Mirrors the
   .asf-mainog-zone card + .asf-trix-* editor patterns.
   ════════════════════════════════════════════════════════════ */

/* Intro line above the sections */
.ta-asf .asf-ads-intro {
  font-size:11px;
  line-height:1.5;
  color:var(--text-mid);
  margin:0 0 10px;
}

/* Non-image creative section (The Find, LBP) — same card as a zone */
.ta-asf .asf-ads-section {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:#fff;
  border:0.5px solid var(--input-border);
  border-radius:4px;
  margin-bottom:10px;
}
.ta-asf .asf-ads-section-head {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
}
/* per-section product label (derived; HC-AD-1) */
.ta-asf .asf-ads-prod {
  margin-left:auto;
  color:var(--text-tiny);
  text-transform:none;
  font-style:italic;
  letter-spacing:0;
}
/* muted explanatory note inside a section / refblock */
.ta-asf .asf-ads-note {
  font-size:10px;
  line-height:1.5;
  color:var(--text-light);
}
.ta-asf .asf-ads-note code {
  font-family:'DM Mono', monospace;
  font-size:10px;
  color:var(--text-mid);
  background:var(--cream-bg);
  padding:0 4px;
  border-radius:3px;
}

/* Stack the banner/sidebar image zones cleanly */
.ta-asf .asf-ads-intro + .asf-mainog-zone,
.ta-asf .asf-mainog-zone + .asf-mainog-zone {
  margin-bottom:10px;
}

/* Read-only Customer-profile reference inside the LBP section */
.ta-asf .asf-cust-profile-ref {
  background:var(--cream-bg);
  border:0.5px solid var(--input-border);
  border-radius:4px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ta-asf .asf-cust-profile-ref-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ta-asf .asf-cust-profile-ref-name {
  font-size:12px;
  font-weight:600;
  color:var(--teal);
}

/* "Edit Customer" — disabled placeholder for a future session */
.ta-asf .asf-edit-cust {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--text-light);
  background:transparent;
  border:0.5px dashed var(--text-tiny);
  border-radius:5px;
  padding:5px 9px;
  cursor:not-allowed;
  font-family:'DM Mono', monospace;
}
.ta-asf .asf-edit-cust .soon {
  font-size:8px;
  background:var(--text-tiny);
  color:#fff;
  border-radius:3px;
  padding:1px 4px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.ta-asf .asf-edit-cust-block {
  width:100%;
  justify-content:center;
  margin-top:8px;
}

/* Default Redirect URL read-only line (sidebar) */
.ta-asf .asf-readonly-line {
  font-size:11px;
  color:var(--text-mid);
  font-family:'DM Mono', monospace;
  background:var(--cream-bg);
  border:0.5px solid var(--input-border);
  border-radius:6px;
  padding:8px 10px;
  word-break:break-all;
}
.ta-asf .asf-readonly-line.empty {
  color:var(--text-tiny);
  font-style:italic;
}

/* Redirect-fallback hint under a link field */
.ta-asf .asf-fallback-hint {
  font-size:10px;
  line-height:1.4;
  color:var(--text-light);
  margin-top:4px;
}
.ta-asf .asf-fallback-hint b {
  color:var(--gold-deep);
  font-weight:600;
}

/* Bottom reference — Customer Default Art Ad (GET) */
.ta-asf .asf-ads-refblock {
  background:var(--cream-bg);
  border:0.5px dashed var(--input-border);
  border-radius:4px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
.ta-asf .asf-ads-refblock-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:9px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
}
.ta-asf .asf-ads-refblock-stale {
  color:var(--pending);
  background:var(--pending-soft);
  border-radius:3px;
  padding:1px 6px;
  text-transform:uppercase;
  font-size:8px;
}

/* LBP Rich Text — lightweight Trix (reuses .asf-trix-wrap / -editor;
   just a comfortable working height, like the EV description). */
.ta-asf .asf-lbp-rich-wrap trix-editor.asf-lbp-rich-editor {
  min-height:120px;
}

/* ════════════════════════════════════════════════════════════
   v1.2.5 — Ad: locked read-only name headline + read-only
   Local Business Profile block (customer-sourced, display-only).
   ════════════════════════════════════════════════════════════ */
.ta-asf .asf-ad-name-head {
  font-family:'Fraunces', Georgia, serif;
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  color:var(--text-dark);
  padding:6px 0 8px;
  border-bottom:2px solid transparent;
  margin-bottom:2px;
}
.ta-asf .asf-ad-name-head.empty {
  color:var(--text-tiny);
  font-style:italic;
  font-weight:400;
  font-size:20px;
}

.ta-asf .asf-cust-prof {
  background:var(--gold-soft, #fdfcf8);
  border:1px solid var(--input-border);
  border-radius:7px;
  padding:10px 12px;
  margin:6px 0 10px;
  position:relative;
}
.ta-asf .asf-cust-prof-logo {
  position:absolute;
  top:10px; right:12px;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-family:'DM Mono', monospace;
  font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:.02em;
}
.ta-asf .asf-cust-prof-row {
  display:flex;
  gap:10px;
  padding:3px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
  font-size:12px;
}
.ta-asf .asf-cust-prof-row:last-child { border-bottom:none; }
.ta-asf .asf-cust-prof-k {
  flex:0 0 118px;
  color:var(--text-light);
  font-family:'DM Mono', monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding-top:2px;
}
.ta-asf .asf-cust-prof-v {
  flex:1;
  color:var(--text-dark);
  word-break:break-word;
}
.ta-asf .asf-cust-prof-v.url {
  font-family:'DM Mono', monospace;
  font-size:11px;
  color:var(--teal);
}

/* ════════════════════════════════════════════════════════════
   v1.2.6 — Ad-create customer-first gate (renders in place of the
   shell as the first screen of Ad create).
   ════════════════════════════════════════════════════════════ */
.ta-asf .asf-gate {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 20px;
  min-height:60vh;
}
.ta-asf .asf-gate-card {
  width:100%;
  max-width:480px;
  background:#fff;
  border:1px solid var(--input-border);
  border-radius:12px;
  padding:26px 28px 28px;
  box-shadow:0 12px 40px rgba(26,58,58,.10);
}
.ta-asf .asf-gate-head {
  font-family:'Fraunces', Georgia, serif;
  font-size:22px;
  font-weight:600;
  color:var(--text-dark);
}
.ta-asf .asf-gate-sub {
  font-size:13px;
  color:var(--text-light);
  line-height:1.5;
  margin:6px 0 20px;
}
.ta-asf .asf-gate-label {
  display:block;
  font-family:'DM Mono', monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-light);
  margin-bottom:6px;
}
.ta-asf .asf-gate-row { display:flex; gap:9px; }
.ta-asf .asf-gate-select {
  flex:1;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:14px;
  color:var(--text-dark);
  background:var(--cream-bg);
  border:1.5px solid var(--input-border);
  border-radius:7px;
  padding:9px 11px;
  outline:none;
}
.ta-asf .asf-gate-select:focus { border-color:var(--teal); }
.ta-asf .asf-gate-or {
  display:flex;
  align-items:center;
  text-align:center;
  color:var(--text-tiny);
  font-size:11px;
  margin:18px 0;
}
.ta-asf .asf-gate-or:before,
.ta-asf .asf-gate-or:after {
  content:'';
  flex:1;
  height:1px;
  background:var(--line, #e2ddd0);
}
.ta-asf .asf-gate-or span { padding:0 12px; }
.ta-asf .asf-gate-new {
  width:100%;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:var(--teal);
  background:var(--gold-soft, #fdfcf8);
  border:1px dashed var(--input-border);
  border-radius:8px;
  padding:11px 14px;
  cursor:pointer;
}
.ta-asf .asf-gate-new:disabled { opacity:.55; cursor:not-allowed; }
.ta-asf .asf-gate-note {
  font-size:11px;
  color:var(--text-tiny);
  line-height:1.45;
  margin-top:7px;
  font-style:italic;
}


/* ════════════════════════════════════════════════════════════════
   v1.2.8 — NEW-CUSTOMER FORM (ad-create gate · "+ Add new customer")
   ════════════════════════════════════════════════════════════════ */
.ta-asf .asf-nc { display:flex; justify-content:center; padding:30px 18px 38px; }
.ta-asf .asf-nc-card {
  width:100%; max-width:680px; background:#fff;
  border:1px solid var(--input-border); border-radius:14px;
  box-shadow:0 12px 40px rgba(26,58,58,.10); overflow:hidden;
}
.ta-asf .asf-nc-head {
  font-family:'Fraunces', Georgia, serif; font-size:22px; font-weight:600;
  color:var(--text-dark); padding:24px 28px 4px;
}
.ta-asf .asf-nc-sub {
  font-size:13px; color:var(--text-light); line-height:1.5;
  padding:0 28px 6px; max-width:58ch;
}
.ta-asf .asf-nc-sec { padding:18px 28px; border-bottom:1px solid var(--line, #ece9df); }
.ta-asf .asf-nc-sh {
  display:flex; align-items:center; gap:9px; margin-bottom:13px;
  font-family:'Fraunces', Georgia, serif; font-size:15px; font-weight:600; color:var(--text-dark);
}
.ta-asf .asf-nc-n {
  width:21px; height:21px; border-radius:6px; background:var(--teal); color:#fff;
  font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ta-asf .asf-nc-n.gold { background:var(--gold); }
.ta-asf .asf-nc-meta {
  margin-left:auto; font-family:'DM Sans', sans-serif; font-size:11px;
  font-weight:400; color:var(--text-tiny);
}
.ta-asf .asf-nc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 15px; }
.ta-asf .asf-nc-f { display:flex; flex-direction:column; gap:5px; }
.ta-asf .asf-nc-f.full { grid-column:1 / -1; }
.ta-asf .asf-nc-lab {
  font-family:'DM Mono', monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-light);
}
.ta-asf .asf-nc-lab i { color:var(--teal); font-style:normal; }
.ta-asf .asf-nc-in {
  font-family:'DM Sans', system-ui, sans-serif; font-size:14px; color:var(--text-dark);
  background:var(--cream-bg); border:1.5px solid var(--input-border);
  border-radius:7px; padding:9px 11px; outline:none; width:100%;
}
.ta-asf .asf-nc-in:focus { border-color:var(--teal); background:#fff; }
.ta-asf select.asf-nc-in:disabled { opacity:.6; cursor:not-allowed; background:#f3f1e9; }
.ta-asf .asf-nc-auto {
  display:inline-flex; gap:6px; align-items:center; font-size:11.5px; color:var(--text-light);
  background:var(--cream-bg); border:1px solid var(--input-border); border-radius:20px; padding:4px 11px;
}
.ta-asf .asf-nc-auto b { color:var(--text-dark); font-weight:600; }

.ta-asf .asf-nc-dir { background:var(--gold-soft); }
.ta-asf .asf-nc-dirnote { font-size:12px; color:var(--text-light); line-height:1.5; margin:-4px 0 13px; }
.ta-asf .asf-nc-dirnote b { color:var(--text-dark); font-weight:600; }
.ta-asf .asf-nc-gate { border:1px solid var(--input-border); border-radius:11px; background:#fff; overflow:hidden; }
.ta-asf .asf-nc-two { display:grid; grid-template-columns:1fr 1fr; }
.ta-asf .asf-nc-cell {
  padding:12px 14px; display:flex; flex-direction:column; gap:6px;
  border-right:1px solid var(--line, #ece9df);
}
.ta-asf .asf-nc-cell:last-child { border-right:0; }
.ta-asf .asf-nc-step {
  display:flex; align-items:center; gap:7px;
  font-family:'DM Mono', monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-light);
}
.ta-asf .asf-nc-dot {
  width:15px; height:15px; border-radius:50%; border:2px solid var(--input-border);
  flex:none; position:relative; transition:.16s;
}
.ta-asf .asf-nc-dot.done { border-color:var(--ok); background:var(--ok); }
.ta-asf .asf-nc-dot.done:after {
  content:''; position:absolute; left:4px; top:1px; width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ta-asf .asf-nc-hide {
  display:flex; align-items:center; gap:13px; padding:13px 14px;
  border-top:1px solid var(--input-border); background:var(--gold-bg); transition:.18s;
}
.ta-asf .asf-nc-hide.unlocked { background:var(--ok-soft); }
.ta-asf .asf-nc-tog { position:relative; width:42px; height:24px; flex:none; cursor:pointer; display:inline-block; }
.ta-asf .asf-nc-tog input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ta-asf .asf-nc-track { position:absolute; inset:0; background:#c9ccd0; border-radius:20px; transition:.16s; }
.ta-asf .asf-nc-knob {
  position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff;
  border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.16s;
}
.ta-asf .asf-nc-tog input:checked ~ .asf-nc-track { background:var(--gold-deep); }
.ta-asf .asf-nc-tog input:checked ~ .asf-nc-knob { left:21px; }
.ta-asf .asf-nc-tog input:disabled { cursor:not-allowed; }
.ta-asf .asf-nc-hidetxt { flex:1; }
.ta-asf .asf-nc-hidetxt .t { font-size:13px; font-weight:600; color:var(--text-dark); }
.ta-asf .asf-nc-hidetxt .s { font-size:11.5px; color:var(--text-light); margin-top:2px; }
.ta-asf .asf-nc-lock {
  font-family:'DM Mono', monospace; font-size:9.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gold-deep); background:#fff;
  border:1px solid var(--gold); border-radius:6px; padding:3px 7px; white-space:nowrap;
}
.ta-asf .asf-nc-hide.unlocked .asf-nc-lock { color:var(--ok); border-color:var(--ok); }
.ta-asf .asf-nc-vis { display:flex; align-items:center; gap:9px; margin-top:11px; font-size:12.5px; }
.ta-asf .asf-nc-badge { display:inline-flex; align-items:center; font-weight:600; font-size:11.5px; padding:4px 10px; border-radius:20px; }
.ta-asf .asf-nc-badge.hidden { background:var(--gold-bg); color:var(--gold-deep); }
.ta-asf .asf-nc-badge.shown  { background:var(--ok-soft); color:var(--ok); }
.ta-asf .asf-nc-vtxt { color:var(--text-light); }
.ta-asf .asf-nc-note { font-size:11.5px; color:var(--text-tiny); font-style:italic; line-height:1.45; margin-top:11px; }
.ta-asf .asf-nc-foot { display:flex; align-items:center; gap:14px; padding:17px 28px; background:var(--cream-bg); }
.ta-asf .asf-nc-cancel { font-family:'DM Sans', sans-serif; font-size:13px; color:var(--text-light); background:none; border:0; cursor:pointer; padding:6px 2px; }
.ta-asf .asf-nc-cancel:hover { color:var(--text-dark); text-decoration:underline; }
.ta-asf .asf-nc-spacer { flex:1; }
.ta-asf .asf-nc-autonote { font-size:11px; color:var(--text-tiny); }
@media (max-width:620px) {
  .ta-asf .asf-nc-grid, .ta-asf .asf-nc-two { grid-template-columns:1fr; }
  .ta-asf .asf-nc-cell { border-right:0; border-bottom:1px solid var(--line, #ece9df); }
  .ta-asf .asf-nc-cell:last-child { border-bottom:0; }
}


/* ════════════════════════════════════════════════════════════
   v1.2.9 — AI assist bar (create-mode Article) + range counters
   ════════════════════════════════════════════════════════════ */
.ta-asf .asf-ai-bar { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:11px 14px; border:1px solid #e6d9b6; border-radius:10px; background:linear-gradient(100deg,#fcf8ee,#f7efda); }
.ta-asf .asf-ai-spark { font-size:17px; line-height:1; flex-shrink:0; }
.ta-asf .asf-ai-txt { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.ta-asf .asf-ai-txt b { font-size:13px; font-weight:600; color:#1A3A3A; }
.ta-asf .asf-ai-sub { font-size:11.5px; color:#7c8488; }
.ta-asf .asf-ai-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-shrink:0; }
.ta-asf .asf-ai-btn { font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border-radius:8px; padding:7px 13px; border:1px solid transparent; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ta-asf .asf-ai-btn--gold { background:#C4A35A; color:#3a2f12; }
.ta-asf .asf-ai-btn--gold:hover { filter:brightness(1.06); }
.ta-asf .asf-ai-btn--ghost { background:#fff; color:#1A3A3A; border-color:#e4e0d6; }
.ta-asf .asf-ai-btn--ghost:hover { background:#FAF9F5; }
.ta-asf .asf-ai-btn[disabled] { opacity:.5; cursor:not-allowed; }
.ta-asf .asf-ai-spin { width:15px; height:15px; border:2px solid rgba(196,163,90,.35); border-top-color:#C4A35A; border-radius:50%; animation:asfAiSpin .7s linear infinite; }
@keyframes asfAiSpin { to { transform:rotate(360deg); } }
.ta-asf .asf-charcount.inrange { color:#2e8b57; font-weight:600; }
.ta-asf .asf-charcount.under   { color:#C4A35A; font-weight:600; }


/* ════════════════════════════════════════════════════════════
   v1.3.0 — brand "AI thinking" busy indicator + error state
   ════════════════════════════════════════════════════════════ */
.ta-asf .asf-ai-lottie { display:block; overflow:visible; }
.ta-asf .asf-ai-lottie path, .ta-asf .asf-ai-lottie circle { transform-box:fill-box; transform-origin:center; }
.ta-asf .asf-ai-spk1 { animation:asfSpk 1.6s ease-in-out infinite; }
.ta-asf .asf-ai-spk2 { animation:asfSpk 1.6s ease-in-out infinite .45s; }
@keyframes asfSpk { 0%,100% { transform:scale(.65) rotate(0deg); opacity:.5; } 50% { transform:scale(1.05) rotate(22deg); opacity:1; } }
.ta-asf .asf-ai-dt1 { animation:asfDot 1.2s ease-in-out infinite; }
.ta-asf .asf-ai-dt2 { animation:asfDot 1.2s ease-in-out infinite .18s; }
.ta-asf .asf-ai-dt3 { animation:asfDot 1.2s ease-in-out infinite .36s; }
@keyframes asfDot { 0%,100% { transform:scale(.55); opacity:.3; } 50% { transform:scale(1); opacity:1; } }
.ta-asf .asf-ai-bar.err { border-color:#e3b3a8; background:linear-gradient(100deg,#fdf3f0,#fae8e2); }
.ta-asf .asf-ai-bar.err .asf-ai-txt b { color:#a8432e; }


/* v1.3.1 — H2/H3 text buttons in the inline-body Trix toolbar */
.ta-asf #asf-trix-toolbar .asf-trix-head-btn {
  width:auto; min-width:0; padding:0 8px;
  font-size:12px; font-weight:700; line-height:1.8; color:var(--text-dark);
}
.ta-asf #asf-trix-toolbar .asf-trix-head-btn.trix-active { background:#e8eefc; }

/* ── v1.3.5 — character counter ─────────────────────────────────────
   Sits inside .asf-field, below the input. Right-aligned, monospace
   digits, color escalates as the user approaches the cap. The input's
   maxlength attribute is the hard stop; the counter is the warning. */
.ta-asf .asf-char-counter {
  display: block;
  margin: 4px 2px 0 auto;
  width: max-content;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.ta-asf .asf-char-counter.near {
  color: #C4A35A; /* gold — approaching cap */
  font-weight: 600;
}
.ta-asf .asf-char-counter.at {
  color: #B03A2E; /* red — at cap */
  font-weight: 700;
}

/* ── v1.3.8 — Event auto-fill from URL ──────────────────────────── */
.ta-asf .asf-urlfetch {
  background: #EEF2FF;
  border: 1px solid #D7DEFB;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.ta-asf .asf-urlfetch-head {
  font-size: 13px;
  font-weight: 600;
  color: #3D4FB5;
  margin-bottom: 8px;
}
.ta-asf .asf-urlfetch-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ta-asf .asf-urlfetch-input { flex: 1; }
.ta-asf .asf-urlfetch-btn {
  white-space: nowrap;
  background: #5B7FFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ta-asf .asf-urlfetch-btn:hover:not(:disabled) { background: #4A6BEE; }
.ta-asf .asf-urlfetch-btn:disabled { opacity: 0.6; cursor: default; }
.ta-asf .asf-urlfetch-status {
  font-size: 12px;
  margin-top: 8px;
  color: #5F6B7A;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ta-asf .asf-urlfetch-status.ok  { color: #2E7D32; }
.ta-asf .asf-urlfetch-status.err { color: #B03A2E; }
.ta-asf .asf-spin {
  width: 12px; height: 12px;
  border: 2px solid #C7D0F5;
  border-top-color: #5B7FFF;
  border-radius: 50%;
  display: inline-block;
  animation: asf-spin 0.7s linear infinite;
}
@keyframes asf-spin { to { transform: rotate(360deg); } }

.ta-asf .asf-autofill-tag {
  font-size: 11px;
  color: #3D4FB5;
  background: #E5EAFF;
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 600;
}

.ta-asf .asf-found-image {
  border: 1px solid #E4E4E8;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0 16px;
  background: #FAFAFB;
}
.ta-asf .asf-found-image-head {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2B2B2B;
}
.ta-asf .asf-found-image-body {
  display: flex;
  gap: 14px;
  align-items: center;
}
.ta-asf .asf-found-image-thumb img {
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #E4E4E8;
  display: block;
}
.ta-asf .asf-found-image-meta { flex: 1; min-width: 0; }
.ta-asf .asf-found-image-url {
  font-size: 12px;
  color: #555;
  word-break: break-all;
  margin-bottom: 8px;
}
.ta-asf .asf-mini-btn {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #CFCFD6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.ta-asf .asf-mini-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ta-asf .asf-found-image-note {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
}

/* ── v1.3.9 — event image pick-list ─────────────────────────────── */
.ta-asf .asf-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.ta-asf .asf-img-thumb {
  position: relative;
  padding: 0;
  border: 2px solid #E4E4E8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ta-asf .asf-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ta-asf .asf-img-thumb:hover { border-color: #B7C2F5; }
.ta-asf .asf-img-thumb.selected { border-color: #5B7FFF; }
.ta-asf .asf-img-check {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: #5B7FFF;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
.ta-asf .asf-found-image-sel { margin-top: 4px; }

/* ── v1.3.10 — condition button (primary) ───────────────────────── */
.ta-asf .asf-mini-btn.primary {
  background: #5B7FFF;
  color: #fff;
  border-color: #5B7FFF;
  font-weight: 600;
}
.ta-asf .asf-mini-btn.primary:hover:not(:disabled) { background: #4A6BEE; }
.ta-asf .asf-mini-btn.primary:disabled { opacity: 0.7; cursor: default; }
.ta-asf .asf-mini-btn.primary .asf-spin { border-color: #C7D0F5; border-top-color: #fff; vertical-align: -1px; margin-right: 4px; }

/* ── v1.3.11 — venue grid (Name+Room / Street / City+State+ZIP) ─── */
.ta-asf .asf-ev-grid-2-1   { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.ta-asf .asf-ev-grid-2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }