/* ---------------------------------------------------------------------------
   Tokens.

   The palette follows Apple's: a soft grey ground with white cards floating on
   it rather than boxes ruled onto it, and the accent used sparingly so that
   where it appears it means something.

   The two brand colours do different jobs. The blue (#15659C) is the accent —
   links, buttons, the selected tab — because an interface that asks you to
   click something all day should not be shouting. The red (#D03347) is kept
   for the brand mark and for money that is wrong: overdue, negative, reversed.
   Using it for ordinary buttons would spend its alarm value on nothing.
   --------------------------------------------------------------------------- */
:root{
  --ground:#F5F5F7; --surface:#FFFFFF; --surface-2:#F0F0F3;
  --line:#E3E3E8; --line-soft:#EDEDF0;
  --ink:#1D1D1F; --ink-2:#3A3A3C; --muted:#86868B;
  --accent:#15659C; --accent-soft:#E6EFF6; --accent-ink:#0F4C77;
  --brand-red:#D03347; --brand-red-soft:#FBE8EA;
  --good:#1D7A4C; --good-soft:#E2F3E9; --warn:#8A5A12; --warn-soft:#FBF0DC;
  --bad:#D03347; --bad-soft:#FBE8EA;
  --radius:10px; --radius-lg:14px; --radius-pill:980px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 12px -6px rgba(0,0,0,.10);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06),0 12px 28px -14px rgba(0,0,0,.18);
  --ring:0 0 0 4px rgba(21,101,156,.20);
  /* Form fields keep their own token: they must stay plain and high-contrast
     even where the surface around them is tinted. */
  --field:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E;
    --line:#38383A; --line-soft:#2E2E30;
    --ink:#F5F5F7; --ink-2:#D1D1D6; --muted:#98989D;
    --accent:#6FB3E5; --accent-soft:#132A3A; --accent-ink:#9ACCF0;
    --brand-red:#FF7C8C; --brand-red-soft:#3A1C21;
    --good:#63D68F; --good-soft:#14301F; --warn:#E0A94E; --warn-soft:#332811;
    --bad:#FF7C8C; --bad-soft:#3A1C21;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lift:0 8px 30px -12px rgba(0,0,0,.7);
    --ring:0 0 0 4px rgba(111,179,229,.26);
    --field:#1C1C1E;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
       Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.006em}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* --- chrome -------------------------------------------------------------- */
/* Translucent and blurred, as every Apple toolbar is: content scrolls under it
   rather than disappearing at a hard edge. */
.topbar{display:flex;align-items:center;gap:22px;padding:0 20px;height:60px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  position:sticky;top:0;z-index:10}
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--surface)}}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);
  font-size:14.5px;letter-spacing:-.01em;flex:none}
.brand:hover{text-decoration:none}
/* The mark is transparent, so it sits on the light bar and the dark one alike.
   Height-constrained rather than width-constrained: the wordmark and its two
   tagline lines have to stay legible at toolbar size. */
.brand-logo{height:38px;width:auto;display:block}
.brand-name{color:var(--muted);font-weight:500;font-size:13.5px;
  padding-left:9px;border-left:1px solid var(--line)}
@media(max-width:640px){.brand-name{display:none}}
.topbar nav{display:flex;gap:1px;flex:1;overflow-x:auto;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{padding:6px 11px;border-radius:var(--radius-pill);color:var(--ink-2);
  font-size:13.5px;white-space:nowrap;transition:background .15s ease,color .15s ease}
.topbar nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.topbar nav a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:590}
.signout{display:flex;align-items:center;gap:12px;margin:0}
.who{color:var(--muted);font-size:13px;white-space:nowrap}
button.link{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;
  padding:0;font-family:inherit}
button.link:hover{color:var(--ink);text-decoration:underline}

main{max-width:1100px;margin:0 auto;padding:30px 22px 96px}
main.centred{max-width:400px;padding-top:11vh}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 22px;flex-wrap:wrap}
h1{font-size:28px;font-weight:680;margin:0;letter-spacing:-.024em;line-height:1.15}
h2{font-size:15px;font-weight:600;margin:0 0 12px;letter-spacing:-.012em}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.flash,.error{padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;
  font-size:14.5px;display:flex;gap:8px;align-items:flex-start}
