/* Quatism shared app design system — one consistent shell across every page. */
:root{
  --bg:#0e1117; --bg2:#161b24; --panel:#1b222e; --panel2:#212a38; --line:#2b3444;
  --text:#e6edf6; --muted:#9fb0c4; --dim:#6b7a8d;
  --accent:#4fd1ff; --accent2:#7c9cff; --diverge:#4fd1ff; --converge:#ffb454;
  --good:#37d399; --bad:#ff6b6b; --warn:#ffcf5c;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:600;line-height:1.2;}
h1{font-size:26px;} h2{font-size:20px;} h3{font-size:16px;} h4{font-size:14px;}
code{background:var(--bg2);padding:1px 5px;border-radius:4px;font-size:.9em;color:var(--accent);}
.muted{color:var(--muted);} .dim{color:var(--dim);} .small{font-size:12px;}

/* top nav — identical on every page */
.qnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:4px;
  background:var(--bg2);border-bottom:1px solid var(--line);padding:0 clamp(18px,2vw,44px);height:52px;}
.qnav .brand{font-weight:700;font-size:18px;color:var(--text);margin-right:18px;letter-spacing:.3px;}
.qnav a.navlink{color:var(--muted);padding:8px 12px;border-radius:7px;font-weight:500;}
.qnav a.navlink:hover{color:var(--text);background:var(--panel);text-decoration:none;}
.qnav a.navlink.active{color:var(--text);background:var(--panel2);}
.qnav .spacer{flex:1;}
.qnav .who{color:var(--muted);font-size:12.5px;}
.qnav .who b{color:var(--text);}
.qnav .btn-auth{background:var(--accent);color:#08131b;border:none;padding:7px 14px;border-radius:7px;font-weight:600;cursor:pointer;}

/* layout */
/* Fill the screen that exists. A hard 1280px cap left half of a 2560px monitor blank — and roughly
   two thirds of an ultrawide — while the very things that benefit most from width (the worldline map,
   the spreadsheet lists) were the ones being squeezed. Prose stays readable via the max-width on
   .pagehead .sub rather than by starving the whole layout. */
.wrap{max-width:2560px;margin:0 auto;padding:22px clamp(18px,2vw,44px) 60px;}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.pagehead .sub{color:var(--muted);font-size:13.5px;margin-top:2px;max-width:70ch;}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cols>*,.cols3>*{min-width:0;}   /* let children shrink so inner overflow-x works */
@media(max-width:900px){.cols,.cols3{grid-template-columns:1fr;}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.panel + .panel{margin-top:16px;}
.panel .phead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.panel .phead h3{margin:0;}

/* list toolbar: search + sort */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.toolbar input[type=search],.toolbar input[type=text]{flex:1;min-width:120px;}
.field{background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:7px 10px;font-size:13px;outline:none;}
.field:focus{border-color:var(--accent);}
select.field{cursor:pointer;}

/* cards / rows */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.item{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;transition:border-color .12s;}
.item.click{cursor:pointer;} .item.click:hover{border-color:var(--accent);}
.item .t{font-weight:600;}
.item .meta{color:var(--dim);font-size:12px;margin-top:2px;}
.item .actions{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;}
.list-scroll{max-height:420px;overflow-y:auto;padding-right:4px;}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;font-weight:600;vertical-align:middle;}
.badge.pub{background:rgba(55,211,153,.15);color:var(--good);}
.badge.pending{background:rgba(155,170,190,.15);color:var(--muted);}
.badge.running{background:rgba(79,209,255,.15);color:var(--accent);}
.badge.done{background:rgba(55,211,153,.15);color:var(--good);}
.badge.sched{background:rgba(124,156,255,.16);color:var(--accent2);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);padding:6px 12px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;}
.btn:hover{border-color:var(--accent);text-decoration:none;}
.btn.primary{background:var(--accent);color:#08131b;border-color:var(--accent);font-weight:600;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.good{background:var(--good);color:#052018;border-color:var(--good);font-weight:600;}
.btn.sm{padding:4px 9px;font-size:12px;}
.btn.ghost{background:transparent;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{border-color:var(--line);}
/* icon buttons — the action-affordance standard across lists */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);border-radius:7px;cursor:pointer;padding:0;transition:all .12s;}
.ibtn:hover{color:var(--text);border-color:var(--accent);background:var(--panel);}
.ibtn.primary{color:var(--accent);}
.ibtn.danger:hover{color:var(--bad);border-color:var(--bad);background:rgba(255,107,107,.09);}
.ibtn:disabled{opacity:.35;cursor:not-allowed;} .ibtn:disabled:hover{color:var(--muted);border-color:var(--line);background:var(--panel2);}
.iconrow{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;}
.ico-lock{display:inline-flex;align-items:center;color:var(--dim);vertical-align:middle;margin-left:4px;}

.note{padding:9px 12px;border-radius:8px;font-size:13px;margin:8px 0;}
.note.info{background:rgba(79,209,255,.1);border:1px solid rgba(79,209,255,.25);}
.note.ok{background:rgba(55,211,153,.1);border:1px solid rgba(55,211,153,.3);color:var(--good);}
.note.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:var(--bad);}
.empty{color:var(--dim);font-style:italic;padding:10px 2px;}

/* spreadsheet-style data tables (QUI.dataTable) */
.qtable-wrap{overflow-x:auto;}
table.qtable{width:100%;border-collapse:collapse;font-size:13px;}
table.qtable th{text-align:left;color:var(--muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel);}
table.qtable th.sortable{cursor:pointer;user-select:none;} table.qtable th.sortable:hover{color:var(--text);}
table.qtable td{padding:6px 10px;border-bottom:1px solid rgba(43,52,68,.5);}
table.qtable tr.qrow.click{cursor:pointer;} table.qtable tr.qrow.click:hover td{background:var(--panel2);}
table.qtable tr.qgrp td{color:var(--accent2);font-size:12px;background:rgba(124,156,255,.06);font-weight:600;}
table.qtable tr.qsub td:first-child{padding-left:22px;}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.chartcard{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.chartcard .cl{color:var(--muted);font-size:12px;margin-bottom:6px;}
.chartcard .cv{font-size:20px;font-weight:700;}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0;}
.chips{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;}
.kv{color:var(--muted);font-size:12px;} .kv b{color:var(--text);}