/* Hallmark · shape: app screen · genre: modern-minimal · theme: Furrow (deal 1/3, seed internal-collection-caring-tool-73fd·195ce533·2026-10-30·r0) · redesign: full
 * nav: top bar with wordmark, period and tabs · signature: the call sheet, a ruled phone list that opens each customer as a notebook entry · states: loading, empty, error, full
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H- E3 S3 R3 V3 · weakest: P, the stat strip still reads as a row of figures, so it is a ruled dl with no tiles or icons and the queue below carries the screen */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-on-ink: var(--color-paper-2);
  --color-error-soft: oklch(93% 0.04 27);
  --color-shade: oklch(18% 0.006 60 / 0.45);
  --control: 40px;
  --page: 1240px;
}

body { min-height: 100vh; }
.muted { color: var(--color-muted); }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.err { color: var(--color-error); min-height: 1lh; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-ink); }
.topbar__in { max-width: var(--page); margin-inline: auto; padding: var(--space-sm) var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); min-height: 64px; }
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); }
.period { color: var(--color-muted); font-size: var(--text-sm); }
.select-inline { min-height: 32px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); padding: 0 var(--space-xs); }
.tabs { display: flex; gap: var(--space-2xs); flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.tabs a:hover { background: var(--color-paper-3); }
.tabs a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.who { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-sm); }
.link { background: none; border: 0; padding: var(--space-2xs) 0; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; cursor: pointer; font-size: inherit; }
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.link:active { transform: translateY(1px); }

/* ---------- page ---------- */
.page { max-width: var(--page); margin-inline: auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); }
.pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-lg); }
.pagehead h1 { font-size: var(--text-3xl); max-width: none; }
.pagehead .lead { margin-top: var(--space-xs); color: var(--color-muted); }
.block { margin-top: var(--space-2xl); }
.block > h2 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.block > h2 + .muted { margin-bottom: var(--space-md); font-size: var(--text-sm); }
.block > h2 + :not(.muted) { margin-top: var(--space-md); }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-columns); }
.split .block { margin-top: var(--space-2xl); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }

/* ---------- figures: a ruled strip, no tiles ---------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; border-top: 2px solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.figures > div { padding: var(--space-md) var(--space-md) var(--space-md) 0; }
.figures > div + div { padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.figures dt { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.figures dd { margin: var(--space-2xs) 0 0; font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 500; color: var(--color-ink); }
.figures dd.figures__sub { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.figures--quiet { border-top-width: var(--rule-hair); }
.figures--quiet dd { font-size: var(--text-xl); }

/* ---------- controls: moulded keys ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--color-sheet), 0 1px 1px var(--color-rule); transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper); border-color: var(--color-grid-strong); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 1px var(--color-rule); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-sheet) 32%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 90%, var(--color-ink)); border-color: color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.btn--block { width: 100%; min-height: 48px; }
.btn:disabled, .btn[disabled] { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); box-shadow: none; cursor: not-allowed; opacity: 0.55; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

/* fields hold their label inside the box */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-sm); }
.field { position: relative; display: block; }
.field--wide { grid-column: 1 / -1; }
.field > span { position: absolute; left: var(--space-sm); top: var(--space-2xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); pointer-events: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: var(--space-md) var(--space-sm) var(--space-2xs); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); }
.field textarea { padding-top: var(--space-lg); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.field input:disabled, .field select:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; opacity: 0.55; }
.field input:user-invalid { border-color: var(--color-error); }
.field--compact input, .field--compact select { min-height: 48px; }
.field--grow { flex: 1 1 240px; }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-sm); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-ink); cursor: pointer; }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-ink); }
.toolbar .field { min-width: 150px; }
.toolbar .btn { min-height: 48px; }
.toolbar--assign { border-top-color: var(--color-rule); margin-bottom: var(--space-md); }
.toolbar--assign .field { min-width: 220px; }
.toolbar__spacer { flex: 1; }
.range { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-xs); }
.range .btn { min-height: 48px; }

/* chips: sentence case, untracked */
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.chip--good { background: var(--color-green-soft); color: var(--color-green); }
.chip--bad { background: var(--color-error-soft); color: var(--color-error); }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.contactcell { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }
.contactcell span:last-child:not(.num) { color: var(--color-muted); overflow-wrap: anywhere; }

