/* =====================================================================
   SITE OFFICE
   ---------------------------------------------------------------------
   Design language: "the title block".

   Every drawing sheet that leaves a draughting office carries a title
   block in the corner — a ruled grid of labelled cells: drawing number,
   client, scale, revision, date. It is the most recognisable artefact in
   this business, and it is pure information with no decoration.

   So: every record page opens with one. Uppercase condensed micro-labels,
   values in mono, hairline rules, no rounded corners on the block itself.
   Everything else on the page stays quiet so the block is the thing you
   remember.

   Palette is drawn from the site, not from a swatch book: graphite pencil,
   concrete, blueprint blue for structure, safety orange kept strictly for
   attention and destruction.
   ===================================================================== */

/* ---- Fonts ---------------------------------------------------------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- Tokens --------------------------------------------------------- */
:root {
  --ink:         #16191c;
  --ink-70:      #4a5158;
  --ink-40:      #868e95;
  --concrete:    #e6e9e6;
  --paper:       #ffffff;
  --line:        #d0d6d0;
  --line-strong: #9aa39a;
  --blueprint:   #1f4e79;
  --blueprint-d: #16324c;
  --safety:      #d94f0d;
  --go:          #1c7a4d;
  --amber:       #9a6c05;

  --sans:  'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond:  'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --gap:   16px;
  --shell: 1180px;
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* beats any class that sets display */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--concrete);
  /* Faint grid, like a sheet of drafting paper. Sits behind everything. */
  background-image:
    linear-gradient(rgba(31,78,121,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,78,121,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1, h2, h3, h4 { font-family: var(--cond); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 1.9rem; letter-spacing: .01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }

a { color: var(--blueprint); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blueprint-d); }

:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }

/* ---- Layout --------------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }

.topbar {
  background: var(--ink);
  color: #f4f6f4;
  border-bottom: 3px solid var(--blueprint);
}
.topbar .shell { display: flex; align-items: center; gap: 12px; min-height: 56px; }

.brand {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.brand:hover { color: #fff; }
/* ⚠️ THE REAL MARK, NOT THE "SO" PLACEHOLDER. The two-letter box existed
   because there was no logo; now there is one, and the same M that is the
   favicon belongs here.

   ⚠️ The element still CONTAINS the letters SO in the markup, so they are
   hidden rather than deleted — the stylesheet has no business editing the
   page, and if this image ever 404s the alternative is a blank gap either
   way. font-size:0 plus a transparent colour covers both the text and any
   selection highlight.

   Sized in a fixed box with background-size:contain, so the bar cannot shift
   as the image loads. */
