/* 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. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* One agent and the cards it holds. */
.ac-agent + .ac-agent { padding-top: 1.2rem; border-top: 1px solid var(--rule, #e7e2d9); }
.ac-agent .ac-grid { margin-top: .9rem; }
.ac-agent-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; min-width: 0; }
.ac-agent-head h2 { margin: 0; font-family: var(--dash-mono, monospace); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.ac-agent-count { color: var(--fg-muted, #766f65); font-size: .85rem; }
.ac-agent-head a { margin-left: auto; font-size: .88rem; }

.ac-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--rule, #e4e0d9);
  border-left: 3px solid var(--rule, #e4e0d9);
  border-radius: 10px;
  background: var(--bg-elev, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 34px -22px rgba(0, 0, 0, 0.4);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  max-width: 38rem;
  min-width: 0;
}
.ac-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -25px rgba(0,0,0,.48); }
.ac-card.ac-metal-card-refund,.ac-card.ac-metal-card-orders,.ac-card.ac-metal-card-credits { aspect-ratio:1.35/1; padding:2.6rem 4rem 3.1rem; overflow:hidden; background-color:transparent; background-position:center; background-size:112% 112%; color:#f8f5ef; border:0; box-shadow:none; }
.ac-card.ac-metal-card-refund { background-image:url('/static/img/cards/kiff-card-refund.webp?v=20260920-1'); }
.ac-card.ac-metal-card-orders { background-image:url('/static/img/cards/kiff-card-orders.webp?v=20260920-1'); }
.ac-card.ac-metal-card-credits { background-image:url('/static/img/cards/kiff-card-credits.webp?v=20260920-1'); }
.ac-card.ac-metal-card-refund .ac-holder,.ac-card.ac-metal-card-orders .ac-holder,.ac-card.ac-metal-card-credits .ac-holder,
.ac-card.ac-metal-card-refund .ac-row dd,.ac-card.ac-metal-card-orders .ac-row dd,.ac-card.ac-metal-card-credits .ac-row dd,
.ac-card.ac-metal-card-refund .ac-meter-figures strong,.ac-card.ac-metal-card-orders .ac-meter-figures strong,.ac-card.ac-metal-card-credits .ac-meter-figures strong { color:#f8f5ef; }
.ac-card.ac-metal-card-refund .ac-card-kind,.ac-card.ac-metal-card-orders .ac-card-kind,.ac-card.ac-metal-card-credits .ac-card-kind,
.ac-card.ac-metal-card-refund .ac-scope,.ac-card.ac-metal-card-orders .ac-scope,.ac-card.ac-metal-card-credits .ac-scope,
.ac-card.ac-metal-card-refund .ac-row dt,.ac-card.ac-metal-card-orders .ac-row dt,.ac-card.ac-metal-card-credits .ac-row dt,
.ac-card.ac-metal-card-refund .ac-strong span,.ac-card.ac-metal-card-orders .ac-strong span,.ac-card.ac-metal-card-credits .ac-strong span,
.ac-card.ac-metal-card-refund .ac-meter-figures,.ac-card.ac-metal-card-orders .ac-meter-figures,.ac-card.ac-metal-card-credits .ac-meter-figures { color:rgba(248,245,239,.58); }
.ac-card.ac-metal-card-refund .ac-rows,.ac-card.ac-metal-card-orders .ac-rows,.ac-card.ac-metal-card-credits .ac-rows,
.ac-card.ac-metal-card-refund .ac-card-foot,.ac-card.ac-metal-card-orders .ac-card-foot,.ac-card.ac-metal-card-credits .ac-card-foot { border-color:rgba(248,245,239,.13); }
.ac-card.ac-metal-card-refund .ac-card-foot,.ac-card.ac-metal-card-orders .ac-card-foot,.ac-card.ac-metal-card-credits .ac-card-foot { color:rgba(248,245,239,.72); }

@media (min-width: 1200px) {
  .ac-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .ac-card.ac-metal-card-refund,
  .ac-card.ac-metal-card-orders,
  .ac-card.ac-metal-card-credits {
    aspect-ratio: auto;
    min-height: 25rem;
    padding: 2.15rem clamp(2.25rem, 3vw, 3.2rem) 2.65rem;
  }
  .ac-card .ac-holder { font-size: clamp(.82rem, 1.05vw, 1.02rem); line-height:1.25; overflow-wrap:anywhere; }
  .ac-card .ac-rows { margin-top: .5rem; padding-top: .65rem; }
  .ac-card .ac-row { grid-template-columns:4.2rem minmax(0,1fr); gap:.6rem; }
  .ac-card .ac-row dd { font-size:.82rem; }
  .ac-card .ac-strong span { font-size:.69rem; }
  .ac-card .ac-meter { margin-top: .55rem; }
}

.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(--fg-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(--fg, #1c1a17);
}

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

.ac-rows {
  display: grid;
  gap: 0.42rem;
  margin: 0.75rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule, #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(--fg-muted, #8a8378);
}

.ac-row dd { margin: 0; font-size: 0.92rem; color: var(--fg, #1c1a17); }
.ac-row dd code { font-size: 0.82rem; }
.ac-strong { font-size: 1.04rem; }
.ac-strong span { font-size: 0.78rem; color: var(--fg-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(--rule-soft, #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(--fg-muted, #8a8378);
}
.ac-meter-figures strong { color: var(--fg, #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(--fg-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(--rule, #e4e0d9);
}
.ac-card-foot form { margin: 0; }
.ac-card-foot { justify-content: space-between; color: var(--fg-muted, #8a8378); font-size: .82rem; }

.ac-inventory-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--rule,#e7e2d9); margin:1.25rem 0 1.75rem; }
.ac-status-tabs,.ac-view-toggle { display:flex; align-items:center; gap:.25rem; }
.ac-inventory-bar a { padding:.7rem .8rem; color:var(--fg-muted,#766f65); text-decoration:none; font-size:.84rem; border-bottom:2px solid transparent; }
.ac-inventory-bar a.is-current { color:var(--fg,#181713); border-bottom-color:var(--accent,#d97706); }
.ac-view-toggle a { border:1px solid transparent; border-bottom-width:1px; border-radius:6px; padding:.38rem .65rem; }
.ac-view-toggle a.is-current { background:var(--rule-soft,#f2efe9); border-color:var(--rule,#e7e2d9); }

.ac-list { border-top:1px solid var(--rule,#e7e2d9); }
.ac-list-row { display:grid; grid-template-columns:1rem minmax(12rem,1.5fr) minmax(9rem,1fr) minmax(10rem,1fr) auto; gap:1rem; align-items:center; padding:1.05rem .55rem; border-bottom:1px solid var(--rule,#e7e2d9); color:inherit; text-decoration:none; }
.ac-list-row:hover { background:rgba(217,119,6,.035); }
.ac-list-row > span { min-width:0; }
.ac-list-row strong,.ac-list-row small { display:block; }
.ac-list-row small { color:var(--fg-muted,#8a8378); font-size:.72rem; }
.ac-list-row .ac-status { justify-self:end; }
.ac-list-mark { width:.58rem; height:1.65rem; border-radius:2px; background:linear-gradient(160deg,#26282c,#9b958d 48%,#1a1b1e); box-shadow:inset -1px 0 #d97706; }

.ac-detail-page { max-width:78rem; margin-inline:auto; min-width:0; overflow-x:hidden; }
/* Spacing between these direct children of .dash already comes from
   .dash's flex `gap` (#620). Margins/padding here used to stack on top
   of that gap instead of replacing it, roughly doubling the vertical
   distance and pushing the card below the fold on a laptop viewport. */
.ac-back { display:inline-block; color:var(--fg-muted,#766f65); text-decoration:none; }
.ac-detail-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; }
.ac-detail-head > div { min-width:0; }
.ac-detail-head h1 { margin:.25rem 0 0; font-size:clamp(1.22rem,1.8vw,1.65rem); line-height:1.25; letter-spacing:-.02em; overflow-wrap:anywhere; }
.ac-detail-head p { margin:0; color:var(--fg-muted,#8a8378); font-family:var(--dash-mono,monospace); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.ac-detail-head .ac-status { padding:.35rem .65rem; border-radius:999px; background:color-mix(in oklab,var(--ok,#2f9b5d) 14%,transparent); }
.ac-detail-head .ac-status-warn { background:color-mix(in oklab,#c98a2e 14%,transparent); }
.ac-detail-head .ac-status-off  { background:color-mix(in oklab,#8a8378 14%,transparent); }
.ac-detail-tabs { display:flex; gap:1.75rem; border-bottom:1px solid var(--rule,#e7e2d9); }
.ac-detail-tabs a { padding:.8rem .05rem; border-bottom:2px solid transparent; color:var(--fg-muted,#766f65); text-decoration:none; }
.ac-detail-tabs a.is-current { color:var(--fg,#181713); border-bottom-color:#e77b0b; }
.ac-overview { display:grid; grid-template-columns:minmax(22rem,1.25fr) minmax(19rem,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; min-width:0; }

.ac-metal-card { position:relative; box-sizing:border-box; display:grid; grid-template-rows:auto minmax(2.8rem,1fr) auto auto auto; row-gap:.35rem; aspect-ratio:1.58/1; width:100%; min-width:0; max-width:39rem; padding-block:clamp(2rem,4vw,3.2rem); padding-inline:clamp(2.8rem,6vw,4.5rem); overflow:hidden; color:#f8f5ef; background-position:center; background-size:112% 112%; filter:drop-shadow(0 24px 28px rgba(22,20,17,.20)); container-type:inline-size; }
.ac-metal-card-refund { background-image:url('/static/img/cards/kiff-card-refund.webp?v=20260920-1'); }
.ac-metal-card-orders { background-image:url('/static/img/cards/kiff-card-orders.webp?v=20260920-1'); }
.ac-metal-card-credits { background-image:url('/static/img/cards/kiff-card-credits.webp?v=20260920-1'); }
.ac-metal-brand { display:flex; gap:.55rem; align-items:center; font-size:1.25rem; }
.ac-metal-brand img { width:1.8rem; height:1.8rem; object-fit:contain; }
.ac-metal-holder { align-self:center; min-width:0; max-width:100%; font-family:var(--dash-mono,monospace); font-size:clamp(.82rem,3.4cqw,1.35rem); line-height:1.18; overflow-wrap:anywhere; }
.ac-metal-label { color:rgba(248,245,239,.55); text-transform:uppercase; letter-spacing:.08em; font-size:.65rem; }
.ac-metal-action { margin-top:.3rem; font-family:var(--dash-mono,monospace); font-size:.92rem; }
.ac-metal-values { display:flex; flex-wrap:wrap; gap:clamp(1.4rem,7cqw,3rem); margin-top:.7rem; min-width:0; }
.ac-metal-values span,.ac-metal-values small { display:block; }
.ac-metal-values strong { font-size:clamp(1.1rem,2.3vw,1.55rem); font-weight:500; }
.ac-metal-values small { margin-top:.18rem; color:rgba(248,245,239,.55); font-size:.65rem; text-transform:uppercase; }

.ac-facts { display:grid; gap:0; min-width:0; }
.ac-facts section { padding:0 0 1.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--rule,#e7e2d9); }
.ac-facts h2,.ac-tab-page h2 { margin:0 0 .8rem; font-size:1.05rem; }
.ac-facts dl { display:grid; gap:.55rem; margin:0; }
.ac-facts dl div { display:grid; grid-template-columns:minmax(6rem,.8fr) minmax(0,1.3fr); gap:1rem; }
.ac-facts dt { color:var(--fg-muted,#8a8378); }
.ac-facts dd { margin:0; overflow-wrap:anywhere; }
.ac-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.ac-actions form { margin:0; }

.ac-tab-page { padding-top:2rem; max-width:62rem; }
.ac-tab-page > header { margin-bottom:1.4rem; }
.ac-tab-page > header p { margin:.3rem 0 0; color:var(--fg-muted,#8a8378); }
.ac-mobile-ledger { border-top:1px solid var(--rule,#e7e2d9); }
.ac-mobile-ledger article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem 1rem; padding:1.1rem .1rem; border-bottom:1px solid var(--rule,#e7e2d9); }
.ac-mobile-ledger article div span { display:block; color:var(--fg-muted,#8a8378); font-size:.76rem; }
.ac-mobile-ledger article > code { grid-column:1/-1; color:var(--fg-muted,#8a8378); font-size:.72rem; }
.ac-decisions { margin-top:2rem; max-width:62rem; }
.ac-connection { max-width:62rem; padding:1rem 1.1rem; border:1px solid var(--rule,#e7e2d9); border-radius:10px; }
.ac-connection p { margin:0; }
.ac-connection-state strong { margin-right:.35rem; }
.ac-connection-on strong { color:#2f8f5b; }
.ac-connection-off strong, .ac-connection-unknown strong { color:#c98a2e; }
.ac-connection-line { margin-top:.5rem !important; color:var(--fg-muted,#8a8378); font-size:.9rem; }
.ac-connection-warn { color:#c98a2e; }
.ac-decisions > header { margin-bottom:1rem; }
.ac-decisions > header h2 { margin:0 0 .3rem; font-size:1.05rem; }
.ac-decisions > header p { margin:0; color:var(--fg-muted,#8a8378); }
.ac-outcome { font-weight:600; margin-right:.3rem; }
.ac-outcome-ok { color:#2f8f5b; }
.ac-outcome-warn { color:#c98a2e; }
.ac-outcome-off { color:#b4533c; }
.ac-decision-ledger .ac-decision-reasons { font-family:var(--font-mono,ui-monospace,monospace); }
.ac-receipt-link { align-self:start; white-space:nowrap; }
.ac-receipt-pending { align-self:start; color:var(--fg-muted,#8a8378); font-size:.8rem; white-space:nowrap; }
.ac-decisions-more { margin:.9rem 0 0; }

@media (max-width: 820px) {
  .dash-shell:has(.ac-detail-page),.dash-shell:has(.ac-inventory-bar) { grid-template-rows:var(--dash-topbar-h,52px) 1fr; }
  .dash-shell:has(.ac-detail-page) .dash-sidebar,.dash-shell:has(.ac-inventory-bar) .dash-sidebar { display:none; }
  .dash-shell:has(.ac-detail-page) .dash-main,.dash-shell:has(.ac-inventory-bar) .dash-main { grid-row:2; }
  .ac-overview { grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .ac-metal-card { margin-inline:auto; }
  .ac-list-row { grid-template-columns:.8rem minmax(0,1fr) auto; }
  .ac-list-row > span:nth-child(3),.ac-list-row > span:nth-child(4) { display:none; }
}

@media (max-width: 520px) {
  .ac-inventory-bar { align-items:flex-end; }
  .ac-inventory-bar a { padding-inline:.42rem; font-size:.78rem; }
  .ac-view-toggle { gap:0; }
  .ac-view-toggle a { font-size:0; width:2rem; height:2rem; position:relative; }
  .ac-view-toggle a::after { content:'▦'; font-size:1rem; position:absolute; inset:.35rem; text-align:center; }
  .ac-view-toggle a:last-child::after { content:'☰'; }
  .ac-detail-head { align-items:flex-start; flex-wrap:wrap; }
  .ac-detail-head h1 { font-size:1.75rem; }
  .ac-detail-tabs { justify-content:space-between; gap:.2rem; }
  .ac-detail-tabs a { padding-inline:.15rem; font-size:.84rem; }
  .ac-metal-card { grid-template-rows:auto minmax(2.25rem,1fr) auto auto auto; padding-block:1.9rem; padding-inline:clamp(2.15rem,10vw,3rem); }
  .ac-metal-brand { font-size:1rem; }
  .ac-metal-brand img { width:1.35rem; height:1.35rem; }
  .ac-metal-holder { font-size:clamp(.72rem,3.5cqw,.86rem); }
  .ac-metal-values { gap:1.4rem; margin-top:.45rem; }
  .ac-metal-values strong { font-size:.92rem; }
  .ac-facts dl div { grid-template-columns:5.5rem minmax(0,1fr); }
  .ac-actions .btn,.ac-actions form { flex:1 1 9rem; }
  .ac-actions form .btn { width:100%; }
  .ac-card.ac-metal-card-refund,.ac-card.ac-metal-card-orders,.ac-card.ac-metal-card-credits { aspect-ratio:auto; min-height:28rem; padding:3rem clamp(2.25rem,10vw,3rem) 3.4rem; }
  .ac-history .ac-ledger thead { display:none; }
  .ac-history .ac-ledger,
  .ac-history .ac-ledger tbody,
  .ac-history .ac-ledger tr,
  .ac-history .ac-ledger td { display:block; width:100%; }
  .ac-history .ac-ledger tr {
    padding:1rem 0;
    border-bottom:1px solid var(--rule,#e7e2d9);
  }
  .ac-history .ac-ledger td {
    display:grid;
    grid-template-columns:4.25rem minmax(0,1fr);
    gap:.75rem;
    padding:.2rem 0;
    border:0;
    overflow-wrap:anywhere;
  }
  .ac-history .ac-ledger td::before {
    color:var(--fg-muted,#8a8378);
    font-size:.68rem;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .ac-history .ac-ledger td:nth-child(1)::before { content:'When'; }
  .ac-history .ac-ledger td:nth-child(2)::before { content:'Ceiling'; }
  .ac-history .ac-ledger td:nth-child(3)::before { content:'By'; }
}

.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(--rule, #e4e0d9);
  border-radius: 10px;
  background: var(--bg-elev, #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(--fg-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(--rule-soft, #f7f5f1);
}

.ac-sl-q { font-size: 0.85rem; color: var(--fg-muted, #8a8378); }
.ac-sl-fig { font-size: 0.85rem; color: var(--fg-muted, #8a8378); }
.ac-sl-fig strong { color: var(--fg, #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(--rule, #e4e0d9);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted, #8a8378);
  font-weight: 600;
}
.ac-ledger td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft, #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(--rule, #e7e2d9);
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-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(--fg-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(--rule, #e7e2d9);
}
.ac-history-head {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-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(--rule, #e7e2d9);
}

.dash-states {
  margin: 0.25rem 0 0.6rem 1.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule, #e7e2d9);
  border-radius: 6px;
}
.dash-states legend {
  padding-inline: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-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(--rule, #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(--fg-muted, #8a8378);
}

/* ── Task-first issue form ────────────────────────────────────── */
.ac-quick { display: grid; gap: 1.6rem; max-width: 52rem; }
.ac-quick-step { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ac-quick-step > legend { margin-bottom: .7rem; padding: 0; font-weight: 600; font-size: 1.02rem; }
.ac-quick-step .dash-note { margin: 0; }
.ac-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.ac-task { position: relative; display: block; cursor: pointer; }
.ac-task input { position: absolute; opacity: 0; pointer-events: none; }
.ac-task-body { display: grid; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--rule, #e7e2d9); border-radius: .8rem; background: var(--bg-elev, transparent); transition: border-color 120ms ease, box-shadow 120ms ease; }
.ac-task-body small { color: var(--fg-muted, #766f65); font-size: .86rem; line-height: 1.45; }
.ac-task:hover .ac-task-body { border-color: color-mix(in oklab, #e77b0b 45%, var(--rule, #e7e2d9)); }
.ac-task input:checked + .ac-task-body { border-color: #e77b0b; box-shadow: 0 0 0 1px #e77b0b inset; }
.ac-task input:focus-visible + .ac-task-body { outline: 2px solid #e77b0b; outline-offset: 2px; }
.ac-quick-field { display: grid; gap: .4rem; max-width: 26rem; }
.ac-quick-field > span:first-child:not(.sr-only) { font-size: .88rem; color: var(--fg-muted, #766f65); }
.ac-quick-field input { width: 100%; min-width: 0; font: inherit; padding: .65rem .8rem; border: 1px solid var(--rule, #e7e2d9); border-radius: .6rem; background: var(--bg, #fff); color: var(--fg, #181713); }
.ac-quick-limit { display: flex; align-items: center; gap: .6rem; max-width: 30rem; }
.ac-quick-limit input { flex: 0 1 11rem; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ac-limit-unit { font-size: 1.15rem; font-weight: 600; }
.ac-limit-suffix { color: var(--fg-muted, #766f65); white-space: nowrap; }
.ac-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.ac-quick-actions a { font-size: .9rem; }
.ac-quick-foot { max-width: 44rem; }
/* The limit is in euros or a count depending on the job picked; switched in CSS so the form needs no script. */
.ac-quick .ac-when-count { display: none; }
.ac-quick:has(input[name="task"][data-count]:checked) .ac-when-count { display: inline; }
.ac-quick:has(input[name="task"][data-count]:checked) p.ac-when-count { display: block; }
.ac-quick:has(input[name="task"][data-count]:checked) .ac-when-money { display: none; }

/* ── Connect this card to your agent ─────────────────────────── */
.ac-connect { margin-top: 1.4rem; border: 1px solid var(--rule, #e7e2d9); border-radius: 1rem; background: var(--bg-elev, transparent); min-width: 0; }
.ac-connect > summary { display: grid; gap: .3rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; }
.ac-connect > summary::-webkit-details-marker { display: none; }
.ac-connect > summary::after { content: "Show"; justify-self: start; font-size: .82rem; color: var(--fg-muted, #766f65); text-decoration: underline; }
.ac-connect[open] > summary::after { content: none; }
.ac-connect-title { font-weight: 600; font-size: 1.1rem; }
.ac-connect-sub { color: var(--fg-muted, #766f65); font-size: .9rem; line-height: 1.5; max-width: 60rem; }
.ac-connect-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1px; background: var(--rule, #e7e2d9); border-top: 1px solid var(--rule, #e7e2d9); border-radius: 0 0 1rem 1rem; overflow: hidden; }
.ac-connect-option { display: grid; align-content: start; gap: .6rem; padding: 1.2rem 1.3rem; background: var(--bg-elev, var(--bg, #fff)); min-width: 0; }
.ac-connect-option h3 { margin: 0; font-size: 1rem; }
.ac-connect-option p { margin: 0; color: var(--fg-muted, #766f65); font-size: .9rem; line-height: 1.5; }
.ac-connect-option .eyebrow { margin: 0; color: #e77b0b; }
.ac-connect-option form { margin: 0; }
.ac-connect-option .btn { justify-self: start; }
.ac-connect-primary { grid-row: span 2; }
.ac-prompt-head { display: flex; justify-content: flex-end; }
.ac-prompt { margin: 0; max-height: 22rem; overflow: auto; padding: .9rem 1rem; border: 1px solid var(--rule, #e7e2d9); border-radius: .6rem; background: var(--bg, #fff); font-family: var(--dash-mono, monospace); font-size: .78rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .ac-connect-grid { grid-template-columns: 1fr; }
  .ac-connect-primary { grid-row: auto; }
}
.ac-connect-key { display: grid; gap: .5rem; padding-top: .3rem; }
.ac-connect-key form { margin: 0; }

/* Agents (RFC 041) */
.ag-list { display:grid; border-top:1px solid var(--rule,#e7e2d9); max-width:78rem; min-width:0; }
.ag-list-head,.ag-row { display:grid; grid-template-columns:minmax(11rem,1.55fr) minmax(8rem,1fr) minmax(7rem,.72fr) minmax(5rem,.55fr) minmax(12rem,1.4fr); gap:1rem; align-items:center; }
.ag-list-head { padding:.7rem .75rem; color:var(--fg-muted,#8a8378); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--rule,#e7e2d9); }
.ag-row { padding:1rem .75rem; border-bottom:1px solid var(--rule,#e7e2d9); color:inherit; text-decoration:none; border-radius:4px; }
.ag-row > span { min-width:0; }
.ag-row:hover { background:color-mix(in srgb, currentColor 5%, transparent); }
.ag-row:focus-visible { outline:2px solid var(--accent,#e77b0b); outline-offset:-2px; background:color-mix(in srgb, currentColor 5%, transparent); }
.ag-name code { display:block; font-size:.94rem; overflow-wrap:anywhere; }
.ag-cell-label { display:none; }
.ag-count,.ag-last { color:var(--fg-muted,#8a8378); font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; }
.ag-connection { display:block; }
.ag-status { display:inline-block; width:fit-content; font-size:.78rem; font-weight:600; }
.ag-status-ok { color:#2f8f5b; }
.ag-status-warn { color:#c98a2e; }
.ag-status-off { color:var(--fg-muted,#8a8378); }
html[data-theme="dark"] .ag-status-ok,html[data-theme="dark"] .ac-connection-on strong,html[data-theme="dark"] .ac-detail-head .ac-status-ok { color:#58bd84; }
.ag-empty { max-width:40rem; padding:2rem 0; }
.ag-section { max-width:62rem; margin-top:1.8rem; min-width:0; }
.ag-section-head { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1rem; }
.ag-section-head h2,.ag-section h2 { margin:0; font-size:1.05rem; }
.ag-section-head p { margin:.3rem 0 0; }
.ag-section-head form { margin:0; }
.ag-fact-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem 1.3rem; margin:1rem 0 0; padding:1rem 0; border-top:1px solid var(--rule,#e7e2d9); }
.ag-fact-list div,.ag-key-facts div { min-width:0; }
.ag-fact-list dt,.ag-key-facts dt { color:var(--fg-muted,#8a8378); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.ag-fact-list dd,.ag-key-facts dd { margin:.2rem 0 0; overflow-wrap:anywhere; }
.ag-runtime { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--rule,#e7e2d9); }
.ag-runtime h3 { margin:0 0 .4rem; font-size:.82rem; }
.ag-runtime p { color:var(--fg-muted,#8a8378); font-size:.9rem; overflow-wrap:anywhere; }
.ag-link-action { display:inline-block; margin-top:.7rem; color:var(--accent,#c96800); font-weight:600; text-underline-offset:.18em; }
.ag-link-action:focus-visible,.ag-card-main a:focus-visible { outline:2px solid var(--accent,#e77b0b); outline-offset:3px; border-radius:2px; }
.ag-keys,.ag-cards { list-style:none; padding:0; margin:1rem 0 0; display:grid; border-top:1px solid var(--rule,#e7e2d9); }
.ag-keys li,.ag-cards li { min-width:0; padding:1rem .1rem; border-bottom:1px solid var(--rule,#e7e2d9); }
.ag-key-name,.ag-card-main code { display:block; overflow-wrap:anywhere; }
.ag-key-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.25rem; max-width:32rem; margin:.75rem 0 0; font-size:.85rem; }
.ag-cards li { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.ag-card-main { min-width:0; display:grid; gap:.35rem; }
.ag-card-main a { width:fit-content; font-weight:600; text-underline-offset:.18em; overflow-wrap:anywhere; }
.ag-card-main code { color:var(--fg-muted,#8a8378); font-size:.78rem; }
.ag-cards .ag-status { flex:none; }
.ag-new { display:grid; gap:.6rem; max-width:28rem; }
@media (max-width: 920px) {
  .ag-list-head { display:none; }
  .ag-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; }
  .ag-name,.ag-last { grid-column:1/-1; }
  .ag-cell-label { display:block; margin-bottom:.2rem; color:var(--fg-muted,#8a8378); font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
}
@media (max-width: 520px) {
  .ag-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ag-connection { grid-column:1/-1; }
  .ag-fact-list { grid-template-columns:1fr; }
  .ag-section-head .btn { width:100%; }
  .ag-section-head form { width:100%; }
  .ag-cards li { flex-wrap:wrap; }
}