/* Customer portal (customer_portal.html). Shared tokens, .btn, .field, .panel,
   .topbar and model-card styles come from tokens/base/components.css. */

.sheet.narrow { max-width: 880px; }
.page-head { margin: 0 0 var(--s6); }
.page-head h1 { font-size: 30px; margin-bottom: var(--s2); }
.page-head p { color: var(--fg-muted); font-size: 15px; margin: 0; max-width: 62ch; }

.tab-nav { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.tab-nav button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-muted); background: none; border: 0;
  padding: var(--s3) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer;
}
.tab-nav button:hover { color: var(--fg); }
.tab-nav button.active { color: var(--fg); border-bottom-color: var(--accent-text); }
.tab-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tab { display: none; }
.tab.active { display: block; }

.panel { margin-bottom: var(--s4); }
.panel h2 .note-amber, .stack > h2 .h2-note { color: var(--hold); text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--sans); font-size: 12px; margin-left: var(--s2); }
.consent { font-size: 13px; line-height: 1.6; }
.consent a { color: var(--link); }
.form-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s2); }
.status-line { color: var(--fg-faint); font-size: 13px; }
.form-error { color: var(--flag); font-size: 13px; }
.form-error:empty { display: none; }
.stack { display: grid; gap: var(--s4); }

/* ---- model table (replaces the 29-card grid, 2026-10-01) ----------------
   Server-rendered (reads correctly with no JS); the page script adds the
   lab filter and column sort. Only the 90% tier is offered for now. */
.mt-controls { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.lab-filters { display: flex; gap: var(--s2); flex-wrap: wrap; }
.lab-chip {
  font: inherit; font-size: 13px; color: var(--fg-muted); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s1) var(--s3); min-height: 32px;
}
.lab-chip[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-wash); font-weight: 600; }
.lab-chip:focus-visible, .sort-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.mt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.model-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.model-table .mt-caption { caption-side: top; text-align: left; padding: var(--s3) var(--s4) 0; font-size: 12px; color: var(--fg-faint); }
.model-table th, .model-table td { padding: var(--s2); text-align: left; vertical-align: middle; }
.model-table thead th { padding-top: var(--s2); padding-bottom: var(--s2); }
.model-table th:first-child, .model-table td:first-child { padding-left: var(--s4); }
.model-table th:last-child, .model-table td:last-child { padding-right: var(--s4); }
.model-table thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-faint); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.model-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-table tbody tr.model-row { border-top: 1px solid var(--line); }
.model-table tbody tr.model-row:hover { background: var(--surface-2); }
.model-table tr.group-row th {
  padding-top: var(--s3); font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
}
.sort-btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer; display: inline-flex; gap: var(--s1); align-items: center;
}
.sort-btn::after { content: "\2195"; opacity: .45; }
th[aria-sort="ascending"] .sort-btn::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .sort-btn::after { content: "\2193"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--fg); }

.mt-model { display: flex; gap: var(--s3); align-items: center; }
.mt-name { font-weight: 600; color: var(--fg); }
.mt-alias { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); word-break: break-all; }
.mt-fallback { color: var(--fg-faint); margin-left: 2px; cursor: help; }
/* Discount design carried over from the landing ledger: struck-through
   retail over the bold 90%-off price, per direction (Input / Output), and a
   filled "90% off" pill. */
.mt-price { vertical-align: middle; }
.mt-was { display: block; font-size: 11px; font-weight: 400; color: var(--fg-faint); text-decoration: line-through; }
.mt-now { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.mt-pill {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.mt-credit { margin: var(--s3) 0 0; font-size: 12px; color: var(--fg-faint); }
.model-table .price-unavailable { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--fg-faint); }

@media (max-width: 940px) {
  .model-table .col-opt { display: none; }
}
@media (max-width: 560px) {
  .model-table .col-score { display: none; }
  .model-table .mt-model .card-logo, .model-table .mt-model .card-logo-fallback { display: none; }
}

.specs { display: flex; gap: var(--s6); flex-wrap: wrap; }
.spec .n { font-family: var(--mono); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.spec .l { font-size: 12px; color: var(--fg-faint); margin-top: 2px; }

.codeblock { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.codeblock .bar { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.codeblock .label { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.codeblock pre { margin: 0; padding: var(--s3) var(--s4); font-family: var(--mono); font-size: 13px; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-btn { font: inherit; font-size: 12px; color: var(--fg-muted); background: none; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s1) var(--s2); cursor: pointer; }
.copy-btn:hover { color: var(--fg); border-color: var(--fg-faint); }

.badge { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 600; padding: 2px var(--s2); border-radius: var(--r-pill); }
.badge .bd { width: 6px; height: 6px; border-radius: 50%; }
.badge.ok { background: var(--pass-wash); color: var(--pass); }
.badge.ok .bd { background: var(--pass); }
.badge.warn { background: var(--hold-wash); color: var(--hold); }
.badge.warn .bd { background: var(--hold); }
.badge.off { background: var(--surface-2); color: var(--fg-faint); }
.badge.off .bd { background: var(--fg-faint); }

.bar-track { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); height: 6px; overflow: hidden; margin-top: var(--s2); }
.bar-fill { height: 100%; background: var(--pass); border-radius: var(--r-pill); transition: width .3s ease; }
.bar-fill.warn { background: var(--hold); }
.bar-fill.danger { background: var(--flag); }

.usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usage-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.usage-table td { padding: var(--s3); border-bottom: 1px solid var(--line); color: var(--fg-muted); }
.usage-table tr:last-child td { border-bottom: 0; }
.usage-table td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); }

.dropzone { display: block; border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--s6); text-align: center; background: var(--surface-2); cursor: pointer; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent-text); background: var(--accent-wash); }
.dropzone .fname { font-family: var(--mono); font-size: 13px; margin-top: var(--s2); }
.dropzone input[type=file] { display: none; }
.divider-or { color: var(--fg-faint); font-size: 12px; text-align: center; margin: var(--s3) 0; }
.preview-textarea { font-family: var(--mono); resize: vertical; }

.before-after pre, .before-after .after-body { margin: 0; padding: var(--s3) var(--s4); font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.before-after pre { color: var(--fg-muted); }
.tok-redact { background: var(--redact); color: var(--redact-text); border-radius: 4px; padding: 1px var(--s2); font-weight: 600; cursor: default; }
.tok-preserve { background: var(--pass-wash); color: var(--pass); border-bottom: 2px solid var(--pass); border-radius: 2px 2px 0 0; padding: 1px 4px; font-weight: 600; cursor: default; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; }
.legend .tok-redact, .legend .tok-preserve { margin-right: var(--s2); }

input[type="checkbox"] { accent-color: var(--accent-text); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s6); }

.stack > h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); font-weight: 500; margin: 0; }
.stack > h2 .h2-note { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; margin-left: var(--s2); color: var(--fg-muted); }