/* OUH DataHub
   Built on the grammar of The Matrix (rail, section tag, panels, pills), in DataHub's own colours:
   a deep petrol rail and work surface, mint for action, current state and focus. Jost throughout.
   The colours are tokens on :root, so the palette can be swapped in one place. */

/* Jost as a variable font from lib/jost (@fontsource-variable/jost 5.3.0, SIL Open Font License): Latin, which
   holds æ, ø and å, and Latin Extended. */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/lib/jost/jost-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/lib/jost/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand */
    --brand: #0b3d4e;
    --brand-deep: #072c39;
    --brand-raised: #155066;
    --accent: #2ec4a6;
    --accent-line: #1f9e86;    /* accent deep enough for a 3:1 control edge on white */
    --accent-ink: #127863;     /* accent for small text on white, 5.4:1 */
    --accent-wash: #e2f6f1;
    --accent-tint: #f1faf8;

    /* Work surface */
    --ground: #f3f6f7;
    --panel: #ffffff;
    --hairline: #d9e4e7;
    --hairline-strong: #c2d3d8;
    --ink: #0f2a33;
    --ink-soft: #4b6069;       /* 6.6:1 on white */
    --ink-faint: #627680;      /* 4.7:1 on white */

    /* On the rail */
    --on-brand: #ffffff;
    --on-brand-soft: #b3d0d6;
    --on-brand-faint: #8db1b9;

    /* States */
    --ok: #17794a;
    --ok-wash: #e3f4ea;
    --warn: #8a5a00;
    --warn-wash: #fff3d6;
    --bad: #b42332;
    --bad-wash: #fbe7e9;

    --rail-w: 264px;
    --radius-field: 10px;
    --radius-panel: 4px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --focus-ring: 0 0 0 3px rgba(46, 196, 166, .45);
    --font: "Jost", "Futura PT", Futura, "Century Gothic", sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--ground);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 11, 61, 78;
    --bs-link-hover-color: var(--brand);
    --bs-link-hover-color-rgb: 11, 61, 78;
    --bs-border-color: var(--hairline);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
}

/* ---------- Base ---------- */

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

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: var(--brand-deep); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color: var(--brand);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

a {
    color: var(--brand);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a:hover { color: var(--brand); text-decoration-color: var(--brand); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

code { color: var(--brand); background: var(--accent-tint); padding: .1em .35em; border-radius: 4px; }

.text-muted, .meta { color: var(--ink-faint) !important; }
.text-soft { color: var(--ink-soft); }
.text-bad { color: var(--bad); }
.num { font-variant-numeric: tabular-nums; }
.arrow { color: var(--ink-faint); padding: 0 .15em; }

* { scrollbar-color: var(--hairline-strong) transparent; }

/* ---------- Wordmark ---------- */

.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--on-brand); }
.wordmark .word { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1; }
.hubmark { width: 30px; height: 16px; flex: none; overflow: visible; }
.hubmark path { stroke: var(--accent); stroke-width: 2; }
.hubmark circle { fill: var(--brand); stroke: var(--accent); stroke-width: 2; }
.hubmark circle.hub { fill: var(--accent); }

/* ---------- App shell ---------- */

.app {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100vh;
    /* The rail's colour runs the full height of the page, however long it gets. */
    background: linear-gradient(to right, var(--brand) var(--rail-w), transparent 0);
}

.rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--brand);
    color: var(--on-brand);
    overflow-y: auto;
    scrollbar-color: var(--brand-raised) transparent;
    z-index: 30;
}

.rail-brand { display: grid; gap: 8px; padding: 30px 28px 22px; text-decoration: none; }
.rail-claim { color: var(--on-brand-faint); font-size: .8rem; font-weight: 500; }

.rail-nav { list-style: none; margin: 0; padding: 8px 0 24px; flex: 1; }

.rail-group {
    margin: 22px 28px 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--on-brand-faint);
    text-transform: lowercase;
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 28px;
    color: var(--on-brand-soft);
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 500;
    text-transform: lowercase;
    transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.rail-link i { width: 18px; text-align: center; font-size: 1rem; opacity: .85; }
.rail-link .label { position: relative; }
.rail-link .label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease-out);
}
.rail-link:hover { color: var(--on-brand); }
.rail-link:hover .label::after { transform: scaleX(1); }
.rail-link.active { color: var(--on-brand); background: var(--brand-deep); }
.rail-link.active i { color: var(--accent); opacity: 1; }
.rail-link.active .label::after { transform: scaleX(1); }
.rail-link:focus-visible { outline-offset: -3px; border-radius: 0; }

