@font-face { font-family: Tinos; src: url(/fonts/tinos-400.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: Tinos; src: url(/fonts/tinos-700.woff) format('woff'); font-weight: 700; font-display: swap; }

/* Colours come from the letterhead: its yellow band, black stripe and white page. */
:root {
  color-scheme: light;
  --brand: #FFB700;
  --brand-deep: #E5A300;
  --ink: #000;
  --paper: #fff;
  --surface: #F6F5F2;
  --line: #E4E1DA;
  --muted: #625E57;
  --void: #B3261E;
  --warn-bg: #FFF4D6;
  --serif: Tinos, 'Times New Roman', Times, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
  --tap: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.45 var(--sans); }
main { max-width: 560px; margin: 0 auto; padding: 8px var(--gutter) calc(110px + env(safe-area-inset-bottom)); outline: none; }
a { color: inherit; }
h1 { font: 700 26px/1.2 var(--serif); margin: 20px 0 14px; }
h2 { font: 700 19px/1.25 var(--serif); margin: 26px 0 8px; }
.loading, .muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Header: a slice of the letterhead's diagonal band */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 14px 64px; background: var(--paper);
  border-bottom: 3px solid var(--brand); overflow: hidden; }
.wedge { position: absolute; left: 0; top: 0; bottom: 0; width: 52px;
  background: linear-gradient(105deg, var(--brand) 0 62%, var(--ink) 62% 74%, transparent 74%); }
.brand { font: 700 21px/1 var(--serif); text-decoration: none; letter-spacing: .01em; }
.bar-sub { color: var(--muted); font-size: 15px; }

/* Buttons */
button, .btn { font: 600 17px/1 var(--sans); min-height: var(--tap); padding: 0 18px; border-radius: 10px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); }
button.primary:active { background: var(--brand-deep); }
button.danger { color: var(--void); border-color: var(--void); }
button.link { border: 0; padding: 0 4px; min-height: 40px; text-decoration: underline; background: none; font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }

/* Thumb-reach action bar */
.actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--paper);
  border-top: 1px solid var(--line); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); }
.actions > div { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.actions button { flex: 1; }

/* Forms */
label.field { display: block; margin: 0 0 14px; }
label.field > span { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
input, select, textarea { width: 100%; font: 17px/1.3 var(--sans); color: var(--ink); background: var(--paper);
  border: 1.5px solid #BDB8AE; border-radius: 10px; padding: 12px; min-height: var(--tap); }
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 2px solid var(--brand); outline-offset: 0; }
input.money { font: 700 24px/1.2 var(--serif); }
input.number { font: 700 19px/1.2 var(--serif); letter-spacing: .02em; }
.hint { font-size: 14px; color: var(--muted); margin-top: 5px; }
.error-text { color: var(--void); font-size: 15px; margin-top: 6px; }

/* + GST / incl. GST switch */
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: var(--tap); font-weight: 600; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: -3px; }

/* The summary reads like the invoice's totals table */
.totals { margin: 18px 0 6px; border-top: 2px solid var(--ink); font-family: var(--serif); }
.totals div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.totals div.grand { border-bottom: 2px solid var(--ink); font-weight: 700; font-size: 26px; padding: 10px 0; }
.totals .words { display: block; font-size: 15px; color: var(--muted); font-style: italic; border: 0; }

.notice { border-left: 5px solid var(--brand); background: var(--warn-bg); padding: 10px 12px; border-radius: 0 8px 8px 0; margin: 8px 0 14px; font-size: 15px; }
.notice.bad { border-color: var(--void); background: #FBE9E7; }
.notice label { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-weight: 600; }
.notice input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; }

/* Invoice list */
.search { margin: 14px 0 6px; }
ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; }
ul.list .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.list .amt { font: 700 18px/1.2 var(--serif); text-align: right; }
ul.list .num, ul.list .when { font-size: 14px; color: var(--muted); }
ul.list .when { text-align: right; }
ul.list li.cancelled .amt { text-decoration: line-through; color: var(--muted); }
.tag-void { color: var(--void); font-weight: 700; }
.empty { padding: 36px 0; text-align: center; color: var(--muted); }

/* Invoice detail */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 6px 0 4px; font-size: 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.stamp-void { display: inline-block; color: var(--void); border: 2px solid var(--void); border-radius: 6px; padding: 2px 8px; font-weight: 700; transform: rotate(-4deg); margin-left: 8px; font-size: 14px; vertical-align: middle; }
.doc-actions { display: grid; gap: 10px; margin-top: 20px; }

/* PIN */
.pin { padding-top: 10vh; }
.pin input { font: 700 30px/1 var(--serif); letter-spacing: .4em; text-align: center; }

dialog { border: 0; border-radius: 14px; padding: 20px; width: min(520px, calc(100vw - 2 * var(--gutter))); max-height: 88vh; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin-top: 0; }
dialog .row { margin-top: 18px; }

#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 9;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; font-weight: 600; max-width: calc(100vw - 32px); }