/* ======================================
   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: 1.2143rem;
  color: var(--text-primary);
}
.paramount-lord { font-size: var(--fs-small); color: var(--text-secondary); }
.paramount-stats {
  font-size: var(--fs-fine);
  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: var(--fs-text); }
.fin-total-when {
  font-size: var(--fs-fine);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fin-total-gold {
  color: var(--text-danger);
  font-size: 1.2143rem;
  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(--gild-faint);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--vellum-1), var(--vellum-2));
}
/* In a leaf, a line of the books is a ruled line. */
.panel-card .fin-row { border: 0; border-bottom: 1px dotted var(--gild-faint); border-radius: 0; background: none; padding: 0.55rem 0; margin: 0; }
.panel-card .fin-row:last-child { border-bottom: 0; }
.fin-row-name { grid-area: name; font-family: var(--font-serif); font-size: var(--fs-text); color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; }
.fin-row-detail { grid-area: detail; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small); 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: var(--fs-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-row-when { font-size: var(--fs-micro); 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 size 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` (chat.css) crops
   to fill it instead of squashing a face. */
/* THE FACE IN THE GILT ARCH (maggie, 2026-10-01: bigger, and in the same
   frame as the chat and the family tree - .chat-frame / .chat-face from
   chat.css). The card is a grid: the arch on the left beside the office's name
   and holder; the description and perks below them on the right on a wide
   card, and under the arch across the whole card on a phone, so the perk lines
   keep their width however big the face is. */
.court-office-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "face head" "face body";
  column-gap: 1rem;
}
.court-arch { grid-area: face; display: block; align-self: start; }
.court-arch .chat-frame { display: block; width: 104px; padding: 4px; border-radius: 52px 52px 5px 5px; }
.court-arch .chat-face { width: 96px; height: 128px; border-radius: 48px 48px 3px 3px; }
/* the crown's own card leads the page: a warm halo round its gilt */
.court-office.crown .court-arch .chat-frame {
  box-shadow: 0 0 0 2px var(--bg-void), 0 0 0 3px var(--accent-gold),
    0 0 18px color-mix(in srgb, var(--accent-gold) 45%, transparent);
}
.court-office-head { grid-area: head; min-width: 0; }
.court-office-body { grid-area: body; min-width: 0; }
.court-office-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 500;
  font-size: 1.3571rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.court-office.crown .court-office-name { color: var(--accent-gold); }
/* THE OFFICE CARD'S LINES (the manuscript look, 2026-09-30): who holds it, in
   the book face; what it is, in italic; what it may do, under a dotted rule.
   These were inline sizes of 0.62-0.72rem - 9 to 10px - in ui/court.js. */
.court-office-holder { font-family: var(--font-serif); font-size: 1.1429rem; color: var(--text-secondary); }
.court-office-holder strong { color: var(--text-primary); }
.court-office-tag { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--text-muted); }
.court-office-tag.is-player { font-style: normal; font-size: var(--fs-micro); letter-spacing: 0.05em; color: var(--accent-ember); }
.court-office-you { font-size: var(--fs-micro); color: var(--accent-gold); }
.court-office-desc { font-family: var(--font-serif); font-style: italic; font-size: 1.1429rem; line-height: 1.4; color: var(--text-secondary); margin-top: 0.35rem; }
.court-office-perks { font-family: var(--font-serif); font-size: 1.0714rem; line-height: 1.55; color: var(--text-secondary); border-top: 1px dotted var(--gild-faint); padding-top: 0.4rem; margin-top: 0.55rem; }
.court-office-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.court-hh-row { display: flex; gap: 0.4rem; align-items: center; justify-content: space-between; padding: 0.2rem 0; }
.court-hh-count { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-fine); color: var(--text-muted); margin: 0.15rem 0 0.35rem; }
.court-treasury { font-family: var(--font-serif); font-style: italic; font-size: 1.0714rem; color: var(--text-secondary); text-align: right; margin-bottom: 0.5rem; }
.court-resign { text-align: right; margin-bottom: 0.5rem; }
.court-sec-title { margin-top: 1.2rem; }
.court-nav { margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .court-office-name { font-size: 1.2143rem; }
}

/* PHONE: THE TEXT GOES UNDER THE FACE, NOT BESIDE IT (2026-10-01). The plate
   was shrunk to 42px on a phone because at 72px the perk lines beside it broke
   after three or four words (maggie, 2026-08-12). The arch is larger now, so
   instead of shrinking it the description and the perks leave its column and
   take the card's whole width; the name and the holder stay beside it. */
@media (max-width: 560px) {
  .court-office-row {
    grid-template-rows: auto auto;
    grid-template-areas: "face head" "body body";
    column-gap: 0.85rem;
  }
  .court-office-head { align-self: center; }
  .court-arch .chat-frame { width: 84px; padding: 3px; border-radius: 42px 42px 4px 4px; }
  .court-arch .chat-face { width: 78px; height: 104px; border-radius: 39px 39px 2px 2px; }
  .court-office-body { margin-top: 0.35rem; }
}

/* == 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;
}

/* THE OFFICES AS A GRID ON A WIDE PAGE (2026-10-01). One card per row left a
   1400px page with every office's text in its left third; the council and the
   household now take as many 28rem columns as fit, and stay one column on a
   phone or the default desktop page. */
.court-offices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.75rem;
}
.court-offices > .panel-card { margin-bottom: 0; }

/* == THE BOOK OF LAWS ======================================================
   The Court's Book of Laws view (ui/laws.js, 2026-10-03): the reader's own
   standing as a leaf of label/value pairs, then the Book as a manuscript list -
   each crime in the serif with a gilt rule under it and its sentence as chips.
   The same chips sit beside a charge on the Master of Laws' docket. */
.law-page { display: flex; flex-direction: column; gap: 0.9rem; }
.law-standing-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 0.45rem 1rem;
  margin: 0;
  font-size: var(--fs-small);
}
.law-standing-list dt { color: var(--text-muted); font-family: var(--font-display); font-variant: small-caps; letter-spacing: 0.05em; }
.law-standing-list dd { margin: 0; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.law-debt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-bottom: 0.25rem; }
.law-val, .law-flag { color: var(--accent-gold); font-weight: 600; }
.law-flag { color: var(--rubric); }
.law-reason { color: var(--text-secondary); }
.law-due, .law-none { color: var(--text-muted); }

.law-book {
  list-style: none;
  margin: 0;
  padding: 0.4rem 1rem;
  background: var(--leaf-framed);
  box-shadow: var(--leaf-framed-shadow);
  border: 1px solid var(--gild-faint);
  border-radius: var(--radius);
}
.law-entry { padding: 0.75rem 0 0.7rem; background: var(--gilt-rule); }
.law-entry:last-child { background: none; }
.law-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.8rem; }
.law-name {
  font-family: var(--font-display);
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--gild-ink);
}
.law-desc { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--text-secondary); margin-top: 0.2rem; }
.law-meta { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-micro); color: var(--text-muted); margin-top: 0.2rem; }
.law-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.law-chip {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--fs-micro);
  line-height: 1.3;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--gild);
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--bg-surface);
  white-space: nowrap;
}
.law-chip-cell { border-color: var(--text-danger); color: var(--text-danger); }
.law-chip-trial { border-color: var(--accent-violet); color: var(--accent-violet); }
.law-chip-lawful { border-color: var(--status-online); color: var(--status-online); }
.law-chip-none { border-color: var(--border-dim); color: var(--text-muted); }

.law-amend { margin-top: 0.4rem; font-size: var(--fs-small); }
.law-amend > summary { cursor: pointer; color: var(--accent-gold); width: max-content; min-height: var(--tap-min); display: flex; align-items: center; }
@media (pointer: fine) { .law-amend > summary { min-height: 0; } }
.law-amend-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; margin-top: 0.4rem; }
.law-amend-form label { display: flex; flex-direction: column; gap: 0.15rem; color: var(--text-muted); font-size: var(--fs-micro); }
.law-amend-form label.law-check { flex-direction: row; align-items: center; gap: 0.35rem; color: var(--text-primary); font-size: var(--fs-small); }
.law-amend-form input[type=number] {
  width: 6.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--gild-faint);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 0.3rem;
  font-size: var(--fs-small);
}
.law-docket { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; margin-top: 0.2rem; }
.law-docket .law-name { font-size: var(--fs-small); }

@media (max-width: 768px) {
  .law-standing-list { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .law-standing-list dd { margin-bottom: 0.4rem; }
  .law-book { padding: 0.3rem 0.75rem; }
}