/* OPEN UP tools — the gameboard's visual language (docs/gameboard-design-spec.md) applied to the
   tools pages. Same tokens as static/gameboard.css; --orange / --lav / --ink / --line / --bad / --lav2
   are aliases so the kit templates' inline colours keep working. No gradients, no shadows on cards. */
:root{
  --bg:#EFE6DA;        /* desk */
  --card:#FFF7EF;      /* warm cream: top bar, pills, pickers */
  --panel:#FFFFFF;     /* cards, table cells */
  --fg:#481A09;        /* coffee brown: headings, numbers */
  --body:#5C3A22;      /* body text, table cells */
  --muted:#A08874;     /* captions, hints */
  --muted2:#7A5B44;    /* secondary labels, inactive tabs */
  --accent:#FF8A3D;    /* bright orange: rules, hover, primary button */
  --blush:#F8DDE0;
  --lavender:#D9CFF0;  /* table header row */
  --ok:#2E7D4F;        /* tags and deltas only */
  --err:#C2542A;       /* errors, negative deltas */
  --border:#F0E3D4;    /* every hairline */
  --orange:var(--accent);--lav:var(--lavender);--ink:var(--fg);--line:var(--border);--bad:var(--err);--lav2:var(--card);
  --font-head:'Comfortaa','Quicksand',system-ui,-apple-system,sans-serif;
  --font-body:'Quicksand',system-ui,-apple-system,"Segoe UI",sans-serif;
  --top:52px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--body);font:13.5px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(255,138,61,.55);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}
b,strong{color:var(--fg);font-weight:700}
small{font-size:12px;color:var(--muted)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--border);padding:0 5px;border-radius:6px;font-size:11.5px;color:var(--fg)}
hr{border:0;border-top:1px solid var(--border);margin:14px 0}
p{margin:6px 0 10px}

/* ---- top bar: 52px cream, 3px orange rule; wordmark, app label, nav pills, Tools|Gameboard switch ---- */
nav.top{position:sticky;top:0;z-index:50;height:var(--top);display:flex;align-items:center;gap:8px;padding:0 24px;background:var(--card);border-bottom:3px solid var(--accent)}
nav.top .brand{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--fg);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
nav.top .brand .dot{color:var(--accent)}
nav.top .app{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:2px 10px 0 0;white-space:nowrap}
nav.top .links,nav.top .tabs{display:flex;gap:4px;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a,nav.top .tabs .tab{padding:5px 13px;border-radius:999px;color:var(--muted2);font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.3;text-decoration:none}
nav.top .links a:hover,nav.top .tabs .tab:hover{color:var(--fg)}
nav.top .links a.on,nav.top .tabs .tab.on{background:var(--panel);color:var(--fg);border-color:var(--border)}
nav.top .spacer{flex:1}
nav.top .appswitch{display:inline-flex;border:1px solid var(--border);border-radius:999px;background:var(--panel);overflow:hidden;flex:none}
nav.top .appswitch a{padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);text-decoration:none;line-height:1.4}
nav.top .appswitch a:hover{color:var(--fg)}
nav.top .appswitch a.on{background:var(--accent);color:#fff}
nav.top .me{color:var(--muted);font-size:12px;white-space:nowrap;margin-left:12px}
nav.top .me b{color:var(--muted2);font-weight:600}
nav.top .me a{color:var(--muted2);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:3px 10px;background:var(--panel);font-weight:600;margin-left:4px}
nav.top .me a:hover{color:var(--fg);border-color:var(--accent)}

/* ---- desk ---- */
main{max-width:1280px;margin:0 auto;padding:24px}
h1{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--fg);letter-spacing:.005em;margin:0 0 14px;line-height:1.3}
h1 small,h2 small{font-family:var(--font-body);font-weight:500;color:var(--muted);font-size:12.5px;margin-left:8px;letter-spacing:0;text-transform:none}
h2{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--fg);letter-spacing:.005em;margin:0 0 10px;line-height:1.35}
h2 + table.list,h2 + .card{margin-top:4px}
main>h2{margin-top:6px}
h3{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--fg);margin:0 0 8px}

