/* ===== 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}
.center{text-align:center}

/* ===== Login ===== */
.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}


/* ---- 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}
}