/* Campaigns v8 and Content v8 (v3/campaigns-v8.js, v3/content-v8.js). Chart fills are --v-* tokens, text the ink
   tokens, so light and dark both work. Every row wraps and every grid collapses: no horizontal scroll at 390 px. */
.v8 { display: grid; gap: 14px; margin-bottom: 18px; min-width: 0; }
.v8 * { min-width: 0; }
.v8-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v8-kpi { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; }
.v8-kl { font-size: 12px; color: var(--mute); }
.v8-kv { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ink); }
.v8-kv .v8-nm { font-size: 13px; }
.v8-ks { font-size: 12px; color: var(--ink2); }
.v8-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.v8-sec h3 { margin: 0 0 10px; font-size: 15px; } .v8-sec h4 { margin: 14px 0 6px; font-size: 13px; color: var(--ink2); }
.v8-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .v8-h h3 { margin: 0; }
.v8-nm { font-size: 12px; color: var(--mute); border: 1px dashed var(--line2); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.v8-warn { color: var(--v-warn); } .v8-bad { color: var(--v-crit); }
.v8-note { font-size: 12px; margin-top: 8px; }
.v8-bar { position: relative; display: block; height: 10px; background: var(--v-track); border-radius: 5px; overflow: hidden; }
.v8-bar i { display: block; height: 100%; border-radius: 5px; }
.v8-rate em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.v8-funnel { display: grid; gap: 8px; }
.v8-fr { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; align-items: center; gap: 4px 10px; }
.v8-fl { font-size: 13px; color: var(--ink2); } .v8-fn { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.v8-fp { grid-column: 2 / 4; font-size: 11px; color: var(--mute); margin-top: -4px; }
.v8-list { display: grid; gap: 10px; }
.v8-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.v8-li .v8-lt { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 13px; overflow-wrap: anywhere; }
.v8-li .v8-lt .muted { font-size: 12px; }
.v8-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line2); color: var(--ink2); }
.v8-chip.good { color: var(--v-good); border-color: var(--v-good); } .v8-chip.bad { color: var(--v-crit); border-color: var(--v-crit); }
.v8-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v8-move { border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; font-size: 13px; display: grid; gap: 4px; align-content: start; overflow-wrap: anywhere; }
.v8-move.scale { box-shadow: inset 3px 0 0 var(--v-good); } .v8-move.fix { box-shadow: inset 3px 0 0 var(--v-warn); } .v8-move.pause { box-shadow: inset 3px 0 0 var(--v-crit); }
.v8-mk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; }
.v8-move summary, .v8-sec summary { font-size: 12px; color: var(--mute); cursor: pointer; }
.v8-ramp { margin: 0; } .v8-ramp svg { width: 100%; height: auto; display: block; }
.v8-col { fill: var(--v-s1); } .v8-gap { fill: var(--v-axis); }
.v8-cap { stroke: var(--v-crit); stroke-width: 1.5; stroke-dasharray: 4 3; } .v8-capt { font-size: 9px; fill: var(--mute); }
.v8-ramp { margin: 0 0 16px; } .v8-ramp figcaption { font-size: 12px; margin-top: 6px; }
.t8-cal { display: grid; gap: 4px; }
.t8-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.t8-head span { font-size: 11px; color: var(--mute); text-align: center; line-height: 1.2; }
.t8-lane { font-size: 12px; color: var(--ink2); overflow-wrap: anywhere; }
.t8-c { height: 26px; border-radius: 6px; background: var(--v-s3); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.t8-c[data-n="0"] { background: var(--v-track); }
.t8-row.gap .t8-c[data-n="0"] { box-shadow: inset 0 0 0 1px var(--v-crit); }
@media (max-width: 900px) { .v8-grid, .v8-moves { grid-template-columns: minmax(0, 1fr); } .v8-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .v8-fr { grid-template-columns: 92px minmax(0, 1fr) 44px; }
  .t8-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .t8-row .t8-lane { grid-column: 1 / -1; } .t8-head > span:first-child { display: none; }
  .v8-kv { font-size: 22px; }
}

/* ------------------------------------------------------------------ Content v9 (11-07): upcoming posts, calendar,
   floor, networks, blog posts. v9 tokens only; dark default, light under [data-theme="light"]. */
.t9 .t9-st { display: inline-flex; align-items: center; gap: 5px; font: var(--v9-f-micro); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--v9-line); color: var(--v9-ink2); background: var(--v9-card2); white-space: nowrap; }
.t9 .t9-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--t9-c, var(--v9-mute)); }
.t9 [data-st="published"] { --t9-c: var(--v9-good); }
.t9 [data-st="scheduled"] { --t9-c: var(--v9-s1); }
.t9 [data-st="queued"] { --t9-c: var(--v9-mute); }
.t9 [data-st="held"] { --t9-c: var(--v9-warn); }
.t9 .t9-bad { color: var(--v9-crit); }
.t9 .t9-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--v9-sunk); border: 1px solid var(--v9-line); }
.t9 .t9-noimg { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--v9-mute); font: var(--v9-f-micro); padding: 6px; }
.t9 .t9-img.sm { width: 34px; height: 34px; flex: none; border-radius: 6px; font-size: 0; }
.t9 .t9-img.big { max-height: 420px; aspect-ratio: auto; object-fit: contain; }
.t9 .t9-up { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--v9-3); }
@media (max-width: 1100px) { .t9 .t9-up { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .t9 .t9-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t9 .t9-post { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; border-radius: 10px; padding: 6px; border: 1px solid transparent; }
.t9 .t9-post:hover, .t9 .t9-post:focus-visible { border-color: var(--v9-line); background: var(--v9-card2); }
.t9 .t9-pmeta { display: flex; flex-direction: column; gap: 3px; font: var(--v9-f-small); color: var(--v9-ink2); min-width: 0; }
.t9 .t9-pmeta b { color: var(--v9-ink); }
.t9 .t9-pmeta .t9-nets { color: var(--v9-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t9 .t9-pmeta .t9-st { align-self: flex-start; }
.t9 .t9-bar { display: flex; flex-wrap: wrap; gap: var(--v9-2); align-items: center; margin-bottom: var(--v9-3); }
.t9 .t9-seg { display: inline-flex; border: 1px solid var(--v9-line); border-radius: 999px; padding: 2px; background: var(--v9-card2); }
.t9 .t9-seg button { border: 0; background: none; color: var(--v9-ink2); font: var(--v9-f-small); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.t9 .t9-seg button.on { background: var(--v9-accent); color: var(--v9-accent-ink); }
.t9 .t9-title { font: var(--v9-f-h); margin: 0 var(--v9-2); }
.t9 .t9-sel { font: var(--v9-f-small); color: var(--v9-mute); display: inline-flex; gap: 6px; align-items: center; }
.t9 .t9-sel select { background: var(--v9-card2); color: var(--v9-ink); border: 1px solid var(--v9-line); border-radius: 8px; padding: 4px 6px; font: var(--v9-f-small); }
.t9 .t9-legend { display: flex; flex-wrap: wrap; gap: var(--v9-3); align-items: center; font: var(--v9-f-small); margin-bottom: var(--v9-3); }
.t9 .t9-cal { border: 1px solid var(--v9-line); border-radius: 10px; overflow: hidden; }
.t9 .t9-wd, .t9 .t9-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.t9 .t9-wd span { font: var(--v9-f-micro); color: var(--v9-mute); padding: 6px 8px; background: var(--v9-card2); border-bottom: 1px solid var(--v9-line); }
.t9 .t9-day { min-height: 96px; padding: 6px; border-right: 1px solid var(--v9-line); border-bottom: 1px solid var(--v9-line); min-width: 0; }
.t9 .t9-cal.week .t9-day { min-height: 220px; }
.t9 .t9-wk .t9-day:last-child { border-right: 0; }
.t9 .t9-day.out { background: var(--v9-sunk); opacity: .55; }
.t9 .t9-day.today .t9-dn { color: var(--v9-accent); font-weight: 700; }
.t9 .t9-dn { font: var(--v9-f-small); color: var(--v9-ink2); display: flex; justify-content: space-between; margin-bottom: 4px; }
.t9 .t9-dn span { color: var(--v9-mute); }
.t9 .t9-dposts { display: flex; flex-wrap: wrap; gap: 4px; }
.t9 .t9-cal.week .t9-dposts, .t9 .t9-agenda .t9-dposts { flex-direction: column; flex-wrap: nowrap; }
.t9 .t9-mini { all: unset; cursor: pointer; display: flex; gap: 6px; align-items: center; min-width: 0; border-radius: 7px; padding: 1px; box-shadow: 0 0 0 2px var(--t9-c); }
.t9 .t9-mini:focus-visible { outline: 2px solid var(--v9-ink); }
.t9 .t9-cal.week .t9-mini, .t9 .t9-agenda .t9-mini { box-shadow: inset 3px 0 0 var(--t9-c); padding: 3px 4px 3px 7px; background: var(--v9-card2); }
.t9 .t9-mt { display: flex; flex-direction: column; min-width: 0; font: var(--v9-f-micro); color: var(--v9-mute); }
.t9 .t9-mt b { color: var(--v9-ink); font: var(--v9-f-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t9 .t9-more { all: unset; cursor: pointer; font: var(--v9-f-micro); color: var(--v9-accent); padding: 2px 4px; }
.t9 .t9-agenda { display: flex; flex-direction: column; gap: var(--v9-2); }
.t9 .t9-agenda .t9-day { min-height: 0; border: 1px solid var(--v9-line); border-radius: 10px; }
.t9 .t9-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.t9 .t9-sheet { position: relative; background: var(--v9-card); color: var(--v9-ink); border: 1px solid var(--v9-line); border-radius: var(--v9-r); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: var(--v9-5); display: flex; flex-direction: column; gap: var(--v9-2); box-shadow: var(--v9-shadow); }
.t9 .t9-x { position: absolute; top: 10px; right: 10px; border: 1px solid var(--v9-line); background: var(--v9-card2); color: var(--v9-ink); border-radius: 999px; width: 30px; height: 30px; cursor: pointer; }
.t9 .t9-dmeta { display: flex; gap: var(--v9-2); align-items: center; flex-wrap: wrap; font: var(--v9-f-small); color: var(--v9-ink2); }
.t9 .t9-dnet { font: var(--v9-f-small); color: var(--v9-mute); }
.t9 .t9-sheet h3 { margin: 4px 0 0; font: var(--v9-f-h); }
.t9 .t9-cap { white-space: pre-wrap; margin: 0; font: var(--v9-f-body); color: var(--v9-ink2); }
.t9 .t9-links { display: flex; gap: var(--v9-3); flex-wrap: wrap; font: var(--v9-f-small); }
.t9 .t9-links a, .t9 .t9-blog a { color: var(--v9-accent); }
.t9 .t9-floor { display: flex; flex-direction: column; gap: var(--v9-3); }
.t9 .t9-fn { display: flex; justify-content: space-between; gap: var(--v9-2); font: var(--v9-f-small); color: var(--v9-mute); margin-bottom: 4px; }
.t9 .t9-fn b { color: var(--v9-ink); }
.t9 .t9-fn .good { color: var(--v9-good-ink, var(--v9-good)); } .t9 .t9-fn .bad { color: var(--v9-serious); }
.t9 .t9-fb { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; gap: var(--v9-2); align-items: center; font: var(--v9-f-small); color: var(--v9-ink2); }
.t9 .t9-track { display: flex; height: 10px; background: var(--v9-sunk); border-radius: 999px; overflow: hidden; border: 1px solid var(--v9-line); }
.t9 .t9-track i.p, .t9 .t9-key.p { background: var(--v9-s1); } .t9 .t9-track i.s, .t9 .t9-key.s { background: var(--v9-s1-wash); }
.t9 .t9-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--v9-s1); }
.t9 .t9-of { text-align: right; font-variant-numeric: tabular-nums; }
.t9 .t9-nsum { display: flex; gap: var(--v9-3); align-items: baseline; margin-bottom: var(--v9-3); font: var(--v9-f-small); color: var(--v9-ink2); }
.t9 .t9-nsum b { font: 600 20px/1.1 'Instrument Sans', system-ui, sans-serif; color: var(--v9-ink); white-space: nowrap; }
.t9 .t9-nets { display: flex; flex-direction: column; gap: var(--v9-2); }
.t9 .t9-nb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: var(--v9-f-small); }
.t9 .t9-nb b { min-width: 130px; }
.t9 .t9-nc { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--v9-line); background: var(--v9-card2); color: var(--v9-ink2); font: var(--v9-f-micro); }
.t9 .t9-nc[data-state="idle"] { border-style: dashed; color: var(--v9-mute); }
.t9 .t9-nc[data-state="unlisted"] { border-color: var(--v9-warn); }
.t9 .t9-nc[data-state="unrecorded"] { border-color: var(--v9-crit); color: var(--v9-crit); }
.t9 .t9-blogs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v9-4); }
@media (max-width: 1100px) { .t9 .t9-blogs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .t9 .t9-blogs { grid-template-columns: minmax(0, 1fr); } .t9 .t9-nb b { min-width: 100%; } }
.t9 .t9-blogs > .cc-note { grid-column: 1 / -1; }
.t9 .t9-blog ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: var(--v9-f-small); }
.t9 .t9-blog li { display: flex; justify-content: space-between; gap: var(--v9-2); }
.t9 .t9-blog li span { color: var(--v9-mute); white-space: nowrap; }