.count-pill {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--brand-deep);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: none;
}
.count-pill.is-bad { background: #f2a3ab; color: #5c0d16; }
.rail-link .count-pill:first-of-type { margin-left: auto; }

.rail-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 18px 28px;
    border-top: 1px solid var(--brand-raised);
    background: var(--brand-deep);
}
.avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--brand-deep);
    font-weight: 700;
    font-size: .78rem;
}
.rail-user .who { min-width: 0; flex: 1; line-height: 1.25; }
.rail-user .name { display: block; color: var(--on-brand); font-weight: 600; }
.rail-user .role { display: block; color: var(--on-brand-faint); font-size: .85rem; }

.mobilebar { display: none; }

.app-main { min-width: 0; display: flex; flex-direction: column; }

.page { flex: 1; padding: 0 40px 48px; }

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin: 0 -40px 28px;
    padding: 0 40px 0 0;
}

/* The page name: a mint block cut away at its lower right corner, flush with the rail. */
.section-tag {
    position: relative;
    margin: 0;
    padding: 30px 64px 18px 40px;
    min-width: 280px;
    max-width: 100%;
    background: var(--accent);
    color: var(--brand-deep);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    clip-path: polygon(0 0, 100% 0, 100% 55%, calc(100% - 34px) 100%, 0 100%);
}

.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 6px; }

.page-lede { margin: -12px 0 24px; color: var(--ink-soft); max-width: 75ch; }

.app-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 18px 40px;
    color: var(--ink-faint);
    font-size: .85rem;
    border-top: 1px solid var(--hairline);
}

/* ---------- Panels ---------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: 0 1px 2px rgba(7, 44, 57, .05), 0 8px 24px -16px rgba(7, 44, 57, .14);
    margin-bottom: 24px;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-bottom: 1px solid var(--hairline);
}
.panel-head h2 { margin: 0; font-size: 1.15rem; }
.panel-head .count { color: var(--ink-faint); font-weight: 500; }
.panel-head > a { font-size: .92rem; }
.panel-body { padding: 24px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid var(--hairline);
    background: var(--accent-tint);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--hairline);
}
.toolbar .search { position: relative; flex: 0 1 360px; min-width: 220px; }
.toolbar .search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.toolbar .search .form-control { padding-left: 40px; }

.list-meta { padding: 10px 24px 0; font-size: .85rem; }

/* ---------- Facts ---------- */

.facts { margin: 0; display: grid; gap: 16px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: .85rem; font-weight: 500; color: var(--ink-faint); }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* Today's figures under the flow diagram */
.figures { width: 100%; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 24px; }
.figures dt { text-transform: lowercase; }
.figures dd { font-size: 1.5rem; font-weight: 600; color: var(--brand); line-height: 1.2; }
.figures dd.is-warn { color: var(--warn); }
.figures dd.is-bad { color: var(--bad); }

/* ---------- Tables ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--accent-tint);
    --bs-table-color: var(--ink);
    margin: 0;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.table > thead > tr > th {
    padding: 10px 16px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand);
    background: var(--panel);
    border-bottom: 2px solid var(--brand);
    white-space: nowrap;
    text-transform: lowercase;
}
.table > tbody > tr > td { padding: 8px 16px; vertical-align: middle; border-bottom: 1px solid var(--hairline); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td:first-child, .table th:first-child { padding-left: 24px; }
.table td:last-child, .table th:last-child { padding-right: 24px; }
.table .row-title { font-weight: 600; color: var(--brand); text-decoration: none; }
.table a.row-title:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.table .actions { white-space: nowrap; text-align: right; width: 1%; }
.table tr.is-attention > td { background: var(--warn-wash); }
.table tr.is-alert-bad > td { background: var(--bad-wash); }
.table-hover > tbody > tr.is-attention:hover > * { --bs-table-bg-state: rgba(138, 90, 0, .08); }
.table-hover > tbody > tr.is-alert-bad:hover > * { --bs-table-bg-state: rgba(180, 35, 50, .08); }
.error-line { color: var(--bad) !important; margin-top: 4px; max-width: 32ch; }

.empty { padding: 48px 24px; text-align: center; color: var(--ink-soft); }
.empty .hubmark { display: block; margin: 0 auto 16px; width: 44px; height: 24px; }
.empty .hubmark circle { fill: #fff; }
.empty .hubmark circle.hub { fill: var(--accent); }
.empty h3 { font-size: 1.1rem; margin-bottom: 4px; }
.empty p { margin: 0 auto; max-width: 46ch; }

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-font-family: var(--font);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-border-radius: 999px;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .88rem; }

/* Primary: petrol ink on mint, turning petrol on hover. */
.btn-primary {
    --bs-btn-color: var(--brand-deep);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: var(--brand-deep);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-bg: #a6e3d6;
    --bs-btn-disabled-border-color: #a6e3d6;
}

