/* allowance.css — the allowance page, shared by Chat and Extractor.
   Only what a short table page needs; everything else comes from shared/ui.css. */
.app.allowance{height:auto;min-height:0;max-width:640px}
.allowbody{padding:18px 20px}
.allowbody .lead{margin:0 0 16px;color:var(--ink);font-size:.9375rem}
.allowbody .muted{font-size:.8125rem;line-height:1.5;margin:14px 0 0}
.tablewrap{overflow-x:auto}          /* a table must never make the page scroll sideways */
.allowance table{width:100%;border-collapse:collapse;font-size:.875rem}
.allowance th,.allowance td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule)}
.allowance th{color:var(--muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
/* Figures line up only if the digits do. */
.allowance .num{text-align:right;font-variant-numeric:tabular-nums}

/* --- bringing your own key --------------------------------------------------- */
.keylist{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.keyrow{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  background:var(--sunk);border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
/* A provider you have a key for reads as settled rather than as another empty field. */
.keyrow.on{border-color:var(--good-edge)}
.keyhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.kname{color:var(--ink);font-weight:600;font-size:.875rem}
.keyhead .muted{font-size:.75rem}
.keyhead a.quiet{color:var(--muted);font-size:.75rem;text-decoration:none;border-bottom:1px dotted var(--rule-2)}
.keyhead a.quiet:hover{color:var(--accent)}
.kprefix{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:var(--muted)}
.keyrow input[type=password]{background:var(--sunk);border:1px solid var(--rule);border-radius:8px;
  color:var(--ink);font:inherit;font-size:.8125rem;padding:6px 9px;min-width:14rem}
.keyrow input[type=password]:focus{outline:2px solid var(--rule-2);outline-offset:-1px}
.keynote{margin:0 0 12px;padding:9px 12px;border:1px solid var(--rule);border-radius:8px;
  background:var(--sunk);font-size:.8125rem}
.keynote .bad{color:var(--bad)}
@media (max-width:40rem){
  .keyrow{grid-template-columns:1fr}
  .keyrow input[type=password]{min-width:0;width:100%}
}

/* Pay as you go: a second block on the same page, because a meter and an allowance
   are different questions. The rule above it does the separating -- a heading alone
   reads as another paragraph on a page this plain. */
.allowbody .allowh{margin:28px 0 12px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.9375rem;font-weight:600;color:var(--ink)}
/* The provider beside a model id, not under it: which company serves a model is a
   footnote to its name, and a second line per row would double the table's height
   for it. */
.allowbody td .muted{font-size:.75rem;margin:0 0 0 6px;display:inline}

/* The three things somebody reading a price list has to be told, and none of them
   is a footnote: what actually drives the bill, that the credit does not come back,
   and that the prices can move. Set as a list rather than prose because they are
   read in any order and usually only one of them is the question. */
.allowbody .ratenotes{margin:14px 0 0;padding-left:20px;color:var(--muted);
  font-size:.8125rem;line-height:1.6}
.allowbody .ratenotes li{margin:0 0 8px}
.allowbody .ratenotes strong{color:var(--ink)}