/* ---- cards: white, hairline, radius 14, no shadow ---- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 18px 16px;margin-bottom:16px;color:var(--body)}
.card.narrow{max-width:420px}
.card.scroll{overflow:auto;max-height:calc(100vh - 140px);overscroll-behavior:contain;padding:0}
.card.scroll>h2{position:sticky;left:0;margin:0;padding:12px 18px 8px}
.card.scroll>table.list{margin:0}
.card.muted{opacity:.6}
.card.running{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,138,61,.25)}
.card>p:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.grid2>.card{margin-bottom:0}.grid2{margin-bottom:16px}
.row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.row>div:first-child{min-width:0;flex:1 1 320px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hint{color:var(--muted);font-size:12.5px;line-height:1.5}
p.hint{margin:4px 0 10px}
p.running{color:var(--fg)}
details summary{cursor:pointer;color:var(--muted2)}details summary:hover{color:var(--fg)}

/* ---- tables: lavender sticky Comfortaa header, Quicksand 13px cells, hairlines ---- */
table.list{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;color:var(--body)}
table.list th{background:var(--lavender);color:var(--fg);text-align:left;padding:6px 9px;font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;position:sticky;top:0;z-index:2;border-right:1px solid rgba(255,255,255,.55);vertical-align:bottom}
table.list th:last-child{border-right:none}
table.list th:first-child{border-top-left-radius:8px}table.list th:last-child{border-top-right-radius:8px}
table.list td{padding:6px 9px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:top;line-height:1.45}
table.list td:last-child{border-right:none}
table.list tr:last-child td{border-bottom:none}
table.list tr:hover td{background:#FDF3EA}
table.list th.num,table.list td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.list td.num b{font-family:var(--font-head);font-size:12.5px}
table.list tr.muted td{color:var(--muted)}
table.list.small{font-size:12px}table.list.small td{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.list.small th{font-size:10.5px}
table.list tr.total td{background:#FFF1E4;color:var(--fg);font-weight:700}
table.list td.neg{color:var(--err)}table.list td.pos{color:var(--ok)}
table.list td code{background:transparent;border:none;padding:0;font-size:11.5px}
table.list th.sortable a{color:inherit;text-decoration:none}table.list th.sortable a:hover{color:var(--accent)}
table.list th.sorted a{color:var(--accent)}table.list th .arr{font-size:10px;margin-left:3px}
td.msg{max-width:520px;color:var(--muted);white-space:normal}
td.msg details summary{color:var(--muted2);white-space:normal}

/* ---- status tags: pills, soft fills, semantic text only ---- */
.tag{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--muted2);font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap}
.tag.ok{background:#EAF3EC;border-color:rgba(46,125,79,.35);color:var(--ok)}
.tag.error,.tag.timeout,.tag.interrupted,.tag.cancelled{background:#FBEAE3;border-color:rgba(194,84,42,.35);color:var(--err)}
.tag.running{background:#FFE9D6;border-color:rgba(255,138,61,.5);color:var(--fg)}
.tag.queued{background:var(--lavender);border-color:var(--lavender);color:var(--fg)}
.pill{display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:999px;font-weight:700;background:var(--card);border:1px solid var(--border);color:var(--muted2);line-height:1.5}
.pill.manual{background:#EAF3EC;border-color:rgba(46,125,79,.35);color:var(--ok)}
.feedsrc{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--card);border:1px solid var(--border);color:var(--muted2);margin:0 4px 4px 0}
.feedsrc.ok{background:#EAF3EC;border-color:rgba(46,125,79,.35);color:var(--ok)}
.feedsrc.no{background:#FBEAE3;border-color:rgba(194,84,42,.35);color:var(--err)}
.dirty{color:var(--accent);font-weight:700;font-size:12px}
.dirty::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}

/* ---- forms: pills with hairlines; primary = solid orange ---- */
form.inline{display:inline-block;margin:0 4px 0 0}
form.inline.actions{display:inline-flex}
label{display:block;margin:10px 0;font-size:12.5px;font-weight:600;color:var(--muted2)}
label input,label select{display:block;width:100%;margin-top:5px;font-weight:500;color:var(--fg)}
label.chk{display:inline-flex;align-items:center;gap:6px;margin:0 12px 0 0;font-weight:500}
label.chk input{display:inline;width:auto;margin:0}
input,button,select,textarea{font:inherit;color:var(--fg)}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],input:not([type]),textarea{padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--panel);font-size:12.5px;line-height:1.4;outline:none}
input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=number]:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,138,61,.2)}
input[type=file]{font-size:12px;color:var(--muted2)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:12px;color:var(--fg);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px 12px;margin-right:8px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--panel);border-color:var(--accent)}
input::placeholder{color:var(--muted);opacity:1}
input[size]{width:auto;display:inline-block}
textarea{border-radius:10px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:14px;height:14px;vertical-align:-2px}
select{padding:5px 28px 5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A5B44' stroke-width='1.5'/></svg>") no-repeat right 10px center;font-weight:600;font-size:12px;appearance:none;-webkit-appearance:none;cursor:pointer;line-height:1.4}
select:hover{border-color:var(--accent)}
button{padding:5px 13px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--fg);font-weight:600;font-size:12px;line-height:1.4;cursor:pointer;white-space:nowrap}
button:hover{background:var(--panel);border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}button:disabled:hover{background:var(--card);border-color:var(--border)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover{background:var(--fg);border-color:var(--fg)}
button.danger{color:var(--err)}button.danger:hover{border-color:var(--err)}
button.link{border:none;background:none;color:var(--muted2);padding:0 4px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,138,61,.55);text-underline-offset:2px}
button.link:hover{color:var(--fg);background:none;text-decoration-color:var(--accent)}
button.link.danger{color:var(--err)}
a.btn{display:inline-block;padding:5px 13px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--fg);font-weight:600;font-size:12px;line-height:1.4;text-decoration:none;white-space:nowrap}
a.btn:hover{background:var(--panel);border-color:var(--accent)}

