/* Additions on top of lighthou's stylesheet. Kept separate so style.css stays
   byte-identical to the site it was copied from and can be re-synced. */
.dash-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dash-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dash-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dash-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1080px) {
  .dash-3,.dash-4,.dash-5,.dash-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-card + .dash-card { border-left:0; }
}

/* ── Login ─────────────────────────────────────────────────────────────────
   Pick who you are, then paste the key. Overrides the inherited
   `#login-view { display:flex }` rule, which laid the sections out in a row. */
#login-view { display:block; min-height:100dvh; padding:0; background:#fbfbfc; }
.auth { width:100%; max-width:440px; margin:0 auto; padding:clamp(48px, 12vh, 120px) 24px 64px; }
.auth-mark { width:34px; height:34px; margin:0 auto 18px; border-radius:9px; background:#30353d;
  position:relative; }
.auth-mark::before, .auth-mark::after { content:""; position:absolute; top:50%; width:7px; height:7px;
  margin-top:-3.5px; border-radius:50%; background:#fbfbfc; }
.auth-mark::before { left:8px; }
.auth-mark::after { right:8px; background:#c2683f; }
.auth-brand { text-align:center; font-size:19px; font-weight:650; letter-spacing:.04em; }
.auth-sub { margin:7px 0 30px; text-align:center; font-size:12px; color:var(--muted); }

.auth-panel { display:flex; flex-direction:column; gap:10px; }

.auth-tile { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:#fff;
  transition:border-color .12s, box-shadow .12s, transform .12s; }
.auth-tile:hover:not(:disabled) { background:#fff; border-color:#c4cad2;
  box-shadow:0 1px 3px rgba(20,24,31,.06); transform:translateY(-1px); }
.auth-tile:active { transform:none; }
.auth-tile-text { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.auth-tile-title { font-size:14px; font-weight:600; color:var(--ink); }
.auth-tile-desc { font-size:12px; line-height:1.55; color:var(--muted); white-space:normal; }
.auth-tile-go { color:#b9bfc7; font-size:15px; transition:color .12s, transform .12s; }
.auth-tile:hover .auth-tile-go { color:#30353d; transform:translateX(2px); }

.auth-admin { align-self:center; margin-top:6px; border:0; background:none; padding:6px 10px;
  color:var(--muted); font-size:12px; text-decoration:underline dotted #ccd1d8; text-underline-offset:4px; }
.auth-admin:hover { background:none; color:var(--ink); }

.auth-back { align-self:flex-start; border:0; background:none; padding:0 0 4px; color:var(--muted); font-size:12px; }
.auth-back:hover { background:none; color:var(--ink); }
.auth-title { font-size:17px; font-weight:600; }
.auth-hint { margin:6px 0 4px; font-size:12px; color:var(--muted); }
.auth-field { position:relative; display:flex; }
.auth-field input { flex:1; padding:11px 62px 11px 13px; border-radius:6px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em; }
.auth-field button { position:absolute; right:5px; top:50%; transform:translateY(-50%);
  border:0; background:none; padding:5px 8px; color:var(--muted); font-size:12px; }
.auth-field button:hover { background:#f2f3f5; border-radius:4px; color:var(--ink); }
.auth-submit { width:100%; padding:11px; border-radius:6px; font-size:13px; }
.auth-error { margin:0; min-height:0; }
.auth-error:not(:empty) { margin-top:2px; }

.auth-foot { margin:30px 0 0; text-align:center; font-size:11px; line-height:1.7; color:#9aa0a8; }

/* Settlement amounts: sign carries meaning, so make it legible at a glance */
.amt-pos { color:#2f6f4f; }
.amt-neg { color:#b3474a; }
.settle-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px 24px; margin:4px 0 18px; }
.settle-summary div span { display:block; font-size:12px; color:var(--muted); }
.settle-summary div strong { display:block; font-size:18px; font-weight:550; margin-top:6px;
  font-variant-numeric:tabular-nums; }
.pending-banner { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 18px;
  border:1px solid #e3d9b8; background:#fdfaf0; border-radius:4px; margin:18px 0 4px; }
.pending-banner b { font-variant-numeric:tabular-nums; }

.tabpane { display:block; }
select { border:1px solid #dfe2e6; border-radius:4px; padding:7px 9px; background:#fff; font:inherit; color:inherit; }
select:focus { outline:0; border-color:#8794a3; }
.finance-dialog label { display:block; margin-bottom:12px; font-size:12px; color:var(--muted); }
.finance-dialog label input,.finance-dialog label select { display:block; width:100%; margin-top:5px; color:var(--ink); font-size:13px; }

/* Issued-secret and authorize-url readouts */
code.ob-link,#secret-value { display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;
  overflow-wrap:anywhere; background:#f6f7f8; border:1px solid var(--line); border-radius:4px; padding:9px 11px; }

/* Role chip in the header */
.role-chip { font-size:11px; color:#5b6472; background:#f0f2f4; border-radius:3px; padding:2px 7px; white-space:nowrap; }

/* Estimated figures read differently from billed ones */
.est { color:#6b7280; }
.est::after { content:"≈"; margin-left:3px; font-size:10px; color:#a3a9b2; vertical-align:super; }

/* Call examples */
.snippet { margin:0 0 18px; }
.snippet h3 { margin-bottom:7px; }
.snippet pre { margin:0; padding:12px 14px; background:#fafbfc; border:1px solid var(--line); border-radius:4px;
  overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.65; }
.snippet-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:12px; margin-bottom:16px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere; }

.warn-note { color:#8a6d3b; font-size:12px; }
.row-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Toggled per role by app.js; needs a rule so the selector is not dead. */
.supply-only { display:block; }