/* ==========================================================================
   Callum app.css (v2) — component system, built on tokens.css.
   Plain CSS, no build step. Mobile-first: base rules target ~390px, then
   min-width media queries add desktop layout up to --content-max (1100px).
   ========================================================================== */

/* ---- reset & base ------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-bg);
  color: var(--color-text);
}
h1, h2, h3, p{ margin: 0 0 var(--space-2); }
a{ color: var(--color-primary-text); }
a:hover{ color: var(--color-primary-hover); }
img{ max-width: 100%; display: block; }

:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.muted{ color: var(--color-text-muted); font-size: var(--text-sm); }
.subtle{ color: var(--color-text-subtle); }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- layout -------------------------------------------------------------- */
.site-header{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.brand{ display: flex; align-items: center; gap: var(--space-2); }
.brand .dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-turquoise);
  border: 1.5px solid var(--color-primary);
  flex: none;
}
.brand strong{ font-size: var(--text-md); white-space: nowrap; }

.site-nav{ display: flex; gap: var(--space-1); }
.site-nav a{
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
}
.site-nav a:hover{ color: var(--color-primary-text); background: var(--color-surface-2); }
.site-nav a.is-active{ color: var(--color-primary-text); background: var(--color-primary-tint); }

.env-tag{
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

main{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4);
}

.site-footer{
  max-width: var(--content-max);
  margin: var(--space-6) auto var(--space-8);
  padding: 0 var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* ---- grid & cards --------------------------------------------------------- */
.grid{ display: grid; gap: var(--space-3); }
.tiles{ grid-template-columns: repeat(2, 1fr); }

.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.card:first-child{ margin-top: 0; }
.card-header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-header h2{
  font-size: var(--text-lg);
  margin: 0;
  flex: 1 1 auto;
}
.card-header .actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.card-nav{
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-2);
}
.card-nav a{ text-decoration: none; }