/* ---------- signature: the call sheet ---------- */
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet { background: var(--color-sheet); border-radius: 3px; box-shadow: var(--shadow-card); }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name tags amt" "meta tags amt"; align-items: center; gap: var(--space-2xs) var(--space-lg); width: 100%; padding: var(--space-sm) var(--space-md); background: none; border: 0; text-align: left; color: inherit; cursor: pointer; min-height: 64px; transition: background-color var(--dur-micro) var(--ease-out); }
.qrow:hover { background: var(--color-paper); }
.qrow:active { background: var(--color-paper-3); }
.qrow:focus-visible { outline-offset: -2px; }
.qrow__name { grid-area: name; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .meta { grid-area: meta; }
.qrow__tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2xs); }
.qrow__amt { grid-area: amt; font-weight: 500; min-width: 10ch; text-align: right; }
.queue--remind { border-top-color: var(--color-accent); border-top-width: 2px; }
.queue--remind .qrow { background: color-mix(in oklab, var(--color-accent-soft) 45%, transparent); }
.queue--remind .qrow:hover { background: var(--color-accent-soft); }

/* the notebook entry: login, call log, password */
.entry { border: 0; padding: 0; border-radius: var(--radius-entry); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-lift); overflow: hidden; color: var(--color-ink); width: min(600px, calc(100% - 2 * var(--space-md))); }
dialog.entry { max-height: calc(100dvh - 2 * var(--space-md)); overflow-y: auto; }
dialog.entry::backdrop { background: var(--color-shade); }
.entry--small { width: min(420px, 100%); }
.entry__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-ink); color: var(--color-on-ink); }
.entry__head h1, .entry__head h2 { font-size: var(--text-xl); color: var(--color-on-ink); max-width: none; }
.entry__saldo { font-size: var(--text-xl); font-weight: 500; white-space: nowrap; }
.notebook { background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper-2); }
.entry__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-hair) solid var(--color-ink); }
.cell { padding: var(--space-xs) var(--space-md); border-right: var(--rule-hair) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); display: grid; gap: var(--space-3xs); min-width: 0; }
.cell:nth-child(3n) { border-right: 0; }
.cell--wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.cell > span { font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; }
.cell > strong { font-weight: 500; overflow-wrap: anywhere; }
.kcontact { font-size: var(--text-sm); font-weight: 400; }
.entry__body { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.entry__keys { display: flex; justify-content: end; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); position: sticky; bottom: 0; }
.entry__keys .btn { min-height: 48px; padding-inline: var(--space-lg); }
.contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.contact { display: inline-flex; gap: var(--space-xs); }
.contact__email { font-size: var(--text-sm); color: var(--color-muted); }
.contact__none { color: var(--color-error); font-size: var(--text-sm); }
.disclosure summary { cursor: pointer; font-weight: 500; font-size: var(--text-sm); min-height: 44px; display: flex; align-items: center; }
.disclosure summary:hover { color: var(--color-ink-2); }
.disclosure .fields { margin-top: var(--space-xs); }
.history__head { font-size: var(--text-md); margin-top: var(--space-xs); }
.history { max-height: 200px; overflow-y: auto; font-size: var(--text-sm); }
.history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); padding: var(--space-xs) 0; }
.history__when { color: var(--color-muted); }
.history__note { flex-basis: 100%; color: var(--color-muted); }

/* sign-in gate */
.is-gate .page { min-height: 100vh; display: grid; place-items: center; padding-block: var(--space-xl); }
.gate { width: 100%; display: grid; place-items: center; }
.gate .entry__head h1 { font-size: var(--text-2xl); }

