/* Above the Line — the sheet.
   Below the Line's brand: paper, ink, one red pen. Titles in Courier Prime
   capitals, rows in Arimo, corrections in Caveat. Phone first; the nav moves
   to the side at 900px. */
@font-face { font-family: 'Arimo'; font-weight: 400; font-display: swap; src: url('./fonts/Arimo-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Arimo'; font-weight: 700; font-display: swap; src: url('./fonts/Arimo-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 700; font-display: swap; src: url('./fonts/CourierPrime-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url('./fonts/Caveat-Bold.woff2') format('woff2'); }

[hidden] { display: none !important; }

:root {
  --ink: #1F1B16; --paper: #FBF7EE; --pen: #B3261E; --scribble: #2A2A35;
  --grey: #A39C8E; --grey-text: #6B665B; --rule: #DDD6C7; --band: #ECE6D9; --band-total: #E3EAF2;
  --sticky: #F2D64B; --notepad: #9DB4D0; --coffee: #6B4E36; --walnut: #7A5A3F; --mug: #E4DCCB;
  /* sides: personal is walnut, business is notepad blue. Brown and blue stay apart under
     red-green color blindness; pen red and walnut slide together, so overdue always also says so in words. */
  --personal: #7A5A3F; --business: #3C6E9E; --unsorted: #A39C8E;
  --title: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --row: 'Arimo', Arial, 'Helvetica Neue', sans-serif;
  --penfont: 'Caveat', 'Segoe Print', cursive;
  --nav-h: 60px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.4 var(--row); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--title); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
h1 { font-size: 22px; } h2 { font-size: 15px; color: var(--grey-text); margin: 22px 0 8px; } h3 { font-size: 15px; }
.sub { margin: 2px 0 0; color: var(--grey-text); font-size: 14px; }
.pen { font-family: var(--penfont); color: var(--pen); font-size: 20px; line-height: 1; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; padding: 14px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 760px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0 12px; border-bottom: 2px solid var(--ink); }
.credits { white-space: nowrap; border: 2px solid var(--ink); background: var(--sticky); border-radius: 4px; padding: 6px 10px; font-family: var(--title); font-weight: 700; cursor: pointer; transform: rotate(-2deg); box-shadow: 1px 2px 0 rgba(31,27,22,.25); }

.nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper); border-top: 2px solid var(--ink); display: flex; z-index: 20; }
.brand { display: none; }
.nav-item { flex: 1; border: 0; background: none; font-family: var(--title); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-text); cursor: pointer; padding: 0; }
.nav-item.is-on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.nav-desk { display: none; }
@media (min-width: 900px) {
  .shell { flex-direction: row; }
  .nav { position: sticky; top: 0; height: 100vh; width: 210px; flex-direction: column; border-top: 0; border-right: 2px solid var(--ink); padding: 18px 10px; align-items: stretch; }
  .brand { display: flex; flex-direction: column; padding: 0 8px 18px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
  .brand-title { font-family: var(--title); font-weight: 700; font-size: 17px; }
  .brand-sub { font-family: var(--penfont); color: var(--pen); font-size: 20px; }
  .nav-item { flex: 0 0 auto; text-align: left; padding: 9px 8px; font-size: 13px; }
  .nav-desk { display: block; }
  .main { padding-bottom: 40px; }
}

/* rows: the sheet */
.rows { border-top: 1px solid var(--rule); }
.rowi { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rowi .side { width: 6px; height: 34px; border-radius: 2px; background: var(--unsorted); }
.rowi .side.personal { background: var(--personal); } .rowi .side.business { background: var(--business); }
.rowi .lb { font-weight: 700; } .rowi .meta { color: var(--grey-text); font-size: 13px; }
.rowi .amt { font-family: var(--title); font-weight: 700; text-align: right; white-space: nowrap; }
.rowi.is-late .lb::after { content: ' OVERDUE'; font-family: var(--penfont); color: var(--pen); font-size: 17px; }
.rowi.is-paid { color: var(--grey); } .rowi.is-paid .lb { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }
.rowi .acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.rowi.unknown .amt::after { content: ' ?'; color: var(--pen); }

/* totals band */
.total { background: var(--band-total); border: 1px solid var(--rule); padding: 12px 14px; margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.total .big { font-family: var(--title); font-size: 34px; font-weight: 700; grid-column: 2; text-align: right; }
.total .big.neg { color: var(--pen); }
.total .k { color: var(--grey-text); font-size: 14px; } .total .v { font-family: var(--title); text-align: right; }
.total .lead { font-family: var(--title); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; grid-column: 1 / -1; }

/* sticky note: the call sheet */
.sticky { background: var(--sticky); padding: 16px 16px 14px; margin: 16px 0 0; transform: rotate(-.6deg); box-shadow: 2px 3px 0 rgba(31,27,22,.18); }
.sticky h3 { font-family: var(--penfont); text-transform: none; letter-spacing: 0; font-size: 24px; color: var(--scribble); }
.sticky p { margin: 6px 0 0; color: var(--scribble); }
.sticky .why { font-size: 14px; color: #4A4A58; }
.sticky .done { font-family: var(--penfont); color: var(--pen); font-size: 22px; }

.btn { border: 2px solid var(--ink); background: var(--paper); border-radius: 4px; padding: 7px 12px; font-family: var(--title); font-weight: 700; font-size: 13px; text-transform: uppercase; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--ink); color: var(--paper); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn.pen { border-color: var(--pen); color: var(--pen); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.is-side-personal { background: var(--personal); color: #fff; border-color: var(--personal); }
.btn.is-side-business { background: var(--business); color: #fff; border-color: var(--business); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.note { font-size: 14px; color: var(--grey-text); margin: 6px 0; }
.issue { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.issue::before { content: '!'; font-family: var(--penfont); color: var(--pen); font-size: 22px; line-height: 1; }
.empty { color: var(--grey-text); font-family: var(--penfont); font-size: 22px; }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dn { text-align: center; font-family: var(--title); font-size: 11px; color: var(--grey-text); padding: 4px 0; }
.cal-d { aspect-ratio: 1 / 1.1; border: 1px solid var(--rule); background: #fff; padding: 4px; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; border-radius: 3px; min-width: 0; }
.cal-d.other { opacity: .35; } .cal-d.today { border: 2px solid var(--ink); } .cal-d.sel { background: var(--band); }
.cal-d .dn { font-family: var(--title); font-size: 13px; } .cal-d.past .dn { color: var(--grey); }
.cal-d .dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unsorted); }
.dot.personal { background: var(--personal); } .dot.business { background: var(--business); }
.dot.late { box-shadow: 0 0 0 2px var(--pen); } .dot.paid { background: transparent; border: 2px solid var(--grey); width: 6px; height: 6px; }
.cal-d .sum { font-family: var(--title); font-size: 11px; margin-top: 2px; }
.cal-d .sum.late { color: var(--pen); }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--grey-text); margin-top: 8px; flex-wrap: wrap; }
.legend span { display: inline-flex; gap: 5px; align-items: center; }

/* accounts */
.acct { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.acct .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.acct .nm { font-weight: 700; } .acct .kd { font-size: 12px; color: var(--grey-text); text-transform: uppercase; font-family: var(--title); }
.acct .nt { font-size: 13px; color: var(--grey-text); margin-top: 2px; }
.acct .fig { font-family: var(--title); font-weight: 700; white-space: nowrap; }
.acct .fig.owed { color: var(--pen); }
.acct .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* lot */
.lot-canvas { width: 100%; aspect-ratio: 16 / 10; background: #D9E4CF; border: 2px solid var(--ink); border-radius: 4px; display: block; image-rendering: pixelated; }
.piece { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.piece .nm { font-weight: 700; } .piece .bl { font-size: 13px; color: var(--grey-text); grid-column: 1; }
.piece .cost { font-family: var(--title); font-weight: 700; grid-row: 1; grid-column: 2; text-align: right; }
.piece .st { grid-column: 2; text-align: right; }
.piece.owned .nm::after { content: ' BUILT'; font-family: var(--penfont); color: var(--pen); font-size: 17px; }
.piece .lock { font-size: 12px; color: var(--grey-text); display: inline-block; max-width: 150px; }

/* forms and sheets */
.sheet-back { position: fixed; inset: 0; background: rgba(31,27,22,.45); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--paper); width: 100%; max-width: 560px; border-radius: 10px 10px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 3px solid var(--ink); max-height: 86vh; overflow: auto; }
@media (min-width: 900px) { .sheet-back { align-items: center; } .sheet { border-radius: 8px; border: 2px solid var(--ink); } }
.f { display: grid; gap: 4px; margin: 10px 0; } .f label { font-family: var(--title); font-size: 12px; text-transform: uppercase; color: var(--grey-text); }
.f input, .f select { font: inherit; padding: 9px 10px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ledg { font-size: 13px; color: var(--grey-text); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; }
.ledg b { font-family: var(--title); color: var(--ink); }