/* ---- stat tiles ------------------------------------------------------- */
.tile{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.tile .n{
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}
.tile .l{
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.tile.tile--warn .n{ color: var(--color-warning-ink); }
.tile.tile--warn{ background: var(--color-warning-bg); border-color: transparent; }

/* ---- buttons ------------------------------------------------------------ */
.btn{
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover{ background: var(--color-surface-2); }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn--primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn--primary:hover{ background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn--quiet{
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn--quiet:hover{ background: var(--color-surface-2); color: var(--color-text); }

.btn--danger{
  background: var(--color-danger-bg);
  border-color: transparent;
  color: var(--color-danger-ink);
}
.btn--danger:hover{ background: var(--color-danger); color: #fff; }

.btn--sm{ min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--block{ width: 100%; }
form.inline{ display: inline-block; margin: 0; }

/* ==========================================================================
   Badge / status system — colorblind-safe.
   Every status pairs: (1) an icon glyph (shape), (2) a border style
   (solid / dashed / dotted), and (3) a text label — color is never the only
   signal. See DESIGN-NOTES.md for the full legend + rationale.
   ========================================================================== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.badge::before{
  content: "";
  font-size: 1em;
  line-height: 1;
}

/* content lifecycle: what the item IS */
.badge--native{
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-style: solid;
}
.badge--native::before{ content: "\1F464"; } /* bust in silhouette: CB's own human post */

.badge--omni{
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  border-style: solid;
}
.badge--omni::before{ content: "\1F501"; } /* repeat: Callum recreation */

.badge--sponsored{
  background: var(--color-sand-tint);
  color: var(--color-sand-ink);
  border-color: var(--color-sand-ink);
  border-style: solid;
}
.badge--sponsored::before{ content: "$"; }

.badge--organic{
  background: var(--color-success-bg);
  color: var(--color-success-ink);
  border-color: var(--color-success-ink);
  border-style: solid;
}
.badge--organic::before{ content: "\1F331"; } /* seedling */

.badge--reserved{
  background: transparent;
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  border-style: dashed;
}
.badge--reserved::before{ content: "\23F3"; } /* hourglass: held trend slot */

.badge--blocked{
  background: var(--color-danger-bg);
  color: var(--color-danger-ink);
  border-color: var(--color-danger-ink);
  border-style: solid;
}
.badge--blocked::before{ content: "\1F6AB"; } /* no entry */

.badge--needs-footage{
  background: repeating-linear-gradient(
    135deg, var(--color-warning-bg), var(--color-warning-bg) 6px,
    var(--color-surface) 6px, var(--color-surface) 12px);
  color: var(--color-warning-ink);
  border-color: var(--color-warning-ink);
  border-style: dashed;
}
.badge--needs-footage::before{ content: "\1F39E"; } /* film frames */

.badge--at-risk{
  background: var(--color-warning-bg);
  color: var(--color-warning-ink);
  border-color: var(--color-warning-ink);
  border-style: dashed;
}
.badge--at-risk::before{ content: "\23F0"; } /* alarm clock, outline framing = upcoming */

.badge--overdue{
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
  border-style: solid;
}
.badge--overdue::before{ content: "\23F0"; } /* same glyph, solid FILL = urgent, past due */

.badge--queued{
  background: var(--color-gray-tint);
  color: var(--color-gray-ink);
  border-color: var(--color-gray-ink);
  border-style: dotted;
}
.badge--queued::before{ content: "\1F553"; } /* clock face: awaiting a decision */

.badge--approved{
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  border-style: solid;
}
.badge--approved::before{ content: "\2705"; } /* white heavy check mark */

.badge--live{
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
  border-style: solid;
}
.badge--live::before{ content: "\1F7E2"; } /* green circle */

/* supplementary: detection-coverage health (not one of the 11 required
   lifecycle statuses, but follows the identical icon+border+color pattern) */
.badge--healthy{
  background: var(--color-success-bg);
  color: var(--color-success-ink);
  border-color: var(--color-success-ink);
  border-style: solid;
}
.badge--healthy::before{ content: "\2713"; } /* check mark: seeing expected volume */

.badge--gap{
  background: var(--color-danger-bg);
  color: var(--color-danger-ink);
  border-color: var(--color-danger-ink);
  border-style: dashed;
}
.badge--gap::before{ content: "\26A0"; } /* warning triangle: coverage gap */

/* compact variant for dense contexts (calendar day cells) */
.badge--chip{
  display: block;
  width: 100%;
  padding: 2px var(--space-1);
  margin: 2px 0;
  font-size: 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* live/posted overlay dot, stacked onto a chip that is already badge--native/omni/etc */
.badge--posted{ position: relative; }
.badge--posted::after{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: var(--space-1);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* ---- calendar ------------------------------------------------------------ */
.cal-legend{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cal-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cal-table th{
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-1) 2px;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}
.cal-table td{
  border: 1px solid var(--color-border);
  vertical-align: top;
  height: 64px;
  padding: 3px;
  font-size: var(--text-xs);
}
.cal-table td.out{ opacity: .45; background: var(--color-surface-2); }
.cal-table td.is-today{
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-tint);
}
.cal-table .dom{
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cal-table td.is-today .dom{ color: var(--color-primary-text); }
.cal-table .overflow-note{ font-size: 9px; color: var(--color-text-muted); }

/* ---- generic table (at-risk list, detection health) ----------------------- */
.table-list{ width: 100%; border-collapse: collapse; }
.table-list th{
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.table-list td{
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  vertical-align: middle;
}
.table-list tr:last-child td{ border-bottom: none; }

.health-row{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.health-row:last-child{ border-bottom: none; }
.health-row .platform{ font-weight: 600; min-width: 90px; }
.health-row .meta{ margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- flash banner ---------------------------------------------------------- */
.flash{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-ink);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.flash span:first-child{ flex: 1 1 auto; }

/* ---- forms ---------------------------------------------------------------- */
.field{ margin-bottom: var(--space-4); }
.field label{
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.field input, .field textarea, .field select{
  width: 100%;
  font: inherit;
  font-size: var(--text-md); /* >=16px avoids iOS auto-zoom */
  padding: var(--space-2) var(--space-3);
  min-height: var(--tap-min);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--color-primary);
}
.form-error{
  color: var(--color-danger-ink);
  background: var(--color-danger-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ---- login page shell (does not extend base.html) -------------------------- */
.auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg);
}
.auth-card{
  width: 100%;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.auth-brand{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.auth-brand strong{ font-size: var(--text-lg); }

/* ---- empty states ----------------------------------------------------------- */
.empty{
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.empty .glyph{ font-size: 28px; display: block; margin-bottom: var(--space-2); }

/* ---- queue items ------------------------------------------------------------- */
.source-group{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.source-group-head{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.source-group-head code{
  font-size: var(--text-xs);
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  word-break: break-all;
}
.source-group-head .spacer{ margin-left: auto; }

.queue-item{
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.queue-item .body{ flex: 1 1 220px; min-width: 0; }
.queue-item .body b{ font-size: var(--text-base); }
.queue-item .body p{ margin: var(--space-1) 0 0; }
.queue-item .item-actions{
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* ==========================================================================
   Responsive: base above is mobile-first (works at 390px). These widen the
   layout progressively for tablet/desktop, capped at --content-max.
   ========================================================================== */
@media (min-width: 560px){
  .tiles{ grid-template-columns: repeat(3, 1fr); }
  .cal-table td{ height: 84px; padding: 5px; font-size: 12px; }
  .badge--chip{ font-size: 10.5px; }
}

@media (min-width: 760px){
  .tiles{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cal-table td{ height: 96px; }
  main{ padding: var(--space-6); }
  .queue-item .item-actions{ flex-wrap: nowrap; }
}

@media (min-width: 900px){
  .cal-table td{ height: 108px; padding: var(--space-2); font-size: var(--text-sm); }
}

/* ensure interactive controls stay >=44px on touch, even the compact ones,
   without inflating the calendar chips (which are intentionally dense) */
@media (max-width: 559px){
  .btn{ padding-left: var(--space-3); padding-right: var(--space-3); }
  .card-header .actions .btn{ flex: 1 1 auto; }
}

/* ===== S3 approvals rebuild (§7.3) ===================================== */
.queue-toolbar{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); margin-bottom:var(--space-3); }
.queue-toolbar select, .queue-toolbar input[type="search"], .queue-toolbar .queue-search{
  padding:6px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text); font:inherit; }
.queue-search{ flex:1 1 220px; min-width:160px; }
.queue-toolbar .chk{ display:inline-flex; align-items:center; gap:4px; font-size:var(--text-sm);
  color:var(--color-text-muted); white-space:nowrap; }
.queue-bulk{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:flex-start;
  margin-bottom:var(--space-3); }
.bulk-sep{ flex:1 1 auto; }
.af-wrap{ display:inline-block; }
.af-wrap > summary{ list-style:none; cursor:pointer; }
.af-body{ margin-top:var(--space-2); padding:var(--space-2); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-surface); }
.af-count{ width:90px; padding:6px 8px; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); }
/* content-class badges (palette only, no gold) */
.badge--class-trending{ background:var(--color-surface); border:1px solid var(--brand-plum);
  border-left:4px solid var(--brand-plum); color:var(--color-text); }
.badge--class-seasonal{ background:var(--color-surface); border:1px solid var(--brand-turquoise);
  border-left:4px solid var(--brand-turquoise); color:var(--color-text); }
.badge--class-sponsored{ background:var(--color-surface); border:1px solid var(--brand-sand);
  border-left:4px solid var(--brand-sand); color:var(--color-text); }
/* item selection + body preview */
.queue-item[data-qitem]:focus{ outline:2px solid var(--color-focus); outline-offset:2px; }
.queue-item .sel{ margin-right:6px; }
.body-preview > summary{ cursor:pointer; color:var(--color-text); }
.body-preview .body-full{ margin-top:var(--space-2); white-space:pre-wrap; }
/* reject reason inline form */
.reject-wrap{ display:inline-block; }
.reject-wrap > summary{ list-style:none; }
.reject-form{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; padding:var(--space-2);
  border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); }
.reject-form select, .reject-form .reject-note{ padding:6px 8px; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-text); font:inherit; }
/* pagination */
.pager{ display:flex; gap:var(--space-3); align-items:center; justify-content:center;
  padding:var(--space-3) 0; }
/* keyboard help dialog */
.kbd-help{ border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface); color:var(--color-text); padding:var(--space-4); max-width:420px; }
.kbd-help::backdrop{ background:rgba(0,0,0,.4); }
.kbd-help ul{ list-style:none; padding:0; margin:var(--space-3) 0; }
.kbd-help li{ padding:4px 0; }
.kbd-help kbd{ background:var(--color-gray-tint); border:1px solid var(--color-border);
  border-radius:4px; padding:1px 6px; font-family:var(--font-sans); font-size:var(--text-xs); }
.edit-body{ font-family:var(--font-sans); font-size:var(--text-md); padding:var(--space-3);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text); }

/* ===== S4 enterprise calendar (§7.2) ================================== */
.cal-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:1000px){ .cal-layout:has(.cal-drawer:not(:empty)){ grid-template-columns:1fr 340px; } }
.cal-v3 td{ vertical-align:top; height:96px; }
.cal-v3 .dom{ font-size:var(--text-xs); color:var(--color-text-muted); }
/* chips */
.chip{ display:inline-block; max-width:100%; margin:2px 0; padding:2px 6px; font-size:var(--text-xs);
  border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text);
  cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip:hover{ filter:brightness(1.05); }
.chip:focus-visible{ outline:2px solid var(--color-focus); outline-offset:1px; }
.chip--native{ border:1px solid var(--color-border-strong); }
.chip--omni{ border:1px solid var(--color-border); background:transparent; }
.chip--reserved{ border:1px dashed var(--color-border-strong); background:transparent; }
.chip--live{ border:1px solid var(--color-success); background:var(--color-success-bg); color:var(--color-success-ink); }
/* content-class left border colour (palette only) */
.chip.class-evergreen{ border-left:4px solid var(--brand-sand); }
.chip.class-trending{ border-left:4px solid var(--brand-plum); }
.chip.class-seasonal{ border-left:4px solid var(--brand-turquoise); }
.chip.class-sponsored{ border-left:4px solid var(--brand-sand); }
/* overlays */
.overlay{ display:block; font-size:10px; font-weight:600; padding:1px 4px; margin:1px 0;
  border-radius:var(--radius-sm); }
.overlay--due{ background:var(--color-danger-bg); color:var(--color-danger-ink); }
.overlay--film{ background:var(--color-warning-bg); color:var(--color-warning-ink); }
.overlay--window{ background:var(--color-sand-tint); color:var(--color-sand-ink); }
.cal-more{ margin-top:2px; }
.cal-more > summary{ font-size:var(--text-xs); color:var(--color-text-muted); cursor:pointer; }
/* account filter chips */
.acct-chips{ display:inline-flex; gap:4px; margin-right:var(--space-3); }
.chip-filter{ padding:2px 10px; border:1px solid var(--color-border); border-radius:var(--radius-pill);
  font-size:var(--text-sm); text-decoration:none; color:var(--color-text-muted); }
.chip-filter.on{ background:var(--color-primary-tint); color:var(--color-primary-text);
  border-color:var(--color-primary); }
/* drawer */
.cal-drawer:empty{ display:none; }
.cal-drawer{ border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface); padding:var(--space-3); align-self:start; position:sticky; top:var(--space-3); }
.drawer-head{ display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-2); margin-bottom:var(--space-2); }
.drawer-x{ margin-left:auto; }
.drawer-meta{ display:grid; gap:4px; margin:0 0 var(--space-3); }
.drawer-meta > div{ display:flex; gap:8px; font-size:var(--text-sm); }
.drawer-meta dt{ min-width:88px; color:var(--color-text-muted); margin:0; }
.drawer-meta dd{ margin:0; }
.drawer-copy{ background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); padding:var(--space-2); margin-bottom:var(--space-3); }
.drawer-copy p{ white-space:pre-wrap; margin:0; }
.drawer-actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.reschedule-wrap, .reschedule-wrap > summary{ display:inline-block; list-style:none; }
.reschedule-form{ display:flex; gap:6px; margin-top:6px; padding:var(--space-2);
  border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); }
.reschedule-form input[type="date"]{ padding:5px; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-text); }
/* print: just the grid */
@media print{
  .site-header, .site-footer, .cal-drawer, .card-nav, .flash, .cal-more,
  .drawer-actions{ display:none !important; }
  .cal-layout{ grid-template-columns:1fr; }
  .cal-v3 td{ height:auto; border:1px solid #999; }
  .chip{ border:1px solid #999 !important; color:#000 !important; background:#fff !important; }
}
/* 390px */
@media (max-width:430px){
  .cal-v3 td{ height:auto; min-height:56px; }
  .cal-v3 .chip{ font-size:10px; padding:1px 3px; }
  .acct-chips{ margin-right:0; }
}

/* ===== S7 lint badges (§10.4) ========================================= */
.badge--lint-critical{ background:var(--color-danger-bg); color:var(--color-danger-ink);
  border:1px solid var(--color-danger); font-weight:600; }
.badge--lint-flag{ background:var(--color-warning-bg); color:var(--color-warning-ink);
  border:1px solid var(--color-warning); }

/* ===== S9 analytics / charts (§9) ===================================== */
.chart-box{ position:relative; height:280px; width:100%; }
.chart-box canvas{ max-width:100%; }
.data-fallback{ margin-top:var(--space-2); }
.data-fallback > summary{ cursor:pointer; color:var(--color-text-muted); font-size:var(--text-sm); }
@media print{ .chart-box{ display:none; } .data-fallback[open], .data-fallback{ display:block; } }

/* ===== S6 ideas inbox (§7.5) ========================================== */
.idea-item{ display:flex; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.idea-item .body{ flex:1; }
.source-health{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-3); }
.idea-form{ display:flex; flex-direction:column; gap:var(--space-2); }
.idea-form input, .idea-form textarea, .idea-form select{ border:1px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font:inherit; }
.idea-form-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* ===== S13 hardening: a11y + responsive + print ====================== */
:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important;
  animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }
/* nothing should force the page to scroll sideways on a phone */
body{ overflow-x:hidden; }
.table-list{ display:block; overflow-x:auto; }
@media (max-width:430px){
  .site-nav{ flex-wrap:wrap; gap:6px; }
  .grid.tiles{ grid-template-columns:repeat(2,1fr); }
  .queue-toolbar{ gap:6px; }
  .queue-item, .idea-item{ flex-direction:column; align-items:stretch; }
  .item-actions{ flex-wrap:wrap; }
  .cal-layout:has(.cal-drawer:not(:empty)){ grid-template-columns:1fr; }
}
/* Deals + Calendar print (§13 EXIT) */
@media print{
  .site-header, .site-footer, .actions, form, .card-nav{ display:none !important; }
  .card{ break-inside:avoid; border:1px solid #999; }
  a[href]::after{ content:""; }
}

/* ---- North Star V3 data-viz (items 1,2,4,5,6,7) ---------------------------
   Ported from dashboard v1's render_v3 into v2's token system. Every colour
   here resolves to a tokens.css variable so the charts stay on-brand. */

/* shared: CB vs BER segment bar, used under every chart's headline stat */
.ns-seg { display:inline-flex; height:8px; width:120px; border-radius:var(--radius-pill);
          overflow:hidden; vertical-align:middle; background:var(--color-surface-2); }
.ns-seg i { display:block; height:100%; }
.ns-seg .cb  { background:var(--brand-plum,#8F5375); }
.ns-seg .ber { background:var(--brand-sand,#E8C39E); }
.ns-seg-key { font-size:var(--text-xs,11px); color:var(--color-text-muted); margin-left:var(--space-2); }
.ns-stat { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
           margin-bottom:var(--space-3); font-size:var(--text-sm); }
.ns-note { font-size:var(--text-xs,11px); color:var(--color-text-muted); margin-top:var(--space-2); }

/* 1. posting heatmap — GitHub-style density columns */
.ns-hm { display:flex; gap:3px; overflow-x:auto; padding-bottom:var(--space-2); }
.ns-hm-col { display:flex; flex-direction:column; gap:3px; }
.ns-cell { width:14px; height:14px; border-radius:2px; }
.ns-l0 { background:var(--color-surface-2); }
.ns-l1 { background:#E3CFDC; }
.ns-l2 { background:#C99FBA; }
.ns-l3 { background:#A86F94; }
.ns-l4 { background:var(--brand-plum,#8F5375); }
.ns-future { outline:1px dashed var(--brand-plum,#8F5375); outline-offset:-1px; }
.ns-leg { display:flex; align-items:center; gap:4px; font-size:var(--text-xs,11px);
          color:var(--color-text-muted); margin-top:var(--space-2); }

/* 2. forward gap heatmap — coloured by fill vs cadence target */
.ns-gap { display:flex; gap:4px; overflow-x:auto; }
.ns-gap-cell { min-width:40px; flex:1; border-radius:var(--radius-sm); padding:6px 2px;
               text-align:center; border:1px solid var(--color-border); }
.ns-gap-cell b { display:block; font-size:var(--text-xs,11px); font-weight:600; }
.ns-gap-cell span { display:block; font-weight:700; }
.ns-g-met  { background:var(--color-success-bg); }
.ns-g-half { background:var(--color-sand-tint); }
.ns-g-low  { background:var(--color-warning-bg); }
.ns-g-none { background:var(--color-danger-bg); }

/* 4. trend-slot fill rate — stacked weekly columns */
.ns-tf { display:flex; align-items:flex-end; gap:10px; height:92px; }
.ns-tf-col { display:flex; flex-direction:column; justify-content:flex-end; min-width:38px; }
.ns-tf-col i { display:block; width:100%; }
.ns-tf-col .wk { font-size:var(--text-xs,11px); color:var(--color-text-muted);
                 text-align:center; margin-top:4px; }
.ns-filled  { background:var(--color-success); }
.ns-missed  { background:var(--color-danger); }
.ns-pending { background:var(--color-gray); }

/* 5. best-time heat grid (only rendered above the sample-size floor) */
.ns-bt { display:grid; grid-template-columns:auto repeat(6,minmax(38px,1fr)); gap:2px; }
.ns-bt > div { padding:5px 2px; text-align:center; font-size:var(--text-xs,11px);
               border-radius:2px; }
.ns-bt .lbl { color:var(--color-text-muted); text-align:right; padding-right:6px; }

/* 6. deal-deliverable burn-down */
.ns-bd-row { margin-bottom:var(--space-3); }
.ns-bd-bar { display:flex; height:16px; border-radius:var(--radius-sm); overflow:hidden;
             background:var(--color-surface-2); }
.ns-bd-bar i { display:block; height:100%; }
.ns-done  { background:var(--color-success); }
.ns-sched { background:var(--brand-turquoise,#C4EDEE); }
.ns-prod  { background:var(--color-sand,#E8C39E); }

/* 7. content funnel with conversion % */
.ns-fun-row { display:grid; grid-template-columns:96px 1fr auto; align-items:center;
              gap:var(--space-3); margin-bottom:var(--space-2); }
.ns-fun-lbl { font-size:var(--text-sm); font-weight:600; }
.ns-fun-track { display:block; width:100%; background:var(--color-surface-2);
                border-radius:var(--radius-sm); }
.ns-fun-bar { display:flex; height:20px; border-radius:var(--radius-sm); overflow:hidden;
              min-width:2px; }
.ns-fun-bar i { display:block; height:100%; }
.ns-fun-meta { font-size:var(--text-xs,11px); color:var(--color-text-muted);
               white-space:nowrap; }
.ns-conv { color:var(--color-text); font-weight:600; }