/* ---------- tables: horizontal rules only ---------- */
.tablewrap { overflow-x: auto; border-top: var(--rule-hair) solid var(--color-ink); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-sm) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: middle; }
thead th { font-weight: 500; color: var(--color-muted); white-space: nowrap; background: var(--color-paper); }
tbody th { font-weight: 500; }
td.n, th.n { text-align: right; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; white-space: nowrap; }
thead th.n { font-family: var(--font-body); }
tbody tr:hover { background: var(--color-paper-2); }
tbody th .meta { margin-top: var(--space-3xs); }
.tablewrap tbody th, .tablewrap thead th:first-child { position: sticky; left: 0; background: var(--color-paper); }
.table--pick td:first-child, .table--pick thead th:first-child { width: 44px; position: sticky; left: 0; background: var(--color-paper); }
.table--pick tbody th, .table--pick thead th:nth-child(2) { left: 44px; }
.rowactions { display: flex; gap: var(--space-md); justify-content: end; }
.pager { display: flex; align-items: center; justify-content: end; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); }

/* ---------- charts ---------- */
.bars { display: flex; align-items: stretch; gap: var(--space-2xs); height: 180px; border-top: var(--rule-hair) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-xs); }
.bars__col { flex: 1; min-width: 6px; max-width: 40px; display: flex; flex-direction: column-reverse; }
.bars__col > span { flex-basis: 0; display: block; }
.bars__u { background: var(--color-grid-strong); }
.bars__c { background: var(--color-ink-2); }
.bars__j { background: var(--color-green); }
.bars__gap { background: transparent; }
.bars__x { display: flex; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.bars__x span { flex: 1; text-align: center; min-width: 6px; max-width: 40px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: var(--space-2xs); vertical-align: -1px; }
.results { border-top: var(--rule-hair) solid var(--color-ink); }
.results th { width: 1%; white-space: nowrap; }
.results__bar { width: 60%; }
.results__bar span { display: block; height: 8px; background: var(--color-ink-2); border-radius: 2px; transform-origin: left; }

/* ---------- upload ---------- */
.dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding: var(--space-xl); border: var(--rule-hair) dashed var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper-2); }
.dropzone__pick { flex: 1 1 320px; display: grid; gap: var(--space-xs); cursor: pointer; }
.dropzone__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--tracking-display); }
.dropzone input[type="file"] { margin-top: var(--space-xs); font-size: var(--text-sm); }
.dropzone .btn { min-height: 48px; padding-inline: var(--space-xl); }
.upres { margin-top: var(--space-lg); color: var(--color-muted); min-height: 1lh; }
.upres--done { color: var(--color-ink); }
.upres--done h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.upres--done li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; }
.upres--done li span { color: var(--color-muted); }
.upres--done li strong { font-weight: 500; text-align: right; }

/* ---------- states ---------- */
.state { padding: var(--space-xl) 0; border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); justify-items: start; }
.state h2, .state h3 { font-size: var(--text-lg); }
.state p { color: var(--color-muted); }
.state--error h2 { color: var(--color-error); }
.skeleton { display: grid; gap: var(--space-sm); padding-top: var(--space-xl); }
.skeleton span { display: block; height: 44px; border-radius: var(--radius-pill); background: var(--color-paper-3); animation: pulse 1.2s var(--ease-in-out) infinite alternate; }
.skeleton span:first-child { width: 40%; height: 36px; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .skeleton span { animation: none; } }

.toast { position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); font-size: var(--text-sm); animation: toast-in var(--dur-short) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .topbar__in { padding: var(--space-xs) var(--space-md); }
  .tabs { order: 3; flex-basis: 100%; }
  .who { margin-left: auto; }
  .page { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .pagehead h1 { font-size: var(--text-2xl); }
}
@media (max-width: 40rem) {
  .qrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "meta meta" "tags tags"; padding-inline: var(--space-sm); }
  .qrow__tags { justify-content: start; }
  .figures dd { font-size: var(--text-xl); }
  .figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .entry__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(3n) { border-right: var(--rule-hair) solid var(--color-ink); }
  .cell:nth-child(2n) { border-right: 0; }
  .entry__head { flex-wrap: wrap; padding-inline: var(--space-md); }
  .entry__body, .entry__keys { padding-inline: var(--space-md); }
  .contact { flex-wrap: wrap; }
  .dropzone { padding: var(--space-lg); }
  .toolbar .field { flex: 1 1 100%; }
  .toolbar__spacer { display: none; }
  .who { font-size: var(--text-sm); gap: var(--space-sm); }
}