/* The app's stylesheet on the design tokens (tokens.css loads first). Every class the pages
   already use keeps its name and meaning; the old variable names stay as aliases of the tokens. */
:root {
  --bg: var(--steel-50); --card: var(--surface-card); --ink: var(--text-strong); --muted: var(--text-muted);
  --line: var(--border-subtle); --brand: var(--blue-700); --ok: var(--green-600); --warn: var(--amber-600);
  --bad: var(--red-600); --info: var(--blue-800);
  /* the fleet states, the handoff's colours; badges and the Today bar share them */
  --state-available: #B9CCFF; --state-prepped: #6F8FFF; --state-shipped: #034EFF; --state-returned: #919bb8;
  --state-in_inspection: #6b779a; --state-in_repair: #4d597a; --state-lost_in_hole: #C42B2B; --state-retired: #d6dbe7;
  font-family: var(--font-sans); font-size: 14px; line-height: var(--leading-normal);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text-body); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--action-brand-hover); text-decoration: underline; }
::selection { background: var(--blue-200); }
button, input, select, textarea { font-family: inherit; }

/* ---- header: navy, sticky, the tabs and their counts ---- */
header.top { position: sticky; top: 0; z-index: 30; background: var(--navy-deep); color: #fff; }
header.top .top-in { max-width: 1240px; margin: 0 auto; height: 60px; padding: 0 28px; display: flex; align-items: center; gap: 20px; }
header.top .brand { display: flex; align-items: center; height: 60px; }
header.top .wordmark { height: 20px; width: auto; display: block; }
header.top .omark { height: 30px; width: auto; display: none; }
header.top nav.tabs { display: flex; gap: 4px; margin-left: 8px; }
header.top .tab { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 10px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap; }
header.top .tab:hover { color: #fff; text-decoration: none; }
header.top .tab.active { color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 var(--blue-electric); }
.count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 18px; min-width: 20px; padding: 1px 6px; border-radius: 3px; background: #fff; color: var(--navy-deep); text-align: center; }
header.top .sync { margin-left: auto; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 13px; white-space: nowrap; }
header.top .sync:hover { color: #fff; text-decoration: none; }
header.top .sync .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-500); }
header.top .sync.stale .dot { background: var(--amber-500); }
header.top .sync.stale .sync-text { color: var(--amber-100); }
header.top .who { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.72); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
header.top .sync + .who { margin-left: 16px; }
header.top form { margin: 0; }
header.top .who button { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
header.top .who button:hover { border-color: #fff; color: #fff; }
nav.tabs-phone { display: none; }

/* ---- page frame ---- */
main { max-width: 1240px; margin: 0 auto; padding: 32px 28px 56px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: var(--tracking-wide); color: var(--navy-deep); margin: 0 0 16px; }
h2 { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--steel-600); margin: 24px 0 8px; }
h3 { font-size: 15px; font-weight: 700; color: var(--text-strong); margin: 0; }
.page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.page-head .meta { margin: 0; font-size: 14px; color: var(--steel-600); }
.page-head .lead { margin: 0; font-size: 15px; font-weight: 600; }

/* ---- controls ---- */
button, .btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 3px; border: 1.5px solid var(--steel-400); background: #fff; color: var(--text-body); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
button:hover, .btn:hover { border-color: var(--blue-700); color: var(--blue-700); text-decoration: none; }
button.primary, .btn.primary { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
button.primary:hover, .btn.primary:hover { background: var(--blue-800); border-color: var(--blue-800); color: #fff; box-shadow: var(--shadow-brand); }
button.small { padding: 3px 8px; font-size: 12px; }
button.danger { color: var(--red-600); }
button.danger:hover { border-color: var(--red-600); }
button.linklike { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--steel-300); border-radius: 3px; background: #fff; min-width: 120px; color: var(--text-body); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
form.inline label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
details summary { cursor: pointer; color: var(--text-link); }

/* ---- cards and sections ---- */
.card { background: var(--card); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 14px 18px; margin-bottom: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .n { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--text-strong); }
.stat .l { color: var(--muted); font-size: 13px; }
.section { background: #fff; border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--steel-100); }
.section-head .aside { font-size: 12px; color: var(--steel-600); }
.section-head .aside .count-mono { font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); }
.section .row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--steel-100); }
.section .row:last-child { border-bottom: 0; }
.section .row:hover { background: var(--blue-50); }
.section .empty { padding: 28px 18px; font-size: 15px; color: var(--steel-700); }
.section .foot { padding: 10px 18px; font-size: 12px; color: var(--steel-600); border-top: 1px solid var(--steel-100); }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.more-grid h3 { margin-bottom: 8px; }
.more-item { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: 15px; color: var(--text-body); border-bottom: 1px solid var(--steel-100); margin: 0; }
.more-item:last-child { border-bottom: 0; }
.more-item:hover { background: var(--blue-50); text-decoration: none; color: var(--blue-700); }
.more-item .chev { color: var(--steel-400); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--steel-100); vertical-align: top; }
th { color: var(--steel-700); font-weight: 600; font-size: 12px; background: var(--steel-50); }
tr:last-child td { border-bottom: 0; }
.wrap { overflow-x: auto; }
.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-strong); }
th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 9px; }
th[aria-sort="descending"]::after { content: " \25BC"; font-size: 9px; }