.btn-secondary {
    --bs-btn-color: var(--brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hairline-strong);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-hover-bg: var(--accent-tint);
    --bs-btn-hover-border-color: var(--accent-line);
    --bs-btn-active-color: var(--brand);
    --bs-btn-active-bg: var(--accent-wash);
    --bs-btn-active-border-color: var(--accent-line);
}

.btn-danger {
    --bs-btn-color: var(--bad);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #e3b3b9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bad);
    --bs-btn-hover-border-color: var(--bad);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8f1b28;
    --bs-btn-active-border-color: #8f1b28;
}

.btn-link-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-weight: 500; text-decoration: none; margin-right: 6px; }
.btn-link-back:hover { color: var(--brand); }

/* ---------- Forms ---------- */

.form-label { margin-bottom: 6px; font-weight: 600; font-size: .92rem; color: var(--brand); }
.form-control, .form-select {
    font-family: var(--font);
    padding: .62rem .9rem;
    font-size: 1rem;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-field);
    transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.form-select { padding-right: 2.4rem; }
.form-control::placeholder { color: var(--ink-faint); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--brand); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46, 196, 166, .35); outline: 0; }
.form-text { color: var(--ink-faint); font-size: .85rem; }
.field { margin-bottom: 20px; }
.form-check-input { width: 1.15em; height: 1.15em; margin-top: .2em; border: 1px solid var(--accent-line); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(46, 196, 166, .35); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.3em; border-radius: 2em; }
.form-check-label { font-weight: 600; color: var(--brand); }

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .28em .75em;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}
.badge.is-ok { background: var(--ok-wash); color: var(--ok); }
.badge.is-off { background: #edf1f2; color: var(--ink-soft); }
.badge.is-busy { background: var(--accent-wash); color: var(--accent-ink); }
.badge.is-tag { background: var(--accent-wash); color: var(--brand); }
.badge.is-bad { background: var(--bad-wash); color: var(--bad); }
.badge.is-warn { background: var(--warn-wash); color: var(--warn); }
.badge.is-ok::before, .badge.is-off::before, .badge.is-busy::before, .badge.is-bad::before, .badge.is-warn::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge.is-busy::before { animation: busy 1.4s ease-in-out infinite; }
@keyframes busy { 50% { opacity: .25; } }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Flash messages ---------- */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 14px 18px;
    margin-bottom: 24px;
    border: 1px solid;
    border-radius: var(--radius-field);
    animation: flash-in .35s var(--ease-out);
}
.flash i { margin-top: .1em; }
.flash .msg { flex: 1; }
.flash .msg a { margin-left: .4em; font-weight: 600; color: inherit; }
.flash .btn-close { position: static; padding: .5em; font-size: .75rem; --bs-btn-close-focus-shadow: var(--focus-ring); }
.flash.is-ok { border-color: #b3dcc4; background: var(--ok-wash); color: #0f5a36; }
.flash.is-bad { border-color: #ebb9bf; background: var(--bad-wash); color: #8f1b28; }
.flash.is-warn { border-color: #ecd3a0; background: var(--warn-wash); color: var(--warn); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Disclosure and code ---------- */

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-right: 2px solid var(--accent-line);
    border-bottom: 2px solid var(--accent-line);
    transform: translateY(-2px) rotate(-45deg);
    transition: transform .2s var(--ease-out);
}
details[open] > summary::before { transform: translateY(-3px) rotate(45deg); }

.trace, .code {
    margin: 12px 0 0;
    padding: 14px 16px;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--on-brand-soft);
    background: var(--brand-deep);
    border-radius: var(--radius-field);
}
.code { margin: 0; max-height: 640px; font-family: var(--mono); white-space: pre; tab-size: 2; }

/* Segmented filter (pills), also used as tabs */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--hairline-strong); border-radius: 999px; background: #fff; }
.segmented a, .segmented button {
    border: 0;
    background: transparent;
    padding: .32rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.segmented a:hover, .segmented button:hover { color: var(--brand); background: var(--accent-tint); }
.segmented a.active, .segmented button.active { background: var(--brand); color: #fff; }
.segmented .num { opacity: .75; margin-left: 2px; }

/* ---------- Flow diagram (Overblik) ---------- */

.flow-body { padding: 12px 16px 8px; }
.flow { display: block; width: 100%; height: auto; max-height: 440px; font-family: var(--font); }
.flow a { text-decoration: none; }
.flow .edge { fill: none; stroke: var(--hairline-strong); stroke-width: 2.5; transition: stroke .3s; }
.flow .edge.is-offline { stroke: var(--bad); stroke-dasharray: 6 7; opacity: .55; }
.flow .counts text { font-size: 13px; font-weight: 600; fill: var(--ink-faint); text-anchor: middle; font-variant-numeric: tabular-nums; }
.flow .node rect { fill: #fff; stroke: var(--hairline-strong); stroke-width: 1.5; transition: stroke .25s, fill .25s; }
.flow a:hover .node rect, .flow a:focus-visible .node rect { stroke: var(--accent-line); }
.flow a:focus-visible { outline: none; }
.flow .node.is-active rect { stroke: var(--accent); fill: var(--accent-tint); }
.flow .node.is-offline rect { stroke: var(--bad); fill: var(--bad-wash); }
.flow .node-name { font-size: 17px; font-weight: 600; fill: var(--brand); }
.flow .node-sub { font-size: 12.5px; font-weight: 500; fill: var(--ink-faint); }
.flow .node-dot { fill: var(--ok); }
.flow .node.is-offline .node-dot { fill: var(--bad); }
.flow .hub rect { fill: var(--brand); stroke: var(--brand); }
.flow .hub.is-active rect { fill: var(--brand-raised); stroke: var(--accent); }
.flow .hub-name { font-size: 23px; font-weight: 600; fill: #fff; text-anchor: middle; }
.flow .hub-sub { font-size: 12.5px; font-weight: 500; fill: var(--on-brand-soft); text-anchor: middle; }
.flow .dot { stroke: var(--brand-deep); stroke-width: 1.5; }
.flow .dot.is-inbound, .flow .dot.is-outbound { fill: var(--accent); }
.flow .dot.is-acknowledgement { fill: var(--ok); stroke-width: 1; }
.flow .dot.is-rejection { fill: var(--bad); stroke-width: 1; }

.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 8px 0; font-size: .85rem; }
.flow-legend .key { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; border: 1.5px solid var(--brand-deep); }
.flow-legend .key.is-message { background: var(--accent); }
.flow-legend .key.is-ack { background: var(--ok); }
.flow-legend .key.is-bad { background: var(--bad); }

/* ---------- Journey (a requisition's six stops) ---------- */

.journey {
    list-style: none;
    margin: 0;
    padding: 24px 16px 20px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.journey li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 0 6px; }
/* The line from this stop to the previous one */
.journey li + li::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--hairline);
    z-index: 0;
}
.journey li.is-done::before, .journey li.is-current::before, .journey li.is-problem::before { background: var(--accent); }
.journey .marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--hairline-strong);
    background: #fff;
    color: #fff;
    font-size: 1rem;
}
.journey .title { font-weight: 600; color: var(--ink-soft); font-size: .92rem; line-height: 1.25; }
.journey .where { color: var(--ink-faint); font-size: .8rem; }
.journey li.is-done .marker { background: var(--accent); border-color: var(--accent); color: var(--brand-deep); }
.journey li.is-done .title { color: var(--brand); }
.journey li.is-current .marker { border-color: var(--accent); box-shadow: 0 0 0 0 rgba(46, 196, 166, .5); animation: current 1.6s ease-out infinite; }
.journey li.is-current .marker::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.journey li.is-current .title { color: var(--brand); }
.journey li.is-problem .marker { background: var(--bad); border-color: var(--bad); }
.journey li.is-problem .title { color: var(--bad); }
.journey li.is-skipped .marker { border-style: dashed; }
.journey li.is-skipped .title { color: var(--ink-faint); font-weight: 500; }
@keyframes current { 70% { box-shadow: 0 0 0 10px rgba(46, 196, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 196, 166, 0); } }

