/* ============================================================================
   PlotKnots — style.css   ·   Direction A "Parchment & Ink"
   ----------------------------------------------------------------------------
   Single, framework-free stylesheet. Drop-in replacement for the ~20-line
   <style> block in base.html. No build step, no utility framework.
   Keyed to the existing class hooks (.muted, .vote-form, .is-selected,
   .invite-link, .row, .error, .notice-ok, .nav, fieldset/legend, .actions,
   .self-center, .inline-form) PLUS a small set of new, semantic hooks
   documented in HANDOFF.md (.thread-card, .vote, .vote-coin, .freshness …).

   Sections:
     1. Design tokens (light)        6. Buttons
     2. Dark mode tokens             7. Header / wordmark / nav
     3. Reset & base                 8. Board: thread cards + ranking
     4. Typography                   9. Vote control (the medal coins)
     5. Forms, fieldsets, inputs    10. Freshness / decay cue
                                    11. Notes, members, empty states
                                    12. Confirm / notice / utility
============================================================================ */

/* 1. ── DESIGN TOKENS (light) ───────────────────────────────────────────── */
:root {
  /* Parchment & ink surfaces */
  --pk-bg:          #EDE4D2;   /* page (parchment)            */
  --pk-surface:     #FBF7EE;   /* cards, inputs               */
  --pk-surface-2:   #F4ECDC;   /* insets, header              */
  --pk-line:        #E4DAC4;   /* hairline borders            */
  --pk-line-strong: #D8CCB2;

  /* Ink text */
  --pk-ink:        #2A241B;    /* primary text                */
  --pk-ink-soft:   #5E5439;    /* secondary text              */
  --pk-ink-mute:   #8A7E66;    /* .muted, captions            */

  /* Brand */
  --pk-accent:        #8C3B2F; /* oxblood                     */
  --pk-accent-press:  #74301F;
  --pk-accent-tint:   #F4E6DF; /* oxblood wash for chips      */

  /* Medal tiers (gold/silver/bronze = 3/2/1) */
  --pk-gold:        #C9A23F;
  --pk-gold-deep:   #8C6A1E;   /* gold text on light          */
  --pk-gold-lite:   #F0D27E;
  --pk-silver:      #9AA0A6;
  --pk-silver-deep: #6E747A;
  --pk-bronze:      #B07A45;
  --pk-bronze-deep: #8A5A2E;

  /* Status */
  --pk-fresh:   #5E8C5A;       /* green: vote is fresh        */
  --pk-stale:   #C08A3A;       /* amber: vote near decay      */
  --pk-decayed: #A99B82;       /* grey: vote expired          */
  --pk-danger:  #A8392B;
  --pk-danger-tint: #F7E7E3;

  /* Type */
  --pk-font-display: "Spectral", Georgia, "Times New Roman", serif;
  --pk-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Radius & elevation */
  --pk-r-sm: 8px;
  --pk-r:    12px;
  --pk-r-lg: 16px;
  --pk-shadow:    0 1px 2px rgba(60,40,20,.06), 0 4px 14px -8px rgba(60,40,20,.18);
  --pk-shadow-lg: 0 18px 44px -28px rgba(60,40,20,.40);

  /* Layout */
  --pk-maxw: 52rem;
  --pk-gap:  1rem;

  /* Focus */
  --pk-focus: 0 0 0 3px rgba(140,59,47,.30);
}