.brand-mark {
  width: 30px; height: 26px;
  border: 0;
  background: url('img/icon-mark.png') left center / contain no-repeat;
  font-size: 0; color: transparent; line-height: 0;
  flex: none;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.whoami { font-size: .85rem; color: #b9c1c8; font-family: var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.whoami strong { color: #fff; font-weight: 500; }

/* Navigation. New items go near the FRONT — anything appended to the end of
   a strip like this becomes invisible once the list grows. */
.nav { background: var(--blueprint-d); }
.nav .shell { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav .shell::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .93rem;
  color: #cfe0ef;
  text-decoration: none;
  padding: 11px 15px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.is-current { color: #fff; border-bottom-color: var(--safety); background: rgba(255,255,255,.06); }

main { padding: 22px 0 60px; }

/* ---- THE SIGNATURE: title block ------------------------------------- */
.titleblock {
  background: var(--paper);
  border: 2px solid var(--ink);
  margin-bottom: 22px;
}
.titleblock-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
}
.titleblock-head h1 { margin: 0; font-size: 1.75rem; }
.titleblock-sub { color: var(--ink-70); font-size: .95rem; margin: 2px 0 0; }
.titleblock-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* The ruled cells. Each is a label above a value — exactly like the sheet. */
.tb-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tb-cell {
  padding: 9px 14px 10px;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  min-width: 0;
}
.tb-cell:last-child { border-right: 0; }
.tb-label {
  display: block;
  font-family: var(--cond);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 1px;
}
.tb-value {
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  word-break: break-word;
}
.tb-value.is-empty { color: var(--ink-40); font-style: normal; }
.tb-value a { text-decoration: none; }
.tb-value a:hover { text-decoration: underline; }

/* ---- Cards ---------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--gap);
}
.card-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  background: #f7f8f7;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.card-head .card-tools { margin-left: auto; display: flex; gap: 8px; }
.card-body { padding: 16px; }
.card-body > *:last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; }
.grid-even { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }

/* ---- Stat tiles ----------------------------------------------------- */
.stat {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--blueprint);
  padding: 13px 16px;
}
.stat-label {
  font-family: var(--cond); font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-40);
}
.stat-figure { font-family: var(--mono); font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.stat-note { font-size: .85rem; color: var(--ink-70); }
.stat.is-warn { border-left-color: var(--safety); }

/* ---- Tables --------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th {
  font-family: var(--cond); font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-40);
  text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover { background: #f4f7fa; }
table.data .ref { font-family: var(--mono); font-size: .85rem; color: var(--ink-40); white-space: nowrap; }
table.data .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
table.data .primary { font-weight: 600; }
table.data .primary a { text-decoration: none; color: var(--ink); }
table.data .primary a:hover { color: var(--blueprint); text-decoration: underline; }
table.data .muted { color: var(--ink-70); font-size: .88rem; }
table.data tr.is-archived td { opacity: .62; }

/* ---- Pills ---------------------------------------------------------- */
.pill {
  display: inline-block;
  font-family: var(--cond); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid currentColor; color: var(--ink-70);
  white-space: nowrap;
}
.pill.is-go     { color: var(--go); }
.pill.is-warn   { color: var(--safety); }
.pill.is-amber  { color: var(--amber); }
.pill.is-blue   { color: var(--blueprint); }

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--cond); font-size: .95rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px;
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  text-decoration: none; cursor: pointer; line-height: 1.3;
}
.btn:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-blue { background: var(--blueprint); border-color: var(--blueprint); }
.btn-blue:hover { background: var(--blueprint-d); border-color: var(--blueprint-d); }
/* Safety orange is reserved for destruction. Nothing else uses it. */
.btn-danger { background: transparent; border-color: var(--safety); color: var(--safety); }
.btn-danger:hover { background: var(--safety); color: #fff; }
.btn-sm { font-size: .82rem; padding: 5px 11px; border-width: 1px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

/* ---- Forms ---------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-family: var(--cond); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70);
  margin-bottom: 4px;
}
.field .hint { font-size: .84rem; color: var(--ink-40); margin-top: 4px; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=password], .field input[type=date], .field input[type=number],
.field select, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink);
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blueprint);
  outline: 2px solid rgba(31,78,121,.25); outline-offset: 0;
}
.field textarea { min-height: 96px; resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--safety); }
.field-error { color: var(--safety); font-size: .87rem; margin-top: 4px; font-weight: 500; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend {
  font-family: var(--cond); font-size: .84rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-40);
  padding: 0 0 6px; margin-bottom: 10px; width: 100%;
  border-bottom: 1px solid var(--line);
}

.choice { display: flex; gap: 18px; flex-wrap: wrap; }
.choice label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 1rem; text-transform: none;
  letter-spacing: 0; color: var(--ink); font-weight: 400; margin: 0;
}

/* ---- Search bar ----------------------------------------------------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: var(--gap); }
.toolbar form { display: flex; gap: 8px; flex: 1 1 280px; }
.toolbar input[type=search] {
  flex: 1; font-family: var(--sans); font-size: 1rem; padding: 9px 12px;
  border: 1px solid var(--line-strong); background: #fff; border-radius: 0;
}
.toolbar .tabs { display: flex; border: 1px solid var(--line-strong); background: #fff; }
.toolbar .tabs a {
  font-family: var(--cond); font-size: .87rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 14px; text-decoration: none; color: var(--ink-70);
  border-right: 1px solid var(--line);
}
.toolbar .tabs a:last-child { border-right: 0; }
.toolbar .tabs a.is-current { background: var(--ink); color: #fff; }

/* ---- Flash + notices ------------------------------------------------ */
.notice {
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--blueprint);
  background: var(--paper);
  padding: 11px 15px;
  margin-bottom: var(--gap);
  font-size: .96rem;
}
.notice.is-success { border-left-color: var(--go); }
.notice.is-error   { border-left-color: var(--safety); }
.notice.is-info    { border-left-color: var(--amber); }
.notice strong { font-weight: 600; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }

/* ---- Empty states --------------------------------------------------- */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-70); }
.empty-mark {
  font-family: var(--mono); font-size: 2rem; color: var(--line-strong);
  border: 2px dashed var(--line-strong); width: 68px; height: 68px;
  display: grid; place-items: center; margin: 0 auto 14px;
}
.empty h3 { font-size: 1.2rem; color: var(--ink); }