/* Progress in lists: six small dots */
.journey-cell { min-width: 220px; }
.progress-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.progress-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
.progress-dots i.is-done { background: var(--accent-line); }
.is-positive { color: var(--warn) !important; font-weight: 500; }

/* ---------- Steps (a message's or a requisition's events) ---------- */

.steps { list-style: none; margin: 0; padding: 10px 0; }
.steps li { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 8px 24px 8px 24px; }
.steps li::before {
    content: "";
    position: absolute;
    left: 94px;
    top: 15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hairline-strong);
}
.steps li + li::after { content: ""; position: absolute; left: 98px; top: -6px; height: 20px; width: 1px; background: var(--hairline); }
.steps li.is-ok::before { background: var(--ok); }
.steps li.is-warn::before { background: #d39b2a; }
.steps li.is-bad::before { background: var(--bad); }
.steps li.is-info::before { background: var(--accent-line); }
.steps li.is-pending::before { background: transparent; border: 2px solid var(--accent); animation: busy 1.4s ease-in-out infinite; }
.steps .when { color: var(--ink-faint); font-size: .85rem; padding-top: 1px; }
.steps .what { padding-left: 22px; font-size: .94rem; }
.steps li.is-bad .what { color: var(--bad); }
.steps li.is-pending .what { color: var(--ink-faint); }
.system-tag { display: inline-block; margin-right: 6px; padding: 0 .55em; border-radius: 999px; background: var(--accent-wash); color: var(--brand); font-size: .78rem; font-weight: 600; }

/* ---------- Results ---------- */

.result-summary { font-size: 1.2rem; font-weight: 600; color: var(--brand); margin-bottom: 8px; }
.result-summary.is-positive { color: var(--warn); }
.finding { margin: 18px 0; }
.finding-head { margin-bottom: 6px; }
.finding-head strong { color: var(--brand); font-style: italic; }
.table.susceptibility { border: 1px solid var(--hairline); border-radius: var(--radius-panel); }
.table.susceptibility > thead > tr > th { border-bottom-width: 1px; padding-top: 8px; padding-bottom: 8px; }
.table.susceptibility td:first-child, .table.susceptibility th:first-child { padding-left: 14px; }
.sir { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.sir.is-s { background: var(--ok-wash); color: var(--ok); }
.sir.is-i { background: var(--warn-wash); color: var(--warn); }
.sir.is-r { background: var(--bad-wash); color: var(--bad); }

/* ---------- Reduced motion ---------- */

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

/* ---------- Narrow screens ---------- */

@media (max-width: 991.98px) {
    .app { grid-template-columns: minmax(0, 1fr); background: none; }

    .mobilebar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 8px 0 20px;
        background: var(--brand);
    }
    .mobilebar a { display: flex; align-items: center; text-decoration: none; }
    .mobilebar .wordmark .word { font-size: 1.3rem; }
    .mobilebar button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.4rem; }

    .rail {
        position: fixed;
        inset: 60px auto 0 0;
        height: auto;
        width: min(86vw, var(--rail-w));
        transform: translateX(-100%);
        transition: transform .3s var(--ease-out);
    }
    body.rail-open .rail { transform: none; box-shadow: 8px 0 32px rgba(3, 20, 26, .3), 0 0 0 100vmax rgba(3, 20, 26, .45); }
    body.rail-open { overflow: hidden; }
    .rail-brand { display: none; }

    .page { padding: 0 20px 40px; }
    .page-head { margin: 0 -20px 22px; padding-right: 20px; }
    .section-tag { padding: 22px 52px 14px 20px; min-width: 0; font-size: 1.35rem; }
    .page-actions { padding: 0 0 0 20px; }
    .app-foot { padding: 16px 20px; }
}