/* 2. ── DARK MODE TOKENS ────────────────────────────────────────────────
   Auto: follows the OS when no data-theme is set (the user's chosen default).
   Force: put data-theme="light" or data-theme="dark" on <html> to override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pk-bg:          #1C1813;
    --pk-surface:     #241F18;
    --pk-surface-2:   #2A241B;
    --pk-line:        #3A332A;
    --pk-line-strong: #463D31;

    --pk-ink:        #ECE3D0;
    --pk-ink-soft:   #C3B79C;
    --pk-ink-mute:   #9A8D72;

    --pk-accent:        #D2674F;  /* oxblood lifts on dark */
    --pk-accent-press:  #E07A60;
    --pk-accent-tint:   #33231E;

    --pk-gold:        #E3B23C;
    --pk-gold-deep:   #F0CB63;
    --pk-gold-lite:   #F0CB63;
    --pk-silver:      #C7CDD4;
    --pk-silver-deep: #AEB4BB;
    --pk-bronze:      #C98A4B;
    --pk-bronze-deep: #D89E63;

    --pk-fresh:   #7FB07A;
    --pk-stale:   #D8A24A;
    --pk-decayed: #6E6450;
    --pk-danger:  #E0735C;
    --pk-danger-tint: #3A211B;

    --pk-shadow:    0 1px 2px rgba(0,0,0,.30), 0 4px 14px -8px rgba(0,0,0,.55);
    --pk-shadow-lg: 0 22px 50px -26px rgba(0,0,0,.65);
    --pk-focus: 0 0 0 3px rgba(210,103,79,.40);
  }
}
:root[data-theme="dark"] {
  --pk-bg:#1C1813; --pk-surface:#241F18; --pk-surface-2:#2A241B; --pk-line:#3A332A; --pk-line-strong:#463D31;
  --pk-ink:#ECE3D0; --pk-ink-soft:#C3B79C; --pk-ink-mute:#9A8D72;
  --pk-accent:#D2674F; --pk-accent-press:#E07A60; --pk-accent-tint:#33231E;
  --pk-gold:#E3B23C; --pk-gold-deep:#F0CB63; --pk-gold-lite:#F0CB63; --pk-silver:#C7CDD4; --pk-silver-deep:#AEB4BB; --pk-bronze:#C98A4B; --pk-bronze-deep:#D89E63;
  --pk-fresh:#7FB07A; --pk-stale:#D8A24A; --pk-decayed:#6E6450; --pk-danger:#E0735C; --pk-danger-tint:#3A211B;
  --pk-shadow:0 1px 2px rgba(0,0,0,.30),0 4px 14px -8px rgba(0,0,0,.55); --pk-shadow-lg:0 22px 50px -26px rgba(0,0,0,.65); --pk-focus:0 0 0 3px rgba(210,103,79,.40);
}

/* 3. ── RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--pk-bg);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* page content centers in a comfortable column */
body > *:not(.pk-header):not(.nav) {
  max-width: var(--pk-maxw);
  margin-left: auto;
  margin-right: auto;
}

a { color: var(--pk-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pk-accent-press); }

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--pk-focus);
  border-radius: 6px;
}

::selection { background: var(--pk-accent-tint); }

/* 4. ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--pk-font-display); line-height: 1.12; letter-spacing: -.01em; color: var(--pk-ink); }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 600; margin: 1.3rem 0 .5rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 1.8rem 0 .6rem; }
h3 { font-size: 1.1rem;  font-weight: 600; margin: 1.4rem 0 .5rem; }

p { margin: .6rem 0; text-wrap: pretty; }

.muted { color: var(--pk-ink-mute); font-size: .9em; }

code, kbd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .85em; background: var(--pk-surface-2);
  padding: .1em .4em; border-radius: 5px; border: 1px solid var(--pk-line);
}

/* a small reusable section heading kicker */
.pk-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pk-accent); margin-bottom: .4rem;
}

/* 5. ── FORMS, FIELDSETS, INPUTS ────────────────────────────────────────── */
form { display: grid; gap: .75rem; margin: 1.1rem 0; }

label { display: grid; gap: .3rem; font-weight: 500; font-size: .95rem; }

input, select, textarea {
  font: inherit; color: var(--pk-ink);
  padding: .6rem .7rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-line-strong);
  border-radius: var(--pk-r-sm);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--pk-ink-mute); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pk-accent); box-shadow: var(--pk-focus);
}
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7E66' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem;
}

fieldset {
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-r);
  background: var(--pk-surface);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0;
  box-shadow: var(--pk-shadow);
}
legend {
  box-sizing: border-box;
  width: calc(100% + 2.2rem);            /* full-bleed header band, no border notch */
  margin: 0 -1.1rem .5rem; padding: .35rem 1.1rem .5rem;
  background: var(--pk-surface);
  border-bottom: 1px solid var(--pk-line);
  border-radius: var(--pk-r) var(--pk-r) 0 0;
  font-family: var(--pk-font-display);
  font-weight: 600; font-size: 1.02rem;
  color: var(--pk-ink);
}

