/* Hallmark · shape: app screen · genre: modern-minimal · theme: Wayfind (deal 1/3, seed telegram-ff03·978d2444·2026-11-03·r0)
 * nav: top bar, wordmark, three destinations, one action · signature: the next-payment plate over the ledger · states: loading, empty, error, full · wayfind: platform
 * axes: light/mono/cool · posture: committed · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, the screen now leads with the next due payment and its countdown, which no other tool would show this way */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-ink-muted: oklch(78% 0.012 250);
  --color-scrim: oklch(16% 0.014 262 / 0.55);
  --control-h: 36px;
  --control-h-sm: 32px;
}

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ top bar */

.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper-3); border-bottom: var(--rule-bar) solid var(--color-ink); }
.topbar__inner { display: flex; align-items: center; gap: var(--space-xl); height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.wordmark::before { content: ""; width: 9px; height: 9px; background: var(--color-accent); }
.nav { display: flex; align-items: stretch; height: 64px; }
.nav__link { display: inline-flex; align-items: center; padding: 0 var(--space-sm); border-bottom: var(--rule-bar) solid transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--dur-micro) steps(1); }
.nav__link:hover { color: var(--color-ink); }
.nav__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.botstate { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.botstate::before { content: ""; width: 7px; height: 7px; background: var(--color-accent); }
.botstate.is-off::before { background: var(--color-muted); }
.botstate.is-error::before { background: var(--color-error); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-xs); }

/* ------------------------------------------------------------------- buttons */

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--control-h); padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 800; line-height: 1; cursor: pointer; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1); }
.btn::after { content: ""; position: absolute; inset: -4px; }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost { border-color: var(--color-ink); }
.btn--quiet { border-color: transparent; }
.btn--quiet:hover { border-color: var(--color-rule); }
.btn--danger { border-color: var(--color-error); color: var(--color-error); }
.btn--danger:hover { background: var(--color-error); color: var(--color-paper-3); }

/* -------------------------------------------------------------------- layout */

.main { flex: 1; padding-block: var(--space-lg) var(--space-3xl); }
.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.screen-head__text { min-width: 0; }
.screen-note { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }

.banner { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-error); color: var(--color-error); font-size: var(--text-sm); }
.banner p { margin: 0; }
.banner .btn { border-color: var(--color-error); color: var(--color-error); margin-left: auto; }
.banner .btn:hover { background: var(--color-error); color: var(--color-paper-3); }

/* ------------------------------------------------------------ next payment */

.next { margin-bottom: var(--space-xl); }
.plate { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.plate__label { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: 500; }
.plate__count { margin-top: var(--space-2xs); color: var(--color-accent-2); font-size: var(--text-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.plate__body { min-width: 0; }
.plate__title { font-size: var(--text-lg); font-weight: 800; overflow-wrap: break-word; }
.plate__amount { margin-top: var(--space-2xs); color: var(--color-paper); font-size: var(--text-xl); font-weight: 800; line-height: 1.1; }
.plate__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-2xs); color: var(--color-ink-muted); font-size: var(--text-sm); }
.plate__actions { display: flex; gap: var(--space-xs); }
.plate .btn { border-color: var(--color-paper); color: var(--color-paper); }
.plate .btn:hover { background: var(--color-paper); color: var(--color-ink); }
.plate .btn--primary { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.plate .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

/* --------------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.stat { min-width: 0; padding: var(--space-md) 0; }
.stat + .stat { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.stat__label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.stat__value { margin-top: var(--space-2xs); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------- toolbar */

.toolbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin: var(--space-xl) 0 var(--space-md); }
.seg { display: flex; }
.seg__cell { height: var(--control-h); padding: 0 var(--space-md); margin-left: calc(-1 * var(--rule-bar)); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1); }
.seg__cell:first-child { margin-left: 0; }
.seg__cell:hover { background: var(--color-paper-2); }
.seg__cell.is-on { background: var(--color-ink); color: var(--color-paper); }
.search { margin-left: auto; }
.search input { width: 260px; height: var(--control-h); padding: 0 var(--space-sm); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); }
.search input::placeholder { color: var(--color-muted); opacity: 1; }
.search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---------------------------------------------------------------------- board */

