/* bluPALM Social design system. Tokens from packages/brand/tokens.json (bluPALM Flow). */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #07111f; --ink2: #0b1d31; --navy: #071a2c;
  --blue: #45b8e6; --blue2: #159fdf; --sky: #dff5ff; --ice: #eaf7fc;
  --mist: #f3f7fa; --paper: #f8fbfd; --white: #ffffff;
  --line: #dce5ed; --text: #182532; --muted: #667587;
  --good: #1ca774; --warn: #ec9d34; --caution: #f0a24a; --hold: #f2cd35; --stop: #e0483a; --focus: #ffd66b;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 28px; --pill: 999px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --step-1: .8125rem; --step0: .9375rem; --step1: 1.0625rem; --step2: 1.375rem; --step3: 1.75rem; --step4: 2.25rem;
  --shadow: 0 1px 2px rgba(7,17,31,.04), 0 8px 24px rgba(7,17,31,.06);
  --rail: 248px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--step0); line-height: 1.5; color: var(--text); background: var(--paper);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01';
}
a { color: var(--blue2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--s3); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: var(--step3); font-weight: 650; letter-spacing: -0.02em; }
h2 { font-size: var(--step2); font-weight: 620; }
h3 { font-size: var(--step1); font-weight: 600; }
h4 { font-size: var(--step0); font-weight: 600; }
p { margin: 0 0 var(--s3); }
small, .small { font-size: var(--step-1); }
.muted { color: var(--muted); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.sr-only { white-space: normal; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.rail { background: var(--white); border-right: 1px solid var(--line); padding: var(--s5) var(--s4); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }
.rail .brand img { width: 150px; height: auto; display: block; }
.rail .brand .product { font-size: var(--step-1); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: var(--s2); font-weight: 600; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail .group { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 650; margin: var(--s4) var(--s3) var(--s1); }
.rail nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: .5rem .75rem; border-radius: var(--r-md); color: var(--text); font-weight: 500; }
.rail nav a:hover { background: var(--mist); text-decoration: none; }
.rail nav a.active { background: var(--ink); color: var(--white); }
.rail nav a .count { font-size: .72rem; font-weight: 650; background: var(--sky); color: var(--ink); border-radius: var(--pill); padding: 0 .5rem; min-width: 1.4rem; text-align: center; }
.rail nav a.active .count { background: var(--blue); }
.rail .who { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s4); font-size: var(--step-1); }
.client-switch { width: 100%; }
.app > div { min-width: 0; }
.app > div { min-width: 0; }
.main { min-width: 0; padding: var(--s6) var(--s6) var(--s7); max-width: 1320px; width: 100%; }
.topbar { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head .eyebrow { font-size: var(--step-1); color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s1); }
.page-head h1 { margin: 0; }
.page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .app.menu-open .rail { transform: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .topbar img { height: 22px; }
  .main { padding: var(--s4) var(--s4) var(--s7); }
  h1 { font-size: var(--step2); }
}

/* ---------- Building blocks ---------- */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s2); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grid { display: grid; gap: var(--s4); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.card.tight { padding: var(--s4); }
.card.flat { box-shadow: none; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card.accent { border-left: 4px solid var(--blue); }
.card.warn { border-left: 4px solid var(--caution); }
.card.stop { border-left: 4px solid var(--stop); }
.card.good { border-left: 4px solid var(--good); }
.divider { height: 1px; background: var(--line); margin: var(--s4) 0; border: 0; }

/* ---------- Buttons ---------- */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: .55rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--ink2); }
.btn-blue { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.btn-good { background: var(--good); border-color: var(--good); color: var(--ink); }
.btn-danger { background: var(--white); border-color: var(--stop); color: #a3261a; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--blue2); padding-inline: .5rem; }
.btn-quiet:hover { background: var(--mist); border-color: transparent; }
.btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: var(--step-1); }
.btn-ai::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--blue); display: inline-block; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 650; padding: .15rem .55rem; border-radius: var(--pill); background: var(--mist); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); }
.chip.no-dot::before { display: none; }
label.chip { white-space: normal; max-width: 100%; }
.chip-good { background: #e3f6ee; border-color: #bfe8d6; } .chip-good::before { background: var(--good); }
.chip-blue { background: var(--sky); border-color: #bfe6f6; } .chip-blue::before { background: var(--blue2); }
.chip-warn { background: #fdf0de; border-color: #f6d9b0; } .chip-warn::before { background: var(--caution); }
.chip-hold { background: #fdf7d6; border-color: #f1e39b; } .chip-hold::before { background: var(--hold); }
.chip-stop { background: #fbe4e1; border-color: #f2bdb6; } .chip-stop::before { background: var(--stop); }
.chip-ink { background: var(--ink); color: var(--white); border-color: var(--ink); } .chip-ink::before { background: var(--blue); }
.plat { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.5rem; padding: 0 .35rem; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.plat.practice { background: var(--muted); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > span, .field > label { font-weight: 600; font-size: var(--step-1); color: var(--ink); }
.field .hint { font-size: var(--step-1); color: var(--muted); }
input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='datetime-local'], input[type='date'], input[type='month'], input[type='search'], select, textarea {
  font: inherit; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem .75rem; min-height: 44px; width: 100%;
}
textarea { min-height: 120px; resize: vertical; white-space: pre-wrap; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--ink); }
.counter { font-size: .75rem; color: var(--muted); text-align: right; }
.counter.over { color: #a3261a; font-weight: 700; }

/* ---------- Tables and lists ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--step-1); }
.table th { text-align: left; font-weight: 650; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--mist); white-space: nowrap; }
.table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.list { display: flex; flex-direction: column; }
.list > .item { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.list > .item:last-child { border-bottom: 0; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); overflow-x: auto; }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .9rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; min-height: 44px; }
.tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- KPI tiles ---------- */
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.kpi .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.kpi .value { font-size: var(--step3); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.kpi .value.nr { font-size: var(--step0); color: var(--muted); font-weight: 600; }
.kpi .sub { font-size: var(--step-1); color: var(--muted); }

/* ---------- Empty, notice, spinner ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--white); }
.empty h3 { color: var(--ink); }
.notice { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--ice); border: 1px solid #bfe6f6; color: var(--ink); font-size: var(--step-1); }
.notice.warn { background: #fdf0de; border-color: #f6d9b0; }
.notice.stop { background: #fbe4e1; border-color: #f2bdb6; }
.notice.good { background: #e3f6ee; border-color: #bfe8d6; }
.spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-lines { font-size: var(--step-1); color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
.progress-lines .now { color: var(--ink); font-weight: 600; }
.loading { padding: var(--s7); text-align: center; color: var(--muted); }

/* ---------- Modal and toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(7,17,31,.45); display: grid; place-items: center; z-index: 100; padding: var(--s4); }
.modal { background: var(--white); border-radius: var(--r-lg); width: min(640px, 100%); max-height: 90vh; overflow: auto; padding: var(--s5); box-shadow: var(--shadow); }
.modal.wide { width: min(960px, 100%); }
.modal h2 { margin-bottom: var(--s4); }
.modal .actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.toasts { position: fixed; bottom: var(--s4); right: var(--s4); display: flex; flex-direction: column; gap: var(--s2); z-index: 200; max-width: min(420px, calc(100vw - 2rem)); }
.toast { background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: var(--r-md); box-shadow: var(--shadow); font-size: var(--step-1); }
.toast.error { background: #7d1d14; }
.toast.good { background: #0f5c40; }

/* ---------- Post preview ---------- */
.preview { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.preview .who { display: flex; align-items: center; gap: .6rem; padding: .75rem; font-weight: 600; font-size: var(--step-1); }
.preview .who .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; font-weight: 700; color: var(--ink); font-size: .75rem; }
.preview .media { background: var(--mist); aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--muted); }
.preview .media img, .preview .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview .body { padding: .75rem; white-space: pre-wrap; word-break: break-word; font-size: var(--step-1); }
.preview .fold { color: var(--muted); }
.thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.thumb { width: 84px; height: 84px; border-radius: var(--r-md); overflow: hidden; background: var(--mist); border: 1px solid var(--line); position: relative; display: grid; place-items: center; font-size: .7rem; color: var(--muted); text-align: center; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb .x { position: absolute; top: 2px; right: 2px; background: var(--white); border: 1px solid var(--line); border-radius: 50%; width: 22px; height: 22px; font-size: .75rem; line-height: 1; cursor: pointer; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.media-grid .tile { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--white); }
.media-grid .tile .pic { aspect-ratio: 1; background: var(--mist); display: grid; place-items: center; color: var(--muted); font-size: .75rem; }
.media-grid .tile .pic img, .media-grid .tile .pic video { width: 100%; height: 100%; object-fit: cover; }
.media-grid .tile .meta { padding: .4rem .55rem; font-size: .75rem; }

/* ---------- Calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.cal .dow { background: var(--mist); font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: .45rem .55rem; border-bottom: 1px solid var(--line); }
.cal .day { min-height: 118px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .4rem; display: flex; flex-direction: column; gap: .25rem; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.other { background: var(--paper); color: var(--muted); }
.cal .day.today .date { background: var(--ink); color: var(--white); border-radius: var(--pill); padding: 0 .45rem; }
.cal .date { font-size: .75rem; font-weight: 700; align-self: flex-start; }
.cal .ev { font-size: .72rem; border-radius: var(--r-sm); padding: .2rem .35rem; background: var(--mist); border-left: 3px solid var(--muted); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; font-size: .72rem; }
.cal .ev.s-approved, .cal .ev.s-published { border-left-color: var(--good); }
.cal .ev.s-client_review, .cal .ev.s-internal_review { border-left-color: var(--blue2); }
.cal .ev.s-changes_requested, .cal .ev.s-partly_published { border-left-color: var(--caution); }
.cal .ev.s-failed { border-left-color: var(--stop); }
@media (max-width: 700px) { .cal { grid-template-columns: 1fr; } .cal .dow { display: none; } .cal .day.other { display: none; } .cal .day { min-height: 0; border-right: 0; } }

/* ---------- Chat (AI team) ---------- */
.chat { display: flex; flex-direction: column; gap: var(--s3); }
.msg { padding: .75rem 1rem; border-radius: var(--r-lg); max-width: 88%; white-space: pre-wrap; word-break: break-word; font-size: var(--step-1); }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--white); border-bottom-right-radius: var(--r-sm); }
.msg.ai { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: var(--r-sm); }
.agent-card { display: flex; flex-direction: column; gap: var(--s2); }
.agent-card .role { font-weight: 650; color: var(--ink); }
.steps { display: flex; flex-direction: column; gap: .5rem; counter-reset: s; }
.steps .step { display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; align-items: start; }
.steps .step::before { counter-increment: s; content: counter(s); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }

/* ---------- Score ring ---------- */
.score { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; font-weight: 750; font-size: .9rem; color: var(--ink); background: conic-gradient(var(--good) calc(var(--v) * 1%), var(--line) 0); position: relative; }
.score::after { content: ''; position: absolute; inset: 5px; background: var(--white); border-radius: 50%; }
.score span { position: relative; z-index: 1; }
.score.mid { background: conic-gradient(var(--caution) calc(var(--v) * 1%), var(--line) 0); }
.score.low { background: conic-gradient(var(--stop) calc(var(--v) * 1%), var(--line) 0); }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: var(--step-1); }
.checks li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .4rem; }
.checks li.pass::before { content: 'Yes'; font-size: .62rem; font-weight: 800; color: #0f5c40; }
.checks li.fail::before { content: 'No'; font-size: .62rem; font-weight: 800; color: #a3261a; }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background: linear-gradient(180deg, var(--white), var(--ice)); }
.auth .card { width: min(440px, 100%); padding: var(--s6); }
.auth img { width: 170px; margin-bottom: var(--s5); }

/* ---------- Print (reports) ---------- */
@media print {
  .rail, .topbar, .page-head .actions, .no-print, .toasts { display: none !important; }
  .app { display: block; } .main { padding: 0; max-width: none; }
  .card { break-inside: avoid; border-color: #ccc; }
  body { background: #fff; }
}

/* Main area takes focus on navigation for screen readers; no visible ring needed there. */
#screen:focus { outline: none; }
.kpi .value.nr { font-size: var(--step0) !important; }

/* ---------- Performance reports: charts, sortable tables, print (added for weekly and monthly reports) ---------- */
.pr { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); max-width: 1080px; }
.modal .pr { border: 0; padding: 0; max-width: none; }
.pr-sec { margin-bottom: var(--s6); }
.pr .grid > * { min-width: 0; }
.pr-head { margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.pr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pr-kpis .kpi .value { font-size: var(--step3); }
.pr-kpis .kpi .sub { margin-top: .15rem; }
.pr-up { color: #0f5c40; font-weight: 650; }
.pr-down { color: #a3261a; font-weight: 650; }
.pr-flat { color: var(--muted); font-weight: 600; }
.pr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s4) var(--s5); }
.pr-stat .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.pr-stat .value { font-size: var(--step2); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pr-stat .value.nr { font-size: var(--step0); color: var(--muted); font-weight: 600; }
.pr-stat .sub { font-size: var(--step-1); color: var(--text); }
.pr-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pr-chart { margin: 0; min-width: 0; }
.pr-chart-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin-bottom: var(--s1); }
.pr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pr-svg .g { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pr-svg .l { fill: none; stroke: var(--blue2); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pr-svg .a { fill: var(--sky); opacity: .7; stroke: none; }
.pr-svg .b { fill: var(--blue2); }
.pr-svg .d0 { fill: var(--white); stroke: var(--blue2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pr-svg .d1 { fill: var(--ink); }
.pr-chart-ends { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
.pr-post { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.pr-post .pr-thumb { width: 72px; height: 72px; flex: none; }
.pr-post-body { min-width: 0; flex: 1; }
.pr-cap2 { margin: .2rem 0; font-size: var(--step-1); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--mist); display: block; }
.pr-thumb-empty { display: grid; place-items: center; font-size: .65rem; color: var(--muted); text-align: center; line-height: 1.1; padding: 2px; }
.pr-captioncell { min-width: 220px; max-width: 320px; }
.pr-table td, .pr-table th { white-space: nowrap; }
.pr-table td.pr-captioncell { white-space: normal; overflow-wrap: anywhere; }
.pr-table td { vertical-align: middle; }
.pr-sort { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; }
.pr-sort:hover { color: var(--ink); }
.pr-sort::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--line); }
th[aria-sort='ascending'] .pr-sort::after { border-top: 0; border-bottom: 5px solid var(--ink); }
th[aria-sort='descending'] .pr-sort::after { border-top: 5px solid var(--ink); }
th[aria-sort='ascending'], th[aria-sort='descending'] { color: var(--ink); }
.pr-notes { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--s2); }
.pr-foot { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .pr-charts { grid-template-columns: 1fr; } .pr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pr { padding: var(--s4); } .pr .card { padding: var(--s4); } .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pr-kpis { grid-template-columns: 1fr; } .pr-kpis .kpi { padding: var(--s3) var(--s4); } .pr-post .pr-thumb { width: 56px; height: 56px; } }

/* The posts table prints on a landscape page; everything else stays portrait. */
@page { margin: 12mm; }
@page prtable { size: A4 landscape; margin: 10mm; }
@media print {
  .pr { border: 0; padding: 0; max-width: none; border-radius: 0; }
  .pr, .pr .kpi, .pr .pr-stat, .pr-svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr .card, .pr-post, .pr-chart, .pr .kpi, .pr-stat, .pr-head, .pr-foot { break-inside: avoid; }
  .pr h2, .pr h3 { break-after: avoid; }
  .pr-sec { margin-bottom: var(--s5); }
  .pr .card { padding: var(--s4); }
  .pr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .pr-svg { max-height: 130px; }
  .pr .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr .table-wrap { overflow: visible; border-color: #ccc; }
  .pr table { width: 100%; }
  .pr thead { display: table-header-group; }
  .pr tr { break-inside: avoid; }
  .pr-posts-sec { page: prtable; break-before: page; }
  .pr-table { font-size: 7.5pt; }
  .pr-table th, .pr-table td { padding: 3pt 4pt; white-space: normal; }
  .pr-table td.num, .pr-table th.num { white-space: nowrap; }
  .pr-table .pr-thumb { width: 28px; height: 28px; }
  .pr-table { table-layout: auto; }
  .pr-table td.pr-captioncell, .pr-table th:nth-child(4) { width: 26%; min-width: 120pt; max-width: none; }
  .pr-sort::after { display: none; }
  .pr-sort { min-height: 0; }
  .pr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Client area (public/client.html and assets/client.js only) ---------- */
.cl-wrap { max-width: 860px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s7); }
.cl-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.cl-head img, .cl-wrap > img { width: 140px; height: auto; display: block; }
.cl-wrap h1 { overflow-wrap: anywhere; }
.cl-panel { min-width: 0; }
.cl-count { display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 650; background: var(--sky); color: var(--ink); border-radius: var(--pill); padding: 0 .5rem; min-width: 1.4rem; text-align: center; }
.cl-menu { position: relative; }
.cl-menu summary { list-style: none; }
.cl-menu summary::-webkit-details-marker { display: none; }
.cl-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); min-width: 190px; }
.cl-menu-pop .btn { justify-content: flex-start; }
.cl-media img, .cl-media video { max-width: 100%; max-height: 360px; border-radius: var(--r-md); border: 1px solid var(--line); display: block; }
.cl-service { appearance: none; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cl-service:hover { border-color: var(--ink); }
.cl-line { display: block; }
input[type='time'], input[type='tel'] { font: inherit; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem .75rem; min-height: 44px; width: 100%; }
.msg { min-width: 0; }
@media print {
  body.print-report .cl-wrap { display: none; }
  body.print-report .modal-back { position: static; background: none; padding: 0; display: block; }
  body.print-report .modal { max-height: none; overflow: visible; box-shadow: none; width: 100%; padding: 0; }
  body.print-report .modal .actions { display: none; }
}

/* App shell: publishing paused banner (coordinator) */
#pause-banner:empty { display: none; }

/* Phone width: tabs wrap instead of hiding the last one off screen, and the follower table fits the card. */
@media (max-width: 520px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
  .tab { padding: .5rem .7rem; }
  .fg-table, .fg-table tbody, .fg-table tr, .fg-table td { display: block; width: 100%; }
  .fg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fg-table tr { padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
  .fg-table td { padding: .2rem 0; border: 0; }
  .fg-table td.num { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .fg-table td.num::before { content: attr(data-label); color: var(--muted); text-align: left; }
}

/* Hub search (search.js) */
.search-open { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.search-open:hover { border-color: var(--blue); color: var(--ink); }
.search-open kbd { font: inherit; font-size: .72rem; border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; color: var(--muted); }
.search-back { position: fixed; inset: 0; background: rgba(10, 20, 35, .35); z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 8vh var(--s4) var(--s4); }
.search-box { background: var(--white); width: 100%; max-width: 680px; max-height: 80vh; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(10, 20, 35, .18); display: flex; flex-direction: column; overflow: hidden; }
.search-field { display: flex; gap: var(--s2); align-items: center; padding: var(--s3); border-bottom: 1px solid var(--line); }
.search-field input { flex: 1; min-width: 0; min-height: 44px; font-size: 1.05rem; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-scope { padding: var(--s2) var(--s3) 0; font-size: .85rem; }
.search-results { overflow-y: auto; padding: var(--s2) var(--s2) var(--s3); }
.search-group { font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--s3) var(--s2) var(--s1); }
.search-item { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .55rem var(--s2); border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); min-height: 44px; }
.search-item.on, .search-item:focus-visible { background: var(--ice); outline: 0; }
.search-title { font-weight: 600; }
.search-sub { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-meta { font-size: .75rem; color: var(--muted); }
.search-item mark { background: rgba(43, 122, 255, .16); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-hint { padding: var(--s3) var(--s2); }
@media (max-width: 700px) { .search-back { padding: 0; } .search-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: 0; } }

/* Platform logos in badges (core.js platformBadge) */
.plat.logo { min-width: 1.5rem; width: auto; height: 1.5rem; padding: 0 .3rem; gap: .25rem; }
.plat.logo svg { width: .95rem; height: .95rem; fill: #fff; display: block; flex: none; }
.plat.logo .plat-ads { font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: #fff; }

/* Calendar: each post shows its picture and a logo for every platform it goes to */
.cal .ev.ev-card { display: flex; flex-direction: column; gap: .25rem; white-space: normal; padding: .25rem; width: 100%; }
.cal .ev-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 96px; border-radius: 5px; overflow: hidden; background: var(--line); display: block; }
.cal .ev-thumb img, .cal .ev-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal .ev-noimg { position: absolute; inset: 0; font-size: .62rem; line-height: 1.25; color: var(--ink2, var(--ink)); padding: .3rem; overflow: hidden; word-break: break-word; }
.cal .ev-plats { position: absolute; left: 3px; bottom: 3px; right: 3px; display: flex; flex-wrap: wrap; gap: 2px; }
.cal .ev-plats .plat { height: 1.15rem; min-width: 1.15rem; padding: 0 .2rem; font-size: .55rem; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
.cal .ev-plats .plat.logo svg { width: .7rem; height: .7rem; }
.cal .ev-plats .plat-ads { font-size: .5rem; }
.cal .ev-body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; padding: 0 .1rem; }
.cal .ev-top { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.cal .ev-status { font-size: .62rem; color: var(--muted); }
@media (max-width: 700px) { .cal .ev.ev-card { flex-direction: row; align-items: flex-start; font-size: .8rem; } .cal .ev-thumb { width: 96px; flex: none; } }