/* progressive-disclosure block for "Advanced" create options */
details.pk-advanced {
  border: 1px solid var(--pk-line); border-radius: var(--pk-r);
  background: var(--pk-surface); padding: 0 1.1rem; box-shadow: var(--pk-shadow);
}
details.pk-advanced > summary {
  font-family: var(--pk-font-display); font-weight: 600; cursor: pointer;
  padding: .9rem .45rem; list-style: none; display: flex; align-items: center; gap: .5rem;
}
details.pk-advanced > summary::-webkit-details-marker { display: none; }
details.pk-advanced > summary::before {
  content: "›"; font-size: 1.2em; color: var(--pk-ink-mute); transition: transform .15s;
}
details.pk-advanced[open] > summary::before { transform: rotate(90deg); }
details.pk-advanced > *:not(summary) { margin-bottom: 1rem; }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1 1 12rem; }

/* breathing room between stacked fields inside a fieldset (field → field) */
fieldset > :is(label, .row, p) + :is(label, .row, p) { margin-top: .8rem; }

/* 6. ── BUTTONS ─────────────────────────────────────────────────────────── */
button, .pk-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .6rem 1.1rem;
  border-radius: var(--pk-r-sm);
  border: 1px solid var(--pk-accent);
  background: var(--pk-accent); color: #fff;
  box-shadow: var(--pk-shadow);
  transition: transform .08s, background .15s, box-shadow .15s;
  min-height: 44px;            /* touch target */
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
button:hover, .pk-btn:hover { background: var(--pk-accent-press); border-color: var(--pk-accent-press); }
button:active, .pk-btn:active { transform: translateY(1px); }

/* secondary / ghost */
.pk-btn--ghost, button.pk-btn--ghost {
  background: var(--pk-surface); color: var(--pk-accent);
  border-color: var(--pk-line-strong); box-shadow: none;
}
.pk-btn--ghost:hover { background: var(--pk-surface-2); border-color: var(--pk-accent); }

/* destructive */
.pk-btn--danger, button.pk-btn--danger {
  background: var(--pk-danger); border-color: var(--pk-danger); color: #fff;
}
.pk-btn--danger:hover { filter: brightness(.94); }

/* small link-ish action (e.g. [delete]) */
.pk-action {
  font-size: .82rem; font-weight: 600; color: var(--pk-ink-mute);
  text-decoration: none; padding: .25rem .5rem; border-radius: 6px;
}
.pk-action:hover { color: var(--pk-danger); background: var(--pk-danger-tint); }
button.pk-action { background: transparent; border: 1px solid transparent; box-shadow: none; min-height: 0; }
button.pk-action:hover { background: var(--pk-danger-tint); border-color: transparent; }

.actions { margin-top: 2rem; }
.self-center { align-self: center; }
.inline-form { display: inline; margin: 0; }

/* 7. ── HEADER / WORDMARK / NAV ─────────────────────────────────────────── */
.pk-header, .nav {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--pk-surface-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pk-line);
  margin: 0 -1rem 1.25rem;
  position: sticky; top: 0; z-index: 30;
}
.pk-brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none; color: var(--pk-accent); }
.pk-brand .pk-mark { color: var(--pk-accent); width: 1.08rem; height: 1.22rem; margin-right: -2px; transform: translateY(-1.5px); flex: none; }
.pk-brand .pk-ch { stroke: var(--pk-surface-2); }   /* channel = header background */
.pk-wm { font-family: "Hanken Grotesk", var(--pk-font-body); font-weight: 400; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1; }
.pk-wm-plot { color: var(--pk-accent); }
.pk-wm-knots { color: var(--pk-ink); }
.pk-header .pk-group-name {
  font-family: var(--pk-font-display); font-weight: 600; font-size: 1.05rem;
  margin-left: .25rem; padding-left: .85rem; border-left: 1px solid var(--pk-line-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.pk-header .pk-spacer { flex: 1; }
.pk-header a.pk-back { color: var(--pk-ink-soft); text-decoration: none; font-weight: 500; font-size: .95rem; }
.pk-header a.pk-back:hover { color: var(--pk-accent); }

/* breadcrumb on detail pages */
.pk-crumb { font-size: .9rem; color: var(--pk-ink-mute); margin: .2rem 0 .4rem; }
.pk-crumb a { color: var(--pk-ink-soft); text-decoration: none; }
.pk-crumb a:hover { color: var(--pk-accent); }

/* signed-in line */
.pk-whoami { color: var(--pk-ink-soft); font-size: .95rem; }
.pk-badge-admin {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pk-accent); background: var(--pk-accent-tint);
  padding: .15rem .5rem; border-radius: 999px; vertical-align: 1px;
}

/* invite block */
.pk-invite { background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r); padding: 1rem 1.1rem; box-shadow: var(--pk-shadow); }
.pk-invite h2 { margin-top: 0; }
.pk-invite-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.invite-link { flex: 1 1 16rem; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.pk-copy { flex: 0 0 auto; }
.pk-copy.is-copied { background: var(--pk-fresh); border-color: var(--pk-fresh); }

/* 8. ── BOARD: THREAD CARDS + RANKING ───────────────────────────────────── */
.pk-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }

.thread-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r); padding: .85rem 1rem;
  box-shadow: var(--pk-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s;
}
.thread-card:hover { border-color: var(--pk-line-strong); box-shadow: var(--pk-shadow-lg); }
.thread-rank {
  font-family: var(--pk-font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--pk-ink-mute); min-width: 1.4rem; text-align: center; flex: none;
}
.thread-card:first-child .thread-rank { color: var(--pk-gold-deep); }
.thread-main { flex: 1; min-width: 0; }
.thread-title { font-weight: 600; font-size: 1.05rem; color: var(--pk-ink); text-decoration: none; }
.thread-title:hover { color: var(--pk-accent); }
.thread-meta { display: flex; align-items: center; gap: .55rem; margin-top: .35rem; color: var(--pk-ink-mute); font-size: .85rem; flex-wrap: wrap; }

/* gold/silver/bronze tally pips under a thread */
.medal-tally { display: inline-flex; gap: 3px; }
.medal-tally i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.medal-tally i[data-tier="3"] { background: var(--pk-gold); }
.medal-tally i[data-tier="2"] { background: var(--pk-silver); }
.medal-tally i[data-tier="1"] { background: var(--pk-bronze); }

.thread-score { text-align: center; flex: none; min-width: 2.6rem; }
.thread-score b { font-family: var(--pk-font-display); font-weight: 700; font-size: 1.5rem; color: var(--pk-accent); line-height: 1; display: block; }
.thread-score span { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-ink-mute); }

/* a thread with no activity reads quieter */
.thread-card.is-empty { background: transparent; border-style: dashed; box-shadow: none; }
.thread-card.is-empty .thread-title { color: var(--pk-ink-soft); }
.thread-card.is-empty .thread-score b { color: var(--pk-line-strong); }

/* re-rank animation on htmx swap (respects reduced motion below) */
@keyframes pk-rise { from { transform: translateY(6px); opacity: .35; } to { transform: none; opacity: 1; } }
.thread-card.pk-moved { animation: pk-rise .35s ease; }

/* 9. ── VOTE CONTROL — the medal coins ──────────────────────────────────── */
.vote-form, .vote {
  display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
  margin: 0;
}
.vote-label { font-size: .85rem; color: var(--pk-ink-mute); margin-right: .15rem; }

/* each coin is a real <button> (existing markup) */
.vote-coin {
  appearance: none; cursor: pointer; position: relative;
  width: 52px; height: 52px; min-height: 52px; padding: 0;
  border-radius: 999px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--pk-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
  background: var(--pk-surface-2);
  border: 1.5px solid var(--pk-line-strong);
  color: var(--pk-ink-soft);
  box-shadow: none;
  transition: transform .1s, box-shadow .15s, border-color .15s, background .15s;
}
.vote-coin small { font-size: .55rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-ink-mute); margin-top: 2px; }
.vote-coin:hover { transform: translateY(-2px); border-color: var(--pk-accent); }
.vote-coin:active { transform: translateY(0); }

