/* cards.css — the card surface (RFC 040): the cards a tenant has issued,
   one card's statement, and the form that issues one.

   Card-shaped because "bounded authority you hand someone" is a model
   people already carry. Not styled as a payment card: what it bounds is
   an action in a state, and the quantity it counts is not necessarily
   money.

   It absorbed limits.css when the Limits page folded into this surface.
   Everything below the divider is a class the issuance form references
   and dashboard.css does not define; a test asserts that
   correspondence, because a governance surface whose warnings render as
   ordinary text is worse than no surface. */

.ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0 2rem;
}

.ac-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--dash-border, #e4e0d9);
  border-left: 3px solid var(--dash-border, #e4e0d9);
  border-radius: 10px;
  background: var(--dash-surface, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 34px -22px rgba(0, 0, 0, 0.4);
}

.ac-card-ok   { border-left-color: #2f8f5b; }
.ac-card-warn { border-left-color: #c98a2e; }
.ac-card-off  { border-left-color: #b4aea4; opacity: 0.82; }

.ac-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ac-card-kind {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
}

.ac-status {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.ac-status-ok   { color: #2f8f5b; }
.ac-status-warn { color: #c98a2e; }
.ac-status-off  { color: #8a8378; }

.ac-holder {
  font-family: var(--dash-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.16rem;
  color: var(--dash-ink, #1c1a17);
}

.ac-scope {
  margin-top: -0.3rem;
  font-size: 0.8rem;
  color: var(--dash-muted, #8a8378);
}

.ac-rows {
  display: grid;
  gap: 0.42rem;
  margin: 0.75rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--dash-border, #e4e0d9);
}

.ac-row {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0;
}

.ac-row dt {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
}

.ac-row dd { margin: 0; font-size: 0.92rem; color: var(--dash-ink, #1c1a17); }
.ac-row dd code { font-size: 0.82rem; }
.ac-strong { font-size: 1.04rem; }
.ac-strong span { font-size: 0.78rem; color: var(--dash-muted, #8a8378); }

/* The meter is the part that makes a ceiling feel spent rather than
   configured. */
.ac-meter { margin-top: 0.85rem; display: grid; gap: 0.45rem; }

.ac-meter-track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--dash-rail, #efece6);
  overflow: hidden;
}

.ac-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f8f5b, #c98a2e);
}

.ac-meter-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--dash-muted, #8a8378);
}
.ac-meter-figures strong { color: var(--dash-ink, #1c1a17); }
.ac-reset { margin-left: auto; }

/* Which limit this meter is for. Only rendered when a card carries more
   than one, where two unlabelled bars would be unreadable. */
.ac-meter-q {
  flex-basis: 100%;
  color: var(--dash-muted, #8a8378);
}
.ac-meter-q code { font-size: 0.78rem; }

.ac-unknown {
  margin: 0.8rem 0 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: #9a5b3d;
}

.ac-card-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--dash-border, #e4e0d9);
}
.ac-card-foot form { margin: 0; }

.ac-empty { display: grid; gap: 0.8rem; justify-items: start; }

/* The statement. Deliberately ledger-shaped. */
.ac-statement {
  margin-top: 1.5rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--dash-border, #e4e0d9);
  border-radius: 10px;
  background: var(--dash-surface, #fff);
}

.ac-statement-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ac-statement-holder {
  font-family: var(--dash-mono, ui-monospace, monospace);
  font-size: 0.9rem;
  color: var(--dash-muted, #8a8378);
}

.ac-statement-limits { display: grid; gap: 0.6rem; margin-bottom: 1.2rem; }

.ac-statement-limit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: var(--dash-rail, #f7f5f1);
}

.ac-sl-q { font-size: 0.85rem; color: var(--dash-muted, #8a8378); }
.ac-sl-fig { font-size: 0.85rem; color: var(--dash-muted, #8a8378); }
.ac-sl-fig strong { color: var(--dash-ink, #1c1a17); font-size: 0.98rem; }
.ac-sl-unknown { font-size: 0.85rem; color: #9a5b3d; }

.ac-ledger { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ac-ledger th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--dash-border, #e4e0d9);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
  font-weight: 600;
}
.ac-ledger td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--dash-rail, #f2efe9);
}
.ac-num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-allowed { color: #2f8f5b; }
.ac-note { margin-top: 1rem; font-size: 0.82rem; }

@media (max-width: 640px) {
  .ac-row { grid-template-columns: 1fr; gap: 0.1rem; }
  .ac-statement { padding: 1.1rem 1rem; }
}

/* Meter fill in 5% steps. See fillClass: templ sanitises inline
   styles, and this keeps the stylesheet the one place that decides
   how the bar looks. */
.ac-fill-0 { width: 0%; }
.ac-fill-5 { width: 5%; }
.ac-fill-10 { width: 10%; }
.ac-fill-15 { width: 15%; }
.ac-fill-20 { width: 20%; }
.ac-fill-25 { width: 25%; }
.ac-fill-30 { width: 30%; }
.ac-fill-35 { width: 35%; }
.ac-fill-40 { width: 40%; }
.ac-fill-45 { width: 45%; }
.ac-fill-50 { width: 50%; }
.ac-fill-55 { width: 55%; }
.ac-fill-60 { width: 60%; }
.ac-fill-65 { width: 65%; }
.ac-fill-70 { width: 70%; }
.ac-fill-75 { width: 75%; }
.ac-fill-80 { width: 80%; }
.ac-fill-85 { width: 85%; }
.ac-fill-90 { width: 90%; }
.ac-fill-95 { width: 95%; }
.ac-fill-100 { width: 100%; }

/* "authorized" beside every movement. Quiet, but never absent: the
   distinction between what KIFF authorized and what the customer's
   system actually ran is the one claim this ledger must not blur. */
.ac-effect {
  margin-left: 0.45rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--dash-line, #e7e2d9);
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
  vertical-align: 0.1em;
}

/* The proposal id is the reference someone reconciles against, not the
   name of the movement, so it reads as fine print. */
.ac-ref {
  font-size: 0.74rem;
  color: var(--dash-muted, #8a8378);
}

/* What the card used to be, under the movements that spent it. Set
   apart from the ledger: one is the balance moving, the other is
   somebody deciding. */
.ac-history {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--dash-line, #e7e2d9);
}
.ac-history-head {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
}

/* ---- absorbed from limits.css: the issuance form ---- */

/* A warning on this page carries the whole point: it is how "we could not read
   the usage" is kept from being read as "nothing has been used". It has
   to look unlike an ordinary note. */
.dash-note-warn {
  color: var(--warn-fg, #8a5300);
  border-left: 3px solid var(--warn-border, #e0a33e);
  padding-left: 0.75rem;
  margin-block: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .dash-note-warn {
    color: var(--warn-fg-dark, #f0c675);
  }
}

.dash-empty {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 1.75rem;
  max-width: 46rem;
}

.dash-empty > p {
  margin-block: 0 0.75rem;
}

.dash-empty > p:last-child {
  margin-bottom: 0;
}

/* The list of mandates beside the statement for the selected one. It
   collapses to one column early: the statement is the page, and a
   cramped two-column read of it is worse than scrolling past a list. */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.dash-grid > aside .dash-list a {
  text-decoration: none;
}

/* The subject and the button that ends its authority, on one line. */
.dash-statement-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dash-statement-head > .eyebrow {
  margin: 0;
}

/* The issue form. Fieldsets carry the four questions a limit answers,
   in the order a person says them. */
.dash-form {
  max-width: 46rem;
  display: grid;
  gap: 1.25rem;
}

.dash-form fieldset.dash-card {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  display: grid;
  gap: 0.6rem;
}

.dash-form legend {
  padding-inline: 0.4rem;
}

.dash-form input[type="text"],
.dash-form input[type="number"],
.dash-form input:not([type]),
.dash-form select {
  width: 100%;
  max-width: 28rem;
}

/* A checkbox or radio and its label on one line, with the label's own
   second line hanging under the text rather than under the box. */
.dash-check {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  cursor: pointer;
}

.dash-check input {
  margin-top: 0.2rem;
}

.dash-check .dash-note {
  display: block;
  margin-top: 0.1rem;
}

.dash-form-actions {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

/* Per-action state narrowing on the issuance form. The states sit under
   the action they belong to and are indented, because "only when the
   order is PAID" is a property of that grant and not another field on
   the card. */
.dash-action-grant {
  padding-block: 0.35rem;
}
.dash-action-grant + .dash-action-grant {
  border-top: 1px solid var(--dash-line, #e7e2d9);
}

.dash-states {
  margin: 0.25rem 0 0.6rem 1.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dash-line, #e7e2d9);
  border-radius: 6px;
}
.dash-states legend {
  padding-inline: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dash-muted, #8a8378);
}
.dash-states .dash-hint {
  margin-top: 0.4rem;
}

.dash-check-sm {
  font-size: 0.86rem;
}

/* The holder filter. Same job as the actor banner on Activity: a
   filtered list and a tenant with no cards look alike, and only one of
   them means "nothing has been issued". */
.ac-holder-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--dash-line, #e7e2d9);
  border-left: 3px solid var(--accent, #9a5b3d);
  border-radius: 6px;
  font-size: 0.87rem;
}

/* One subtotal per limit. Stacked, each naming its window: a card can
   cap the same quantity hourly and daily at once, and a bare number
   would be one of them without saying which. */
.ac-subtotal {
  display: block;
  white-space: nowrap;
}
.ac-subtotal-w {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  color: var(--dash-muted, #8a8378);
}