@media (max-width: 767.98px) {
    .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .segmented::-webkit-scrollbar { display: none; }

    /* Lists turn into stacked rows */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
    .table-stack tr:last-child { border-bottom: 0; }
    .table-stack > tbody > tr > td { padding: 2px 0 !important; border: 0 !important; text-align: left !important; }
    .table-stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-faint); font-size: .85rem; }
    .table-stack td.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; width: auto; margin: 6px 8px 0 0; vertical-align: middle; }
    .table-stack .actions { position: absolute; top: 10px; right: 12px; width: auto; }

    .journey { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 20px; }
    .journey li { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; padding: 0 0 14px; }
    .journey li .marker { grid-row: span 2; }
    .journey li + li::before { top: -14px; right: auto; left: 14px; width: 3px; height: 18px; }

    .steps li { grid-template-columns: 64px minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
    .steps li::before { left: 78px; }
    .steps li + li::after { left: 82px; }
}

@media (max-width: 575.98px) {
    .panel-head, .panel-body, .toolbar, .panel-foot { padding-left: 16px; padding-right: 16px; }
    .table td:first-child, .table th:first-child { padding-left: 16px; }
    .table td:last-child, .table th:last-child { padding-right: 16px; }
    .toolbar .search { flex-basis: 100%; }
    .list-meta { padding-left: 16px; }
}