:root {
  --bg: #f3f4f6; --card: #ffffff; --text: #111827; --muted: #6b7280; --border: #d1d5db;
  --line: #e5e7eb; --accent: #1d4ed8; --accent-text: #ffffff; --accent-soft: rgba(29,78,216,.1);
  --danger: #b91c1c; --ok: #15803d; --warn: #b45309; --top: #111827; --top-text: #f9fafb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8; --border: #334155;
    --line: #273449; --accent: #60a5fa; --accent-text: #0f172a; --accent-soft: rgba(96,165,250,.15);
    --danger: #f87171; --ok: #4ade80; --warn: #fbbf24; --top: #020617; --top-text: #f1f5f9;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar { background: var(--top); color: var(--top-text); display: flex; align-items: center;
          flex-wrap: wrap; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
.brand { color: var(--top-text); font-weight: 700; text-decoration: none; padding: .8rem 1rem .8rem 0; }
.topbar nav { display: flex; align-items: center; flex: 1; gap: .15rem; flex-wrap: wrap; }
.topbar nav a, .topbar nav .link { color: var(--top-text); opacity: .8; text-decoration: none;
          padding: .8rem .6rem; font-size: .95rem; }
.topbar nav a:hover, .topbar nav a.on { opacity: 1; box-shadow: inset 0 -3px 0 var(--accent); }
.topbar .spacer { flex: 1; }
.navtoggle, .navbtn { display: none; }
/* The top bar needs about 1,250 px on one line. Narrower than 1,300: Settings, Help and your name show as icons only
   (the words stay as tooltips and for screen readers). Narrower than 1,100: the ☰ menu, rather than a bar that
   wraps onto two lines (0.17.2 - it used to switch only at phone width, 760). */
.nav-ic { display: none; }
@media (max-width: 1300px) {
  .topbar nav .nav-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar nav .nav-ic { display: inline; }
  .topbar nav a, .topbar nav .link { padding-left: .5rem; padding-right: .5rem; }
}
@media (max-width: 1100px) {
  .topbar nav .nav-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .topbar nav .nav-ic.only-compact { display: none; }
  .topbar nav details.menu > summary { padding: .6rem .2rem; }
  .topbar nav .menu-items { position: static; box-shadow: none; border: 0; background: transparent; padding-left: 1rem; }
  .topbar nav .menu-items a { color: var(--top-text); opacity: .8; padding: .5rem .2rem; }
}
@media (max-width: 1100px) {
  .navbtn { display: block; margin-left: auto; font-size: 1.5rem; padding: .4rem .2rem; cursor: pointer; }
  .topbar nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: .5rem; }
  .navtoggle:checked ~ nav { display: flex; }
  .topbar nav a, .topbar nav .link { padding: .6rem .2rem; text-align: left; }
  .topbar .spacer { display: none; }
}

/* ---------- Layout ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 16px 4rem; }
.auth { max-width: 380px; margin: 8vh auto; }
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; }
.card { box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 2rem; }
.panel { margin-bottom: 1rem; }
.narrow { max-width: 640px; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pagehead h1 { margin-bottom: .6rem; }
.crumbs { margin: 0 0 .25rem; font-size: .9rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.row2 + label { margin-top: .9rem; }
@media (max-width: 760px) { .grid2, .row2 { grid-template-columns: 1fr; } }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.toolbar input[type=search] { flex: 1 1 260px; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.meta .full { flex-basis: 100%; }
.meta .muted { display: block; font-size: .8rem; }

/* ---------- Forms ---------- */
form { margin: 0; }
.stack, .auth form { display: grid; gap: .9rem; }
label { display: grid; gap: .3rem; font-size: .9rem; }
label.check { display: flex; align-items: center; gap: .4rem; }
.checks { display: flex; gap: 1.2rem; flex-wrap: wrap; }
input, select, textarea { font: inherit; padding: .55rem .65rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); color: var(--text); width: 100%; min-width: 0; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; padding: 0; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; }
legend { font-size: .9rem; padding: 0 .3rem; }
.inline { display: inline; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-form input:not([type=checkbox]), .inline-form select { width: auto; flex: 1 1 160px; }
.inline-form .w-num, .w-num { width: 6.5rem; flex: 0 0 6.5rem; }

button, .button { font: inherit; display: inline-block; padding: .6rem 1rem; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--accent); color: var(--accent-text); cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1.3; }
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.small-btn { padding: .35rem .7rem; font-size: .9rem; }

/* ---------- Messages, tags, badges ---------- */
.flash { background: var(--accent-soft); padding: .65rem .9rem; border-radius: 8px; margin: 0 0 1rem; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.low, .neg { color: var(--danger); }
.pos { color: var(--ok); }
.tag { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px;
       background: var(--accent-soft); color: var(--accent); margin-right: .3rem; }
.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px;
         border: 1px solid currentColor; white-space: nowrap; }