/* ---- badges: the fleet states in the handoff's colours ---- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 600; background: var(--steel-100); color: var(--steel-700); white-space: nowrap; }
.badge.available { background: var(--state-available); color: var(--navy-deep); }
.badge.prepped { background: var(--state-prepped); color: #fff; }
.badge.shipped { background: var(--state-shipped); color: #fff; }
.badge.returned { background: var(--state-returned); color: #fff; }
.badge.in_inspection { background: var(--state-in_inspection); color: #fff; }
.badge.in_repair { background: var(--state-in_repair); color: #fff; }
.badge.lost_in_hole { background: var(--state-lost_in_hole); color: #fff; }
.badge.retired { background: var(--state-retired); color: var(--steel-700); }
.badge.proposed { background: #fff; color: var(--navy-deep); border: 1.5px dashed var(--navy-deep); padding: 1px 7px; }
.badge.sublet { background: var(--blue-50); color: var(--blue-800); border: 1px solid var(--blue-200); padding: 1px 7px; }
.flash { padding: 10px 12px; border-radius: 3px; margin-bottom: 12px; background: var(--green-100); color: var(--green-600); border: 1px solid var(--green-500); }
.flash.error { background: var(--red-100); color: var(--red-600); border-color: var(--red-500); }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.ok { color: var(--ok); }

/* ---- timeline and gates ---- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 6px 0 6px 14px; border-left: 2px solid var(--line); position: relative; font-size: 14px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-deep); }
.timeline li.proposed::before { background: var(--blue-700); }
.gate { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.gate.green { background: var(--green-500); } .gate.amber { background: var(--amber-500); } .gate.red { background: var(--red-500); } .gate.blocked { background: var(--steel-950); }

/* ---- the Today page ---- */
.today-jobs .jobs-head, .today-jobs .jobs-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px 84px; gap: 16px; align-items: center; }
.today-jobs .jobs-head { padding: 9px 18px 9px 22px; background: var(--steel-50); font-size: 12px; font-weight: 600; color: var(--steel-700); }
.today-jobs .jobs-row { padding: 11px 18px; border-bottom: 1px solid var(--steel-100); border-left: 4px solid var(--navy-deep); }
.today-jobs .jobs-row:hover { background: var(--blue-50); }
.today-jobs .rig-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy-deep); }
.today-jobs .sub, .section .sub { font-size: 12px; color: var(--steel-600); }
.today-jobs .jobs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 7px; border-radius: 2px; background: var(--steel-50); border: 1px solid var(--steel-200); color: var(--steel-700); font-size: 12px; font-weight: 600; }
.chip:hover { text-decoration: none; border-color: var(--blue-700); color: var(--blue-700); }
.chip .tail { font-size: 11px; font-weight: 500; }
.chip.chip-prep { background: #fff; border: 1.5px dashed var(--navy-deep); color: var(--navy-deep); }
.today-jobs .jobs-next { font-size: 13px; font-weight: 600; color: var(--steel-600); }
.today-jobs .jobs-next.attn { color: var(--blue-800); }
.today-jobs .jobs-mail { font-size: 12px; font-weight: 600; }
.right { text-align: right; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-right: 1px solid var(--steel-100); color: inherit; }
.kpi:last-child { border-right: 0; }
.kpi:hover { background: var(--blue-50); text-decoration: none; }
.kpi .l { font-size: 13px; color: var(--steel-600); }
.kpi .n { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--text-strong); }
.kpi .n .of { font-size: 14px; font-weight: 500; color: var(--steel-500); }
.kpi .s { font-size: 12px; color: var(--steel-600); }
.today-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 20px; align-items: start; margin-top: 24px; }
.today-cols .col { display: flex; flex-direction: column; gap: 20px; }
.section .grow { flex: 1 1 auto; min-width: 0; }
.section .ring { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue-700); flex: 0 0 auto; }
.section .age { width: 44px; text-align: right; flex: 0 0 auto; }
.section .row .btn { min-width: 76px; text-align: center; flex: 0 0 auto; }
.fleet-bar { display: flex; gap: 2px; height: 14px; margin: 14px 18px 6px; }
.fleet-bar .seg { flex: 1 1 0; border-radius: 1px; }
.section .legend { padding: 8px 18px; }
.section .legend:hover { background: transparent; }
.section .swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.state-shipped { background: var(--state-shipped); } .state-prepped { background: var(--state-prepped); } .state-available { background: var(--state-available); }
.state-returned { background: var(--state-returned); } .state-in_inspection { background: var(--state-in_inspection); } .state-in_repair { background: var(--state-in_repair); }
.state-lost_in_hole { background: var(--state-lost_in_hole); } .state-retired { background: var(--state-retired); }
.section .next { color: var(--blue-800); font-weight: 600; }
.section .change .when { width: 78px; flex: 0 0 auto; }
@media (max-width: 1100px) {
  .today-cols { grid-template-columns: 1fr; }
  .today-jobs .jobs-head { display: none; }
  .today-jobs .jobs-row { grid-template-columns: 1fr; gap: 8px; }
  .today-jobs .right { text-align: left; }
}
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(2) { border-right: 0; } .section .age { display: none; } }

/* ---- sign-in: the second factor pages ---- */
.auth-card { max-width: 480px; margin: 40px auto; background: #fff; border: 1px solid var(--border-subtle); border-radius: 4px; padding: 24px 28px; }
.auth-card.wide { max-width: 760px; }
.auth-card h1 { margin: 6px 0 12px; }
.auth-card .meta { margin: 0; font-size: 14px; color: var(--steel-600); }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--steel-700); }
.auth-form input { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.12em; padding: 10px 12px; }
.auth-form button { align-self: flex-start; height: 40px; padding: 0 18px; }
.auth-alt { margin-top: 18px; font-size: 13px; }
.auth-alt summary { color: var(--text-link); cursor: pointer; }
.auth-alt input { font-size: 16px; letter-spacing: 0.04em; }
.enrol-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.enrol-grid .qr svg { width: 220px; height: 220px; display: block; }
.enrol-grid .key { font-size: 15px; word-break: break-all; margin: 4px 0 8px; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 16px 0; font-size: 18px; }
@media (max-width: 700px) { .enrol-grid { grid-template-columns: 1fr; } .auth-card { margin: 16px auto; padding: 18px; } }