.flash{background:var(--accent-soft);color:var(--accent-ink)}
.error{background:var(--bad-soft);color:var(--bad);font-weight:500}

/* --- controls ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:1px solid transparent;
  padding:7px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:560;
  cursor:pointer;font-family:inherit;line-height:1.45;letter-spacing:-.008em;
  transition:background .15s ease,transform .08s ease,box-shadow .15s ease}
.btn:hover{background:var(--accent-ink);text-decoration:none;color:#fff}
.btn:active{transform:scale(.975)}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line);
  box-shadow:var(--shadow)}
.btn.secondary:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--line);
  box-shadow:var(--shadow)}
.btn.danger:hover{background:var(--bad-soft)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* --- summary cards -------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;
  margin-bottom:26px}
.card{background:var(--surface);padding:18px 20px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
.card .label{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500;
  letter-spacing:0;text-transform:none}
.card .value{font-size:27px;font-weight:640;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.card.alert .value{color:var(--bad)}

/* --- panels --------------------------------------------------------------- */
.panel{background:var(--surface);border-radius:var(--radius-lg);margin-bottom:22px;
  overflow:hidden;box-shadow:var(--shadow)}
.panel > h2{padding:15px 20px 13px;margin:0;font-size:14.5px;font-weight:600}
.panel-body{padding:4px 20px 20px}
.panel > h2 + .panel-body{padding-top:0}
.panel > .tablewrap{border-top:1px solid var(--line-soft)}

/* --- tables --------------------------------------------------------------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:11px 20px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle;color:var(--ink)}
thead th{font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);
  font-weight:510;background:transparent;border-bottom:1px solid var(--line);
  white-space:nowrap;padding-top:10px;padding-bottom:10px}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.num.neg{color:var(--bad)}
tr.total td{border-top:1px solid var(--line);font-weight:620;background:transparent}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14.5px}

/* --- badges --------------------------------------------------------------- */
.badge{display:inline-block;font-size:11.5px;letter-spacing:0;text-transform:none;
  padding:3px 9px;border-radius:var(--radius-pill);font-weight:560;white-space:nowrap;
  line-height:1.35}
.badge.ok{background:var(--good-soft);color:var(--good)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.mute{background:var(--surface-2);color:var(--muted)}

/* --- forms ---------------------------------------------------------------- */
form.stack{display:flex;flex-direction:column;gap:16px}
label{display:block;font-size:13.5px;font-weight:560;color:var(--ink);margin-bottom:7px;
  letter-spacing:-.006em}
label .hint{font-weight:400;color:var(--muted);margin-left:6px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=file],input:not([type]),select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--field);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .15s ease,box-shadow .15s ease}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
option{background:var(--field);color:var(--ink)}
/* A soft ring in the page's own colour. The field itself stays plain: tinting
   it behind the text is what makes typed values hard to read. */
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:var(--ring);background:var(--field)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input[type=file]{padding:8px 10px;font-size:14px}
input[type=file]::file-selector-button{font:inherit;font-size:13.5px;margin-right:12px;
  padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);cursor:pointer}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
input[inputmode=decimal],input[inputmode=numeric]{text-align:right;
  font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.formactions{display:flex;gap:10px;align-items:center;margin-top:2px}

.linetable td{padding:6px 8px;border-bottom:0}
.linetable thead th{padding-left:8px;padding-right:8px}
.linetable input,.linetable select{padding:9px 11px;font-size:14.5px}
.linetable select{font-size:13.5px}
.linetable tbody tr:hover{background:transparent}

dl.kv{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;margin:0;font-size:14.5px}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.split{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
@media(max-width:560px){
  main{padding:22px 16px 80px}
  h1{font-size:24px}
  th,td{padding-left:16px;padding-right:16px}
  .panel > h2,.panel-body{padding-left:16px;padding-right:16px}
}
.muted{color:var(--muted)}
.small{font-size:13px}