.body { min-height: 200px; }
.board { width: 100%; table-layout: fixed; border-collapse: collapse; }
.board th { padding: 0 var(--space-sm) var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-ink); color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; text-align: left; white-space: nowrap; }
.board--payments th:nth-child(2) { width: 150px; }
.board--payments th:nth-child(3) { width: 210px; }
.board--payments th:nth-child(4) { width: 140px; }
.board--payments th:nth-child(5) { width: 190px; }
.board--bindings { width: auto; max-width: 900px; }
.board--bindings th:nth-child(1) { width: 340px; }
.board--bindings th:nth-child(2) { width: 100px; }
.board--bindings th:nth-child(3) { width: 160px; }
.board--bindings th:nth-child(4) { width: 220px; }
.board--history { width: auto; max-width: 1000px; }
.board--history th:nth-child(1) { width: 130px; }
.board--history th:nth-child(2) { width: 420px; }
.board--history th:nth-child(3) { width: 130px; }
.board--history th:nth-child(4) { width: 140px; }
.board td { padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); vertical-align: middle; }
.board__num { text-align: right; }
.row { transition: background-color var(--dur-micro) steps(1); }
.row:hover { background: var(--color-paper-2); }
.row--overdue { background: var(--color-accent-2); }
.row--overdue:hover { background: var(--color-accent-2); }
.row--overdue td { border-bottom-color: var(--color-ink-rule); }
.row--off .cell-title, .row--off .cell-due { color: var(--color-muted); }
.row-group td { padding: var(--space-md) var(--space-sm) var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-ink); color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.cell-title { display: block; font-weight: 500; overflow-wrap: break-word; }
.cell-note { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); overflow-wrap: break-word; }
.cell-due { font-weight: 500; white-space: nowrap; }
.cell-left { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); }
.row--overdue .cell-note, .row--overdue .cell-left { color: var(--color-ink-2); }
.cell-remind { color: var(--color-muted); }
.cell-amount { text-align: right; font-weight: 800; white-space: nowrap; }
.row-actions { display: flex; justify-content: flex-end; gap: var(--space-2xs); }
.linkbtn { position: relative; height: var(--control-h-sm); padding: 0 var(--space-xs); border: var(--rule-bar) solid transparent; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.linkbtn::after { content: ""; position: absolute; inset: -6px -2px; }
.linkbtn { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.linkbtn:hover { border-color: var(--color-ink); }
.linkbtn[data-armed="true"] { border-color: var(--color-error); color: var(--color-error); }
.linkbtn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------- loading */

.skeleton { display: grid; grid-template-columns: 1fr 150px 210px 140px; gap: var(--space-sm); padding-block: var(--space-sm); }
.skeleton__cell { height: 40px; background: var(--color-paper-2); }
.skeleton__cell--wide { grid-column: span 1; }

/* --------------------------------------------------------------------- empty */

.empty { padding: var(--space-xl); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.empty h2 { font-size: var(--text-section); }
.empty p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 52ch; }
.empty .btn { margin-top: var(--space-md); }

/* ------------------------------------------------------------------- how to */

.howto { margin-bottom: var(--space-xl); padding: var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.howto__lead { font-size: var(--text-sm); }
.howto__row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.howto__list { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; }
.howto__list div { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.howto__list dt { margin: 0; }
.howto__list dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.howto__note { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); max-width: 72ch; }
.cmd { padding: var(--space-3xs) var(--space-2xs); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; }

/* -------------------------------------------------------------------- editor */

.editor { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--shadow-card); }
.editor::backdrop { background: var(--color-scrim); }
.editor form { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.editor__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-sm); border-bottom: var(--rule-bar) solid var(--color-ink); }
.editor__scroll { flex: 1; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-lg); overflow-y: auto; }
.editor__head h2 { font-size: var(--text-section); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: var(--rule-bar) solid transparent; background: transparent; color: var(--color-ink); font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.iconbtn:hover { border-color: var(--color-ink); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--text-xs); font-weight: 500; }
.field__hint { min-height: 1lh; color: var(--color-muted); font-size: var(--text-xs); }
.field input, .field select, .field textarea { min-height: var(--control-h); padding: 0 var(--space-sm); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); }
.field textarea { min-height: 64px; padding: var(--space-xs) var(--space-sm); resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.check { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.preview { padding: var(--space-sm); border-left: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.form-error { padding-left: var(--space-sm); border-left: var(--rule-bar) solid var(--color-error); color: var(--color-error); font-size: var(--text-sm); }
.editor__foot { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.editor__actions { display: flex; gap: var(--space-xs); margin-left: auto; }

/* --------------------------------------------------------------------- toast */

.toast { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-toast); max-width: min(420px, calc(100% - var(--space-lg) * 2)); padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }

/* --------------------------------------------------------------------- login */

.login-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-lg); }
.login { width: min(380px, 100%); padding: var(--space-xl); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.login__title { font-size: var(--text-2xl); }
.login__lead { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.login__form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.login__submit { width: 100%; }
.login__note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); }
.login__note .cmd { padding: var(--space-3xs) var(--space-2xs); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 72rem) {
  .topbar__inner { gap: var(--space-md); }
}

@media (max-width: 60rem) {
  .topbar__inner { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: var(--space-xs); }
  .nav { height: auto; width: 100%; order: 3; overflow-x: auto; }
  .nav__link { height: var(--control-h); border-bottom: 0; border-top: var(--rule-bar) solid transparent; padding: 0 var(--space-xs); }
  .nav__link[aria-current="page"] { border-top-color: var(--color-ink); border-bottom-color: transparent; }
  .botstate { margin-left: auto; }
  .topbar__actions { margin-left: auto; }
  .plate { grid-template-columns: 1fr; gap: var(--space-md); }
  .plate__actions { justify-content: flex-start; flex-wrap: wrap; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { padding-left: 0; padding-top: var(--space-md); border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .toolbar { align-items: stretch; }
  .seg { overflow-x: auto; }
  .seg__cell { padding: 0 var(--space-xs); font-size: var(--text-xs); }
  .linkbtn { font-size: var(--text-sm); }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }

  .board, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board thead { display: none; }
  .board tr { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .board td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding: var(--space-3xs) 0; border: 0; }
  .board td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-xs); }
  .board td:first-child::before { display: none; }
  .board td.cell-amount { justify-content: flex-end; text-align: right; }
  .board td.row-actions-cell { margin-top: var(--space-2xs); }
  .board td.row-actions-cell::before { display: none; }
  .row--overdue td::before { color: var(--color-ink-2); }
  .skeleton { grid-template-columns: 1fr; }
  .skeleton__cell { display: none; }
  .skeleton__cell:first-child, .skeleton__cell:nth-child(4) { display: block; }
}

@media (max-width: 40rem) {
  .topbar__actions .btn--ghost { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .empty { padding: var(--space-lg); }
  .howto { padding: var(--space-md); }
  .editor { border-left: 0; border-top: var(--rule-bar) solid var(--color-ink); }
}