/* ===========================================================================
   Politick — UI atoms  ·  "Broadcast · Soft red"
   ---------------------------------------------------------------------------
   Reusable, tokenised components built ONLY on the `--pk-*` contract in
   tokens.css (import tokens.css + fonts.css first). Editorial / record feel:
   square (radius 0), flat (no drop shadows — separation by rules + surface
   tint), hairline rules, one soft-red accent used sparingly.

   Everything inherits `currentColor`, so every atom themes on paper AND on a
   `data-theme="ink"` surface with no per-theme overrides.

   Namespacing: classes are `pk-…`; modifiers are `pk-…--…`.
   =========================================================================== */

/* --- inline icon sizing (works with the icons.svg sprite via <use>) -------- */
.pk-ic{display:inline-block;width:1.25em;height:1.25em;vertical-align:-0.22em;
  flex:none;color:inherit;}
.pk-ic--sm{width:1em;height:1em;vertical-align:-0.15em;}
.pk-ic--lg{width:1.5em;height:1.5em;}

/* --- Buttons --------------------------------------------------------------- */
.pk-btn{
  --_pad-y:0.625rem; --_pad-x:1.05rem;
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--pk-font-sans);font-size:var(--pk-text-sm);
  font-weight:var(--pk-weight-semibold);line-height:1;letter-spacing:0.01em;
  padding:var(--_pad-y) var(--_pad-x);
  border:var(--pk-rule-w) solid var(--pk-ink);border-radius:0;
  background:transparent;color:var(--pk-ink);cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--pk-motion-fast) var(--pk-ease),
             color var(--pk-motion-fast) var(--pk-ease),
             border-color var(--pk-motion-fast) var(--pk-ease);
}
.pk-btn .pk-ic{width:1.1em;height:1.1em;}
.pk-btn:hover{background:var(--pk-ink);color:var(--pk-paper);}
.pk-btn:focus-visible{outline:var(--pk-rule-w-strong) solid var(--pk-accent);
  outline-offset:2px;}

/* primary — THE soft-red action. Used once per view. */
.pk-btn--primary{background:var(--pk-accent);border-color:var(--pk-accent);
  color:var(--pk-paper);}
.pk-btn--primary:hover{background:var(--pk-accent-strong);
  border-color:var(--pk-accent-strong);color:var(--pk-paper);}

/* secondary — quiet outline (default look already is; this just clarifies). */
.pk-btn--secondary{background:transparent;border-color:var(--pk-rule);
  color:var(--pk-ink-strong);}
.pk-btn--secondary:hover{background:var(--pk-paper-raised);
  border-color:var(--pk-ink);color:var(--pk-ink);}

/* text / link button — no box. */
.pk-btn--text{border-color:transparent;padding-left:0;padding-right:0;
  color:var(--pk-accent);}
.pk-btn--text:hover{background:transparent;color:var(--pk-accent-strong);}

.pk-btn--sm{--_pad-y:0.4rem;--_pad-x:0.7rem;font-size:var(--pk-text-xs);}
.pk-btn--lg{--_pad-y:0.8rem;--_pad-x:1.4rem;font-size:var(--pk-text-base);}

/* --- Form fields ----------------------------------------------------------- */
.pk-field{
  display:flex;align-items:center;gap:0.6rem;width:100%;
  padding:0.7rem 0.85rem;background:var(--pk-paper-raised);
  border:var(--pk-rule-w) solid var(--pk-rule);border-radius:0;
  color:var(--pk-ink);font-family:var(--pk-font-sans);
  transition:border-color var(--pk-motion-fast) var(--pk-ease);
}
.pk-field:focus-within{border-color:var(--pk-ink);}
.pk-field .pk-ic{color:var(--pk-muted);}
.pk-field input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:var(--pk-text-base);color:var(--pk-ink);
}
.pk-field input::placeholder{color:var(--pk-faint);}
/* the "/" keyboard hint shown at the right of a search field */
.pk-kbd{font-family:var(--pk-font-mono);font-size:var(--pk-text-xs);
  color:var(--pk-muted);border:var(--pk-hairline) solid var(--pk-rule);
  padding:1px 6px;background:var(--pk-paper);line-height:1.4;}