/* tier tints when idle (subtle ring of the tier colour) */
.vote-coin[data-tier="3"] { color: var(--pk-gold-deep); }
.vote-coin[data-tier="2"] { color: var(--pk-silver-deep); }
.vote-coin[data-tier="1"] { color: var(--pk-bronze-deep); }
.vote-coin[data-tier="0"] { font-family: var(--pk-font-body); font-size: .8rem; font-weight: 600; }

/* MINTED selected state — filled, raised, checked. Works via the existing
   .is-selected hook the backend already toggles. */
.vote-coin.is-selected {
  color: #4a3a12; border-width: 2px;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.5);
  transform: translateY(-1px);
}
.vote-coin.is-selected[data-tier="3"] { background: radial-gradient(circle at 35% 30%, var(--pk-gold-lite), var(--pk-gold)); border-color: #A9842B; }
.vote-coin.is-selected[data-tier="2"] { background: radial-gradient(circle at 35% 30%, #EDEFF1, var(--pk-silver)); border-color: var(--pk-silver-deep); color: #33383d; }
.vote-coin.is-selected[data-tier="1"] { background: radial-gradient(circle at 35% 30%, #E2B98A, var(--pk-bronze)); border-color: var(--pk-bronze-deep); color: #4a2e12; }
.vote-coin.is-selected[data-tier="0"] { background: var(--pk-ink-soft); border-color: var(--pk-ink-soft); color: var(--pk-surface); box-shadow: var(--pk-shadow); }
.vote-coin.is-selected::after {
  content: "✓"; position: absolute; top: -5px; right: -5px;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--pk-fresh); color: #fff; font-family: var(--pk-font-body);
  font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--pk-surface);
}
.vote-coin[data-tier="0"].is-selected::after { display: none; }

/* 10. ── FRESHNESS / DECAY CUE (kept deliberately quiet) ─────────────────── */
.freshness { display: inline-flex; flex-direction: column; gap: .25rem; margin-left: auto; align-items: flex-end; }
.freshness-text { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--pk-ink-mute); }
.freshness-text::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--pk-fresh); }
.freshness[data-state="stale"] .freshness-text::before { background: var(--pk-stale); }
.freshness[data-state="decayed"] .freshness-text { color: var(--pk-decayed); }
.freshness[data-state="decayed"] .freshness-text::before { background: var(--pk-decayed); }
.freshness-bar { width: 74px; height: 3px; border-radius: 999px; background: var(--pk-line); overflow: hidden; }
/* width set inline per vote: style="width:62%" — the only legitimate inline style */
.freshness-bar > i { display: block; height: 100%; background: var(--pk-fresh); border-radius: inherit; }
.freshness[data-state="stale"] .freshness-bar > i { background: var(--pk-stale); }
.freshness[data-state="decayed"] .freshness-bar > i { background: var(--pk-decayed); }

/* 11. ── SUB-THREAD CARDS, NOTES, MEMBERS, EMPTY STATES ─────────────────── */
/* sub-thread = restyled fieldset/legend */
.subthread { border: 1px solid var(--pk-line); border-radius: var(--pk-r);
  background: var(--pk-surface); padding: .9rem 1.05rem 1rem; box-shadow: var(--pk-shadow); margin: 0; }
.subthread > legend, .subthread .subthread-head {
  box-sizing: border-box; display: flex; align-items: baseline; gap: .6rem;
  width: calc(100% + 2.1rem); margin: 0 -1.05rem .85rem; padding: .35rem 1.05rem .55rem;
  background: var(--pk-surface);
  border-bottom: 1px solid var(--pk-line);
  border-radius: var(--pk-r) var(--pk-r) 0 0;
}
.subthread-title { font-family: var(--pk-font-display); font-weight: 600; font-size: 1.05rem; flex: 1; }
.subthread-score { font-family: var(--pk-font-display); font-weight: 700; color: var(--pk-accent); }

/* notes log */
.pk-notes { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .45rem; }
.note { position: relative; background: var(--pk-surface-2); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r-sm); padding: .55rem .75rem; font-size: .95rem; }
.note .note-author { font-weight: 600; color: var(--pk-ink); }
.note .note-time { color: var(--pk-ink-mute); font-size: .8rem; margin-left: .35rem; }
.note-delete { position: absolute; top: .25rem; right: .3rem; margin: 0; }

