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

.nav { display: flex; gap: 2px; }
.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); }

.top-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.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); }

.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; }
.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, .chip-delivery_late { background: var(--act-bg); border-color: var(--act-line); color: var(--act); }
.chip-conflict, .chip-completed_open, .chip-no_report { 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(200px, 2.2fr) minmax(170px, 1.4fr) minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(170px, 1.6fr) 16px;
  gap: 16px; align-items: center; padding: 0 20px; }
.pl-row.no-report, .pl:has(.no-report) .pl-head { grid-template-columns: 12px minmax(200px, 2.2fr) minmax(170px, 1.4fr) minmax(130px, 1fr) minmax(170px, 1.6fr) 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-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" ". 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-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 { 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 { outline: 2px solid var(--ibs-indigo); outline-offset: 0; border-color: var(--ibs-indigo); }
.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); }

.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; }
  .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) {
  .nav a span:not(.nav-badge) { display: none; }
  .nav a { position: relative; }
  .nav-badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--side-bg); }
}

/* 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); }
.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-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-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; }
}
@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; }