/* Dark by default. Neutrals and semantics vary by mode; accents vary by palette.
   Palettes never recolour semantics — amber means overrun everywhere. */
:root{
  --ink:#e6e4e0; --ink2:#a3a29c; --ink3:#75746f;
  --paper:#1c1f22; --canvas:#131619; --tile:#23272b;
  --line:#2d3236; --line2:#3d4348; --track:#2d3236; --overrow:#241f16;
  --amber:#e0a45c; --amber-l:#2e2415; --amber-text:#f0c48c;
  --rust:#e08a7d;  --rust-l:#2e1c19;  --rust-text:#f2ada2;
  --moss:#9cc47f;  --moss-l:#1e2718;  --moss-text:#bcd9a5;
  --accent:#4f9aa8; --accent-soft:#16333a; --accent-text:#8fcdd8;
  --rail:#0f2429; --rail-text:#cfe0e2; --rail-dim:#7fa3a9; --rail-on:#fff;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
[data-palette=indigo]{--accent:#7d87d8;--accent-soft:#23264a;--accent-text:#a9b0ee;--rail:#171a2e;--rail-text:#d4d6ea;--rail-dim:#8f93b8}
[data-palette=moss]{--accent:#6ba368;--accent-soft:#1e2f22;--accent-text:#9ecb9b;--rail:#14201a;--rail-text:#d3e0d4;--rail-dim:#8ba98d}
[data-palette=ember]{--accent:#c47a52;--accent-soft:#39241a;--accent-text:#e3a37c;--rail:#241610;--rail-text:#e3d6cf;--rail-dim:#b0958a}
[data-palette=mono]{--accent:#9a9a94;--accent-soft:#2a2a2a;--accent-text:#c6c6c0;--rail:#1a1a1a;--rail-text:#dcdcd8;--rail-dim:#95958f}

[data-mode=light]{
  --ink:#14171a; --ink2:#5a6470; --ink3:#8b949e;
  --paper:#fff; --canvas:#e9ecef; --tile:#f3f5f6;
  --line:#dfe3e7; --line2:#c6ccd3; --track:#e4e7ea; --overrow:#fdf7ee;
  --amber:#9d6216; --amber-l:#f8eddc; --amber-text:#6d430e;
  --rust:#8f342a;  --rust-l:#f8e5e1;  --rust-text:#6d251d;
  --moss:#3b6437;  --moss-l:#e6efe4;  --moss-text:#2b4a28;
  --accent:#125b66; --accent-soft:#e2eff0; --accent-text:#0d3f47;
  --rail:#0d3f47; --rail-text:#cfe0e2; --rail-dim:#8fb3b7;
}
[data-mode=light][data-palette=indigo]{--accent:#3b4396;--accent-soft:#e8e9f7;--accent-text:#272c66;--rail:#272c66;--rail-text:#d8daf0;--rail-dim:#9a9fce}
[data-mode=light][data-palette=moss]{--accent:#3f6b3a;--accent-soft:#e7f0e5;--accent-text:#2a4a27;--rail:#2a4a27;--rail-text:#d9e6d7;--rail-dim:#9dbb9a}
[data-mode=light][data-palette=ember]{--accent:#9c4f28;--accent-soft:#f8ebe3;--accent-text:#6f371b;--rail:#6f371b;--rail-text:#eeddd2;--rail-dim:#c2a08e}
[data-mode=light][data-palette=mono]{--accent:#3a3a38;--accent-soft:#eeeeec;--accent-text:#26262a;--rail:#26262a;--rail-text:#dededa;--rail-dim:#96968f}

@media (prefers-color-scheme: light){
  [data-mode=system]{
    --ink:#14171a; --ink2:#5a6470; --ink3:#8b949e;
    --paper:#fff; --canvas:#e9ecef; --tile:#f3f5f6;
    --line:#dfe3e7; --line2:#c6ccd3; --track:#e4e7ea; --overrow:#fdf7ee;
    --amber:#9d6216; --amber-l:#f8eddc; --amber-text:#6d430e;
    --rust:#8f342a; --rust-l:#f8e5e1; --rust-text:#6d251d;
    --moss:#3b6437; --moss-l:#e6efe4; --moss-text:#2b4a28;
    --accent:#125b66; --accent-soft:#e2eff0; --accent-text:#0d3f47;
    --rail:#0d3f47; --rail-text:#cfe0e2; --rail-dim:#8fb3b7;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{background:var(--rail);color:var(--rail-text)}
/* Wider than the content column on purpose: twelve admin links need the
   room, and wrapping to a second row is the graceful fallback below it. */
.top .in{max-width:1240px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top .brand{font-weight:600;font-size:14px;color:var(--rail-on);text-decoration:none}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{color:var(--rail-text);text-decoration:none;font-size:13px;padding:6px 9px;border-radius:4px}
.top nav a:hover{background:rgba(255,255,255,.08);color:var(--rail-on)}
.top nav a.on{background:rgba(255,255,255,.13);color:var(--rail-on);font-weight:500}
.top .who{font-size:12px;color:var(--rail-dim)}
.top .who a{color:var(--rail-text)}
.badge{display:inline-block;min-width:17px;padding:0 5px;border-radius:9px;background:var(--amber);color:#1c1f22;font-size:11px;font-weight:600;text-align:center;margin-left:4px}

.wrap{max-width:1040px;margin:0 auto;padding:20px 16px 60px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.hd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hd h1{margin:0;font:600 17px var(--sans)}
.hd h2{margin:0;font:600 15px var(--sans)}
.hd p{margin:3px 0 0;font-size:12px;color:var(--ink2)}
.pad{padding:16px 18px}
.pad+.pad{padding-top:0}
h2.sec{margin:0 0 10px;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.mut{color:var(--ink2)} .dim{color:var(--ink3)} .sml{font-size:13px} .xs{font-size:11.5px}

.btn{display:inline-flex;align-items:center;justify-content:center;font:500 14px var(--sans);min-height:44px;padding:0 15px;border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:5px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--ink3)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.g{background:var(--moss);border-color:var(--moss);color:var(--paper)}
.btn.d{border-color:var(--rust);color:var(--rust)}
.btn.sm{min-height:34px;font-size:13px;padding:0 11px}
.btn.big{width:100%;min-height:50px;font-size:16px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.btns{display:flex;gap:9px;flex-wrap:wrap}

.pill{display:inline-block;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:4px;background:var(--tile);color:var(--ink2)}
.pill.a{background:var(--amber-l);color:var(--amber-text)}
.pill.r{background:var(--rust-l);color:var(--rust-text)}
.pill.g{background:var(--moss-l);color:var(--moss-text)}
.pill.b{background:var(--accent-soft);color:var(--accent-text)}

table{width:100%;border-collapse:collapse}
th{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);text-align:left;padding:9px 9px 9px 0;border-bottom:1px solid var(--line2)}
td{padding:11px 9px 11px 0;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
tr:last-child td{border-bottom:0}
.r{text-align:right} td.r,th.r{padding-right:0}
tr.over td{background:var(--overrow)}

.meter{height:8px;background:var(--track);border-radius:3px;display:flex;overflow:hidden}
.meter i{display:block;height:100%}
.meter .f{background:var(--accent)} .meter .o{background:var(--amber)} .meter .n{background:var(--line2)}

label.lb{display:block;font-size:12px;color:var(--ink2);margin-bottom:5px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],select,textarea{
  font:400 15px var(--sans);padding:10px 11px;border:1px solid var(--line2);border-radius:5px;
  background:var(--canvas);color:var(--ink);width:100%;min-height:44px}
textarea{min-height:82px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-text);outline-offset:-1px;border-color:var(--accent)}
.fld{margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.hint{font-size:12px;color:var(--ink3);margin-top:5px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;padding:7px 0}
.chk input{width:auto;min-height:0;margin-top:3px}

.note{border-radius:6px;padding:12px 14px;font-size:14px;line-height:1.55;margin-bottom:14px}
.note.a{background:var(--amber-l);color:var(--amber-text)}
.note.r{background:var(--rust-l);color:var(--rust-text)}
.note.b{background:var(--accent-soft);color:var(--accent-text)}
.note.g{background:var(--moss-l);color:var(--moss-text)}
.note.n{background:var(--tile);color:var(--ink2)}
.note :first-child{margin-top:0} .note :last-child{margin-bottom:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.tile{background:var(--tile);border-radius:7px;padding:12px 14px}
.tile .k{font-size:12px;color:var(--ink2)}
.tile .v{font:500 24px var(--mono);font-variant-numeric:tabular-nums;margin-top:3px}
.tile .v.a{color:var(--amber)}

.card{border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:10px}
.card.flag{border-color:var(--rust)}
.card .top-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card .top-line b{font-weight:500;font-size:16px}
.card .top-line .h{font:500 16px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.tabs{display:flex;gap:16px;padding:0 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:11px 0;font-size:14px;color:var(--ink2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);border-color:var(--accent);font-weight:500}

.rev{border-left:2px solid var(--line2);padding-left:13px;margin-bottom:12px}
.rev .h{font-weight:500;font-size:13px}
.mono-line{font:400 13px/1.6 var(--mono);background:var(--tile);border:1px solid var(--line);border-radius:5px;padding:11px 13px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink2)}
.ok{color:var(--moss);font-weight:500} .bad{color:var(--rust);font-weight:500}
.foot{padding:15px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.stack>*+*{margin-top:10px}

/* Single column everywhere. Two form layouts is not worth maintaining. */
@media(max-width:640px){
  .grid,.grid3{grid-template-columns:1fr}
  .wrap{padding:14px 12px 50px}
  .hd,.pad,.foot{padding-left:14px;padding-right:14px}
  table.stackable thead{display:none}
  table.stackable tr{display:block;border:1px solid var(--line);border-radius:8px;padding:11px;margin-bottom:9px}
  table.stackable td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:left}
  table.stackable td:before{content:attr(data-label);color:var(--ink2);font-size:12px}
  table.stackable td.r{text-align:right}
}

/* Invoices and reports get printed; a dark page wastes toner and reads broken. */
@media print{
  :root{--ink:#111;--ink2:#444;--ink3:#666;--paper:#fff;--canvas:#fff;--tile:#f4f4f4;
        --line:#ccc;--line2:#999;--track:#e8e8e8;--overrow:#fff8ee;
        --amber:#8a5510;--amber-l:#fbf1e2;--amber-text:#5e3a0c;
        --accent:#123;--accent-soft:#eef2f5;--accent-text:#123}
  .top,.btns,.foot{display:none!important}
  .panel{border:0}
}

/* ---- v2 layout hooks -------------------------------------------------- */
.narrow{max-width:460px;margin:40px auto}
.spaced{margin-bottom:18px}
.gap-top{margin-top:10px}
.gap-small{margin-top:4px}
.block{display:block}
.right{text-align:right}
.big-number{font-size:22px;font-weight:600}
.warn{color:var(--amber)}
.strong{font-weight:600;color:var(--ink1)}
.indent{padding-left:20px}
tr.totals td{border-top:2px solid var(--line);font-weight:600}
tr.overrun td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.card.overrun{box-shadow:inset 3px 0 0 var(--amber)}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
  margin:22px 0 10px;font-weight:600}
.chk.choice{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:8px;
  align-items:flex-start}
.chk.choice.chosen{border-color:var(--accent);background:var(--surface2)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
pre.code{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:12px;
  overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- invoicing, print and misc hooks ---------------------------------- */
nav .sep{color:var(--ink3);opacity:.5;padding:0 2px;user-select:none}
input.inline{display:inline-block;width:auto;max-width:150px;margin-right:6px}
.g{color:var(--moss)}

/* Printed documents are always light: an invoice has to be legible on paper
   and in whatever the recipient opens it with. */
.paper{background:#ffffff;color:#14171a;max-width:800px;margin:24px auto;padding:36px;
  border-radius:8px}
.paper h1{font-size:20px;margin:0 0 4px;color:#14171a}
.paper .mut,.paper .dim{color:#5a6470}
.paper table{width:100%;border-collapse:collapse;font-size:13px;margin-top:20px}
.paper th{text-align:left;border-bottom:2px solid #14171a;padding:8px 0;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;color:#5a6470}
.paper td{padding:8px 0;border-bottom:1px solid #e4e7ea}
.paper tr.totals td{border-top:2px solid #14171a;border-bottom:none;font-weight:600}
.paper .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#5a6470;
  margin-bottom:2px}
.paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:20px;border-bottom:2px solid #14171a}
.paper-meta{display:flex;justify-content:space-between;gap:30px;margin-top:20px}
.paper .num{font-family:'IBM Plex Mono',monospace}
.paper .r{text-align:right}
.paper .strong{color:#14171a;font-weight:600}

@media print{
  body{background:#ffffff}
  .paper{margin:0;padding:0;max-width:none;border-radius:0}
  .top,.btns,.note{display:none}
}

/* The admin nav grew from 6 links to 12 when invoicing and payments landed.
   Left wrapping, it becomes a tall column on a phone and shoves the brand
   out of place. Below 700px the bar keeps the brand and account on the first
   line and puts the links on their own scrollable row. */
@media (max-width:700px){
  .top .in{gap:8px 10px;padding:10px 12px}
  .top .brand{flex:1 1 auto;min-width:0}
  .top .who{order:2;flex:0 0 auto}
  .top nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;min-width:0;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{height:0;display:none}
  .top nav a{white-space:nowrap;flex:0 0 auto}
  .top nav .sep{display:none}
}