/* ---- Activity feed -------------------------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.feed li:last-child { border-bottom: 0; }
.feed time { font-family: var(--mono); font-size: .8rem; color: var(--ink-40); white-space: nowrap; min-width: 82px; }
.feed .who { color: var(--ink-70); }

/* ---- Sign-in page --------------------------------------------------- */
.signin-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.signin {
  width: 100%; max-width: 380px;
  background: var(--paper); border: 2px solid var(--ink);
}
.signin-head { padding: 20px; border-bottom: 1px solid var(--ink); text-align: center; }
.signin-head .brand { color: var(--ink); justify-content: center; font-size: 1.5rem; }
.signin-head .brand:hover { color: var(--ink); }
.signin-head .brand-mark { margin: 0 auto 2px; }
.signin-head p { margin: 6px 0 0; font-size: .88rem; color: var(--ink-40);
  font-family: var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.signin-body { padding: 20px; }
.signin .btn { width: 100%; justify-content: center; }

/* ---- Footer --------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line-strong);
  padding: 16px 0; margin-top: 30px;
  font-family: var(--mono); font-size: .78rem; color: var(--ink-40);
}
.foot .shell { display: flex; gap: 14px; flex-wrap: wrap; }
.foot a { color: var(--ink-40); }

/* ---- Utilities ------------------------------------------------------ */
.muted { color: var(--ink-70); }
.small { font-size: .87rem; }
.mono  { font-family: var(--mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 10px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .titleblock-head { flex-wrap: wrap; }
  .titleblock-actions { margin-left: 0; width: 100%; }
  h1 { font-size: 1.55rem; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .tb-cells { grid-template-columns: 1fr 1fr; }
  .tb-cell { border-right: 1px solid var(--line); }
  .tb-cell:nth-child(2n) { border-right: 0; }
  .whoami { display: none; }
  .btn { padding: 9px 14px; }        /* stays thumb-sized on a phone */
  table.data th, table.data td { padding: 9px 8px; }
}

/* ---- Print ---------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .topbar, .nav, .foot, .btn, .toolbar, .titleblock-actions { display: none !important; }
  .card, .titleblock { border-color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Quote line-item editor ----------------------------------------- */
/* Inputs inside the item table have no borders of their own — the table
   rules already draw the grid, and a second box inside every cell turns a
   simple list into visual noise. */
table.items-table td { padding: 4px 6px; vertical-align: middle; }
table.items-table input[type=text],
table.items-table select {
  width: 100%;
  font-family: var(--sans); font-size: .93rem;
  padding: 6px 7px; border: 1px solid transparent; background: transparent;
  border-radius: 0; color: var(--ink);
}
table.items-table input[type=text]:hover,
table.items-table select:hover { border-color: var(--line); background: #fff; }
table.items-table input[type=text]:focus,
table.items-table select:focus { border-color: var(--blueprint); background: #fff;
  outline: 2px solid rgba(31,78,121,.2); }
table.items-table input.num { font-family: var(--mono); text-align: right; }
table.items-table .line-total { font-family: var(--mono); color: var(--ink-70); white-space: nowrap; }
table.items-table tbody tr:hover { background: transparent; }

/* ---- Totals panel --------------------------------------------------- */
.totals-panel {
  margin: 20px 0 0 auto; max-width: 360px;
  border-top: 2px solid var(--ink); padding-top: 10px;
}
.totals-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.totals-row:last-of-type { border-bottom: 0; }
.totals-row.is-total {
  border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 9px;
  font-family: var(--cond); font-size: 1.3rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 700px) {
  /* On a phone the item table scrolls sideways rather than crushing the
     description column into two characters per line. */
  table.items-table { min-width: 700px; }
  .totals-panel { max-width: none; }
}

/* ---- Progress bar ---------------------------------------------------- */
/* Squared off, not a rounded pill — this is a gauge on a site board, and it
   should read as a measurement rather than a decoration. The figure beside it
   is always shown too: a bar alone cannot be read precisely, and people want
   to know whether it is 68% or 72%. */
.progress {
  height: 9px; background: #dfe3df;
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.progress-bar {
  height: 100%; background: var(--blueprint);
  transition: width .25s ease;
}
.progress-lg { height: 16px; }
.progress-lg .progress-bar { background: var(--go); }

@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none; }
}

/* ---- Attendance grid -------------------------------------------------- */
/* Cells are deliberately small and dense: the whole week has to be visible
   at once, because the value of the sheet is seeing the shape of the week —
   who is on which site, where the gaps are — not reading one cell. */
table.attendance-grid td { padding: 5px 6px; vertical-align: middle; }
table.attendance-grid select.cell-status {
  width: 100%; min-width: 52px; text-align: center;
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
  padding: 6px 2px; border: 1px solid var(--line); background: #fff;
  border-radius: 0; color: var(--ink);
}
table.attendance-grid select.cell-status:focus {
  border-color: var(--blueprint); outline: 2px solid rgba(31,78,121,.2);
}
table.attendance-grid select.cell-status[disabled] { background: #eef0ee; color: var(--ink-40); }
/* Colour follows the value so a filled week can be read at a glance. */
table.attendance-grid select.status-full  { background: #e6f3ec; border-color: var(--go); }
table.attendance-grid select.status-half  { background: #e8eff6; border-color: var(--blueprint); }
table.attendance-grid select.status-absent,
table.attendance-grid select.status-rain  { background: #fdece4; border-color: var(--safety); }
table.attendance-grid select.status-sick,
table.attendance-grid select.status-leave,
table.attendance-grid select.status-holiday { background: #fbf3e0; border-color: var(--amber); }
table.attendance-grid input.cell-hours {
  width: 100%; margin-top: 3px; font-family: var(--mono); font-size: .78rem;
  text-align: center; padding: 3px 2px; border: 1px solid var(--line); border-radius: 0;
}
table.attendance-grid th.is-today, table.attendance-grid td.is-today { background: #f3f6f3; }
table.attendance-grid th.is-today { border-bottom-color: var(--safety); }
table.attendance-grid tbody tr:hover { background: transparent; }
table.attendance-grid select[name^="job"] {
  width: 100%; font-family: var(--sans); font-size: .86rem;
  padding: 5px 6px; border: 1px solid var(--line); background: #fff; border-radius: 0;
}
@media (max-width: 900px) {
  /* Nine columns will not fit a phone; scroll rather than crush it. */
  table.attendance-grid { min-width: 860px; }
}

/* ---- Division switcher ------------------------------------------------ */
/* Sits at the right of the nav, visually separated from the page links —
   it changes what you are LOOKING AT, not where you are. */
.nav-divisions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.nav-divisions a { font-size: .82rem; letter-spacing: .1em; padding: 6px 11px;
  border-bottom: 2px solid transparent; opacity: .72; }
.nav-divisions a:hover { opacity: 1; }
.nav-divisions a.is-current { opacity: 1; border-bottom-color: var(--safety); }
@media (max-width: 900px) {
  .nav-divisions { margin-left: 0; border-left: 0; padding-left: 0; }
}

/* ---- Notes wall -------------------------------------------------------- */
/* Cards rather than a table: a note is a thing you glance at, not a row you
   read across. */
.notes-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.note { border:1px solid var(--line-strong); background:var(--paper); padding:16px 18px;
  display:flex; flex-direction:column; }
.note h3 { font-size:1.15rem; margin:0 0 8px; }
.note-body { font-size:.94rem; color:var(--ink-70); white-space:pre-wrap; word-break:break-word; }
.note-foot { display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.note-actions { display:flex; gap:10px; align-items:center; }
.note-actions a, .linkish { font-size:.82rem; color:var(--blueprint); background:none; border:0;
  padding:0; cursor:pointer; font-family:var(--sans); text-decoration:underline; }
.note-actions .linkish:hover { color:var(--safety); }
.note.is-pinned { border-width:2px; border-color:var(--ink); }
.note-yellow { background:#fdf6dd; }
.note-blue   { background:#eaf1f7; }
.note-green  { background:#e9f4ed; }

/* ---- Calendar ---------------------------------------------------------- */
.cal-key { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px; font-size:.82rem;
  color:var(--ink-70); }
.cal-key i { display:inline-block; width:10px; height:10px; margin-right:6px; }
table.calendar { width:100%; border-collapse:collapse; table-layout:fixed; }
table.calendar th { font-family:var(--cond); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:left; padding:8px 10px; border-bottom:2px solid var(--ink);
  color:var(--ink-40); }
table.calendar td { border:1px solid var(--line); vertical-align:top; padding:6px;
  height:112px; width:14.28%; }
table.calendar td.is-outside { background:#fafbfa; }
table.calendar td.is-outside .cal-day { color:var(--line-strong); }
table.calendar td.is-today { background:#f2f6f9; border-color:var(--blueprint); }
.cal-day { font-family:var(--mono); font-size:.82rem; color:var(--ink-40); display:block;
  margin-bottom:4px; }
td.is-today .cal-day { color:var(--blueprint); font-weight:500; }
/* An event is a left-edged strip — enough to scan a month without reading it. */
.cal-event { display:block; font-size:.76rem; line-height:1.25; padding:3px 5px; margin-bottom:3px;
  background:#f2f4f2; border-left:3px solid var(--blueprint); color:var(--ink);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-event:hover { background:var(--concrete); }
.cal-event.is-urgent { font-weight:500; }
.cal-event.is-done { text-decoration:line-through; opacity:.55; }
.cal-more { font-size:.72rem; color:var(--ink-40); padding-left:5px; }
@media (max-width:820px) {
  /* A month grid cannot shrink usefully; scroll it and lean on the list below. */
  table.calendar { min-width:700px; }
  .card:has(table.calendar) { overflow-x:auto; }
}

/* Per-day site picker inside an attendance cell. Small and quiet: on most days
   it stays on "same site" and should not compete with the status. */
table.attendance-grid select.cell-job {
  width: 100%; margin-top: 3px; font-family: var(--mono); font-size: .68rem;
  padding: 2px 1px; border: 1px solid var(--line); background: #fff; border-radius: 0;
  color: var(--ink-40);
}
table.attendance-grid select.cell-job:focus { color: var(--ink); border-color: var(--blueprint); }

/* The clock time under a diary entry's date. Quieter than the date, because
   the date is what you scan for and the time is what you check. */
.feed-time { display: block; font-family: var(--mono); font-size: .72rem; color: var(--ink-40); }

/* ---- Charts ------------------------------------------------------------ */
svg.chart { width: 100%; height: auto; display: block; }
.chart-axis { font-family: var(--mono); font-size: 10px; fill: var(--ink-40); }
.chart-axis-sub { font-size: 8px; }
.chart-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: .82rem;
  color: var(--ink-70); }
.chart-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
.barlist { display: flex; flex-direction: column; gap: 8px; }
.barlist-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 12px; align-items: center; }
.barlist-label { font-size: .9rem; }
.barlist-track { background: var(--concrete); height: 16px; position: relative; }
.barlist-fill { display: block; height: 100%; }
.barlist-value { font-family: var(--mono); font-size: .88rem; text-align: right; }
@media (max-width: 620px) {
  .barlist-row { grid-template-columns: 110px 1fr 90px; gap: 8px; }
  .barlist-label, .barlist-value { font-size: .8rem; }
}
/* A chart is worth printing — it is what gets taken to a bank meeting. */
@media print {
  svg.chart { page-break-inside: avoid; }
}

/* ---- Two-step sign-in --------------------------------------------------- */
/* The code box is big and monospaced: it is typed under mild stress, often
   one-handed on a phone, from a number that vanishes in 30 seconds. */
.code-box { font-family: var(--mono) !important; font-size: 1.6rem !important;
  letter-spacing: .35em; text-align: center; padding: 14px 10px !important; }
.qr-box { display: flex; justify-content: center; padding: 16px; background: #fff;
  border: 1px solid var(--line); margin-bottom: 16px; }
.qr-box svg { width: 200px; height: 200px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 16px 0; }
.recovery-codes span { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .06em;
  background: #f7f8f7; border: 1px solid var(--line-strong); padding: 10px; text-align: center; }
.btn-block { width: 100%; justify-content: center; }
/* Recovery codes are meant to be printed and put in a drawer. */
@media print {
  .recovery-codes { page-break-inside: avoid; }
  .btn-row, .nav, .topbar { display: none !important; }
}

/* ---- Settings sub-navigation ------------------------------------------- */
/* Ties the system pages together now they are out of the main nav. Sits
   directly under the title area, quieter than the main strip so it reads as
   "where you are within Settings" rather than a second set of tabs. */
.subnav { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); }
.subnav a { font-family: var(--cond); font-size: .95rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-70); text-decoration: none;
  padding: 9px 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.subnav a.is-current { color: var(--ink); border-bottom-color: var(--blueprint); font-weight: 600; }
@media (max-width: 700px) {
  .subnav { overflow-x: auto; flex-wrap: nowrap; }
  .subnav a { white-space: nowrap; }
}

/* A field filled from the client's record — visibly not typed by hand. */
input.is-copied { background: #f2f6f9; color: var(--ink-70); border-style: dashed; }

/* Cancel sits with the save buttons but must not compete with them: it throws
   work away, so it should be the least eye-catching thing in the row. */
.btn-quiet { border-color: var(--line); color: var(--ink-40); }
.btn-quiet:hover { border-color: var(--safety); color: var(--safety); background: transparent; }

/* ---------------------------------------------------------------------
   WHO WAS ON THE TRUCK — the per-load crew picker on a load.

   A tick and a rand box per person. Laid out as rows rather than a table
   because this is filled in on a phone at a quarry gate, and a table with
   two columns on a 360px screen puts the pay box off the edge.
   --------------------------------------------------------------------- */
.crew-pick { border: 1px solid var(--line); }
.crew-pick-row { display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); }
.crew-pick-row:last-child { border-bottom: 0; }
.crew-pick-row:nth-child(odd) { background: var(--concrete-10, rgba(0,0,0,.015)); }
.crew-pick-name { display: flex; align-items: center; gap: 9px; flex: 1 1 auto;
  margin: 0; cursor: pointer; min-width: 0; }
.crew-pick-name input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.crew-pick-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-pick-row input[type="text"] { width: 110px; flex: 0 0 auto; margin: 0;
  padding: 5px 8px; text-align: right; }
@media (max-width: 560px) {
  .crew-pick-row input[type="text"] { width: 90px; }
}


/* Something booked for a day that has passed and never marked done. Used by
   the overdue tasks on the dashboard and by the loads still to run — it has
   been referenced since the tasks phase and never actually had a style, so an
   overdue row looked exactly like every other row. */
.data tr.is-late td { background: rgba(184, 92, 0, .05); }
.data tr.is-late td:first-child { box-shadow: inset 3px 0 0 var(--safety); }
.is-late-text { color: var(--safety); font-weight: 600; }


/* ---------------------------------------------------------------------
   A SEARCH FIELD IN PLACE OF A LONG DROPDOWN (assets/select-search.js).

   The <select> is still there and still what gets posted; it is hidden and
   this stands in front of it.
   --------------------------------------------------------------------- */
.combo { position: relative; }
.combo select[hidden] { display: none; }
.combo-input { width: 100%; }
.combo-clear { position: absolute; top: 0; right: 0; width: 34px; height: 38px;
  border: 0; background: transparent; color: var(--ink-40); font-size: 1.2rem;
  line-height: 1; cursor: pointer; padding: 0; }
.combo-clear:hover { color: var(--safety); }

.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none; max-height: 280px; overflow-y: auto;
  background: var(--paper, #fff); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.combo-list li { padding: 8px 11px; cursor: pointer; font-size: .95rem;
  border-bottom: 1px solid var(--line); }
.combo-list li:last-child { border-bottom: 0; }
.combo-list li.is-active { background: var(--blueprint); color: #fff; }
.combo-list li.combo-none { color: var(--ink-40); cursor: default;
  font-family: var(--cond); font-size: .85rem; letter-spacing: .04em; }

@media (max-width: 560px) {
  .combo-list { max-height: 220px; }
  .combo-list li { padding: 11px; }
}