/* ---- Rigs, Rig page, Well page ---- */
.page-head.row-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head.row-head > div { display: flex; flex-direction: column; gap: 6px; }
.segmented { display: inline-flex; gap: 4px; margin-bottom: 16px; }
.segmented .seg { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--steel-200); border-radius: 3px; background: #fff; color: var(--text-body); font-weight: 600; font-size: 14px; }
.segmented .seg .n { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.segmented .seg:hover { text-decoration: none; border-color: var(--blue-700); color: var(--blue-700); }
.segmented .seg.on { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.segmented .seg.on .n { color: var(--blue-200); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 2px; border: 1px solid var(--steel-200); background: #fff; font-size: 13px; font-weight: 600; color: var(--steel-700); }
.filter-chip .n { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.filter-chip.on { background: var(--blue-50); border-color: var(--blue-700); color: var(--blue-700); }
.filter-chip:hover { text-decoration: none; border-color: var(--blue-700); }
.today-jobs a.jobs-row { color: inherit; }
.today-jobs a.jobs-row:hover { text-decoration: none; }
.chip.chip-proposed { border: 1.5px dashed var(--steel-500); }
.search-row { margin-bottom: 12px; }
.search-row input[type=search] { width: 320px; max-width: 100%; }
.rigs-table tr.year td { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-wider); color: var(--steel-600); background: var(--steel-50); padding: 6px 8px; }
.rigs-table .open { color: var(--blue-800); font-weight: 700; }
.rigs-table details.runs summary { list-style: none; cursor: pointer; }
.rigs-table details.runs summary::-webkit-details-marker { display: none; }
.rigs-table details.runs summary::after { content: " ›"; color: var(--steel-400); }
.rigs-table details.runs[open] summary::after { content: " ⌄"; }
.rigs-table .rig-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy-deep); }
.rigs-table .runs-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rigs-table .run-line { display: grid; grid-template-columns: 90px 190px minmax(0, 1fr) 80px 190px 130px 110px; gap: 12px; font-size: 12px; color: var(--steel-700); }

/* ---- Rig page and Well page pieces ---- */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
.topbar .back { font-weight: 600; }
.topbar-right { display: flex; gap: 14px; }
.rig-h1 { text-transform: uppercase; letter-spacing: 0.03em; }
.stat-pill { display: inline-block; padding: 4px 10px; border: 1.5px solid currentColor; border-radius: 2px; font-size: 12px; font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.rig-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
.rig-cards .contacts { border-left: 4px solid var(--blue-700); }
.section .kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--steel-100); font-size: 14px; }
.section .kv:last-child { border-bottom: 0; }
.section .kv.open { font-weight: 700; color: var(--blue-800); }
.section .lock { font-size: 13px; margin-right: 4px; }
.run-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--blue-700); margin: 0 0 6px; }
.section-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.section-title .muted { font-size: 12px; }
.well-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
.well-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; overflow: hidden; color: inherit; }
.well-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.well-card.now { border: 2px solid var(--blue-700); }
.well-card .wc-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 16px; background: var(--steel-50); }
.well-card.now .wc-head { background: var(--blue-700); color: #fff; }
.well-card.dmg .wc-head { background: var(--blue-100); }
.well-card .wc-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.well-card .wc-stat { justify-self: end; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.well-card .wc-lsd { font-size: 20px; font-weight: 600; }
.well-card .wc-span { justify-self: end; font-size: 12px; opacity: .85; }
.well-card .wc-name { grid-column: 1 / -1; font-size: 12px; opacity: .85; }
.well-card .wc-steps { padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.well-card .wc-step { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: var(--steel-600); }
.well-card .wc-step .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--steel-200); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--steel-400); }
.well-card .wc-step.done .dot { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.well-card .wc-step.done { color: var(--text-strong); }
.well-card .wc-step.now .dot { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); }
.well-card .wc-step.now { color: var(--blue-800); font-weight: 600; }
.well-card .wc-step.na, .well-card .wc-step.carry { color: var(--steel-400); }
.well-card .wc-tools { padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; border-top: 1px solid var(--steel-100); }
.well-card .wc-tools .lbl { width: 100%; color: var(--steel-600); }
.well-card .wc-note { margin: 0 16px 8px; padding: 6px 10px; background: var(--blue-700); color: #fff; font-size: 12px; font-weight: 600; border-radius: 2px; }
.well-card .wc-totals { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--steel-100); }
.well-card .wc-totals > div { padding: 8px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.well-card .wc-totals .l { font-size: 11px; color: var(--steel-600); }
.well-card .wc-totals .open { color: var(--blue-800); font-weight: 700; }
.well-card .wc-foot { margin-top: auto; padding: 8px 16px; border-top: 1px solid var(--steel-100); font-size: 12px; font-weight: 600; color: var(--blue-700); }
.section .run-row { display: grid; grid-template-columns: 80px 190px minmax(0, 1fr) 80px 110px 130px 110px 50px; gap: 12px; font-size: 13px; }
.section .move .glyph { width: 20px; text-align: center; color: var(--steel-500); }
.section .move .when { width: 92px; }
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; padding: 14px; margin-bottom: 24px; }
.jstep { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--steel-600); min-width: 0; }
.jstep .jglyph { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--steel-200); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--steel-400); background: #fff; }
.jstep.done .jglyph { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.jstep.done { color: var(--text-strong); }
.jstep.now .jglyph { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); }
.jstep.now .jlabel { color: var(--blue-800); font-weight: 700; }
.jstep.early .jglyph { border: 2px solid var(--navy-deep); color: var(--navy-deep); }
.jstep .jlabel { font-weight: 600; }
.jstep .jdate { font-size: 11px; }
.jstep .jproof { font-size: 10px; }
.jstep .jwait { font-size: 11px; font-style: italic; color: var(--steel-500); }
.section .dmg .amt { font-weight: 700; }
.section .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px 18px; }
.section .photo { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; aspect-ratio: 4 / 3; padding: 8px; background: var(--steel-100); border: 1px solid var(--steel-200); border-radius: 2px; font-size: 11px; color: var(--steel-700); }
.section .photo:hover { text-decoration: none; border-color: var(--blue-700); }
/* the first page as the tile's picture; the labels sit on a strip over its foot */
.section .photo.has-img { position: relative; overflow: hidden; padding: 0; }
.section .photo.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.section .photo.has-img .ptype, .section .photo.has-img .pname { position: relative; z-index: 1; padding: 0 8px; background: rgba(255, 255, 255, 0.92); }
.section .photo.has-img .ptype { padding-top: 4px; }
.section .photo.has-img .pname { padding-bottom: 6px; }
.section .photo .ptype { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.section .internal { margin: 10px 18px; padding: 8px 12px; border: 1.5px dashed var(--steel-400); background: repeating-linear-gradient(135deg, var(--steel-50) 0 8px, #fff 8px 16px); font-size: 12px; color: var(--steel-700); }
.ticks th, .ticks td { text-align: center; }
.ticks th:first-child, .ticks td:first-child { text-align: left; }
.ticks .tick { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--steel-200); align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.ticks .tick.on { background: var(--navy-deep); border-color: var(--navy-deep); }
.section.side .kv a { font-weight: 600; }
@media (max-width: 1100px) { .section .run-row { grid-template-columns: 1fr 1fr; } }

/* ---- Document page: what the file says, above its page images (no inline styles: the CSP forbids them) ---- */
h1.doc-title { font-size: 18px; }
.doc-note { font-size: 12px; }
.btn + .doc-note { margin-left: 8px; }
.doc-read h2 { margin-top: 0; }
.doc-read h3 { margin: 12px 0 6px; }
.doc-read p { margin: 0 0 8px; }
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.fields dt { color: var(--steel-600); }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.doc-text pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0 0; }
.page-img { padding: 6px; }
.page-img img { display: block; max-width: 100%; height: auto; }

/* ---- Correspondence: the run's messages as a timeline, grouped by thread; the message page ---- */
.chain-thread { border-bottom: 1px solid var(--steel-100); padding-bottom: 6px; }
.chain-thread:last-child { border-bottom: 0; }
.chain-subject { padding: 12px 18px 4px; font-size: 13px; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.section .row.chain-msg { position: relative; align-items: flex-start; margin-left: 24px; padding: 8px 18px 8px 16px; border-bottom: 0; border-left: 2px solid var(--steel-200); font-size: 13px; }
.section .row.chain-msg::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-deep); }
.chain-msg .when { flex: 0 0 48px; padding-top: 1px; }
.chain-msg .grow { overflow-wrap: anywhere; }
.chain-msg .chain-open { flex: 0 0 auto; font-size: 12px; font-weight: 600; }
.party { display: inline-block; padding: 1px 6px; border: 1px solid transparent; border-radius: 2px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.party-client { background: var(--blue-700); color: #fff; }
.party-shop { background: var(--navy-deep); color: #fff; }
.party-us { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-800); }
.party-other { background: var(--steel-100); color: var(--steel-700); }
h1.msg-title { font-size: 22px; overflow-wrap: anywhere; }
.msg-head, .msg-body { margin-bottom: 14px; }
.msg-head .kv > span:last-child { text-align: right; overflow-wrap: anywhere; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; margin: 0; padding: 14px 18px; }
.msg-full .msg-text { padding: 8px 0 0; }

/* ---- phone: the O-mark, a bottom tab bar, single column ---- */
@media (max-width: 1100px) { header.top .sync-text { display: none; } }
@media (max-width: 700px) {
  header.top .top-in { height: 52px; padding: 0 14px; gap: 12px; }
  header.top .wordmark { display: none; }
  header.top .omark { display: block; }
  header.top nav.tabs, header.top .who { display: none; }
  header.top .sync { margin-left: auto; }
  main { padding: 18px 14px 84px; }
  h1 { font-size: 26px; }
  nav.tabs-phone { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--border-subtle); padding: 4px 2px 14px; }
  nav.tabs-phone .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; font-size: 12px; font-weight: 600; color: var(--steel-600); }
  nav.tabs-phone .tab:hover { text-decoration: none; }
  nav.tabs-phone .tab.active { color: var(--blue-700); box-shadow: inset 0 3px 0 var(--blue-700); }
  nav.tabs-phone .count { background: var(--navy-deep); color: #fff; font-size: 11px; line-height: 16px; min-width: 18px; padding: 0 5px; }
  th, td { padding: 6px 5px; }
}

/* ---- Inbox: the message list, its problems strip and filters; the thread on the message page (P4) ---- */
.inbox-strip { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--steel-200); border-radius: 3px; background: var(--steel-50); color: var(--steel-700); font-size: 14px; }
.inbox-strip:hover { text-decoration: none; border-color: var(--blue-700); }
.inbox-strip .grow { flex: 1 1 auto; min-width: 0; }
.inbox-strip.inbox-strip-attn { background: var(--amber-100); border-color: var(--amber-500); color: var(--text-strong); }
.inbox-strip-parts { font-size: 12px; color: var(--steel-700); }
.inbox-strip-go { flex: 0 0 auto; font-weight: 600; color: var(--blue-700); }
.inbox-clip { vertical-align: -2px; flex: 0 0 auto; }
.inbox-search select { max-width: 240px; }
.inbox-clear { align-self: center; font-size: 12px; color: var(--steel-600); }
.section .row.inbox-row { align-items: flex-start; padding: 10px 18px; font-size: 14px; }
.inbox-when { flex: 0 0 120px; padding-top: 1px; font-size: 12px; }
.inbox-time { color: var(--steel-500); }
.inbox-party { flex: 0 0 72px; }
.inbox-main { overflow-wrap: anywhere; }
.inbox-who { font-weight: 700; color: var(--text-strong); margin-right: 4px; }
.inbox-subj { font-weight: 600; }
.inbox-snip { margin-top: 2px; }
.inbox-att { flex: 0 0 40px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--steel-600); }
.inbox-job { flex: 0 0 64px; text-align: right; font-size: 12px; }
.inbox-pager { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.inbox-thread { margin-bottom: 14px; }
.inbox-thread h3.inbox-thread-subject { overflow-wrap: anywhere; }
.section .row.inbox-thread-row { padding: 6px 18px; font-size: 13px; }
.section .row.inbox-here { background: var(--blue-50); }
@media (max-width: 700px) {
  .section .row.inbox-row { flex-wrap: wrap; gap: 6px 10px; }
  .inbox-row .inbox-when { flex: 0 0 auto; }
  .inbox-row .inbox-time { display: none; }
  .inbox-row .inbox-party { flex: 0 0 auto; }
  .inbox-row .inbox-main { flex: 1 1 100%; order: 3; }
  .inbox-row .inbox-att, .inbox-row .inbox-job { flex: 0 0 auto; }
  .inbox-thread-row .inbox-when { flex: 0 0 auto; }
}

/* ---- the C# page (shop.html): one Authority shop job number ---- */
.stat-pill.shop-pending { color: var(--bad); }
.flash.shop-waive { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section .photo.shop-damages { border-color: var(--bad); border-width: 2px; }
.shop-role { flex: 0 0 auto; min-width: 84px; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; background: var(--steel-100); color: var(--steel-700); }
.shop-role-inspection { background: var(--blue-50); color: var(--blue-800); }
.shop-role-damages { background: var(--red-100); color: var(--red-600); }
.shop-role-rent { background: var(--steel-100); color: var(--navy-deep); }

/* ---- the Well page's actions (partials/well_actions.html): the one-tap confirm, the forms by hand, the feed ---- */
.act { margin-top: 24px; }
.act-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.act-col { display: flex; flex-direction: column; gap: 20px; }
.section .row.act-event { align-items: flex-start; flex-wrap: wrap; }
.act-tick { min-width: 0; width: auto; margin-top: 3px; }
.act-when { flex: 0 0 auto; min-width: 84px; padding-top: 1px; font-size: 12px; }
.act-reject { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.act-reject input { min-width: 0; width: 170px; padding: 3px 6px; font-size: 12px; }
.section .row.act-undone { opacity: 0.6; }
.act-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--steel-100); }
.act-item { padding: 10px 18px; border-bottom: 1px solid var(--steel-100); }
.act-item summary { font-weight: 600; }
.act-form { margin-top: 10px; }
.act-num { min-width: 0; width: 96px; }
.act-short { min-width: 0; width: 110px; }
.act-wide { flex: 1 1 100%; }
.act-wide textarea { min-height: 64px; width: 100%; }
.act-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.act-line { padding: 10px 18px; font-size: 13px; color: var(--steel-700); }
.section .row.act-feed-row { align-items: flex-start; }
.act-text { margin-top: 2px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .act-cols { grid-template-columns: 1fr; } }

/* ---- Fleet, Tool, Invoicing (build order row 5, docs/ROADMAP.md F7), and the Leakage and billing pages' controls ---- */
.fx-kpis { margin-bottom: 16px; }
.fx-filter { margin-bottom: 12px; }
.fx-find { width: 220px; }
.fx-check { flex-direction: row; align-items: center; gap: 6px; }
.fx-check input { min-width: 0; }
.fx-clear { align-self: center; font-size: 12px; color: var(--steel-600); }
.fx-orders { margin-bottom: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 4px; font-size: 14px; }
.fx-orders-list { font-size: 12px; }
/* the board: a corner, four column heads, then a lane label and four cells per row (ours, rented in) */
.fx-board { margin-bottom: 16px; }
.fx-lanes { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 16px; }
.fx-corner { min-height: 1px; }
.fx-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 2px 4px; border-bottom: 2px solid var(--navy-deep); font-size: 12px; font-weight: 600; color: var(--steel-800); }
.fx-col-head .mono { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.fx-lane { padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.fx-lane-sub { display: block; font-size: 11px; font-weight: 500; color: var(--steel-600); }
.fx-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 44px; padding: 8px; background: var(--steel-50); border-radius: 3px; }
.fx-cell-label { display: none; }
.fx-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px; background: #fff; border: 1px solid var(--steel-200); border-radius: 3px; color: inherit; }
.fx-tile:hover { background: var(--blue-50); border-color: var(--blue-700); text-decoration: none; }
.fx-tile.fx-rented { border-left: 4px solid var(--navy-deep); }
.fx-tile.fx-proposed { border-style: dashed; border-color: var(--steel-500); }
.fx-tile.fx-rented.fx-proposed { border-left: 4px solid var(--navy-deep); }
.fx-serial, .fx-where, .fx-days { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-serial { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--blue-700); }
.fx-where { font-size: 11px; color: var(--steel-700); }
.fx-days { font-family: var(--font-mono); font-size: 10px; color: var(--steel-600); }
.fx-key { display: inline-block; width: 4px; height: 12px; margin-right: 4px; vertical-align: -1px; background: var(--navy-deep); }
.fx-key.fx-key-proposed { width: 12px; background: #fff; border: 1.5px dashed var(--steel-500); }
.fx-util { margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.fx-note { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.section > .fx-note { margin: 0; padding: 10px 18px 4px; }
.fx-nowrap { white-space: nowrap; }
.fx-inline { display: inline; }
.fx-reason { width: 170px; min-width: 0; padding: 3px 6px; font-size: 12px; }
.fx-pad { padding: 14px 18px; }
.fx-small { font-size: 12px; }
/* internal-only money (what a supplier charges us): the handoff's dashed stripe, never on client output */
.fx-internal { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border: 1.5px dashed var(--steel-400); border-radius: 2px; background: repeating-linear-gradient(135deg, var(--steel-50) 0 6px, #fff 6px 12px); white-space: nowrap; }
/* the Tool page */
.fx-h1 { overflow-wrap: anywhere; }
.fx-run a { font-weight: 600; }
.fx-head-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-propose { margin-bottom: 20px; }
.fx-propose summary { font-weight: 600; }
.fx-sec { margin-bottom: 20px; }
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 8px; }
.fx-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; color: inherit; font-size: 13px; }
a.fx-card:hover { border-color: var(--blue-700); box-shadow: var(--shadow-md); text-decoration: none; }
.fx-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fx-cno { font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.fx-card-type { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-600); }
.fx-card-line { color: var(--steel-700); }
.fx-card-notes { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--steel-600); }
.fx-card-foot { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--blue-700); }
/* the Invoicing page */
.fx-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.fx-pipe-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; color: var(--text-strong); }
.fx-pipe-card:hover { border-color: var(--blue-700); text-decoration: none; }
.fx-pipe-card.on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.fx-pipe-label { font-size: 13px; font-weight: 600; }
.fx-pipe-n { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.fx-pipe-money { font-family: var(--font-mono); font-size: 12px; color: var(--steel-600); }
.fx-pipe-card.on .fx-pipe-money { color: var(--blue-200); }
.section .row.fx-row-link { color: inherit; }
.section .row.fx-row-link:hover { text-decoration: none; }
.fx-amt { font-weight: 600; white-space: nowrap; }
.fx-why { display: block; }
.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fx-subhead { border-top: 1px solid var(--steel-100); }
.fx-ageing td:first-child { font-weight: 600; }
/* Leakage and the billing sheet: the row actions, folded */
.fx-stats { margin-bottom: 8px; }
.fx-actions { min-width: 300px; }
.fx-small-input { min-width: 0; font-size: 12px; }
.fx-act { margin-top: 4px; }
.fx-act summary { font-size: 12px; color: var(--muted); }
.fx-act-form { margin-top: 4px; }
.fx-job { width: 80px; min-width: 0; font-size: 12px; }
.fx-serial-input { width: 120px; min-width: 0; font-size: 12px; }
.fx-short { width: 120px; min-width: 0; }
.fx-h1-sheet { font-size: 20px; }
.fx-sheet-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.fx-stages { margin: 0 0 10px; }
.fx-flag { margin: 0 0 6px; }
.fx-desc { font-size: 13px; }
.fx-qb { width: 100%; border: 0; background: transparent; font: 13px var(--font-mono); }
@media (max-width: 1100px) { .fx-two { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .fx-lanes { grid-template-columns: 1fr; padding: 10px; }
  .fx-corner, .fx-col-head { display: none; }
  .fx-cell-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-600); }
  .fx-actions { min-width: 0; }
  .fx-find { width: 100%; }
}

/* --- the document viewer (section 15, F8): pages beside what was read ---------------------------- */
.doc-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 20px; align-items: start; }
.doc-pages .page-img { position: relative; margin-bottom: 14px; }
.doc-page-n { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--steel-600); background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 2px; }
.doc-side { position: sticky; top: 12px; }
.doc-read .doc-read-note { margin: 0; padding: 10px 18px; font-size: 13px; border-bottom: 1px solid var(--steel-100); }
.doc-fields { font-size: 13px; }
.doc-fields th, .doc-fields td { padding: 6px 10px; vertical-align: top; }
.doc-fields th:first-child, .doc-fields td:first-child { padding-left: 18px; }
.doc-fields th:last-child, .doc-fields td:last-child { padding-right: 18px; }
.doc-fields .doc-group td { padding-top: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--steel-600); }
.doc-fields .doc-n { width: 28px; }
.doc-fields .doc-n::before { content: ""; }
.doc-fields .doc-label { color: var(--steel-600); white-space: nowrap; }
.doc-fields .doc-value { overflow-wrap: anywhere; }
.doc-fields .doc-pct { width: 52px; color: var(--steel-600); }
.doc-fields .doc-low .doc-pct { color: var(--blue-800); font-weight: 700; }
.doc-fields .doc-low .doc-value { background: var(--blue-50); }
.doc-fields .doc-marked .doc-value { text-decoration: line-through; text-decoration-color: var(--steel-400); }
.doc-fields .doc-marked .doc-mark { text-decoration: none; display: block; }
.doc-fields .doc-act { width: 64px; text-align: right; white-space: nowrap; }
.doc-fields .doc-act form { display: inline; }
@media (max-width: 900px) { .doc-two { grid-template-columns: minmax(0, 1fr); } .doc-side { position: static; } }
/* the Forecast page */
.fc-sec { margin-bottom: 20px; }
.kpis.fc-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-dash { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fc-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fc-legend { display: flex; align-items: center; gap: 6px; }
.fc-key { display: inline-block; width: 10px; height: 10px; }
.fc-key-fc { margin-left: 8px; }
.fc-key-actual, .fc-bar { background: var(--navy-deep); }
.fc-key-fc, .fc-bar-fc { background: repeating-linear-gradient(135deg, var(--blue-400) 0 5px, var(--blue-200) 5px 10px); }
.fc-bars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; align-items: end; height: 220px; padding: 20px 18px 8px; }
.fc-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.fc-col > div { width: 100%; }
.fc-val { font-size: 10px; color: var(--text-strong); white-space: nowrap; }
.fc-val.fc-val-fc { color: var(--blue-800); }
.fc-h0 { height: 0; } .fc-h1 { height: 17px; } .fc-h2 { height: 34px; } .fc-h3 { height: 51px; } .fc-h4 { height: 68px; } .fc-h5 { height: 85px; }
.fc-h6 { height: 102px; } .fc-h7 { height: 119px; } .fc-h8 { height: 136px; } .fc-h9 { height: 153px; } .fc-h10 { height: 170px; }
.fc-months { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; padding: 0 18px 14px; }
.fc-months span { text-align: center; font-size: 11px; color: var(--steel-600); }
.fc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.fc-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-width: 0; }
.fc-card-l { font-size: 13px; color: var(--steel-600); }
.fc-card-n { font-size: 26px; font-weight: 600; color: var(--text-strong); }
.fc-card-s { font-size: 12px; color: var(--steel-600); }
.fc-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--steel-100); }
.fc-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.fc-list > div > :first-child { color: var(--steel-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-list > div > :last-child { font-weight: 600; }
.fc-next { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--steel-100); font-size: 14px; }
.fc-next:last-child { border-bottom: 0; }
.fc-next > :first-child { color: var(--steel-700); }
.fc-next > :last-child { font-weight: 700; }
.fc-back { color: var(--blue-800); }
.fc-share { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.fc-track { display: block; flex: 1; height: 6px; background: var(--steel-100); }
.fc-fill { display: block; height: 6px; background: var(--navy-deep); }
.fc-freq-cell { min-width: 140px; }
.fc-total { font-size: 11px; color: var(--steel-600); }
.fc-w0 { width: 0; } .fc-w1 { width: 10%; } .fc-w2 { width: 20%; } .fc-w3 { width: 30%; } .fc-w4 { width: 40%; } .fc-w5 { width: 50%; }
.fc-w6 { width: 60%; } .fc-w7 { width: 70%; } .fc-w8 { width: 80%; } .fc-w9 { width: 90%; } .fc-w10 { width: 100%; }
.fc-due { color: var(--blue-800); font-weight: 700; }
.fc-foot { margin: 0 0 20px; font-size: 12px; color: var(--steel-600); max-width: 900px; }
@media (max-width: 1100px) { .fc-dash { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .kpis.fc-kpis-3 { grid-template-columns: 1fr; }
  .kpis.fc-kpis-3 .kpi { border-right: 0; border-bottom: 1px solid var(--steel-100); }
  .fc-bars { gap: 4px; padding: 16px 10px 8px; }
  .fc-months { gap: 4px; padding: 0 10px 12px; }
  .fc-val { font-size: 9px; }
}

/* --- the Inbox tray, status and "read as" (section 15, F8) ------------------------------------------ */
.inbox-tray { margin-bottom: 16px; border-color: var(--blue-700); }
.inbox-tray .section-head { background: var(--blue-50); }
.inbox-tray-row { align-items: flex-start; flex-wrap: wrap; }
.inbox-tray-when { font-size: 12px; }
.inbox-hint { color: var(--steel-700); }
.inbox-read-as { display: inline-block; padding: 1px 6px; border: 1px solid var(--steel-200); border-radius: 2px; font-size: 11px; font-weight: 600; color: var(--steel-700); white-space: nowrap; }
.inbox-tray-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 0 0 auto; }
.inbox-file { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inbox-file select { max-width: 240px; font-size: 13px; }
.inbox-status { flex: 0 0 auto; display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.inbox-status-filed { color: var(--green-600); }
.inbox-status-unsorted { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.inbox-status-not_ours { background: var(--steel-800); color: #fff; }
.inbox-status-unfiled { color: var(--steel-500); border-color: var(--steel-200); }
.inbox-row .inbox-read-as { flex: 0 0 auto; }
.msg-badges { display: flex; gap: 8px; align-items: center; }
.msg-filing { margin-bottom: 14px; }
.msg-filing-act { gap: 10px; flex-wrap: wrap; }
.msg-read .msg-read-doc { font-weight: 600; }
.msg-read .doc-fields { margin-bottom: 6px; }

/* the Close-out board (app/routers/closeout.py) */
.co-board th.co-stage, .co-board td.co-stage { text-align: center; }
.co-cell { display: inline-block; min-width: 44px; padding: 2px 6px; border-radius: 2px; font-size: 12px; font-weight: 600; font-family: var(--mono, monospace); }
.co-ok { background: var(--state-available); color: var(--navy-deep); }
.co-part { background: #fff3cd; color: #7a5a00; border: 1px solid #e6c766; }
.co-missing { background: #fde2e1; color: #8a1f1b; border: 1px solid #f0a9a5; }
.co-none { color: var(--muted); }
.co-complete td { opacity: 0.75; }
.co-gaps td { padding-top: 0; border-top: 0; background: var(--steel-50, #f7f8fa); }
.co-gaps summary { cursor: pointer; font-size: 13px; color: var(--steel-700); padding: 6px 0; }
.co-list { margin: 4px 0 10px 18px; padding: 0; font-size: 13px; }
.co-list li { margin: 3px 0; }
.co-where { color: var(--muted); }
.row-actions { display: flex; gap: 8px; }
.co-unplaced { margin-bottom: 16px; }
.co-balanced { white-space: nowrap; font-size: 12px; }

/* the Bills page (app/routers/bills.py) */
.bl-filters { margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.bl-table td { vertical-align: top; }
.bl-table tr.bl-first td { border-top: 2px solid var(--steel-200); }
.bl-table tr.bl-line:not(.bl-first) td { border-top: 1px dashed var(--steel-100); }
.bl-purchase td { color: var(--muted); }
.badge.bl-kind-purchase { background: var(--steel-100); color: var(--steel-700); }
.badge.bl-kind-inspection { background: var(--blue-50); color: var(--blue-800); }
.badge.bl-kind-damages { background: #fde2e1; color: #8a1f1b; }
.badge.bl-kind-rent { background: #fff3cd; color: #7a5a00; }
.badge.bl-kind-sale, .badge.bl-kind-other { background: var(--steel-100); color: var(--steel-700); }

/* the reconciliation page (app/routers/reconcile.py) */
.rc-filters, .rc-pick-run { margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
form.inline label.rc-check { flex-direction: row; align-items: center; gap: 6px; }
.rc-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.rc-hot .n { color: var(--bad); }
.rc-table td { vertical-align: top; }
.rc-table tr.rc-first td { border-top: 2px solid var(--steel-200); }
.rc-table tr.rc-line:not(.rc-first) td { border-top: 1px dashed var(--steel-100); }
.rc-table .sub { display: block; font-size: 12px; color: var(--steel-600); }
.rc-lease td, .rc-ours td { color: var(--muted); }
.rc-red { color: var(--bad); font-weight: 600; }
.rc-sub td { background: var(--steel-50); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--steel-700); }
.rc-verdict { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rc-same { background: var(--state-available); color: var(--navy-deep); }
.rc-diff { background: #fff3cd; color: #7a5a00; border: 1px solid #e6c766; }
.rc-steps { font-size: 12px; white-space: nowrap; }
.rc-pick, .rc-place, .rc-act { margin-top: 4px; }
.rc-act summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.rc-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 8px 0 20px; padding: 10px 14px; background: var(--steel-50); border: 1px solid var(--steel-100); font-size: 13px; color: var(--steel-700); }
.rc-would, .rc-damages, .rc-docs, .rc-balanced { margin-bottom: 16px; }
.rc-dmg-row { align-items: flex-start; flex-wrap: wrap; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-note { width: 260px; min-width: 0; padding: 3px 6px; font-size: 12px; }
@media (max-width: 700px) { .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the Rig page's current-run line with its Job link (board step 5) */
.run-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.run-line a { font-size: 12px; font-weight: 600; }

/* the Job page (app/routers/jobs.py, board step 5): money first, the problems, the jars' flows, the wells folded */
h1.jp-title { font-size: 28px; overflow-wrap: anywhere; }
.jp-title .mono { font-family: var(--font-mono); }
.jp-rate { font-size: 13px; }
.jp-pill { display: inline-block; padding: 2px 10px; border: 1.5px solid currentColor; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.jp-pill-new { color: var(--steel-600); }
.jp-pill-staged { color: var(--navy-deep); border-style: dashed; }
.jp-pill-out { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.jp-pill-back { color: var(--blue-800); }
.jp-pill-billing { color: var(--warn); }
.jp-pill-paid { background: var(--state-available); border-color: var(--state-available); color: var(--navy-deep); }
.jp-tabs { display: flex; gap: 4px; margin: -8px 0 16px; border-bottom: 1px solid var(--steel-200); }
.jp-tab { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--steel-600); }
.jp-tab:hover { color: var(--blue-700); text-decoration: none; }
.jp-tab-on { color: var(--navy-deep); box-shadow: inset 0 -3px 0 var(--blue-700); }
.jp-tab-off, .jp-tab-off:hover { color: var(--steel-400); cursor: default; }
.jp-later { font-size: 11px; font-weight: 500; }
.kpis.jp-money { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
.jp-money .n { font-size: 20px; }
.jp-money .n.jp-quiet { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--steel-600); }
.kpi.jp-hot { background: var(--red-100); }
.jp-hot .l, .jp-hot .n { color: var(--bad); }
.jp-problems { margin-bottom: 20px; }
.section .row.jp-problem { flex-wrap: wrap; align-items: flex-start; }
.jp-age { flex: 0 0 44px; padding-top: 2px; font-size: 12px; }
.jp-amt { font-weight: 600; white-space: nowrap; }
.jp-dismiss { flex: 0 0 auto; font-size: 12px; }
.jp-dismiss summary { color: var(--muted); }
.jp-dismiss form { margin-top: 4px; }
.jp-why { width: 170px; min-width: 0; padding: 3px 6px; font-size: 12px; }
.jp-red { color: var(--bad); font-weight: 600; }
/* a jar's trip: the six-step flow (✓ navy done, ● blue now, – dashed n/a), Authority's lines under it */
.jp-jar { margin-bottom: 10px; padding: 12px 16px; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; }
.jp-jar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.jp-serial { font-weight: 700; }
.jp-trip { font-size: 13px; color: var(--steel-700); }
.jp-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.jp-step { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: 12px; color: var(--steel-600); }
.jp-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1.5px solid var(--steel-200); border-radius: 50%; background: #fff; font-size: 12px; color: var(--steel-400); }
.jp-done { color: var(--text-strong); }
.jp-done .jp-glyph { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.jp-now .jp-glyph { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); }
.jp-now .jp-label { color: var(--blue-800); }
.jp-na { color: var(--steel-400); }
.jp-na .jp-glyph { border-style: dashed; }
.jp-todo .jp-glyph { border-color: var(--steel-200); }
.jp-early .jp-glyph { border: 2px solid var(--navy-deep); }
.jp-label { font-weight: 700; }
.jp-date { font-size: 11px; }
.jp-text { font-size: 11px; overflow-wrap: anywhere; }
.jp-ap { margin-top: 10px; font-size: 13px; }
.jp-ap td { vertical-align: top; }
.jp-ours td { color: var(--muted); }
.jp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.jp-pick-ask { font-size: 12px; color: var(--bad); }
.jp-pick button.jp-pick-on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.jp-stray { margin-bottom: 16px; }
/* a well of the run, folded: the days reports on the left, the sheet and the invoices on the right */
.jp-well { margin-bottom: 10px; background: #fff; border: 1px solid var(--steel-200); border-radius: 4px; }
.jp-well[open] { border-color: var(--blue-700); }
.jp-well-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; color: var(--text-strong); }
.jp-ident { font-size: 12px; color: var(--steel-700); overflow-wrap: anywhere; }
.jp-stage { padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--blue-800); }
.jp-well-money { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--steel-700); }
.jp-well-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; padding: 0 16px 14px; border-top: 1px solid var(--steel-100); }
.jp-well-left, .jp-well-right { min-width: 0; padding-top: 12px; }
.jp-h3 { margin: 0 0 6px; font-size: 13px; }
.jp-sheet { margin-bottom: 6px; font-size: 12px; }
.jp-chip { display: inline-block; padding: 1px 6px; border-radius: 2px; background: var(--steel-100); font-size: 11px; font-weight: 600; color: var(--steel-700); white-space: nowrap; }
.jp-chip-billed { background: var(--state-available); color: var(--navy-deep); }
.jp-chip-to_bill { background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-800); }
.jp-chip-blocked { background: #fff3cd; color: #7a5a00; }
.jp-chip-absorbed, .jp-chip-skip { background: transparent; color: var(--muted); }
.jp-links { margin: 6px 0 12px; font-size: 13px; font-weight: 600; }
.jp-inv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--steel-100); font-size: 13px; }
.jp-ticks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.jp-tick { padding: 1px 6px; border: 1px solid var(--steel-200); border-radius: 10px; font-size: 10px; color: var(--steel-400); }
.jp-tick-on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.jp-tick-on.jp-tick-bad { background: var(--bad); border-color: var(--bad); }
/* the days reports (step 3's usage markup and forms), now inside the well folds */
.jp-usage { margin: 0 0 12px; }
.jp-u-head { margin: 0 0 6px; }
.jp-u-diff, .jp-u-meta { margin: 0 0 8px; }
form.inline.jp-u-line { flex-wrap: nowrap; white-space: nowrap; }
.jp-u-assign { margin: 8px 0; }
.jp-u-jars { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.jp-u-revise { margin-top: 6px; }
.jp-days { width: 64px; min-width: 0; }
.jp-days-wide { width: 70px; min-width: 0; }
.jp-serial-input { width: 130px; min-width: 0; }
.jp-reason { width: 280px; min-width: 0; }
.jp-reason-short { width: 200px; min-width: 0; }
.jp-ref { width: 120px; min-width: 0; }
.jp-inline { display: inline; }
.jp-gap { margin-left: 8px; }
.jp-small { font-size: 12px; }
.jp-plain { font-weight: normal; }
.jp-act-sum { font-size: 12px; }
/* below the fold: the record as it was */
.jp-more { margin-top: 28px; }
.jp-more > summary { padding: 10px 14px; background: var(--steel-50); border: 1px solid var(--steel-200); border-radius: 4px; font-weight: 600; }
@media (max-width: 1100px) {
  .kpis.jp-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-well-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .kpis.jp-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-well-money { margin-left: 0; }
  .jp-reason { width: 100%; }
}

/* the cockpit at / (app/routers/cockpit.py, board step 13): the head line, five tiles, the problems beside what arrived
   and the turnaround, then the runs; on a phone the problems come first and their buttons take the width */
.ck { display: flex; flex-direction: column; gap: 20px; }
.ck .page-head { margin-bottom: 0; }
.ck-line strong { color: var(--text-strong); }
.kpis.ck-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ck-tiles .n { font-size: 20px; }
.ck-tiles .n.ck-quiet { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--steel-600); }
.kpi.ck-hot { background: var(--red-100); }
.ck-hot .l, .ck-hot .n { color: var(--bad); }
.ck-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.ck-side { display: flex; flex-direction: column; gap: 20px; }
.ck-group { border-bottom: 1px solid var(--steel-100); }
.ck-group:last-child { border-bottom: 0; }
.ck-run { padding: 10px 18px 2px; font-size: 12px; font-weight: 700; color: var(--steel-700); }
.ck-run.ck-red, .ck-run.ck-red a { color: var(--bad); }
.section .row.ck-problem { flex-wrap: wrap; align-items: flex-start; }
.ck-age { flex: 0 0 44px; padding-top: 2px; font-size: 12px; }
.ck-amt { font-weight: 600; white-space: nowrap; }
.ck-problem.ck-red .grow, .ck-problem.ck-red .ck-amt { color: var(--bad); }
.ck-dismiss { flex: 0 0 auto; font-size: 12px; }
.ck-dismiss summary { color: var(--muted); }
.ck-dismiss form { margin-top: 4px; }
.ck-why { width: 170px; min-width: 0; padding: 3px 6px; font-size: 12px; }
.ck-runs-head, .ck-run-row { display: grid; grid-template-columns: 150px 140px 84px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 10px 18px; }
.ck-runs-head.ck-money, .ck-run-row.ck-money { grid-template-columns: 140px 120px 80px minmax(0, 1fr) 96px 96px 96px minmax(0, 1.2fr); }
.ck-runs-head { background: var(--steel-50); font-size: 12px; font-weight: 600; color: var(--steel-700); }
.ck-run-row { border-bottom: 1px solid var(--steel-100); border-left: 4px solid var(--navy-deep); color: inherit; }
.ck-run-row:hover { background: var(--blue-50); color: inherit; text-decoration: none; }
.ck-run-row.ck-red { border-left-color: var(--bad); }
.ck-run-row.ck-red .ck-prob { color: var(--bad); }
.ck-rig { display: flex; flex-direction: column; min-width: 0; }
.ck-rig-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy-deep); }
.ck-client { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ck-prob { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ck-n { font-weight: 700; }
@media (max-width: 1100px) {
  .kpis.ck-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-cols { grid-template-columns: 1fr; }
  .ck-runs-head { display: none; }
  .ck-run-row, .ck-run-row.ck-money { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 700px) {
  .ck-cols { display: contents; }
  .ck .page-head { order: -2; }
  .ck-problems { order: -1; }
  .kpis.ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section .row.ck-problem .btn.ck-btn { flex: 1 1 100%; width: 100%; min-height: 44px; padding: 11px 12px; }
  .ck-dismiss { flex: 1 1 100%; }
}

/* the Job page's Timeline tab (app/routers/timeline.py, board step 13): one row per event, a report's or an invoice's
   lines indented under it; a flagged row is money nothing claims */
.kpis.tl-open { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.tl-open .n { font-size: 20px; }
.kpi.tl-hot { background: var(--red-100); }
.tl-hot .l, .tl-hot .n { color: var(--bad); }
.tl-wrap { margin-top: 12px; }
.tl-table td { vertical-align: top; }
.tl-date { white-space: nowrap; }
.tl-what { font-weight: 600; white-space: nowrap; }
.tl-child td { border-top: 0; font-size: 13px; color: var(--steel-700); }
.tl-child .tl-what { padding-left: 22px; font-weight: 500; }
.tl-rule { font-size: 12px; color: var(--steel-600); }
.tl-neg { color: var(--warn); }
.tl-flag td { background: var(--red-100); }
.tl-flag-word { display: inline-block; padding: 0 6px; border-radius: 2px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
@media (max-width: 700px) { .kpis.tl-open { grid-template-columns: 1fr; } }