/* IBS Project Tracker: Procore-style app shell and widget dashboard in IBS colours.
   Brand colours sampled from inovus/IBS site: indigo #3A4386, ring teal #1AB8B3, ring green #7FDF9A. */

@font-face {
  font-family: "Raleway";
  src: url("fonts/raleway-latin-var.e401cae7a129.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* The INOVUS website colours, light (spec 2026-10-20 section 8.8; sample approved by the owner 2026-10-20). Token names
   are kept from the earlier themes, so every rule keeps working: --ibs-indigo is the website's indigo, --ibs-teal the
   primary action (now indigo too), --ibs-green the green of "on track" and done. Text colours meet WCAG AA on every
   surface they sit on (tests/test_colours.py). */
:root {
  /* brand */
  --ibs-indigo: #364191;
  --ibs-indigo-ink: #30397b;
  --ibs-indigo-soft: #eaedff; /* the website's tint: selected rows, the active menu entry */
  --ibs-indigo-line: #c9cef2;
  --ibs-indigo-brand: #364191;
  --ibs-blue: #4fa6d5; /* the website's blue: fills and the map's highlight; text uses --link */
  --ibs-teal: #364191; /* primary buttons */
  --ibs-teal-hover: #30397b;
  --ibs-green: #6ec083; /* fills: bars, done; text uses --ok */
  --on-teal: #ffffff;
  --link: #236d94;
  --link-hover: #1c5573;
  --focus: #236d94;
  --focus-on-bar: #ffffff;
  --ok: #2e6b3e; --ok-bg: #e3f8ea; --ok-line: #b5e6c4;

  /* shell: the indigo band of the website */
  --side-bg: #364191;
  --side-ink: #eaedff;
  --side-ink-strong: #ffffff;
  --side-hover: rgba(255, 255, 255, 0.12);
  --side-active: #eaedff;
  --side-active-ink: #364191;
  --side-line: rgba(255, 255, 255, 0.14);

  /* surfaces and ink */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7fb; /* panels */
  --ink: #444444;
  --ink-strong: #1c2025;
  --ink-2: #5a5f69;
  --ink-3: #62676e;
  --line: #e4e7ef;
  --line-2: #cdd2e0;
  --line-field: #7c8297; /* input borders: 3:1 on white */
  --row-hover: #f0f2f9;

  /* attention tiers (status palette: fixed, always paired with a label); text uses the darker tones */
  --tier-act: #d03b3b;
  --tier-check: #b87a00;
  --tier-unreported: #7c8297;
  --tier-clear: #6ec083;
  --tier-clear-ring: #3e8e57;
  --act: #b4382a; --act-bg: #fdebe8; --act-line: #f3b9b1;
  --check: #7a4f00; --check-bg: #fff4d6; --check-line: #f2d38a;

  /* activity statuses on a light page */
  --act-done: #364191;
  --act-in_progress: #4fa6d5;
  --act-upcoming: #cdd2e0;
  --act-hold: #d97f72;
  --act-delayed: #d03b3b;
  --act-other: #e4e7ef;

  /* map */
  --map-sea: #f6f7fb;
  --map-land: #e4e8f4;
  --map-coast: #b9c0e0;
  --prov: #9aa3d6;
  --prov-hi: #4fa6d5;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 32, 37, 0.06);
  --shadow-pop: 0 12px 32px rgba(28, 32, 37, 0.14), 0 2px 6px rgba(28, 32, 37, 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Raleway", var(--font);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ibs-teal); color: var(--on-teal); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.topbar :focus-visible { outline-color: var(--focus-on-bar); }
code { font: 0.92em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.05em 0.35em; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- app shell --------------------------------------------------------- */

body.has-shell { min-height: 100vh; background: var(--bg); }

.topbar {
  position: sticky; top: 0; z-index: 700;
  display: flex; align-items: center; gap: 8px;
  height: 60px; padding: 0 24px;
  background: var(--side-bg); color: var(--side-ink);
  border-bottom: 1px solid var(--side-line);
}
.brand { display: flex; flex: none; align-items: baseline; gap: 8px; padding: 0 20px 0 0; color: var(--side-ink-strong); text-decoration: none; }
.brand:hover { color: var(--side-ink-strong); }
.brand-mark { font-family: var(--font-brand); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
.brand-name { font-family: var(--font-brand); font-weight: 600; font-size: 14px; color: var(--side-ink); }

/* The tabs never push the bar past the screen (the owner, 2026-11-01: "fix the ui bug in phone"): the brand and the
   buttons stay put, and tabs that do not fit scroll sideways. */
.nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav > * { flex: none; }
.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--side-ink);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 120ms, color 120ms;
}
.nav a:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.nav a[aria-current="page"] { background: var(--side-active); color: var(--side-active-ink); }
.nav a[aria-current="page"] .icon { color: var(--side-active-ink); }
/* An entry's sections (Admin's and Management's Purchasing; the owner, 2026-10-31): a tinted bar joined under the top
   bar. Procurement's Purchasing pages keep it open (frontend/src/app/TopBar.tsx); here it slides down while the pointer
   or keyboard focus is on the entry, and the entry joins it like a tab. */
.topbar { --bar-h: 60px; }
.nav { align-self: stretch; align-items: center; }
.nav-group { align-self: stretch; display: flex; align-items: center; }
.nav-group > a { position: relative; }
.nav-group > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc((var(--bar-h) - 100%) / 2); }
.nav-group:hover > a, .nav-group:focus-within > a { background: var(--side-active); color: var(--side-active-ink); border-radius: 8px 8px 0 0; }
.nav-group:hover > a .icon, .nav-group:focus-within > a .icon { color: var(--side-active-ink); }
.nav-group:hover > a::after, .nav-group:focus-within > a::after { background: var(--side-active); }
.subnav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 24px; overflow-x: auto;
  background: var(--side-active); box-shadow: 0 12px 24px rgba(28, 32, 37, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms ease-in 120ms, transform 150ms ease-in 120ms, visibility 0s linear 270ms;
}
.nav-group:hover > .subnav, .nav-group:focus-within > .subnav {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s;
}
.nav .subnav a { flex: none; gap: 6px; padding: 6px 12px; border-radius: 6px; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.nav .subnav a:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink-strong); }
.subnav-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--side-bg); color: var(--side-ink-strong); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .subnav { transform: none; transition: none; } }
@media (max-width: 900px) { .topbar { --bar-h: 56px; } .subnav { padding: 0 12px; } }
@media (max-width: 767px) { .subnav { display: none; } }
/* The current tab's sub-tabs, docked under the top bar on the tracker's pages as on procurement's (the owner,
   2026-11-01: tabs by department, the Dashboard a sub-tab of Projects). */
.subbar {
  position: sticky; top: var(--bar-h, 60px); z-index: 690;
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 24px; overflow-x: auto;
  background: var(--side-active); border-bottom: 1px solid var(--side-line);
}
.subbar a { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; color: var(--ink-2);
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 120ms, color 120ms; }
.subbar a:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink-strong); }
.subbar a[aria-current="page"] { background: #fff; color: var(--side-active-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 32, 37, 0.08); }
@media (max-width: 900px) { .subbar { top: 56px; padding: 0 12px; } }

.top-end { margin-left: auto; flex: none; display: flex; align-items: center; gap: 18px; }
/* Raise a PR: the bar's one filled button, for everyone who makes PRs (the owner, 2026-10-30). */
.raise-pr-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border-radius: 8px;
  font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none;
  color: var(--side-active-ink); background: var(--side-active); transition: background-color 120ms;
}
.raise-pr-btn .icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.25; fill: none; }
.raise-pr-btn:hover { background: #ffffff; }
.raise-pr-btn:focus-visible { outline: 2px solid var(--focus-on-bar); outline-offset: 2px; }
.top-end .chat-btn { margin-right: 6px; }
.top-data { margin: 0; display: grid; font-size: 12px; line-height: 1.3; }
.top-label { color: var(--side-ink); }
.top-data time { color: var(--side-ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.top-user { display: flex; align-items: center; gap: 10px; }
.top-user form { margin: 0; }
.top-name { color: var(--side-ink-strong); font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--ibs-green); color: var(--ink-strong); font-weight: 700; font-size: 13px;
}
.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: none; color: var(--side-ink); cursor: pointer;
}
.icon-btn:hover { background: var(--side-hover); color: var(--side-ink-strong); }
/* The name menu (base.html): the setup pages and Sign out under the person's name. */
.user-menu { position: relative; }
.user-menu > summary {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px;
  color: var(--side-ink); cursor: pointer; list-style: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--side-hover); }
.user-menu-caret { width: 16px; height: 16px; }
.user-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 200px; padding: 6px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 24, 60, 0.16);
}
.user-menu-list form { margin: 0; }
.user-menu-list a, .user-menu-list button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-strong); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.user-menu-list a:hover, .user-menu-list button:hover { background: var(--ibs-indigo-soft); }

.main { min-width: 0; display: flex; flex-direction: column; }
.pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px;
  padding: 28px 32px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
