/* ==========================================================================
   LIVE TABLE — the shared board. Parchment/ink vocabulary, token spacing,
   phone-first (players watch on 375px), zero inline styles (bar widths are
   the one documented CSS-custom-property exception). Reduced motion is handled
   globally by base.css (animation/transition none), so nothing here needs a
   local guard beyond avoiding motion-only affordances.
   ========================================================================== */

.live-wrap{
  max-width:var(--page-max);
  margin:0 auto;
  padding:var(--s4) var(--s3) var(--s7);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}


/* presence — a quiet ink dot that warms when the thread is live */
.live-presence{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:.95rem;
}
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--rule);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
  flex:0 0 auto;
}
.live-dot.is-on{
  background:var(--verdigris-hi);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--verdigris-hi) 30%, transparent);
}

/* reconnect banner — parchment, not alarm-red unless closed */
.live-conn{
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--ink-soft);
  padding:var(--s2) var(--s3);
  font-family:var(--font-scribal);
  font-style:italic;
  text-align:center;
}
.live-conn[data-state="closed"]{
  border-color:var(--rubric);
  color:var(--rubric);
}

/* ---------- the party board ---------- */
.live-section-title{
  font-family:var(--label-font);
  font-size:var(--label-size);
  letter-spacing:var(--label-track);
  font-weight:var(--label-weight);
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 var(--s2);
}

.live-party{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3);
}
@media (min-width:560px){ .live-party{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .live-party{grid-template-columns:repeat(3,1fr)} }

.live-card{
  position:relative;              /* hosts the dl-fx delta flourish */
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--panel);
  padding:var(--s3);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  min-width:0;
}
.live-card.is-low{border-color:color-mix(in srgb, var(--rubric) 55%, var(--rule))}
.live-card.is-down{
  border-color:var(--rubric);
  background:color-mix(in srgb, var(--rubric) 8%, var(--panel));
}

.live-card-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s2);
}
.live-seal{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--rubric-ink);
  background:radial-gradient(circle at 35% 30%, var(--seal-wax-hi), var(--seal-wax));
  box-shadow:var(--pip-glow);
  flex:0 0 auto;
}
.live-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.live-name{
  font-family:var(--font-display);
  color:var(--ink);
  font-size:1.02rem;
  line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.live-sub{color:var(--ink-faint)}
.live-hp-num{
  font-family:var(--font-body);
  color:var(--ink);
  text-align:right;
  white-space:nowrap;
}
.live-hp-num b{font-size:1.15rem}
.live-hp-num small{color:var(--ink-faint)}
.live-temp{color:var(--ward)}

/* the HP bar — crimson vitae + verdigris ward, widths set from JS */
.live-hp-bar{
  /* The card's HP bar IS the sheet's .hp-bar (sections.css) — one component,
     consolidated 2026-08-05 after the twins were caught DIVERGING (the token
     pass had updated only the sheet copy). Only the card-context override
     lives here: cards manage their own rhythm, so no bottom margin. */
  margin-bottom:0;
}

.live-card-foot{
  display:flex;
  align-items:center;
  gap:var(--s2);
  min-height:20px;
}
.live-ap-standard{color:var(--ink-faint)}
/* --gold-deep holds AA on parchment (~5.7:1) where --gold read faint (3.09:1),
   and stays strong on candlelight — it is the only Heroic Inspiration cue. */
.live-insp{color:var(--gold-deep);margin-left:auto;font-size:1.1rem;line-height:1}

/* AP pips — small gilded diamonds */
.live-pips{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
.live-pip{
  width:11px;height:11px;
  transform:rotate(45deg);
  border:1px solid var(--gold-deep);
  background:var(--panel-2);
  border-radius:2px;
}
.live-pip.is-full{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  box-shadow:var(--pip-glow);
}

/* condition + death chips */
.live-conds{display:flex;flex-wrap:wrap;gap:4px}
.live-cond{
  font-family:var(--label-font);
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rubric);
  border:1px solid color-mix(in srgb, var(--rubric) 40%, var(--rule-soft));
  background:color-mix(in srgb, var(--rubric) 8%, var(--panel-2));
  border-radius:999px;
  padding:2px var(--s2);
}
.live-death{font-family:var(--font-scribal);font-style:italic;color:var(--ink-soft);font-size:.9rem}
.live-death b{color:var(--ink)}
.live-death--stable{color:var(--verdigris)}
.live-death--dead{color:var(--rubric);font-weight:600;font-style:normal}

/* ---------- initiative / round / turn ---------- */
.live-combat-panel{
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--panel);
  padding:var(--s3);
  box-shadow:var(--shadow);
}