/* members roster (no promotion — creator is the sole admin) */
.pk-members { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .4rem; }
.pk-member { display: flex; align-items: center; gap: .6rem;
  background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r-sm); padding: .55rem .8rem; }
.pk-member .pk-avatar {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--pk-accent-tint); color: var(--pk-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pk-font-display); font-weight: 700; font-size: .9rem;
}
.pk-member .pk-member-name { font-weight: 500; }
.pk-member .pk-email-dot { margin-left: auto; font-size: .78rem; color: var(--pk-ink-mute); display: inline-flex; align-items: center; gap: .35rem; }
.pk-member .pk-email-dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--pk-fresh); }
.pk-member .pk-email-dot.is-none::before { background: var(--pk-line-strong); }

/* empty states that teach */
.pk-empty { text-align: center; padding: 1.6rem 1rem; border: 1px dashed var(--pk-line-strong);
  border-radius: var(--pk-r); background: var(--pk-surface-2); color: var(--pk-ink-soft); }
.pk-empty b { font-family: var(--pk-font-display); display: block; font-size: 1.05rem; color: var(--pk-ink); margin-bottom: .2rem; }

/* 12. ── CONFIRM / NOTICE / UTILITY ─────────────────────────────────────── */
.error { background: var(--pk-danger-tint); border: 1px solid var(--pk-danger);
  color: var(--pk-ink); padding: .6rem .85rem; border-radius: var(--pk-r-sm); }
.notice-ok { background: color-mix(in srgb, var(--pk-fresh) 14%, var(--pk-surface));
  border: 1px solid var(--pk-fresh); padding: .6rem .85rem; border-radius: var(--pk-r-sm); }

/* focused card used by delete-confirm + dead-link pages */
.pk-card { background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r-lg); padding: 1.5rem; box-shadow: var(--pk-shadow-lg);
  max-width: 30rem; margin: 2.5rem auto; }
.pk-card.is-danger { border-top: 3px solid var(--pk-danger); }
.pk-card h1 { margin-top: 0; }

/* generic hero for landing */
.pk-hero { padding: 1.5rem 0 .5rem; }
.pk-hero h1 { font-size: clamp(2rem, 6vw, 3rem); max-width: 16ch; }
.pk-hero p.lead { font-size: 1.15rem; color: var(--pk-ink-soft); max-width: 46ch; }
.pk-cta { margin-top: 1.2rem; display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* small screens: stack the score under the title-less compact row nicely */
@media (max-width: 30rem) {
  body { font-size: 16px; }
  .pk-header .pk-group-name { max-width: 50vw; }
  .vote-coin { width: 48px; height: 48px; }
  .freshness { margin-left: 0; align-items: flex-start; width: 100%; margin-top: .5rem; }
}

/* 13. ── BUDGET BOARD (budget-vote model, 2026-06-30) ───────────────────────
   Threads + sub-threads share one point budget; each item carries a −/+ stepper.
   New, additive hooks (.pk-budget, .pk-board, .pk-thread, .pk-vote, .pk-subs …)
   keyed to the same parchment tokens as the rest of the sheet. */

/* the member's point budget, above the board */
.pk-budget {
  display: flex; align-items: center; gap: .8rem 1.1rem; flex-wrap: wrap;
  background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-left: 3px solid var(--pk-accent);
  border-radius: var(--pk-r); padding: .85rem 1.1rem;
  box-shadow: var(--pk-shadow); margin: 1.25rem 0;
}
.pk-budget-fig { display: inline-flex; align-items: baseline; gap: .4rem; flex: none; }
.pk-budget-fig b {
  font-family: var(--pk-font-display); font-weight: 700; font-size: 2rem;
  line-height: 1; color: var(--pk-accent);
}
.pk-budget-fig span { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-ink-mute); }
.pk-budget p { margin: 0; flex: 1 1 16rem; }

/* ranked board */
.pk-board { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; }
.pk-thread {
  background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r); box-shadow: var(--pk-shadow); overflow: hidden;
  transition: border-color .15s, box-shadow .18s ease;
}
.pk-thread:hover { border-color: var(--pk-line-strong); box-shadow: var(--pk-shadow-lg); }
.pk-thread-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; }

