/* ============================================================================
   agentcensus — the ambassador transparency record

   Additions to document.css for /ambassador.html, which is not one piece of
   prose but a rendered log: a posture box, a counts grid, a list of actions,
   and a venue table (ADR-048 §5).

   A FILE rather than a <style> block, for document.css's reason and one more of
   its own: this page's whole claim is that it is generated from the log and
   never hand-edited, and a page that ships unstyled under `style-src 'self'`
   invites the reader to wonder what else about it was not thought through.

   No colour is defined here. tokens.css is the palette's single source
   (ADR-014), and a status pill is not a reason to start a second one.
   ========================================================================= */

.box {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 16px 18px;
  margin: 18px 0;
}

.box h3 {
  margin-top: 0;
}

.last {
  margin-bottom: 0;
}

.counts-note {
  font-size: 14px;
  color: var(--text-muted);
}

/* The posture box: the ladder level, and the sentence that does not move with
   it. Rendered as a definition list because that is what it is. */
.posture-level {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 650;
  color: var(--text-primary);
}

.posture-note {
  margin-bottom: 0;
}

/* Counts. Each tile is "<n> of <m>" or a bare count with its own label; the
   grid never renders a percentage, so there is no style for one. */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0 24px;
}

.count {
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 11px 13px;
  background: var(--surface-1);
}

.count-value {
  font-size: 21px;
  font-weight: 660;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.count-of {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.count-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 3px;
}

/* One action. The head line carries the identifiers, the body carries what was
   actually said, and the foot carries who approved it and what happened. */
.action {
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--surface-1);
}

.action-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.action-kind {
  font-weight: 650;
  color: var(--text-primary);
}

.action-when,
.action-id {
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: var(--mono);
  /* The same reason as `.action-meta` below. `.action-head` wraps its flex
     items, which puts a long id on a line of its own and not off the edge —
     unless the id is itself longer than the line, and an action id is a venue,
     a slug and a date joined by colons. */
  overflow-wrap: anywhere;
}

.action-body {
  white-space: pre-wrap;
  border-left: 2px solid var(--hairline);
  padding-left: 12px;
  margin: 10px 0;
  color: var(--text-primary);
}

/* `anywhere` and not `break-all`, so a value breaks only when it would
   otherwise leave the viewport. Every action card carries an approved-text
   digest, and `sha256:` plus 64 hex characters is one 71-character word with no
   break opportunity in it: measured at 568px inside a 375px viewport, overflowing
   the page by 251px. A permalink from a venue is the same shape and lands in
   `p.action-meta`, which is why this sits on the container rather than on the
   `dd` alone. It could not be seen until #1976 gave this page a render check with
   a record in it — the page had a gate, and the gate had been opening it with an
   empty log. */
.action-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.action-meta dt {
  display: inline;
  font-weight: 620;
}

.action-meta dd {
  display: inline;
  margin: 0 14px 0 4px;
}

.action-meta dt::after {
  content: ':';
}

/* Status. Three words, and the pill is a border rather than a fill because a
   green badge on "published" would be a value judgement about an action a
   reader is entitled to disagree with. */
.status {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--text-secondary);
}

.status-unsettled {
  border-style: dashed;
}

/* An absent fact, stated. A permalink we do not have is written out rather than
   left blank, because a blank invites the reader to assume there was nothing to
   show. */
.absent {
  font-style: italic;
  color: var(--text-muted);
}

.eligibility {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}

.eligibility li {
  font-size: 13.5px;
  margin-bottom: 4px;
}

.eligibility .mark {
  font-family: var(--mono);
  font-weight: 650;
  margin-right: 6px;
  color: var(--text-primary);
}

.section {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--text-muted);
  margin-right: 6px;
}

/* An outage. Deliberately not styled as "no actions yet": a record that failed
   to load and a record with nothing in it are opposite facts, and a page that
   renders them the same way is the failure #567 exists to prevent. */
.load-error {
  border: 1px dashed var(--hairline);
  border-radius: 11px;
  padding: 14px 16px;
  margin: 14px 0;
  color: var(--text-primary);
}