/* ===== Design tokens =====
   --accent / --accent-d are injected per-request (Admin → Theme), so
   every color below is either a neutral, a dark-surface, or built from
   those two — never a hardcoded brand color — so the whole app re-themes
   from one setting. A flat, grouped-list look with a dark header/nav. */
:root{
  --accent:#1a7a4c;--accent-d:#0f3d26;
  --bg:#f6f7f9;--card:#ffffff;--ink:#1a1d23;--muted:#767d89;--muted-2:#a2a8b3;
  --warn:#a8600f;--bad:#c23a2b;--good:#1f8a52;
  --border:#e6e9ee;--border-soft:#f0f2f5;
  --dark:#14171d;--dark-2:#1f242c;
  --blue:#1c6fd6;--purple:#7c4fd1;--amber:#c2740c;
  --shadow-sm:none;
  --shadow-md:none;
  --radius:12px;--radius-sm:10px;--radius-lg:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);padding-bottom:88px;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;font-size:15px}

/* Inline-SVG icon set (see icon() in functions.php) — sized off the
   surrounding element's font-size, same as the emoji it replaced, and
   colored via currentColor so it always matches the surrounding text
   or the accent color set on its container. */
.icon-svg{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0}

/* ===== Top bar — white, flat ===== */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);color:var(--ink);padding:9px 14px;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--border-soft)}
.brand{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:-.01em}
.brand-link{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.brand-logo{height:30px;width:auto;display:block;flex:none}
.module-tag{background:transparent;color:var(--muted);padding:0;border-radius:0;font-size:11.5px;font-weight:600;letter-spacing:0}
.who{font-size:12px;display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--muted)}
.role-pill{padding:2px 7px;border-radius:5px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--border-soft);color:var(--muted)}
.role-pill.role-admin{background:#ffd54a;color:#5c4400}
.role-pill.role-approver{background:#8fd3ff;color:#093a5c}
.role-pill.role-viewer{background:var(--border);color:var(--ink)}
.role-pill.role-staff{background:#b9f0d4;color:#0b4a2c}

.wrap{max-width:560px;margin:0 auto;padding:10px 12px}

/* ===== Type ===== */
h1{font-size:19px;margin:4px 0 12px;color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-size:11px;margin:18px 2px 6px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
a{color:var(--accent)}

/* ===== Cards — flat, thin border, no shadow soup ===== */
.card{background:var(--card);border:0;border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Field labels sit quietly above the box — small and grey, so the
   thing you actually read is what you typed, not the caption. */
label{display:block;font-size:11px;color:var(--muted);margin:10px 0 3px;font-weight:500;letter-spacing:0}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid transparent;border-radius:8px;font-size:16px;background:var(--border-soft);color:var(--ink);transition:border-color .12s,background .12s;font-family:var(--font)}
input:hover,select:hover,textarea:hover{background:var(--border-soft)}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:none}
textarea{resize:vertical}
input[type="checkbox"],input[type="radio"]{width:auto;flex:none;padding:0;margin:0}

/* ===== Buttons — pill-shaped, flat =====
   Every one of these classes needs to stand on its own (an <a class="btn-sm
   btn-outline"> is used all over the app with no plain .btn alongside it),
   so the base look lives on all of them, not just button/.btn — otherwise
   an <a> carrying only a modifier class (btn-outline, btn-sm, btn-block,
   btn-bad, btn-good, btn-warn) renders as a bare underlined link instead
   of a button. The modifier rules below still win for the properties they
   override (background, padding, display, ...) since they come later in
   the cascade at equal specificity. */
button,.btn,.btn-outline,.btn-sm,.btn-block,.btn-bad,.btn-good,.btn-warn{display:inline-block;background:var(--accent);color:#fff;border:0;padding:11px 18px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;letter-spacing:0;cursor:pointer;text-decoration:none;text-align:center;transition:opacity .12s;min-height:42px}
button:hover,.btn:hover{opacity:.92}
button:active,.btn:active{transform:scale(.97)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-d)}
.btn-warn{background:var(--warn)}
.btn-bad{background:var(--bad)}
.btn-good{background:var(--good)}
.btn-sm{padding:7px 12px;font-size:13px;min-height:auto;font-weight:600;border-radius:8px}
.btn-block{display:block;width:100%;margin-top:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== Action list — flat rows with a colored icon chip, not a tile grid ===== */
.action-grid{display:flex;flex-direction:column;gap:1px;margin:14px 0;background:var(--border-soft);border-radius:var(--radius);overflow:hidden;border:0}
.action-tile{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none;background:var(--card);padding:13px 14px;text-align:left;transition:background .1s}
.action-tile:hover{background:var(--border-soft)}
.action-tile:active{background:var(--border-soft)}
.action-tile .icon{font-size:18px;line-height:1;width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:0;background:transparent;color:var(--muted)}
.action-tile .label{font-weight:500;font-size:14.5px;color:var(--ink);letter-spacing:-.005em;flex:1}
.action-tile::after{content:"›";color:var(--muted-2);font-size:20px;font-weight:700}
.action-tile.primary .icon{background:transparent;color:var(--accent)}
.action-tile.primary .label{color:var(--ink);font-weight:600}
.action-tile.wide{grid-column:unset}

/* ===== Stat box (one big number) ===== */
.stat-box{background:var(--card);border:0;border-radius:var(--radius);padding:15px 14px;margin:10px 0;text-align:center}
.stat-box .n{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.stat-box .l{font-size:12px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;margin-top:5px}
.stat-box.over{border-left-color:var(--bad)}
.stat-box.good{border-left-color:var(--good)}

/* ===== Stat cards (dashboard summary numbers) — flat, no top border ===== */
.stat{background:var(--card);border:0;border-radius:var(--radius);padding:13px 8px;text-align:center;display:block;text-decoration:none;color:inherit}
a.stat:active{background:var(--border-soft)}
.stat .n{font-size:21px;font-weight:800;color:var(--stat-accent,var(--ink));letter-spacing:-.02em}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px;font-weight:500;text-transform:none;letter-spacing:0}
.stats3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:16px 0}
.stat-inline{font-size:20px;font-weight:800;color:var(--ink);text-align:right}

/* ===== Tiles — flat list rows =====
   Not wrapped in a shared container by the pages that emit them (they're
   plain sibling <a> tags mixed with headings on the page), so each stays
   independently rounded rather than attempting a visually-connected
   group — that trick needs a real wrapper element to work correctly. */
.tile{display:flex;flex-direction:column;background:var(--card);border:0;border-radius:var(--radius);padding:12px 14px;margin-bottom:2px;text-decoration:none;color:inherit;position:relative}
.tile::after{content:"›";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:17px;font-weight:700}
.tile:hover{background:var(--border-soft)}
.tile-id{display:block;font-weight:600;font-size:14.5px;color:var(--ink);padding-right:20px}
.tile-meta{display:block;font-size:12px;color:var(--muted);margin-top:2px;padding-right:20px}
.tile-alert{background:color-mix(in srgb, var(--warn) 7%, #fff)}

/* ===== Department picker (home screen) — big, single-column tap targets,
   plain flat cards (matching the rest of the app's look) with the theme
   colour carried only by a thin border and the icon, not the whole tile —
   so the most-used entry point on the app is big and obvious without
   turning into a wall of solid colour. ===== */
.dept-grid{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.dept-card{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);background:var(--card);border:0;border-radius:var(--radius);padding:15px 15px;text-align:left}
.dept-card:hover{background:var(--border-soft)}
.dept-card:active{transform:scale(.99)}
.dept-disabled{opacity:.5;filter:grayscale(.3)}
.dept-emoji{font-size:19px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--border-soft);color:var(--accent)}
.dept-name{font-weight:600;font-size:15px;color:var(--ink)}
.dept-meta{font-size:12px;color:var(--muted);margin-top:2px;font-weight:500}

/* ===== Home screen: alerts needing attention ===== */
.alert-stack{margin:16px 0}
.alert-item{display:flex;align-items:center;gap:9px;background:var(--card);border:0;border-left:2px solid var(--warn);border-radius:var(--radius);padding:10px 12px;margin-bottom:5px;text-decoration:none;color:var(--ink)}
.alert-item:hover{background:var(--border-soft)}
.alert-icon{font-size:17px}
.alert-text{flex:1;font-size:13px;font-weight:700;color:var(--ink)}
.alert-go{color:var(--warn);font-weight:800}

/* ===== Home screen: recent activity feed — flat list ===== */
.activity-feed{background:var(--card);border:0;border-radius:var(--radius);overflow:hidden}
.activity-item{display:flex;align-items:center;gap:9px;padding:9px 12px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border-soft)}
.activity-item:last-child{border-bottom:none}
.activity-item:hover{background:var(--border-soft)}
.activity-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}
.activity-text{flex:1;font-size:13px;color:var(--ink);font-weight:600}
.activity-time{font-size:11px;color:var(--muted-2);white-space:nowrap;font-weight:600}

/* ===== Badges ===== */
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-pending{background:color-mix(in srgb, var(--warn) 15%, #fff);color:var(--warn)}
.badge-approved{background:color-mix(in srgb, var(--good) 15%, #fff);color:var(--good)}
.badge-rejected{background:color-mix(in srgb, var(--bad) 15%, #fff);color:var(--bad)}

/* ===== Chemical chips ===== */
.chem-chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.chem-chip{border:1.5px solid var(--border);background:#fff;color:var(--ink);border-radius:8px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .1s,background .1s}
.chem-chip .tick{display:none}
.chem-chip.selected{border-color:var(--accent);background:var(--accent);color:#fff}
.chem-chip.selected .tick{display:inline}
.chem-chip-out{border-color:color-mix(in srgb, var(--bad) 40%, var(--border));background:color-mix(in srgb, var(--bad) 6%, #fff);color:var(--bad)}
.chem-chip-out.selected{border-color:var(--bad);background:var(--bad);color:#fff}
.chem-chip-out-label{font-weight:700;font-size:10.5px}

/* ===== Notices — flat, left-bar accent instead of full tint ===== */
.note{color:var(--muted);font-size:12.5px;margin:6px 2px 12px;line-height:1.5}
.err{background:color-mix(in srgb, var(--bad) 8%, #fff);color:var(--bad);border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;margin:8px 0;line-height:1.45;font-weight:600}
.saved{background:color-mix(in srgb, var(--good) 10%, #fff);color:var(--good);border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;margin:8px 0;font-weight:700}

/* ===== Collapsible "more" sections ===== */
details.more{margin:10px 0}
details.more>summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:700;list-style:none;padding:4px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸ ";display:inline-block}
details.more[open]>summary::before{content:"▾ "}
details.more .more-body{margin-top:8px;padding-top:10px;border-top:1px dashed var(--border)}

details.optional-fields{margin-top:12px;border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:2px 14px;background:var(--bg)}
details.optional-fields>summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--muted);list-style:none;padding:12px 0}
details.optional-fields>summary::-webkit-details-marker{display:none}
details.optional-fields>summary::before{content:"+ ";color:var(--accent);font-weight:800}
details.optional-fields[open]>summary::before{content:"– ";color:var(--accent);font-weight:800}
details.optional-fields .more-body{padding-bottom:14px}

/* ===== Bottom nav — floating white bar ===== */
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border-soft);display:flex;overflow-x:auto;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.navlink{flex:1;text-align:center;padding:7px 4px;font-size:10.5px;color:var(--muted-2);text-decoration:none;white-space:nowrap;font-weight:500;border-radius:8px;min-width:52px}
.navlink.active{color:var(--accent);background:transparent;font-weight:600}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--border-soft)}
th{color:var(--muted-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}

/* A report table can have many columns — let it grow past the screen
 * width and scroll sideways (inside its overflow-x:auto wrapper) instead
 * of squeezing every column until the text wraps and becomes unreadable. */
.report-table{width:auto;min-width:100%;white-space:nowrap}
.report-table th,.report-table td{padding:9px 12px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
/* ---------------------------------------------------------------------
   An interactive dashboard.

   Every bar, slice, column and meter that knows where its own detail lives
   is an <a>. They have to look like doors without looking like buttons —
   the chart still has to read as a chart. So: no underline, no colour
   change at rest, and on hover the row lifts out of the page and the bar
   itself takes the accent. Keyboard focus gets a real ring, because a row
   you can tab to and cannot see is worse than one you cannot tab to.
   --------------------------------------------------------------------- */
.bar-link,.col-link,.pie-link,.meter-link{
  text-decoration:none;color:inherit;cursor:pointer;
  border-radius:8px;transition:background .12s ease;
}
.bar-link:hover,.pie-link:hover,.meter-link:hover{background:var(--border-soft)}
.bar-link:hover .bar-fill,.col-link:hover .col-fill{background:var(--accent-d)}
.bar-link:focus-visible,.col-link:focus-visible,
.pie-link:focus-visible,.meter-link:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.col-link{cursor:pointer}
.col-link:hover .col-cat{color:var(--accent);font-weight:700}

/* The period and unit switches sit tight under their heading — they belong
   to the charts below them, not to the page. */
.dash-switch{margin:-4px 0 12px}
.dash-switch .segmented-item{flex:0 1 auto;min-height:38px;padding:8px 14px;justify-content:center}

/* ---------------------------------------------------------------------
   Segmented control, and the chemical stock row.

   The quantity on hand used to be .hint — 12px grey, the same weight as
   the footnote under it, on a screen whose entire job is to say how much
   is left. It is the number somebody walked over to read, so it is now the
   biggest thing on the row. The warning level went the other way: it is
   set once and looked at rarely, so it is small print with the controls
   folded behind it.
   --------------------------------------------------------------------- */
.segmented{
  display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap;
}
.segmented-item{
  flex:1 1 110px;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);text-decoration:none;color:var(--ink);min-height:52px;
}
.segmented-item.on{border-color:var(--accent);background:var(--card)}
.segmented-label{font-size:15px;font-weight:700;line-height:1.1}
.segmented-item.on .segmented-label{color:var(--accent)}
.segmented-note{font-size:11px;color:var(--muted);line-height:1.2}

.chem-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.chem-name{font-size:16px;font-weight:700;line-height:1.2}
.chem-sub{font-size:12px;color:var(--muted);margin-top:3px}
.chem-qty{text-align:right;white-space:nowrap;flex:0 0 auto}
.chem-qty .n{font-size:28px;font-weight:800;line-height:1.05;letter-spacing:-0.5px}
.chem-qty .u{font-size:12px;color:var(--muted);font-weight:600}
.chem-qty.low .n{color:var(--warn)}
.chem-qty.out .n{color:var(--bad)}
.chem-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);
}
.chem-warn{font-size:11px;color:var(--muted-2);flex:1 1 auto}

/* ---------------------------------------------------------------------
   Inline forms.

   A row of short fields — a date, a rate, an amount — that belong to one
   another and should be read across, not down. Each field states its own
   comfortable width and they wrap when the window is narrow, so the same
   markup is three across on a computer and stacked on a phone without a
   breakpoint.
   --------------------------------------------------------------------- */
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline-form .field{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:4px}
.inline-form .field label{font-size:12px;font-weight:600;color:var(--muted);margin:0}
.inline-form .field input,
.inline-form .field select{width:100%;margin:0}
.inline-form > button{flex:0 0 auto;margin:0}

/* ---------------------------------------------------------------------
   Back links.

   These used to be .hint: 12px grey, the same weight as a footnote, at
   the top of every screen. On a phone in a godown that is not a control,
   it is a rumour. Now it is the accent colour at a readable size in a
   bordered pill, with a tap target that clears the 44px guideline, so the
   way out of a screen looks like a thing you press.

   Every call site already writes its own leading chevron, so there is no
   pseudo-element arrow here — one glyph, from the markup.
   --------------------------------------------------------------------- */
.backlink{
  display:inline-flex;align-items:center;gap:4px;
  /* main.wrap is a grid on desktop, and a grid item stretches to the full
     column unless told not to — which turned this pill into a 968px bar. */
  justify-self:start;width:fit-content;
  margin:0 0 14px;padding:0 15px;
  min-height:42px;
  font-size:14px;font-weight:650;line-height:1;
  color:var(--accent-d);text-decoration:none;
  background:var(--card);
  border:1px solid var(--border);border-radius:999px;
}
.backlink:hover,.backlink:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
}
.backlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.center{text-align:center}

/* ===== Login =====
   On a phone this is the card on its own, exactly as before. The brand
   panel beside it only exists from tablet width up (see further down). */
.login-brand,.login-heading{display:none}
.login-wrap{max-width:380px;margin:70px auto;padding:0 16px}
.login-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 26px}
.login-logo{display:block;height:56px;width:auto;margin:0 auto 16px}
.login-title{font-weight:800;font-size:21px;margin-bottom:4px;color:var(--ink);letter-spacing:-.02em;text-align:center}
.login-sub{color:var(--muted);font-size:13px;margin-bottom:22px;text-align:center}

/* ---- Dashboard: one screen, comfortably ------------------------------
   The dashboard is the screen staff open twenty times a day, so it holds
   everything — six counts, the stage breakdown, alerts, six actions, the
   browse links — without a scroll, at sizes that are still easy to read
   at arm's length and to hit with a thumb. */
.alert-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.alert-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);line-height:1.25}
.alert-chip .icon-svg{width:16px;height:16px;flex-shrink:0}

.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 4px}
.mini-stat{background:var(--card);border:0;border-radius:var(--radius);padding:12px 6px;text-align:center;display:block;text-decoration:none;color:inherit}
.mini-stat:active{background:var(--border-soft)}
.mini-stat .n{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.mini-stat .l{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:500;text-transform:none;letter-spacing:0;line-height:1.3}

.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.quick-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;background:var(--card);border:0;border-radius:var(--radius);padding:13px 6px;text-decoration:none;color:inherit;text-align:center}
.quick-tile:active{background:var(--border-soft)}
.quick-tile .icon{width:30px;height:30px;flex-shrink:0;border-radius:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.quick-tile .icon .icon-svg{width:19px;height:19px}
.quick-tile .label{font-size:12px;font-weight:500;line-height:1.25;color:var(--ink)}
.quick-tile.primary .icon{background:transparent;color:var(--accent)}

.mini-links{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.85}
.mini-links a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--border)}

/* Bottom-bar badge: sits on the icon so a count can never widen the
   label and push the last nav item off a narrow screen. */
.navlink .nav-ic{position:relative;display:block;font-size:19px;line-height:1.2}
.nav-badge{position:absolute;top:-3px;left:50%;margin-left:5px;background:var(--bad,#d1372b);color:#fff;font-size:9px;font-weight:800;line-height:1;padding:2px 4px;border-radius:999px;min-width:13px;text-align:center}

/* Pipeline status on the dashboard: each state with its count, and the
   actual lots sitting in it underneath — "In Process: 3" on its own
   never said which three or how far along they are. */
.status-list{background:var(--card);border:0;border-radius:var(--radius);padding:4px 14px;margin:8px 0 0}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.status-row+.status-row,.status-detail+.status-row{border-top:1px solid var(--border-soft)}
.status-row .n{font-size:15px;font-weight:700}
.status-row .n.zero{color:var(--muted-2,var(--muted));font-weight:700}
.status-detail{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0 3px 11px;font-size:12.5px;color:var(--muted);text-decoration:none;line-height:1.3}
.status-detail .who{color:var(--ink);font-weight:600}
.status-detail .at{white-space:nowrap}
.status-more{display:block;padding:2px 0 5px 11px;font-size:12px;color:var(--muted);text-decoration:none;font-weight:700}

/* Read-back of what a stage entry is about to save, sitting right above
   the button. Stage entries move the pipeline and chemical stock and are
   awkward to undo, so what's going in gets said in words first. */
.preview{background:color-mix(in srgb, var(--accent) 6%, #fff);border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));border-radius:var(--radius-sm);padding:11px 13px;margin:14px 0 4px;font-size:13.5px;line-height:1.45}
.preview:empty{display:none}
.preview-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.preview-line{color:var(--ink)}
.preview-warn{color:var(--bad)}

/* Chemicals, compactly: the tap-list is one scrolling strip instead of
   four rows of buttons, and each chosen chemical is a single short line
   rather than a table row. */
.chem-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;max-height:88px;overflow-y:auto}
.chem-chip{padding:6px 11px;font-size:12.5px;border-radius:7px}
#chem-rows td{padding:3px 4px 3px 0}
#chem-rows input{padding:9px 11px;font-size:15px}


/* ---- Chemical entry: one line per chemical, quantity box already there.
   Used identically on New Drum (Soaking), Update Drum and Edit Entry, so
   there is only ever one way to enter a chemical in this app. ---- */
.chem-line{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line,#e8e4de)}
.chem-line:last-child{border-bottom:0}
.chem-line-name{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chem-line-out{color:var(--muted,#8a8378);font-size:12px}
.chem-line-name-input{flex:1;min-width:0;margin:0}
.chem-line .chem-qty-input{width:88px;flex:none;margin:0;text-align:right}
.chem-line-unit{width:26px;color:var(--muted,#8a8378);font-size:13px}
.chem-line .remove-chem-row{padding:0 4px}


/* ---- Tick boxes you can actually see. A bare checkbox next to a line of
   text disappeared on a phone — this makes the whole row a tappable box
   with a large tick, and the box turns green once it is ticked. ---- */
.big-check{display:flex;font-size:14.5px;color:var(--ink);letter-spacing:0;align-items:center;gap:10px;width:100%;
  padding:11px 12px;margin:6px 0;border:1px solid var(--border);
  border-radius:10px;background:#fff;font-weight:500;cursor:pointer}
.big-check input[type="checkbox"],.big-check input[type="radio"]{width:24px;height:24px;flex:none;margin:0;
  accent-color:var(--good,#2e7d4f);cursor:pointer}
/* A choice of one thing or the other, made the same way. */
.big-check.choice{margin:6px 0;flex-wrap:wrap}
.big-check.choice .pick-field{display:none;width:100%;margin:8px 0 0}
.big-check.choice:has(input:checked) .pick-field{display:block}
.big-check span{flex:1}
.big-check:has(input:checked){border-color:var(--good,#2e7d4f);background:#eef7f1}

/* ---- Chemical entry: pick from the drop-down, type a quantity, Add.
   The chosen ones build up in a small table underneath. ---- */
.chem-add{margin-top:4px}
.chem-add-row{display:flex;gap:8px;margin-top:6px;align-items:stretch}
.chem-add-row input{flex:1;min-width:0;margin:0}
.chem-add-row .btn-sm{flex:none;width:auto;display:inline-flex;align-items:center;padding:8px 20px;margin:0}

/* ---- Tables of entries — dense, and scrolled sideways rather than
   squashed on a phone. ---- */
.table-wrap{overflow-x:auto}
.entry-table{width:100%;border-collapse:collapse;font-size:13px}
.entry-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-2);font-weight:600;padding:6px 8px 6px 0;border-bottom:1px solid var(--border-soft)}
.entry-table td{padding:7px 8px 7px 0;border-bottom:1px solid var(--border-soft);vertical-align:top}
.entry-table tr:last-child td{border-bottom:0}
.nowrap{white-space:nowrap}


/* ---- Writing straight into a table, the way the pad on the wall is
   filled in: a row per grade, columns you tab across. Inputs are kept at
   16px so a phone does not zoom in every time one is tapped. ---- */
.grid-entry{width:100%;border-collapse:separate;border-spacing:0 4px;min-width:340px}
.grid-entry th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:0 4px 2px}
.grid-entry td{padding:0 2px;vertical-align:middle}
.grid-entry select,.grid-entry input{margin:0;width:100%;padding:9px 8px;font-size:16px}
.grid-entry th.grp{text-align:center;border-bottom:1px solid var(--border);color:var(--ink)}
.grid-entry td.num{width:72px}
.grid-entry td.num input{text-align:center}
.grid-entry .row-total{font-size:13px;color:var(--muted);text-align:center;white-space:nowrap;width:56px}

/* ---- Multi-item entry: the fields, then the items as they build up. ---- */
.line-builder{margin-top:4px}
.line-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.line-input label{margin-top:0}
.line-input input,.line-input select{margin:0}
.line-builder .line-add-btn{margin-top:8px}
.line-empty{margin-top:6px}


/* ---- The chemical slip: chemical names down the left, a column per drum
   across, exactly like the printed pad. The name column stays put while
   the drums scroll sideways on a phone. ---- */
.slip-table{min-width:100%}
.slip-table th,.slip-table td{padding:4px 6px}
.slip-name{position:sticky;left:0;background:var(--card,#fff);z-index:1;white-space:nowrap;font-weight:600;font-size:12.5px}
.slip-table thead th{background:var(--card,#fff)}
.slip-cell{width:74px;margin:0;padding:6px 7px;text-align:right;font-size:15px}


/* ---- Charts ----------------------------------------------------------
   Inline SVG, one hue — the accent the Owner has set — with grey for
   anything that is context rather than data. Nothing here asks the
   reader to tell two colours apart. ---- */
.chart-card{background:var(--card);border:0;border-radius:var(--radius);
  padding:15px 16px 13px;margin-bottom:10px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.chart-title{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.chart-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.chart-more{font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.chart-empty{font-size:12.5px;color:var(--muted);padding:14px 2px}

/* Horizontal bars: label, track, value. The bar is capped in height well
   under the row so the leftover is air rather than ink. */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:minmax(58px,auto) 1fr minmax(52px,auto);
  align-items:center;gap:12px}
.bar-cat{font-size:12.5px;color:var(--ink);font-weight:500;text-align:right;line-height:1.25}
.bar-track{height:16px;background:var(--border-soft);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:0 4px 4px 0;transition:background .1s}
.bar-row:hover .bar-fill{background:var(--accent-d)}
.bar-val{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;line-height:1.2}
.bar-note{display:block;font-size:10.5px;font-weight:500;color:var(--muted-2);margin-top:1px}

/* Columns: a fortnight of days, one measure. */
.cols{display:flex;align-items:flex-end;gap:3px;height:132px;
  border-bottom:1px solid var(--border);padding-bottom:0}
.cols.is-empty{align-items:center;justify-content:center;border-bottom:0;height:96px}
.col{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.col-plot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.col-fill{width:100%;max-width:18px;background:var(--accent);border-radius:4px 4px 0 0;transition:background .1s}
.col:hover .col-fill{background:var(--accent-d)}
.col-val{font-size:10.5px;font-weight:700;color:var(--ink);margin-bottom:3px;white-space:nowrap}
.col-cat{font-size:10.5px;color:var(--muted-2);text-align:center;padding-top:5px;height:19px;
  overflow:hidden;white-space:nowrap}
.chart-pair{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:760px){.chart-pair{grid-template-columns:1fr 1fr}}

/* The dashboard itself: one column on a phone, two panels across from
   tablet width up. Panels stretch to the tallest in their row so the
   grid stays a grid rather than a ragged pile. */
.dash-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 12px}
.dash-grid>.chart-card{margin-bottom:0;display:flex;flex-direction:column}
/* A panel stretched to match a taller neighbour would otherwise show the
   extra as a void under a short chart. The chart takes the room instead. */
.dash-grid>.chart-card>.bars,
.dash-grid>.chart-card>.cols,
.dash-grid>.chart-card>.meters,
.dash-grid>.chart-card>.pie-wrap,
.dash-grid>.chart-card>.chart-empty{flex:1}
.dash-grid>.chart-card>.cols{height:auto;min-height:132px}
.dash-grid>.chart-card>.bars{justify-content:space-evenly}
@media (min-width:760px){.dash-grid{grid-template-columns:1fr 1fr}}

/* ---- The dashboard, quietly ----------------------------------------
   Fewer boxes, more air. The panels lose their border and lean on the
   gap between them instead, so what carries weight on the page is the
   data rather than the furniture around it. ---- */
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-head h1{margin-bottom:6px}
.page-date{font-size:12.5px;color:var(--muted-2);font-weight:500}

/* The headline figures: no boxes at all, just hairlines between them. */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-soft);
  border-radius:var(--radius);overflow:hidden;margin:6px 0 4px}
.fig{background:var(--card);padding:14px 16px}
.fig-n{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.1}
.fig-l{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}
.fig-note{font-size:11px;color:var(--muted-2);margin-top:4px;font-weight:500;line-height:1.35}
/* auto-fit, not a fixed four: the row holds three now, and a hard count
   would leave a dead cell on the end whenever the number changes. */
@media (min-width:760px){.figs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* What needs somebody: one list, one line each, nothing repeated. */
.attn{background:var(--card);border-radius:var(--radius);overflow:hidden}
.attn-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;
  padding:11px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border-soft)}
.attn-row:last-child{border-bottom:0}
.attn-row:hover{background:var(--border-soft)}
/* Every cell placed by hand: leave any of them to auto-placement and the
   arrow lands in the first column ahead of the text. */
.attn-what{grid-column:1;grid-row:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.attn-why{grid-column:1;grid-row:2;font-size:11.5px;color:var(--muted);line-height:1.35}
.attn-go{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted-2);font-weight:700}


/* The ring: three slices at most, the total in the middle, and a key
   that names and numbers every slice — so identity never rests on
   matching a colour by eye, and two close slices stay readable. */
.pie-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:2px 0}
.pie{width:118px;height:118px;border-radius:50%;flex:none;position:relative}
.pie-hole{position:absolute;inset:25px;background:var(--card);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.pie-total{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.pie-unit{font-size:9.5px;color:var(--muted-2);margin-top:2px;text-align:center;padding:0 6px}
.pie-key{flex:1 1 168px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pie-key-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:9px}
.pie-dot{width:10px;height:10px;border-radius:3px;flex:none}
.pie-label{font-size:12.5px;color:var(--ink);font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pie-pct{font-size:12px;color:var(--muted);font-weight:600}
.pie-num{font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap}

/* A level against the line it must not fall below. */
.meters{display:flex;flex-direction:column;gap:11px}
.meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.meter-cat{font-size:12.5px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter-val{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.meter-unit{font-weight:500;color:var(--muted-2);font-size:11px}
.meter-flag{margin-left:7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--warn);background:color-mix(in srgb, var(--warn) 12%, #fff);padding:2px 6px;border-radius:5px}
/* overflow stays visible so the limit mark can stand a little proud of
   the track — clipped to the track it is nearly invisible. */
.meter-track{position:relative;height:10px;background:var(--border-soft);border-radius:3px}
.meter-fill{height:100%;background:var(--accent);border-radius:3px}
.meter-row.is-under .meter-fill{background:var(--warn)}
/* The line itself, drawn on the track. */
.meter-limit{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.45;border-radius:1px}

/* A headline number with what it is and how it moved. */
.kpi{text-align:left;padding:14px 15px}
.kpi .l{margin-top:3px}
.kpi-note{font-size:11px;color:var(--muted-2);margin-top:5px;font-weight:500;line-height:1.35}

/* ---- Signed in as somebody else --------------------------------------
   Deliberately loud, and at the very top of every screen. If it were
   quiet it would be a back door instead of a tool. ---- */
.impersonating{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#4a2c0c;color:#ffe9c9;padding:9px 14px;font-size:13px;line-height:1.4;
  position:sticky;top:0;z-index:7;
}
.impersonating strong{color:#fff}
.impersonating form{margin:0;flex:none}
.impersonating .btn-sm{background:#ffd9a3;color:#4a2c0c;font-weight:700;white-space:nowrap}
.impersonating + .topbar{top:auto;position:static}

/* The Show tick on a password box sits inline with the buttons beside
   it, not stacked above them like an ordinary field label. */
.pw-show{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13px;
  color:var(--ink);font-weight:500;white-space:nowrap}
.pw-show input{width:auto;margin:0}

/* ---- Business Review -------------------------------------------------
   Figures to be read down, not filled in: the caption sits under the
   label and the number stays hard right, so a column of amounts lines up
   whatever the labels say. ---- */
.review-range{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.review-range label{margin-top:0}
.review-range input{margin:0}
.review-range button{margin:0;white-space:nowrap;width:100%}
/* On a phone the two date boxes fill the row and the button takes its own
   line underneath — squeezed into the same row it lost half its label. */
.review-range>:last-child{grid-column:1/-1}
.review-range>:last-child label{display:none}
@media (min-width:560px){
  .review-range{grid-template-columns:1fr 1fr auto}
  .review-range>:last-child{grid-column:auto}
  .review-range>:last-child label{display:block}
  .review-range button{width:auto;padding-left:26px;padding-right:26px}
}

/* Stepping a window at a time: the same length, one place back or forward,
   which is how a weekly sitting actually moves. */
.review-step{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--border-soft);
  font-size:12.5px;font-weight:600}
.review-step a{text-decoration:none;color:var(--accent)}
.review-step span{color:var(--muted-2);font-weight:600;white-space:nowrap}

.review-figures{padding:6px 14px}
.figure-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0}
.figure-row+.figure-row{border-top:1px solid var(--border-soft)}
.figure-label{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.figure-note{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px}
.figure-value{font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-align:right}

.entry-table td.num,.entry-table th.num{text-align:right}
.row-ungraded td{background:color-mix(in srgb, var(--warn) 6%, #fff)}

.review-waiting{padding:10px 0}
.review-waiting+.review-waiting{border-top:1px solid var(--border-soft)}
.review-waiting strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted-2);font-weight:600;margin-bottom:5px}
.review-waiting ul{margin:0;padding-left:18px;line-height:1.65;font-size:13.5px}

/* ---- Signing in, on a computer ---------------------------------------
   A 380px card adrift in the middle of a monitor reads as a page that has
   not loaded properly. Here the window is halved: the business on the
   left, the two boxes on the right, each filling its own side. The card
   keeps its own markup, so the phone screen is untouched. ---- */
@media (min-width:860px){
  .login-page{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
  .login-brand{
    display:flex;flex-direction:column;justify-content:center;
    padding:56px 60px;background:var(--bg);border-right:1px solid var(--border);
  }
  .login-brand-logo{height:72px;width:auto;align-self:flex-start;margin-bottom:26px}
  .login-brand-name{font-size:27px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.15}
  .login-brand-line{margin-top:14px;font-size:15px;line-height:1.6;color:var(--muted);max-width:30em}

  /* The form side: plain white, the card no longer a card. */
  .login-page>.login-wrap{
    display:flex;align-items:center;justify-content:center;
    max-width:none;margin:0;padding:40px;background:var(--card);
  }
  .login-page .login-card{border:0;padding:0;width:100%;max-width:340px;background:transparent}
  .login-page .login-logo{display:none}          /* the panel has it, larger */
  .login-page .login-title{display:none}         /* and the name with it */
  .login-page .login-heading{display:block;font-size:23px;font-weight:800;
    letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
  .login-page .login-sub{text-align:left;margin-bottom:26px}
  .login-page .login-card input{background:var(--bg)}
  .login-page .login-card input:focus{background:#fff}
  .login-page .login-card .btn-block{margin-top:22px;max-width:none}
}

/* ---- On a computer ---------------------------------------------------
   The app is built for a phone in the tannery, and that layout is the one
   that matters. A desktop screen gets the same pages with room to
   breathe, not a second design: a header across the top, the bottom tab
   bar stood up as a rail down the left under it, and one column of
   content set in the middle of what is left. Nothing on any screen
   changes — every page reflows into it.

   Scoped to body:has(.bottomnav), so the sign-in page (which has no nav
   and lays itself out) is untouched. ---- */
@media (min-width: 900px) {
  body:has(.bottomnav){
    display:grid;
    grid-template-columns:232px minmax(0,1fr);
    /* Row one is the signed-in-as bar. It collapses to nothing when there
       is no bar, but it has to be a named area — otherwise the bar is
       auto-placed into an implicit row below the whole page, where nobody
       would ever see the warning. */
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:"warn warn" "bar bar" "nav main";
    min-height:100vh;
    padding-bottom:0;
    font-size:14.5px;
    /* The rail is only as tall as the window, so the column it stands in
       is painted on the page behind it — without this, a long page shows
       the rail stopping halfway down with grey below it. */
    background:linear-gradient(to right,
      var(--card) 0 231px, var(--border) 231px 232px, var(--bg) 232px);
  }
  body:has(.bottomnav) .impersonating{grid-area:warn;z-index:9}

  /* ---- Header: brand over the rail, who you are at the far end ---- */
  body:has(.bottomnav) .topbar{
    grid-area:bar;position:static;
    padding:0 28px 0 24px;height:60px;
    background:var(--card);border-bottom:1px solid var(--border);
  }
  body:has(.bottomnav) .brand{font-size:15px}
  body:has(.bottomnav) .brand-logo{height:26px}
  body:has(.bottomnav) .module-tag{
    margin-left:6px;padding-left:12px;border-left:1px solid var(--border);
    font-size:12px;font-weight:500;
  }
  body:has(.bottomnav) .who{font-size:12.5px;gap:9px}

  /* ---- Rail ---- */
  body:has(.bottomnav) .bottomnav{
    grid-area:nav;position:sticky;top:0;align-self:start;
    max-height:100vh;overflow-y:auto;overflow-x:hidden;
    flex-direction:column;justify-content:flex-start;gap:1px;
    border-top:0;border-right:0;background:transparent;
    padding:18px 12px 28px;
  }
  body:has(.bottomnav) .navlink{
    flex:0 0 auto;display:flex;align-items:center;gap:12px;
    text-align:left;font-size:13.5px;font-weight:500;letter-spacing:0;
    padding:9px 12px;border-radius:8px;color:var(--muted);
    transition:background .1s,color .1s;
  }
  body:has(.bottomnav) .navlink:hover{background:var(--border-soft);color:var(--ink)}
  body:has(.bottomnav) .navlink.active{
    background:var(--border-soft);color:var(--ink);font-weight:600;
  }
  body:has(.bottomnav) .navlink .nav-ic{
    font-size:16px;display:flex;align-items:center;color:var(--muted-2);
  }
  body:has(.bottomnav) .navlink.active .nav-ic{color:var(--accent)}

  /* While the signed-in-as bar is up it is the thing that stays put, and
     the rail stops sticking: a sticky rail rides up under the bar and
     loses its first link behind it. After the rail's own rules above —
     same specificity, so the order is what decides. */
  body:has(.impersonating) .bottomnav{position:static;max-height:none}

  /* ---- The column ----
     Set in the middle of the space beside the rail rather than pushed up
     against it, and given a wide margin. A line of text pinned to the
     left of a monitor with 400px of nothing beside it is the thing that
     makes a page look unfinished. */
  body:has(.bottomnav) main.wrap{
    grid-area:main;width:100%;max-width:1060px;margin:0 auto;
    padding:30px 40px 80px;
    /* The column is itself a grid, for one reason: the list rows the
       pages emit are plain sibling <a>s with headings between them, so
       there is no wrapper to turn into columns. Everything spans the full
       width as before; only the rows opt out and sit side by side, which
       is what stops a menu of nine short labels being nine 980px-wide
       bands down the middle of a monitor. */
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    grid-auto-rows:min-content;
    align-content:start;
    column-gap:10px;
  }
  body:has(.bottomnav) main.wrap > *{grid-column:1/-1}
  body:has(.bottomnav) main.wrap > .tile{grid-column:auto;margin-bottom:0}
  /* Rows that sit beside each other need the gap the margin used to give
     them, and equal heights so a two-line row does not leave a step. */
  body:has(.bottomnav) main.wrap{row-gap:0}
  body:has(.bottomnav) main.wrap > .tile{margin:0 0 8px}

  /* ---- Type: a step up, with the air a big screen can afford ---- */
  main.wrap h1{font-size:24px;margin:0 0 18px;letter-spacing:-.025em}
  main.wrap h2{font-size:11px;margin:30px 2px 10px;letter-spacing:.09em}
  main.wrap h2:first-child{margin-top:4px}
  main.wrap .note{font-size:13px;margin:8px 2px 16px;max-width:76ch}
  main.wrap .hint{font-size:12.5px}

  /* ---- Surfaces: flat, with a hairline so white sits on grey clearly ---- */
  main.wrap .card,
  main.wrap .activity-feed,
  main.wrap .status-list,
  main.wrap .action-grid{border:1px solid var(--border-soft)}
  main.wrap .card{padding:16px 18px;margin-bottom:10px}
  main.wrap .stat,main.wrap .mini-stat,main.wrap .quick-tile,
  main.wrap .dept-card,main.wrap .tile,main.wrap .alert-item{
    border:1px solid var(--border-soft);
  }
  main.wrap .stat{padding:16px 12px}
  main.wrap .stat .n{font-size:24px}
  /* On a phone the name and the figure sit on one line because there is
     no room for two. Given a column each, they stack under the icon —
     otherwise a longer name ("Accounts & Sales") wraps while its
     neighbours do not, and the row of three looks broken. */
  main.wrap .dept-card{
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"icon name" "icon meta";
    column-gap:13px;row-gap:1px;align-items:center;padding:16px 18px;
  }
  main.wrap .dept-emoji{grid-area:icon}
  main.wrap .dept-name{grid-area:name;align-self:end}
  main.wrap .dept-meta{grid-area:meta;align-self:start;margin-top:0}

  /* A chevron is there to say "this row is tappable". With a pointer and
     a hover state it is just clutter. */
  main.wrap .tile::after,main.wrap .action-tile::after{display:none}
  main.wrap .tile{
    margin-bottom:6px;padding:14px 18px;transition:border-color .1s,background .1s;
  }
  main.wrap .tile:hover{background:var(--card);border-color:var(--border)}
  main.wrap .tile-id{padding-right:0}
  main.wrap .tile-meta{padding-right:0}
  main.wrap .action-tile{padding:14px 18px}

  /* ---- Counts and pickers spread across the width ---- */
  .stats3,.mini-stats{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
  .quick-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  main.wrap .quick-tile{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 14px;text-align:left}
  main.wrap .quick-tile .icon{width:20px;height:20px}
  main.wrap .quick-tile .label{font-size:13px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
  .dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
  .alert-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px}
  .alert-item{margin-bottom:0}

  /* ---- Forms: still one column ----
     Stretching a vehicle-number box across a monitor makes it harder to
     use, not easier. The exception is a form built around a table — those
     are the grids you tab across, and they want every pixel. */
  main.wrap form,
  main.wrap .card:has(> form){max-width:700px}
  main.wrap form:has(table),
  main.wrap .card:has(> form table),
  main.wrap .card:has(> form.wide),
  main.wrap form.wide{max-width:none}
  main.wrap .btn-block{max-width:260px}
  main.wrap label{font-size:11.5px;margin:14px 0 4px}
  main.wrap input,main.wrap select,main.wrap textarea{font-size:14px;padding:10px 12px}

  /* ---- Tables: at this width most reports fit without scrolling ---- */
  .report-table{white-space:normal}
  .report-table th,.report-table td{padding:10px 16px}
  main.wrap .entry-table th{padding:10px 12px 10px 0}
  main.wrap .entry-table td{padding:10px 12px 10px 0}
}

/* ---- Printing ----
   A screen page does not print. Printing is asked for and approved, and
   the approved copy is served as its own letterhead page — so Ctrl+P or
   "Share > Print" on an ordinary screen gives a sheet that says so
   instead of a sheet of figures. */
@media print {
  body:not(.print-ok) main,
  body:not(.print-ok) .topbar,
  body:not(.print-ok) .bottomnav { display: none !important; }
  body:not(.print-ok)::after {
    content: "This page cannot be printed. Ask the Owner for approval, then print the approved copy.";
    display: block; padding: 40px; font-size: 16px; font-weight: 700; text-align: center;
  }
  .print-footer{display:block !important}
  .no-print{display:none !important}
}


/* =====================================================================
   Section tabs and the Payments look, shared by every section.
   Each section (Tannery, Godown, Accounts, Payments) opens with a row of
   its screens as tabs; Books inside Accounts has a second, lighter row.
   ===================================================================== */
.sec-tabs{display:flex;gap:18px;overflow-x:auto;margin:0 0 14px;border-bottom:1px solid var(--border);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sec-tabs::-webkit-scrollbar{display:none}
.sec-tabs a{flex:none;padding:8px 0 10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sec-tabs a:hover{color:var(--ink)}
.sec-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
.sec-tabs a .nav-badge{position:static;display:inline-block;margin-left:5px;vertical-align:1px}
.fin-subtabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;scrollbar-width:none}
.fin-subtabs::-webkit-scrollbar{display:none}
.fin-subtabs a{flex:none;padding:6px 12px;border-radius:16px;background:var(--border-soft);color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.fin-subtabs a.on{background:var(--ink);color:#fff}
/* A section's first screen heading sits right under its tabs */
.sec-tabs + .page-head,.sec-tabs + h1,.sec-tabs + .backlink{margin-top:4px}
.fin-chip{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11.5px;font-weight:600;background:var(--border-soft);color:var(--muted);white-space:nowrap}
.fin-chip.crit{background:color-mix(in srgb,var(--bad) 12%,#fff);color:var(--bad)}
.fin-chip.warn{background:color-mix(in srgb,var(--warn) 14%,#fff);color:var(--warn)}
.fin-chip.ok{background:color-mix(in srgb,var(--good) 12%,#fff);color:var(--good)}
.fin-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0;margin:2px 0 14px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card)}
.fin-books a{padding:10px 12px;text-align:center;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;border-left:1px solid var(--border)}
.fin-books a:first-child{border-left:0}
.fin-books a.on{background:var(--ink);color:#fff}
.fin-cohead{display:flex;flex-direction:column;gap:1px;margin:0 0 10px}
.fin-cohead span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.fin-cohead strong{font-size:22px;letter-spacing:-.02em}
.fin-tier td{padding-top:16px!important;font-size:11.5px;font-weight:700;color:var(--muted)}
.fin-tier.t1 td{color:var(--bad)}.fin-tier.t2 td{color:var(--warn)}
.fin-amt{font-size:30px;font-weight:700;letter-spacing:-.02em;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:6px 0}
.fin-amt:focus{background:transparent;border-bottom-color:var(--ink)}
.fin-pills{display:flex;flex-wrap:wrap;gap:6px}
.fin-pills label{margin:0;display:inline-flex}
.fin-pills input{position:absolute;opacity:0;width:1px;height:1px}
.fin-pills span{display:inline-block;padding:8px 13px;border-radius:18px;border:1px solid var(--border);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;background:var(--card)}
.fin-pills input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.fin-pills input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fin-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:10px;padding:3px;gap:0;margin-bottom:10px}
.fin-seg a{text-align:center;padding:9px;border-radius:7px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px}
.fin-seg a.on{background:var(--ink);color:#fff}
details.fin-more>summary{cursor:pointer;color:var(--muted);font-size:13.5px;font-weight:600;padding:10px 0;list-style:none}
details.fin-more>summary::-webkit-details-marker{display:none}
details.fin-more>summary::before{content:"+ "}
details.fin-more[open]>summary::before{content:"− "}
.fin-co{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:10px 0}
.fin-co .card{margin:0}
.fin-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:2px 0}
.fin-row span:first-child{color:var(--muted)}
.fin-bar{flex:1;height:7px;border-radius:4px;background:var(--border-soft);position:relative;min-width:80px}
.fin-bar i{display:block;height:7px;border-radius:4px}
.entry-table td input.fin-inline{width:110px;padding:5px 7px;font-size:14px;text-align:right}
.entry-table td select.fin-inline{width:auto;max-width:210px;padding:5px 7px;font-size:13px}
.fin-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fin-actions form{margin:0}
@media (min-width:900px){}
/* With the section's tabs on top, the old "‹ Back" pill on a section screen is the same link twice */
main.wrap > .sec-tabs ~ .backlink{display:none}
/* When a section has more tabs than fit, the last ones fade to show the row scrolls */
.sec-tabs.more{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent);padding-right:24px}

/* =====================================================================
   Compact and minimal — everywhere.
   White page, no boxed panels, hairlines instead of cards, smaller type
   and figures, tight spacing. Navigation is the tabs; the button grids
   that repeated them are gone.
   ===================================================================== */
:root{--bg:#ffffff;--border:#e4e7ec;--border-soft:#eef0f3;--radius:6px;--radius-sm:6px;--radius-lg:8px}
body{font-size:14px;background:var(--bg)}
.wrap{padding:8px 12px}
h1{font-size:18px;margin:2px 0 10px}
h2{font-size:10.5px;margin:16px 0 6px;letter-spacing:.07em}
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.page-head h1{margin:0}
.page-date{font-size:12px;color:var(--muted)}
.note{font-size:12.5px;margin:4px 0 10px}
.hint{font-size:12px;margin-top:3px}

/* Panels become plain sections */
.card,.status-list,.activity-feed,.action-grid,.chart-card,.stat-box,.dept-card,.alert-item{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.card{padding:8px 0!important;margin:0 0 8px!important;border-bottom:1px solid var(--border-soft)!important}
.card:last-child{border-bottom:0!important}
.status-list{padding:0!important}

/* Figures: one quiet row, no boxes */
.stats-grid,.mini-stats,.figs,.kpis{display:flex!important;flex-wrap:wrap;gap:0!important;margin:6px 0 12px!important;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.stat,.mini-stat,.fig,.kpi{background:transparent!important;border:0!important;border-radius:0!important;text-align:left!important;padding:8px 18px 8px 0!important;flex:1 1 140px;min-width:0}
.stat + .stat,.mini-stat + .mini-stat,.fig + .fig{border-left:1px solid var(--border-soft)!important;padding-left:14px!important}
.stat .n,.mini-stat .n,.fig-n,.stat-box .n{font-size:17px!important;font-weight:700!important;letter-spacing:-.01em}
.stat .l,.mini-stat .l,.fig-l,.stat-box .l{font-size:11.5px!important;margin-top:1px!important}
.stat-box{text-align:left!important;padding:6px 0!important;margin:6px 0!important}

/* Lists */
.tile{background:transparent!important;border:0!important;border-bottom:1px solid var(--border-soft)!important;border-radius:0!important;padding:8px 22px 8px 0!important;margin:0!important}
.tile:hover{background:var(--border-soft)!important}
.tile-id{font-size:14px}
.tile-meta{font-size:12px}

/* The button grids under the tabs repeat the tabs */
.sec-tabs ~ .quick-grid,.sec-tabs ~ h2:has(+ .quick-grid),.sec-tabs ~ .action-grid,.sec-tabs ~ h2:has(+ .action-grid){display:none!important}
.quick-grid{gap:4px}
.quick-tile{padding:8px 6px!important;background:transparent!important;border:1px solid var(--border-soft)!important}

/* Tables */
.entry-table{font-size:13px}
.entry-table th{padding:5px 8px 5px 0;font-size:10px}
.entry-table td{padding:6px 8px 6px 0}
.card .table-wrap{margin:0}
.card[style*="padding:4px 14px"]{padding:0!important}

/* Controls */
label{margin:8px 0 2px}
input,select,textarea{padding:7px 9px;font-size:14px;border-radius:6px}
button,.btn,.btn-outline,.btn-sm,.btn-block,.btn-bad,.btn-good,.btn-warn{padding:8px 14px;font-size:13.5px;min-height:36px;border-radius:6px}
.btn-sm{padding:5px 10px;font-size:12.5px;min-height:auto}
.btn-block{margin-top:10px}
.backlink{font-size:13px}
.segmented-item{min-height:0;padding:6px 10px}
.segmented-label{font-size:13.5px}

/* Section tabs, quieter */
.sec-tabs{gap:16px;margin:0 0 10px}
.sec-tabs a{padding:6px 0 8px;font-size:13px}
.fin-subtabs{margin:0 0 10px}
.fin-subtabs a{padding:4px 10px;font-size:12.5px;border-radius:5px}
.fin-books{border-radius:6px;margin:0 0 8px}
.fin-books a{padding:6px 10px;font-size:13px}
.fin-cohead{margin:0 0 6px}
.fin-cohead span{font-size:10px}
.fin-cohead strong{font-size:16px}
.fin-co{gap:0;margin:6px 0;border-top:1px solid var(--border-soft)}
.fin-co .card{border-bottom:1px solid var(--border-soft)!important;padding:8px 14px 8px 0!important}
.fin-pills span{padding:5px 11px;font-size:13px;border-radius:5px}
.fin-seg{border-radius:6px}
.fin-seg a{padding:7px;font-size:13.5px;border-radius:4px}
.fin-amt{font-size:24px}
.fin-chip{font-size:11px;padding:1px 6px;border-radius:4px}
.saved,.err{border-radius:6px;padding:7px 10px;margin:6px 0}

/* Charts on Home: smaller */
.chart-card{padding:6px 0!important;border-bottom:1px solid var(--border-soft)!important}
.chart-title{font-size:13px}

@media (min-width:900px){
  body:has(.bottomnav){grid-template-columns:196px minmax(0,1fr);font-size:14px;
    background:linear-gradient(to right,var(--bg) 0 195px,var(--border) 195px 196px,var(--bg) 196px)}
  body:has(.bottomnav) .topbar{height:48px;padding:0 20px}
  body:has(.bottomnav) .brand-logo{height:22px}
  body:has(.bottomnav) .bottomnav{padding:10px 8px 20px}
  body:has(.bottomnav) .navlink{padding:6px 10px;font-size:13px;gap:10px}
  body:has(.bottomnav) main.wrap{max-width:1100px;padding:16px 28px 48px;column-gap:16px}
  body:has(.bottomnav) main.wrap > .tile{margin:0!important}
  main.wrap h1{font-size:20px;margin:0 0 10px}
  main.wrap h2{margin:18px 0 6px}
  main.wrap .card{padding:8px 0!important;margin-bottom:8px!important}
  main.wrap .card,main.wrap .activity-feed,main.wrap .status-list,main.wrap .action-grid,
  main.wrap .stat,main.wrap .mini-stat,main.wrap .quick-tile,main.wrap .dept-card,main.wrap .tile,main.wrap .alert-item{border-color:var(--border-soft)}
}
.fin-co{column-gap:28px!important}
.fin-co .card{padding-right:0!important}
.figs{background:transparent!important;border-radius:0!important}
.fig{background:transparent!important}
.attn{background:transparent!important;border-radius:0!important}
.attn-row{padding-left:0!important}
.chart-card{min-height:0!important}
.chart-empty{padding:6px 0!important}
.dash-switch{margin:4px 0 6px}
.dash-switch .segmented-item{padding:4px 10px;font-size:12.5px}
/* Company switch, books tabs and voucher types: plain text rows */
.fin-books{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:14px!important;background:transparent!important;border:0!important;padding:0!important;scrollbar-width:none}
.fin-books a{flex:0 0 auto!important;padding:2px 0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;font-weight:600;border-bottom:2px solid transparent!important;border-radius:0!important}
.fin-books a.on,.fin-books a[aria-current]{color:var(--ink)!important;border-bottom-color:var(--ink)!important}
.fin-subtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px!important;scrollbar-width:none}
.fin-subtabs a{flex:0 0 auto;padding:2px 0!important;background:transparent!important;border:0!important;color:var(--muted)!important;border-radius:0!important}
.fin-subtabs a.on,.fin-subtabs a[aria-current]{color:var(--accent)!important;font-weight:600}
.fin-pills{gap:4px!important}
.fin-pills a,.fin-pills span{padding:3px 9px!important;font-size:12.5px!important;border-radius:4px!important}
.fin-cohead span{display:none}.fin-cohead strong{font-size:15px}
.fin-pills{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;margin:2px 0 10px!important}

/* ---- Reorganised: tab row + More, one Enter row, compact forms ---- */
.more-list{display:flex;flex-direction:column;border-top:1px solid var(--border-soft)}
.more-list a{padding:9px 0;border-bottom:1px solid var(--border-soft);color:var(--ink);text-decoration:none;font-size:14px}
.more-list a:hover{color:var(--accent)}
@media (min-width:760px){.more-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}}
.fin-pills a{display:inline-block;padding:4px 10px;font-size:13px;border:1px solid var(--border);border-radius:4px;color:var(--ink);text-decoration:none;background:#fff}
.fin-pills a.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.sec-tabs .nav-badge{position:static;display:inline-block;margin-left:3px;vertical-align:1px}

/* Forms: label beside the field on wider screens, so an entry fits on one screen.
   Money screens keep their own layouts. */
@media (min-width:760px){
  main.wrap form.lf{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,420px);column-gap:16px;row-gap:6px;align-items:start;max-width:640px}
  main.wrap form.lf > *{grid-column:2;margin:0}
  main.wrap form.lf > label{grid-column:1;margin:0;padding-top:9px;color:var(--muted);font-size:13px}
  main.wrap form.lf > :is(h1,h2,h3,.table-wrap,table,details,.card,fieldset,.saved,.err){grid-column:1/-1}
  main.wrap form.lf > :is(.grid2,.grid3), main.wrap form.lf > :is(.grid2,.grid3) > div{display:contents}
  main.wrap form.lf > :is(.grid2,.grid3) > div > *{grid-column:2;margin:0}
  main.wrap form.lf > :is(.grid2,.grid3) > div > label{grid-column:1;padding-top:9px;color:var(--muted);font-size:13px}
  main.wrap form.lf > :is(button,.btn-block){justify-self:start;width:auto;min-width:160px;margin-top:8px}
  main.wrap form.lf > .hint{margin-top:-2px;font-size:11.5px}
  main.wrap .card:has(> form.lf){max-width:680px}
}
.animal-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:6px 10px;align-items:center;margin-bottom:6px;max-width:420px}
.animal-grid label{margin:0!important;padding:0!important;font-weight:normal;font-size:13px}
.animal-grid .animal-other{grid-column:span 3}
.fin-page form:has(> .fin-amt), .fin-page form#logform{max-width:560px}

/* ---- Side menu ---- */
.nav-sub,.nav-count{display:none}
@media (min-width:900px){
  body:has(.bottomnav) .bottomnav{display:flex;flex-direction:column;gap:1px;padding:14px 10px 16px;overflow-y:auto}
  body:has(.bottomnav) .navlink{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--muted);background:transparent;text-align:left;min-width:0}
  body:has(.bottomnav) .navlink:hover{background:var(--border-soft);color:var(--ink)}
  body:has(.bottomnav) .navlink.active{background:transparent;color:var(--ink);font-weight:700}
  body:has(.bottomnav) .navlink .nav-ic{font-size:16px;line-height:1;display:flex;color:var(--muted-2)}
  body:has(.bottomnav) .navlink.active .nav-ic{color:var(--ink)}
  body:has(.bottomnav) .navlink .nav-badge{display:none}
  body:has(.bottomnav) .nav-label{flex:1}
  body:has(.bottomnav) .nav-count{display:inline-block;background:var(--bad,#d1372b);color:#fff;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px}
  body:has(.bottomnav) .navlink-menu{margin-top:auto;border-top:1px solid var(--border-soft);border-radius:0;padding-top:12px}
  body:has(.bottomnav) .nav-sub{display:flex;flex-direction:column;margin:2px 0 8px 18px;padding-left:10px;border-left:1px solid var(--border)}
  body:has(.bottomnav) .nav-sub a{padding:5px 8px;font-size:13px;color:var(--muted);text-decoration:none;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:has(.bottomnav) .nav-sub a:hover{color:var(--ink);background:var(--border-soft)}
  body:has(.bottomnav) .nav-sub a.on{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent)}
  body:has(.bottomnav) .nav-sub .nav-badge{position:static;display:inline-block;margin-left:4px;vertical-align:1px}
  /* the side menu now carries the section's screens, so the tab row is not repeated */
  main.wrap > .sec-tabs{display:none}
}