@import url("/tokens.css");

/* Tennly app stylesheet: same components as design/specimen.css, plus
   app layout (tabs, panels, letters). Light ledger-paper theme first. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; background: var(--tn-bg); }
body {
  margin: 0; background: var(--tn-bg); color: var(--tn-text);
  font-family: var(--tn-font); font-size: var(--tn-size-body);
  line-height: var(--tn-leading);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--tn-font-display); font-weight: 600; letter-spacing: normal; line-height: 1.2; margin: 0 0 var(--tn-space-3); }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; }
p { margin: 0 0 var(--tn-space-4); max-width: var(--tn-measure); }
p:last-child { margin-bottom: 0; }
a { color: var(--tn-brand); text-decoration: underline; text-underline-offset: 3px; transition: color var(--tn-duration); }
a:hover { color: var(--tn-brand-strong); }
:focus-visible { outline: 2px solid var(--tn-text); outline-offset: 2px; border-radius: 2px; }
.mono { font-family: var(--tn-font-mono); font-variant-numeric: tabular-nums; }
.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.pos { color: var(--tn-money-pos); }
.money.neg { color: var(--tn-money-neg); }
.money.zero { color: var(--tn-money-zero); }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--tn-space-5); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tn-surface); color: var(--tn-text); border: 1px solid var(--tn-rule-strong); border-radius: var(--tn-radius); padding: 10px 16px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.topbar { border-bottom: 1px solid var(--tn-rule); background: var(--tn-bg); }
.topbar .wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tn-space-3) var(--tn-space-5); min-height: 64px; padding-top: var(--tn-space-3); padding-bottom: var(--tn-space-3); }
.wordmark { font-family: var(--tn-font-display); font-size: 1.25rem; font-weight: 600; color: var(--tn-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--tn-space-3); }
.wordmark .mark { width: 28px; height: 28px; border-radius: var(--tn-radius); border: 1px solid var(--tn-brand); color: var(--tn-brand); font-family: var(--tn-font-mono); font-size: 0.75rem; font-weight: 500; display: grid; place-items: center; flex: none; }
.topnav { display: flex; flex-wrap: wrap; gap: var(--tn-space-2) var(--tn-space-4); font-size: 0.9375rem; }
.topnav a[aria-current="page"] { color: var(--tn-text); font-weight: 600; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--tn-space-2); margin: var(--tn-space-5) 0; }
.tabs button { min-height: 44px; padding: 10px 16px; border-radius: var(--tn-radius); border: 1px solid var(--tn-rule-strong); background: transparent; color: var(--tn-text); font-family: var(--tn-font); font-size: 0.9375rem; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--tn-text); border-color: var(--tn-text); color: var(--tn-bg); font-weight: 600; }

/* Section nav: plain text links, underline marks where you are. */
.pagenav { display: flex; flex-wrap: wrap; gap: var(--tn-space-2) var(--tn-space-5); margin: var(--tn-space-5) 0; padding-bottom: var(--tn-space-3); border-bottom: 1px solid var(--tn-rule); }
.pagenav button { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--tn-brand); font-family: var(--tn-font); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pagenav button[aria-current="page"] { color: var(--tn-text); font-weight: 600; text-decoration-thickness: 2px; }

section.page { display: none; }
section.page.active { display: block; }
.block { padding: var(--tn-space-6) 0; border-top: 1px solid var(--tn-rule); }
.block:first-of-type { border-top: 0; }
.lede { font-size: 1.0625rem; color: var(--tn-text-muted); max-width: var(--tn-measure); }
.note, .help { font-size: 0.875rem; color: var(--tn-text-muted); }
.help { font-size: 0.75rem; font-weight: 400; }
.sub { color: var(--tn-text-muted); }
.notice { background: var(--tn-due-fill); border: 1px solid var(--tn-due); border-radius: var(--tn-radius); padding: var(--tn-space-4); margin: var(--tn-space-4) 0; max-width: var(--tn-measure); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: var(--tn-radius); border: 1px solid transparent; background: var(--tn-brand); color: var(--tn-on-brand); font-family: var(--tn-font); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: background-color var(--tn-duration); }
.btn:hover { background: var(--tn-brand-strong); }
.btn.secondary { background: transparent; color: var(--tn-text); border-color: var(--tn-rule-strong); }
.btn.secondary:hover { background: var(--tn-surface-raised); }
.btn.destructive { background: transparent; color: var(--tn-overdue); border-color: var(--tn-overdue); }
.btn.destructive:hover { background: var(--tn-overdue-fill); }
.btn.filled-destructive { background: var(--tn-overdue); color: #fff; border-color: var(--tn-overdue); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.link { color: var(--tn-brand); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 44px; }

label { display: grid; gap: var(--tn-space-2); font-size: 0.875rem; font-weight: 600; }
label.wide { grid-column: 1 / -1; }
.input { min-height: 44px; width: 100%; padding: 10px 12px; border-radius: var(--tn-radius); border: 1px solid var(--tn-rule-strong); background: var(--tn-surface); color: var(--tn-text); font-family: var(--tn-font); font-size: 0.9375rem; }
.input:focus { outline: none; border-color: var(--tn-text); }
.input.money-input { text-align: right; font-variant-numeric: tabular-nums; }
textarea.input { min-height: 88px; font-family: var(--tn-font); }
select.input { padding-right: 32px; }
.check { display: flex; gap: var(--tn-space-3); align-items: flex-start; font-weight: 400; font-size: 0.9375rem; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--tn-brand); flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tn-space-5); align-items: start; max-width: 900px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-4); grid-column: 1 / -1; }