/* ---- messages: cream banners; ok / err only tint the text and edge ---- */
.flash,.banner{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:9px 14px;margin:0 0 16px;color:var(--fg);font-weight:500}
.banner{margin:0 0 12px}
p.banner{margin-top:6px}
.banner.ok{border-left-color:var(--ok);color:var(--ok)}
.banner.err{border-left-color:var(--err);color:var(--err)}
.banner a,.flash a{color:inherit}

/* ---- logs stay dark for readability ---- */
pre.log{background:var(--fg);color:#F6EDE4;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.5;overflow:auto;max-height:360px;white-space:pre-wrap;margin:8px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre.log:empty{display:none}
td.msg pre.log{margin-top:6px;max-width:720px}

/* ---- login: card centred on the desk ---- */
body.login main{min-height:calc(100vh - var(--top));display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:0;padding-bottom:48px}
body.login .card.narrow{width:360px;max-width:100%;padding:22px 26px 24px;margin:0}
body.login .card.narrow h1{margin-bottom:6px}
body.login .card.narrow label{margin:12px 0}
body.login .card.narrow button.primary{width:100%;margin-top:14px;padding:8px 14px;font-size:13px}
body.login .flash{width:360px;max-width:100%;margin:0 0 12px}

/* ---- bank transactions / bookkeeping (kit pages) ---- */
fieldset{border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:0 0 14px}
legend{color:var(--muted2);padding:0 6px;font-family:var(--font-head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0 0 12px}
.bar .f{display:flex;flex-direction:column}
.bar .f label,.bulkbar .f label{margin:0 0 4px;font-family:var(--font-head);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2)}
.bar input[type=text]{min-width:220px}
.bar>button,.bar>a.btn{margin-bottom:1px}
table.list input[type=text],table.list select{width:120px;padding:3px 9px;font-size:12px;border:1px solid var(--border);border-radius:999px;background-color:var(--panel);font-weight:500}
table.list select{padding-right:22px;background-position:right 7px center}
table.list select.cat-sel{width:170px}table.list select.sub-sel{width:110px}
table.list input[type=date]{padding:3px 9px;font-size:12px}
td.desc{max-width:340px;position:relative}td.desc .d1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
td.desc .d1x{display:none;position:absolute;top:4px;right:2px;border:0;background:none;padding:0 4px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
td.desc .d1x:hover{color:var(--accent);background:none}
td.desc.clipped .d1x{display:block}td.desc.clipped .d1{padding-right:16px}
td.desc.open .d1,td.desc.open .hint{white-space:normal;overflow:visible}td.desc .hint{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr.uncat td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.saved td{background:#EAF3EC!important}tr.failed td{background:#FBEAE3!important}
.bulkbar{display:none;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.bulkbar .f{display:flex;flex-direction:column}
.pager{display:flex;gap:14px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--muted2)}.pager .disabled{color:var(--muted)}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:900px){.panes{grid-template-columns:1fr}}
.pane{border:1px solid var(--border);border-radius:14px;background:var(--panel);min-height:200px}
.pane h2{margin:0;padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:baseline}
.pane h2 .sub{margin-left:auto;font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--muted)}
.pane.selected{border-color:var(--accent)}
ul.groups{list-style:none;margin:0;padding:8px;max-height:64vh;overflow:auto;min-height:120px;overscroll-behavior:contain}
ul.groups.drop-hot{background:rgba(217,207,240,.28)}
li.combo{border:1px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:grab;background:var(--card);overflow:hidden}
li.combo:hover{border-color:var(--accent)}
.chead{display:flex;gap:8px;align-items:center;padding:8px 10px}.chead .cat{font-weight:600;color:var(--fg)}
.chead .amt{margin-left:auto;font-family:var(--font-head);font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.chead .cnt{color:var(--muted);font-size:11px;white-space:nowrap}
.chead .chev{cursor:pointer;width:14px;display:inline-block;text-align:center;color:var(--muted);font-size:13px}li.combo.open .chev{transform:rotate(90deg)}
ul.mlist{list-style:none;margin:0;padding:6px 10px 8px 28px;border-top:1px solid var(--border);background:var(--panel);cursor:default;font-size:12px;color:var(--muted2)}
ul.mlist li{display:flex;gap:8px}ul.mlist .mamt{margin-left:auto;font-variant-numeric:tabular-nums}ul.mlist .mcnt{color:var(--muted)}
.grp{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.grp .top{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}.grp .top .day{margin-left:auto;color:var(--muted);font-size:12px}
.catrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:8px 0}
.catrow:last-child{border-bottom:none}
.catrow form{display:flex;gap:8px;align-items:center;margin:0}.catrow .use{color:var(--muted);font-size:12px;margin-left:auto}
.catrow input.nm{width:200px;font-weight:600}.catrow input.subs{min-width:260px}
.navbtns{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 14px}
table.lines td,table.lines th{padding:4px 6px}table.lines input,table.lines select{width:100%}
table.lines .rm{cursor:pointer;color:var(--muted);font-weight:700}table.lines .rm:hover{color:var(--err)}

/* ---- COGS check page tiles (KPI style: label, Comfortaa number) ---- */
.tiles{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.tile{border:1px solid var(--border);border-radius:14px;padding:10px 16px;min-width:120px;background:var(--panel)}
.tile .n{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--fg);line-height:1.2;font-variant-numeric:tabular-nums}
.tile .l{font-family:var(--font-head);color:var(--muted2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.tile.ok .n{color:var(--ok)}.tile.bad .n{color:var(--err)}
.over{color:var(--err)}.under{color:var(--accent)}
.card .scroll{max-height:360px;overflow:auto;border:1px solid var(--border);border-radius:12px;overscroll-behavior:contain;margin:4px 0 10px}
.card .scroll table.list th:first-child,.card .scroll table.list th:last-child,.card.scroll table.list th:first-child,.card.scroll table.list th:last-child{border-radius:0}