h1 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  text-wrap: balance;
}
h1 .code { font-family: var(--font); font-size: 0.62em; font-weight: 650; color: var(--ink-2); vertical-align: 0.18em; margin-right: 6px; }
.pagehead-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 72ch; }
.pagehead-meta { margin: 0; color: var(--ink-3); font-size: 13px; }
.pagehead-meta time { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pagehead-actions { margin: 10px 0 0; }
.pagehead-actions .btn { margin: 0; }
.pagehead-form { display: inline; margin: 0; }
.crumb { margin: 0 0 6px; font-size: 13px; color: var(--ink-3); }

.content { padding: 24px 32px 8px; max-width: 1480px; width: 100%; margin: 0 auto; }
.content:has(.stage) { max-width: none; }
.foot { padding: 8px 32px 28px; color: var(--ink-3); font-size: 12.5px; max-width: 1480px; margin: 0 auto; width: 100%; }

.banner { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.banner-warn { background: var(--check-bg); border-color: var(--check-line); color: var(--check); }

/* ---- cards ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 20px 12px; }
h1, h2, .brand-mark, .brand-name, .signin-brand { font-variant-numeric: lining-nums; }
h2 { margin: 0; font-family: var(--font-brand); font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ink-strong); }
.card-link { font-size: 13px; font-weight: 550; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-flag { font-size: 12.5px; color: var(--ink-3); }
.card-empty { margin: 0; padding: 4px 20px 20px; color: var(--ink-3); }
.card-foot { margin: 0; padding: 12px 20px 16px; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--line); }

/* ---- the spine and the counts: a proportional bar per attention tier, the count in Raleway.
   Tier words always sit beside the colour (Spoken Status Rule). */

.spine { position: relative; display: flex; gap: 3px; height: 10px; margin-bottom: 22px; overflow: hidden; border-radius: 5px; }
.spine-seg { flex: var(--n) 1 0; min-width: 6px; border-radius: 5px; transform-origin: left center; }
.spine-seg[data-tier="act"] { background: var(--tier-act); }
.spine-seg[data-tier="check"] { background: var(--tier-check); }
.spine-seg[data-tier="unreported"] { background: var(--tier-unreported); }
.spine-seg[data-tier="clear"] { background: var(--tier-clear); }
.lane-count { font-family: var(--font-brand); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums proportional-nums; }
.tier-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tier-dot.tier-act { background: var(--tier-act); }
.tier-dot.tier-check { background: var(--tier-check); }
.tier-dot.tier-unreported { background: var(--tier-unreported); }
.tier-dot.tier-clear { background: var(--tier-clear); box-shadow: inset 0 0 0 1px var(--tier-clear-ring); }

/* ---- dashboard: the map is the stage, panels float on it ---------------------------------- */

.stage {
  position: relative; height: clamp(500px, calc(100vh - 340px), 720px);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--map-sea);
}
.stage .map { position: absolute; inset: 0; border: 0; border-radius: 0; }
.float { position: absolute; z-index: 500; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.f-title { left: 16px; top: 16px; padding: 12px 18px; }
.f-title h1 { font-size: 24px; color: var(--ink); }
.f-title .meta { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.f-key { left: 16px; bottom: 16px; margin: 0; padding: 8px 12px; }
.stage .leaflet-top.leaflet-left { top: 196px; margin-left: 4px; }
.stage .leaflet-top.leaflet-right { right: 436px; }
.content:has(.room) { padding: 0; }
.stage.room { height: calc(100vh - 60px); min-height: 560px; border: 0; border-radius: 0; }
.f-title { display: grid; gap: 10px; min-width: 320px; }
.f-title .meta { margin-top: -6px; }
.r-counts { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px; }
.r-count { display: grid; padding: 4px 6px 2px; margin: -4px -6px -2px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.r-count:hover { background: var(--row-hover); color: var(--ink); }
.r-count[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ibs-teal); }
.r-word { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.r-count .lane-count { font-size: 34px; line-height: 1.05; }
.r-act .lane-count { color: var(--act); }
.lane-total { font-size: 12px; color: var(--ink-3); }
.f-title .spine { height: 6px; margin: 0; border-radius: 3px; }
.f-title .filterbar { margin: 0; padding: 6px 8px; }
.f-rail { right: 20px; top: 20px; bottom: 20px; width: 400px; display: flex; flex-direction: column; overflow: hidden; }
.rail-head { padding: 12px; border-bottom: 1px solid var(--line); }
.rail-head .teamchips { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.rail-head .teamchips[hidden] { display: none; }
.rail-head .team-chip { flex: 1; min-height: 34px; border: 0; border-radius: 7px; white-space: nowrap; }
.rail-head .team-chip[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.rail-head .team-chip .n { color: var(--ink-3); font-weight: 500; }
.stage.room .f-title { left: 20px; top: 20px; }
.stage.room .f-key { left: 20px; bottom: 20px; }

/* ---- job drawer ------------------------------------------------------------------------------------ */
[hidden] { display: none !important; }
.drawer {
  position: fixed; top: 60px; right: 0; bottom: 0; z-index: 1500; width: 400px; max-width: 100vw;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform 320ms var(--ease-out);
}
.drawer.is-open { transform: none; }
.drawer-close { position: sticky; top: 10px; align-self: flex-end; flex: none; margin: 10px 10px -46px 0; z-index: 2; background: var(--surface); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.drawer-close:hover { background: var(--row-hover); color: var(--ink); }
.drawer-body { padding: 20px 20px 28px; }
.drawer-skel, .drawer-msg { margin: 0 0 8px; color: var(--ink-2); font-weight: 600; }
.panel-head { padding-right: 36px; }
.panel-code { margin: 0 0 2px; color: var(--ink-2); font-weight: 650; font-size: 12.5px; }
.drawer-title { font-size: 20px; line-height: 1.25; color: var(--ink); }
.drawer-title:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 4px; }
.panel-tier { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 600; color: var(--ink-2); }
.panel-chips { margin: 8px 0 0; }
.panel-facts { display: grid; gap: 12px; margin: 18px 0 0; }
.panel-facts div { display: grid; gap: 2px; }
.panel-facts dt { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.panel-facts dd { margin: 0; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.panel-facts .rel { color: var(--ink-3); font-size: 12.5px; }
.panel-report { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.panel-report h3 { margin: 0 0 6px; font: 700 13.5px var(--font-brand); color: var(--ibs-indigo); }
.panel-report-meta, .panel-report-people { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; }
.panel-report-people { color: var(--ink); font-weight: 600; }
.panel-lines { margin: 8px 0 4px; padding-left: 16px; list-style: disc; color: var(--ink); overflow-wrap: anywhere; }
.panel-lines li { margin: 0 0 4px; }
.panel-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; list-style: none; padding: 0; }
.panel-photos img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.panel-open { margin: 22px 0 0; }
.chip-fresh { background: transparent; border-color: var(--ibs-teal); color: var(--ibs-teal); }
.job-pin.is-selected .dot { transform: scale(1.5); }
@media (max-width: 1240px) {
  .drawer { top: auto; left: 0; width: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 14px 14px 0 0; transform: translateY(100%); }
  .drawer.is-open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* ---- filters ---------------------------------------------------------------------------------------- */
.teamchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.team-chip { font: 600 12.5px var(--font); min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 140ms, color 140ms, border-color 140ms; }
.team-chip:hover { border-color: var(--ibs-indigo); color: var(--ibs-indigo-ink); }
.team-chip[aria-pressed="true"] { background: var(--ibs-teal); border-color: var(--ibs-teal); color: var(--on-teal); }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fchip { font: 600 12.5px var(--font); min-height: 30px; padding: 0 10px; border: 1px solid var(--ibs-indigo-line); border-radius: 999px; background: var(--ibs-indigo-soft); color: var(--ibs-indigo-ink); cursor: pointer; }
.fchip:hover { border-color: var(--ibs-indigo); }
.fnote { color: var(--ink-3); font-size: 12.5px; }
.fclear { margin-left: auto; font: 600 12.5px var(--font); min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ibs-indigo); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.job-pin.is-dim { opacity: 0.28; }
.job-pin.is-dim.is-linked, .job-pin.is-dim.is-selected { opacity: 1; }
.filter-empty { padding-top: 12px; }

/* ---- pins: size wrapper, spark, Manpower mode ------------------------------------------------------------ */
.job-pin .sz { position: absolute; inset: 0; transform: scale(var(--pin-scale, 1)); transition: transform 240ms var(--ease-out), opacity 200ms; }
.job-pin .spark { position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ibs-teal); border: 1.5px solid var(--bg); }
.motion-ready .job-pin .spark { animation: spark-in 700ms var(--ease-out) both; animation-delay: calc(var(--pin-base, 0ms) + var(--d, 0ms) + 200ms); }
@keyframes spark-in { from { transform: scale(0); } 60% { transform: scale(1.7); } to { transform: scale(1); } }
.pins-manpower .job-pin:not(.is-fresh) .sz { transform: scale(0.55); opacity: 0.5; }
.map-tip-fresh { color: var(--ibs-teal); font-weight: 600; }
.map-pinmode { display: flex; gap: 2px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }
.map-pinmode button { font: 600 12px var(--font); padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.map-pinmode button[aria-pressed="true"] { background: var(--ibs-teal); color: var(--on-teal); }
@media (prefers-reduced-motion: reduce) { .job-pin .sz { transition: none; } .motion-ready .job-pin .spark { animation: none; } }

/* the job list beside the map: every job, grouped by tier, urgent first */
.rail-list { flex: 1; list-style: none; margin: 0; padding: 0 0 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rail-list .grp-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 18px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 650; letter-spacing: 0.02em; border-top: 1px solid var(--line); }
.rail-list .grp-h:first-child { border-top: 0; }
.rail-list .grp-h .n { margin-left: auto; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.rail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "job pct" "chips chips"; align-items: center; gap: 4px 12px; padding: 11px 18px; border-top: 1px solid var(--line); transition: background-color 160ms; }
.grp-h + .rail-row { border-top: 0; }
.rail-row.is-linked, .rail-row.is-selected { background: var(--ibs-indigo-soft); }
.rail-row.is-selected .code { color: var(--ibs-teal); }
.action-job { grid-area: job; display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-width: 0; }
.action-job .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.action-job:hover .name, .rail-row.is-linked .action-job .name { color: var(--ibs-indigo); }
.action-job:hover .name { text-decoration: underline; }
.action-chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; padding-left: 18px; }
.chip-more { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.action-pct { grid-area: pct; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 550; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meter { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; background: var(--act-done); }


/* map */
.map.leaflet-container, .leaflet-container { font: 13px/1.4 var(--font); background: var(--map-sea); }
.map.map-failed { display: grid; place-items: center; color: var(--ink-3); }
.map-key { list-style: none; display: grid; gap: 4px; color: var(--ink-2); font-size: 12px; }
.map-key li { display: flex; align-items: center; gap: 8px; }
.pin-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.pin-key.pin-act { background: var(--tier-act); } .pin-key.pin-check { background: var(--tier-check); }
.pin-key.pin-unreported { background: var(--tier-unreported); } .pin-key.pin-clear { background: var(--tier-clear); }
.pin-key.pin-hollow { background: var(--surface); border: 2.5px solid var(--ink-3); box-shadow: none; }
.pin-key.pin-shade { border-radius: 3px; background: color-mix(in srgb, var(--tier-act) 45%, transparent); border: 1px solid var(--prov); box-shadow: none; }
.map-note { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; }
.leaflet-container .leaflet-control-attribution { font-size: 11.5px; background: transparent !important; color: var(--ink-3); }
.leaflet-container .leaflet-control-attribution a { color: var(--ink-3); }
.leaflet-bar { border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--row-hover); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--ink-3); }
.leaflet-tooltip.map-tip { padding: 8px 10px; border: 0; border-radius: 8px; box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); }
.map-tip::before { display: none; }
.map-tip div { display: grid; gap: 2px; max-width: 260px; white-space: normal; }
.map-tip span { color: var(--ink-2); }
.map-tip .map-tip-place { color: var(--ink-3); font-size: 12px; }
.map-views { display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); }
.map-views button { font: 600 12px var(--font); padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.map-views button:hover { background: var(--ibs-indigo-soft); color: var(--ibs-indigo-ink); }

/* provinces (border territories): thin lines, a wash of the most urgent tier inside, lit on hover or link */
.prov { cursor: default; transition: fill-opacity 200ms, stroke 200ms, stroke-width 200ms; }
.motion-first .prov-fade { animation: prov-in 900ms var(--ease-out) both 700ms; }
@keyframes prov-in { from { opacity: 0; } to { opacity: 1; } }

/* pins (Leaflet divIcons) */
.job-pin { background: none; border: 0; }
.job-pin .dot {
  position: absolute; inset: 3px; border-radius: 50%;
  background: var(--pin); border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(28, 32, 37, 0.35);
  transition: transform 180ms var(--ease-out);
}
.job-pin.is-unconfirmed .dot { background: var(--surface); border: 3px solid var(--pin); }
.job-pin.tier-act { --pin: var(--tier-act); } .job-pin.tier-check { --pin: var(--tier-check); }
.job-pin.tier-unreported { --pin: var(--tier-unreported); } .job-pin.tier-clear { --pin: var(--tier-clear); }
.job-pin .ring { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--pin); opacity: 0; pointer-events: none; }
.map.is-linking .job-pin:not(.is-linked) { opacity: 0.28; }
.job-pin { transition: opacity 180ms; }
.job-pin.is-linked { z-index: 1000 !important; }
.job-pin.is-linked .dot { transform: scale(1.5); }


/* table twins (accessibility view of each chart) */
.twin { margin: 14px 20px 16px; }
.twin summary { cursor: pointer; color: var(--ibs-indigo); font-size: 13px; font-weight: 550; width: max-content; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.twin summary::-webkit-details-marker { display: none; }
.twin summary::before { content: ""; width: 6px; height: 6px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); transition: transform 160ms var(--ease-out); }
.twin[open] summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.twin-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.twin-table th, .twin-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 400; }
.twin-table thead th { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.twin-table tbody th { font-weight: 600; }

/* chart tooltip */
.tip {
  position: fixed; left: 0; top: 0; z-index: 50;
  display: grid; gap: 1px;
  padding: 8px 10px;
  background: var(--ibs-indigo-ink);
  color: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  font-size: 12.5px;
  max-width: 280px;
}
.tip[hidden] { display: none; }
.tip-value { font-weight: 650; font-size: 13.5px; }
.tip-label { color: rgba(255, 255, 255, 0.78); }

/* ---- tabs with counts (reports inbox) ------------------------------------ */

.tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px 11px; margin-bottom: -1px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ibs-indigo); border-bottom-color: var(--ibs-indigo); }
.count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.seg.seg-done { background: var(--act-done); }
.seg.seg-in_progress { background: var(--act-in_progress); }
.seg.seg-upcoming { background: var(--act-upcoming); }
.seg.seg-hold { background: var(--act-hold); }
.seg.seg-delayed { background: var(--act-delayed); }
.seg.seg-other { background: var(--act-other); }

.code { font-weight: 650; font-size: 13px; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.action-job .code { flex: none; }
.name { font-weight: 500; }
.sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }

.chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 18px; white-space: nowrap; border: 1px solid transparent; }
.chip-late, .chip-hold, .chip-delayed { background: var(--act-bg); border-color: var(--act-line); color: var(--act); }
.chip-conflict, .chip-completed_open, .chip-no_report, .chip-delivery_late { background: var(--check-bg); border-color: var(--check-line); color: var(--check); }
.chip-unreported { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
.chips { margin: 10px 0 0; }
.nil { color: var(--ink-3); }
.stack { display: flex; width: min(132px, 100%); height: 8px; margin-bottom: 4px; border-radius: 2px; overflow: hidden; background: var(--line); gap: 1px; }
.seg { display: block; height: 100%; min-width: 2px; }


/* ---- projects: the list (owner, 2026-10-13) ------------------------------------------------------------
   One row per job, grouped by team, the jobs that need action first. The figure says where it comes from. */
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.find { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; }
.find .icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.find:has(input[hidden]) { display: none; }
.find input { width: 100%; min-height: 40px; padding: 0 12px 0 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 16px var(--font); }
.find input::placeholder { color: var(--ink-3); }
.find input:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: transparent; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-t { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 140ms, border-color 140ms; }
.tier-t:hover { background: var(--row-hover); color: var(--ink); }
.tier-t[aria-current="true"] { border-color: var(--ibs-indigo-line); background: var(--ibs-indigo-soft); color: var(--ink); }
.tier-t .n { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-team { margin-left: auto; }
.pl-team select { min-height: 40px; }
.pl { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pl li[hidden] { display: none; }
.pl-head, .pl-row { display: grid; grid-template-columns: 12px minmax(180px, 2fr) minmax(96px, 0.9fr) minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(150px, 1.5fr) 16px;
  gap: 16px; align-items: center; padding: 0 20px; }
.pl-row.no-report, .pl:has(.no-report) .pl-head { grid-template-columns: 12px minmax(180px, 2fr) minmax(96px, 0.9fr) minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(150px, 1.5fr) 16px; }
.pl-head { min-height: 34px; color: var(--ink-3); font-size: 12px; font-weight: 600; background: var(--surface-2); }
.pl-group { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 8px; border-top: 1px solid var(--line); background: var(--bg);
  color: var(--ibs-indigo); font-family: var(--font-brand); font-size: 14px; font-weight: 700; }
.pl-head + .pl-group { border-top: 0; }
.pl-group small { color: var(--ink-3); font-family: var(--font); font-size: 12.5px; font-weight: 400; }
.pl-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color 120ms; }
.pl-group + li .pl-row { border-top: 0; }
.pl-row:hover { background: var(--row-hover); }
.pl-row:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: -2px; }
.pl-row > * { min-width: 0; }
.pl-job .code { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; }
.pl-job b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pl-row > a { color: inherit; text-decoration: none; min-width: 0; }
.pl-row > a:hover { color: inherit; }
.pl-codes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; }
a.pl-code { color: var(--ibs-indigo); text-decoration: none; }
a.pl-code:hover { text-decoration: underline; }
a.pl-code.is-diff { color: var(--ink-2); font-weight: 600; }
.pl-code-sep { color: var(--ink-3); font-weight: 400; }
.pl-uncoded { color: var(--ink-3); font-size: 13px; font-weight: 400; }

.pl-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; }
.pl-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 3px; background: var(--act-done); }
.pl-bar.is-meas i { background: var(--ibs-green); }
.pl-pct { min-width: 42px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-src { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; }
.pl-src.is-meas { color: var(--ok); }
.pl-nil { color: var(--ink-3); font-size: 13px; }
.pl-due { font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-due.late { color: var(--act); font-weight: 600; }
.pl-due small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.pl-last { color: var(--ink-2); font-size: 13px; }
.pl-why { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-why .chip { margin: 0; }
.pl-go { width: 16px; height: 16px; color: var(--ink-3); }
.pl-none { padding: 18px 20px; color: var(--ink-3); }
@media (max-width: 900px) {
  .pl-team { margin-left: 0; }
  .pl-head { display: none; }
  .pl-row, .pl-row.no-report { grid-template-columns: 12px minmax(0, 1fr) 16px; grid-template-areas: "dot job go" ". codes codes" ". prog prog" ". due due" ". why why"; gap: 6px 10px; padding: 12px 16px; }
  .pl-row > .tier-dot { grid-area: dot; } .pl-job { grid-area: job; } .pl-go { grid-area: go; }
  .pl-codes { grid-area: codes; } .pl-prog { grid-area: prog; } .pl-due { grid-area: due; } .pl-why { grid-area: why; }
  .pl-due small { display: inline; margin-left: 6px; }
  .pl-last { display: none; }
  .pl-why:empty { display: none; }
  .pl-group { padding: 12px 16px 6px; }
}
@media (prefers-reduced-motion: reduce) { .pl-row, .tier-t { transition: none; } }

/* ---- job page, sign-in, empty ------------------------------------------- */

.facts { margin: 0; padding: 0 20px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.facts > div { padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.facts dd.src-path { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }

body.no-shell .main { min-height: 100vh; background: var(--surface-2); }
body.no-shell .content { margin: 0 auto; display: grid; place-items: center; min-height: 80vh; }
body.no-shell .foot { margin: 0 auto; text-align: center; color: var(--ink-3); }
.signin { width: min(400px, 100%); padding: 28px; }
.signin h1 { margin-top: 18px; }
.signin-brand { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-brand); font-weight: 600; color: var(--ink-2); }
.signin-brand .brand-mark { color: var(--ibs-indigo); }
.signin form { display: grid; gap: 6px; margin-top: 20px; }
.signin label { font-weight: 550; font-size: 13px; margin-top: 8px; }
.signin input, .signin select, .signin textarea { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line-field); border-radius: 6px; background: var(--surface); color: var(--ink); }
.signin input:focus-visible, .signin select:focus-visible, .signin textarea:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); }
.signin .form-error { margin: 2px 0 0; padding: 6px 10px; font-size: 13px; }
.signin .field-help { margin: 0; font-size: 12.5px; color: var(--ink-3, #5A5F69); }
.signin-alt { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.btn { margin-top: 16px; font: inherit; font-weight: 600; padding: 10px 14px; border-radius: 6px; border: 0; background: var(--ibs-teal); color: var(--on-teal); cursor: pointer; }
.btn:hover { background: var(--ibs-teal-hover); }
.form-error { margin: 16px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--act-bg); border: 1px solid var(--act-line); color: var(--act); overflow-wrap: anywhere; }
.empty-state { max-width: 620px; margin: 48px auto; padding: 28px; }
.empty-state p { color: var(--ink-2); max-width: 70ch; }

/* ---- reports: engineer screens (phone first) -----------------------------
   Submit report (paste), Check (one card per date, a Photos card, the send
   bar), Report sent and My reports. Controls are at least 44px tall and
   inputs use 16px text so phones do not zoom on focus. */

.report-page { display: grid; gap: 16px; max-width: 760px; }
.report-page > .banner, .report-page > .form-error { margin: 0; }
.report-confirm { overflow-wrap: anywhere; }
.report-confirm p { margin: 0; }
.report-confirm ul { margin: 6px 0; padding-left: 20px; }
.report-page .btn { margin-top: 0; }
.report-intro { margin: 0; color: var(--ink-2); max-width: 72ch; }
.report-check { display: grid; gap: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; transition: background-color 120ms, border-color 120ms, color 120ms; }
a.btn:hover { color: var(--on-teal); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-block { width: 100%; }
.btn-quiet { background: var(--surface); color: var(--ibs-indigo); border: 1px solid var(--line-2); }
.btn-quiet:hover, a.btn-quiet:hover { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo); color: var(--ibs-indigo-ink); }
/* A button with a leading icon, as Raise a PR (MCM programme phase 1, 2026-10-28). */
.btn-icon { gap: 7px; }
.btn-icon .icon { width: 18px; height: 18px; }

.form-error p { margin: 0; }
.form-error p + p, .form-error p + ul, .form-error ul + p { margin-top: 6px; }
.form-error ul { margin-bottom: 0; padding-left: 20px; }
.form-error a { color: var(--act); font-weight: 600; }

/* fields */
.report-step { padding: 20px; display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.field-static { margin: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 8px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-field); border-radius: 6px;
}
.input:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); }
.paste-box { min-height: 18em; resize: vertical; line-height: 1.45; }
.input-date { max-width: 220px; }
.hint { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.hint-restored { color: var(--ibs-indigo); font-weight: 550; }

/* segmented choice: shift, and the two readings of an ambiguous date */
.segments { display: flex; flex-wrap: wrap; gap: 8px; }
.segment { position: relative; display: inline-flex; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface);
  color: var(--ink-2); font-weight: 550; font-variant-numeric: tabular-nums;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.segment:hover span { border-color: var(--line-field); color: var(--ink); }
.segment input:checked + span { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo); color: var(--ibs-indigo); box-shadow: inset 0 0 0 1px var(--ibs-indigo); }
.segment input:focus-visible + span { outline: 2px solid var(--ibs-indigo); outline-offset: 2px; }

/* check: one card per date */
.report-card .card-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.report-num { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.report-body { display: grid; gap: 16px; padding: 0 20px 20px; min-width: 0; }
.report-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.report-notes li { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--check-line); background: var(--check-bg); color: var(--check); font-size: 13.5px; overflow-wrap: anywhere; }
.report-notes li.note-error { border-color: var(--act-line); background: var(--act-bg); color: var(--act); }
.manpower { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.manpower dt { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.manpower dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.manpower-sum { color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }

.report-sec h3 { margin: 0 0 8px; font-family: var(--font-brand); font-size: 13.5px; font-weight: 700; color: var(--ibs-indigo); font-variant-numeric: lining-nums; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.line {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  transition: border-color 160ms, background-color 160ms;
}
.line.is-moved { border-color: var(--ibs-indigo); background: var(--ibs-indigo-soft); }
.line-text {
  display: block; width: 100%; min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  resize: vertical; field-sizing: content; overflow-wrap: anywhere;
}
.line-text:hover { border-color: var(--line-2); }
.line-text:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); background: var(--surface); }
.line-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 4px 2px; }
.line-sec { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; }
.line-sec select {
  min-height: 44px; max-width: 100%; padding: 0 10px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer;
}
.line-sec select:hover { border-color: var(--line-field); }
.line-sec select:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); }
@media (min-width: 601px) {
  .line { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .line-foot { flex-direction: column; align-items: flex-end; padding: 0; }
}
.segments-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.segments-dates .segment span { width: 100%; justify-content: center; padding: 0 8px; }
.chip-moved { display: none; margin: 0; background: var(--surface); border-color: var(--ibs-indigo); color: var(--ibs-indigo); }
.line.is-moved .chip-moved { display: inline-block; }
@keyframes line-arrive { from { background-color: var(--ibs-indigo-soft); transform: translateY(-4px); } }
.line.is-arriving { animation: line-arrive 420ms var(--ease-out); }

/* photos */
.file-pick {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 16px; border: 1.5px dashed var(--line-field); border-radius: 8px;
  background: var(--surface-2); color: var(--ibs-indigo); font-weight: 600; cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}
.file-pick:hover { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo); }
.file-pick:focus-within { outline: 2px solid var(--ibs-indigo); outline-offset: 2px; }
.file-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.photo-list:empty { display: none; }
.photo {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb meta" "date date";
  align-items: center; gap: 2px 12px; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
}
.photo img { grid-area: thumb; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.photo img.is-broken { visibility: hidden; }
.photo-name { grid-area: name; align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.photo-meta { grid-area: meta; align-self: start; color: var(--ink-3); font-size: 12.5px; }
.photo-meta.is-warn { color: var(--check); }
.photo-date { grid-area: date; display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.photo-date select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; }

/* the send bar: sticky at the bottom of the phone screen while the form scrolls */
.send-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
@media (max-width: 600px) {
  .send-bar:not(.send-bar-static) {
    position: sticky; bottom: 0; z-index: 10;
    margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-pop); /* map overlay: it floats over the form */
  }
  .send-bar .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .send-bar-static { flex-direction: column-reverse; align-items: stretch; }
  .report-step { padding: 16px; }
  .report-body { padding: 0 16px 16px; }
}

/* report lists: Report sent, My reports */
.report-list { list-style: none; margin: 0; padding: 0; }
.report-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--line); }
.report-item:first-child { border-top: 0; }
.item-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.item-head, .item-meta { margin: 0; }
.item-head { overflow-wrap: anywhere; }
.item-meta { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.report-item .chips { margin: 2px 0 0; }
.report-item.is-replaced .item-head, .report-item.is-replaced .item-meta { color: var(--ink-3); }
.chip-submitted { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
.chip-reviewed { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo-soft); color: var(--ibs-indigo); }
.chip-replaced { background: var(--surface); border-color: var(--line-2); color: var(--ink-3); }
.pm-note { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.pm-note p { margin: 0; overflow-wrap: anywhere; }
.pm-note .pm-note-by { margin-bottom: 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
@media (max-width: 900px) {
  .report-item { padding: 14px 16px; }
  .report-item > .btn { flex: 1 1 100%; }
}

/* ---- reports: PM screens ---------------------------------------------------
   Reports inbox (tabs, job filter, one row per report), the report view
   (sections, photo grid, review, original paste), the Reports nav badge,
   flash banners, and the Site reports timeline on the job page. */

/* top bar: unreviewed count on the Reports item (the shell's one spark) */
.nav-badge {
  margin-left: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--ibs-teal); color: var(--on-teal); font-size: 11.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* flash messages after a review (warnings use .banner-warn; see MESSAGE_TAGS in tracker/settings.py) */
.banner-success { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo-line); color: var(--ibs-indigo-ink); }
.banner-error { background: var(--act-bg); border-color: var(--act-line); color: var(--act); }
.banner { overflow-wrap: anywhere; }
.banner a { color: inherit; font-weight: 600; }

/* inbox */
.inbox { max-width: 1040px; display: grid; gap: 0; }
.inbox-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.inbox-tabs { margin: 0; border-bottom: 0; }
.inbox-tabs .tab { min-height: 44px; }
.inbox-filter { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; min-width: 0; flex: 0 1 380px; }
.inbox-filter select { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; padding: 0 10px; cursor: pointer; }
.inbox-filter .btn { margin: 0; flex: none; }
.inbox-empty { margin: 0; max-width: none; }
.inbox-empty p + p { margin-top: 8px; }
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  padding: 14px 20px; border-top: 1px solid var(--line); transition: background-color 120ms;
}
.inbox-card { overflow: hidden; }
.inbox-row:first-child { border-top: 0; }
.inbox-row:hover, .inbox-row:focus-within { background: var(--row-hover); }
.inbox-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; overflow-wrap: anywhere; }
.inbox-head .chip { margin: 0; }
.inbox-link { color: var(--ink); text-decoration: none; font-weight: 550; }
.inbox-link .code { margin-right: 4px; }
.inbox-link::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the report */
.inbox-link:hover { color: var(--ibs-indigo); }
.inbox-link:focus-visible { outline: none; }
.inbox-row:has(.inbox-link:focus-visible) { outline: 2px solid var(--ibs-indigo); outline-offset: -2px; }
.inbox-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 14px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.inbox-when { color: var(--ink); font-weight: 500; }
.inbox-work { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); color: var(--ink-2); font-size: 13.5px; display: grid; gap: 2px; }
.inbox-work li { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-work .inbox-more { color: var(--ink-3); font-size: 12.5px; }
.inbox-nil { color: var(--ink-3); }
@media (min-width: 1024px) {
  .inbox-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
  .inbox-head, .inbox-meta { grid-column: 1; }
  .inbox-work { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.pager .btn { margin: 0; min-width: 96px; }
.pager-where { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* report view */
.report-detail .banner { margin: 0; }
.read-lines { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.read-lines li { overflow-wrap: anywhere; line-height: 1.5; }
.read-lines li::marker { color: var(--ink-3); }
.chip-moved-read { margin: 0 0 0 4px; background: var(--surface); border-color: var(--line-2); color: var(--ink-3); vertical-align: 1px; }
.photo-grid { list-style: none; margin: 0; padding: 0 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.photo-grid li { display: grid; gap: 4px; min-width: 0; }
.photo-grid a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease-out); }
.photo-grid a:hover img { transform: scale(1.03); }
.photo-grid a:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 2px; }
.photo-cap { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.review-form { display: grid; gap: 14px; justify-items: start; }
.review-form .field { width: 100%; }
.review-note { min-height: 5.5em; resize: vertical; line-height: 1.45; overflow-wrap: anywhere; }
.field-opt { font-weight: 400; color: var(--ink-3); }
.review-done { margin: 0; color: var(--ink-2); }
.review-card .form-error { margin: 0; }
.raw-paste summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px;
  padding: 16px 20px; cursor: pointer; list-style: none;
}
.raw-paste summary::-webkit-details-marker { display: none; }
.raw-paste summary::before {
  content: ""; align-self: center; width: 7px; height: 7px; margin-right: 2px;
  border-right: 1.75px solid var(--ibs-indigo); border-bottom: 1.75px solid var(--ibs-indigo);
  transform: rotate(-45deg); transition: transform 160ms var(--ease-out);
}
.raw-paste[open] summary::before { transform: rotate(45deg); }
.raw-paste summary:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: -2px; border-radius: var(--radius); }
.raw-paste pre {
  margin: 0 20px 20px; padding: 12px 14px; max-height: 480px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* job page: Site reports timeline (a rail with one mark per report; filled = reviewed) */
.job-reports { margin-top: 16px; }
.report-timeline { list-style: none; margin: 0; padding: 0 0 8px; }
.tl-report {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
  min-height: 48px; padding: 8px 20px 8px 48px; border-top: 1px solid var(--line);
  transition: background-color 120ms;
}
.tl-report:hover, .tl-report:focus-within { background: var(--row-hover); }
.tl-report::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-report:first-child::before { top: 50%; }
.tl-report:last-child::before { bottom: 50%; }
.tl-report:only-child::before { display: none; }
.tl-report::after {
  content: ""; position: absolute; left: 22px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line-field);
}
.tl-report:has(.chip-reviewed)::after { background: var(--act-done); border-color: var(--act-done); }
.tl-report-link { font-weight: 550; text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-report-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tl-report-link:hover { color: var(--ibs-indigo); }
.tl-report-link:focus-visible { outline: none; }
.tl-report:has(.tl-report-link:focus-visible) { outline: 2px solid var(--ibs-indigo); outline-offset: -2px; }
.tl-report-meta { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.tl-report-chips { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tl-report-chips .chip { margin: 0; }

@media (max-width: 900px) {
  .inbox-row { padding: 14px 16px; }
  .pager { padding: 12px 16px; }
  .photo-grid { padding: 0 16px 16px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .raw-paste summary { padding: 14px 16px; }
  .raw-paste pre { margin: 0 16px 16px; }
  .tl-report { padding: 8px 16px 8px 44px; }
  .tl-report::before { left: 23px; }
  .tl-report::after { left: 18px; }
  .tl-report-chips { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
  .inbox-bar { flex-direction: column; align-items: stretch; border-bottom: 0; }
  .inbox-tabs { border-bottom: 1px solid var(--line); }
  .inbox-filter { flex-basis: auto; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .segment span, .line, .file-pick, .inbox-row, .tl-report, .photo-grid img, .raw-paste summary::before { transition: none; }
  .photo-grid a:hover img { transform: none; }
  .line.is-arriving { animation: none; }
}

/* ---- motion ---------------------------------------------------------------
   Focal moment (first visit in a browser session, .motion-first): the
   Philippine coastline draws, the land fills, then jobs land on it, most
   urgent last, and Needs action pins pulse. Lists arrive as lists: KPI tiles
   and Needs action rows cascade, meters fill to their value.
   Every visit (.motion-ready): list <-> pin linking, timeline dots and
   overdue gaps drawing to today, Projects rows rippling in after a filter,
   and cross-page view transitions with a persistent top bar.
   All content is visible without JS; motion classes are added by dashboard.js. */

@keyframes pin-land { from { opacity: 0; transform: translateY(-16px) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes pin-pulse { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 0; transform: scale(2.9); } }
@keyframes gap-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop-in { from { opacity: 0; transform: translate(-2px, -2px) scale(0.2); } to { opacity: 1; transform: translate(-2px, -2px) scale(1); } }
@keyframes spine-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spine-sweep { from { transform: translateX(-120%); } to { transform: translateX(520%); } }
@keyframes tag-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes land-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }

/* pins: base delay waits for the coastline on first visit */
.motion-ready .job-pin .dot { animation: pin-land 560ms var(--ease-out) both; animation-delay: calc(var(--pin-base, 0ms) + var(--d, 0ms)); }
.motion-ready .job-pin.tier-act .ring { animation: pin-pulse 1.6s var(--ease-out) 3; animation-delay: calc(var(--pin-base, 0ms) + var(--d, 0ms) + 520ms); }
.job-pin.tier-act.is-linked .ring { animation: pin-pulse 1.2s var(--ease-out) infinite; }
.motion-first .map { --pin-base: 1050ms; }

/* coastline draw (paths get their dash length from dashboard.js) */
.motion-first .map .coast { transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.motion-first .map .coast.is-drawn { animation: land-fill 500ms ease-out 750ms both, coast-settle 600ms ease-out 900ms both; }
@keyframes coast-settle { from { stroke: var(--ibs-indigo); stroke-width: 1.5px; } to { stroke: var(--map-coast); stroke-width: 1px; } }
.motion-first .map .coast:not(.is-drawn) { fill-opacity: 0; }

/* lists arrive as lists (first visit) */
.motion-first .spine-seg { animation: spine-grow 720ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 90ms); }
.motion-first .spine::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: spine-sweep 1100ms ease-in-out 760ms both;
}
.motion-first .rail-row { animation: rise-in 480ms var(--ease-out) both; animation-delay: calc(260ms + min(var(--i, 0), 14) * 40ms); }
.meter span { transform-origin: left center; }
.motion-first .rail-row .meter span { animation: fill-in 800ms var(--ease-out) both; animation-delay: calc(420ms + min(var(--i, 0), 14) * 40ms); }

/* timeline: dots pop in by row, then the overdue gaps draw towards today */

/* projects: rows ripple in (capped), bars fill */

/* the timeline card rises into view when it is first scrolled to (class set by dashboard.js) */

/* cross-page continuity: the shell stays, the page slides softly, the nav pill travels */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.nav a[aria-current="page"] { view-transition-name: nav-active; }
.pagehead { view-transition-name: pagehead; }
::view-transition-group(nav-active) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: 160ms ease-in both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
::view-transition-old(pagehead) { animation: 140ms ease-in both vt-fade-out; }
::view-transition-new(pagehead) { animation: 300ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes vt-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tab, .nav a, .job-pin .dot, .job-pin, .rail-row, .twin summary::before { transition: none; }
  .motion-ready .job-pin .dot, .motion-ready .job-pin.tier-act .ring, .job-pin.tier-act.is-linked .ring, .motion-first .prov-fade,
  .motion-first .spine-seg, .motion-first .spine::after, .motion-first .rail-row, .motion-first .rail-row .meter span { animation: none; }
  .job-pin.is-linked .dot { transform: none; box-shadow: 0 0 0 3px var(--ink); }
  @view-transition { navigation: none; }
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 1240px) {
  .stage, .stage.room { height: auto; min-height: 0; overflow: visible; border: 0; background: none; display: grid; gap: 12px; }
  .content:has(.room) { padding: 16px; }
  .f-title { min-width: 0; }
  .stage .map { position: relative; inset: auto; height: 480px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; order: 1; }
  .float { position: static; }
  .f-title { order: 0; } .f-key { order: 2; } .f-rail { order: 3; width: auto; max-height: 520px; }
  .stage .leaflet-top.leaflet-left { top: 0; margin-left: 0; }
  .stage .leaflet-top.leaflet-right { right: 0; }
}

@media (max-width: 900px) {
  .topbar { height: 56px; padding: 0 12px; gap: 4px; }
  .brand { padding: 0 6px 0 4px; }
  .brand-name, .top-data, .top-name { display: none; }
  .nav a { padding: 8px 10px; }
  .top-end { gap: 8px; }
  .raise-pr-btn span { display: none; }
  .raise-pr-btn { width: 36px; padding: 0; justify-content: center; }
  .avatar { width: 28px; height: 28px; }
  .pagehead { padding: 18px 16px 14px; }
  h1 { font-size: 22px; }
  .content { padding: 16px 16px 8px; }
  .foot { padding: 8px 16px 24px; }
  .stage .map { height: 400px; }
  .f-key { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .spine { margin-bottom: 18px; }
  .card-head { padding: 14px 16px 10px; }
  .card-foot, .twin { margin-left: 16px; margin-right: 16px; }

}
@media (max-width: 1024px) {
  .tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .tab { padding: 9px 10px 10px; }
  /* projects register as compact rows */
}
@media (max-width: 640px) {
  /* A phone (the owner, 2026-11-01: "fix the ui bug in phone"): the brand and the buttons on the first row, the tabs on
     a row of their own under them, with their words, swiped sideways when they do not fit; the current tab's sub-tabs
     dock under both. */
  .topbar { --bar-h: 100px; height: auto; flex-wrap: wrap; row-gap: 0; }
  .brand, .top-end { height: 56px; }
  .brand { align-items: center; }
  .nav { order: 3; flex: 1 0 100%; height: 44px; margin: 0 -12px; padding: 0 12px; }
  .nav a { padding: 6px 10px; }
  .nav a .icon { display: none; }
  .subbar { top: 100px; }
  .r-counts { grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 28px; }  /* the dashboard's counts */
}
/* A long top bar (one bar per role, the owner, 2026-10-22: six to eight entries) stays on one line on a laptop, as
   procurement's does (frontend/src/app/TopBar.tsx): below 1440px the brand's and the person's names give way, below
   1280px the icons. The entries' words always stay (the owner, 2026-10-23: icons alone confuse someone new). */
/* A tab with sub-tabs sits in a group of its own (2026-11-01), so entries are counted whatever wraps them. Below 1280px
   Chat, Raise a PR and Ask keep their icons only, as procurement's do. */
@media (max-width: 1439px) {
  .topbar:has(.nav > :nth-child(6)) .brand-name, .topbar:has(.nav > :nth-child(6)) .top-name { display: none; }
}
@media (min-width: 641px) and (max-width: 1279px) {
  .nav:has(> :nth-child(6)) a .icon { display: none; }
  .nav:has(> :nth-child(6)) > a, .nav:has(> :nth-child(6)) > .nav-group > a { padding: 8px 10px; }
  .topbar:has(.nav > :nth-child(6)) .top-end :is(.raise-pr-btn, .ask-btn) { width: 36px; padding: 0; justify-content: center; }
  .topbar:has(.nav > :nth-child(6)) .top-end :is(.raise-pr-btn, .ask-btn) > :not(.icon) { display: none; }
}

/* daily report without the paste (2026-10-03): manpower rows, notes, marks */
.manpower-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.report-notes-text { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* The job page leads with the model (owner, 2026-10-05): the stage, then summary cards that open their detail */
.job-stage { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 16px; }
.job-stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; }
.job-stage-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.job-stage-title h2 { margin: 0; font-family: var(--font-brand); font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.job-stage-title .chip { margin: 0; }
.job-stage-actions { display: flex; gap: 8px; margin: 0; }
.job-stage-actions .btn { margin: 0; min-height: 44px; }
.job-stage-canvas { height: min(56vh, 560px); min-height: 300px; background: var(--surface-2); touch-action: none; }
.job-stage-canvas canvas { display: block; width: 100%; height: 100%; }
.job-stage-note { margin: 0; padding: 0 16px; color: var(--ink-3); font-size: 12.5px; }
.job-stage-note:empty { display: none; }
.job-stage-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 10px 16px 12px; color: var(--ink-2); font-size: 12.5px; }
.job-stage-legend li { display: inline-flex; align-items: center; gap: 6px; }
.job-stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch-status { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.s-grey { background: #7c8297; } .s-amber { background: #b87a00; } .s-green { background: #3e9a5a; }
.s-faint { background: transparent; border: 1px solid var(--line-2); }
.job-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0 0 16px; }
.job-tile { display: grid; gap: 2px; align-content: start; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 160ms var(--ease-out, ease-out), background-color 160ms var(--ease-out, ease-out); }
.job-tile:hover { background: var(--row-hover); border-color: var(--line-2); }
.job-tile:focus-visible { outline: 2px solid var(--ibs-teal); outline-offset: 2px; }
.job-tile[aria-expanded="true"] { border-color: var(--ibs-teal); background: var(--surface-2); }
.job-tile-label { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.job-tile-figure { font-family: var(--font-brand); font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.job-tile-sub { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.job-tile.tone-check .job-tile-figure { color: var(--check); }
.job-tile.tone-teal .job-tile-figure { color: var(--ibs-teal-hover); }
@media (prefers-reduced-motion: reduce) { .job-tile { transition: none; } }
.mark-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.mark-row { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mark-row:last-child { border-bottom: 0; }
.mark-row.is-out .mark-what { text-decoration: line-through; color: var(--ink-3); }
.mark-what { font-weight: 600; color: var(--ink); }
.mark-on { color: var(--ink-3); font-size: 13px; }
.mark-reject { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mark-reject .input { flex: 1 1 200px; min-width: 0; }
.mark-reject .btn { margin: 0; }
.batch-members summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink-2); }
.batch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.batch-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: var(--ink-2); font-size: 13.5px; }
.batch-list .btn { margin: 0; min-height: 44px; }
.manpower-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px 14px; }
.manpower-grid label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.manpower-grid .input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.delivery-add { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: 8px; margin-top: 10px; }
@media (max-width: 520px) { .delivery-add { grid-template-columns: 1fr 1fr; } .delivery-add select { grid-column: 1 / -1; } }
.report-marks { margin: 0; padding-left: 18px; color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Measured progress on the job page (spec 2026-10-03 progress §4) */
.progress-job { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.progress-job strong { font-size: 24px; }
.progress-trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.progress-trade { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.progress-name { font-weight: 600; }
.progress-stages { list-style: none; margin: 4px 0 0 22px; padding: 0; display: grid; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.progress-check-h { margin: 16px 0 8px; font-size: 16px; }
.progress-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
/* the card's content sits inside its border: every block of the body keeps the card's 20px side padding */
.job-progress { --pad: 20px; }
@media (max-width: 900px) { .job-progress { --pad: 16px; } }  /* the same side padding as .card-head at that width */
.job-progress .progress-scope > :not(.card-foot),
.job-progress > :not(.card-head, .card-foot, .card-empty, .progress-scope, details),
.job-progress details > :not(.card-foot) { padding-inline: var(--pad); }
.job-progress .card-foot, .job-progress .card-empty { margin-inline: 0; padding-inline: var(--pad); }
.job-progress .progress-scope { padding-top: 4px; }
.job-progress .progress-vo { margin: 0 0 8px; }
.job-progress details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.job-progress details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.job-progress .progress-trades-twin { border-top: 1px solid var(--line); }
.weights-form .manpower-grid { margin-bottom: 16px; }


.measured { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ibs-teal-hover); font-variant-numeric: tabular-nums; }
.measured.nil { color: var(--ink-3); font-weight: 400; }
.measured-sort { margin-left: 8px; font-weight: 500; }

.evidence { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.evidence a { display: block; line-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); }
.evidence img { width: 56px; height: 56px; object-fit: cover; }

/* ---- Working with no signal (spec 2026-10-05 field hardening section 3) ------------------------------------------------------- */
.queue-pill {
  position: fixed; left: 12px; bottom: 12px; z-index: 60; min-height: 44px; max-width: calc(100vw - 24px); padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ibs-teal); background: var(--surface); color: var(--ibs-teal-hover); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(28, 32, 37, 0.16);
}
.queue-pill[hidden], .queue-panel[hidden], .offline-banner[hidden] { display: none; }
.queue-pill.is-trouble { border-color: var(--check); color: var(--check); }
.queue-pill:hover { background: var(--ibs-indigo-soft); }
.queue-panel {
  position: fixed; left: 12px; bottom: 64px; z-index: 60; width: min(420px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 36px rgba(28, 32, 37, 0.18);
}
.queue-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.queue-row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.queue-what { font-weight: 600; font-size: 13.5px; }
.queue-meta { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.queue-actions .btn { min-height: 44px; margin: 0; }
.offline-banner { margin: 0; padding: 10px 32px; background: var(--check-bg); color: var(--check); border-bottom: 1px solid var(--check-line); font-size: 13.5px; }
@media (max-width: 640px) { .offline-banner { padding: 10px 16px; } }

/* ---- the site engineer's projects (owner, 2026-10-06) ---- */
.site-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.show-btn { margin: 4px 0 0; min-height: 44px; justify-self: start; }
/* the notes of a report, first on the review page (owner, 2026-10-07) */
.notes-card { border-color: var(--check-line); }
.note-cards { list-style: none; margin: 0; padding: 0 20px 16px; display: grid; gap: 12px; }
.note-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.note-card.kind-revision:not(.is-resolved) { border-color: var(--check-line); background: var(--check-bg); }
.note-card.is-resolved { opacity: 0.82; }
.note-card.is-focus { outline: 2px solid var(--ibs-teal); outline-offset: 2px; }
.note-card p { margin: 0; }
.note-card-head .chip { margin: 0 6px 0 0; }
.note-card-text { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.note-card-reply { color: var(--ink-2); font-size: 14px; }
.note-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.note-card-actions .btn { margin: 0; min-height: 44px; }
.job-stage { position: relative; }
.job-stage-notecard { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--check-line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.job-stage-notecard[hidden] { display: none; }
.s-lit { background: #4fa6d5; } .s-dim { background: rgba(124, 130, 151, 0.3); } .s-neutral { background: var(--ibs-indigo); }
.swatch-ring { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 2px solid var(--c); }
.r-rev { --c: #b87a00; } .r-com { --c: #2779a5; } .r-res { --c: #7c8297; }

/* ---- the job page's Overview (owner, 2026-10-20, layout A): progress beside the job's orders and requests ------ */
.job-tabs { display: flex; gap: 2px; padding: 0 32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.job-tabs a { padding: 10px 14px 9px; border-bottom: 3px solid transparent; color: var(--ink-2); font-weight: 650; text-decoration: none; }
.job-tabs a:hover { color: var(--ink-strong); }
.job-tabs a[aria-current="page"] { color: var(--ibs-indigo); border-bottom-color: var(--ibs-indigo); }
.job-head:has(+ .job-tabs) { border-bottom: 0; padding-bottom: 12px; }
.job-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.job-card.job-overview-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
body:has(.job-tabs) .job-work { height: calc(100vh - 60px - 96px - 46px); }
.buy { padding: 18px 20px 20px; }
.buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.buy-title { margin: 0 0 6px; font: 700 15px/1.3 var(--font-brand); color: var(--ibs-indigo); font-variant-numeric: lining-nums; }
.buy-title-sub { margin-top: 20px; }
.buy-n { color: var(--ink-3); font-weight: 600; }
.buy-codes { margin: 0 0 12px; color: var(--ink-2); font-size: 12.5px; }
.buy-empty { margin: 4px 0 0; color: var(--ink-2); }
.buy-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.buy-table th { padding: 7px 8px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 650; text-align: left; }
.buy-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.buy-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-table .chip { margin: 0; }
.buy-sub, .buy-more { display: block; color: var(--ink-2); font-size: 12.5px; }
.buy-more { color: var(--ink-3); }
.buy-reqs { margin: 0; padding: 0; list-style: none; }
.buy-reqs li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.buy-reqs .buy-sub { display: inline; }
.chip-partial { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo-line); color: var(--ibs-indigo); }
.buy-all { margin-top: 14px; }
/* The job's own PRs, first on the card (MCM programme phase 1, 2026-10-28). */
.buy-part + .buy-head { margin-top: 22px; }
.buy-prs { margin: 0; padding: 0; list-style: none; }
.buy-prs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line); }
.buy-pr-main { min-width: 0; overflow-wrap: anywhere; }
.buy-pr-no { margin-right: 8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.buy-pr-what { color: var(--ink-strong); }
.buy-pr-meta { grid-column: 1 / -1; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.buy-prs .chip { margin: 0; }
.chip-pr { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
.chip-pr-wait { background: var(--check-bg); border-color: var(--check-line); color: var(--check); }
.chip-pr-buy { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo-line); color: var(--ibs-indigo); }
.job-tiles + .buy { margin-top: 16px; }
@media (max-width: 960px) {
  .job-overview { grid-template-columns: minmax(0, 1fr); }
  .job-tabs { padding: 0 16px; }
}

/* ---- the job page: the model is the page, a rail beside it (owner, 2026-10-08) ----------------------------- */
.content:has(.job-work) { max-width: none; padding: 0; }
.job-head { padding: 14px 24px; align-items: center; }
.job-head h1 { font-size: 22px; color: var(--ink); }
.job-head h1 .code { font-size: 15px; color: var(--ibs-indigo); margin-right: 6px; }
.job-head .crumb { margin: 0 0 2px; }
.job-head .pagehead-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.tierpill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tierpill.tier-act { color: var(--act); background: var(--act-bg); border-color: var(--act-line); }
.tierpill.tier-check { color: var(--check); background: var(--check-bg); border-color: var(--check-line); }
.job-head > .chip { margin: 0; }
.job-work { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 60px - 96px); min-height: 540px; }
.job-stage.job-stage-full { margin: 0; border: 0; border-radius: 0; height: 100%; overflow: hidden; background: radial-gradient(120% 100% at 50% 35%, #ffffff 0%, var(--surface-2) 55%, #e9ecf5 100%); }
.job-stage-full .job-stage-canvas { position: absolute; inset: 0; height: auto; min-height: 0; background: none; }
.job-stage-tools { position: absolute; left: 14px; top: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 28px); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line-2); }
.seg[hidden] { display: none; }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; transition: background-color 140ms, color 140ms; }
.seg button:hover { background: var(--row-hover); color: var(--ink-strong); }
.seg button[aria-pressed="true"] { background: var(--ibs-indigo-soft); color: var(--ibs-indigo); box-shadow: inset 0 0 0 1px var(--ibs-indigo-line); }
.job-stage-tools [data-status] button { display: inline-flex; align-items: center; gap: 6px; }  /* the status's colour on the model */
.stage-break { flex-basis: 100%; height: 0; }  /* work type and status start their own line, clear of an element's card */
.stage-pick { min-height: 44px; max-width: 100%; padding: 0 8px 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line-2); color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; }
.stage-pick[hidden] { display: none; }
.stage-pick:hover { border-color: var(--line-field); color: var(--ink-strong); }
.stage-pick:focus-visible { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); }
.stage-pick.is-on { background: var(--ibs-indigo-soft); color: var(--ibs-indigo); border-color: var(--ibs-indigo-line); }  /* one work type chosen */
.job-stage-badge { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; max-width: 50%; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); color: var(--ink-2); font-size: 12.5px; }
.job-stage-badge .chip { margin: 0; }
.job-stage-badge a.chip { text-decoration: none; }
.job-stage-full .job-stage-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0; }
.job-stage-full .job-stage-note:not(:empty) { z-index: 2; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }  /* readable over the model */
.job-stage-full .job-stage-legend { position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: calc(50% - 20px); padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
body:has(.queue-pill:not([hidden])) .job-stage-full .job-stage-legend { bottom: 66px; }  /* clear of the waiting-to-send pill */
.job-stage-empty { display: grid; place-content: center; gap: 8px; padding: 40px; text-align: center; color: var(--ink-2); background: var(--surface-2); }
.job-stage-empty h2 { margin: 0; }
.job-stage-empty p { margin: 0; max-width: 52ch; }

/* the description card: floats on the model, top right, never covers the rail */
.job-stage-notecard { left: auto; right: 14px; top: 14px; bottom: auto; z-index: 5; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; gap: 10px; padding: 16px 16px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.notecard-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.notecard-x:hover { background: var(--row-hover); color: var(--ink); }
.notecard-title { display: flex; align-items: center; gap: 8px; margin: 0; padding-right: 36px; font-family: var(--font); font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.notecard-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 0; }
.notecard-trade { color: var(--ink-2); font-size: 13px; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink); }
.notecard-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; }
.notecard-facts dt { color: var(--ink-3); }
.notecard-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.notecard-ladder { display: grid; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.notecard-ladder li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.notecard-ladder .lb { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.notecard-ladder .lb i { display: block; height: 100%; border-radius: 3px; }
.notecard-ladder .v { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.notecard-line, .notecard-meta { margin: 0; color: var(--ink-2); font-size: 13px; }
.notecard-text { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.notecard-answer { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ibs-indigo-soft); color: var(--ibs-indigo-ink); font-size: 13.5px; }
.notecard-answer b { display: block; margin-bottom: 2px; color: var(--ibs-indigo); font-size: 12px; }
.notecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.notecard-foot a { font-weight: 600; white-space: nowrap; }

/* the rail */
.job-rail { min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rsec { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.rsec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; }
.rsec-head h2 { margin: 0; font-size: 15px; }
.rsec-meta { color: var(--ink-3); font-size: 12.5px; }
.rsec-head .card-link { margin-left: auto; }
.rsec-empty { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.job-rail .job-progress { --pad: 0px; }
.job-rail .progress-job { margin: 8px 0 12px; }
.job-rail .progress-job strong { font-size: 20px; }
.job-rail .progress-trades { gap: 8px; }
.job-rail .progress-trade { font-size: 13.5px; }
.job-rail .progress-trade .meter { margin-left: auto; }
.job-rail .progress-stages { font-size: 12.5px; color: var(--ink-2); margin-left: 20px; }
.job-rail .progress-check-h { font-size: 13.5px; margin: 14px 0 6px; }
.job-rail .progress-check { font-size: 13px; }
.job-rail .progress-hand { margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; }
/* the summary card (owner, 2026-10-13): one measured headline, the target, the other figures with their sources */
.job-card { display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 18px; background: var(--surface); }
.hero-label { margin: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 0; }
.hero strong { font-family: var(--font-brand); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink-strong); font-variant-numeric: lining-nums; }
.hero-unknown strong { font-size: 40px; color: var(--ink-2); }
.hero-delta { color: var(--ok); font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-src { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; }
.hero-track { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.hero-track i { position: absolute; inset: 0 auto 0 0; min-width: 4px; border-radius: 5px; background: var(--ibs-green); }
.due { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); }
.due.late { background: var(--act-bg); border-color: var(--act-line); }
.due .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-2); }
.due.late .icon { color: var(--act); }
.due p { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.4; }
.due small { display: block; color: var(--ink-2); font-size: 12.5px; }
.others { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.other { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; text-decoration: none; }
a.other:hover { border-color: var(--ibs-indigo-line); background: var(--row-hover); }
.other span { display: block; color: var(--ink-3); font-size: 12px; }
.other b { display: block; margin-top: 2px; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.other small { color: var(--ink-3); font-size: 11.5px; }
.wt h2 { margin: 0 0 10px; font-family: var(--font-brand); font-size: 14px; color: var(--ink); }
.wt ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wt li { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.wt li b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.wt .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wt .bar i { display: block; height: 100%; border-radius: 3px; background: var(--act-done); }
.wt .more { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; }
.card-open { width: 100%; min-height: 44px; margin: 0; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
/* reported progress (spec 2026-10-12 jumpstart): beside measured, each figure opens its source */

@media (max-width: 1100px) {
  .job-work { grid-template-columns: 1fr; height: auto; }
  .job-stage.job-stage-full { height: 68vh; min-height: 420px; }
  .job-rail { border-left: 0; overflow: visible; }
  .job-stage-notecard { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 62%; }
}
@media (max-width: 640px) {
  .job-head { padding: 12px 16px; }
  .job-stage-full .job-stage-legend { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .job-stage-badge { display: none; }
  .job-stage-tools { left: 8px; top: 8px; }
  .job-stage-tools .seg { max-width: 100%; overflow-x: auto; }  /* a long row of levels scrolls instead of running off */
}
@media (prefers-reduced-motion: reduce) { .seg button { transition: none; } }

/* ---- the site engineer's projects: a card per project, today first (owner, 2026-10-08) ----------------------------- */
.site-due { color: var(--check); font-weight: 650; }
.site-grid:has(.pcard) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.pcard { display: grid; gap: 16px; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pcard h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.pcard h2 .code { font-family: var(--font); font-size: 14px; color: var(--ibs-indigo); }
.today { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.today.to-send { background: var(--check-bg); border-color: var(--check-line); }
.today.sent { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo-soft); }
.today .what { display: flex; align-items: center; gap: 12px; margin: 0; }
.today .what .icon { width: 26px; height: 26px; color: var(--ink-3); }
.today.to-send .what .icon, .today.to-send .what b { color: var(--check); }
.today.sent .what .icon { color: var(--ibs-indigo); }
.today .what > span { display: grid; gap: 2px; }
.today .what b { font-size: 16px; line-height: 1.3; }
.today .what span span { color: var(--ink-2); font-size: 13px; }
.today .btn { margin: 0; min-height: 52px; gap: 10px; font-size: 16px; }
.pmod { display: grid; gap: 8px; }
.pmod-h { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--ink-3); font-size: 13px; }
.pmod-h b { color: var(--ink); font-weight: 600; }
.sbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.sbar i { flex: 0 1 0; min-width: 0; }
.skey { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.skey span { display: inline-flex; align-items: center; gap: 6px; }
.pfacts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pfacts a { display: grid; gap: 2px; min-height: 56px; padding: 12px 4px 2px 0; color: var(--ink); text-decoration: none; }
.pfacts a + a { padding-left: 14px; border-left: 1px solid var(--line); }
.pfacts .k { color: var(--ink-3); font-size: 12px; }
.pfacts .v { display: flex; align-items: center; gap: 7px; font-weight: 600; overflow-wrap: anywhere; }
.pfacts .v.bad { color: var(--check); }
.pfacts a:hover .v { color: var(--ibs-indigo); }
.popen { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ibs-indigo); font-weight: 600; text-decoration: none; }
.popen:hover { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo); color: var(--ibs-indigo-ink); }
.popen .icon { width: 18px; height: 18px; }
/* Projects the tracker keeps itself (spec 2026-10-21): the Ongoing / Archived filter, the archived mark, a job's files
   and the new-project form. */
.pl-state { display: flex; flex-wrap: wrap; gap: 6px; margin-right: 6px; padding-right: 12px; border-right: 1px solid var(--line); }
.chip-archived { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
.job-files .card-head .hint { flex-basis: 100%; }
.files-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 4px 20px 16px; }
.files-upload .field { flex: 1 1 220px; }
.files-upload .btn { min-height: 44px; }
.files-upload .form-error, .files-hint { flex-basis: 100%; margin: 0; }
.files-wrap { overflow-x: auto; padding: 0 20px 16px; }
.files-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.files-table th { padding: 8px 12px 8px 0; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.files-table td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: break-word; }
.files-table .btn { white-space: nowrap; }
.files-table .num { text-align: right; white-space: nowrap; }
.files-table form { margin: 0; text-align: right; }
.new-project { max-width: 760px; padding: 20px; }
.new-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 20px; align-items: start; }
.new-project-grid > .field { align-content: start; }
.new-project .form-error { margin: 0; padding: 6px 10px; font-size: 13px; }
.new-project-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
/* Change password (the owner, 2026-11-03): one column, about as wide as the sign-in card. */
.password-form { max-width: 440px; padding: 20px; display: grid; gap: 16px; }
.password-form .form-error { margin: 0; padding: 6px 10px; font-size: 13px; }
.password-form-actions { margin: 4px 0 0; }
.password-form-actions .btn { margin: 0; }
/* The test copy's strip above every page (the owner, 2026-11-03), in the warning colours; never on the real site. */
.site-label { padding: 6px 16px; background: var(--check-bg); border-bottom: 1px solid var(--check-line); color: var(--check); font-size: 13px; font-weight: 600; text-align: center; }
/* Profile (the owner, 2026-11-03: like Infinity's profile, our details only): headed sections of read-only details. */
.profile { max-width: 760px; display: grid; gap: 24px; }
.profile-section h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.profile-card { display: flex; align-items: flex-start; gap: 24px; padding: 20px; }
.profile-avatar { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--side-bg); color: var(--side-ink); font-family: var(--font-brand); font-size: 30px; font-weight: 700; }
.profile-facts { flex: 1; min-width: 0; display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 12px 28px; margin: 0; }
.profile-facts dt { font-size: 13px; color: var(--ink-3); }
.profile-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.profile-facts .btn { margin: 0; }
.profile-jobs { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
/* On a phone the avatar sits above the details, so a username or an email keeps its line. */
@media (max-width: 640px) {
  .profile-card { flex-direction: column; gap: 16px; }
  .profile-avatar { width: 64px; height: 64px; font-size: 22px; }
}
@media (max-width: 640px) {
  .pl-state { border-right: 0; padding-right: 0; }
  .files-upload, .files-wrap { padding-left: 16px; padding-right: 16px; }
  /* On a phone each file is a short card: its name, then kind, size and who, with Remove beside them. */
  .files-table thead { display: none; }
  .files-table, .files-table tbody { display: block; }
  .files-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .files-table td { display: block; padding: 0; border: 0; grid-column: 1; }
  .files-table td:first-child { font-weight: 600; }
  .files-table td:nth-child(n+2) { font-size: 13px; color: var(--ink-3); }
  .files-table .num { text-align: left; }
  .files-table td:last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
/* A job's logistics (owner, 2026-10-20): the chain of steps with their counts, installed last, then the items. */
.logi .card-head .hint { flex-basis: 100%; }
.logi-body { padding: 0 20px 16px; }
.logi-chain { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.logi-step { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.logi-step.has-items { background: var(--ibs-indigo-soft); border-color: var(--ibs-indigo); }
.logi-step-label { font-size: 12.5px; color: var(--ink-3); overflow-wrap: break-word; }
.logi-step-n { font-size: 18px; font-weight: 650; color: var(--ink); }
.logi-installed { background: transparent; border-style: dashed; }
.logi-installed .logi-step-n { font-size: 15px; }
.logi-off { margin: 0 0 12px; color: var(--ink-3); font-size: 13px; }
.chip-step { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); }
.chip-step.chip-site { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip-step.chip-hold { background: var(--act-bg); border-color: var(--act-line); color: var(--act); }
@media (max-width: 900px) { .logi-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logi-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logi-body { padding: 0 16px 16px; } }
/* The site engineer's daily report after marking the model: each element marked today, then manpower and notes (owner, 2026-10-21). */
.wiz { max-width: 560px; padding: 16px 18px 18px; }
.wiz-steps { display: flex; gap: 4px; margin: 0 0 14px; }
.wiz-steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.wiz-steps i.done { background: var(--ibs-indigo); }
.wiz-steps i.now { background: var(--ibs-indigo-line, #8b95d6); }
.wiz-kicker { margin: 0 0 2px; font-size: 12.5px; color: var(--ink-3); }
.wiz-title { margin: 0 0 4px; font-size: 19px; }
.wiz .hint { margin: 0 0 10px; }
.wiz .field { margin: 12px 0 0; }
.wiz .field-label { display: block; margin: 12px 0 6px; }
.wiz-marks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wiz-marks li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.wiz-marks span { color: var(--ink-2); }
.wiz-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wiz-seg-b { min-height: 46px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink-2); font: 600 14px var(--font); cursor: pointer; }
.wiz-seg-b.on { background: var(--ibs-indigo); border-color: var(--ibs-indigo); color: #fff; }
.wiz-trade { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.wiz-stepper { display: inline-flex; align-items: center; gap: 10px; }
.wiz-step-b { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ibs-indigo); font-size: 20px; cursor: pointer; }
.wiz-step-n { min-width: 26px; text-align: center; font-size: 17px; }
.wiz-total { display: flex; justify-content: flex-end; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-weight: 700; }
.wiz-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.wiz-sum div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.wiz-sum b { display: block; font-size: 18px; }
.wiz-sum span { font-size: 12.5px; color: var(--ink-3); }
.wiz textarea.input { width: 100%; min-height: 92px; resize: vertical; }
.wiz-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 18px 0 0; }
.wiz-nav .btn { min-height: 48px; justify-content: center; }
.wiz .form-error { margin: 0 0 10px; }
@media (max-width: 520px) { .wiz { padding: 14px 16px 16px; } .wiz-filters { grid-template-columns: 1fr; } }
/* The PM's review (owner's approved sample, 2026-10-21): the summary first, then marks by work type and floor. */
.report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.report-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.report-tile b { font-size: 20px; color: var(--ink); }
.report-tile span { font-size: 12.5px; color: var(--ink-3); }
.mark-group { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.mark-group small { font-weight: 600; color: var(--ink-3); }
.mark-floor { margin: 8px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
/* Recorded reports and drafted marks say so (the owner's label sample, 2026-10-28) */
.chip-recorded { background: var(--surface); border-color: var(--ibs-indigo-line); color: var(--ibs-indigo); }
.mark-part { margin: 16px 0 4px; padding: 12px 14px 4px; border: 1px solid var(--ibs-indigo-line); border-radius: 8px; background: var(--surface-2); }
.mark-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; font-size: 15px; }
.mark-part-note { margin: 4px 0 6px; color: var(--ink-3); font-size: 13px; }
.mark-part .mark-group:first-of-type { border-top: 0; padding-top: 4px; }
.mark-follows { margin: 0; color: var(--ink-3); font-size: 13px; }
.mark-approve { display: inline-flex; margin: 0; }
.btn-approve { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.btn-approve:hover { background: var(--ok-line); }
.report-detail .chip-approved { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }

.edit-proposal-hint { margin: 16px 0 0; }