.table-scroll { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--tn-size-small); min-width: 700px; }
table.ledger th, table.ledger td { text-align: left; padding: var(--tn-space-3) var(--tn-space-4); border-bottom: 1px solid var(--tn-rule); vertical-align: top; }
table.ledger thead th { border-bottom: 1px solid var(--tn-rule-strong); color: var(--tn-text-muted); font-size: 0.75rem; font-weight: 600; }
table.ledger .num, table.ledger th.num { text-align: right; }
table.ledger .date, table.ledger .ref { white-space: nowrap; }
table.ledger tr.totals td { border-top: 3px double var(--tn-rule-strong); border-bottom: 0; padding-top: var(--tn-space-4); font-weight: 600; }

.status { display: inline-block; border-radius: var(--tn-radius-small); border: 1px solid; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.status.paid, .status.current { color: var(--tn-paid); border-color: var(--tn-paid); background: var(--tn-paid-fill); }
.status.due { color: var(--tn-due); border-color: var(--tn-due); background: var(--tn-due-fill); }
.status.overdue { color: var(--tn-overdue); border-color: var(--tn-overdue); background: var(--tn-overdue-fill); }
.status.review { color: var(--tn-text-muted); border-color: var(--tn-rule-strong); background: var(--tn-surface-raised); }

.kv { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: var(--tn-space-2) var(--tn-space-5); font-size: 0.9375rem; max-width: var(--tn-measure); }
.kv dt { color: var(--tn-text-muted); }
.kv dd { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--tn-rule); border-left: 1px solid var(--tn-rule); margin: var(--tn-space-5) 0; }
.stat { padding: var(--tn-space-4); border-right: 1px solid var(--tn-rule); border-bottom: 1px solid var(--tn-rule); }
.stat .n { font-family: var(--tn-font-mono); font-weight: 500; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 0.8125rem; color: var(--tn-text-muted); }

.receipt-sheet { margin-top: var(--tn-space-5); max-width: 30rem; background: var(--tn-surface); border: 1px solid var(--tn-rule); border-radius: var(--tn-radius); padding: var(--tn-space-6); }
.receipt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tn-space-4); border-bottom: 1px solid var(--tn-rule-strong); padding-bottom: var(--tn-space-3); flex-wrap: wrap; }
.receipt-landlord, .receipt-title { font-family: var(--tn-font-display); font-weight: 600; font-size: 1.0625rem; margin: 0; }
.receipt-title { color: var(--tn-text-muted); }
.receipt-no { font-size: 0.875rem; margin: 0; }
.receipt-meta { margin-top: var(--tn-space-4); }
.receipt-meta p { display: flex; justify-content: space-between; gap: var(--tn-space-5); margin: 0 0 var(--tn-space-2); font-size: 0.875rem; border-bottom: 1px dotted var(--tn-rule); padding-bottom: var(--tn-space-2); }
.meta-k { color: var(--tn-text-muted); }
table.receipt-lines { width: 100%; border-collapse: collapse; margin-top: var(--tn-space-5); font-size: 0.875rem; }
table.receipt-lines td { padding: var(--tn-space-2) 0; border-bottom: 1px solid var(--tn-rule); }
table.receipt-lines td.num { text-align: right; }
table.receipt-lines tr.receipt-total td { border-top: 3px double var(--tn-rule-strong); border-bottom: 0; padding-top: var(--tn-space-3); font-weight: 600; font-family: var(--tn-font-display); }
.receipt-balance { margin-top: var(--tn-space-5); font-size: 0.875rem; }
.receipt-sign { margin-top: var(--tn-space-6); padding-top: var(--tn-space-4); border-top: 1px solid var(--tn-rule); font-size: 0.75rem; color: var(--tn-text-muted); }

.letter-sheet { max-width: 40rem; background: var(--tn-surface); border: 1px solid var(--tn-rule); border-radius: var(--tn-radius); padding: var(--tn-space-6); }
.letter-sheet pre { white-space: pre-wrap; font-family: var(--tn-font); font-size: 0.9375rem; margin: 0; }

.site-footer { border-top: 1px solid var(--tn-rule); margin-top: var(--tn-space-8); padding: var(--tn-space-6) 0 var(--tn-space-7); }
.foot-note { font-size: 0.8125rem; color: var(--tn-text-muted); }

.demo-bar { background: var(--tn-due); color: #fff; padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; text-align: center; }

@media print {
  .topbar, .site-footer, .skip-link, .actions, .tabs, .pagenav, .demo-bar, .noprint { display: none !important; }
  body { background: #fff; color: #000; }
  .receipt-sheet, .letter-sheet { max-width: none; border: 0; padding: 0; }
  a { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--tn-space-4); }
  .kv { grid-template-columns: 1fr; }
}