.st-submitted { color: var(--accent); }
.st-preparing { color: var(--warn); }
.st-ready { color: var(--ok); background: rgba(21,128,61,.1); }
.st-collected { color: var(--muted); }
.st-cancelled { color: var(--muted); text-decoration: line-through; }
.low-badge { color: var(--danger); font-size: .7rem; padding: 0 .4rem; }
.chip { display: inline-block; font-size: .8rem; padding: .1rem .5rem; margin: .1rem .2rem .1rem 0;
        border-radius: 6px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.chip-on { border-color: var(--accent); }
.faded { opacity: .55; }

/* ---------- Stock list: same column widths in every category ---------- */
@media (min-width: 761px) {
  table.stock-table { table-layout: fixed; }
  table.stock-table th:nth-child(1) { width: 30%; }
  table.stock-table th:nth-child(2) { width: 14%; }
  table.stock-table th:nth-child(3) { width: 12%; }
}

/* ---------- Locations page ---------- */
.site { padding: .9rem 1rem; }
.site-row .site-name { font-weight: 600; }
.inline-form .w-kind { flex: 0 0 10rem; }
.inline-form input.w-num { flex: 0 0 5.5rem; width: 5.5rem; }
.spots { margin-top: .6rem; display: grid; gap: .4rem; }
.spot-row { padding-left: .5rem; }
.tree-mark { color: var(--muted); width: 1rem; text-align: center; }
.add-spot input { max-width: 28rem; }
@media (max-width: 760px) { .inline-form .w-kind { flex: 1 1 100%; } .inline-form input.w-num { flex: 0 0 5rem; } .spot-row { padding-left: 0; } }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .25rem; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.tab { background: none; border: 0; border-radius: 0; color: var(--muted); padding: .55rem .8rem;
       text-decoration: none; box-shadow: none; cursor: pointer; }
.tab.on { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
.tabs .spacer { flex: 1; }

/* ---------- Tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line);
             border-radius: 10px; overflow: hidden; }
table.list th, table.list td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
table.list tr:last-child td { border-bottom: 0; }
table.list .num { text-align: right; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--accent-soft); }
table.users input:not([type=checkbox]) { min-width: 8rem; }
.inline-details { display: inline-block; margin-left: .5rem; }
.inline-details summary { cursor: pointer; color: var(--accent); }
.inline-details form { margin-top: .4rem; }

/* On phones, tables turn into stacked cards */
@media (max-width: 760px) {
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr { border-bottom: 1px solid var(--line); padding: .4rem 0; }
  table.list td { border: 0; padding: .2rem .75rem; text-align: left !important; }
  table.list td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 6.5rem;
      color: var(--muted); font-size: .8rem; }
  table.list tr:last-child { border-bottom: 0; }
  table.lines select { width: 100%; margin-top: .2rem; }
}

/* ---------- Collapsible categories ---------- */
details.category { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem; }
details.category > summary { list-style: none; cursor: pointer; padding: .75rem 1rem; font-weight: 600;
       display: flex; align-items: center; gap: .6rem; user-select: none; }
details.category > summary::-webkit-details-marker { display: none; }
details.category > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.category[open] > summary::before { transform: rotate(90deg); }
details.category > summary .count { font-weight: 400; color: var(--muted); font-size: .85rem; }
details.category table.list { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }

details.category.subcat { margin: .5rem .75rem .75rem; border-radius: 8px; }
details.category.subcat > summary { padding: .55rem .8rem; font-size: .95rem; }
details.category > .pick-list:first-of-type, details.category > table.list:first-of-type { border-top: 1px solid var(--line); }
.inline-new summary { cursor: pointer; color: var(--accent); }
.inline-new[open] summary { margin-bottom: .6rem; }

/* ---------- Order form ---------- */
.pick-list { border-top: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.pick-row:last-child { border-bottom: 0; }
.pick-row.picked { background: var(--accent-soft); }
.pick-name { flex: 1; display: grid; }
.pick-qty { display: flex; align-items: center; gap: .4rem; }
.pick-qty input { width: 6.5rem; text-align: right; }
.pick-qty .unit { width: 2.8rem; color: var(--muted); font-size: .9rem; }
.cut-qty { flex-wrap: wrap; justify-content: flex-end; }
.cut-qty .cuts-input { width: 4.2rem; }
.cut-qty .times { color: var(--muted); }
.cut-qty .cut-total { flex-basis: 100%; text-align: right; min-height: 1em; }
.stackcell { display: inline-block; vertical-align: top; }
.cut-plan { width: 100%; border-collapse: collapse; }
.cut-plan td { padding: .25rem .4rem; border: 0; }
.cut-plan input { width: 4.5rem; }
.cut-plan .left { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.submitbar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
             padding: .8rem 0; background: linear-gradient(to top, var(--bg) 70%, transparent); margin-top: .5rem; }

/* ---------- Photos ---------- */
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line);
         background: #fff; flex: 0 0 44px; display: block; }
.with-thumb { display: flex; align-items: center; gap: .7rem; }
.thumb-link { flex: 0 0 auto; }
.pick-row .thumb { width: 52px; height: 52px; flex-basis: 52px; }
.item-intro { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; }
.item-photo img { max-width: min(320px, 100%); max-height: 320px; border-radius: 10px; border: 1px solid var(--line);
                  background: #fff; display: block; }
.item-intro p { flex: 1 1 240px; margin: 0; }
.photo-edit { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.photo-edit .stack { flex: 1 1 240px; }
.photo-paste { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.photo-paste[hidden], .photo-paste [hidden] { display: none; }
.photo-paste kbd { font: inherit; font-size: .85em; padding: .05rem .35rem; border: 1px solid var(--border); border-radius: 4px; }
@media (pointer: coarse) { .photo-paste .muted { display: none; } }
[data-photo-msg] { margin: 0; }
[data-photo-msg]:empty { display: none; }
.photo-preview { width: 120px; height: 120px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
input[type=file] { padding: .4rem; }

/* ---------- Reports ---------- */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.report-card { display: grid; gap: .35rem; text-decoration: none; color: var(--text); margin: 0; }
.report-card:hover { border-color: var(--accent); }
.report-card strong { color: var(--accent); }
.report-filters { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: end; }
.report-filters label { flex: 1 1 180px; }
.report-filters label.check { flex: 0 0 auto; }
.report-filters .actions { margin: 0; flex-basis: 100%; }
.report-filters .presets { margin: 0; flex-basis: 100%; }
.report-head h1 { margin-bottom: .2rem; }
.report-head p { margin: .15rem 0; }
.report-line { font-weight: 600; }
.report-section h2 { margin-top: 1.4rem; }
.report-section > .small { margin-top: -.4rem; }
table.count-sheet tr.item-start td { border-top: 1px solid var(--border); }
table.count-sheet td:last-child, table.count-sheet tr:last-child td:last-child { min-width: 7rem; border-bottom: 1px solid var(--muted); }

/* ---------- Printing a pick list ---------- */
@media print {
  .no-print, .topbar, .actions, .flash { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, table.list { border-color: #999; }
  select { border: 0; appearance: none; padding: 0; }
  .page { max-width: none; padding: 0; }
  body { font-size: 11pt; }
  .report-head { margin-bottom: .5rem; }
  table.list { border: 1px solid #999; border-radius: 0; }
  table.list { display: table; width: 100%; }
  table.list tbody { display: table-row-group; }
  table.list thead { display: table-header-group; }
  table.list tr { display: table-row; }
  table.list td, table.list th { display: table-cell; padding: .3rem .5rem; border-bottom: 1px solid #ccc; }
  table.list td[data-label]::before { content: none !important; }
  table.report-table tr { page-break-inside: avoid; }
  .report-section h2 { page-break-after: avoid; }
  table.count-sheet td:last-child, table.count-sheet tr:last-child td:last-child { border-bottom: 1px solid #000; }
}

/* =====================================================================
   Timesheets additions
   ===================================================================== */
.mt0 { margin-top: 0; }
.notice { background: rgba(180,83,9,.12); color: var(--text); border-left: 4px solid var(--warn); padding: .6rem .8rem; border-radius: 6px; }
.badge.st-ok { color: var(--ok); }
.badge.st-open { color: var(--accent); }
.badge.st-locked { color: var(--warn); }
.button.big, button.big { padding: .8rem 1.6rem; font-size: 1.05rem; font-weight: 600; }
code, .secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); padding: .1rem .35rem; border-radius: 4px; }
.w-small { width: 5rem; flex: 0 0 5rem; }
.w-code { width: 9rem; flex: 0 0 9rem; }
.w-time { max-width: 10rem; }
.danger-link { color: var(--danger); }
.scroll-x { overflow-x: auto; }
.print-only { display: none; }

/* Sign-in page */
.ms-button { display: flex; align-items: center; justify-content: center; gap: .6rem; background: var(--card);
             color: var(--text); border-color: var(--border); font-weight: 600; padding: .75rem 1rem; }
.ms-button:hover { border-color: var(--accent); }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1rem 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.code-input { font-size: 1.4rem; letter-spacing: .2em; text-align: center; }
.qr { background: #fff; padding: 8px; display: inline-block; border-radius: 8px; margin: .6rem 0; }
.qr svg { width: 200px; height: 200px; display: block; }
.steps code.secret { white-space: normal; overflow-wrap: anywhere; }
.twofa-code { margin-top: .6rem; }

/* Setup drop-down menu in the top bar */
details.menu { position: relative; }
details.menu > summary { list-style: none; color: var(--top-text); opacity: .8; padding: .8rem .6rem; cursor: pointer; font-size: .95rem; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary.on, details.menu[open] > summary { opacity: 1; box-shadow: inset 0 -3px 0 var(--accent); }
.menu-items { position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--line);
              border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 220px; padding: .35rem 0; z-index: 20; }
.topbar .menu-items a { display: block; color: var(--text); opacity: 1; padding: .55rem 1rem; box-shadow: none; }
.topbar .menu-items a:hover { background: var(--accent-soft); box-shadow: none; }
@media (max-width: 760px) {
  details.menu > summary { padding: .6rem .2rem; }
  .menu-items { position: static; box-shadow: none; border: 0; background: transparent; padding-left: 1rem; }
  .topbar .menu-items a { color: var(--top-text); opacity: .8; padding: .5rem .2rem; }
}

/* Time entry form */
.entry-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.entry-form legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .8rem; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.entry-grid .span2, .grid2 > .span2 { grid-column: 1 / -1; }
.entry-grid select, .entry-grid input { min-height: 2.75rem; }
.static-field { display: block; padding: .55rem 0; font-weight: 600; }
.date-row, .time-row { display: flex; gap: .4rem; align-items: center; }
.date-row { align-items: stretch; }   /* ‹ › as tall as the date box (0.22.1) */
.date-row .daybtn { display: inline-flex; align-items: center; }
.date-row input { flex: 1; }
.time-row select { flex: 1; }
.daybtn { padding: .5rem .8rem; font-size: 1.1rem; line-height: 1.2; }
fieldset[disabled] .entry-grid { opacity: .6; }
.editing-note { border-left: 4px solid var(--accent); }
@media (max-width: 760px) {
  .entry-grid { grid-template-columns: 1fr; }
  .entry-form .actions button { width: 100%; }
  input, select, textarea { font-size: 16px; }    /* stops iPhones zooming in on tap */
}

/* Entries under the form */
.total-pill { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 999px;
              padding: .05rem .6rem; font-size: .95rem; margin-left: .4rem; }
.day-section h2, .period-section h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
table.entries td.notes, td.notes { max-width: 22rem; white-space: pre-wrap; font-size: .9rem; color: var(--muted); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline; }
tr.is-editing td, li.is-editing { background: var(--accent-soft); }
.empty { padding: .4rem 0; }
.period-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.period-head h2 { margin: 0; }
.period-nav { display: flex; gap: .4rem; }
.period-days { display: grid; gap: .45rem; margin-top: .8rem; }
.pday { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pday.weekend { background: transparent; }
.pday.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pday.missing .pday-total { color: var(--danger); font-weight: 600; }
.pday-head { display: flex; justify-content: space-between; padding: .55rem .9rem; text-decoration: none; color: var(--text); }
.pday-head:hover { background: var(--accent-soft); }
.pday-date { font-weight: 600; }
.pday.weekend .pday-date { color: var(--muted); font-weight: 400; }
.pday-lines { list-style: none; margin: 0; padding: 0 .9rem .5rem; }
.pday-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: .2rem .9rem; padding: .3rem 0; border-top: 1px dashed var(--line); font-size: .92rem; }
.pl-time { text-align: right; font-variant-numeric: tabular-nums; }
.pl-notes { grid-column: 1 / -1; white-space: pre-wrap; }
@media (max-width: 760px) { .row-actions { text-align: left; padding-top: .4rem !important; } }

/* Pay period grid */
table.grid-table th, table.grid-table td { padding: .45rem .5rem; }
table.grid-table .wk { background: var(--bg); }
table.grid-table td.gap { background: rgba(185,28,28,.06); }
table.grid-table tfoot th { color: var(--text); font-size: .9rem; text-transform: none; border-top: 2px solid var(--border); }
@media (max-width: 760px) {
  /* keep the grid as a real table on phones - scroll sideways */
  table.grid-table { display: table; min-width: 760px; }
  table.grid-table thead { display: table-header-group; }
  table.grid-table tbody { display: table-row-group; }
  table.grid-table tr { display: table-row; }
  table.grid-table td, table.grid-table th { display: table-cell; }
}

/* Users */
.user-card > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; cursor: pointer; list-style: none; }
.user-card > summary::-webkit-details-marker { display: none; }
.user-card[open] > summary { margin-bottom: 1rem; }
.user-card { padding: .8rem 1rem; }
.add-user > summary { cursor: pointer; color: var(--accent); }
.add-user[open] > summary { margin-bottom: 1rem; }

/* Jobs, codes */
.sub-row { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.add-subs { margin-top: 1rem; }
.inline-tabs { border: 0; margin: 0; }
table.kv th { text-align: left; padding: .3rem 1rem .3rem 0; color: var(--muted); font-weight: 500; vertical-align: top; }
table.kv td { padding: .3rem 0; }
tr.warn-row td { background: rgba(185,28,28,.06); }

/* Reports */
table.list tfoot th { color: var(--text); font-size: .95rem; text-transform: none; letter-spacing: 0; border-top: 2px solid var(--border); padding: .6rem .75rem; }
table.list tfoot th.num { text-align: right; }
table.compact th, table.compact td { padding: .4rem .45rem; font-size: .9rem; }
.signature { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 1.5rem; margin: 2.2rem 0 1rem; }
.signature span { border-top: 1px solid var(--text); padding-top: .3rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) {
  table.list tfoot { display: block; }
  table.list tfoot tr { display: block; }
  table.list tfoot th { display: inline-block; border: 0; padding: .2rem .75rem; }
  table.list tfoot th:empty { display: none; }
}
@media print {
  @page { margin: 12mm; }
  .print-only { display: block; }
  .report-section.page-break { page-break-before: always; }
  table.compact th, table.compact td { font-size: 8.5pt; padding: .15rem .25rem; }
  table.list tfoot { display: table-footer-group; }
  table.list tfoot tr { display: table-row; }
  table.list tfoot th { display: table-cell; }
  .scroll-x { overflow: visible; }
  .signature span { color: #000; border-color: #000; }
  .pday { page-break-inside: avoid; }
}

/* Billing */
.bill-summary { margin-bottom: 1rem; }
.bill-box { margin-top: 1.5rem; }
tr.bill-line.excluded td { opacity: .45; text-decoration: line-through; }
@media print { tr.bill-line.excluded { display: none !important; } .bill-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.badge.st-billed { color: var(--ok); }
input[type=radio] { width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--accent); flex: 0 0 auto; }
.report-filters label.check { white-space: nowrap; }

/* ---------- Time already entered (calendar + entry list) ---------- */
.my-time { margin-top: 1.25rem; }
.mt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.mt-head h2 { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.period-total { color: var(--text); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-dow { font-size: .75rem; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
           min-height: 3.4rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
           color: var(--text); background: var(--card); }
.cal-day:hover { border-color: var(--accent); }
.cal-day.weekend { background: var(--bg); color: var(--muted); }
.cal-date { font-size: .8rem; color: var(--muted); }
.cal-hours { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; min-height: 1.2em; }
.cal-day.has { background: var(--accent-soft); border-color: transparent; }
.cal-day.missing { border-color: var(--danger); }
.cal-day.missing .cal-hours { color: var(--danger); }
.cal-day.today .cal-date { color: var(--accent); font-weight: 700; }
.cal-day.selected { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.cal-key { margin: .5rem 0 0; display: flex; align-items: center; gap: .4rem; }
.key-missing { display: inline-block; width: .8rem; height: .8rem; border: 1px solid var(--danger); border-radius: 3px; }
.day-detail { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.day-detail h3 { display: flex; align-items: center; gap: .3rem; margin: 0 0 .5rem; font-size: 1.05rem; }
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .75rem; align-items: start;
         padding: .7rem 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry.is-editing { background: var(--accent-soft); border-radius: 8px; padding-left: .5rem; padding-right: .5rem; }
.entry-hours { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.entry-hours b { font-size: 1.15rem; }
.entry-hours span { font-size: .8rem; color: var(--muted); margin-left: .15rem; }
.entry-job { line-height: 1.3; }
.entry-sub { color: var(--muted); font-size: .9rem; }
.entry-notes { font-size: .88rem; margin-top: .2rem; white-space: pre-wrap; color: var(--text); opacity: .85; }
.entry-actions { display: flex; gap: .8rem; align-items: center; font-size: .9rem; white-space: nowrap; }
.entry-actions form { display: inline; }
.entry-actions .link { font-size: .9rem; }
.entry-list.compact .entry { padding: .4rem 0; grid-template-columns: 3.6rem 1fr auto; }
.entry-list.compact .entry-hours b { font-size: 1rem; }
.all-entries { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.all-entries > summary { cursor: pointer; color: var(--accent); }
.all-day { margin-top: .8rem; }
.all-day-head { display: flex; justify-content: space-between; font-weight: 600; text-decoration: none; color: var(--text);
                background: var(--bg); padding: .35rem .6rem; border-radius: 6px; }
@media (max-width: 760px) {
  .cal { gap: .25rem; }
  .cal-day { min-height: 3rem; border-radius: 8px; }
  .cal-hours { font-size: .85rem; }
  .entry { grid-template-columns: 3.6rem 1fr; }
  .entry-actions { grid-column: 2; gap: 1.2rem; }
}
@media print { .cal, .cal-key, .all-entries > summary { display: none; } .all-entries { display: block; } }
.entry-actions a, .entry-actions .link { text-decoration: none; color: var(--accent); }
.entry-actions a:hover, .entry-actions .link:hover { text-decoration: underline; }
.entry-actions .danger-link { color: var(--danger); }
.entry-actions a.muted { color: var(--muted); }

/* Report sharing */
.share-panel { margin-top: 1.5rem; }
.share-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem 1rem; }
.shared-tag { justify-self: start; margin-top: .3rem; }
.period-pick { display: flex; gap: .4rem; flex-wrap: wrap; flex-basis: 100%; }
@media (max-width: 760px) {
  table.report-table td:empty { display: none; }        /* no "Subcode" / "Notes" label with nothing after it */
  table.report-table tbody tr td:first-child:not(:empty) { font-weight: 700; }
}
.key-off { display: inline-block; width: .8rem; height: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; margin-left: .8rem; }
.day-checks { gap: .4rem 1rem; margin: .3rem 0; }

/* Pay period adjustments */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.adj-table input.hrs-in { width: 5rem; text-align: right; padding: .35rem .45rem; }
.adj-table input:not(.hrs-in) { min-width: 9rem; padding: .35rem .45rem; }
.adj-table th.neg { color: var(--danger); }

/* Payroll sheet (looks like the office spreadsheet) */
.wide-page { max-width: 1500px; }
table.pay-sheet { border-collapse: collapse; background: var(--card); font-size: .92rem; }
table.pay-sheet th, table.pay-sheet td { border: 1px solid var(--border); padding: .3rem .45rem; text-align: center; white-space: nowrap; }
table.pay-sheet thead th { position: sticky; top: 0; z-index: 1; }
.ps-date { font-size: 1.1rem; background: var(--card); }
.ps-name { min-width: 4.8rem; font-size: .95rem; color: #111827; }
.ps-h0 { background: #d9ead3; } .ps-h1 { background: #fff2cc; } .ps-h2 { background: #ddebf7; }
.ps-dow, .ps-day { background: var(--card); text-align: left !important; }
.ps-weekend .ps-dow, .ps-weekend .ps-day { font-style: italic; }
td.ps-off { color: var(--muted); font-style: italic; }
.ps-sum th { text-align: left !important; background: var(--card); }
.ps-worked th, .ps-worked td, .ps-paid th, .ps-paid td { font-weight: 700; }
.ps-paid th, .ps-paid td { border-top: 2px solid var(--text); }
.ps-bankin th, .ps-bankin td { color: #c00000; font-weight: 700; }
.ps-sick th, .ps-sick td { color: #38761d; font-weight: 700; }
.ps-stat th, .ps-stat td { color: #c2185b; font-weight: 700; }
.ps-bankout th, .ps-bankout td { color: #1f3fbf; font-weight: 700; }
.ps-gap td { border-left: 0; border-right: 0; height: .6rem; padding: 0; }
.ps-extra th, .ps-extra td { color: #5b3a8e; font-weight: 700; }
.ps-loa th, .ps-loa td { background: #fff9c4; }
.ps-totals { display: flex; gap: 2rem; margin-top: .8rem; }
@media (prefers-color-scheme: dark) {
  .ps-bankin th, .ps-bankin td { color: #f87171; } .ps-sick th, .ps-sick td { color: #4ade80; }
  .ps-stat th, .ps-stat td { color: #f472b6; } .ps-bankout th, .ps-bankout td { color: #93c5fd; }
  .ps-extra th, .ps-extra td { color: #c4b5fd; } .ps-loa th, .ps-loa td { background: #3f3a12; }
}
@media print { table.pay-sheet { font-size: 8pt; } table.pay-sheet th, table.pay-sheet td { padding: .1rem .2rem; } }

/* LOA */
.loa-box { background: #fff9c4; border: 1px solid #e6d96a; border-radius: 8px; padding: .7rem .8rem; display: grid; gap: .3rem; color: #111827; }
.loa-box .muted { color: #5b5b3a; }
.cal-loa { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .03em; background: #fde047; color: #3f3a12;
           border-radius: 4px; padding: 0 .3rem; line-height: 1.4; }
.loa-note { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.active-check { background: var(--bg); border-radius: 8px; padding: .6rem .7rem; align-items: flex-start; }
button.link.danger-link { color: var(--danger); }
.adj-table input.hrs-in { width: 4.2rem; }
.adj-table input:not(.hrs-in) { min-width: 8rem; }
.adj-table th, .adj-table td { padding: .5rem .45rem; }

/* ---------- Dashboard and module switcher ---------- */
.module-switch > summary { background: rgba(255,255,255,.12); border-radius: 8px; padding: .35rem .7rem !important;
                           margin-right: .6rem; opacity: 1 !important; box-shadow: none !important; font-weight: 600; }
.menu-items a.on { font-weight: 700; }
.menu-soon { display: block; padding: .55rem 1rem; color: var(--muted); }
.module-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.module-tile { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
               border-radius: 14px; padding: 1.25rem; text-decoration: none; color: var(--text);
               box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: border-color .15s, transform .15s; }
a.module-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-tile.soon { opacity: .6; }
.mt-icon { flex: 0 0 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); }
.mt-icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt-inventory .mt-icon { background: rgba(21,128,61,.12); } .mt-inventory .mt-icon svg { stroke: var(--ok); }
.mt-setup .mt-icon { background: var(--bg); } .mt-setup .mt-icon svg { stroke: var(--muted); }
.mt-body { display: grid; gap: .3rem; }
.mt-name { font-size: 1.2rem; font-weight: 700; }
.mt-blurb { color: var(--muted); font-size: .95rem; }
.mt-stat { font-size: .9rem; margin-top: .3rem; }
.mt-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }
@media (max-width: 1100px) { .brand { order: 0; } .module-switch { order: 1; } .navbtn { order: 2; } .topbar nav { order: 3; } }

/* Users: permissions per module */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.perm-module { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .5rem .75rem .65rem; }
.perm-module legend { font-weight: 700; font-size: .9rem; }
.perm-help { margin: .2rem 0; }

/* =====================================================================
   Documents: panel schedule sticker (always black on white, sized in inches)
   ===================================================================== */
.sticker { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
.sticker * { box-sizing: border-box; }
.stk-head { text-align: center; padding-bottom: .04in; }
.stk-logo { display: block; width: 100%; height: auto; margin: 0 auto .05in; }
.stk-phone { color: #0b2a8f; font-weight: 700; font-size: 10pt; line-height: 1.2; }
.stk-title { font-weight: 700; font-size: 12pt; line-height: 1.25; }
.stk-box { border: 1px solid #000; border-bottom: 0; }
.stk-sub { text-align: center; font-style: italic; font-size: 9pt; padding: .04in; border-bottom: 1px solid #000; }
.stk-grid { display: grid; grid-template-columns: minmax(0, 1fr) .17in auto auto .17in minmax(0, 1fr); }
.stk-grid > div { border-bottom: 1px solid #000; min-width: 0; }
.stk-num { font-weight: 700; font-size: var(--num); display: flex; align-items: center; justify-content: center;
           padding: 0 .03in; min-width: .36in; line-height: 1; }
.stk-num.stk-left { border-right: 4px double #000; }
.stk-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 5.5pt;
            font-weight: 700; line-height: 1; gap: 1px; }
.stk-mark i { display: block; width: .09in; border-top: 1px solid #000; }
.stk-dash i { width: .07in; }
.stk-label { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .04in;
             font-size: var(--lbl); line-height: 1.1; text-transform: uppercase; overflow: hidden; }
.stk-label span { overflow-wrap: break-word; }
.stk-half span { white-space: nowrap; }
.stk-half { font-size: calc(var(--lbl) * .92); }
.stk-spare { font-style: italic; font-size: calc(var(--lbl) * .8); }
/* Two strips, one for each side of the panel: side by side with a gap to cut along */
.stk-pair { display: flex; gap: .35in; align-items: flex-start; }
.stk-strip .stk-grid { grid-template-columns: auto .17in minmax(0, 1fr); }
.stk-strip .stk-num.stk-left, .stk-strip .stk-num { border-right: 1px solid #000; }
/* The main breaker sitting in the breaker spaces (panels laid out by hand), and a position with nothing in it */
.stk-main { display: flex; align-items: center; justify-content: center; background: #e5e7eb; font-weight: 700;
            font-size: 8pt; letter-spacing: .08em; }
/* A panel on its side: breakers run across, labels between the two rows of numbers. Prints landscape. */
.stk-across-head { display: flex; align-items: center; gap: .25in; margin-bottom: .08in; }
.stk-across-head .stk-logo { width: 2.6in; margin: 0; }
.stk-across-head .stk-sub { border: 0; padding: 0; text-align: left; }
.stk-across-grid { display: grid; border-top: 1px solid #000; border-left: 1px solid #000; }
.stk-across-grid > div { border-right: 1px solid #000; border-bottom: 1px solid #000; min-width: 0; }
.stk-anum { font-weight: 700; font-size: 16pt; text-align: center; padding: .03in 0; line-height: 1.1; }
.stk-alabel { display: flex; align-items: center; justify-content: center; text-align: center; padding: .03in;
              font-size: 7pt; line-height: 1.1; text-transform: uppercase; overflow: hidden; }
.stk-alabel span { overflow-wrap: break-word; }
@page across { size: letter landscape; }
.stk-across { page: across; }

.sticker-wrap { background: #fff; display: inline-block; padding: .2in; border-radius: 8px; border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.sticker-page .page { max-width: none; }
.sticker-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
@media print {
  .sticker-page .sticker-wrap { border: 0; padding: 0; border-radius: 0; }
  .sticker-page .page { padding: 0; margin: 0; }
  .sticker, .sticker * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Documents pages ---------- */
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.row4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; }
.layout-fields { margin-top: .9rem; }
.search-row { margin: 0 0 1rem; max-width: 36rem; }
.ckt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .9rem; margin-bottom: 1rem; }
@media (max-width: 760px) { .ckt-grid { grid-template-columns: 1fr; } }
.ckt { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 1px solid var(--line);
       border-radius: 10px; padding: .4rem .5rem; }
.ckt-n { font-weight: 800; font-size: 1.15rem; min-width: 2rem; text-align: center; }
.ckt-body { flex: 1 1 auto; min-width: 0; }
.ckt-ab { display: none; flex-direction: column; gap: .3rem; }
.ckt.is-split .ckt-ab { display: flex; }
.ckt.is-split .ckt-label { display: none; }
.ckt-covered-note { display: none; padding: .55rem 0; }
.ckt.is-covered { background: var(--bg); border-style: dashed; }
.ckt.is-covered .ckt-label, .ckt.is-covered .ckt-ab, .ckt.is-covered .ckt-opts { display: none; }
.ckt.is-covered .ckt-covered-note { display: block; }
.ckt-opts { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.ckt-opts select { width: auto; padding: .45rem .4rem; }
.ckt-opts label.check { white-space: nowrap; }
.notes-for-office { margin-bottom: 1rem; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: .7rem 0; display: flex; flex-wrap: wrap;
                  gap: .5rem; border-top: 1px solid var(--line); z-index: 5; }
.preview-section { margin: 1.5rem 0; }
.actions-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions-row form.inline { display: contents; }
.badge.st-draft { color: var(--muted); }
.badge.st-submitted { color: var(--warn); }
.badge.st-printed, .badge.st-complete { color: var(--ok); }

/* Walk-through form */
.walk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .walk-cols { grid-template-columns: 1fr; } }
.walk-col { display: grid; gap: .6rem; }
.walk-group { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; }
.walk-head { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 4.5rem; gap: .4rem; font-weight: 700; font-size: .85rem;
             padding-bottom: .25rem; }
.wh-col { font-style: italic; font-weight: 600; color: var(--muted); }
.walk-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 4.5rem; gap: .4rem; align-items: center; padding: .15rem 0; }
.walk-row.has-option { grid-template-columns: minmax(0, 1fr) 7.5rem 4.5rem; }
.walk-row .wr-label { font-weight: 600; }
.walk-row.cont .wr-label { visibility: hidden; }
.walk-row .wr-option { color: var(--text); font-size: .92rem; }
.walk-row input { padding: .4rem .5rem; }
.walk-row.has-option input.wr-box { grid-column: 3; }
@media (max-width: 480px) {
  .walk-row, .walk-head { grid-template-columns: minmax(0, 1fr) 5.5rem 3.6rem; }
}
.walk-notes { margin: 1rem 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.help-pre { white-space: pre-wrap; font-size: .82rem; background: var(--bg); padding: .7rem; border-radius: 8px; overflow-x: auto; }

/* Walk-through print sheet (letter, black on white, like the spreadsheet) */
.wp-sheet { background: #fff; color: #000; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 10pt;
            width: 7.6in; max-width: 100%; padding: .3in; border: 1px solid var(--line); border-radius: 8px; }
.wp-top { display: grid; grid-template-columns: 1fr 1fr; gap: .3in; align-items: end; margin-bottom: .1in; }
.wp-logo { width: 100%; height: auto; }
.wp-title { font-weight: 700; font-size: 11pt; margin-bottom: .03in; }
.wp-head { width: 100%; border-collapse: collapse; }
.wp-head th, .wp-head td { border: 1px solid #000; padding: 0 4px; text-align: left; font-size: 9pt; height: .18in; }
.wp-head th { width: 32%; font-weight: 700; }
.wp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .3in; align-items: start; }
.wp-group { width: 100%; border-collapse: collapse; margin-bottom: .075in; table-layout: fixed; }
.wp-group col.c1 { width: 44%; } .wp-group col.c2 { width: 30%; } .wp-group col.c3 { width: 26%; }
.wp-group td { border: 1px solid #000; padding: 0 3px; height: .172in; line-height: 1.05; vertical-align: middle;
               overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wp-ghead th { text-align: left; font-weight: 700; font-style: italic; padding: 1px 3px 0; font-size: 9.5pt; }
.wp-ghead th.wp-gtitle { font-style: normal; text-decoration: underline; }
.wp-notes { margin-top: .08in; border: 1px solid #000; }
.wp-notes-title { font-weight: 700; padding: 0 4px; border-bottom: 1px solid #000; font-size: 9pt; }
.wp-notes-body { min-height: 1.15in; padding: 1px 4px; white-space: pre-wrap; line-height: .19in;
                 background-image: repeating-linear-gradient(#fff 0, #fff calc(.19in - 1px), #000 calc(.19in - 1px), #000 .19in); }
@media print {
  .walk-print-page .page { padding: 0; margin: 0; max-width: none; }
  .wp-sheet { border: 0; padding: 0; width: auto; border-radius: 0; }
  .wp-sheet, .wp-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Documents home + library */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: start; }
.doc-line { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0;
            border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.doc-line:hover { color: var(--accent); }
.upload-box summary { cursor: pointer; }
.upload-form { margin-top: .8rem; }
.lib-filters { margin: 0 0 1rem; }
.lib-filters select { flex: 0 1 14rem; }
.ftype { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: .25rem .35rem;
         border-radius: 5px; background: var(--accent-soft); color: var(--accent); min-width: 2.4rem; text-align: center; }
.ft-pdf { background: rgba(185,28,28,.12); color: var(--danger); }
.ft-img { background: rgba(21,128,61,.12); color: var(--ok); }
.ft-xls { background: rgba(21,128,61,.12); color: var(--ok); }
.lib-edit td { background: var(--bg); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.type-pick { max-width: 24rem; }
.type-summary { margin: .3rem 0 .6rem; }

/* Walk-through form (2024 layout: two items per row) */
.wf { display: grid; gap: .35rem; margin-bottom: 1rem; }
.wf-heading { margin: 1rem 0 .2rem; font-size: 1.05rem; color: var(--accent); letter-spacing: .02em; }
.wf-note { margin: 0 0 .4rem; font-weight: 600; }
.wf-gap { height: .5rem; }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
.wf-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem; align-items: center;
           background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; min-height: 2.6rem; }
.wf-empty { background: transparent; border-color: transparent; }
.wf-label { font-weight: 600; font-size: .9rem; }
.wf-fields { display: flex; gap: .35rem; min-width: 0; }
.wf-fields select, .wf-fields input { padding: .4rem .45rem; min-width: 0; }
.wf-fields .wf-num { max-width: 6rem; }
.readonly-input { background: var(--bg); }
@media (max-width: 760px) {
  .wf-row { grid-template-columns: 1fr; }
  .wf-empty { display: none; }
}

/* Walk-through print (2024 layout) */
.wp2 { font-family: Calibri, Carlito, Arial, sans-serif; font-size: 10pt; }
.wp2-top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .3in; margin-bottom: .08in; }
.wp2-logo { width: 3.2in; max-width: 100%; height: auto; }
.wp2-title { color: #0b6bbf; font-weight: 700; font-size: 11pt; text-align: center; }
.wp2-row { display: grid; grid-template-columns: 1.25fr 1fr .6in 1.25fr 1fr; break-inside: avoid; }
.wp2-head { margin-bottom: 0; }

.wp2-cell { border: 1px solid #000; margin: 0 0 -1px -1px; padding: 0 4px; min-height: .18in; line-height: .18in;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp2-row > div:empty:not(.wp2-cell) { border: 0; }
.wp2-l { text-transform: uppercase; }
.wp2-v { font-weight: 600; }
.wp2-heading { color: #0b6bbf; font-weight: 700; text-align: center; margin: .1in 0 .03in; break-after: avoid; }
.wp2-note { text-align: center; margin: .04in 0 .02in; font-size: 9.5pt; }
.wp2-gap { height: .08in; }
.wp2-pagebreak { height: .25in; }
.wp2-notes { margin-top: .14in; break-inside: avoid; }
.wp2-notes-title { font-weight: 400; }
.wp2-notes-body { border: 1px solid #000; min-height: 4in; padding: 4px 6px; white-space: pre-wrap; }
@media print {
  .wp2-pagebreak { height: 0; break-before: page; }
}
.list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; align-items: start; }
.list-card { display: grid; gap: .5rem; margin: 0; }
.list-card textarea { font-size: .9rem; }
.wp2-head-last { margin-bottom: .06in; }
.people-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1rem; }

/* Library folders */
.lib-crumbs { min-height: 1.2em; }
.lib-h-icon { font-size: .9em; }
.lib-tools { display: grid; gap: .5rem; margin-bottom: 1rem; }
.lib-tools .panel { margin: 0; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.folder-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center;
               padding: .7rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
               color: var(--text); text-decoration: none; }
.folder-tile:hover { border-color: var(--accent); }
.folder-icon { grid-row: span 2; width: 2rem; height: 2rem; fill: #f2c14e; stroke: #c9962a; stroke-width: .8; }
.folder-name { font-weight: 700; overflow-wrap: anywhere; }
.folder-count { grid-column: 2; }
.tick-col { width: 2rem; }
.tick-col input { width: 1.15rem; height: 1.15rem; }
.move-bar { margin: .6rem 0 1rem; }
.move-bar select { flex: 0 1 18rem; }
.inline-label { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; }
.inline-label select { flex: 1 1 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lib-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 .8rem; }
button.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600;
                  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.linklike:hover { text-decoration-thickness: 2px; }
.lib-panel-title { font-size: 1rem; }
.lib-panel .upload-form { margin-top: .4rem; }

/* Alerts: Email / Text choices */
.alerts-table { width: 100%; border-collapse: collapse; }
.alerts-table th, .alerts-table td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.alerts-table thead th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.alerts-table .ac { text-align: center; width: 4.5rem; }
.alerts-mod th { padding-top: .9rem; font-size: .85rem; color: var(--accent); border-bottom: 0; }
.alerts-table input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
.w-code { max-width: 10rem; letter-spacing: .2em; }

/* ---------- Settings (a list of sections down the side; on a phone, a list you tap into) ---------- */
.set-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.set-side { position: sticky; top: 4.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .4rem; }
.set-side a { display: flex; gap: .75rem; align-items: center; padding: .65rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; }
.set-side a:hover { background: var(--accent-soft); }
.set-side a.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.set-ic { flex: 0 0 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; background: var(--bg); }
.set-nm { font-weight: 600; display: block; }
.set-st { display: block; font-size: .8rem; color: var(--muted); }
.set-chev { margin-left: auto; color: var(--muted); display: none; }
.set-side .set-grp { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: .9rem .7rem .3rem; }
.set-side .set-grp:first-child { padding-top: .3rem; }
.set-path { margin: 0 0 .15rem; font-size: .9rem; color: var(--muted); }
.set-path a { color: var(--muted); }
.set-main > .set-lead + .panel, .set-main > .panel:first-of-type { margin-top: 0; }
.set-title { margin: 0 0 .2rem; font-size: 1.5rem; }
.set-lead { margin: 0 0 1.2rem; color: var(--muted); }
.set-back { display: none; }
.set-group { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 1.1rem; overflow: hidden; }
.set-group > h3 { margin: 0; padding: .9rem 1.1rem .2rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.set-group > p { margin: .2rem 1.1rem .8rem; }
.set-row { display: grid; grid-template-columns: 1fr minmax(160px, 260px); gap: .4rem 1.2rem; align-items: center; padding: .85rem 1.1rem; border-top: 1px solid var(--line); }
.set-group > h3 + .set-row, .set-group > .set-row:first-child, .set-group > h3 + .set-alert { border-top: 0; }
.set-row > label { display: block; font-size: 1rem; }
.set-lbl { font-weight: 600; }
.set-hint { display: block; font-size: .85rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }
.set-val { justify-self: end; color: var(--muted); text-align: right; }
.set-input { display: flex; flex-direction: column; gap: .35rem; }
.set-input .check { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
a.set-link { grid-template-columns: 1fr auto; color: var(--text); text-decoration: none; }
a.set-link:hover { background: var(--accent-soft); }
.set-go { color: var(--muted); font-size: 1.2rem; }
.set-save { margin: .4rem 0 1.6rem; }
.set-status { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; }
.set-status .actions { margin-top: .6rem; }
.dot { flex: 0 0 .75rem; height: .75rem; border-radius: 50%; margin-top: .4rem; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.off { background: var(--muted); }
details.set-more { border-top: 1px solid var(--line); }
details.set-more > summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 600; }
details.set-more table.list { border: 0; border-radius: 0; }
/* on/off switch: a real checkbox, drawn as a switch */
.sw { position: relative; display: inline-block; width: 3.1rem; height: 1.8rem; flex: 0 0 auto; justify-self: end; }
.sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw span { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .2s; }
.sw span::after { content: ""; position: absolute; width: 1.4rem; height: 1.4rem; left: .2rem; top: .2rem; background: #fff;
  border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sw input:checked + span { background: var(--ok); }
.sw input:checked + span::after { transform: translateX(1.3rem); }
.sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* alerts: switch, then time / days / email-text once it's on */
.set-alert { padding: .9rem 1.1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
.set-alert > div > label { display: block; font-size: 1rem; }
.set-who { font-size: .85rem; color: var(--muted); }
.set-opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-top: .6rem; }
.set-alert:has(.sw input:not(:checked)) .set-opts { display: none; }
.set-alert:has(.sw input:not(:checked)) .set-lbl { color: var(--muted); }
label.set-inline { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.set-opts .w-time { width: 8.5rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg label { display: flex; align-items: center; gap: .35rem; padding: .45rem .8rem; cursor: pointer; font-size: .9rem; }
.seg label + label { border-left: 1px solid var(--border); }
.seg input { width: 1.05rem; height: 1.05rem; }
.seg label:has(input:checked) { background: var(--accent-soft); }
.days { display: inline-flex; gap: .25rem; }
.days label { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--border);
  border-radius: 50%; font-size: .8rem; cursor: pointer; }
.days input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.days label:has(input:checked) { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.days label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1024px) {   /* phone and tablet: Settings is a list you tap into (0.22.0: up to 1024px) */
  .set-layout { display: block; }
  .set-side { position: static; padding: 0; overflow: hidden; }
  .set-side a { border-radius: 0; border-top: 1px solid var(--line); padding: .9rem 1rem; }
  .set-side a:first-child, .set-side .set-grp + a { border-top: 0; }
  .set-side .set-grp { padding: 1rem 1rem .35rem; border-top: 1px solid var(--line); }
  .set-side .set-grp:first-child { border-top: 0; }
  .set-path { display: none; }
  .set-side a.on { box-shadow: none; background: none; }
  .set-chev { display: block; }
  .set-index .set-main, .set-insec .set-side, .set-insec .set-h1 { display: none; }
  .set-back { display: inline-block; margin-bottom: .8rem; font-weight: 600; }
  .set-row { grid-template-columns: 1fr; }
  .set-row .sw, .set-val { justify-self: start; text-align: left; }
  .set-row.set-switch-row { grid-template-columns: 1fr auto; }
  .set-row.set-switch-row .sw { justify-self: end; }
  .set-save { position: sticky; bottom: 0; background: var(--bg); padding: .8rem 0; margin-bottom: 0; z-index: 2; }
  .set-save button { width: 100%; }
}
@media print { .set-side, .set-back, .set-save { display: none; } .set-layout { display: block; } }

/* ======================================================================================================
   Common look (Oct 2026): the Settings style everywhere. Later rules here restyle the older building
   blocks (panel, table.list, badge, tabs, pagehead, crumbs) so every page matches, and add the row list.
   ====================================================================================================== */
h1 { font-size: 1.6rem; }
.lead { margin: -.6rem 0 1.2rem; color: var(--muted); }
.pagehead { align-items: flex-end; margin-bottom: 1.2rem; }
.pagehead h1 { margin-bottom: 0; }
.pagehead .lead { margin: .2rem 0 0; }
.pagehead > div:first-child { flex: 1 1 18rem; }
.pagehead .button, .pagehead > button { white-space: nowrap; }
.crumbs { margin: 0 0 .3rem; }
.crumbs a { font-weight: 600; }

/* Cards: the same corners and edges everywhere; a heading at the top of a card is a small grey label */
.panel, .card, details.category, table.list { border-radius: 12px; }
.panel > h2:first-child, .panel > h2.mt0:first-child, .panel > .mt-head:first-child h2 {
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }
.panel > h2:first-child .badge, .panel > h2:first-child a { text-transform: none; letter-spacing: 0; }
.stack > label:not(.check), .grid2 > label:not(.check), .row2 > label:not(.check), .row4 > label:not(.check),
.entry-grid label:not(.check) { font-weight: 600; }
label input, label select, label textarea, label .small, label .muted { font-weight: 400; }

/* Tables sit in the same card */
table.list { border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.list th, table.list td { padding: .7rem 1rem; }
table.list thead th { background: var(--card); }
details.category > summary { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .85rem 1.1rem; }
details.category > summary > span:first-of-type { color: var(--muted); }
details.category > summary .count { text-transform: none; letter-spacing: 0; }

/* Status: a coloured dot and plain words. Colours: grey draft/off, blue sent/waiting, orange needs action,
   green ready/done, red missing/low */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; padding: .2rem .65rem;
  border-radius: 999px; background: var(--bg); border: 0; white-space: nowrap; }
.badge::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge.ok { color: var(--ok); } .badge.warn { color: var(--warn); } .badge.info { color: var(--accent); }
.badge.bad { color: var(--danger); } .badge.off { color: var(--muted); }
.st-ready { background: var(--bg); }
.low-badge { font-size: .8rem; padding: .1rem .55rem; }

/* Tabs: one segmented bar */
.tabs { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; gap: .15rem; padding: .2rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); margin-bottom: 1rem; flex-wrap: nowrap; }
.tab { padding: .45rem .85rem; border-radius: 8px; color: var(--text); white-space: nowrap; text-decoration: none; box-shadow: none; }
.tab.on { background: var(--accent); color: var(--accent-text); font-weight: 600; box-shadow: none; }
.tabs.inline-tabs { display: inline-flex; margin-bottom: 0; }
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.filterbar .tabs { margin-bottom: 0; }
.filterbar form { display: flex; gap: .5rem; flex: 1 1 14rem; }
.filterbar input[type=search], .filterbar input[name=q], .filterbar select { width: auto; flex: 1 1 12rem; }
.filterbar .push { margin-left: auto; }
/* A switch that is a link (e.g. "Only mine"), drawn like the Settings switch */
a.swlink { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-size: .9rem; }
a.swlink .sw { pointer-events: none; }

/* Row lists: a card of tappable rows - icon, name with one grey line, something on the right, › */
.rowlist { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 1.1rem; overflow: hidden; }
.rowlist > h2, .rowlist > h3 { margin: 0; padding: .85rem 1.1rem .25rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; }
.rowlist > h2 .r, .rowlist > h3 .r { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); font-weight: 600; }
.crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .2rem 1rem; align-items: center; padding: .8rem 1.1rem;
  border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.rowlist > h2 + .crow, .rowlist > h3 + .crow, .rowlist > .crow:first-child { border-top: 0; }
a.crow:hover, .crow.clickable:hover { background: var(--accent-soft); cursor: pointer; }
.crow-icon { width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: var(--bg); font-size: 1.1rem;
  font-weight: 700; font-size: .95rem; }
.crow-icon.emoji { font-size: 1.15rem; }
.crow-t { font-weight: 600; display: block; }
.crow-s { display: block; font-size: .85rem; color: var(--muted); }
.crow-end { text-align: right; white-space: nowrap; }
.crow-end .crow-s { display: inline; }
.crow-end .badge { margin-left: .3rem; }
.crow-go { color: var(--muted); font-size: 1.2rem; }
.crow-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.crow-sub-phone { display: none; }
.rowlist-foot { padding: .7rem 1.1rem; border-top: 1px solid var(--line); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.rowlist .empty-row { padding: 1rem 1.1rem; color: var(--muted); }

/* Home */
.home-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.home-mods .rowlist { margin: 0; }
.home-mods .crow { grid-template-columns: auto minmax(0, 1fr) auto; padding: 1rem 1.1rem; }
.home-mods .crow-icon { width: 2.8rem; height: 2.8rem; font-size: 1.35rem; }
.home-mods .soon { opacity: .6; }

@media (max-width: 760px) {
  .pagehead { align-items: stretch; }
  .pagehead > .button { width: 100%; text-align: center; }
  .crow { gap: .2rem .7rem; }
  .crow-end .crow-s { display: block; }
  .crow-end.hide-phone { display: none; }
  .crow-sub-phone { display: block; margin-top: .25rem; }
  .filterbar .push { margin-left: 0; }
  table.list td { padding: .2rem 1rem; }
  table.list tr { padding: .55rem 0; }
}
@media print { .tabs, .filterbar, .crow-go { display: none; } .rowlist, .panel, table.list { border-radius: 0; } }

/* Timesheet: form and the day's entries on the left, the pay period on the right */
.ts-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.1rem; align-items: start; }
.ts-cols .panel { margin-bottom: 1.1rem; }
.entry-form legend { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.day-head .total-pill { text-transform: none; letter-spacing: 0; color: var(--text); font-size: .9rem; }
.entry-hours { text-align: center; background: var(--accent-soft); border-radius: 8px; padding: .35rem .3rem; }
.entry-hours b { font-size: 1.05rem; }
.entry { padding: .75rem 0; }
@media (max-width: 1000px) { .ts-cols { grid-template-columns: 1fr; } }
.crow[hidden] { display: none; }
img.crow-icon { object-fit: cover; padding: 0; }
.stock-rows { border-top: 1px solid var(--line); }
.stock-rows .crow:first-child { border-top: 0; }
.crow-s .here { color: var(--text); font-weight: 600; }
.toolbar { gap: .6rem; }
.toolbar input[type=search], .toolbar select { width: auto; flex: 1 1 12rem; }
/* Back links and the line under a page title, the same on every page */
.crumbs > a:first-child::before { content: "‹ "; }
.page > h1 + p:not([class]), .page > h1 + p.muted, .narrow > h1 + p:not([class]), .narrow > h1 + p.muted { color: var(--muted); margin: -.6rem 0 1.2rem; }
.crow a.crow-t { color: var(--text); text-decoration: none; }
.crow a.crow-t:hover { text-decoration: underline; }
@media (max-width: 760px) { .tabs { flex-wrap: wrap; width: auto; } }
@media (max-width: 760px) { .crow > .crow-actions { grid-column: 2 / -1; margin-top: .4rem; } }

/* Audit log: one folded group per type */
details.audit-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; text-transform: none;
  letter-spacing: 0; font-size: 1rem; color: var(--text); }
details.audit-group > summary .audit-name { font-weight: 600; color: var(--text); }
details.audit-group > summary .audit-latest { margin-left: auto; font-size: .85rem; color: var(--muted); font-weight: 400; }
.audit-more { padding: .6rem 1.1rem; margin: 0; }
@media (max-width: 760px) { details.audit-group > summary .audit-latest { margin-left: 0; flex-basis: 100%; } }

/* Folder browser (Stock, New pick order): tiles to open a category, a trail back, one folder at a time */
.fold-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .8rem; font-size: .95rem; min-height: 1.4rem; }
.fold-trail a { font-weight: 600; }
.fold-trail .sep { color: var(--muted); }
.fold-trail .here { font-weight: 700; }
.fold-note { margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; }
.fold-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.fold-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; position: relative; min-height: 7.2rem; }
.fold-tile:hover, .fold-tile:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.fold-tile .ic { font-size: 1.7rem; line-height: 1; }
.cat-pic { flex: 0 0 2.6rem; display: grid; place-items: center; }
.cat-pic .ic { font-size: 1.5rem; }
.cat-pic .ic-photo { width: 2.6rem; height: 2.6rem; object-fit: contain; background: #fff; border-radius: 6px; }
.cat-pic-edit summary { cursor: pointer; color: var(--accent); }
.cat-pic-edit[open] { flex: 1 1 100%; display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; }
.fold-tile .ic-photo { width: 4rem; height: 4rem; object-fit: contain; background: #fff; border-radius: 8px; }
.fold-tile .nm { font-weight: 700; padding-right: 3.5rem; }
.fold-tile .ct { font-size: .85rem; color: var(--muted); }
.fold-tile .fold-badge { position: absolute; top: .6rem; right: .6rem; background: var(--accent); color: var(--accent-text);
  font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; }
.fold-tile .fold-badge.bad { background: var(--danger); color: #fff; }
.fold-where { display: none; }
.folders.searching .fold-where { display: inline; font-weight: 600; }
.folders.searching .fold-tiles { display: none; }
.folders.searching section[data-fold=""] { display: none; }
.rowlist .pick-row { padding: .75rem 1.1rem; }
.rowlist > h2 + .pick-row, .rowlist > h3 + .pick-row { border-top: 1px solid var(--line); }
.pick-row[hidden], .crow[hidden] { display: none; }
/* New pick order: the folders on the left, "Your order" on the right (a bar at the bottom on a phone) */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.order-basket { position: sticky; top: 4.2rem; }
.order-basket .crow { grid-template-columns: minmax(0, 1fr) auto auto; padding: .6rem 1rem; }
.order-basket .basket-rm { background: none; border: 0; color: var(--danger); font-size: 1.1rem; padding: 0 .2rem; cursor: pointer; }
.order-basket .empty-row { font-size: .9rem; }
.order-basket button.big { width: 100%; }
.order-basket label { margin-bottom: .8rem; }
.order-phonebar, .phone-only { display: none; }
.order-head .row4 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem 1rem; }
@media (max-width: 900px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-basket { position: static; display: none; }
  body.basket-open .order-basket { display: block; }
  body.basket-open .order-main, body.basket-open .order-phonebar { display: none; }
  .order-phonebar { display: flex; position: sticky; bottom: 0; gap: .8rem; align-items: center; background: var(--bg);
    padding: .7rem 0; border-top: 1px solid var(--line); z-index: 2; }
  .order-phonebar .count { flex: 1; font-weight: 600; }
  .phone-only { display: inline; }
  .order-head .row4 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fold-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rowlist .pick-row { flex-wrap: wrap; }
  .rowlist .pick-row .pick-qty { margin-left: auto; }
}
@media print { .fold-tiles, .fold-trail { display: none; } }

/* Item page: summary + where it is on the left, receive / move / count on the right */
.item-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.2rem; }
.item-layout.with-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.item-layout .panel { margin-bottom: 0; }
.item-side { display: grid; gap: 1.1rem; }
.item-summary { display: flex; gap: 1.2rem; align-items: flex-start; }
.item-summary .item-photo { flex: 0 0 12rem; width: 12rem; height: 9rem; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; display: block; overflow: hidden; }
/* block, not grid: in a grid the picture's height:100% didn't apply, so a square photo ran off the bottom */
.item-summary .item-photo img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; max-height: none; border: 0; border-radius: 0; }
.item-summary .item-nophoto { display: grid; }
.item-nophoto { background: var(--bg) !important; align-content: center; justify-items: center; gap: .3rem; font-size: 2rem; }
.item-nophoto a { font-size: .85rem; }
.item-facts { flex: 1; min-width: 0; }
.item-total { font-size: 1.05rem; margin-bottom: .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.item-total .crow-num { font-size: 1.9rem; line-height: 1; }
.item-facts dl { margin: 0; display: grid; gap: .3rem; }
.item-facts dl > div { display: flex; gap: .6rem; font-size: .92rem; }
.item-facts dt { color: var(--muted); min-width: 7.5rem; }
.item-facts dd { margin: 0; }
.item-notes { margin: .7rem 0 0; font-size: .92rem; white-space: pre-wrap; }
@media (max-width: 900px) { .item-layout.with-actions { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .item-summary .item-photo { flex-basis: 7.5rem; width: 7.5rem; height: 6rem; } .item-facts dt { min-width: 0; } .item-facts dl > div { display: block; } }
.ckt-join { margin-top: .1rem; color: var(--muted); }
.ckt.is-joined-top .ckt-ab input:first-child { background: var(--bg); border-style: dashed; }

/* ---------- Help: guides, ❓ How do I…, and the ▶ Show me tour ---------- */
.help-search { margin: 0 0 1.2rem; }
.help-search input { font-size: 1.05rem; padding: .75rem .9rem; }
.help-row { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }
.rowlist > h2 + .help-row { border-top: 0; }
.help-row .t { flex: 1; min-width: 0; }
.help-row .t a { font-weight: 700; color: var(--text); text-decoration: none; }
.help-row .t a:hover { color: var(--accent); }
.help-row .t .s { display: block; color: var(--muted); font-size: .88rem; }
.help-row .who { font-size: .75rem; border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; color: var(--muted); white-space: nowrap; }
.showme { white-space: nowrap; }
.guide-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .2rem 0 1.2rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; max-width: 46rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.steps > li::before { content: counter(step); width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent);
  color: var(--accent-text); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
b.ui { background: var(--accent-soft); color: var(--accent); padding: 0 .3rem; border-radius: 4px; }
.tip { background: var(--accent-soft); border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0 0; max-width: 46rem; }
main.page { padding-bottom: 4.5rem; }   /* room for ❓ How do I… */
.page-help { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
.page-help summary { list-style: none; cursor: pointer; background: var(--accent); color: var(--accent-text); font-weight: 600;
  border-radius: 999px; padding: .65rem 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.page-help summary::-webkit-details-marker { display: none; }
.page-help-menu { position: absolute; right: 0; bottom: calc(100% + .5rem); width: min(20rem, calc(100vw - 2rem)); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: .4rem 0; }
.page-help-menu a { display: block; padding: .6rem 1rem; color: var(--text); text-decoration: none; }
.page-help-menu a:hover { background: var(--accent-soft); }
.page-help-menu a.all { border-top: 1px solid var(--line); color: var(--accent); font-weight: 600; }
body:has(.sticky-actions) .page-help, body:has(.set-save) .page-help { bottom: 5rem; }
@media (max-width: 900px) { body:has(.order-phonebar) .page-help { bottom: 5rem; } }
body.touring .page-help { display: none; }
.tour-ring { position: absolute; z-index: 1001; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 4px #fbbf24, 0 0 0 9999px rgba(15,23,42,.55); transition: top .2s, left .2s, width .2s, height .2s; }
.tour-bubble { position: absolute; z-index: 1002; width: min(22rem, calc(100vw - 2rem)); background: var(--card); color: var(--text);
  border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tour-bubble.floating { position: fixed; left: 50% !important; top: auto !important; bottom: 1rem; transform: translateX(-50%); }
.tour-bubble .count { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tour-bubble h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; }
.tour-bubble p { margin: 0 0 .9rem; }
.tour-bubble .btns { display: flex; gap: .5rem; align-items: center; }
.tour-bubble .btns .grow { flex: 1; }
.tour-bubble .stop { background: none; border: 0; color: var(--muted); padding: .3rem; cursor: pointer; text-decoration: underline; }
.tour-bubble .waiting { font-weight: 600; color: var(--accent); }
@media print { .tour-ring, .tour-bubble { display: none !important; } }
.help-wrap { display: inline-flex; flex-wrap: wrap; gap: .5rem; vertical-align: middle; }

/* ---------- Documents: importing old panel schedules (Settings › Documents) ---------- */
.import-steps { margin: -.4rem 0 1rem; font-size: .9rem; color: var(--muted); }
.import-steps b { color: var(--text); }
.import-drop { text-align: center; border: 2px dashed var(--border); }
.import-drop label { font-weight: 400; max-width: 34rem; margin: 0 auto; }
.import-drop input[type=file] { margin-top: .6rem; }
.import-icon { font-size: 2rem; margin: 0; }
.import-how li { margin-bottom: .4rem; }
.why { display: block; font-size: .85rem; color: var(--warn); }
.why-inline { color: var(--warn); }
.group-lead { margin: .2rem 1.1rem .6rem; }
.tg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center;
          padding: .7rem 1.1rem; border-top: 1px solid var(--line); }
.tg-fields { display: flex; gap: .5rem; }
.tg-fields input { width: 11rem; }
.tg-fields select { width: auto; }
.crow.import-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.crow .tick { width: 1.2rem; height: 1.2rem; margin: 0; }
.crow button.linklike.crow-t { text-align: left; color: var(--text); }
.tick-all { display: block; padding: .7rem 1.1rem; font-size: .9rem; }
.search-inline { display: flex; gap: .5rem; flex: 1 1 14rem; }
.search-inline input { flex: 1 1 12rem; width: auto; }
.import-preview { display: grid; grid-template-columns: minmax(0, auto) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.import-preview label { margin-bottom: .8rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .5rem 0 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 860px) { .import-preview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .tg-row { grid-template-columns: auto minmax(0, 1fr); }
  .tg-fields { grid-column: 1 / -1; }
  .tg-fields input { flex: 1; width: auto; }
  .sticky-actions .hide-phone { display: none; }
}

/* ---------- Panel layouts laid out by hand: the positions grid (Panel types, custom layouts) ---------- */
.pos-kind { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .8rem; }
.pos-kind label { flex: 0 1 16rem; }
.pos-editor { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin-bottom: .9rem; }
.pos-fill { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; padding: .7rem; background: var(--bg);
            border-radius: 8px; margin-bottom: .6rem; }
.pos-fill label { font-size: .85rem; margin: 0; }
.pos-fill select, .pos-fill input { width: auto; }
.pos-fill input[type=number] { width: 5rem; }
.posgrid { border-collapse: collapse; margin: .4rem auto; }
.posgrid th { font-size: .75rem; color: var(--muted); font-weight: 600; padding: .2rem .4rem; }
.posgrid td { padding: 2px 4px; }
.posgrid td.rn { font-size: .75rem; color: var(--muted); text-align: right; }
.posgrid .pos { width: 4.4rem; text-align: center; font-weight: 700; padding: .35rem .2rem; }
.posgrid .pos.main { background: #374151; color: #fff; border-color: #374151; }
.posgrid .pos.sel { outline: 3px solid var(--accent); outline-offset: 1px; }
.posgrid .pos.dup { border-color: var(--danger); color: var(--danger); }
.pos-tools { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .5rem 0; }
.pos-tools button { padding: .35rem .7rem; font-size: .85rem; }
.checkline { font-size: .9rem; margin: .3rem 0; text-align: center; }
.checkline.ok { color: var(--ok); } .checkline.warn { color: var(--warn); } .checkline.bad { color: var(--danger); }

/* ---------- Panel schedules › Printed, by street ---------- */
.letters { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; }
.letters a { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--card);
             border: 1px solid var(--line); text-decoration: none; font-weight: 700; color: var(--text); font-size: .9rem; }
.letters a:hover { background: var(--accent-soft); }
.letters a.wide { padding: 0 .7rem; }
.rowlist[id] { scroll-margin-top: 4rem; }
.addr { padding: .75rem 1.1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: .2rem 1rem; align-items: start; }
.rowlist > .addr:first-child { border-top: 0; }
.addr.addr-one { grid-template-columns: minmax(0, 1fr); }
.addr-no { font-weight: 800; font-size: 1.15rem; }
.addr-units { display: grid; gap: .4rem; }
.addr-unit { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.addr-t { font-weight: 600; }
.pchip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 999px;
        padding: .25rem .75rem; font-size: .85rem; text-decoration: none; color: var(--text); background: var(--card); }
.pchip:hover { border-color: var(--accent); background: var(--accent-soft); }
.pchip::before { content: "📄"; font-size: .8rem; }
@media (max-width: 600px) { .addr { grid-template-columns: minmax(0, 1fr); } }
.pchip-st { font-size: .75rem; font-weight: 600; color: var(--warn); }
.pchip-st.st-draft { color: var(--muted); }
/* Streets in columns on a wide screen (still one list on a phone), so more of them fit without scrolling */
@media (min-width: 900px) {
  .rowlist.street-letter { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); column-gap: 0; }
  .rowlist.street-letter > h2 { grid-column: 1 / -1; }
  .rowlist.street-letter > .crow { border-top: 1px solid var(--line); }
  .rowlist.street-letter > .crow:nth-child(n) { border-right: 1px solid var(--line); }
}

/* The version next to the program's name in the top bar (VERSION file) */
.brand-ver { font-size: .7rem; font-weight: 600; opacity: .6; margin: 0 1rem 0 -.6rem; letter-spacing: .02em;
  color: var(--top-text); text-decoration: none; padding: .3rem .4rem; border-radius: 6px; }
.brand-ver:hover, .brand-ver:focus-visible { opacity: 1; text-decoration: underline; }
/* What's new (CHANGELOG.md) */
.changes-version { margin-bottom: 1rem; }
.changes-version > h2:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.1rem;
  color: var(--text); text-transform: none; letter-spacing: 0; }
.changes-date { margin-left: auto; font-size: .85rem; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.changes-version ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.changes-version p { margin: 0 0 .6rem; }
.login-ver { margin: 1rem 0 0; text-align: right; font-size: .75rem; }

/* Inventory: out of stock, rolls and sticks (0.10.0) */
.crow.out .crow-t, .pick-row.out .pick-name strong { color: var(--muted); }
.crow.out .crow-icon, .pick-row.out .thumb { opacity: .55; }
.crow-pack { display: block; font-size: .8rem; color: var(--muted); text-align: right; white-space: nowrap; }
.fold-tile .fold-badges { position: absolute; top: .6rem; right: .6rem; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.fold-tile .fold-badges .fold-badge { position: static; }
.fold-tile .fold-badge.off { background: var(--muted); color: var(--card); }
/* A quantity with a unit switch beside it: rolls | m, sticks | ft (the radio is the whole button) */
.qty-unit { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.qty-unit > input { flex: 1 1 6rem; width: auto; }
.seg.unit-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg.unit-seg label { padding: .4rem .7rem; position: relative; }
.seg.unit-seg label:has(input:checked) { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.seg.unit-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.conv { font-size: .9rem; color: var(--muted); min-height: 1.2rem; margin: 0; }
.conv b { color: var(--text); }
.pick-qty .conv { font-size: .8rem; white-space: nowrap; }
/* Wire ordered in rolls doesn't need "how many pieces" */
.cut-qty:has(.unit-seg input[value="1"]:checked) .cut-n { display: none; }
/* Count rolls: Full / ¾ / ½ / ¼ / Gone for each roll */
.roll-count { display: grid; gap: .8rem; }
.roll-count .roll-ctl { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-top: .35rem; }
.roll-count .roll-ctl > label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.roll-count .seg { flex-wrap: wrap; }
.stack > .seg { justify-self: start; }
.roll-count .seg label { min-width: 3rem; justify-content: center; }
/* Add several items: a grid on a computer, a card per item on a phone */
.multi-wrap { overflow-x: auto; }
table.multi { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
table.multi th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left;
  padding: .6rem .5rem; border-bottom: 1px solid var(--line); font-weight: 600; }
table.multi td { padding: .45rem .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.multi tr:last-child td { border-bottom: 0; }
table.multi td.n { color: var(--muted); padding-top: .9rem; width: 1.6rem; text-align: right; }
table.multi input, table.multi select { padding: .45rem .5rem; }
table.multi .pk { display: flex; gap: .3rem; }
table.multi .pk select { flex: 1 1 auto; min-width: 6.5rem; }
table.multi .pk input { width: 4.5rem; flex: 0 0 4.5rem; }
table.multi .rm { background: none; border: 0; color: var(--danger); font-size: 1.1rem; padding: .4rem; }
table.multi tr.bad td { background: rgba(185,28,28,.06); }
table.multi .row-err { color: var(--danger); font-size: .85rem; margin: .25rem 0 0; }
.multi-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .9rem 0; }
/* Columns wide enough to read what's chosen; below 1000px each row becomes a card */
table.multi input[name=name] { min-width: 9rem; }
table.multi select[name=category_id] { min-width: 8rem; }
table.multi select[name=loc] { min-width: 9.5rem; }
table.multi input[name=min_qty] { min-width: 4.5rem; }
table.multi input[name=opening], table.multi input[name=part_number] { min-width: 5.5rem; }
@media (max-width: 1000px) {
  table.multi, table.multi tbody, table.multi tr, table.multi td { display: block; width: auto; }
  table.multi thead { display: none; }
  table.multi { border: 0; background: none; }
  table.multi tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .8rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .7rem; position: relative; }
  table.multi td { border: 0; padding: .2rem 0; }
  table.multi td[data-l]::before { content: attr(data-l); display: block; font-size: .78rem; color: var(--muted); font-weight: 600; }
  table.multi td.wide { grid-column: 1 / -1; padding-right: 3.5rem; }
  table.multi td.n { position: absolute; top: .7rem; right: 2.6rem; width: auto; padding: 0; }
  table.multi td.x { position: absolute; top: .3rem; right: .2rem; }
}
/* Receive a delivery: where it goes + the note, above the folders */
.recv-head { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin-bottom: 1rem; align-items: start; }
.recv-head > label { align-content: start; }
@media (max-width: 760px) {
  .recv-head { grid-template-columns: 1fr; }
  .rowlist .pick-row .pick-name { flex: 1 1 100%; }
}
.field { display: grid; gap: .3rem; font-size: .9rem; align-content: start; }
.field > label { font-weight: 600; }
div.check { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
div.check > input[type=radio] { width: 1.1rem; height: 1.1rem; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }
div.check > label { display: inline; }
.comes-in .stack { gap: .6rem; }
.field > .field-label { font-weight: 600; }
form:has(input[name=receive_as][value=rolls]:checked) [data-when=loose],
form:has(input[name=receive_as][value=loose]:checked) [data-when=rolls] { display: none; }
.item-facts .mt0 { margin-top: .2rem; }
.comes-in div.check > .small { flex-basis: 100%; padding-left: 1.6rem; margin-top: -.3rem; }
.pick-qty .conv:empty, .pick-qty .cut-total:empty { display: none; }
/* Receive a delivery / Add several items: where each line goes */
.line-loc { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.line-loc select { width: 12rem; }
@media (max-width: 760px) { .rowlist .pick-row .line-loc { flex: 1 1 100%; } .line-loc select { width: auto; flex: 1; } }
.recv-head .small { font-weight: 400; }
.pick-row:has(.line-loc) { flex-wrap: wrap; row-gap: .5rem; }
.pick-row:has(.line-loc) .pick-name { flex: 1 1 11rem; }
.pick-row:has(.line-loc) .line-loc { margin-left: auto; }
.w-confirm { width: 12rem; flex: 0 0 12rem; max-width: 100%; text-transform: uppercase; }
.w-confirm::placeholder { text-transform: none; }

/* Fit on every screen (0.12.1): grid columns may shrink below their content's natural width, file boxes and
   row buttons wrap on a phone instead of pushing the page sideways */
.grid2 > *, .row2 > *, .row4 > *, .recv-head > *, .order-layout > * { min-width: 0; }
input[type=file] { max-width: 100%; }
@media (max-width: 760px) {
  .row-actions { white-space: normal; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .row-actions .inline-details { flex: 1 1 100%; }
  .row-actions .inline-form > * { flex: 1 1 auto; }
}
.inline-form select[name=parent_id] { min-width: 11.5rem; }
@media (max-width: 1000px) { table.list .row-actions { white-space: normal; } }
@media (max-width: 760px) {
  .inline-form input[name=name] { flex: 1 1 100%; }
  .inline-form input.w-num { flex: 0 0 6rem; width: 6rem; }
  .inline-form select[name=parent_id] { flex: 1 1 100%; }
}

/* Assets (0.13.0): who has it, in place of Stock's quantity */
.crow-end .asset-who { font-size: 1rem; }
.item-total .asset-who { font-size: 1.35rem; }
.item-layout > *, .item-side > * { min-width: 0; }
/* A wide report table scrolls on its own on a tablet, instead of the whole page sliding sideways */
.table-scroll { overflow-x: auto; }
@media print { .table-scroll { overflow: visible; } }

/* Two-column form rows (0.13.1): each box keeps its own height. Without this the shorter side is stretched to the
   row's height - Firefox then draws a dropdown as a tall box beside a field that has a hint line under it. */
.row2, .grid2, .row4, .recv-head { align-items: start; }
label { align-content: start; }
/* Tabs inside a card (item and asset pages) wrap rather than hiding the last one off the edge */
.panel > .tabs[data-tabs] { flex-wrap: wrap; overflow-x: visible; }

/* People (0.14.0): time off, apprentice hours, ticket photos */
.toff-row .crow-end { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.toff-answer { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.toff-answer input[name=answer] { width: 12rem; }
@media (max-width: 760px) {
  .toff-row { grid-template-columns: auto 1fr; }
  .toff-row .crow-end { grid-column: 1 / -1; justify-content: flex-start; }
  .toff-answer { justify-content: flex-start; width: 100%; }
  .toff-answer input[name=answer] { flex: 1 1 100%; width: auto; }
}
.appr-bar { display: block; height: .45rem; border-radius: 99px; background: var(--line); margin-top: .3rem; max-width: 22rem; }
.appr-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.appr-total { font-size: 1.4rem; }
.card-thumb { display: block; max-width: 12rem; max-height: 8rem; border-radius: 8px; border: 1px solid var(--line); object-fit: contain; background: #fff; }

/* Safety (0.15.0): FLHA hazards - "How we'll control it" opens under a ticked hazard; the one-page print */
.hz-group { font-size: .95rem; margin: 1rem 0 .3rem; }
.hz-item { padding: .25rem 0; }
.hz-control { display: none; margin: .25rem 0 .4rem 1.9rem; }
.hz-item:has(input[type=checkbox]:checked) .hz-control { display: grid; }
.sign-box { border: 2px solid var(--accent); }
.review-form { padding: .8rem 1.1rem; }
.review-form input[name=review] { flex: 1 1 18rem; }
.sf-sheet { max-width: 7.5in; margin: 0 auto; background: #fff; color: #000; padding: .4in; font-size: 10pt; }
.sf-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: .3rem; }
.sf-logo { height: .55in; }
.sf-title { font-weight: 800; font-size: 15pt; letter-spacing: .03em; }
.sf-h { font-weight: 700; text-transform: uppercase; font-size: 9pt; margin: .55rem 0 .15rem; }
.sf-box { border: 1px solid #000; padding: .25rem .4rem; min-height: 1.6em; white-space: pre-wrap; }
.sf-tall { min-height: 6em; }
.sf-small { font-size: 8.5pt; margin: .2rem 0; }
.sf-head, .sf-table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.sf-head th, .sf-head td, .sf-table th, .sf-table td { border: 1px solid #000; padding: .15rem .35rem; text-align: left; vertical-align: top; }
.sf-head th, .sf-table thead th { background: #eee; font-size: 8.5pt; width: 1%; white-space: nowrap; }
.sf-table thead th { width: auto; }
.sf-head td { width: 36%; }
.sf-table td { height: 1.5em; }
.sf-sig { width: 35%; }
.sf-when { white-space: nowrap; width: 1%; }
@media print { .safety-print-page .page { padding: 0; } .sf-sheet { padding: 0; max-width: none; } }

/* Jobs (0.16.0): photo thumbnails on a job, the photos page */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.photo-tile { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: var(--text); min-width: 0; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.photo-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.photo-card { margin: 0; padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.photo-card img { width: 100%; max-height: 16rem; object-fit: contain; border-radius: 6px; background: var(--bg); }
@media print { .photo-list { grid-template-columns: repeat(3, 1fr); } .photo-card { break-inside: avoid; } }

/* QR stickers (0.17.0): label sheets at real size (letter, inches); a label printer prints one label per page */
.qr-sheet { position: relative; width: 8.5in; height: 11in; background: #fff; margin: 0 auto 1rem; box-shadow: 0 0 0 1px var(--line);
            break-after: page; overflow: hidden; }
.qr-sheet:last-child { break-after: auto; }
.qr-label { position: absolute; display: flex; align-items: center; gap: .08in; padding: .06in .1in; box-sizing: border-box;
            background: #fff; color: #000; overflow: hidden; outline: 1px dashed #ccc; }
.qr-single { position: relative; margin: 0 auto .5rem; break-after: page; }
.qr-code { height: 100%; aspect-ratio: 1; flex: 0 0 auto; }
.qr-code svg { width: 100%; height: 100%; display: block; }
.qr-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; font-family: Arial, Helvetica, sans-serif; }
.qr-big { font-size: 11pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-name { font-size: 7.5pt; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qr-small { font-size: 6pt; color: #333; }
.sheet-5163 .qr-big { font-size: 16pt; }
.sheet-5163 .qr-name { font-size: 10pt; }
.sheet-5163 .qr-small { font-size: 8pt; }
@media print {
  .sticker-sheet-page .topbar, .sticker-sheet-page .page-help { display: none !important; }
  .sticker-sheet-page .page { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .qr-sheet { margin: 0; box-shadow: none; }
  .qr-label { outline: none; }
  .qr-single { margin: 0; }
}
/* Purchase orders (0.17.0) */
.po-lines input.w-part { width: 9rem; }
.po-lines input.w-qty { width: 5rem; }
.w-price { width: 5.5rem; }
.po-lines .pick-qty { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* 0.17.2: a label and its grey hint stay on one line, so side-by-side boxes start level (the hint used to drop onto
   its own line and push its box down) */
label > .lbl { display: block; }
/* Cards side by side are the same height (the 0.13.1 rule above keeps form boxes to their own height) */
.grid2:has(> .panel, > .rowlist) { align-items: stretch; margin-bottom: 1rem; }
.grid2:has(> .panel, > .rowlist) > .panel, .grid2:has(> .panel, > .rowlist) > .rowlist { margin-bottom: 0; }
/* MR309 rack cards (0.17.4): 4 × 1 in, one item per card on the rack - a bit bigger text than the 5160 stickers */
.sheet-mr309 .qr-big { font-size: 12.5pt; }
.sheet-mr309 .qr-name { font-size: 9pt; }
.sheet-mr309 .qr-small { font-size: 7pt; }

/* ======================================================================================================
   Long lists in Settings (0.21.0): search + tabs above a compact table; a row opens in a side panel on a
   computer (≥1251px) or as a full-screen sheet on a phone / tablet. Rows are two lines below 1251px, so a list
   never scrolls sideways. Markup: templates/_list.html; behaviour: app.js "Lists with a side panel".
   ====================================================================================================== */
.list-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 0 0 .8rem; }
.list-tools input[type=search] { flex: 1 1 220px; max-width: 340px; }
.list-tools .grow { flex: 1; }
/* 0.22.1 (Jay: "some of the boxes are not aligned properly"): a tab bar in a row with a search box / buttons drops
   its own bottom gap and is as tall as the boxes, and everything in the row is the same height. */
.list-tools, .filterbar:has(> .tabs) { align-items: stretch; }
.list-tools > .tabs, .filterbar > .tabs { margin-bottom: 0; padding: .1rem; }
.tabs .count { color: var(--muted); font-size: .85rem; margin-left: .2rem; }
/* 0.21.3: every Settings page has the same frame and width (Jay: "one program ... uniformed look"). A list uses the
   whole page; the open item slides in over its right side on a computer, or fills the screen on a phone. */
.split { display: block; }
.split-list { min-width: 0; overflow-x: auto; }          /* a safety net: a list never makes the page wider */
table.list.compact td.cut { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-detail { display: none; margin: 0; }
@media (min-width: 1251px) {
  .split.has-open .split-detail { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw);
    z-index: 60; overflow: auto; border-radius: 14px 0 0 14px; border-right: 0; padding: 0 1.4rem 2rem;
    box-shadow: -14px 0 40px rgba(0, 0, 0, .35); }
  .split.has-open .split-head { display: flex; justify-content: flex-end; position: sticky; top: 0; z-index: 1;
    background: var(--card); padding: .8rem 0 .4rem; }
  .split-head .on-phone { display: none; }
}
@media (max-width: 1250px) { .split-head .on-computer { display: none; } }
.split-head { display: none; }
.split-empty { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.split-item > h3:first-child { margin-top: 0; }
.split-item .row2 { grid-template-columns: 1fr; }
table.list.compact th, table.list.compact td { padding: .4rem .65rem; }
table.list.compact th { white-space: nowrap; }
table.list.compact td.nm { font-weight: 600; white-space: nowrap; }
table.list.compact td.nm a { color: inherit; text-decoration: none; }
table.list tr.pick { cursor: pointer; }
table.list tr.pick:hover td { background: rgba(37, 99, 235, .07); }
table.list tr.pick.on td { background: rgba(37, 99, 235, .16); }
table.list tr.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.list tr.pick.faded td { color: var(--muted); }
.lvl { display: inline-block; }
table.list.compact td.cut { max-width: 11rem; }
@media (max-width: 1250px) {
  .split.has-open .split-detail { display: block; position: fixed; inset: 0; z-index: 50; max-height: none; border-radius: 0;
    border: 0; padding: 0 16px 2rem; background: var(--bg); }
  .split.has-open .split-head { display: block; position: sticky; top: 0; background: var(--bg); padding: .8rem 0;
    margin-bottom: .4rem; border-bottom: 1px solid var(--line); z-index: 1; }
  .split.has-open .split-head button { font-weight: 600; }
  body.sheet-open { overflow: hidden; }
  /* rows: the name, then the rest wrapped on one line */
  table.list.compact thead { display: none; }
  table.list.compact, table.list.compact tbody { display: block; width: 100%; }
  table.list.compact tr { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .55rem .8rem;
    border-bottom: 1px solid var(--line); }
  table.list.compact tr:last-child { border-bottom: 0; }
  table.list.compact td { display: block; width: auto; padding: 0; border: 0; text-align: left !important; }
  table.list.compact td.nm { flex-basis: 100%; white-space: normal; }
  table.list.compact td.sm-hide { display: none; }
  table.list.compact td[data-label]::before { content: attr(data-label); display: inline; min-width: 0; margin-right: .3rem;
    color: var(--muted); font-size: .8rem; }
  table.list.compact td[data-short]::before { content: attr(data-short); }
  table.list.compact td.nm::before { content: none; }
}
@media print { .list-tools, .split-detail { display: none; } .split { display: block; } }
.tabs .tab.on .count { color: inherit; opacity: .8; }
.split-item .grid2 { grid-template-columns: 1fr; gap: .8rem; }
.split-item .panel { border: 0; padding: 0; background: none; box-shadow: none; margin: 0 0 1rem; }
.panel-only { display: none; }
.split-item .panel-only { display: block; }
.split-item .set-lead { margin-bottom: .8rem; }
.bulk-actions { margin-top: .6rem; }
.cat-pic-sm { display: inline-block; width: 1.6rem; height: 1.6rem; vertical-align: middle; overflow: hidden; border-radius: 6px; }
.cat-pic-sm img, .cat-pic-sm .ic { width: 100%; height: 100%; object-fit: cover; font-size: 1rem; display: grid; place-items: center; }
.split-item .spot-row { flex-wrap: wrap; }
@media (max-width: 1250px) { table.list.compact td[data-label=""]::before { content: none; margin: 0; } }
/* 0.21.2: nothing in a list or its panel may be wider than the space it has - long real names wrap, long
   choices in a dropdown are cut, and a row's boxes stack in the panel */
table.list.compact td { overflow-wrap: break-word; }      /* long text wraps between words; .cut cells end in … */
table.list.compact td.cut-wide { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table.list.compact td.nm { white-space: normal; min-width: 8rem; }
.split-item .inline-form > input:not([type=checkbox]):not([type=hidden]),
.split-item .inline-form > select { flex: 1 1 100%; min-width: 0; max-width: 100%; width: 100%; }
.split-item select, .split-item input:not([type=checkbox]):not([type=radio]) { max-width: 100%; min-width: 0; }
.set-hint, .split-item { overflow-wrap: anywhere; }
.tabs { flex-wrap: wrap; }      /* tabs wrap onto a second line rather than scroll sideways */
table.list.compact td.nowrap { white-space: nowrap; }
@media (max-width: 1250px) { table.list.compact td.cut-wide, table.list.compact td.cut { max-width: 100%; white-space: normal; } }
@media (min-width: 1251px) {   /* a very long name takes two lines at most (the panel shows it all) */
  table.list.compact td.nm > a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* ======================================================================================================
   The frame (0.22.0): one way of getting around, everywhere. Computer (≥1025px): a sidebar down the left on every
   page - the module you're in opens to show its pages; in Settings it becomes the settings list. Phone / tablet:
   a slim bar at the top and a tab bar along the bottom (Home, Time, Pick orders, Safety, More).
   templates/base.html + _appnav.html; the More page is templates/more.html.
   ====================================================================================================== */
:root { --tabbar-h: 3.9rem; }
.app-side, .app-top, .tabbar { display: none; }
@media (min-width: 1025px) {
  body.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
  body.app > main { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; box-sizing: border-box; }
  .app-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; box-sizing: border-box; background: var(--top); color: var(--top-text); padding: .9rem .6rem; }
  /* in Settings the sidebar holds the settings list, so the page doesn't repeat it */
  .set-layout { display: block; }
  .set-layout > .set-side, .set-h1, .set-back { display: none; }
}
.app-brand { display: flex; align-items: baseline; gap: .5rem; padding: .25rem .7rem 1rem; }
.app-brand .brand { color: var(--top-text); font-weight: 700; font-size: 1.05rem; text-decoration: none; line-height: 1.25; }
.app-brand .brand-ver { color: var(--top-text); opacity: .55; font-size: .75rem; text-decoration: none; }
.app-side .nv { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .7rem; border-radius: 8px;
  color: var(--top-text); text-decoration: none; opacity: .85; font: inherit; font-size: .95rem; text-align: left;
  background: none; border: 0; cursor: pointer; box-sizing: border-box; }
.app-side .nv:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.app-side .nv:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
.app-side .nv.on { background: rgba(96, 165, 250, .22); opacity: 1; font-weight: 600; box-shadow: inset 3px 0 0 #60a5fa; }
.app-side .nv.mod { font-weight: 600; opacity: 1; margin-top: .3rem; }
.app-side .nv.mod.open { background: rgba(255, 255, 255, .06); }
.app-side .nv .off { font-weight: 400; opacity: .6; font-size: .8rem; }
.app-side .app-sub { display: flex; flex-direction: column; margin: .15rem 0 .35rem; }
.app-side .nv.sub { padding: .4rem .7rem .4rem 2.75rem; font-size: .9rem; }
.app-side .ic { width: 1.4rem; flex: 0 0 1.4rem; text-align: center; }
.app-side .grow { flex: 1; min-height: 1rem; }
.app-side .app-grp { font-size: .78rem; font-weight: 700; padding: .9rem .7rem .2rem; opacity: .9; }
.app-side .app-grp.sub { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; opacity: .55; font-weight: 600; padding-top: .7rem; }
.app-side .back { opacity: .75; }
.app-side .app-foot { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: .6rem; padding-top: .6rem; }
.app-side form { margin: 0; }
@media (max-width: 1024px) {
  .app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; padding: .6rem 16px;
    background: var(--top); color: var(--top-text); }
  .app-top .brand { color: var(--top-text); font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; min-width: 0; }
  .app-top-title { margin-left: auto; color: var(--top-text); opacity: .7; font-size: .9rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; min-width: 0; max-width: 45%; }
  .app-top .me { flex: 0 0 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
    background: rgba(255, 255, 255, .12); color: var(--top-text); }
  .app-top .brand + .me { margin-left: auto; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--card); border-top: 1px solid var(--line); padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 3.2rem;
    font-size: .72rem; color: var(--muted); text-decoration: none; }
  .tabbar a .ic { font-size: 1.3rem; line-height: 1.15; }
  .tabbar a.on { color: var(--accent); font-weight: 600; }
  body.app > main.page { padding-bottom: calc(var(--tabbar-h) + 2.5rem); }
  .page-help { bottom: calc(var(--tabbar-h) + .8rem); }
  body:has(.sticky-actions) .page-help, body:has(.set-save) .page-help { bottom: calc(var(--tabbar-h) + 5.8rem); }
  .set-save, .sticky-actions { bottom: var(--tabbar-h); }
}
@media print { .app-side, .app-top, .tabbar { display: none !important; } body.app { display: block; } }
/* the More page (phone / tablet) */
.more-list { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.more-list h3 span { margin-right: .35rem; }
.more-list h3 { margin: 0; padding: .85rem 1rem .3rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.more-list form { margin: 0; }
.more-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .9rem 1rem; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.more-list h3 + .more-row { border-top: 0; }
.more-row::after { content: '›'; margin-left: auto; color: var(--muted); }
.more-row.on { color: var(--accent); font-weight: 600; }
select { max-width: 100%; }     /* a long choice (e.g. a rack's full name) never widens the page */
.filterbar > *, .filterbar form, .filterbar select { min-width: 0; max-width: 100%; }