.auth-loading {
    padding: 24px;
    color: var(--text);
}

.page-shell {
    padding: 0 0 2rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}

.page-head-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-bright);
    text-transform: uppercase;
}

.page-head-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 3px;
}

/* ── Rapid Engine page chrome ───────────────────────────────────────────── */
.engine-page {
    /* width:100% + box-sizing keeps the centred column at its full capped width.
       .engine-page is a direct child of the shared <RrnAppShell> .app-content,
       which is a flex column — without an explicit width the page shrink-wraps to
       its content and floats narrow in the middle instead of filling --rrn-page-max. */
    width: 100%;
    max-width: var(--rrn-page-max);
    margin: 0 auto;
    padding: 34px 28px 90px;
    box-sizing: border-box;
}

/* Network map */
.engine-map-wrap { position: relative; display: flex; flex-direction: column; gap: 10px; }
.engine-map { width: 100%; height: 480px; border-radius: 8px; overflow: hidden; background: #0a0c10; }

/* The map page is a full-bleed workspace: it opts out of the centred column
   entirely and fills the viewport below the top bar. The flex chain
   (page → host → wrap → layout) is what makes the map take exactly the
   remaining height — no viewport maths, so nothing ever runs off the bottom. */
.network-page.is-full-bleed {
    max-width: none;
    padding: 14px 18px 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.network-map-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.network-map-host .engine-map-wrap { flex: 1; min-height: 0; }
.network-map-host .engine-map-layout { flex: 1; min-height: 0; }
.network-map-host .engine-map { height: 100%; min-height: 320px; }
.network-map-host .engine-map-results { height: 100%; flex-basis: 360px; width: 360px; }

/* Search-first toolbar: postcode + scale + Find on the left, view mode and the
   display filter pushed to the far right by the spacer. The controls are
   width-capped (overriding .f-input's width:100%) so the row never wraps. */
.engine-map-toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine-map-toolbar-spacer { flex: 1 1 auto; }
.engine-page .engine-map-filter-input { width: auto; flex: 0 1 320px; min-width: 200px; max-width: 360px; }
.engine-page .engine-map-filter-scale { width: auto; flex: 0 0 auto; min-width: 150px; max-width: 220px; }
.engine-map-filter-button {
    display: inline-flex; align-items: center; gap: 7px; min-height: 31px;
    padding: 5px 10px; border: 1px solid var(--border, #2a2e36); border-radius: 7px;
    background: transparent; color: var(--text-dim); font: 600 12px/1.2 inherit;
    cursor: pointer;
}
.engine-map-filter-button:hover,
.engine-map-filter-button.active {
    border-color: rgba(28,196,120,.55); color: var(--text-bright);
    background: rgba(28,196,120,.08);
}
.engine-map-filter-count {
    display: inline-grid; min-width: 19px; height: 19px; padding: 0 5px;
    place-items: center; border-radius: 999px; background: var(--accent, #1cc478);
    color: #07130d; font-size: 10px; font-weight: 800;
}
.engine-map-filter-panel {
    position: absolute; z-index: 1100; top: 42px; left: 0;
    width: min(620px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 150px));
    display: flex; flex-direction: column;
    border: 1px solid var(--border, #2a2e36); border-radius: 12px;
    background: var(--surface, #15181e); box-shadow: 0 18px 50px rgba(0,0,0,.5);
    overflow: hidden;
}
.engine-map-filter-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 14px 16px 10px;
}
.engine-map-filter-panel__head > div { display: grid; gap: 3px; }
.engine-map-filter-panel__head strong { color: var(--text-bright); font-size: 14px; }
.engine-map-filter-panel__head span { color: var(--text-dim); font-size: 11px; }
.engine-map-filter-close {
    border: 0; background: transparent; color: var(--text-dim);
    font: 400 22px/1 inherit; cursor: pointer; padding: 0 2px;
}
.engine-map-filter-close:hover { color: var(--text-bright); }
.engine-map-filter-bands {
    display: flex; gap: 5px; padding: 0 16px 11px; overflow-x: auto;
}
.engine-map-filter-bands button {
    flex: 0 0 auto; border: 1px solid var(--border, #2a2e36); border-radius: 999px;
    background: transparent; color: var(--text-dim); padding: 5px 10px;
    font: 600 11px/1.2 inherit; cursor: pointer;
}
.engine-map-filter-bands button:hover { color: var(--text-bright); }
.engine-map-filter-bands button.active {
    color: var(--accent, #1cc478); border-color: rgba(28,196,120,.55);
    background: rgba(28,196,120,.1);
}
.engine-map-filter-search {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 10px 16px; border-block: 1px solid var(--border, #2a2e36);
    background: rgba(255,255,255,.015);
}
.engine-map-filter-search span { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.engine-map-filter-list {
    min-height: 120px; max-height: 340px; overflow-y: auto; padding: 6px 10px;
}
.engine-map-filter-empty { padding: 22px 8px; text-align: center; color: var(--text-dim); font-size: 12px; }
.engine-map-filter-repairer { padding: 8px 6px; border-bottom: 1px solid rgba(148,163,184,.1); }
.engine-map-filter-repairer:last-child { border-bottom: 0; }
.engine-map-filter-repairer > label {
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
}
.engine-map-filter-repairer input { margin-top: 3px; accent-color: var(--accent, #1cc478); }
.engine-map-filter-repairer label > span { display: grid; gap: 1px; }
.engine-map-filter-repairer strong { color: var(--text-bright); font-size: 12px; }
.engine-map-filter-repairer small { color: var(--text-dim); font-size: 10px; }
.engine-map-filter-centres {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px;
    margin: 8px 0 0 26px; padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.engine-map-filter-centres label {
    display: flex; align-items: flex-start; gap: 7px; min-width: 0;
    color: var(--text-dim); font-size: 11px; cursor: pointer;
}
.engine-map-filter-centres label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-map-filter-centres__all { grid-column: 1 / -1; color: var(--text-bright) !important; font-weight: 700; }
.engine-map-filter-actions {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-top: 1px solid var(--border, #2a2e36); background: rgba(0,0,0,.12);
}
.engine-map-filter-actions .btn-link {
    border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
    padding: 4px 0; font: 600 11px/1.2 inherit;
}
.engine-map-filter-actions .btn-link:hover { color: var(--text-bright); }
.engine-map-filter-summary { flex: 1; color: var(--text-dim); font-size: 11px; text-align: right; }

/* Coverage / Capacity view switch. */
.engine-map-mode {
    display: inline-flex; border: 1px solid var(--border, #2a2e36);
    border-radius: 8px; overflow: hidden; flex: 0 0 auto;
}
.engine-map-mode button {
    border: 0; background: transparent; color: var(--text-dim);
    font: 600 12px/1.2 inherit; padding: 6px 12px; cursor: pointer;
}
.engine-map-mode button + button { border-left: 1px solid var(--border, #2a2e36); }
.engine-map-mode button.on { background: rgba(28,196,120,0.16); color: var(--accent, #1cc478); }
.engine-map-mode button:not(.on):hover { color: var(--text); }

/* Capacity heatmap legend: a single continuous ramp, matching heatColour()
   in engineMap.js (hue 145 → 0 as utilisation climbs). */
.engine-map-heat-legend { display: inline-flex; align-items: center; gap: 6px; }
.engine-map-heatbar {
    display: inline-block; width: 120px; height: 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: linear-gradient(90deg,
        hsl(145,78%,46%), hsl(109,78%,46%), hsl(72,78%,46%),
        hsl(36,78%,46%), hsl(0,78%,46%));
}

/* Map + postcode-search results panel, side by side. The panel only renders
   after a resolvable search; the map's ResizeObserver re-fits when it appears. */
.engine-map-layout { display: flex; gap: 10px; align-items: stretch; }
.engine-map-layout .engine-map { flex: 1 1 auto; min-width: 0; }
.engine-map-results {
    flex: 0 0 330px; width: 330px; height: 480px;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border, #2a2e36); border-radius: 8px;
    background: var(--surface, #1a1d23);
}
.emr-head { padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2e36); }
.emr-back {
    display: inline-flex; margin: 0 0 6px; padding: 0; border: 0;
    background: transparent; color: #60a5fa; font: 600 11px/1.2 inherit;
    cursor: pointer;
}
.emr-back:hover { color: #93c5fd; text-decoration: underline; }
.emr-title { font-size: 13px; font-weight: 700; color: var(--text-bright, #e2e8f0); }
.emr-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.emr-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.emr-card {
    display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
    border: 1px solid var(--border, #2a2e36); background: rgba(255,255,255,0.02);
    transition: border-color .12s ease, transform .12s ease;
}
.emr-card:hover { border-color: var(--accent, #1cc478); transform: translateY(-1px); }
.emr-card-top { display: flex; align-items: center; gap: 7px; }
.emr-band-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.5); }
.emr-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--text-bright, #e2e8f0);
}
.emr-status { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.emr-status-on  { color: #1cc478; border: 1px solid rgba(28,196,120,0.45); background: rgba(28,196,120,0.10); }
.emr-status-off { color: #c4b5fd; border: 1px solid rgba(139,92,246,0.45); background: rgba(139,92,246,0.10); }
.emr-repairer { font-size: 11px; color: var(--text-dim); margin: 2px 0 0 16px; }
.emr-capacity { display: flex; align-items: center; gap: 7px; margin: 6px 0 0 16px; font-size: 11px; color: var(--text-dim); }
.emr-capacity-nums { white-space: nowrap; }
.emr-capacity-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(148,163,184,0.18); overflow: hidden; }
.emr-capacity-fill { display: block; height: 100%; border-radius: 999px; }
.emr-capacity-pct { white-space: nowrap; font-variant-numeric: tabular-nums; }
.emr-scales { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 16px; }
.emr-scale { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.35); color: var(--text-dim); }
.emr-scale-active { color: #1cc478; border-color: rgba(28,196,120,0.5); background: rgba(28,196,120,0.08); }
/* Covering-but-not-deployable targets sit under a divider, greyed: still
   discoverable (why isn't X getting work?) but visually out of the running. */
.emr-divider {
    margin-top: 4px; padding: 6px 2px 2px; font-size: 11px; font-weight: 600;
    color: var(--text-dim); border-top: 1px dashed var(--border, #2a2e36);
    cursor: help;
}
.emr-card--off { opacity: 0.55; }
.emr-card--off:hover { opacity: 0.85; }

/* Empty-state panel: teaches the click interaction instead of sitting blank. */
.engine-map-results--empty { justify-content: center; }
.emr-placeholder { padding: 18px 20px; text-align: center; }
.emr-placeholder-title { font-size: 14px; font-weight: 700; color: var(--text-bright, #e2e8f0); margin-bottom: 8px; }
.emr-placeholder-text { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.emr-placeholder-hint { margin-top: 12px; font-style: italic; opacity: 0.8; }
@media (max-width: 900px) {
    /* Stacked layout can't fit in one screen — let the page scroll normally
       and give the map a sane fixed share of the viewport. */
    .network-page.is-full-bleed { overflow-y: auto; }
    .engine-map-layout { flex-direction: column; }
    .engine-map-results { width: auto; flex: 0 0 auto; height: auto; max-height: 320px; }
    .network-map-host .engine-map { height: 55vh; min-height: 300px; }
    .network-map-host .engine-map-results { width: auto; height: auto; }
    .engine-map-filter-panel { position: fixed; top: 72px; left: 12px; width: calc(100vw - 24px); }
    .engine-map-filter-centres { grid-template-columns: 1fr; }
}
.engine-map .leaflet-container { background: #0a0c10; font-family: inherit; }
.engine-map-empty,
.engine-map-note { color: var(--text-dim); font-size: 12px; }
.engine-map-note-muted { opacity: 0.7; font-style: italic; }
.engine-map-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; }
.engine-map-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine-map-toggle {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--text-dim); cursor: pointer; user-select: none; white-space: nowrap;
}
.engine-map-toggle input { accent-color: var(--accent, #1cc478); cursor: pointer; }
.skill-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.skill-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; padding: 2px 0; }
.skill-check input { accent-color: var(--accent, #1cc478); cursor: pointer; }

/* Skill tags: one look everywhere a skill appears (lines, repairers, centres,
   jobs). The per-skill accent colour comes from EngineSkillTag.Style inline. */
.skill-tag {
    display: inline-flex; align-items: center; padding: 2px 9px; margin: 1px 4px 1px 0;
    border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6;
    white-space: nowrap; border: 1px solid; letter-spacing: 0.01em;
}
.skill-tag-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.skill-tag-toggle {
    cursor: pointer; background: transparent; color: var(--text-dim);
    border: 1px dashed rgba(148,163,184,0.45); transition: all .12s ease;
}
.skill-tag-toggle:hover { border-color: rgba(148,163,184,0.9); color: var(--text); }
.skill-tag-toggle.on { border-style: solid; }
.line-unassigned { color: var(--text-dim); font-style: italic; }

/* Deployable-capacity breakdown expander under the utilisation KPI. */
.util-breakdown { margin: -16px 0 28px; border: 1px solid var(--border, #2a2e36); background: var(--surface, #1a1d23); border-radius: 10px; padding: 12px 14px; }
.util-breakdown-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.util-breakdown-title { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.util-breakdown-sub { font-size: 12px; color: var(--text-dim); }
.util-breakdown-total td { border-top: 1px solid var(--border, #2a2e36); font-weight: 700; color: var(--text-bright); }
.util-breakdown .util-neg { color: #ef5350; }

/* No-result allocation alerts banner on the network dashboard. */
.alloc-alerts { margin: 0 0 16px; border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.06); border-radius: 10px; padding: 12px 14px; }
.alloc-alerts-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.alloc-alerts-title { font-size: 13px; font-weight: 700; color: #fbbf24; }
.alloc-alerts-sub { font-size: 12px; color: var(--text-dim); }
.alloc-alerts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alloc-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(245,158,11,0.15); }
.alloc-alert:first-child { border-top: none; }
.alloc-alert-body { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.alloc-alert-ref { font-weight: 600; color: var(--accent, #6ea8fe); text-decoration: none; white-space: nowrap; }
.alloc-alert-ref:hover { text-decoration: underline; }
.alloc-alert-reason { font-size: 12px; color: var(--text); }
.alloc-alert-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.engine-map-filter-input { min-width: 260px; max-width: 360px; }
.engine-map-lookup-result {
    font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border, #2a2e36); background: var(--surface, #1a1d23);
}
.engine-map-lookup-result--covered { border-color: rgba(28,196,120,0.45); color: var(--text); }
.engine-map-lookup-result--uncovered { border-color: rgba(245,165,36,0.45); color: var(--text); }
.engine-map-lookup-result--error { border-color: rgba(248,81,73,0.45); color: #f85149; }
.engine-map-lookup-centres { display: block; margin-top: 4px; color: var(--text-dim); font-size: 11px; }
.engine-map-crumb { font-size: 12px; color: var(--text-dim); }
.engine-map-crumb strong { color: var(--text); }
.engine-map-back {
    background: rgba(28,196,120,0.12); color: #1cc478;
    border: 1px solid rgba(28,196,120,0.45); border-radius: 6px;
    padding: 4px 10px; font: 600 12px/1.2 inherit; cursor: pointer;
}
.engine-map-back:hover { background: rgba(28,196,120,0.22); }
.engine-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.engine-map-footnotes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.engine-map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); align-items: center; }
.engine-map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 4px; vertical-align: middle; border: 1px solid #fff; }
.engine-map-legend .dot-explicit { width: 18px; height: 10px; border-radius: 3px; background: rgba(28,196,120,0.22); border: 2px solid #1cc478; }
.engine-map-legend .dot-fallback { width: 18px; height: 10px; border-radius: 3px; background: rgba(28,196,120,0.10); border: 1.5px dashed #1cc478; }
.engine-map-legend-sep { opacity: 0.4; }
.engine-map .leaflet-popup-content-wrapper { background: #14181f; color: #e2e8f0; border-radius: 8px; }
.engine-map .leaflet-popup-tip { background: #14181f; }
/* Coverage popups carry their own class so the dark theme never depends on the
   map wrapper's class surviving markup changes — white-on-white text is how the
   district popup became an unreadable white box. */
.leaflet-popup.engine-coverage-popup .leaflet-popup-content-wrapper {
    background: #14181f;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.leaflet-popup.engine-coverage-popup .leaflet-popup-tip { background: #14181f; }
.leaflet-popup.engine-coverage-popup .leaflet-popup-close-button { color: #94a3b8; }
.leaflet-tooltip.engine-coverage-tip {
    background: #14181f;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    pointer-events: none;
}
.leaflet-tooltip.engine-coverage-tip::before { display: none; }
.engine-coverage-label { background: transparent !important; border: none !important; }

/* List filtering + inline admin quick edits */
.list-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 12px;
}
.list-filters .f-input {
    min-width: 180px;
    max-width: 320px;
}
.quick-select {
    min-width: 110px;
}
.quick-toggle {
    min-height: 30px;
    padding: 4px 8px;
}
.quick-toggle .rule-toggle-name {
    font-size: 11px;
}
.quick-toggle .rule-toggle-desc,
.quick-toggle .app-toggle-meta {
    display: none;
}

/* Page header — matches the compact bordered "page-head" bar used across
   Dispatch / Capture so every app reads the same. Title is mono-uppercase,
   subtitle is a dim caption, actions sit just beneath. */
.engine-page-head {
    margin-bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: none;
}
.engine-page-head .page-head-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Page heading shares the canonical rrn-page-head look (green accent underline),
   so every Engine page matches Assess instead of the old mono/uppercase label. */
.page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    position: relative;
    padding-bottom: 10px;
}
.page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--rrn-green);
    border-radius: 3px;
}
.page-subtitle { margin: 0; color: var(--text); font-size: 14px; }

/* Small inline uses of .page-subtitle (status hints, marker meta) stay compact. */
.marker-list .page-subtitle,
.detail-grid .page-subtitle { font-size: 12px; color: var(--text-dim); }

/* AdminSection body padding — the shared sheet pads .admin-section-body
   horizontally (22px) and full-bleed children (.data-table, .admin-pager…)
   cancel it with matching -22px margins to span edge-to-edge. Engine must NOT
   zero that padding: doing so leaves the negative margins in place and every
   table hangs 22px off both card edges. We only add the vertical inset the
   shared component doesn't provide. */
.engine-page .admin-section-body {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* The pager is full-bleed (shared -22px margins) but has no horizontal padding
   of its own — inset it to line up with the table cell text (12px). */
.engine-page .admin-section-body > .admin-pager {
    padding-left: 12px;
    padding-right: 12px;
}
.engine-page .admin-section + .admin-section,
.engine-page .admin-section ~ .admin-section { margin-top: 16px; }

/* Markers list inside an AdminSection (repairer/centre detail). The section
   body padding comes from the .admin-section child rule above — the list must
   not zero it out. */
.engine-page .marker-list {
    list-style: none;
    margin: 0;
}
.engine-page .marker-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.engine-page .marker-list li:first-child { padding-top: 0; }
.engine-page .marker-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.engine-page .marker-list li.marker-expired { opacity: 0.55; }
.engine-page .marker-list .marker-item-title { margin-left: 6px; }
.engine-page .marker-list .marker-item-exp { margin-left: 8px; }
.engine-page .marker-list .page-subtitle { margin: 4px 0 0; }
.engine-page .marker-list .marker-item-actions { margin-top: 8px; }

/* Stack panels in the detail grid with a small gap when wrapping. */
.engine-page .detail-grid > * { display: flex; flex-direction: column; gap: 16px; }

/* ── KPI cards ─────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi-card { padding: 14px 16px; border-radius: 10px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); }
.kpi-label { font-size: 11px; letter-spacing: 0.5px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.kpi-amber .kpi-value { color: #f5a623; }
.kpi-red   .kpi-value { color: #ef5350; }
.kpi-green .kpi-value { color: #4caf50; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { text-align: left; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2e36); }
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); color: var(--text); }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Health bands ──────────────────────────────────────────────────────── */
.band { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.band-green   { background: rgba(76, 175, 80, 0.15);  color: #4caf50; }
.band-amber   { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.band-red     { background: rgba(239, 83, 80, 0.18);  color: #ef5350; }
.band-purple  { background: rgba(156, 39, 176, 0.18); color: #ba68c8; }
.band-unknown { background: rgba(140, 140, 140, 0.15); color: var(--text-dim); }

.empty-state { padding: 28px; border: 1px dashed var(--border, #2a2e36); border-radius: 8px; color: var(--text-dim); text-align: center; }
.dashboard-asof { color: var(--text-dim); font-size: 12px; margin-top: 14px; }

/* ── Home (ops command centre) ─────────────────────────────────────────── */
.home-search { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; }
.home-search-input { flex: 1; max-width: 620px; font-size: 14px; padding: 12px 14px; }
.kpi-link { display: block; text-decoration: none; color: inherit; }
.kpi-link .kpi-card { transition: border-color 0.15s ease, transform 0.15s ease; height: 100%; }
.kpi-link:hover .kpi-card { border-color: var(--accent, #1cc478); transform: translateY(-1px); }
.home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.home-grid > div { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) {
    .home-grid { grid-template-columns: 1fr; }
}

/* ── Network page — map fills the viewport height ──────────────────────── */
/* (Network page map sizing lives with the .network-page.is-full-bleed flex
   chain near the top of this file — no viewport height maths.) */

/* ── Tools landing page ────────────────────────────────────────────────── */
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tool-card { display: block; padding: 18px 20px; border-radius: 12px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); text-decoration: none; color: inherit; transition: transform 120ms ease, border-color 120ms ease; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent, #1cc478); }
.tool-card-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-bright); }
.tool-card-body { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* ── Buttons row in panels ─────────────────────────────────────────────── */
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Job detail / timeline ─────────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
.timeline-when { color: var(--text-dim); font-size: 12px; min-width: 130px; }
.timeline-event { font-weight: 600; }

.status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); color: var(--text); }
.status-AwaitingDeployment { background: rgba(245, 166, 35, 0.12);  color: #f5a623; border-color: transparent; }
.status-Allocated          { background: rgba(76, 175, 80, 0.12);   color: #4caf50; border-color: transparent; }
.status-FailedAllocation   { background: rgba(239, 83, 80, 0.18);   color: #ef5350; border-color: transparent; }

/* Pipeline stage pills — the shared CRM-derived job stage. */
.stage-ToDeploy                    { background: rgba(245, 166, 35, 0.12); color: #f5a623; border-color: transparent; }
.stage-ToBook                      { background: rgba(66, 165, 245, 0.14); color: #42a5f5; border-color: transparent; }
.stage-Booked                      { background: rgba(38, 198, 218, 0.14); color: #26c6da; border-color: transparent; }
.stage-CompleteAwaitingCostsImages { background: rgba(171, 71, 188, 0.16); color: #ce93d8; border-color: transparent; }
.stage-Complete                    { background: rgba(76, 175, 80, 0.12);  color: #4caf50; border-color: transparent; }
.stage-Invoiced                    { background: rgba(129, 199, 132, 0.16); color: #81c784; border-color: transparent; }
.stage-Cancelled                   { background: rgba(239, 83, 80, 0.18);  color: #ef5350; border-color: transparent; }

/* Pipeline stage chips — the filter row across the top of the Jobs board. */
.pipeline-chips .chip { cursor: pointer; color: var(--text); font-weight: 500; padding: 6px 12px; }
.pipeline-chips .chip:hover { border-color: var(--accent, #4caf50); }
.pipeline-chips .chip-active { border-color: var(--accent, #4caf50); background: rgba(76, 175, 80, 0.12); }
.pipeline-chips .chip strong { font-weight: 700; }

/* CRM note logs — one entry per "Author on date at time:" block */
.crm-notes { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.crm-note { background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 8px; padding: 8px 10px; }
.crm-note-hdr { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.crm-note-author { font-size: 12px; font-weight: 700; color: var(--text); }
.crm-note-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.crm-note-body { font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ── Priority pills ───────────────────────────────────────────────────────
   The new tri-state priority replaces the old urgency 1–5 + IsVip combo.
   Default ("None") shows nothing; "Priority" and "Vip" use accents that
   match Dispatch's colour vocabulary so the same badges read correctly
   across products. */
.priority-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
.priority-pill.priority-none      { background: transparent; color: var(--text-dim); border: 1px dashed var(--border); }
.priority-pill.priority-priority  { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.priority-pill.priority-vip       { background: rgba(156, 39, 176, 0.20); color: #ce93d8; }

/* ── Admin tabs ────────────────────────────────────────────────────────── */
/* Top-level admin tab bar — matches the Dispatch underline style (the integration
   sub-tabs inside an .admin-section keep the shared pill styling, which is more
   specific so it isn't affected by the bare .admin-tab rules below). */
.admin-tab-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--border);
}
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 44px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.admin-tab:hover { color: var(--text-bright); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab-icon { font-size: 13px; opacity: 0.7; }

/* ── Two-col grid (job detail, repairer detail) ────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 16px; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }

/* ── Inline list grouping ─────────────────────────────────────────────── */
.kv-list { margin: 0; display: grid; grid-template-columns: minmax(140px, 180px) 1fr; row-gap: 10px; column-gap: 18px; }
.kv-list dt {
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
    padding-top: 2px;
}
.kv-list dd { margin: 0; color: var(--text); word-break: break-word; }
@media (max-width: 700px) {
    .kv-list { grid-template-columns: 1fr; row-gap: 4px; }
    .kv-list dd { margin-bottom: 8px; }
}

/* Form controls used in modals / inline note adders. */
.engine-page .f-input,
.engine-page .f-textarea { width: 100%; padding: 8px 10px; background: var(--surface2, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; }
.engine-page .f-textarea { min-height: 64px; resize: vertical; }

/* ── Integrations admin ───────────────────────────────────────────────── */
.engine-integrations-admin .engine-int-body { display: flex; flex-direction: column; gap: 16px; }
.engine-integrations-admin .engine-int-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(280px, 1fr)); }
@media (max-width: 900px) { .engine-integrations-admin .engine-int-grid { grid-template-columns: 1fr; } }
.engine-integrations-admin .engine-int-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2, var(--surface));
}
.engine-integrations-admin .engine-int-field .rule-sub { margin-bottom: 0; }
.engine-integrations-admin .engine-int-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.engine-integrations-admin .engine-int-actions .f-input { flex: 1 1 200px; min-width: 180px; }
.engine-integrations-admin .engine-int-note {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2, var(--surface));
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.engine-integrations-admin .engine-integration-message { margin-bottom: 12px; }

/* Repairer integration settings are a dense configuration surface. The shared
   admin components already provide a card and inset, so keep this panel compact
   instead of stacking three generous padding layers around every control. */
.engine-repairer-integrations .admin-tabbed-section {
    gap: 10px;
}
.engine-repairer-integrations .section-head {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.engine-repairer-integrations .admin-section-body {
    padding: 10px 14px;
}
.engine-repairer-integrations .admin-section-body:empty {
    display: none;
}
.engine-repairer-integrations .admin-section + .admin-section,
.engine-repairer-integrations .admin-section ~ .admin-section {
    margin-top: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-body {
    gap: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-grid {
    gap: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-field {
    gap: 4px;
    padding: 10px 12px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-feature-state {
    gap: 6px 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-actions {
    gap: 8px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-note {
    padding: 8px 10px;
}
.engine-notification-rules {
    display: grid;
    gap: 10px;
}
.engine-notification-rule {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2, var(--surface));
}
.engine-notification-rule__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.engine-notification-rule__head > div {
    display: grid;
    gap: 2px;
}
.engine-notification-rule__head small {
    color: var(--text-dim);
    font: 11px/1.4 'Red Hat Mono', monospace;
}
.engine-integrations-admin .engine-int-field--wide {
    grid-column: 1 / -1;
}
.engine-email-preview {
    display: grid;
    gap: 8px;
    padding-top: 10px;
}
.engine-email-preview iframe {
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
@media (max-width: 700px) {
    .engine-repairer-integrations .section-head {
        display: grid;
        align-items: stretch;
    }
    .engine-repairer-integrations .section-head > :last-child {
        justify-self: start;
    }
}

/* Log table grids — explicit columns keep things lining up the way Assess does. */
.engine-postcode-log-cols { grid-template-columns: 140px 110px 110px 100px 110px 130px 64px 90px 130px minmax(180px, 1fr); min-width: 1180px; }
.engine-ors-log-cols      { grid-template-columns: 140px 100px 160px 110px 90px 90px 64px 90px 90px minmax(160px, 1fr) 100px; min-width: 1280px; }
.engine-crm-log-cols      { grid-template-columns: 140px 145px 150px 60px minmax(180px, 1fr) 70px 64px 80px minmax(140px, 1fr); min-width: 1080px; }
.engine-lookup-log-table .table-row { align-items: center; }
.engine-lookup-log-table .audit-details { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-operation-cell { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }

/* Log filters bar shared between postcode + ORS tabs. */
.int-log-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.int-log-filters .f-input { max-width: 200px; }

/* Expanded JSON detail row beneath ORS log entries. */
.rt-log-detail-row { grid-column: 1 / -1; padding: 12px 14px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border); }
.rt-log-json { margin: 0; padding: 10px 12px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 6px; font: 11.5px/1.5 'Red Hat Mono', monospace; color: var(--text); white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.rt-result-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.4 'Red Hat Mono', monospace; letter-spacing: 0.5px; }
.rt-result-ok    { background: rgba(28,196,120,0.15); color: #1cc478; }
.rt-result-fail  { background: rgba(239,68,68,0.18);  color: #ef4444; }

.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.pager-info { color: var(--text-dim); font-size: 12px; }
.ok-box  { padding: 10px 12px; background: rgba(28,196,120,0.10); border: 1px solid rgba(28,196,120,0.35); color: #1cc478; border-radius: 6px; }
.err-box { padding: 10px 12px; background: rgba(239,68,68,0.10);  border: 1px solid rgba(239,68,68,0.35);  color: #ef4444; border-radius: 6px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-bright); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.admin-empty { padding: 18px; color: var(--text-dim); text-align: center; }
.table-scroll-wrap { overflow-x: auto; }

/* ── Job identity header (manual-job modal) ──────────────────────────────
   Mirrors RapidDispatch.Web's JobEditForm chrome so the "look and feel"
   stays consistent across products. */
.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 700px) { .modal-2col { grid-template-columns: 1fr; } }

.job-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--surface2, var(--surface));
    border-radius: 10px;
    border: 1px solid var(--border);
}
.job-identity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.job-title { font-size: 15px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.job-identity-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ref-badge {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border2, var(--border));
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .5px;
}

/* Form cards group related fields with a coloured spine on the label.
   Mirrors RapidDispatch.Web/Shared/JobEditForm.razor.css. */
.form-card {
    background: var(--surface2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 6px;
    margin-bottom: 12px;
    transition: box-shadow .2s;
}
.form-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.form-card-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: .3px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--accent, #4f8df7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 2px; margin-bottom: 10px; }

/* ── Detail pages (CentreDetail + RepairerDetail) ─────────────────────────
   Chip rows, the inactive banner and marker tag pills are shared between the
   two detail screens, so they live here rather than in inline page styles. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); font-size: 12px; }
.chip-remove { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.chip-remove:hover { color: #ef5350; }

.centre-inactive-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(245,165,36,0.12);
    border: 1px solid rgba(245,165,36,0.45);
    border-radius: 8px;
    color: #f5a524;
}
.centre-inactive .form-card,
.centre-inactive .data-table { opacity: 0.7; }

.archived-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(229,72,77,0.12);
    border: 1px solid rgba(229,72,77,0.45);
    border-radius: 8px;
    color: #e5484d;
}
.repairer-archived .form-card,
.repairer-archived .data-table,
.repairer-archived .centre-grid { opacity: 0.7; }

.marker-tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.marker-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; line-height: 1.6;
    border: 1px solid var(--border, #2a2e36);
    background: var(--surface, #1a1d23);
}
.marker-red    { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); color: #f87171; }
.marker-amber  { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.10); color: #fbbf24; }
.marker-green  { border-color: rgba(28,196,120,0.45); background: rgba(28,196,120,0.10); color: #1cc478; }
.marker-tag-sev { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 10px; }
.marker-tag-title { font-weight: 500; color: var(--text); }
.marker-tag-exp { color: var(--text-dim); font-size: 10px; }
.marker-tag-x   { background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0; }
.marker-tag-x:hover { color: #ef5350; }

.row-inactive { opacity: 0.6; }
.status-inactive { background: rgba(140,140,140,0.15); color: var(--text-dim); border-color: transparent; }

/* "No coverage" pill: active-looking locations the allocator can never pick. */
.pill-no-coverage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(239, 83, 80, 0.18);
    color: #ef5350;
    white-space: nowrap;
}

/* Unified repair-network list: centres render as child rows under their repairer. */
.network-row-indent { color: var(--text-dim); margin: 0 6px 0 14px; }
.network-row-parent { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.network-row-parent a { color: var(--text-dim); }
.network-row-parent a:hover { color: var(--text); }

/* Inline failure reason under the status pill on the jobs list. */
.reason-cell { color: var(--text-dim); font-size: 12px; max-width: 280px; margin-top: 4px; }

/* Priority radio cards: mirrors Dispatch's segmented look. */
.priority-radio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .priority-radio-row { grid-template-columns: 1fr; } }
.priority-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.priority-option input { position: absolute; opacity: 0; pointer-events: none; }
.priority-option-label { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.priority-option-hint  { font-size: 11px; color: var(--text-dim); }
.priority-option:hover { border-color: var(--accent, #4f8df7); }
.priority-option.selected {
    border-color: var(--accent, #4f8df7);
    background: color-mix(in srgb, var(--accent, #4f8df7) 10%, transparent);
}

/* ── Repairer / centre change-history timeline ─────────────────────────────── */
.eng-history { list-style: none; margin: 0; padding: 4px 0 0; }
.eng-h-item { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.eng-h-item::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--line, #e2e8ef); }
.eng-h-item:last-child::before { display: none; }
.eng-h-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; background: var(--text-dim, #7a90aa); box-shadow: 0 0 0 3px var(--surface, #fff); z-index: 1; }
.eng-h-dot-info { background: #4f8df7; }
.eng-h-dot-ok { background: #1cc478; }
.eng-h-dot-warn { background: #f0854a; }
.eng-h-body { flex: 1; min-width: 0; }
.eng-h-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.eng-h-action { font-weight: 700; font-size: 13px; }
.eng-h-actor { font-size: 12px; color: var(--text-dim, #7a90aa); }
.eng-h-time { font-size: 11.5px; color: var(--text-dim, #7a90aa); margin-left: auto; }
.eng-h-detail { font-size: 12.5px; color: var(--text); margin-top: 3px; line-height: 1.45; }

/* ── Shared entity-detail tab rail (jobs, repairers and centres) ─────────── */
.detail-tabbed { display:flex; flex-direction:row; gap:14px; align-items:flex-start; min-width:0; margin-bottom:16px; }
.detail-rail { flex:0 0 148px; display:flex; flex-direction:column; gap:2px; position:sticky; top:12px; }
.rail-tab { display:flex; align-items:center; justify-content:space-between; gap:8px; background:none; border:none; border-left:2px solid transparent; border-radius:0 6px 6px 0; text-align:left; padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer; }
.rail-tab:hover { color:var(--text-bright); background:var(--surface2); }
.rail-tab.active { color:var(--accent); border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.rail-tab-count { font-size:10px; font-weight:700; background:var(--surface2); border-radius:999px; padding:1px 7px; color:var(--text-dim); }
.rail-tab.active .rail-tab-count { color:var(--accent); }
.detail-tab-content { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:16px; }
.detail-tab-content .form-card { margin-bottom:0; }

/* ── Paged network-detail lists and field-level history ─────────────────── */
.network-list-toolbar {
    display:grid;
    grid-template-columns:minmax(220px, 1fr) auto auto;
    gap:8px;
    align-items:center;
    margin-bottom:14px;
}
.network-list-toolbar.history-list-toolbar {
    grid-template-columns:minmax(220px, 1fr) minmax(180px, 240px) auto auto;
}
.network-change-history { padding-top:0; }
.history-change-list { display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.history-field-change {
    display:grid;
    grid-template-columns:minmax(150px, 0.8fr) minmax(100px, 1fr) auto minmax(100px, 1fr);
    gap:8px;
    align-items:center;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--bg);
    font-size:12px;
}
.history-field-name { font-weight:700; color:var(--text-bright); }
.history-field-value { min-width:0; overflow-wrap:anywhere; }
.history-field-before { color:var(--text-dim); }
.history-field-after { color:var(--text); font-weight:600; }
.history-field-arrow { color:var(--text-dim); }
.history-change-text {
    position:relative;
    padding:4px 8px 4px 18px;
    color:var(--text);
    font-size:12.5px;
    line-height:1.4;
}
.history-change-text::before {
    content:"";
    position:absolute;
    left:6px;
    top:10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--text-dim);
}

/* ── Repairer workforce, evidence and invoice administration ───────────── */
.engine-repairer-workflow,
.engine-job-repairer-workflow {
    display:grid;
    gap:14px;
}
.engine-feature-state {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
}
.engine-portal-layout {
    display:grid;
    gap:18px;
}
.engine-portal-skeleton {
    display:grid;
    gap:12px;
}
.engine-portal-skeleton span {
    display:block;
    height:76px;
    border:1px solid var(--border);
    border-radius:10px;
    background:linear-gradient(90deg,var(--surface) 20%,var(--surface2) 50%,var(--surface) 80%);
    background-size:240% 100%;
    animation:engine-portal-shimmer 1.4s ease-in-out infinite;
}
@keyframes engine-portal-shimmer {
    from { background-position:100% 0; }
    to { background-position:-100% 0; }
}
/* Must stay visible: the row action menu is absolutely positioned and would
   otherwise be clipped for the last user in the table. */
.engine-portal-section {
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    overflow:visible;
}
.engine-portal-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
}
.engine-portal-section-head > div {
    display:grid;
    gap:4px;
}
.engine-portal-section-head h3,
.engine-portal-result h3 {
    margin:0;
    color:var(--text-bright);
    font-size:15px;
}
.engine-portal-section-head p,
.engine-portal-empty p,
.engine-portal-result p,
.engine-portal-fallback p {
    margin:0;
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.45;
}
.engine-choice-group {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:18px;
    border:0;
}
.engine-choice-group > legend,
.engine-access-fieldset > legend {
    padding:0;
    color:var(--text-bright);
    font-size:12px;
    font-weight:700;
}
.engine-choice-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-height:78px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
    cursor:pointer;
}
.engine-choice-card.selected {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
}
.engine-choice-card:focus-within {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.engine-choice-card input {
    margin-top:3px;
    accent-color:var(--accent);
}
.engine-choice-card > span {
    display:grid;
    gap:4px;
}
.engine-choice-card strong {
    color:var(--text-bright);
    font-size:13px;
}
.engine-choice-card small {
    color:var(--text-dim);
    font-size:12px;
    line-height:1.4;
}
.engine-choice-group[disabled] .engine-choice-card {
    cursor:not-allowed;
    opacity:.68;
}
.engine-portal-section > .err-box {
    margin:0 18px 16px;
}
.engine-portal-section-actions {
    display:flex;
    justify-content:flex-end;
    padding:0 18px 18px;
}
.engine-portal-empty {
    display:grid;
    justify-items:start;
    gap:8px;
    padding:28px 18px;
}
.engine-portal-empty strong {
    color:var(--text-bright);
}
.engine-portal-table-wrap {
    width:100%;
    /* The last row loses its rule, so the card needs the space back. */
    padding-bottom:6px;
    overflow:visible;
}
.engine-portal-table {
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
}
.engine-portal-table th,
.engine-portal-table td {
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:middle;
}
.engine-portal-table th {
    color:var(--text-dim);
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.engine-portal-table tbody tr:last-child td {
    border-bottom:0;
}
.engine-portal-table td:first-child strong {
    display:block;
    color:var(--text-bright);
}
.engine-portal-email {
    display:block;
    margin-top:2px;
    color:var(--text-dim);
    overflow-wrap:anywhere;
}
/* Stays a real table-cell: a display:flex td is pulled out of the table's own
   layout, which left this column's row divider sitting 6px above the rest.
   Scoped to the table so it outranks the shared "td { text-align:left }". */
.engine-portal-table .engine-portal-row-actions {
    text-align:right;
    white-space:nowrap;
}
.engine-role-badge {
    display:inline-flex;
    padding:3px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface2);
    color:var(--text);
    font-size:11px;
    font-weight:700;
}
.engine-action-menu {
    position:relative;
    display:inline-block;
}
.engine-action-menu__trigger {
    display:grid;
    width:34px;
    height:30px;
    place-items:center;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface2);
    color:var(--text-bright);
    cursor:pointer;
    font-weight:800;
    letter-spacing:.08em;
}
.engine-action-menu__trigger:hover,
.engine-action-menu__trigger:focus-visible {
    border-color:var(--accent);
    outline:none;
}
/* Invisible full-screen layer under the open panel: any click that isn't on a
   menu item lands here and closes the menu. */
.engine-action-menu__backdrop {
    position:fixed;
    inset:0;
    z-index:19;
    background:transparent;
}
.engine-action-menu__panel {
    position:absolute;
    z-index:20;
    top:calc(100% + 5px);
    right:0;
    display:grid;
    min-width:190px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}
/* The table is usually the last thing on the page, so the bottom row opens its
   menu upwards rather than off the end of the document. Short tables keep the
   menu below: flipping up there would cover the section heading and its Invite
   button instead of the rows the menu belongs to. */
.engine-portal-table tbody tr:last-child:nth-child(n+3) .engine-action-menu__panel {
    top:auto;
    bottom:calc(100% + 5px);
}
.engine-action-menu__panel button {
    width:100%;
    padding:8px 10px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text);
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.engine-action-menu__panel button:hover,
.engine-action-menu__panel button:focus-visible {
    background:var(--surface2);
    color:var(--text-bright);
    outline:none;
}
.engine-action-menu__panel button.is-danger {
    color:var(--danger,#ef5350);
}
.engine-action-menu__panel button:disabled {
    cursor:not-allowed;
    opacity:.55;
}
.engine-portal-form {
    display:grid;
    gap:16px;
}
.engine-portal-notification-inspector {
    display:grid;
    gap:18px;
}
.engine-portal-notification-inspector h3 {
    margin:0 0 8px;
    color:var(--text-bright);
    font-size:14px;
}
.engine-choice-group-compact {
    padding:0;
}
.engine-access-summary-card,
.engine-portal-fallback {
    display:grid;
    gap:4px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-access-summary-card strong,
.engine-portal-fallback strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-access-summary-card span {
    color:var(--text-dim);
    font-size:12px;
    line-height:1.4;
}
.engine-access-fieldset {
    display:grid;
    gap:14px;
    margin:0;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
}
.engine-segmented-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.engine-segmented-options label {
    cursor:pointer;
}
.engine-segmented-options input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.engine-segmented-options span {
    display:block;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    text-align:center;
    font-size:12px;
    font-weight:700;
}
.engine-segmented-options input:checked + span {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
    color:var(--text-bright);
}
.engine-segmented-options input:focus-visible + span {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.engine-centre-picker {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px;
    max-height:220px;
    overflow:auto;
    padding:10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--bg);
}
.engine-direct-jobs-toggle {
    padding-top:2px;
}
.engine-direct-jobs-toggle > span {
    display:grid;
    gap:2px;
}
.engine-direct-jobs-toggle strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-direct-jobs-toggle small {
    color:var(--text-dim);
    font-size:11.5px;
}
.engine-readonly-field {
    display:grid;
    gap:4px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-readonly-field span {
    color:var(--text-dim);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}
.engine-readonly-field strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-portal-action-error {
    margin:14px 18px 0;
}
.engine-portal-result {
    display:grid;
    justify-items:start;
    gap:10px;
}
.engine-portal-fallback {
    width:100%;
}
.engine-portal-fallback a {
    color:var(--accent);
    font-size:12.5px;
    font-weight:700;
}
.engine-confirm-copy {
    margin:0;
    color:var(--text);
    font-size:13px;
    line-height:1.55;
}
.engine-invoice-decisions {
    margin:0;
    padding:12px 14px 12px 30px;
    display:grid;
    gap:6px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-dim);
    font-size:12px;
    line-height:1.5;
}
.engine-invoice-decisions strong { color:var(--text-bright); }

/* ── Repairer invoice review: summary first, evidence second, decision last ── */
.engine-invoice-review {
    display:grid;
    gap:16px;
    min-width:0;
}
.engine-invoice-review__hero {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}
.engine-invoice-review__copy {
    display:grid;
    gap:7px;
    min-width:0;
}
.engine-invoice-review__status {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.engine-invoice-review__copy h3 {
    margin:0;
    color:var(--text-bright);
    font-size:19px;
    line-height:1.25;
}
.engine-invoice-review__copy p {
    margin:0;
    max-width:720px;
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.5;
}
.engine-invoice-metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(120px,1fr));
    gap:8px;
    margin:0;
}
.engine-invoice-metrics > div {
    min-width:0;
    padding:12px 13px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface2);
}
.engine-invoice-metrics > div.is-warning {
    border-color:color-mix(in srgb, var(--amber, #f5a623) 60%, var(--border));
    background:color-mix(in srgb, var(--amber, #f5a623) 8%, var(--surface2));
}
.engine-invoice-metrics > div.is-match {
    border-color:color-mix(in srgb, var(--green, #66bb6a) 35%, var(--border));
}
.engine-invoice-metrics dt {
    color:var(--text-dim);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.045em;
    text-transform:uppercase;
}
.engine-invoice-metrics dd {
    margin:5px 0 0;
    color:var(--text-bright);
    font-size:18px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
.engine-invoice-metrics small {
    display:block;
    margin-top:3px;
    color:var(--text-dim);
    font-size:10.5px;
}
.engine-invoice-breakdown {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
    align-items:center;
    gap:10px 18px;
    padding:10px 13px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface2);
}
.engine-invoice-breakdown > div {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}
.engine-invoice-breakdown > div + div {
    padding-left:18px;
    border-left:1px solid var(--border);
}
.engine-invoice-breakdown span {
    color:var(--text-dim);
    font-size:11px;
}
.engine-invoice-breakdown strong {
    color:var(--text-bright);
    font-size:12.5px;
    white-space:nowrap;
}
.engine-invoice-alert {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    padding:13px 14px;
    border:1px solid color-mix(in srgb, var(--amber, #f5a623) 48%, var(--border));
    border-radius:9px;
    background:color-mix(in srgb, var(--amber, #f5a623) 8%, var(--surface));
}
.engine-invoice-alert__icon {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:999px;
    background:color-mix(in srgb, var(--amber, #f5a623) 18%, transparent);
    color:var(--amber, #f5a623);
    font-weight:900;
}
.engine-invoice-alert h4,
.engine-invoice-decision h4 {
    margin:0;
    color:var(--text-bright);
    font-size:13px;
}
.engine-invoice-alert p,
.engine-invoice-decision p {
    margin:3px 0 0;
    color:var(--text-dim);
    font-size:11.5px;
}
.engine-invoice-alert ul {
    display:grid;
    gap:5px;
    margin:9px 0 0;
    padding-left:18px;
    color:var(--text);
    font-size:12.5px;
    line-height:1.45;
}
.engine-invoice-notice {
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
    color:var(--text);
    font-size:12.5px;
    line-height:1.45;
}
.engine-invoice-section {
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
}
.engine-invoice-section__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border-bottom:1px solid var(--border);
    background:var(--surface2);
}
.engine-invoice-section__head > div {
    display:grid;
    gap:3px;
}
.engine-invoice-section__head h4 {
    margin:0;
    color:var(--text-bright);
    font-size:13px;
}
.engine-invoice-section__head p {
    margin:0;
    color:var(--text-dim);
    font-size:11.5px;
}
.engine-invoice-documents {
    display:grid;
    gap:7px;
    padding:9px;
}
.engine-invoice-document {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
    color:var(--text);
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.engine-invoice-document:hover,
.engine-invoice-document:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 5%, var(--surface2));
    outline:none;
}
.engine-invoice-document:disabled {
    cursor:wait;
    opacity:.65;
}
.engine-invoice-document__icon {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:8px;
    background:color-mix(in srgb, var(--accent) 11%, transparent);
    color:var(--accent);
}
.engine-invoice-document__icon svg {
    width:19px;
    height:19px;
}
.engine-invoice-document__copy {
    display:grid;
    gap:2px;
    min-width:0;
}
.engine-invoice-document__copy strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-invoice-document__copy small {
    overflow:hidden;
    color:var(--text-dim);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.engine-invoice-document__copy span {
    color:var(--text-dim);
    font-size:10.5px;
    line-height:1.35;
}
.engine-invoice-document__open {
    color:var(--accent);
    font-size:11.5px;
    font-weight:700;
    white-space:nowrap;
}
.engine-invoice-line-list {
    display:grid;
    gap:7px;
    padding:9px;
}
.engine-invoice-line {
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(68px,auto) 16px minmax(78px,auto) auto;
    align-items:center;
    gap:9px;
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-invoice-line.is-changed {
    border-color:color-mix(in srgb, var(--amber, #f5a623) 42%, var(--border));
}
.engine-invoice-line.is-added {
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
}
.engine-invoice-line.is-removed {
    border-color:color-mix(in srgb, var(--danger, #ef5350) 34%, var(--border));
    background:color-mix(in srgb, var(--danger, #ef5350) 5%, var(--surface2));
}
.engine-invoice-line__identity {
    display:grid;
    gap:3px;
    min-width:0;
}
.engine-invoice-line__identity strong {
    overflow:hidden;
    color:var(--text-bright);
    font-size:12.5px;
    text-overflow:ellipsis;
}
.engine-invoice-line__identity span,
.engine-invoice-line__amount small {
    color:var(--text-dim);
    font-size:10.5px;
}
.engine-invoice-line__amount {
    display:grid;
    gap:2px;
    text-align:right;
}
.engine-invoice-line__amount strong {
    color:var(--text-bright);
    font-size:12.5px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.engine-invoice-line__arrow {
    color:var(--text-dim);
    text-align:center;
}
.engine-invoice-line__state {
    justify-self:end;
    padding:3px 7px;
    border-radius:999px;
    color:var(--text-dim);
    font-size:10.5px;
    font-weight:800;
}
.engine-invoice-line__state.is-changed {
    background:color-mix(in srgb, var(--amber, #f5a623) 14%, transparent);
    color:var(--amber, #c98100);
}
.engine-invoice-line__state.is-added {
    background:color-mix(in srgb, var(--accent) 13%, transparent);
    color:var(--accent);
}
.engine-invoice-line__state.is-removed {
    background:color-mix(in srgb, var(--danger, #ef5350) 12%, transparent);
    color:var(--danger, #ef5350);
}
.engine-invoice-line__reason {
    grid-column:1 / -1;
    display:flex;
    gap:8px;
    margin:0;
    padding-top:7px;
    border-top:1px solid var(--border);
    color:var(--text);
    font-size:11.5px;
    line-height:1.4;
}
.engine-invoice-line__reason span {
    flex:0 0 auto;
    color:var(--text-dim);
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.engine-invoice-table-scroll {
    max-width:100%;
    overflow-x:auto;
}
.engine-invoice-table-scroll > .data-table {
    min-width:680px;
}
.engine-invoice-lines-section .engine-invoice-addline,
.engine-invoice-lines-section .engine-invoice-editbar {
    margin-right:9px;
    margin-left:9px;
}
.engine-invoice-lines-section .engine-invoice-editbar {
    margin-bottom:9px;
}
.engine-invoice-hidden {
    margin:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface2);
}
.engine-invoice-hidden > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    color:var(--text-bright);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.engine-invoice-hidden > summary small {
    color:var(--text-dim);
    font-size:10.5px;
    font-weight:500;
}
.engine-invoice-hidden[open] > summary {
    border-bottom:1px solid var(--border);
}
.engine-invoice-hidden__note {
    margin:0;
    padding:8px 12px 10px;
    color:var(--text-dim);
    font-size:11px;
}
.engine-invoice-tools > .actions-row {
    padding:11px 13px;
}
.engine-invoice-tools > .engine-invoice-editnote {
    padding:0 13px 11px;
}
.engine-invoice-decision {
    display:grid;
    grid-template-columns:minmax(180px,1fr) auto;
    align-items:center;
    gap:14px;
    padding:13px 14px;
    border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius:10px;
    background:color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.engine-invoice-decision__copy {
    display:grid;
    gap:2px;
}
.engine-invoice-decision__actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.engine-invoice-decision .engine-invoice-sendback {
    grid-column:1 / -1;
    width:100%;
}

.engine-evidence-upload {
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.engine-evidence-upload input[type=file] {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.engine-additional-evidence {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-additional-evidence h4 { margin:0; color:var(--text-bright); }

/* ── Repair photos shown as inline thumbnails ─────────────────────────────── */
.engine-photo-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:12px;
    margin:4px 0;
}
.engine-photo-grid__heading { margin:16px 0 0; color:var(--text-bright); }
.engine-photo-tile {
    display:grid;
    gap:8px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface);
}
.engine-photo-tile.is-missing {
    border-style:dashed;
    border-color:color-mix(in srgb, #d23c3c 40%, var(--border));
}
.engine-photo-tile__thumb {
    position:relative;
    aspect-ratio:4 / 3;
    border-radius:7px;
    overflow:hidden;
    background:var(--surface2);
    display:flex;
    align-items:center;
    justify-content:center;
}
.engine-photo-tile__open {
    padding:0;
    border:0;
    background:none;
    width:100%;
    height:100%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.engine-photo-tile__open img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.engine-photo-tile__doc {
    flex-direction:column;
    gap:4px;
    color:var(--text-dim);
    font-size:22px;
}
.engine-photo-tile__doc small { font-size:11px; font-weight:600; }
.engine-photo-tile__empty { font-size:26px; color:var(--text-dim); opacity:.6; }
.engine-photo-tile__meta { display:grid; gap:4px; justify-items:start; }
.engine-photo-tile__meta strong { font-size:13px; color:var(--text-bright); }
.engine-photo-tile__meta small { color:var(--text-dim); font-size:11.5px; }
.engine-additional-evidence > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.engine-additional-evidence > div > span { display:grid; gap:2px; }
.engine-additional-evidence small { color:var(--text-dim); }
.engine-invoice-cost-input { min-width:100px; }
.engine-diff-table tr.is-changed td { background:rgba(245,166,35,.08); }
.engine-diff-table tr.is-added td { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.engine-diff-table tr.is-removed td { background:rgba(210,60,60,.06); }
.engine-invoice-addline {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:10px;
    padding:10px;
    border:1px dashed var(--border);
    border-radius:8px;
}
.engine-invoice-addline > select { flex:1 1 240px; min-width:200px; }
.engine-invoice-addline > input:not(.engine-invoice-cost-input) { flex:1 1 200px; min-width:160px; }
.engine-invoice-addline > .engine-invoice-cost-input { flex:0 0 140px; }
.engine-invoice-editbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
}
.engine-invoice-editnote { margin:6px 0 0; font-size:12px; color:var(--text-dim); }
.engine-invoice-preview {
    display:grid;
    gap:10px;
}
.engine-invoice-preview > header {
    display:flex;
    align-items:center;
    gap:10px;
}
.engine-invoice-preview > header .btn {
    margin-left:auto;
}
.engine-invoice-preview iframe,
.engine-invoice-preview img {
    display:block;
    width:100%;
    min-height:480px;
    max-height:70vh;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    object-fit:contain;
}
.engine-invoice-sendback {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-workflow-assignment {
    display:grid;
    grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr) auto;
    gap:10px;
    align-items:center;
}
.engine-workflow-override {
    display:grid;
    gap:8px;
    margin-top:12px;
}

@media (max-width: 900px) {
    .detail-tabbed { flex-direction:column; }
    .detail-rail { position:static; flex-direction:row; flex-wrap:wrap; width:100%; }
    .rail-tab { border-left:none; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; }
    .rail-tab.active { border-bottom-color:var(--accent); }
    .network-list-toolbar { grid-template-columns:1fr auto; }
    .network-list-toolbar.history-list-toolbar { grid-template-columns:1fr auto; }
    .network-list-toolbar .f-input { grid-column:1 / -1; }
    .history-field-change { grid-template-columns:1fr; gap:3px; }
    .history-field-arrow { display:none; }
    .engine-workflow-assignment { grid-template-columns:1fr; }
    .engine-invoice-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .engine-invoice-breakdown { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .engine-invoice-breakdown > .status-pill { grid-column:1 / -1; justify-self:start; }
    .engine-invoice-document { grid-template-columns:38px minmax(0,1fr) auto; }
    .engine-invoice-document__open { display:none; }
    .engine-invoice-decision { grid-template-columns:1fr; }
    .engine-invoice-decision__actions { justify-content:flex-start; }
}

@media (max-width: 760px) {
    .engine-invoice-metrics,
    .engine-invoice-breakdown { grid-template-columns:1fr; }
    .engine-invoice-breakdown > div {
        justify-content:space-between;
    }
    .engine-invoice-breakdown > div + div {
        padding-top:8px;
        padding-left:0;
        border-top:1px solid var(--border);
        border-left:0;
    }
    .engine-invoice-document {
        grid-template-columns:34px minmax(0,1fr);
        align-items:start;
    }
    .engine-invoice-document__icon {
        width:32px;
        height:32px;
    }
    .engine-invoice-document > .status-pill {
        grid-column:2;
        justify-self:start;
    }
    .engine-invoice-line {
        grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) auto;
    }
    .engine-invoice-line__identity {
        grid-column:1 / -1;
    }
    .engine-invoice-section__head {
        align-items:flex-start;
    }
    .engine-invoice-decision__actions > .btn {
        flex:1 1 160px;
    }
    .engine-portal-section-head {
        align-items:flex-start;
        flex-direction:column;
    }
    .engine-portal-section-head .btn {
        width:100%;
    }
    .engine-choice-group,
    .engine-choice-group-compact,
    .engine-centre-picker,
    .engine-segmented-options {
        grid-template-columns:1fr;
    }
    .engine-portal-table-wrap {
        padding:12px;
        overflow:visible;
    }
    .engine-portal-table,
    .engine-portal-table tbody,
    .engine-portal-table tr,
    .engine-portal-table td {
        display:block;
        width:100%;
    }
    .engine-portal-table thead {
        display:none;
    }
    .engine-portal-table tbody {
        display:grid;
        gap:10px;
    }
    .engine-portal-table tr {
        padding:4px 12px;
        border:1px solid var(--border);
        border-radius:8px;
        background:var(--surface2);
    }
    .engine-portal-table td {
        display:grid;
        grid-template-columns:minmax(90px,.35fr) minmax(0,1fr);
        gap:10px;
        padding:9px 0;
    }
    .engine-portal-table td::before {
        content:attr(data-label);
        color:var(--text-dim);
        font-size:10px;
        font-weight:700;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .engine-portal-row-actions {
        display:flex !important;
        flex-wrap:wrap;
        justify-content:flex-start;
        white-space:normal;
    }
    .engine-portal-row-actions::before {
        display:none;
    }
    .engine-action-menu {
        width:100%;
    }
    .engine-action-menu__trigger {
        margin-left:auto;
    }
    .engine-action-menu__panel {
        position:static;
        width:100%;
        margin-top:5px;
        box-shadow:none;
    }
}

/* ── Repair progression workspace ─────────────────────────────────────────
   A queue on the left, the selected job beside it. The row is built to be
   read in one pass: what it is, who has it, how long they have had it, and
   the last thing anybody said — so a chaser can triage without opening it. */

.prog-views {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.prog-view {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface2, var(--surface));
    color:var(--text-dim);
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
}
.prog-view:hover { color:var(--text-bright); border-color:var(--text-dim); }
.prog-view.is-active {
    color:var(--accent);
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.prog-view__count {
    font-size:11px;
    font-weight:800;
    padding:1px 7px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border);
    font-variant-numeric:tabular-nums;
}
.prog-view.is-active .prog-view__count { color:var(--accent); }
/* Declined and Help requested mean somebody is stuck waiting on us. */
.prog-view.is-urgent:not(.is-active) .prog-view__count {
    color:var(--amber, #f5a623);
    border-color:color-mix(in srgb, var(--amber, #f5a623) 40%, transparent);
}
.prog-lead {
    margin:0 0 12px;
    font-size:12.5px;
    color:var(--text-dim);
    line-height:1.5;
}

/* The panel is a fixed overlay, so the queue keeps the full width whether or
   not a job is open — no reflow when something is selected. */
.prog-layout { display:block; }
/* Shared by the job drawer and the invoice review that sits alongside it, so
   the two always meet exactly. */
:root { --prog-panel-w: min(680px, 96vw); }
.prog-list { min-width:0; display:flex; flex-direction:column; gap:8px; }

.prog-row {
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:11px 13px;
    border:1px solid var(--border);
    border-left:3px solid var(--border);
    border-radius:8px;
    background:var(--surface2, var(--surface));
    cursor:pointer;
    transition:border-color .15s, box-shadow .15s;
}
.prog-row:hover { box-shadow:0 2px 10px rgba(0,0,0,.18); }
.prog-row.is-selected {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
}
.prog-row__main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.prog-row__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.prog-row__ref {
    font-family:var(--mono, ui-monospace, monospace);
    font-size:11.5px;
    font-weight:700;
    color:var(--text-bright);
}
.prog-row__customer {
    font-size:13px;
    font-weight:600;
    color:var(--text-bright);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.prog-row__meta {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:12px;
    color:var(--text-dim);
}
.prog-row__repairer { color:var(--text); font-weight:600; }
.prog-row__dot { opacity:.5; }
/* The last thing said on the job. Clamped to one line so every row stays the
   same height and the list scans vertically. */
.prog-row__update {
    display:flex;
    gap:7px;
    align-items:baseline;
    min-width:0;
    font-size:12px;
}
.prog-row__update-author { color:var(--text-dim); white-space:nowrap; font-weight:600; }
.prog-row__update-text {
    color:var(--text);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.prog-row__update-none { color:var(--text-dim); font-style:italic; }

.prog-row__side {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    text-align:right;
}
.prog-age {
    font-size:13px;
    font-weight:800;
    color:var(--text-dim);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.prog-age.is-warm { color:var(--text-bright); }
.prog-age.is-hot { color:var(--amber, #f5a623); }
.prog-age.is-critical { color:var(--red, #ef5350); }
/* The number needs a noun. Without it "12 days" could be any of six clocks. */
.prog-age__what {
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-dim);
    white-space:nowrap;
}
.prog-row__chased { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.prog-row__reminder { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.prog-row__reminder.is-overdue { color:var(--red, #ef5350); font-weight:700; }

.prog-flag {
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:1px 7px;
    border-radius:999px;
    white-space:nowrap;
}
.prog-flag--help {
    color:var(--amber, #f5a623);
    background:color-mix(in srgb, var(--amber, #f5a623) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--amber, #f5a623) 35%, transparent);
}
.prog-flag--due {
    color:var(--red, #ef5350);
    background:color-mix(in srgb, var(--red, #ef5350) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--red, #ef5350) 32%, transparent);
}

.prog-more { display:flex; justify-content:center; padding:6px 0 2px; }
.prog-skeleton { display:flex; flex-direction:column; gap:8px; }
.prog-skeleton__row {
    height:76px;
    border-radius:8px;
    background:linear-gradient(90deg,var(--surface) 20%,var(--surface2) 50%,var(--surface) 80%);
    background-size:240% 100%;
    animation:engine-portal-shimmer 1.4s ease-in-out infinite;
}

/* ── The job over the queue ───────────────────────────────────────────────
   A full-height sheet from the right, like the dispatch queue's scheduling
   panel: the job page in miniature, with room for the notes to be readable
   rather than a 400px column the reader has to squint at. */
.prog-panel {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:var(--prog-panel-w);
    z-index:95;
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--border);
    background:var(--surface);
    box-shadow:-16px 0 48px rgba(0,0,0,.28);
    animation:prog-panel-in .24s cubic-bezier(.32,.72,.28,1);
}
@keyframes prog-panel-in {
    from { transform:translateX(48px); opacity:0; }
    to { transform:translateX(0); opacity:1; }
}
.prog-panel__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 16px;
    border-bottom:1px solid var(--border);
    background:var(--surface2, var(--surface));
}
.prog-panel__head-actions { display:flex; align-items:center; gap:8px; }
.prog-panel__title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prog-panel__ref {
    font-family:var(--mono, ui-monospace, monospace);
    font-size:12px;
    font-weight:700;
    color:var(--text-bright);
}
.prog-panel__close {
    border:0;
    background:transparent;
    color:var(--text-dim);
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:4px;
    border-radius:6px;
}
.prog-panel__close:hover { color:var(--text-bright); background:var(--surface2); }
.prog-panel__scroll {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.prog-panel__identity { display:flex; align-items:center; gap:11px; }
.prog-panel__customer { font-size:14px; font-weight:700; color:var(--text-bright); }
.prog-panel__sub { font-size:12px; color:var(--text-dim); display:flex; gap:5px; }
.prog-panel__dot { opacity:.5; }
.prog-panel__loading { font-size:12px; color:var(--text-dim); }
.prog-panel__actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    padding:12px 16px;
    border-top:1px solid var(--border);
    background:var(--surface2, var(--surface));
}

/* The job's one outstanding ask, directly under the reg. */
.prog-panel__lead-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:10px 12px;
    border:1px solid var(--accent);
    border-radius:8px;
    background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.prog-panel__lead-hint { font-size:12px; color:var(--text-dim); min-width:0; }

.prog-waiting {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2, var(--surface));
}
.prog-waiting__label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:700; }
.prog-waiting__value { font-size:13.5px; font-weight:800; color:var(--text-bright); }
.prog-waiting__value.is-hot { color:var(--amber, #f5a623); }

.prog-facts { margin:0; display:flex; flex-direction:column; gap:7px; }
.prog-facts > div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:baseline; }
.prog-facts dt { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); font-weight:700; }
.prog-facts dd { margin:0; font-size:12.5px; color:var(--text); overflow-wrap:anywhere; }
.prog-facts__warn { color:var(--amber, #f5a623); font-weight:600; }
.prog-tick {
    display:inline-block;
    font-size:11px;
    padding:1px 7px;
    margin-right:5px;
    border-radius:999px;
    border:1px solid var(--border);
    color:var(--text-dim);
}
.prog-tick.is-on {
    color:var(--green, #4caf50);
    border-color:color-mix(in srgb, var(--green, #4caf50) 35%, transparent);
    background:color-mix(in srgb, var(--green, #4caf50) 10%, transparent);
}

.prog-help {
    padding:10px 12px;
    border-radius:8px;
    border:1px solid color-mix(in srgb, var(--amber, #f5a623) 32%, transparent);
    background:color-mix(in srgb, var(--amber, #f5a623) 9%, transparent);
}

/* Signpost to the job page's push-through tools — quiet, not another queue action. */
.prog-push {
    display:grid;
    gap:8px;
    justify-items:start;
    padding:10px 12px;
    border-radius:8px;
    border:1px dashed var(--line, #2c3a4d);
}
.prog-push span { font-size:12.5px; color:var(--text-dim, var(--text)); line-height:1.5; }
.prog-help strong { display:block; font-size:12px; color:var(--amber, #f5a623); margin-bottom:4px; }
.prog-help p { margin:0 0 9px; font-size:12.5px; color:var(--text); line-height:1.5; }
.prog-help__actions { display:flex; gap:8px; flex-wrap:wrap; }
.prog-help__ack,
.job-help-request__ack {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    color:var(--green, #66bb6a);
    font-size:11.5px;
    font-weight:700;
}

/* When we last wrote to the repairer, read-only: contact happens by writing a
   repairer note, and the reminder is set on that note. */
.prog-chased {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:4px 10px;
    align-items:baseline;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2, var(--surface));
}
.prog-chased__label {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-dim);
    font-weight:700;
}
.prog-chased__value { font-size:12.5px; color:var(--text); font-weight:600; }
.prog-chased__never { color:var(--amber, #f5a623); }
.prog-chased__note,
.prog-chased__due {
    grid-column:2;
    margin:0;
    font-size:12px;
    color:var(--text-dim);
    line-height:1.5;
}
.prog-chased__due.is-overdue { color:var(--red, #ef5350); font-weight:600; }
.prog-chased__clear {
    margin-left:8px;
    border:0;
    padding:0;
    background:none;
    color:var(--accent);
    font-size:11.5px;
    cursor:pointer;
    text-decoration:underline;
}

/* The drawer is a modal surface and puts its own actions in the bottom-right
   corner, which is where the Iris launcher floats. The launcher outranks the
   scrim, so it would sit on top of Close; it comes back when the drawer does. */
body:has(.prog-panel) .iris-launcher { display:none; }

.prog-scrim {
    position:fixed;
    inset:0;
    background:rgba(10,15,30,.42);
    backdrop-filter:blur(2px);
    z-index:90;
    animation:prog-scrim-in .2s ease;
}
@keyframes prog-scrim-in { from { opacity:0; } to { opacity:1; } }

/* ── Invoice review ───────────────────────────────────────────────────── */
.ireview {
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}
/* Opened from the job drawer, so it takes everything to the left of it and the
   job it belongs to stays on screen beside the decision. */
.ireview--beside {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:var(--prog-panel-w);
    z-index:94;
    border:0;
    border-right:1px solid var(--border);
    border-radius:0;
    box-shadow:-12px 0 40px rgba(0,0,0,.24);
    animation:ireview-in .22s cubic-bezier(.32,.72,.28,1);
}
@keyframes ireview-in {
    from { transform:translateX(-32px); opacity:0; }
    to { transform:translateX(0); opacity:1; }
}
.ireview--inline { margin-top:14px; }

.ireview__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    background:var(--surface2, var(--surface));
}
.ireview__title { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ireview__title strong { font-size:15px; }
.ireview__ref {
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    font-size:12px;
    color:var(--text-dim);
}
.ireview__close {
    border:0;
    background:none;
    color:var(--text-dim);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    padding:0 4px;
}
.ireview__close:hover { color:var(--text-bright); }
.ireview__loading { padding:34px 18px; color:var(--text-dim); text-align:center; }
.ireview__scroll {
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:16px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* The three numbers the decision turns on, side by side. */
.ireview__totals {
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    margin:0;
}
.ireview__totals > div {
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2, var(--surface));
}
.ireview__totals > div.is-off { border-color:var(--amber, #f5a623); }
.ireview__totals dt {
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-dim);
}
.ireview__totals dd { margin:4px 0 0; font-size:18px; font-weight:700; }

.ireview__docs { display:flex; flex-direction:column; gap:9px; min-width:0; }
.ireview__tabs { display:flex; gap:6px; flex-wrap:wrap; }
.ireview__tab {
    padding:6px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface2, var(--surface));
    color:var(--text-dim);
    font-size:12px;
    cursor:pointer;
}
.ireview__tab:hover { color:var(--text-bright); }
.ireview__tab.is-active {
    border-color:var(--accent);
    background:var(--accent);
    color:#fff;
    font-weight:600;
}
.ireview__viewer {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}
.ireview__viewer-bar {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--text-dim);
}
.ireview__back {
    border:0;
    background:none;
    color:var(--accent);
    font-size:12px;
    cursor:pointer;
    padding:0;
}
/* The document is the thing being judged, so it gets the width. */
.ireview__viewer img,
.ireview__viewer iframe {
    display:block;
    width:100%;
    min-height:60vh;
    max-height:74vh;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    object-fit:contain;
}
.ireview__empty {
    padding:28px;
    border:1px dashed var(--border);
    border-radius:8px;
    color:var(--text-dim);
    text-align:center;
}
.ireview__photos {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
}
.ireview__photo {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2, var(--surface));
    cursor:pointer;
    text-align:left;
}
.ireview__photo:hover { border-color:var(--accent); }
.ireview__photo img {
    width:100%;
    height:104px;
    object-fit:cover;
    border-radius:6px;
    background:#fff;
}
.ireview__photo-placeholder {
    display:grid;
    place-items:center;
    height:104px;
    border-radius:6px;
    background:var(--surface);
    color:var(--text-dim);
    font-size:11px;
}
.ireview__photo-name {
    font-size:11.5px;
    color:var(--text-dim);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ireview__lines { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ireview__lines-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.ireview__lines h4 { margin:0; font-size:13px; }
.ireview__table { width:100%; }
.ireview__cost { max-width:110px; }
.ireview__line-actions { display:flex; gap:6px; }
.ireview__addline {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    padding:10px;
    border:1px dashed var(--border);
    border-radius:8px;
}
.ireview__addline > select { flex:1 1 240px; min-width:200px; }
.ireview__addline > input[type=text],
.ireview__addline > .f-input:not(.ireview__cost) { flex:1 1 200px; min-width:160px; }
.ireview__addline > .ireview__cost { flex:0 0 140px; width:140px; }
.ireview__table tr.is-changed td { background:rgba(245,166,35,.08); }
.ireview__table tr.is-added td { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.ireview__table tr.is-removed td { background:rgba(210,60,60,.06); }
.ireview__struck { text-decoration:line-through; color:var(--text-dim); }
.ireview__note { margin:0; font-size:12px; color:var(--text-dim); }
.ireview__diff-summary {
    margin:0 0 8px;
    font-size:12px;
    font-weight:600;
    color:var(--text);
}
.ireview__tag {
    display:inline-block;
    margin-left:6px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    padding:1px 6px;
    border-radius:999px;
    vertical-align:middle;
}
.ireview__tag--add { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.ireview__tag--chg { background:rgba(245,166,35,.16); color:#b5790a; }
.ireview__tag--rrn { background:rgba(210,60,60,.12); color:#c0392b; }
.ireview__reasons ul { margin:6px 0 0; padding-left:18px; }
.ireview__reasons li { margin:2px 0; }
.ireview__editbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
}
.ireview__editnote { font-size:12px; color:var(--text-dim); }
.ireview__editactions { display:flex; gap:8px; }
.ireview__foot-hint { margin:0; font-size:13px; color:var(--text-dim); }

.ireview__hidden { margin-top:16px; padding-top:12px; border-top:1px dashed var(--border); }
.ireview__hidden-head { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); font-weight:600; margin-bottom:6px; }
.ireview__hidden-table tbody td { color:var(--text-dim); }
.ireview__hidden-note { margin:8px 0 0; font-size:12px; color:var(--text-dim); }

.ireview__foot {
    border-top:1px solid var(--border);
    padding:12px 18px;
    background:var(--surface2, var(--surface));
}
.ireview__actions {
    display:flex;
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
}
.ireview__sendback { display:flex; flex-direction:column; gap:10px; }

/* Below this the drawer would leave nothing to sit beside, so the review takes
   the screen and the job panel waits behind it. */
@media (max-width:1180px) {
    .ireview--beside { right:0; z-index:96; }
    .ireview__totals { grid-template-columns:1fr; }
}

/* ── Notes workspace ──────────────────────────────────────────────────── */
.jnotes { display:flex; flex-direction:column; gap:9px; min-width:0; }
.jnotes__tabs {
    display:flex;
    gap:2px;
    padding:3px;
    border-radius:8px;
    background:var(--surface2, var(--surface));
    border:1px solid var(--border);
}
.jnotes__tab {
    flex:1 1 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 8px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--text-dim);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}
.jnotes__tab:hover { color:var(--text-bright); }
.jnotes__tab.is-active { background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.jnotes__count {
    font-size:10px;
    font-weight:800;
    padding:0 6px;
    border-radius:999px;
    background:var(--surface2, var(--surface));
    color:inherit;
    font-variant-numeric:tabular-nums;
}
/* Who can see this thread, with note search kept as a quiet utility. */
.jnotes__audience-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.jnotes__audience { flex:1 1 auto; font-size:11.5px; color:var(--text-dim); line-height:1.45; }
.jnotes__search-toggle {
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:var(--text-dim);
    cursor:pointer;
}
.jnotes__search-toggle:hover,
.jnotes__search-toggle.is-active {
    border-color:var(--border);
    background:var(--surface2, var(--surface));
    color:var(--accent);
}
.jnotes__search { position:relative; }
.jnotes__search > svg {
    position:absolute;
    z-index:1;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-dim);
    pointer-events:none;
}
.jnotes__filter { padding-left:32px; font-size:12px; }
.jnotes__empty { font-size:12.5px; color:var(--text-dim); padding:10px 0; }

.jnotes__list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
    max-height:340px;
    overflow-y:auto;
}
.jnotes__item { display:flex; gap:9px; align-items:flex-start; min-width:0; }
.jnotes__item.is-archived { opacity:.7; }
.jnotes__avatar {
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:.02em;
}
.jnotes__body { flex:1 1 auto; min-width:0; }
.jnotes__meta { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0; }
.jnotes__author { font-size:12px; font-weight:700; color:var(--text-bright); }
.jnotes__channel {
    font-size:9.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:1px 6px;
    border-radius:999px;
    background:var(--surface2, var(--surface));
    border:1px solid var(--border);
    color:var(--text-dim);
}
.jnotes__when { font-size:11px; color:var(--text-dim); margin-left:auto; white-space:nowrap; }
.jnotes__text {
    margin:2px 0 0;
    font-size:12.5px;
    color:var(--text);
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

/* The composer leads the thread, so adding a note is always the first action. */
.jnotes__compose {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
}
.jnotes__input { resize:vertical; font-size:12.5px; }
.jnotes__compose-foot {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.jnotes__reminder { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jnotes__check {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    color:var(--text);
    cursor:pointer;
    user-select:none;
}
.jnotes__check input { accent-color:var(--accent); }
.jnotes__when-select { flex:1 1 180px; min-width:0; font-size:12.5px; }
.jnotes__compose-row { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.jnotes__error { font-size:11.5px; color:var(--red, #ef5350); margin-right:auto; }

/* Temporary capacity lives directly on its repair-type row. */
.temp-capacity-inline {
    display:flex;
    align-items:center;
    gap:7px;
    min-width:220px;
}
.temp-capacity-reason {
    max-width:280px;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}