.live-round{
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule-soft);
  margin-bottom:var(--s2);
}
.live-round .label{color:var(--ink-faint)}
.live-round b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}

.live-init-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.live-init-row{
  display:grid;
  /* [turn mark][init][name + meta, all the room][AP over the steppers, right] */
  grid-template-columns:16px 38px minmax(0,1fr) auto;
  grid-auto-rows:auto;
  align-items:center;
  column-gap:var(--s2);
  row-gap:2px;
  padding:var(--s2) var(--s1);
  border-radius:8px;
}
.live-init-mark{grid-column:1;grid-row:1 / 3}
.live-init-roll{grid-column:2;grid-row:1 / 3}
.live-init-name{grid-column:3;grid-row:1;min-width:0}
.live-init-hp{grid-column:3;grid-row:2;justify-self:start}
/* pips above, steppers below, both hugging the right edge (Tim's sketch) */
.live-init-ap{
  grid-column:4;grid-row:1 / 3;justify-self:end;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.live-turn-of{margin-left:auto;font-family:var(--font-scribal);font-style:italic;color:var(--gold-deep)}
/* monster HP on the shared read board */
.live-init-hp{font-family:var(--font-body);color:var(--ink);white-space:nowrap;text-align:right}
.live-init-hp.is-empty{padding:0}
.live-init-hp b{font-size:1.05rem}
.live-init-hp small{color:var(--ink-faint)}
.live-init-hp.is-down b{color:var(--rubric)}
.live-init-ac{color:var(--ink-faint);font-size:.72rem;text-transform:uppercase}
.live-init-row.is-turn{
  background:color-mix(in srgb, var(--gold) 14%, var(--panel-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.live-init-row.is-monster .live-init-name{color:var(--ink-soft)}
/* The ❧ only ever renders on .is-turn, whose background is already a 14% gold
   wash — so gold-on-gold measured 2.46:1 in daylight. Every gold token fails on
   one of the two washes (--gold-deep 4.55 light but 4.26 dark; --ember 4.07
   light). --ink-soft clears both (5.41 / 5.90) and is the right idiom anyway:
   the row carries the gold, the mark is ink laid on it. */
.live-init-mark{color:var(--ink-soft);text-align:center;font-size:1rem}
.live-init-roll{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  text-align:center;
  border:1px solid var(--rule-soft);
  border-radius:6px;
  padding:2px 0;
  background:var(--panel-2);
}
.live-init-name{
  font-family:var(--font-body);
  color:var(--ink);
  min-width:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
}
.live-init-nametext{
  min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.live-init-kind{color:var(--rubric);text-transform:uppercase}
.live-init-ap{display:flex;align-items:center;gap:var(--s2)}
.live-ap-step{display:flex;gap:4px}
.live-apbtn{
  /* --field-compact (36px) is reserved by tokens.css for dense DESKTOP TABLES
     (the weapons grid at >=760px) and nothing else. This is a combat stepper the
     DM jabs at mid-turn, so it takes the full --field 44. The row is already
     min-height:var(--field), so this costs no vertical space; the extra 16px of
     width is absorbed by the 1fr name column, which already ellipsises. */
  width:var(--field);height:var(--field);
  min-width:var(--field);
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.live-apbtn:hover{background:var(--panel)}
.live-apbtn:active{transform:translateY(1px)}

/* comfortable phone tap targets */
@media (max-width:520px){
  .live-init-row{grid-template-columns:20px 30px 1fr auto}
  /* .live-apbtn used to be widened to 44 only here; it is 44 at every width
     now, so the phone override that used to live on this line is redundant. */
}

/* ==========================================================================
   THE DICE LOG (Feature 4) — who rolled what, streamed to every seat. Newest
   first; a nat-20 gilds, a nat-1 smudges, reusing the table's ink vocabulary.
   ========================================================================== */
.live-rolllog-panel{margin-top:var(--s5)}
.live-rolllog{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s1);
}
.live-roll{
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
  padding:var(--s2) var(--s3);
  border:1px solid var(--rule-soft);
  border-radius:6px;
  background:var(--panel-2);
}
.live-roll .live-seal{width:30px;height:30px;font-size:.82rem}
.live-roll-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.live-roll-head{display:flex;align-items:baseline;gap:var(--s2);min-width:0;flex-wrap:wrap}
.live-roll-who{
  font:600 .82rem/1.2 var(--font-display);
  color:var(--ink);
  white-space:nowrap;
}
.live-roll-label{
  font:500 .82rem/1.2 var(--font-body);
  color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.live-roll-mode{
  flex:none;
  font:600 .58rem/1 var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:999px;
  color:var(--on-gold);
  background:var(--gold-btn-a);
}
.live-roll-mode--dis{color:var(--on-danger);background:var(--danger-a)}
.live-roll-detail{
  font:500 .74rem/1.2 var(--font-scribal);
  font-style:italic;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-roll-total{
  flex:none;
  min-width:2.4rem;
  text-align:center;
  font:700 1.1rem/1 var(--font-display);
  color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.live-roll.is-nat20{
  border-color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold-hi) 16%, var(--panel-2));
}
.live-roll.is-nat20 .live-roll-total{color:var(--ember)}
.live-roll.is-nat1{
  border-color:var(--rubric-deep);
  background:color-mix(in srgb, var(--rubric) 12%, var(--panel-2));
}
.live-roll.is-nat1 .live-roll-total{color:var(--rubric)}

@media (max-width:520px){
  .live-roll{grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s2)}
  .live-roll .live-seal{width:26px;height:26px;font-size:.72rem}
}

/* ==========================================================================
   THE UNIFIED TABLE LIST (Tim, 2026-08-05): every being on the board, one
   card each — initiative-ordered in a fight, foes marked by the rubric left
   border, AP pips with the small steppers at either END of the pip row.
   ========================================================================== */
.tp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.tp-row{
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--panel-2);
  padding:var(--s2) var(--s3);
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:var(--s2);
  row-gap:4px;
  align-items:start;
}
.tp-row.is-foe{border-left:3px solid var(--rubric)}
.tp-row.is-turn{box-shadow:inset 0 0 0 1px var(--gold);background:color-mix(in srgb, var(--gold-hi) 12%, var(--panel-2))}
.tp-row.is-unseated{opacity:.66}
/* the left rail: equal 34px squares, top to bottom — init, foe d20, remove */
.tp-rail{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.tp-init{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  font-family:var(--font-display);
  font-weight:700;
}
.tp-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.tp-head{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
.tp-name{font-family:var(--font-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-next{color:var(--gold-deep);font-family:var(--font-scribal);font-style:italic;font-size:var(--fs-label)}
.tp-hpnum{margin-left:auto;font-family:var(--font-display);font-weight:700;white-space:nowrap}
.tp-hpnum small{font-weight:400;color:var(--ink-faint)}
.tp-ap{display:flex;align-items:center;gap:var(--s2)}
.tp-ap .live-ap-pips,.tp-ap .dm-ap-pips{flex:1;display:flex;justify-content:center}
.tp-apbtn{
  flex:none;
  width:26px;height:26px;min-height:26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  font-size:15px;line-height:1;
}
.tp-dm{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.table-panel .dm-cbt-vitals{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
#dm-runbar .dm-runbar{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
#dm-runbar .btn-ink,#dm-runbar .btn-quiet{min-height:32px;padding-inline:var(--s2);font-size:var(--fs-micro)}

/* card v2 (Tim): editable init badge; d20 and remove live in the rail, never
   over the card's content */
.tp-init--edit{width:34px;height:34px;padding:0;background:none;border:0}
.tp-init-input{
  width:34px;height:34px;
  text-align:center;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  appearance:textfield;
  -moz-appearance:textfield;
  padding:0;
}
/* the native spinners covered the number in a 34px square (Tim, pass 7) —
   click, type, done; the arrows earn no place here */
.tp-init-input::-webkit-inner-spin-button,
.tp-init-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.tp-ac{color:var(--ink-faint);white-space:nowrap}
.tp-roll{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  color:var(--gold-deep);
}
.tp-roll .tool-ic{width:17px;height:17px}
.tp-rail .dm-remove{
  width:34px;height:34px;min-width:34px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--panel);
  color:var(--rubric);
  font-size:var(--fs-small);
}
.tp-row[data-dm-id]{cursor:pointer}
.tp-row .dm-cbt-vitals,.tp-row .tp-ap{cursor:default}
/* runbar rows */
#dm-runbar .dm-runbar{display:flex;flex-direction:column;gap:var(--s1)}
#dm-runbar .runrow{display:flex;align-items:center;gap:var(--s1);flex-wrap:nowrap}
#dm-runbar .runrow--whose{min-height:20px}
#dm-runbar .dm-whose{font-family:var(--font-scribal);font-style:italic;text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dm-runbar .dm-round{margin-left:auto;white-space:nowrap}