/* Penny, Paper Trails brand: Midnight #04333D, Spruce #12A085, Epilogue */
:root{
  --midnight:#04333D; --spruce:#12A085; --spruce-dark:#0C7A65;
  --ink:#15232A; --muted:#5A6B72; --line:#DCE3E2; --line-soft:#ECF0EF;
  --bg:#F4F6F5; --card:#FFFFFF;
  --mint:#E2F4EE; --fog:#EEF1F2; --sky:#E4EFF7; --mist:#F6F8F8;
  --bad:#B42318; --bad-bg:#FDECEA; --warn:#8A5A00; --warn-bg:#FFF4DB;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Epilogue,system-ui,sans-serif;font-size:15px;line-height:1.45}
a{color:var(--spruce-dark)} a:hover{color:var(--midnight)}
h1{font-size:26px;margin:0 0 4px;font-weight:600} h2{font-size:17px;margin:0 0 12px;font-weight:600}
.muted{color:var(--muted)} .small{font-size:13px} .r{text-align:right} .nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap} .neg{color:var(--bad)}

.shell{display:flex;min-height:100vh}
.nav{background:var(--midnight);color:#fff;width:236px;flex:0 0 236px;padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.nav a,.nav .soon{display:block;padding:9px 12px;border-radius:6px;color:#DDEBEA;text-decoration:none;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{background:var(--spruce);color:#fff;font-weight:600}
.nav .soon{color:#7FA0A4;cursor:default}
.nav a.brand{display:block;padding:4px 12px 22px;background:none}
.nav a.brand:hover{background:none}
.brand img{display:block;height:46px;width:auto}
.login-logo{margin:0 0 4px} .login-logo img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.error-logo{display:block;height:44px;width:auto}
.center{text-align:center}
.who{margin-top:auto;padding:16px 12px 0;border-top:1px solid rgba(255,255,255,.15);font-size:14px}
.who .muted{color:#9FBDBF}
.link{background:none;border:0;padding:0;color:var(--spruce-dark);cursor:pointer;font:inherit;text-decoration:underline}
.nav .link{color:#9FE3CF}
.main{flex:1;min-width:0;padding:28px 32px;display:flex;flex-direction:column;gap:18px}
.solo{min-height:100vh;display:grid;place-items:center;padding:16px}

.page-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end}
.page-head p{margin:4px 0 0;max-width:820px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tile.bad{background:var(--bad-bg);border-color:#F5C2BD} .tile.warn{background:var(--warn-bg);border-color:#F1D9A0}
.tile-label{font-size:13px;color:var(--muted)} .tile-num{font-size:24px;font-weight:600;margin-top:2px}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--muted);font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:var(--mist)}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pill.ok{background:var(--mint);color:#0B6B55} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.fog{background:var(--fog);color:var(--muted)}

.flash{padding:11px 14px;border-radius:8px;border:1px solid;font-size:14px}
.flash.ok{background:var(--mint);border-color:#B6E3D4} .flash.error{background:var(--bad-bg);border-color:#F5C2BD;color:#7A1A12}
.flash.warn{background:var(--warn-bg);border-color:#F1D9A0}
.flash ul{margin:6px 0 0;padding-left:18px}

.btn{display:inline-block;padding:9px 14px;border:1px solid #C5D0CE;border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--spruce)}
.btn.primary{background:var(--spruce);border-color:var(--spruce);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--spruce-dark)}
.btn.small{padding:5px 10px;font-size:13px} .btn.wide{display:block;text-align:center}
input,select{font:inherit;font-size:14px;padding:8px 9px;border:1px solid #C5D0CE;border-radius:7px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--spruce);outline-offset:1px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.grid-form.tight{grid-template-columns:1fr;min-width:260px;margin-top:10px}
.grid-form.inline{margin-top:14px}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
details summary{cursor:pointer} ul.plain{margin:0;padding-left:18px}

.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login-card .dev{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:14px}

@media (max-width:800px){
  .shell{flex-direction:column} .nav{width:auto;flex:none;flex-direction:row;flex-wrap:wrap;padding:10px}
  .nav a.brand{padding:6px 10px} .brand img{height:30px} .who{margin:0;border:0;padding:6px 10px} .main{padding:18px 16px} .nav .soon{display:none}
}

.match-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-items:end;position:sticky;top:0;z-index:2}
.small-num{font-size:20px}
tr.future td{color:var(--muted)}
td input[type=checkbox]{width:18px;height:18px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.lines td{vertical-align:middle} .lines input{width:100%}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0} .kv dt{color:var(--muted);font-size:13px} .kv dd{margin:0}
.decide{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.decide label{flex:1;min-width:220px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}