/* a big hero search field */
.pk-field--hero{padding:0.95rem 1.05rem;background:var(--pk-paper);
  border-color:var(--pk-ink);}
.pk-field--hero input{font-size:var(--pk-text-md);}

/* --- Chips / tags ---------------------------------------------------------- */
.pk-chip{
  display:inline-flex;align-items:center;gap:0.4em;
  font-family:var(--pk-font-sans);font-size:var(--pk-text-xs);
  font-weight:var(--pk-weight-medium);line-height:1.2;
  padding:0.2rem 0.55rem;border-radius:0;
  border:var(--pk-hairline) solid var(--pk-rule);
  background:var(--pk-paper-raised);color:var(--pk-ink-strong);
  text-decoration:none;white-space:nowrap;
}
a.pk-chip:hover{border-color:var(--pk-accent);color:var(--pk-accent);}
.pk-chip--accent{border-color:var(--pk-accent);color:var(--pk-accent);
  background:var(--pk-accent-tint);}
.pk-chip .pk-count{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);color:var(--pk-muted);}

/* --- AI label — every AI-derived output is visibly labelled (doctrine) ----- */
.pk-ai{
  display:inline-flex;align-items:center;gap:0.4em;
  font-family:var(--pk-font-sans);font-size:var(--pk-text-2xs);
  font-weight:var(--pk-weight-semibold);letter-spacing:var(--pk-track-caps);
  text-transform:uppercase;
  padding:0.18rem 0.5rem;border-radius:0;
  border:var(--pk-hairline) solid var(--pk-accent);
  color:var(--pk-accent);background:transparent;white-space:nowrap;
}
.pk-ai::before{content:"";width:0.5em;height:0.5em;border-radius:50%;
  background:var(--pk-accent);flex:none;}

/* --- Status / provenance pills -------------------------------------------- */
.pk-pill{
  display:inline-flex;align-items:center;gap:0.45em;
  font-family:var(--pk-font-sans);font-size:var(--pk-text-2xs);
  font-weight:var(--pk-weight-semibold);letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.18rem 0.5rem 0.18rem 0.45rem;border-radius:0;
  border:var(--pk-hairline) solid var(--pk-rule);color:var(--pk-muted);
  background:var(--pk-paper);white-space:nowrap;
}
.pk-pill .pk-stdot{width:0.5em;height:0.5em;border-radius:50%;flex:none;
  background:var(--pk-faint);}
/* honest states: processed / on-record / pending(unprocessed) / live / alert */
.pk-pill--processed{color:var(--pk-ink-strong);}
.pk-pill--processed .pk-stdot{background:var(--pk-ink);}
.pk-pill--onrecord{color:var(--pk-accent);border-color:var(--pk-accent);}
.pk-pill--onrecord .pk-stdot{background:var(--pk-accent);}
.pk-pill--pending{color:var(--pk-muted);}
.pk-pill--pending .pk-stdot{background:transparent;
  border:var(--pk-hairline) solid var(--pk-faint);box-sizing:border-box;}
.pk-pill--alert{color:var(--pk-alert);border-color:var(--pk-alert);}
.pk-pill--alert .pk-stdot{background:var(--pk-alert);}
/* live — the calm broadcast pulse */
.pk-pill--live{color:var(--pk-accent);border-color:var(--pk-accent);}
.pk-pill--live .pk-stdot{background:var(--pk-accent);
  box-shadow:0 0 0 0 var(--pk-accent);animation:pk-pulse var(--pk-pulse) var(--pk-ease-inout) infinite;}
@keyframes pk-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pk-accent) 55%,transparent);}
  70%{box-shadow:0 0 0 0.45em color-mix(in srgb,var(--pk-accent) 0%,transparent);}
  100%{box-shadow:0 0 0 0 transparent;}
}

/* --- Surfaces / panels — flat, hairline, square, NO shadow ----------------- */
.pk-surface{background:var(--pk-paper);border:var(--pk-rule-w) solid var(--pk-rule);
  border-radius:0;padding:var(--pk-space-5);}
