/* Smith KPI — "Black & gold leaf" (Smitty's)
   The owner paints everything black with gold-leaf lettering and likes blue
   highlights. Black for every surface, gold leaf for titles, the brand and the
   headline figures, blue for anything you can act on or that marks "now"
   (links, the active page, focus, hover, today's column, chart lines).

   The older names (spruce, orange) are kept as the variable names the rest of
   the stylesheet uses; their values are the new palette:
     --spruce    sidebar black           --spruce-2  blue highlight
     --orange    gold leaf               --orange-ink light gold (text on black) */

:root {
  color-scheme: dark;
  --page: #0c0c0d;
  --panel: #151517;
  --panel-2: #1d1d20;
  --ink: #ece8df;
  --ink-2: #bdb8ad;
  --ink-3: #8f8a80;
  --rule: #2d2d31;
  --rule-2: #232327;
  --spruce: #000000;
  --spruce-2: #4a9eff;
  --spruce-3: #2f5f94;
  --spruce-tint: rgba(74, 158, 255, .13);
  --orange: #c9a54c;
  --orange-ink: #e6c97e;
  --orange-tint: rgba(201, 165, 76, .13);
  --good: #52c48c;
  --good-bg: rgba(82, 196, 140, .15);
  --warn: #e6c97e;
  --warn-bg: rgba(230, 201, 126, .14);
  --bad: #f26b5b;
  --bad-bg: rgba(242, 107, 91, .15);
  /* gold leaf: lighter at the top edge, deeper underneath, like leaf laid on a sign */
  --gold-leaf: linear-gradient(180deg, #f6e3a1 0%, #d9b45a 46%, #b38a35 100%);
  --blue: #4a9eff;
  --ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--spruce-2); text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--spruce-2); outline-offset: 2px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; margin: 8px 0 0; }
