/* ALL COLORS AND SPACING. Look-and-feel changes go here. */
:root{
  --ink:#14241c; --muted:#5b6a61; --line:#dde4dd; --paper:#f1f4ef; --card:#fff;
  --g:#1b7a4b; --g-d:#0f4a2e; --g-tint:#e1f1e8; --mango:#f4b63f; --mango-bg:#fff4d6;
  --head:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;
  --body:system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;background:var(--paper);color:var(--ink)}
a{color:var(--g);text-underline-offset:3px}
a:hover{color:var(--g-d)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h2{font-size:1.75rem}h3{font-size:1.25rem}h4{font-size:1.05rem;margin-top:1.4em}
p{margin:.6em 0}
small{color:var(--muted)}
:focus-visible{outline:3px solid var(--mango);outline-offset:2px}

/* ---------- top bar ---------- */
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:1.3rem;color:var(--g-d);text-decoration:none;letter-spacing:-.02em}
.brand svg{width:34px;height:34px;flex:none}
.main-nav{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:8px}
.main-nav a:hover{background:var(--paper)}
.main-nav a.on{background:var(--g-tint);color:var(--g-d)}
.auth{margin-left:auto;display:flex;gap:8px;align-items:center}
.auth form{margin:0}
.auth .login{color:var(--ink);font-weight:600;text-decoration:none;padding:8px 12px;border-radius:8px}
.auth .login:hover{background:var(--paper)}
nav.sub{background:var(--g-d)}
nav.sub .sub-in{max-width:960px;margin:0 auto;padding:0 12px;display:flex;gap:2px;flex-wrap:wrap}
nav.sub a{color:#d7eadf;text-decoration:none;font-weight:600;font-size:.9rem;padding:10px 12px;border-bottom:3px solid transparent}
nav.sub a:hover{color:#fff}
nav.sub a.on{color:#fff;border-bottom-color:var(--mango)}

/* ---------- layout ---------- */
main{max-width:960px;margin:24px auto 56px;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:16px}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:6px}
.page-head h2{margin:0}
.page-head p{margin:4px 0 0;color:var(--muted)}
.msg{background:var(--mango-bg);border:1px solid #ecd28f;border-left:5px solid var(--mango);padding:12px 16px;border-radius:10px;margin-bottom:16px}
.notice{background:var(--mango-bg);border-color:#ecd28f;padding:14px 18px}
.notice b{font-family:var(--head)}
.x{overflow-x:auto;margin:0 -4px;padding:0 4px}

/* ---------- buttons & forms ---------- */
button,.btn{display:inline-block;font:inherit;font-weight:600;font-size:.95rem;padding:9px 18px;margin:3px 0;border:1px solid var(--g);border-radius:8px;background:var(--g);color:#fff;cursor:pointer;text-decoration:none;line-height:1.3}
button:hover,.btn:hover{background:var(--g-d);border-color:var(--g-d);color:#fff}
button.s,.btn.ghost{background:#fff;color:var(--ink);border-color:#c5cec7}
button.s:hover,.btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:#9faba3}
input,select,textarea{font:inherit;padding:9px 11px;margin:3px 0;border:1px solid #c5cec7;border-radius:8px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--g);outline:3px solid #1b7a4b33;outline-offset:0}
.card form input:not([type=checkbox]):not([type=hidden]),.card form select,.card form textarea{width:100%;max-width:460px}
textarea{min-height:92px;resize:vertical}
label{display:block;font-weight:500;margin:12px 0 2px}
label input:not([type=checkbox]),label select{display:block;margin-top:5px}
label:has(input[type=checkbox]){display:flex;gap:10px;align-items:flex-start;font-weight:400;max-width:560px}
input[type=checkbox]{width:18px;height:18px;margin:3px 0 0;accent-color:var(--g);flex:none}
.card form>br{display:none}
.card form>button{margin-top:14px}
.row form,form .row{margin:0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{font-weight:600;color:var(--muted);font-size:.85rem;text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:12px 10px;border-bottom:1px solid #edf1ed;text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
td{font-variant-numeric:tabular-nums}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.card td form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.card td form select,.card td form input:not([type=hidden]){width:auto;max-width:130px}
.card td form button{margin:0}

/* ---------- tags, bars, rows ---------- */
.tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#e8ede9;color:#3b4a41;font-size:.8rem;font-weight:600;vertical-align:middle}
.tag.t-open{background:var(--g-tint);color:#0f5a35}
.tag.t-consolidated{background:#fdecc0;color:#7a5200}
.tag.t-settled{background:#e3e8f0;color:#3a475a}
.bar{background:#e4eae5;border-radius:999px;height:10px;min-width:120px;overflow:hidden}
.bar i{display:block;height:10px;background:var(--g);border-radius:999px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #edf1ed;padding:10px 0}
.row span{flex:1 1 220px}
.row input{width:auto}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:36px 12px 20px;color:var(--muted)}
.empty b{display:block;font-family:var(--head);font-size:1.2rem;color:var(--ink);margin-bottom:4px}
.empty .btn{margin-top:14px}
.legal h3{margin-top:1.6em}.legal p{max-width:70ch}

@media (max-width:640px){
  .card{padding:16px}
  .auth{margin-left:0;width:100%}
  h2{font-size:1.5rem}
}
@media (prefers-reduced-motion:no-preference){
  button,.btn,.main-nav a{transition:background .15s,border-color .15s}
}

/* form details */
.card form small{display:block;margin:10px 0 2px}
.card form select+input[type=number]{margin-left:8px}
@media (max-width:640px){
  header.top{position:static}
  .x table{min-width:560px}
  .x td:nth-child(4){white-space:nowrap}
}