.pk-surface--raised{background:var(--pk-paper-raised);}
.pk-surface--ink{background:var(--pk-ink);}            /* pair with data-theme="ink" */
/* a ghosted "coming soon" panel: dashed rule + faint text */
.pk-surface--ghost{border-style:dashed;border-color:var(--pk-rule);
  background:transparent;color:var(--pk-muted);}

/* eyebrow / kicker + section label */
.pk-kicker{font-family:var(--pk-font-sans);font-weight:var(--pk-weight-semibold);
  font-size:var(--pk-text-2xs);letter-spacing:var(--pk-track-caps);
  text-transform:uppercase;color:var(--pk-muted);margin:0;}

/* --- Provenance / citation (date · page · column) -------------------------- */
.pk-cite{display:inline-flex;align-items:baseline;gap:0.5ch;
  font-family:var(--pk-font-mono);font-size:var(--pk-text-xs);
  font-feature-settings:var(--pk-font-tabular);color:var(--pk-muted);}
.pk-cite .sep{color:var(--pk-faint);}
/* dotted leader fills the gap between a label and its citation, like an index. */
.pk-leader{flex:1;align-self:center;height:0;
  border-bottom:var(--pk-hairline) dotted var(--pk-rule);
  margin:0 0.6ch;min-width:1.5rem;}

/* --- Tables — record/ledger styling ---------------------------------------- */
.pk-table{width:100%;border-collapse:collapse;font-family:var(--pk-font-sans);
  font-size:var(--pk-text-sm);}
.pk-table th{font-weight:var(--pk-weight-semibold);color:var(--pk-muted);
  text-align:left;font-size:var(--pk-text-2xs);letter-spacing:var(--pk-track-caps);
  text-transform:uppercase;padding:0.55rem 0.75rem;
  border-bottom:var(--pk-rule-w) solid var(--pk-ink);
  background:var(--pk-paper-raised);}
.pk-table td{padding:0.6rem 0.75rem;
  border-bottom:var(--pk-hairline) solid var(--pk-rule-faint);
  vertical-align:baseline;}
.pk-table tr:last-child td{border-bottom:0;}
.pk-table .num{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);text-align:right;
  white-space:nowrap;}
.pk-table th.num{text-align:right;}
.pk-table tbody tr:hover{background:var(--pk-paper-raised);}

/* --- List rows — numbered / ledger lines ----------------------------------- */
.pk-list{list-style:none;margin:0;padding:0;}
.pk-listrow{display:flex;align-items:baseline;gap:0.85rem;
  padding:0.7rem 0;border-bottom:var(--pk-hairline) solid var(--pk-rule-faint);}
.pk-listrow:last-child{border-bottom:0;}
.pk-listrow .idx{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);font-size:var(--pk-text-sm);
  color:var(--pk-muted);flex:none;min-width:1.4rem;}
.pk-listrow .grow{flex:1;min-width:0;}
.pk-listrow .num{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);color:var(--pk-ink-strong);
  flex:none;}

/* --- Stat figure (tabular hero numbers) ------------------------------------ */
.pk-stat{display:flex;flex-direction:column;gap:0.15rem;}
.pk-stat .fig{font-family:var(--pk-font-mono);
  font-feature-settings:var(--pk-font-tabular);font-weight:var(--pk-weight-medium);
  font-size:var(--pk-text-xl);line-height:1;color:var(--pk-ink);}
.pk-stat .lbl{font-size:var(--pk-text-xs);color:var(--pk-muted);}

/* --- Divider rules --------------------------------------------------------- */
.pk-rule{border:0;border-top:var(--pk-rule-w) solid var(--pk-rule);margin:0;}
.pk-rule--strong{border-top:var(--pk-rule-w-strong) solid var(--pk-ink);}
.pk-rule--faint{border-top:var(--pk-hairline) solid var(--pk-rule-faint);}

@media (prefers-reduced-motion: reduce){
  .pk-pill--live .pk-stdot{animation:none;}
}