code, .code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--panel-2); border: 1px solid var(--rule-2); padding: 1px 6px; border-radius: 5px; }
pre.code { display: block; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--spruce); color: #d7e2dc;
  display: flex; flex-direction: column; padding: 20px 16px 18px;
}
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; padding: 0 6px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-mark rect { fill: var(--orange); }
.brand-mark path, .brand-mark circle { fill: var(--spruce); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-weight: 700; font-size: 15px; letter-spacing: .005em; }
.brand-text small { font-size: 13px; color: #9fb7ab; }
.side-toggle { display: none; }
.side-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.daypick { padding: 16px 6px 6px; display: flex; flex-direction: column; gap: 6px; }
.daypick label { font-size: 13px; color: #9fb7ab; }
.daypick select { background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm); padding: 8px 10px; font: 500 14px var(--ui); }
.daypick select option { color: var(--ink); }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; }
.side-nav > a { color: #d7e2dc; text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); font-weight: 500; }
.side-nav > a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav > a.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
.side-sections { display: flex; flex-direction: column; margin: 4px 0 8px 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); }
.side-sections a { color: #a9bdb3; text-decoration: none; font-size: 13.5px; padding: 4px 8px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sections a:hover { color: #fff; background: rgba(255,255,255,.05); }

.side-sync { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid rgba(255,255,255,.09); }
.syncstate { margin: 0 0 10px; font-size: 13px; color: #b9cbc1; display: flex; align-items: center; gap: 8px; }
.syncstate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fc597; flex: none; }
.syncstate.bad::before { background: #ef8a7c; }
.syncstate.busy::before { background: var(--orange); animation: blink 1s infinite alternate; }
@keyframes blink { to { opacity: .25; } }
.syncnote { margin: -4px 0 10px 16px; font-size: 12.5px; color: #e9b3aa; }
.syncnote a { color: #fff; }
.syncform { margin: 0; }
.btn { font: 600 14px var(--ui); cursor: pointer; border-radius: var(--r-sm); padding: 8px 14px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--spruce-2); }
.side .btn { width: 100%; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.side .btn:hover { background: rgba(255,255,255,.14); }
.btn.primary { background: var(--spruce-2); color: #fff; border-color: var(--spruce-2); }
.btn.primary:hover { background: var(--spruce); }
.btn[disabled] { opacity: .6; cursor: progress; }

.content { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 30px 36px 36px; flex: 1; }
.foot { max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 36px 28px; color: var(--ink-3); font-size: 13px; }

.flash { margin: 18px 36px 0; padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; }
main .flash { margin: 0 0 18px; }
.flash.good { background: var(--good-bg); color: #194d31; }
.flash.bad { background: var(--bad-bg); color: #6b1d14; }
.flash.warn { background: var(--orange-tint); color: #5d3a06; }

/* ---------------------------------------------------------------- page heads */
.dayhead { margin: 0 0 22px; }
.dayhead h1 { margin: 0; font: 600 36px/1.1 var(--ui); letter-spacing: -.012em; }
.facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--ink-3); font-size: 14px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.pagehead h1 { margin: 0; font: 600 30px/1.15 var(--ui); letter-spacing: -.01em; }
.pagehead .sub { margin: 6px 0 0; color: var(--ink-3); max-width: 75ch; }
.pagehead .sub a { color: var(--ink-3); }

/* ---------------------------------------------------------------- sections */
.sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.sec { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px 24px 20px; min-width: 0; }
.sec.full { grid-column: 1 / -1; }
.sec.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.sec-side { border-left: 1px solid var(--rule-2); padding-left: 26px; min-width: 0; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-titles { min-width: 0; max-width: 80ch; }
.sec-head h2 { margin: 0; font: 600 19px/1.25 var(--ui); letter-spacing: -.004em; }
.sec-side .sec-head h2 { font-size: 17px; }
.sec-desc { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; }
.sec-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.tag { font-size: 13px; font-weight: 600; color: var(--spruce-2); background: var(--spruce-tint); padding: 3px 10px; border-radius: 99px; }
.src { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.src::before { content: "From "; }
.src:hover { color: var(--spruce-2); text-decoration: underline; }
.details { cursor: pointer; font: 600 13px var(--ui); color: var(--spruce-2); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 5px 11px; }
.details:hover { border-color: var(--spruce-2); background: var(--spruce-tint); }
.note { margin: 12px 0 0; color: var(--ink-3); font-size: 13px; max-width: 110ch; }
.caption { margin: 0 0 10px; color: var(--ink-3); font-size: 13.5px; }
.callout { margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--orange); }
.callout p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 95ch; }
.open { display: inline-block; font-size: 13.5px; font-weight: 600; margin: 12px 0 0; }

/* ---------------------------------------------------------------- pace rail (the one bold element) */
.pace {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 4px 0 30px; margin: 0 0 14px; border-radius: var(--r-md);
}
.pace-copy { display: block; font-size: 17px; color: var(--ink-2); margin-bottom: 30px; }
.pace-copy b { font: 600 30px/1 var(--num); color: var(--ink); letter-spacing: -.01em; margin-right: 2px; font-variant-numeric: tabular-nums; }
.pace-copy em { font-style: normal; font-weight: 600; }
.pace-copy em.good { color: var(--good); }
.pace-copy em.bad { color: var(--bad); }
.rail { position: relative; display: block; height: 16px; background: var(--rule-2); border-radius: 4px; }
.rail .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--spruce-2); border-radius: 4px 0 0 4px; }
.rail .proj { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--spruce-3) 0 5px, #b8cdc2 5px 10px); }
.rail .today, .rail .goal, .rail .finish { position: absolute; top: -7px; bottom: -7px; width: 0; }
.rail .today { border-left: 3px solid var(--orange); margin-left: -1.5px; }
.rail .goal { border-left: 2px solid var(--ink); margin-left: -1px; }
.rail .finish { border-left: 2px dashed var(--spruce-2); margin-left: -1px; }
.rail i { font-style: normal; }
.rail span { position: absolute; white-space: nowrap; font-size: 13px; font-weight: 600; }
.rail .today span { bottom: calc(100% + 4px); left: -3px; color: var(--orange-ink); }
.rail .finish span { bottom: calc(100% + 4px); right: 0; color: var(--spruce-2); }
.rail .goal span { top: calc(100% + 4px); right: -1px; color: var(--ink); }
.pace:hover .rail { box-shadow: 0 0 0 4px var(--spruce-tint); }

/* ---------------------------------------------------------------- widgets */
/* Rules between widgets: each widget draws its own left and top rule, shifted
   1px out; the container clips the ones that fall on its outer edge, so wrapped
   rows never show a stray rule. */
.widgets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2);
  margin: 0 0 16px; overflow: hidden;
}
.widgets.hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.widget {
  position: relative; text-align: left; background: none; border: 0;
  border-left: 1px solid var(--rule-2); border-top: 1px solid var(--rule-2); margin: -1px 0 0 -1px;
  padding: 14px 18px 15px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.widget .w-l { font-size: 13.5px; color: var(--ink-3); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.widget.good .w-l::before, .widget.bad .w-l::before, .widget.warn .w-l::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.widget.good .w-l::before { background: var(--good); }
.widget.bad .w-l::before { background: var(--bad); }
.widget.warn .w-l::before { background: var(--orange); }
.widget .w-v { font: 600 27px/1.15 var(--num); letter-spacing: -.005em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget .w-s { font-size: 13px; color: var(--ink-3); }
.widget.good .w-s { color: var(--good); }
.widget.bad .w-s { color: var(--bad); }
.widget.warn .w-s { color: var(--warn); }
.widgets.hero .widget .w-v { font-size: 32px; }
.widgets.hero { margin-top: 2px; }
.chip { font-style: normal; font-weight: 600; font-size: 12.5px; padding: 1px 7px; border-radius: 99px; margin-right: 3px; font-variant-numeric: tabular-nums; }
.chip span { font-size: 9px; vertical-align: 1px; }
.chip.up { background: var(--good-bg); color: var(--good); }
.chip.down { background: var(--bad-bg); color: var(--bad); }
.chip.flat { background: var(--panel-2); color: var(--ink-3); }
.drill { cursor: pointer; }
.widget.drill { transition: background-color .12s; }
.widget.drill:hover { background: var(--panel-2); }
.widget.drill:hover .w-v { color: var(--spruce-2); }
.widget.drill:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- key/value + tables */
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font: 600 18px var(--num); font-variant-numeric: tabular-nums; text-align: right; }
.kv.drill:hover dd { color: var(--spruce-2); }

.tablewrap { overflow-x: auto; margin-top: 4px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: bottom; }
.grid td { padding: 8px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.grid .n { text-align: right; font-family: var(--num); font-size: 15px; font-variant-numeric: tabular-nums; }
.grid th.n { font-family: var(--ui); font-size: 12.5px; }
.grid th:first-child, .grid td:first-child { padding-left: 2px; }
.grid td:first-child { font-weight: 500; }
.grid td.empty { color: #c3c8c4; }
.grid td.long { white-space: normal; color: var(--ink-3); font: 13px var(--ui); text-align: left; }
.grid tr.total td { font-weight: 700; border-top: 1px solid var(--ink-2); border-bottom: 0; }
.grid tr.sub td { color: var(--ink-3); font-size: 13.5px; }
.grid tr.sub td.n { font-size: 14px; }
.grid tr.sub td:first-child { padding-left: 18px; font-weight: 400; }
.grid .today { background: var(--orange-tint); }
.grid th.today { color: var(--orange-ink); }
.grid td.up { color: var(--good); }
.grid td.down { color: var(--bad); }
.grid td.good { color: var(--good); font-weight: 600; }
.grid td.warn { color: var(--warn); font-weight: 600; }
.grid td.bad { color: var(--bad); font-weight: 600; }
.grid td.meter { min-width: 110px; }
.grid td.meter span { display: block; }
.grid td.meter > i { display: block; height: 4px; background: var(--rule-2); border-radius: 2px; margin-top: 3px; }
.grid td.meter > i > i { display: block; height: 100%; background: var(--spruce-2); border-radius: 2px; }
.grid tbody tr.drill:hover td { background: var(--panel-2); }
.grid tbody tr.drill:hover td.today { background: #f7e7c7; }
.grid tr.drill td:first-child { color: var(--spruce-2); }
.grid tr.drill.sub td:first-child { color: var(--ink-3); }
.grid tr.drill:focus-visible { outline-offset: -2px; }
.pill { display: inline-block; font: 600 12.5px var(--ui); padding: 2px 10px; border-radius: 99px; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }

.chartbox { position: relative; height: 300px; margin-top: 6px; }
details.raw { margin-top: 12px; }
details.raw summary { cursor: pointer; color: var(--spruce-2); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- other pages */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 12px; font: 600 19px var(--ui); }
.panel p { max-width: 80ch; }
.tabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.tabgrid a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: var(--ink); }
.tabgrid a:hover { color: var(--spruce-2); }
.tabgrid a small { color: var(--ink-3); font: 500 14px var(--num); font-variant-numeric: tabular-nums; }
.tabgrid a.emptytab { color: var(--ink-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
select, input[type=text], input[type=search], input[type=number], input[type=url] { font: 15px var(--ui); padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.seg a { padding: 6px 12px; font-size: 14px; text-decoration: none; color: var(--ink-2); background: #fff; }
.seg a.on { background: var(--spruce-2); color: #fff; }
.grid.data th a { color: inherit; text-decoration: none; }
.grid.data th a:hover { color: var(--spruce-2); }
.grid.data th .arr { color: var(--orange-ink); }
.grid.sheet td.rn, .grid.sheet th.rn { color: #aab1ac; font-size: 12px; text-align: right; width: 1%; font-weight: 400; }
.grid.sheet td.t-head { font-weight: 700; }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.pager a { padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--r-sm); text-decoration: none; background: #fff; }
.status-ok { color: var(--good); font-weight: 600; }
.status-error { color: var(--bad); font-weight: 600; }
.status-running { color: var(--warn); font-weight: 600; }
.form-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.form-row input { width: 100%; }
.hint { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; }
ol.steps { padding-left: 20px; margin: 8px 0; }
ol.steps li { margin-bottom: 6px; }
.empty-state { text-align: center; padding: 90px 20px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 300; max-width: 380px; background: var(--spruce); color: #fff; padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; box-shadow: 0 12px 32px rgba(15,25,20,.25); }
.toast.bad { background: var(--bad); }

/* ---------------------------------------------------------------- detail drawer */
.modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(18, 28, 23, .38); }
.modal-bg[hidden] { display: none; }
.modal {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(1000px, 100%);
  background: var(--page); display: flex; flex-direction: column;
  box-shadow: -18px 0 50px rgba(15, 25, 20, .22);
  animation: slide .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes slide { from { transform: translateX(40px); opacity: .3; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 16px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.modal-head .grow { flex: 1; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #b5bcb7; }
.crumbs button { background: none; border: 0; padding: 0; color: var(--spruce-2); cursor: pointer; font-size: 13px; }
.crumbs button:hover { text-decoration: underline; }
.modal-head h3 { margin: 0; font: 600 25px/1.2 var(--ui); letter-spacing: -.008em; }
.modal-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.modal-head .srcs { display: flex; gap: 14px; margin-top: 8px; }
.icon-btn { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--spruce-2); color: var(--spruce-2); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.modal-body.loading { opacity: .45; pointer-events: none; }

.d-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.d-tiles > div { padding: 14px 18px; border-left: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; }
.d-tiles > div:first-child { border-left: 0; }
.d-tiles span { font-size: 13px; color: var(--ink-3); }
.d-tiles b { font: 600 24px/1.2 var(--num); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-tiles small { font-size: 13px; color: var(--ink-3); }
.d-tiles .focus { background: var(--orange-tint); }
.d-tiles .focus::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--orange); }
.d-tiles .good b, .d-tiles .good small { color: var(--good); }
.d-tiles .bad b, .d-tiles .bad small { color: var(--bad); }
.d-tiles .warn small { color: var(--warn); }
.d-sec { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px 20px 18px; margin-bottom: 16px; min-width: 0; }
.d-sec h4 { margin: 0 0 8px; font: 600 16px var(--ui); }
.d-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.d-grid { font-size: 13.5px; }
.d-grid td { padding: 7px 10px; }
.d-grid .n { font-size: 14.5px; }
.d-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.d-bar { display: grid; grid-template-columns: minmax(110px, 26%) 1fr 210px; gap: 14px; align-items: center; padding: 6px 6px; border-radius: var(--r-sm); font-size: 14px; }
.d-bar.drill:hover { background: var(--panel-2); }
.d-bar.drill:hover .l { color: var(--spruce-2); }
.d-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.d-bar .t { position: relative; height: 12px; background: var(--rule-2); border-radius: 3px; }
.d-bar .t i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--spruce-2); border-radius: 3px; }
.d-bar .t i.good { background: var(--good); }
.d-bar .t i.bad { background: var(--bad); }
.d-bar .t i.warn { background: var(--orange); }
.d-bar .t em { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); }
.d-bars.diverge .d-bar .t::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px solid var(--ink-3); }
.d-bar .v { font: 500 14.5px var(--num); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .sections { grid-template-columns: minmax(0, 1fr); }
  .sec.has-side { grid-template-columns: minmax(0, 1fr); }
  .sec-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-2); padding-top: 18px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; z-index: 50; height: auto; padding: 10px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .brand { border: 0; padding: 0; flex: 1; }
  .side-toggle { display: block; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; font-weight: 600; }
  .side-body { display: none; width: 100%; padding-top: 8px; }
  .side.open .side-body { display: flex; }
  .side-sections { display: none; }
  main { padding: 20px 16px 28px; }
  .foot { padding: 0 16px 24px; }
  .flash { margin: 14px 16px 0; }
  .dayhead h1 { font-size: 28px; }
  .sec { padding: 18px 16px; }
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widgets.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget { padding: 12px 12px 13px; }
  .widget .w-v, .widgets.hero .widget .w-v { font-size: 24px; }
  .pace-copy { font-size: 15px; }
  .pace-copy b { font-size: 24px; }
  .rail .today span { display: none; }
  .d-two { grid-template-columns: minmax(0, 1fr); }
  .d-bar { grid-template-columns: minmax(80px, 34%) 1fr; }
  .d-bar .v { grid-column: 1 / -1; text-align: left; margin-top: -4px; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .pagehead { flex-direction: column; align-items: flex-start; }
}

/* Keep the row label in view when a wide table scrolls sideways. */
.sec .tablewrap .grid th:first-child, .sec .tablewrap .grid td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.sec .tablewrap .grid tr.drill:hover td:first-child { background: var(--panel-2); }
.sec .tablewrap .grid td:first-child { box-shadow: 1px 0 0 var(--rule-2); }
/* A widget whose value is a name rather than a number. */
.widget.is-text .w-v { font: 600 19px/1.25 var(--ui); white-space: normal; padding-top: 5px; }

/* ================================================================ V2: pages */
.side-group { margin: 16px 10px 6px; font-size: 13px; color: #8ea89b; font-weight: 500; }
.side-group:first-child { margin-top: 2px; }
.side-nav > a { font-size: 14.5px; padding: 7px 10px; }
.side-nav > a.main { font-weight: 600; }

.crumb { margin: 0 0 4px; font-size: 14px; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--spruce-2); text-decoration: underline; }
.page-title h1 { font-size: 32px; }
.page-sections { grid-template-columns: minmax(0, 1fr); }

/* The section's detail view, laid out on the page. */
.inline-detail .d-sec { border: 0; border-top: 1px solid var(--rule-2); border-radius: 0; padding: 18px 0 4px; margin: 0; }
.inline-detail .d-two { gap: 28px; }
.inline-detail .d-tiles { border-radius: var(--r-md); background: var(--panel-2); border-color: var(--rule-2); }

.pager-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; }
.pager-nav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 220px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); text-decoration: none; color: var(--ink); font-weight: 600; }
.pager-nav a small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.pager-nav a:hover { border-color: var(--spruce-2); color: var(--spruce-2); }
.pager-nav .next { margin-left: auto; text-align: right; }

/* Main dashboard: every widget, grouped by the page it belongs to. */
.wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.wall-group { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px 20px 4px; min-width: 0; }
.wall-group.lead { grid-column: 1 / -1; }
.wall-group.lead .widgets { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.wall-group.lead .widget .w-v { font-size: 30px; }
.wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wall-head h2 { margin: 0; font: 600 17px/1.3 var(--ui); }
.wall-head h2 a { color: var(--ink); text-decoration: none; }
.wall-head h2 a:hover { color: var(--spruce-2); text-decoration: underline; }
.wall-open { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wall-open:hover { text-decoration: underline; }
.wall .widgets { border-bottom: 0; margin-bottom: 0; }
.pace-panel .pace { margin-bottom: 4px; }

@media (max-width: 1180px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .side-group { margin: 12px 4px 4px; }
  .wall-group { padding: 12px 14px 2px; }
  .pager-nav { flex-direction: column; }
  .pager-nav a { min-width: 0; }
  .pager-nav .next { margin-left: 0; }
  .page-title h1 { font-size: 26px; }
}
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }

/* ================================================================ sign-in, account, install */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--spruce); }
.login { width: min(400px, 100%); }
.login-brand { display: flex; align-items: center; gap: 12px; color: #fff; margin: 0 0 22px 4px; }
.login-brand .brand-mark { width: 44px; height: 44px; }
.login-brand b { display: block; font-size: 18px; }
.login-brand span { color: #9fb7ab; font-size: 14px; }
.login-card { background: var(--panel); border-radius: var(--r-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-card h1 { margin: 0 0 10px; font: 600 24px var(--ui); }
.login-card label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.login-card input { font-size: 16px; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--rule); width: 100%; }
.login-card input:focus { outline: 2px solid var(--spruce-2); outline-offset: 0; border-color: var(--spruce-2); }
.login-card .btn { margin-top: 16px; padding: 12px; font-size: 16px; }
.login-error { background: var(--bad-bg); color: var(--bad); padding: 10px 12px; border-radius: var(--r-sm); margin: 0 0 6px; font-size: 14px; }
.login-note { color: var(--ink-3); margin: -4px 0 6px; font-size: 14px; }
.login-foot { color: #9fb7ab; font-size: 13px; text-align: center; margin-top: 18px; }

.install-btn { margin-top: 8px; }
.side .install-btn { background: var(--orange); border-color: var(--orange); color: var(--spruce); }
.side .install-btn:hover { background: #e59a32; }
.side-user { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #9fb7ab; }
.side-user b { color: #fff; font-weight: 600; }
.side-user form { margin: 0; }
.linkish { background: none; border: 0; padding: 4px 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.side .linkish { color: #d7e2dc; }
.linkish.danger { color: var(--bad); }
.stack-form { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.stack-form h3 { margin: 0 0 4px; font: 600 16px var(--ui); }
.stack-form label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.stack-form .btn { align-self: flex-start; margin-top: 10px; }
input[type=password] { font: 15px var(--ui); padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: var(--ink); }

/* ================================================================ phones and the installed app */
@media (max-width: 900px) {
  /* notch / home-indicator safe areas when installed */
  .side { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); top: 0; }
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .side-body { max-height: calc(100dvh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .side-nav > a { padding: 11px 10px; font-size: 16px; }          /* 44px touch targets */
  .side-toggle { min-height: 40px; }
  .side-sync { padding-bottom: 8px; }
  /* iOS zooms into inputs under 16px */
  select, input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], .daypick select { font-size: 16px; }
  .daypick select { padding: 10px; }
  .btn { padding: 10px 14px; font-size: 15px; }
  .details { padding: 8px 12px; }
  .sec-head { margin-bottom: 10px; }
  .sec-head h2 { font-size: 18px; }
  .wall-head h2 { font-size: 16px; }
  .widget .w-l { font-size: 13px; }
  .widget .w-s { font-size: 12.5px; }
  .grid td, .grid th { padding: 9px 8px; }
  .chartbox { height: 240px !important; }
  .facts { font-size: 13.5px; gap: 2px 16px; }
  .pagehead .crumb { font-size: 15px; }
  /* drawer: full screen, sticky header, big close button */
  .modal { width: 100%; box-shadow: none; }
  .modal-head { padding-top: max(14px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 3; }
  .modal-head h3 { font-size: 21px; }
  .icon-btn { width: 44px; height: 44px; font-size: 24px; }
  .modal-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .d-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-tiles > div { border-left: 0; border-top: 1px solid var(--rule-2); padding: 12px 14px; }
  .d-tiles > div:nth-child(-n+2) { border-top: 0; }
  .d-tiles > div:nth-child(2n) { border-left: 1px solid var(--rule-2); }
  .d-tiles b { font-size: 20px; }
  .d-sec { padding: 14px; }
  .d-grid td, .d-grid th { padding: 8px 8px; }
  .modal .tablewrap .grid th:first-child, .modal .tablewrap .grid td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; box-shadow: 1px 0 0 var(--rule-2); }
  .pager-nav a { padding: 14px 16px; }
  .toast { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: none; }
  .tabgrid a { padding: 13px 2px; }
  .settings-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .widget .w-v, .widgets.hero .widget .w-v, .wall-group.lead .widget .w-v { font-size: 21px; }
  .dayhead h1 { font-size: 25px; }
}
/* Installed app: hide nothing, but keep the status bar area spruce. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}
@media (max-width: 900px) {
  .wall-group.lead .widgets, .widgets.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-group.lead .widget .w-v { font-size: 24px; }
  .wall { gap: 12px; }
}

/* ================================================================ Smitty's: black, gold leaf, blue highlights */
body { background: var(--page); }
a { color: var(--blue); }

/* gold-leaf lettering: big titles get the leaf gradient, smaller titles a flat light gold */
.dayhead h1, .pagehead h1, .modal-head h3, .login-card h1, .brand-text b, .login-brand b {
  background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head h2, .wall-head h2 a, .panel h2, .d-sec h4, .stack-form h3 { color: var(--orange-ink); }
.wall-head h2 a:hover { color: #f3dc9a; }
.sec-desc, .note, .caption, .facts { color: var(--ink-3); }

/* sidebar: black, gold brand, blue marks where you are */
.side { background: #000; color: #cfcac0; border-right: 1px solid #1c1c1f; }
.brand { border-bottom-color: #1f1f22; }
.brand-mark rect { fill: #0c0c0d; stroke: var(--orange); stroke-width: 1.4; }
.brand-mark path { fill: var(--orange); }
.brand-mark circle { fill: var(--blue); }
.brand-text small, .daypick label, .side-group { color: #8f8a80; }
.side-nav > a { color: #cfcac0; }
.side-nav > a:hover { background: #121214; color: #fff; }
.side-nav > a.on { background: #141416; color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.side-nav > a.main { color: var(--orange-ink); }
.side-sections a { color: #a39e93; }
.daypick select { background: #121214; border-color: #2a2a2e; color: #ece8df; }
.side .btn { background: #121214; border-color: #2c2c30; color: #ece8df; }
.side .btn:hover { border-color: var(--blue); background: #16161a; }
.side .install-btn { background: var(--gold-leaf); color: #0c0c0d; border-color: #b38a35; }
.side .install-btn:hover { filter: brightness(1.08); background: var(--gold-leaf); }
.side-user { color: #8f8a80; }
.side-user b { color: var(--orange-ink); }
.side .linkish { color: #cfcac0; }
.syncstate { color: #a39e93; }
.side-sync, .brand { border-color: #1f1f22; }
.side-toggle { background: #121214 !important; border-color: #2c2c30 !important; color: #ece8df !important; }

/* controls */
.btn, .details, .icon-btn, .seg a, .pager a, .pager-nav a { background: var(--panel-2); color: var(--ink); border-color: var(--rule); }
.btn:hover, .details:hover, .icon-btn:hover, .pager a:hover { border-color: var(--blue); color: #fff; background: #212126; }
.details { color: var(--blue); }
.btn.primary { background: var(--gold-leaf); color: #0c0c0d; border-color: #b38a35; }
.btn.primary:hover { background: var(--gold-leaf); filter: brightness(1.08); color: #0c0c0d; }
.seg a.on { background: var(--blue); color: #000; }
select, input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], .login-card input {
  background: #0f0f11; color: var(--ink); border-color: #34343a;
}
select option { background: #151517; color: var(--ink); }
input::placeholder { color: #6c685f; }
.login-card input:focus, select:focus, input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }

/* flashes, tags, callouts, toast */
.flash.good { background: var(--good-bg); color: var(--good); }
.flash.bad { background: var(--bad-bg); color: var(--bad); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.flash a { color: inherit; }
.tag { color: var(--orange-ink); background: var(--orange-tint); }
.callout { border-left-color: var(--orange); }
.callout p { color: var(--ink-2); }
.toast { background: #000; color: var(--ink); border: 1px solid var(--orange); box-shadow: 0 12px 32px rgba(0,0,0,.6); }
.toast.bad { background: #000; border-color: var(--bad); color: var(--bad); }

/* widgets: hero figures in gold, the rest off-white; blue on hover */
.widgets.hero .widget .w-v, .wall-group.lead .widget .w-v { color: var(--orange-ink); }
.widget.drill:hover { background: #1a1a1d; }
.widget.drill:hover .w-v { color: var(--blue); }
.widget.drill::after { color: var(--blue); }
.widget.good .w-v { color: var(--good); }
.widget.bad .w-v { color: var(--bad); }
.widget.warn .w-v { color: var(--warn); }

/* month pace rail: gold banked, hatched gold projection, blue "today", white goal */
.pace-copy b { color: var(--orange-ink); }
.rail { background: #232327; }
.rail .fill { background: var(--gold-leaf); }
.rail .proj { background: repeating-linear-gradient(-45deg, rgba(201,165,76,.55) 0 5px, rgba(201,165,76,.18) 5px 10px); }
.rail .today { border-left-color: var(--blue); }
.rail .today span { color: var(--blue); }
.rail .goal { border-left-color: #ece8df; }
.rail .goal span { color: #ece8df; }
.rail .finish { border-left-color: var(--orange); }
.rail .finish span { color: var(--orange-ink); }
.pace:hover .rail { box-shadow: 0 0 0 4px rgba(74,158,255,.18); }

/* tables */
.grid th { color: var(--ink-3); border-bottom-color: var(--rule); }
.grid td { border-bottom-color: var(--rule-2); }
.grid td.empty { color: #3d3d42; }
.grid tr.total td { border-top-color: var(--orange); color: var(--orange-ink); }
.grid .today { background: rgba(74,158,255,.10); }
.grid th.today { color: var(--blue); }
.grid tbody tr.drill:hover td, .grid tbody tr.drill:hover td:first-child { background: #1b1b1f; }
.grid tbody tr.drill:hover td.today { background: rgba(74,158,255,.18); }
.grid tr.drill td:first-child { color: var(--blue); }
.grid tr.drill.sub td:first-child { color: var(--ink-3); }
.grid td.meter > i { background: #2a2a2e; }
.grid td.meter > i > i { background: var(--gold-leaf); }
.grid.sheet td.rn, .grid.sheet th.rn { color: #5c5850; }
.grid.data th .arr { color: var(--blue); }
.sec .tablewrap .grid td:first-child { box-shadow: 1px 0 0 var(--rule-2); }

/* drawer */
.modal-bg { background: rgba(0, 0, 0, .66); }
.modal { box-shadow: -18px 0 50px rgba(0,0,0,.7); border-left: 1px solid #2a2a2e; }
.modal-head { background: #111113; }
.crumbs li + li::before { color: #4a4a50; }
.crumbs button { color: var(--blue); }
.d-tiles .focus { background: var(--orange-tint); }
.d-tiles .focus::before { background: var(--gold-leaf); }
.d-tiles .focus b { color: var(--orange-ink); }
.d-bar .t { background: #26262a; }
.d-bar .t i { background: var(--gold-leaf); }
.d-bar .t em { border-left-color: #ece8df; }
.d-bar.drill:hover { background: #1b1b1f; }
.d-bar.drill:hover .l { color: var(--blue); }

/* sign-in, choose-password */
.login-page { background: radial-gradient(120% 80% at 50% 0%, #17171a 0%, #000 70%); }
.login-card { background: #111113; border: 1px solid #26262a; box-shadow: 0 30px 70px rgba(0,0,0,.7); }
.login-brand span, .login-foot { color: #8f8a80; }
.login-card label { color: var(--ink-2); }

/* ---------------------------------------------------------------- yard & safety (Unit Check + SDS modules) */
a.widget { color: inherit; text-decoration: none; }
a.widget:hover .w-v { color: var(--spruce-2); }
.wall-links { display: flex; gap: 14px; flex-wrap: wrap; }
.side-badge { display: inline-block; min-width: 19px; height: 19px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--bad); color: #000; font: 700 11.5px/19px var(--ui); font-style: normal; text-align: center; vertical-align: 1px; }

/* ================================================================ detail modal: centred on wide screens (easier on the eyes than a
   panel stuck to the right edge); full screen on phones */
@media (min-width: 901px) {
  .modal {
    top: 4vh; bottom: 4vh; left: 0; right: 0; margin: 0 auto; width: min(1040px, calc(100% - 64px));
    border-radius: 20px; border: 1px solid var(--rule); overflow: hidden;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .75);
    animation: modal-pop .2s cubic-bezier(.2, .7, .2, 1);
  }
  .modal-head { border-radius: 20px 20px 0 0; }
}
@keyframes modal-pop { from { transform: translateY(14px) scale(.985); opacity: 0; } }

/* ================================================================ LIGHT / DARK TOGGLE
   theme_toggle() in lib/view.php, wired in assets/app.js, sets html[data-theme="light"];
   dark stays the default. Light mode is a warm white page with deep gold-leaf titles and
   blue highlights. The sidebar stays black in both modes (the shop's black and gold), so it
   keeps the dark palette by redefining the variables inside it. */
.theme-btn {
  width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid #2c2c30; background: #121214; color: #ece8df;
  transition: border-color .15s, color .15s;
}
.theme-btn:hover { border-color: #4a9eff; color: #4a9eff; }
.theme-btn .ic { width: 17px; height: 17px; }
.theme-btn .i-moon { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }
.theme-btn.top-only { display: none; }
.side-user { gap: 10px; }
.side-user > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .theme-btn.top-only { display: inline-grid; width: 40px; height: 40px; margin-right: 8px; }
  .theme-btn.side-only { display: none; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #f6f4ef;
  --panel: #ffffff;
  --panel-2: #f3f0e8;
  --ink: #1b1915;
  --ink-2: #4a463e;
  --ink-3: #7a7468;
  --rule: #e2dccf;
  --rule-2: #eee9df;
  --spruce-2: #1f6fd1;
  --spruce-tint: rgba(31, 111, 209, .09);
  --orange: #b38a35;
  --orange-ink: #8a6a1c;
  --orange-tint: rgba(179, 138, 53, .12);
  --good: #1e8f5a;
  --good-bg: rgba(30, 143, 90, .1);
  --warn: #8a6a1c;
  --warn-bg: rgba(179, 138, 53, .14);
  --bad: #c8352a;
  --bad-bg: rgba(200, 53, 42, .09);
  --gold-leaf: linear-gradient(180deg, #c49b42 0%, #9c7524 55%, #7d5c18 100%);
  --blue: #1f6fd1;
}
/* the black sidebar keeps the dark palette */
:root[data-theme="light"] .side {
  color-scheme: dark;
  --ink: #ece8df; --ink-2: #bdb8ad; --ink-3: #8f8a80; --rule: #2d2d31; --rule-2: #232327;
  --panel: #151517; --panel-2: #1d1d20;
  --orange: #c9a54c; --orange-ink: #e6c97e; --orange-tint: rgba(201, 165, 76, .13);
  --gold-leaf: linear-gradient(180deg, #f6e3a1 0%, #d9b45a 46%, #b38a35 100%);
  --blue: #4a9eff; --spruce-2: #4a9eff; --good: #52c48c; --bad: #f26b5b;
}
:root[data-theme="light"] .side select, :root[data-theme="light"] .side input { background: #0f0f11; color: #ece8df; border-color: #34343a; }
:root[data-theme="light"] .side select option { background: #151517; color: #ece8df; }

/* content surfaces and controls */
:root[data-theme="light"] .sec, :root[data-theme="light"] .wall-group, :root[data-theme="light"] .panel,
:root[data-theme="light"] .d-sec { box-shadow: 0 1px 2px rgba(40, 30, 10, .04), 0 12px 30px -22px rgba(40, 30, 10, .3); }
:root[data-theme="light"] .btn:hover, :root[data-theme="light"] .details:hover, :root[data-theme="light"] .icon-btn:hover,
:root[data-theme="light"] .pager a:hover { background: #ece7dc; color: var(--ink); border-color: var(--blue); }
:root[data-theme="light"] .seg a.on { color: #fff; }
:root[data-theme="light"] .btn.primary { color: #fff; border-color: #8a6a1c; }
:root[data-theme="light"] select, :root[data-theme="light"] input[type=text], :root[data-theme="light"] input[type=search],
:root[data-theme="light"] input[type=number], :root[data-theme="light"] input[type=url], :root[data-theme="light"] input[type=password],
:root[data-theme="light"] .login-card input { background: #fff; color: var(--ink); border-color: #d6cfbf; }
:root[data-theme="light"] select option { background: #fff; color: var(--ink); }
:root[data-theme="light"] input::placeholder { color: #a39d90; }
:root[data-theme="light"] .toast { background: #fff; color: var(--ink); box-shadow: 0 14px 34px rgba(40, 30, 10, .18); }
:root[data-theme="light"] .toast.bad { background: #fff; }
:root[data-theme="light"] .wall-head h2 a:hover { color: #6b5212; }

/* widgets and the month rail */
:root[data-theme="light"] .widget.drill:hover { background: #faf7f0; }
:root[data-theme="light"] .rail { background: #ece6d9; }
:root[data-theme="light"] .rail .proj { background: repeating-linear-gradient(-45deg, rgba(179, 138, 53, .55) 0 5px, rgba(179, 138, 53, .16) 5px 10px); }
:root[data-theme="light"] .rail .goal { border-left-color: var(--ink); }
:root[data-theme="light"] .rail .goal span { color: var(--ink); }
:root[data-theme="light"] .pace:hover .rail { box-shadow: 0 0 0 4px rgba(31, 111, 209, .14); }

/* tables */
:root[data-theme="light"] .grid td.empty { color: #c9c2b2; }
:root[data-theme="light"] .grid .today { background: rgba(31, 111, 209, .07); }
:root[data-theme="light"] .grid tbody tr.drill:hover td, :root[data-theme="light"] .grid tbody tr.drill:hover td:first-child { background: #f6f1e6; }
:root[data-theme="light"] .grid tbody tr.drill:hover td.today { background: rgba(31, 111, 209, .12); }
:root[data-theme="light"] .grid td.meter > i { background: #ece6d9; }
:root[data-theme="light"] .grid.sheet td.rn, :root[data-theme="light"] .grid.sheet th.rn { color: #a39d90; }
:root[data-theme="light"] .sec .tablewrap .grid th:first-child, :root[data-theme="light"] .sec .tablewrap .grid td:first-child,
:root[data-theme="light"] .modal .tablewrap .grid th:first-child, :root[data-theme="light"] .modal .tablewrap .grid td:first-child { background: #fff; }

/* drawer */
:root[data-theme="light"] .modal-bg { background: rgba(27, 25, 21, .34); }
:root[data-theme="light"] .modal { background: var(--page); border-color: var(--rule); box-shadow: -18px 0 50px rgba(40, 30, 10, .18); }
:root[data-theme="light"] .modal-head { background: #fff; }
:root[data-theme="light"] .crumbs li + li::before { color: #c9c2b2; }
:root[data-theme="light"] .d-bar .t { background: #ece6d9; }
:root[data-theme="light"] .d-bar .t em { border-left-color: var(--ink); }
:root[data-theme="light"] .d-bar.drill:hover { background: #f6f1e6; }

/* sign-in */
:root[data-theme="light"] .login-page { background: radial-gradient(120% 80% at 50% 0%, #fffdf8 0%, #efeadf 70%); }
:root[data-theme="light"] .login-card { background: #fff; border-color: var(--rule); box-shadow: 0 24px 60px -20px rgba(40, 30, 10, .28); }
:root[data-theme="light"] .login-brand span, :root[data-theme="light"] .login-foot { color: var(--ink-3); }
:root[data-theme="light"] .login-brand .brand-mark rect { fill: #0c0c0d; }
@media (min-width: 901px) { :root[data-theme="light"] .modal { box-shadow: 0 40px 100px -30px rgba(40, 30, 10, .35); } }

/* ================================================================ phone tab bar: hot links along the bottom
   (Overview, Pages menu, Checkovers with the lockout count, SDS, History). Black and gold in
   both themes, like the sidebar; hidden on wider screens. */
.tabbar { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 120;
    left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .92); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid #2a2a2e; border-radius: 20px; padding: 5px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    border: 0; border-radius: 15px; background: none; color: #8f8a80; font: 600 11px var(--ui); text-decoration: none; cursor: pointer; padding: 0 2px;
  }
  .tabbar .tab-ic { position: relative; display: grid; place-items: center; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar .on { color: #e6c97e; background: rgba(201, 165, 76, .13); box-shadow: inset 0 0 0 1px rgba(201, 165, 76, .32); }
  .tabbar a:active, .tabbar button:active { background: rgba(74, 158, 255, .12); color: #fff; }
  body.menu-open .tabbar .tab-pages { color: #4a9eff; background: rgba(74, 158, 255, .12); }
  .tab-badge {
    position: absolute; top: -6px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: #f26b5b; color: #000; font: 700 10.5px/17px var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #000;
  }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* the open menu is a full sheet above the bar */
  .side.open { display: flex; margin: 0; font-size: inherit; font-weight: inherit; }
  .side-body { flex: 1 1 100%; }
  .side.open .side-body { max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); }
  body.menu-open { overflow: hidden; }
}

/* ================================================================ wide tables on phones: the frozen first column used to
   grow to its longest label ("Internal (… units) — incl. above") and squeeze the figures into a sliver.
   Cap it and let labels wrap; a soft edge shows there is more to scroll. */
@media (max-width: 900px) {
  .tablewrap .grid th:first-child, .tablewrap .grid td:first-child {
    white-space: normal; width: 128px; min-width: 112px; max-width: 136px; line-height: 1.25; overflow-wrap: anywhere;
  }
  .tablewrap .grid tr.sub td:first-child { padding-left: 8px; }
  .tablewrap .grid th, .tablewrap .grid td { padding-left: 7px; padding-right: 7px; }
  .tablewrap {
    background:
      linear-gradient(to left, var(--panel) 35%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .28), transparent) right / 12px 100% no-repeat scroll;
  }
}

/* ================================================================ wide tables on laptops */
/* A side panel (e.g. the power equipment breakdown) only sits beside its table when there is room
   for both; otherwise it goes underneath, so neither table is squeezed into a scroll box. */
@media (max-width: 1600px) {
  .sec.has-side { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sec-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-2); padding-top: 18px; margin-top: 18px; }
}
/* tables with many columns (a week of days plus totals) run a little tighter */
.tablewrap:has(thead th:nth-child(11)) .grid th, .tablewrap:has(thead th:nth-child(11)) .grid td { padding-left: 7px; padding-right: 7px; }
.tablewrap:has(thead th:nth-child(11)) .grid .n { font-size: 13.5px; }
/* a soft edge on the right whenever a table scrolls sideways */
.tablewrap {
  background:
    linear-gradient(to left, var(--panel) 35%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .28), transparent) right / 12px 100% no-repeat scroll;
}
.tablewrap:has(thead th:nth-child(11)) .grid th { white-space: normal; min-width: 64px; line-height: 1.2; }
.tablewrap:has(thead th:nth-child(11)) .grid td:first-child, .tablewrap:has(thead th:nth-child(11)) .grid th:first-child { white-space: normal; min-width: 150px; max-width: 210px; line-height: 1.25; }
.grid td.long { min-width: 220px; }
.grid td.wrap { white-space: normal; min-width: 170px; }
@media (max-width: 900px) {
  .tablewrap:has(thead th:nth-child(11)) .grid td:first-child, .tablewrap:has(thead th:nth-child(11)) .grid th:first-child { min-width: 108px; max-width: 128px; }
}
:root[data-theme="light"] .tablewrap {
  background:
    linear-gradient(to left, var(--panel) 35%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 30, 80, .14), transparent) right / 12px 100% no-repeat scroll;
}

/* ================================================================ modules not live yet (config "modules" => 'soon') */
.nav-soon {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500;
  color: #6c685f; cursor: not-allowed; user-select: none;
}
.soon-pill {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  padding: 2px 8px; border-radius: 99px; color: #e6c97e; border: 1px solid rgba(201, 165, 76, .45); background: rgba(201, 165, 76, .1);
}
@media (max-width: 900px) {
  .nav-soon { padding: 11px 10px; font-size: 16px; }
  .tab-soon {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    border-radius: 15px; color: #4f4c46; font: 600 11px var(--ui); cursor: not-allowed; user-select: none;
  }
  .tab-soon .tab-ic { opacity: .55; }
  .tab-soon .ic { width: 22px; height: 22px; }
  .tab-soon em {
    position: absolute; top: 3px; right: 50%; transform: translateX(26px); font-style: normal; font: 700 8.5px/1 var(--ui);
    letter-spacing: .02em; padding: 2px 5px; border-radius: 99px; color: #000; background: #c9a54c;
  }
}
.nav-soon { white-space: nowrap; }
.nav-soon .soon-pill { font-size: 10.5px; padding: 2px 7px; }

/* ================================================================ Smitty, the AI assistant (assets/smitty.js) */
.smitty-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 140; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; border-radius: 99px; border: 1px solid #b38a35; cursor: pointer;
  background: linear-gradient(180deg, #1a1a1d, #0c0c0d); color: #f3dc9a; font: 700 14.5px var(--ui); letter-spacing: .01em;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8), 0 0 0 4px rgba(201, 165, 76, .08);
  transition: transform .15s, box-shadow .15s;
}
.smitty-fab .ic { width: 20px; height: 20px; color: #e6c97e; }
.smitty-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .85), 0 0 0 4px rgba(201, 165, 76, .18); }
body.smitty-open .smitty-fab { opacity: 0; pointer-events: none; }

.smitty { position: fixed; inset: 0; z-index: 210; pointer-events: none; }
.smitty-panel {
  position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(480px, calc(100% - 28px));
  display: flex; flex-direction: column; background: var(--page); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .75);
  transform: translateX(calc(100% + 30px)); transition: transform .26s cubic-bezier(.2, .7, .2, 1); pointer-events: auto;
}
.smitty.open .smitty-panel { transform: none; }
.smitty:not(.open) .smitty-panel { visibility: hidden; transition: transform .22s, visibility 0s .22s; }

.smitty-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--rule); background: #000; color: #ece8df; }
.smitty-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.smitty-head b { font-size: 17px; background: linear-gradient(180deg, #f6e3a1 0%, #d9b45a 46%, #b38a35 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.smitty-head small { color: #8f8a80; font-size: 12.5px; }
.smitty-mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #151517; border: 1px solid #b38a35; color: #e6c97e; flex: none; }
.smitty-mark .ic { width: 18px; height: 18px; }
.smitty-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #2c2c30; background: #121214; color: #cfcac0; cursor: pointer; flex: none; }
.smitty-btn:hover { border-color: #4a9eff; color: #4a9eff; }
.smitty-btn .ic { width: 17px; height: 17px; }

.smitty-history { border-bottom: 1px solid var(--rule); max-height: 45%; overflow-y: auto; padding: 8px; background: var(--panel); }
.smitty-hist-item { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; font: 500 14px var(--ui); }
.smitty-hist-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smitty-hist-item small { color: var(--ink-3); white-space: nowrap; }
.smitty-hist-item:hover { background: var(--panel-2); }
.smitty-history .muted { padding: 6px 10px; margin: 0; }

.smitty-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.smitty-msg { max-width: 92%; font-size: 14.5px; line-height: 1.5; }
.smitty-msg.me { align-self: flex-end; background: #1f6fd1; color: #fff; padding: 9px 13px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.smitty-msg.bot { align-self: flex-start; width: 100%; max-width: 100%; }
.smitty-msg.bot .smitty-text { background: var(--panel); border: 1px solid var(--rule); padding: 10px 14px; border-radius: 4px 16px 16px 16px; }
.smitty-msg.err .smitty-text { border-color: rgba(242, 107, 91, .5); color: var(--bad); }
.smitty-text p { margin: 0 0 7px; }
.smitty-text p:last-child { margin-bottom: 0; }
.smitty-text ul, .smitty-text ol { margin: 4px 0 8px; padding-left: 20px; }
.smitty-text li { margin: 2px 0; }
.smitty-text b { color: var(--orange-ink); font-weight: 700; }
.smitty-text code { font-size: 13px; }
.smitty-msg.thinking { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13.5px; }
.smitty-msg .dots { display: inline-flex; gap: 4px; }
.smitty-msg .dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9a54c; animation: smitty-dot 1.1s infinite ease-in-out; }
.smitty-msg .dots i:nth-child(2) { animation-delay: .15s; }
.smitty-msg .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes smitty-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.smitty-card { margin: 10px 0 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 12px 10px; }
.smitty-card figcaption { font-weight: 700; font-size: 13.5px; margin: 0 0 8px 2px; color: var(--ink); }
.smitty-chart { position: relative; height: 240px; }
.smitty-tablewrap { overflow-x: auto; max-height: 340px; overflow-y: auto; }
.smitty-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.smitty-table th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
.smitty-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule-2); }
.smitty-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.smitty-link { margin: 10px 8px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(74, 158, 255, .45); background: rgba(74, 158, 255, .08); color: var(--blue); font: 600 13px var(--ui); cursor: pointer; }
.smitty-link:hover { background: rgba(74, 158, 255, .16); }

.smitty-welcome { padding: 6px 2px; color: var(--ink-2); }
.smitty-welcome b { display: block; font-size: 17px; color: var(--orange-ink); margin-bottom: 4px; }
.smitty-welcome p { margin: 0 0 12px; font-size: 14px; }
.smitty-chips { display: flex; flex-direction: column; gap: 7px; }
.smitty-chip { text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font: 500 13.5px var(--ui); cursor: pointer; }
.smitty-chip:hover { border-color: #c9a54c; background: var(--panel-2); }

.smitty-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--rule); background: var(--panel); margin: 0; }
.smitty-input { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 12px; border-radius: 14px; font: 15px/1.4 var(--ui); }
.smitty-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, #f6e3a1 0%, #d9b45a 46%, #b38a35 100%); color: #0c0c0d; }
.smitty-send .ic { width: 19px; height: 19px; }
.smitty-send:disabled { opacity: .5; cursor: progress; }
.smitty-foot { margin: 0; padding: 2px 14px 10px; background: var(--panel); color: var(--ink-3); font-size: 11.5px; text-align: center; }

@media (max-width: 900px) {
  .smitty-fab { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 0; width: 52px; height: 52px; justify-content: center; }
  .smitty-fab span { display: none; }
  .smitty-fab .ic { width: 23px; height: 23px; }
  .smitty-panel { inset: 0; width: 100%; border-radius: 0; border: 0; }
  .smitty-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .smitty-form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .smitty-input { font-size: 16px; }
  body.smitty-open { overflow: hidden; }
  body.smitty-open .tabbar { display: none; }
}
@media print { .smitty-fab, .smitty { display: none !important; } }

/* Smitty chat transcripts in the drawer */
.ai-turn { padding: 10px 14px; border-radius: 12px; margin: 0 0 10px; border: 1px solid var(--rule); background: var(--panel); }
.ai-turn.q { border-left: 3px solid #1f6fd1; }
.ai-turn.a { border-left: 3px solid #c9a54c; }
.ai-turn p { margin: 0 0 6px; }
.ai-turn ul { margin: 4px 0 8px; padding-left: 20px; }
.ai-who { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ai-who span { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.ai-wall .widget.is-text .w-v { font-size: 15px; }

/* the pacing panel sits first on the main dashboard */
.pace-panel { margin-bottom: 18px; }