/* ======================================
   THE COURT

   Sections (the hall, petitions, the great lords, the war council, the
   Crown's books) are chosen from the shared centered underline tabs
   (.sec-tabs, controls.css) since 2026-08-11 - this nav was deliberately
   built on the market's banner cards, and followed them when they became
   tabs in the owner's visual overhaul. Each section's one-line description
   is drawn under the bar by court.js.
   ====================================== */

/* -- One row per paramount seat ---------------------------------------- */
.paramount-row {
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.paramount-row.vacant { opacity: 0.6; }
.paramount-row.noticed { border-color: var(--accent-ember); }

.paramount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  background: var(--bg-surface);
}
@media (hover: hover) { .paramount-head:hover { background: var(--bg-panel); } }

.paramount-house {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.paramount-lord { font-size: 0.7rem; color: var(--text-secondary); }
.paramount-stats {
  font-size: 0.66rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.paramount-body {
  padding: 0.6rem 0.65rem;
  border-top: 1px solid var(--border-dim);
}

/* The writs. Each one is a button with its price list under it: what the Crown
   asks, and what each answer actually puts in the treasury (2026-07-26). A row
   of bare verbs fitted on one line; a row of explained choices does not, so this
   is a column of blocks rather than a wrap of buttons. */
.demand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.demand-choice {
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 0.35rem 0.4rem;
}
.demand-grid .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.demand-choice:has(.btn:disabled) { opacity: 0.55; }

/* THE BILL'S TOTAL, set apart from the lines it sums (2026-07-30). As a fourth
   row in the same stack it read as a fourth thing the Crown owed; a rule above
   it and a heavier figure make it the answer rather than another item. */
.fin-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-top: 2px solid var(--border-dim);
  background: var(--bg-raised, rgba(0, 0, 0, 0.05));
  border-radius: 0 0 4px 4px;
}
.fin-total-label { font-weight: 600; font-size: 0.86rem; }
.fin-total-when {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fin-total-gold {
  color: var(--text-danger);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tabular figures so a ticking clock does not jitter its own row. */
.fin-cd { font-variant-numeric: tabular-nums; }

/* A LINE OF THE BOOKS (2026-09-23). Wide: the name and its detail on the left,
   the figure and its clock stacked on the right. Narrow: one column - name,
   detail, then the figure and its clock on a line of their own - so nothing is
   cut short and no column is squeezed to a word. */
.fin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name sum" "detail sum";
  column-gap: 0.8rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.fin-row-name { grid-area: name; font-size: 0.84rem; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; }
.fin-row-detail { grid-area: detail; font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }
.fin-row-sum { grid-area: sum; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; text-align: right; }
.fin-row-gold { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-row-when { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .fin-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "detail" "sum"; }
  .fin-row-sum { flex-direction: row; align-items: baseline; justify-content: space-between; margin-top: 0.25rem; }
}

/* ======================================================================
    THE COUNCIL, WITH FACES (maggie, 2026-08-12)
   ======================================================================
   "Can we have their portraits on the left side, side to side with their
   position and what they do?" So each office card is two columns: the holder's
   picture, and everything about the office beside it.

   The picture is a FIXED plate rather than a floated image - every card in the
   column is the same width whatever shape the uploaded portrait is, so the text
   edges line up down the whole council. `object-fit: cover` crops to fill it
   instead of squashing a face. */
.court-office-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.court-face {
  width: 72px;
  height: 90px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;   /* a portrait is a face, not a torso */
  border-radius: 4px;
  border: 1px solid var(--border-dim);
  background: var(--bg-surface);
  display: block;
}
/* The crown's own card leads the page - its holder's plate is bordered gold to
   match the card, so the eye lands there first. */
.court-office.crown .court-face { border-color: var(--accent-gold); }
.court-office-text { flex: 1; min-width: 0; }
.court-office-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* PHONE: A SMALLER PLATE (maggie, 2026-08-12, "this field is a bit too big on
   the phone"). The breakpoint was 560px and phones sit above it - the app's own
   mobile layout starts at 768px, so the plate follows the same line rather than
   one of its own, and shrinks again on a genuinely narrow screen. The perk list
   beside it is the reason: at 72px wide the lines were breaking after three or
   four words. */
@media (max-width: 768px) {
  .court-face { width: 52px; height: 66px; }
  .court-office-row { gap: 0.55rem; }
}
@media (max-width: 420px) {
  .court-face { width: 42px; height: 54px; }
}

/* == HOW MUCH OF THE REALM HAS ANSWERED ====================================
   The muster card's share bar: the shared .bar-track.thin / .bar-fill filled to
   what has marched, with a mark on the track at the share this enemy demands.
   The mark is the point of it - a fill with no bar to clear says nothing. */
.muster-share { position: relative; }
.muster-share-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--text-danger);
  border-radius: 1px;
}