.pk-rank {
  font-family: var(--pk-font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--pk-ink-mute); min-width: 1.3rem; text-align: center; flex: none;
}
.pk-thread:first-child .pk-rank { color: var(--pk-gold-deep); }

.pk-thread-main { flex: 1; min-width: 0; }
.pk-thread-title { font-weight: 600; font-size: 1.05rem; color: var(--pk-ink); text-decoration: none; }
.pk-thread-title:hover { color: var(--pk-accent); }
.pk-thread-meta { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; color: var(--pk-ink-mute); font-size: .82rem; flex-wrap: wrap; }

.pk-thread-score { text-align: center; flex: none; min-width: 2.7rem; }
.pk-thread-score b { font-family: var(--pk-font-display); font-weight: 700; font-size: 1.45rem; color: var(--pk-accent); line-height: 1; display: block; }
.pk-thread-score span { font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-ink-mute); }

.pk-thread.is-empty { background: transparent; border-style: dashed; box-shadow: none; }
.pk-thread.is-empty .pk-thread-title { color: var(--pk-ink-soft); }
.pk-thread.is-empty .pk-thread-score b { color: var(--pk-line-strong); }

/* the −  N  + stepper (shared by threads + sub-threads) */
.pk-vote {
  display: inline-flex; align-items: center; gap: 0; margin: 0; flex: none;
  background: var(--pk-surface-2); border: 1px solid var(--pk-line-strong);
  border-radius: 999px; padding: 2px;
}
.pk-step {
  appearance: none; cursor: pointer; flex: none;
  width: 34px; height: 34px; min-height: 34px; padding: 0;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--pk-ink-soft); font-size: 1.25rem; font-weight: 600; line-height: 1;
  box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, transform .08s;
}
.pk-step:hover:not(:disabled) { background: var(--pk-surface); color: var(--pk-accent); }
.pk-step:active:not(:disabled) { transform: translateY(1px); }
.pk-step:disabled { opacity: .3; cursor: default; }
.pk-step--plus { color: var(--pk-accent); }
.pk-step-count {
  min-width: 1.6rem; text-align: center;
  font-family: var(--pk-font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--pk-ink-mute);
}
.pk-step-count[data-on="1"] { color: var(--pk-accent); }

/* expandable sub-thread list */
.pk-subs { border-top: 1px solid var(--pk-line); background: var(--pk-surface-2); }
.pk-subs > summary {
  cursor: pointer; list-style: none; padding: .5rem 1rem .5rem 3.15rem;
  font-size: .8rem; font-weight: 600; color: var(--pk-ink-mute);
  display: flex; align-items: center; gap: .35rem;
}
.pk-subs > summary::-webkit-details-marker { display: none; }
.pk-subs > summary::before { content: "›"; font-size: 1.1em; color: var(--pk-ink-mute); transition: transform .15s; }
.pk-subs[open] > summary::before { transform: rotate(90deg); }
.pk-subs > summary:hover { color: var(--pk-accent); }

.pk-sub-list { list-style: none; margin: 0; padding: 0 1rem 1rem 3.15rem; display: grid; gap: .4rem; }
.pk-sub {
  display: flex; align-items: center; gap: .75rem;
  background: var(--pk-surface); border: 1px solid var(--pk-line);
  border-radius: var(--pk-r-sm); padding: .55rem .7rem;
}
.pk-sub-main { flex: 1; min-width: 0; }
.pk-sub-title { font-weight: 600; font-size: .96rem; color: var(--pk-ink); text-decoration: none; }
.pk-sub-title:hover { color: var(--pk-accent); }
.pk-sub-meta { display: block; margin-top: .15rem; font-size: .78rem; color: var(--pk-ink-mute); }
.pk-sub-score {
  font-family: var(--pk-font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--pk-accent); flex: none; min-width: 1.5rem; text-align: center;
}

@media (max-width: 30rem) {
  .pk-thread-row { gap: .5rem; padding: .7rem; }
  .pk-rank { font-size: 1.1rem; min-width: 1rem; }
  .pk-subs > summary, .pk-sub-list { padding-left: 1.4rem; }
  .pk-step { width: 38px; height: 38px; }
}
