:root {
    color-scheme: light;
    --page: #d7dfe1;
    --surface: #f8fafa;
    --surface-2: #e9eeee;
    --ink: #173038;
    --muted: #63777c;
    --line: #9badb1;
    --nav: #173840;
    --cyan: #03a9c7;
    --blue: #176bc1;
    --orange: #e78b29;
    --red: #d84a42;
    --green: #2d9a60;
    --shadow: 0 6px 18px rgba(29, 53, 59, .13);
    --node-width: 94px;
    --edge-width: 76px;
    --journey-row-height: 30px !important;
    --summary-width: 238px;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body {
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
        var(--page);
    background-size: 24px 24px;
}

button, select, input { font: inherit; }
.page-shell { width: min(1800px, 100%); margin: 0 auto; padding: 12px; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 82px;
    padding: 14px 18px;
    border: 1px solid #071f25;
    border-radius: 6px;
    background: linear-gradient(135deg, #24515b, var(--nav));
    color: #fff;
    box-shadow: var(--shadow);
}
.page-header > div > span { color: #60e7fb; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.page-header h1 { margin: 2px 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.04em; }
.page-header p { margin: 0; color: #a8c1c6; font-size: 9px; }
.page-header nav { display: flex; gap: 4px; }
.page-header nav a, .page-header nav strong {
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 3px;
    color: #bed0d4;
    font-size: 9px;
    text-decoration: none;
}
.page-header nav strong { border-color: #4fdaef; background: #0c7489; color: #fff; }

.control-panel {
    display: grid;
    grid-template-columns: minmax(330px, .72fr) 1.28fr;
    gap: 7px;
    margin-top: 7px;
    padding: 9px;
    border: 1px solid #83999e;
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.control-panel form { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.control-panel label { grid-column: 1 / -1; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.control-panel select, .control-panel button, .flow-heading input {
    min-height: 38px;
    border: 1px solid #879ca1;
    border-radius: 3px;
}
.control-panel select { min-width: 0; padding: 0 9px; background: linear-gradient(#fff, #e4eaeb); color: var(--ink); }
.control-panel button {
    padding: 0 18px;
    border-color: #07519d;
    background: linear-gradient(#1979db, #0b58ad);
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}
.lot-summary { display: grid; grid-template-columns: .65fr 1.3fr .4fr .7fr .8fr 1fr; gap: 4px; }
.lot-summary > div { display: grid; align-content: center; min-width: 0; padding: 6px 8px; border: 1px solid #c0cbcd; background: var(--surface-2); }
.lot-summary span { color: var(--muted); font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.lot-summary strong { margin-top: 2px; overflow: hidden; font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.error-banner { margin-top: 7px; padding: 10px; border: 1px solid #c04c47; background: #ffe1df; color: #a12d28; }

.guide-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 7px;
    padding: 9px 12px;
    border: 1px solid #98aaae;
    background: #edf2f2;
    color: var(--muted);
    font-size: 8px;
}
.guide-bar > div, .wait-scale span { display: flex; align-items: center; gap: 6px; }
.guide-bar b { color: var(--ink); }
.guide-bar i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.guide-bar i.move { border: 2px solid var(--blue); background: #d8edff; }
.guide-bar i.wait { border: 2px solid var(--orange); background: #fff0db; }
.wait-scale { display: flex; gap: 10px; margin-left: auto; }
.wait-scale i.low { background: #d9f1e3; }
.wait-scale i.medium { background: #ffe1b8; }
.wait-scale i.high { background: #ffc8c3; }

.flow-panel {
    margin-top: 7px;
    padding: 9px;
    border: 1px solid #82999e;
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.flow-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 1px 3px 8px; }
.flow-heading > div > span { color: #087c98; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.flow-heading h2 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.02em; }
.flow-heading label { display: grid; gap: 3px; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.flow-heading input { width: 205px; min-height: 32px; padding: 0 9px; outline: none; background: #fff; }
.flow-heading input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(23,107,193,.14); }

.flow-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #778e93;
    background: #cdd7d9;
    scrollbar-color: #53747b #dce3e4;
}
.flow-list { min-width: 100%; }
.slot-flow-row {
    display: flex;
    min-height: 112px;
    border-bottom: 1px solid #9dadaf;
    background: #f5f7f7;
}
.slot-flow-row:last-child { border-bottom: 0; }
.slot-flow-row:nth-child(even) { background: #e9eeee; }
.slot-flow-row:hover { background: #e2f4f6; }

.slot-summary {
    position: sticky;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 55px 1fr;
    grid-template-rows: auto 1fr;
    gap: 5px 7px;
    flex: 0 0 var(--summary-width);
    width: var(--summary-width);
    padding: 8px;
    border-right: 2px solid #58757b;
    background: linear-gradient(135deg, #f9fbfb, #dfe7e8);
    box-shadow: 5px 0 9px rgba(36,60,66,.1);
}
.slot-title {
    grid-row: 1 / 3;
    display: grid;
    align-content: center;
    justify-items: center;
    border: 1px solid #176db0;
    border-radius: 4px;
    background: linear-gradient(#278fd4, #1265a8);
    color: #fff;
    box-shadow: inset 0 1px rgba(255,255,255,.35);
}
.slot-title span { color: #bce9ff; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.slot-title strong { font-size: 24px; line-height: 1; }
.material-copy { min-width: 0; }
.material-text strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.material-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.slot-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0; }
.slot-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 3px 4px; border: 1px solid #c1cdcf; background: rgba(255,255,255,.66); }
.slot-summary dl .total { grid-column: 1 / -1; border-color: #eca64f; background: #fff2df; }
.slot-summary dt { color: var(--muted); font-size: 6px; }
.slot-summary dd { margin: 0; font-size: 8px; font-weight: 900; font-variant-numeric: tabular-nums; }
.slot-summary .total dd { color: #bd5e09; font-size: 11px; }
.spacer-material { flex-basis: 92px; font-size: 9px; }
.spacer-metric { font-size: 9px; }
.flow-track { display: flex; align-items: stretch; flex: 0 0 auto; padding: 10px 12px; }
.module-node {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    flex: 0 0 var(--node-width);
    width: var(--node-width);
    min-height: 20px;
    border: 2px solid #71888d;
    border-radius: 4px;
    background: linear-gradient(#f9fbfb, #dbe3e4);
    text-align: center;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 5px rgba(33,55,60,.16);
    padding: 0 3px;
}
.module-node > span { color: var(--muted); font-size: 6px; font-weight: 900; letter-spacing: .09em; }
.module-node > strong { margin-top: 3px; max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.module-node > small { display: block; margin-top: 7px; padding: 1px 2px; border-radius: 2px; color: var(--muted); font-size: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.module-node.cassette { border-color: #a8953f; background: linear-gradient(#fffce7, #e8dfa8); }
.module-node.fic { border-color: #197696; background: linear-gradient(#e6faff, #b9dee8); }
.module-node.aligner { border-color: #705da1; background: linear-gradient(#f2edff, #d5caec); }
.module-node.chamber { border-color: #a36d36; background: linear-gradient(#fff0df, #e8c49f); }
.module-node.cooler { border-color: #398266; background: linear-gradient(#e8f8ef, #bfe0cf); }
.module-node .wait-time { border: 1px solid transparent; font-weight: 900; }
.module-node .wait-value { font: inherit; }
.module-node .wait-time.low { border-color: #73b78d; background: #daf1e3; color: #27704a; }
.module-node .wait-time.medium { border-color: #e2a24d; background: #ffe4bd; color: #925707; }
.module-node .wait-time.high { border-color: #d85a51; background: #ffd0cc; color: #a42e27; box-shadow: 0 0 0 2px rgba(216,74,66,.1); }
.module-node .complete { border: 1px solid #69a67e; background: #dff2e6; color: #277148; font-weight: 900; }
.module-node.chamber > strong {
    font-size: 9px;
}
.transfer-edge {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    flex: 0 0 var(--edge-width);
    width: var(--edge-width);
    color: var(--blue);
}
.transfer-edge > span { padding: 2px 4px; border: 1px solid currentColor; border-radius: 2px; background: #e2f4ff; font-size: 6px; font-weight: 950; }
.transfer-edge.put { color: #c96c10; }
.transfer-edge.put > span { background: #fff0da; }
.transfer-edge > strong { z-index: 2; display: inline-block; margin-top: 5px; padding: 2px 5px; border: 1px solid #a9c8e8; border-radius: 2px; background: #dceeff; color: #0b58ad; font-weight: 900; font-size: 8px; font-variant-numeric: tabular-nums; }
.transfer-edge.duration-edge-medium {
    color: #6537b3;
    background: #f2ecfc;
    border-radius: 3px;
}
.transfer-edge.duration-edge-medium > strong {
    border: 1px solid #4e228f;
    background: #7448bf;
    color: #fff;
    font-weight: 950;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35),
        0 0 0 2px rgba(101,55,179,.2);
    transform: scale(1.04);
}
.transfer-edge.duration-edge-high {
    color: #b7221c;
    background: #fbdedb;
    border-radius: 3px;
}
.transfer-edge.duration-edge-high > strong {
    border-color: #8e1712;
    background: #ce342d;
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.4),
        0 0 0 3px rgba(183,34,28,.32);
    transform: scale(1.08);
}
.transfer-edge.duration-edge-low {
    color: #c4ccce;
}
.transfer-edge.duration-edge-low > strong {
    border: 1px solid transparent;
    background: #f2f4f4;
    color: #a3adb0;
    font-weight: 400;
}
.slot-flow-row:nth-child(even) .transfer-edge > strong { background: #cfe6ff; }
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-medium > strong { background: #7448bf; }
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-high > strong { background: #ce342d; }
.transfer-edge > i {
    position: absolute;
    left: 5px;
    right: 7px;
    top: 50%;
    height: 2px;
    background: currentColor;
    transform: translateY(16px);
}
.transfer-edge > i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.empty { padding: 30px; color: var(--muted); text-align: center; }
[hidden] { display: none !important; }



.page-shell { padding: 6px; }
.page-header { min-height: 38px; padding: 4px 10px; }
.page-header > div > span { display: none; }
.page-header h1 { margin: 0; font-size: 18px; line-height: 1; }
.page-header p { display: none; }
.page-header nav a, .page-header nav strong { padding: 6px 8px; font-size: 7px; }

.control-panel { gap: 4px; margin-top: 4px; padding: 4px; }
.control-panel form { gap: 3px; }
.control-panel label { display: none; }
.control-panel select, .control-panel button { min-height: 29px; }
.control-panel select { font-size: 9px; }
.control-panel button { padding: 0 12px; font-size: 9px; }
.lot-summary { gap: 2px; }
.lot-summary > div {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
}
.lot-summary span { font-size: 5px; }
.lot-summary strong { margin-top: 0; font-size: 8px; }
.lot-summary .lot-wait-alert {
    border-color: #c9332c;
    background: #ffe0dc;
}
.lot-summary .lot-wait-alert span { color: #a82b25; }
.lot-summary .lot-wait-alert strong { color: #8f211c; }
.lot-summary .lot-wait-alert.warning {
    border-color: #d79735;
    background: #ffecd0;
}
.lot-summary .lot-wait-alert.warning span,
.lot-summary .lot-wait-alert.warning strong { color: #88530c; }
.lot-summary .lot-wait-alert.clear {
    border-color: #68a57d;
    background: #e2f2e8;
}
.lot-summary .lot-wait-alert.clear span,
.lot-summary .lot-wait-alert.clear strong { color: #276b45; }

.guide-bar { display: none; }

.flow-panel { margin-top: 3px; padding: 3px; }
.flow-heading { align-items: center; min-height: 22px; padding: 0 2px 2px; }
.flow-heading > div > span { display: none; }
.flow-heading h2 { margin-top: 0; font-size: 11px; line-height: 1; }
.flow-heading label { display: flex; align-items: center; gap: 5px; font-size: 6px; }
.flow-heading input { width: 170px; min-height: 21px; font-size: 7px; }
.bottleneck-key {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 6px;
    font-weight: 900;
    white-space: nowrap;
}
.flow-heading .bottleneck-key span {
    display: inline-flex;
    align-items: center;
    padding: 3px 5px;
    border: 1px solid #df9a39;
    border-radius: 2px;
    background: #ffecd0;
    color: #91580b;
}
.flow-heading .bottleneck-key .duration-key {
    border-color: #7651b8;
    background: #eee4ff;
    color: #54308f;
}
.bottleneck-key .high-key {
    border-color: #d95048;
    background: #ffe1de;
    color: #a62b25;
}

.slot-flow-row {
    height: var(--journey-row-height);
    min-height: 0;
}
.slot-flow-row.has-wait-anomaly {
    background: #fff3da;
}
.slot-flow-row.has-wait-anomaly .slot-summary {
    border-left: 4px solid #f09a18;
    background: linear-gradient(135deg, #fff8ea, #ffe4af);
}
.slot-flow-row.has-priority-duration {
    background: #fff3da;
}
.slot-flow-row.has-priority-duration .slot-summary {
    border-left: 4px solid #f09a18;
    background: linear-gradient(135deg, #fff8ea, #ffe4af);
}
.slot-flow-row.has-priority-anomaly {
    background: #ffe3df;
}
.slot-flow-row.has-priority-anomaly .slot-summary {
    border-left-color: #d92d27;
    background: linear-gradient(135deg, #fff0ed, #ffc6bf);
}
.slot-summary {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    box-shadow: 3px 0 5px rgba(36,60,66,.08);
}
.slot-title {
    position: relative;
    grid-row: auto;
    flex: 0 0 30px;
    width: 30px;
    height: calc(var(--journey-row-height) - 3px);
    border-width: 1px;
}
.slot-anomaly-mark {
    position: absolute;
    top: -3px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 11px;
    height: 11px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #ee8c0c;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 0 0 1px #b85d00;
}
.has-priority-anomaly .slot-anomaly-mark {
    background: #cf2822;
    box-shadow: 0 0 0 1px #851410;
}
.slot-title span { display: none; }
.slot-title strong { font-size: clamp(12px, calc(var(--journey-row-height) * .48), 15px); }
.material-copy {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 89px;
    min-width: 0;
}
.material-text {
    display: grid;
    align-content: center;
    flex: 1;
    min-width: 0;
}
.material-text strong { font-size: 7px; }
.material-text small { display: none; }
.slot-summary dl { display: flex; flex: 1; gap: 2px; height: calc(var(--journey-row-height) - 4px); }
.slot-summary dl > div, .slot-summary dl .total {
    display: grid;
    align-content: center;
    justify-items: center;
    flex: 1;
    grid-column: auto;
    gap: 0;
    min-width: 0;
    padding: 0 1px;
}
.slot-summary dl .summary-metric-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    overflow: hidden;
    color: #7f8b8e;
    font-size: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.slot-summary dl .summary-metric-compact span { overflow: hidden; text-overflow: ellipsis; }
.slot-summary dl .summary-metric-compact i { font-style: normal; color: #c3cbcd; }
.slot-summary dt { font-size: 4px; line-height: 1; white-space: nowrap; }
.slot-summary dd, .slot-summary .total dd {
    overflow: visible;
    font-size: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}
.slot-summary dl .summary-metric-compact { font-size: 10px; gap: 8px; }
.summary-metric.metric-low {
    border: 1px solid #d0d8da !important;
    background: #f1f4f4 !important;
    box-shadow: none;
}
.summary-metric.metric-low dt {
    color: #9aa5a8 !important;
    font-weight: 750;
}
.summary-metric.metric-low dd {
    color: #7d898d !important;
    font-weight: 800;
}
.summary-metric.metric-medium {
    border: 2px solid #d97800 !important;
    background: linear-gradient(#fff0c9, #ffbf48) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75),
        0 0 0 1px rgba(217,120,0,.28);
}
.summary-metric.metric-medium dt,
.summary-metric.metric-medium dd {
    color: #713b00 !important;
    font-weight: 950;
}
.summary-metric.metric-high {
    border: 2px solid #a81712 !important;
    background: linear-gradient(#ffd8d3, #ed5b52) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.65),
        0 0 0 2px rgba(205,36,29,.42);
}
.summary-metric.metric-high dt,
.summary-metric.metric-high dd {
    color: #65110d !important;
    font-weight: 950;
}

.flow-track {
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: calc(var(--journey-row-height) - 1px);
    padding: 0 6px;
}
.module-node {
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 0;
    flex: 1.4 1 64px;
    width: auto;
    min-width: 56px;
    height: calc(var(--journey-row-height) - 1px);
    min-height: 0;
    padding: 0 3px;
    border-width: 1px;
    border-radius: 2px;
    box-shadow: none;
}
.module-node > span { display: none; }
.module-node > strong {
    margin: 0;
    min-width: 0;
    font-size: clamp(8px, calc(var(--journey-row-height) * .31), 10px);
    line-height: 1;
    text-align: center;
}
.module-node > small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0 2px;
    border-width: 1px;
    overflow: visible;
    font-size: clamp(5px, calc(var(--journey-row-height) * .2), 6.5px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}
.module-node.wait-node-medium {
    border: 2px solid #d97800;
    background: #fff3d6;
    box-shadow: 0 0 0 1px rgba(241, 139, 0, .45);
    z-index: 2;
}
.module-node.wait-node-high {
    border: 2px solid #a81712;
    background: #ffe1dc;
    box-shadow: 0 0 0 1px rgba(205, 36, 29, .3);
    z-index: 5;
}
.module-node.wait-node-low,
.module-node.wait-node-none,
.module-node.endpoint-node {
    border-color: #dde3e4;
    background: #f4f6f6;
    box-shadow: none;
    color: #98a3a6;
}
.module-node.wait-node-low > strong,
.module-node.wait-node-none > strong,
.module-node.endpoint-node > strong {
    color: #7f8b8e;
    font-weight: 750;
}
.module-node.wait-node-low .wait-time.low,
.module-node.wait-node-none .wait-time {
    border: none;
    background: none;
    color: #9aa5a8;
    font-weight: 600;
    box-shadow: none;
}
.module-node.wait-node-none .complete,
.module-node.endpoint-node > small {
    border-color: #d1d8d5;
    background: #edf1ef;
    color: #7f8c87;
    font-weight: 750;
    box-shadow: none;
}
.module-node.wait-node-medium > strong { color: #754000; }
.module-node.wait-node-high > strong { color: #71110d; }
.module-node .wait-time.medium {
    border-color: #b85f00;
    background: #ed8b0b;
    color: #fff;
    font-weight: 950;
}
.module-node .wait-time.high {
    border-color: #b9211b;
    background: #dc3932;
    color: #fff;
}
.transfer-edge {
    flex: 1 1 42px;
    width: auto;
    min-width: 36px;
    min-height: 0;
}
.transfer-edge > span { display: none; }
.transfer-edge > strong { margin-top: 0; padding: 1px 2px; font-size: 6px; }
.transfer-edge > i { height: 1px; transform: translateY(5px); }
.transfer-edge > i::after { width: 4px; height: 4px; border-width: 1px; }

@media (min-width: 900px) {
    :root {
        --summary-width: 380px;
    }

    .lot-summary span { font-size: 9px; }
    .lot-summary strong { font-size: 13px; }

    .flow-heading h2 { font-size: 16px; }
    .flow-heading label,
    .bottleneck-key { font-size: 10px; }
    .flow-heading input { font-size: 12px; }

    .slot-title strong {
        font-size: clamp(18px, calc(var(--journey-row-height) * .42), 22px);
    }
    .material-copy {
        flex-basis: 120px;
    }
    .material-text strong { font-size: 11px; }
    .slot-summary dl {
        gap: 4px;
    }
    .slot-summary dl > div,
    .slot-summary dl .total {
        min-width: 68px;
        padding: 0 4px;
    }
    .slot-summary dt { font-size: 9px; }
    .slot-summary dd,
    .slot-summary .total dd { font-size: 12px; }

    .module-node {
        min-width: 68px;
    }
    .module-node > strong {
        font-size: clamp(9px, calc(var(--journey-row-height) * .27), 15px);
    }
    .module-node > small {
        font-size: clamp(7px, calc(var(--journey-row-height) * .2), 11px);
    }
    .module-node .wait-time {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 2px 4px;
    }
    .module-node .wait-value {
        font-size: 10px;
        line-height: 1;
    }
    .transfer-edge {
        min-width: 46px;
    }
    .transfer-edge > strong {
        font-size: 9px;
        font-weight: 900;
    }
}

.control-panel {
    display: block;
}
.analysis-query-form {
    display: block !important;
}
.date-query-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) auto;
    align-items: end;
    gap: 7px;
}
.control-panel .date-field {
    display: grid;
    grid-column: auto;
    gap: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}
.control-panel .date-field input {
    width: 100%;
    min-height: 34px;
    padding: 0 0px;
    border: 1px solid #879ca1;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
}
.date-query-row > button {
    min-height: 34px;
}
.lot-picker {
    min-width: 0;
    margin: 7px 0 0;
    padding: 7px;
    border: 1px solid #9aabad;
    border-radius: 4px;
    background: #edf1f1;
}
.lot-picker-heading,
.lot-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lot-picker-heading > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.lot-picker-heading > div > strong {
    color: var(--ink);
    font-size: 12px;
}
.lot-picker-heading > div > span,
.lot-picker-actions > span {
    color: var(--muted);
    font-size: 9px;
}
.control-panel .select-all-lots {
    display: inline-flex;
    grid-column: auto;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0;
    cursor: pointer;
}
.lot-option-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4px;
    max-height: 132px;
    margin-top: 6px;
    overflow-y: auto;
}
.control-panel .lot-option {
    display: grid;
    grid-template-columns:
        auto
        minmax(72px, .55fr)
        minmax(105px, .75fr)
        minmax(130px, 1fr);
    grid-column: auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid #c1cbcd;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
}
.control-panel .lot-option:has(input:checked) {
    border-color: #1770bd;
    background: #e2f1ff;
    box-shadow: inset 3px 0 #1770bd;
}
.lot-option input,
.select-all-lots input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #176bc1;
}
.lot-option-id {
    overflow: hidden;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lot-option-material {
    overflow: hidden;
    color: #314f57;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lot-option-date {
    color: #4e6267;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lot-option-count {
    color: #087c98;
    font-weight: 900;
    white-space: nowrap;
}
.lot-picker-actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #c4cecf;
}
.lot-picker-actions button {
    min-height: 32px;
}
.lot-option-empty {
    margin: 7px 0 0;
    padding: 12px;
    background: #fff;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}
.lot-summary {
    grid-template-columns: 1.2fr 1.4fr .35fr .75fr .75fr 1fr;
    margin-top: 6px;
}
.analysis-empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    min-height: 240px;
    margin-top: 6px;
    border: 1px dashed #94a6aa;
    border-radius: 5px;
    background: rgba(248,250,250,.75);
    color: var(--muted);
    text-align: center;
}
.analysis-empty-state strong {
    color: var(--ink);
    font-size: 18px;
}
.analysis-empty-state span {
    font-size: 11px;
}
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13,32,37,.72);
    backdrop-filter: blur(3px);
}
.loading-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(380px, 100%);
    padding: 28px;
    border: 1px solid #789096;
    border-radius: 8px;
    background: #f8fafa;
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    text-align: center;
}
.loading-card strong {
    font-size: 16px;
}
.loading-card span {
    color: var(--muted);
    font-size: 10px;
}
.loading-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid #cfdbdd;
    border-top-color: #176bc1;
    border-radius: 50%;
    animation: loading-spin .75s linear infinite;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

.flow-track-header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #9dadaf;
    background: #eef2f2;
}
.slot-summary-spacer {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 var(--summary-width);
    width: var(--summary-width);
    padding: 0 3px;
    border-right: 2px solid #58757b;
}
.spacer-selection {
    flex: 0 0 13px;
    width: 13px;
}
.spacer-material {
    flex: 0 0 89px;
    overflow: hidden;
    color: var(--muted);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spacer-metric {
    display: grid;
    place-items: center;
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
}
.module-node-header {
    display: grid;
    place-items: center;
    flex: 1.4 1 64px;
    min-width: 56px;
    padding: 3px;
    color: var(--muted);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
}
.transfer-edge-header {
    flex: 1 1 42px;
    min-width: 36px;
}
.cell-module {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 9px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    opacity: .85;
}

@media (min-width: 900px) {
    .spacer-selection {
        flex-basis: 17px;
        width: 17px;
    }
    .spacer-material {
        flex-basis: 120px;
    }
    .cell-module {
        font-size: 13px;
    }
    .module-node-header {
        min-width: 68px;
        font-size: 10px;
    }
    .transfer-edge-header {
        min-width: 46px;
    }
}

.lot-flow-group {
    --lot-accent: #1673b8;
    --lot-tint: #e5f3ff;
}
.lot-flow-group:nth-child(6n + 2) {
    --lot-accent: #7351b5;
    --lot-tint: #eee8fb;
}
.lot-flow-group:nth-child(6n + 3) {
    --lot-accent: #27845f;
    --lot-tint: #e4f4ec;
}
.lot-flow-group:nth-child(6n + 4) {
    --lot-accent: #bd6245;
    --lot-tint: #faeae4;
}
.lot-flow-group:nth-child(6n + 5) {
    --lot-accent: #9a7a22;
    --lot-tint: #f8f1d7;
}
.lot-flow-group:nth-child(6n) {
    --lot-accent: #117f88;
    --lot-tint: #e1f3f4;
}
.lot-flow-group + .lot-flow-group {
    border-top: 4px solid #758b90;
}
.lot-flow-header {
    position: sticky;
    left: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 5px 9px;
    border-bottom: 2px solid var(--lot-accent);
    background: var(--lot-tint);
    color: #42565b;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lot-flow-header strong {
    color: var(--lot-accent);
    font-size: 14px;
    font-weight: 950;
}
.lot-flow-header span:nth-of-type(1) {
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--lot-accent);
    color: #fff;
    font-weight: 900;
}
.lot-flow-group .slot-summary {
    box-shadow:
        inset 4px 0 var(--lot-accent),
        3px 0 5px rgba(36,60,66,.08);
}

/* Date-driven LOT query and checkable LOT combo */
.date-auto-hint {
    align-self: center;
    color: #39717d;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.lot-picker-inline {
    display: flex;
    align-items: stretch;
    gap: 7px;
}
.lot-combo {
    position: relative;
    flex: 1 1 620px;
    min-width: 0;
}
.lot-combo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid #879ca1;
    border-radius: 3px;
    background: linear-gradient(#fff, #e7eded);
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
}
.lot-combo > summary::-webkit-details-marker {
    display: none;
}
.lot-combo > summary::after {
    position: absolute;
    right: 12px;
    content: "▾";
    color: #176bc1;
    font-size: 13px;
}
.lot-combo[open] > summary {
    border-color: #176bc1;
    box-shadow: 0 0 0 2px rgba(23,107,193,.14);
}
.lot-combo[open] > summary::after {
    transform: rotate(180deg);
}
.lot-combo > summary strong {
    color: #176bc1;
    font-size: 11px;
}
.lot-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    width: min(850px, calc(100vw - 34px));
    padding: 9px;
    border: 1px solid #789096;
    border-radius: 4px;
    background: #f4f7f7;
    box-shadow: 0 14px 32px rgba(20,46,52,.28);
}
.lot-picker-inline > .lot-picker-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
}
.lot-picker-inline > .lot-picker-actions > span {
    min-width: 58px;
    text-align: center;
}

/* Slot selection and selected-only comparison */
.slot-compare-form {
    margin: 0;
}
.flow-heading {
    flex-wrap: wrap;
}
.flow-heading-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}
.flow-heading .flow-heading-actions > span.slot-selection-count {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 8px;
    border: 1px solid #a4b3b6;
    border-radius: 3px;
    background: #edf2f2;
    color: #53696e;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0;
    white-space: nowrap;
}
.slot-selection-count strong {
    margin-right: 3px;
    color: #176bc1;
    font-size: 12px;
}
.flow-heading-actions button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid #07519d;
    border-radius: 3px;
    background: linear-gradient(#1979db, #0b58ad);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.flow-heading-actions button[value="analyze"] {
    border-color: #778b90;
    background: linear-gradient(#f9fbfb, #dce4e5);
    color: #31494f;
}
.slot-selector {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 0 1px #537b84;
    cursor: pointer;
}
.slot-selector input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #176bc1;
    cursor: pointer;
}
/* Compact top query row: dates → searchable LOT combo → analyze */
.date-query-row {
    grid-template-columns:
        minmax(170px, 210px)
        minmax(160px, 210px)
        minmax(160px, 210px)
        minmax(280px, 340px)
        auto;
    justify-content: start;
}
.eqp-field,
.lot-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.eqp-field > span,
.lot-field > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}
.lot-field .lot-combo {
    width: 100%;
}
.lot-field .lot-combo-menu {
    width: min(500px, calc(100vw - 34px));
}
.lot-search-field {
    display: grid !important;
    grid-column: auto !important;
    gap: 4px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .05em !important;
}
.lot-search-field input {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #879ca1;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    outline: none;
}
.lot-search-field input:focus {
    border-color: #176bc1;
    box-shadow: 0 0 0 2px rgba(23,107,193,.14);
}
.lot-field .lot-option-list {
    grid-template-columns: 1fr;
    max-height: 250px;
    margin-top: 7px;
}
.lot-lazy-sentinel {
    width: 100%;
    height: 1px;
    overflow: hidden;
}
.lot-field .lot-option {
    grid-template-columns:
        auto
        minmax(82px, .55fr)
        minmax(122px, .8fr)
        minmax(145px, 1fr);
    min-height: 36px;
    font-size: 10px;
}
.lot-search-empty {
    margin: 7px 0 0;
    padding: 12px;
    border: 1px dashed #a7b5b8;
    background: #fff;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}
.lot-combo-empty {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #b2bec0;
    border-radius: 3px;
    background: #e8eded;
    color: #738589;
    font-size: 10px;
}
.date-query-row > .lot-picker-actions {
    align-self: end;
    margin: 0;
    padding: 0;
    border: 0;
}
.date-query-row > .lot-picker-actions > span {
    min-width: 56px;
    text-align: center;
}
.date-query-row > .lot-picker-actions button {
    min-height: 36px;
    white-space: nowrap;
}
.date-auto-hint {
    display: block;
    margin-top: 4px;
}

/* Checkable equipment filter */
.eqp-combo {
    position: relative;
    min-width: 0;
}
.eqp-combo > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width : 200px;
    min-height: 36px;
    padding: 0 20px 0 20px;
    border: 1px solid #879ca1;
    border-radius: 3px;
    background: linear-gradient(#fff, #e7eded);
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
}
.eqp-combo > summary::-webkit-details-marker {
    display: none;
}
.eqp-combo > summary::after {
    position: absolute;
    right: 11px;
    content: "▾";
    color: #176bc1;
    font-size: 13px;
}
.eqp-combo[open] > summary {
    border-color: #176bc1;
    box-shadow: 0 0 0 2px rgba(23,107,193,.14);
}
.eqp-combo[open] > summary::after {
    transform: rotate(180deg);
}
.eqp-combo > summary strong {
    color: #176bc1;
    font-size: 10px;
}
.eqp-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 45;
    width: min(310px, calc(100vw - 24px));
    padding: 9px;
    border: 1px solid #789096;
    border-radius: 4px;
    background: #f4f7f7;
    box-shadow: 0 14px 32px rgba(20,46,52,.28);
}
.eqp-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.eqp-picker-heading > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.eqp-picker-heading strong {
    font-size: 11px;
}
.eqp-picker-heading span {
    color: var(--muted);
    font-size: 8px;
}
.control-panel .select-all-eqps,
.control-panel .eqp-option {
    display: flex;
    grid-column: auto;
    align-items: center;
    letter-spacing: 0;
    cursor: pointer;
}
.control-panel .select-all-eqps {
    gap: 5px;
    color: var(--ink);
    font-size: 9px;
    font-weight: 850;
}
.eqp-option-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}
.control-panel .eqp-option {
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid #c1cbcd;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
}
.control-panel .eqp-option:has(input:checked) {
    border-color: #1770bd;
    background: #e2f1ff;
    box-shadow: inset 3px 0 #1770bd;
}
.eqp-option input,
.select-all-eqps input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #176bc1;
}
.eqp-option-id {
    flex: 1;
    font-weight: 950;
}
.eqp-option-count {
    color: #087c98;
    font-size: 8px;
    white-space: nowrap;
}
.eqp-option-empty {
    margin: 0;
    padding: 10px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

/* Selected Slot comparison modal */
.slot-compare-modal {
    width: min(1540px, calc(100vw - 24px));
    max-width: none;
    height: fit-content;
    max-height: calc(100vh - 30px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #47636a;
    border-radius: 8px;
    background: #e6ecec;
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.slot-compare-modal::backdrop {
    background: rgba(9,27,32,.76);
    backdrop-filter: blur(3px);
}
.slot-compare-modal-shell {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.slot-compare-modal-shell > header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 15px;
    border-bottom: 2px solid #1673b8;
    background: #173f49;
    color: #fff;
}
.slot-compare-modal-shell > header span {
    color: #6ee7f6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}
.slot-compare-modal-shell > header h2 {
    margin: 2px 0 0;
    font-size: 19px;
}
.slot-compare-modal-shell > header p {
    margin: 3px 0 0;
    color: #bed3d8;
    font-size: 10px;
}
.slot-compare-modal-shell > header button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #9fc2ca;
    border-radius: 3px;
    background: #f5f8f8;
    color: #173f49;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.slot-compare-modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 115px);
    padding: 10px;
    overflow: hidden;
    overscroll-behavior: none;
}
.slot-compare-modal-body > .flow-scroll {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 135px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #cdd7d9;
}
.slot-compare-modal-body .flow-track-header {
    position: sticky;
    top: 0;
    z-index: 12;
}
.slot-compare-modal-body .slot-summary-spacer {
    position: sticky;
    left: 0;
    z-index: 14;
    background: #eef2f2;
    box-shadow: 3px 0 5px rgba(36,60,66,.12);
}
.slot-compare-modal-body .slot-flow-row {
    min-height: 54px;
}

/* Larger type with content-sized journey columns */
:root {
    --journey-row-height: 36px !important;
    --summary-width: 232px;
}

.page-shell { padding: 4px; }
.control-panel,
.flow-panel { padding: 3px; }
.flow-panel {
    width: fit-content;
    max-width: 100%;
}
.date-query-row { width: 100%; }

.eqp-field > span,
.lot-field > span,
.control-panel .date-field,
.date-auto-hint {
    font-size: 10px;
}
.eqp-combo > summary,
.lot-combo > summary,
.control-panel .date-field input {
    font-size: 13px;
}
.eqp-combo > summary strong,
.lot-combo > summary strong {
    font-size: 12px;
}
.control-panel button {
    font-size: 11px;
}

.flow-heading {
    min-height: 28px;
    padding: 1px 2px 3px;
}
.flow-heading h2 { font-size: 18px; }
.flow-heading label,
.bottleneck-key { font-size: 11px; }
.flow-heading input {
    min-height: 28px;
    font-size: 12px;
}
.flow-heading .flow-heading-actions > span.slot-selection-count,
.flow-heading-actions button {
    font-size: 11px;
}

.flow-scroll {
    width: fit-content;
    max-width: 100%;
}
.flow-list {
    width: max-content;
    min-width: 0;
}
.flow-track {
    flex: 0 0 auto;
    padding: 0 2px;
}
.slot-summary,
.slot-summary-spacer {
    gap: 2px;
    padding-right: 2px;
    padding-left: 2px;
}
.material-copy {
    flex-basis: 84px;
    gap: 3px;
}
.material-text strong { font-size: 9px; }
.slot-summary dl {
    gap: 2px;
}
.slot-summary dl > div,
.slot-summary dl .total {
    padding: 0 2px;
}
.slot-summary dd,
.slot-summary .total dd {
    font-size: 8px;
}
.slot-title {
    flex-basis: 32px;
    width: 32px;
}
.slot-title strong {
    font-size: 17px;
}

.spacer-material {
    flex-basis: 84px;
    font-size: 8px;
}
.spacer-metric {
    font-size: 8px;
}
.module-node,
.module-node-header {
    flex: 0 0 78px;
    min-width: 78px;
}
.transfer-edge,
.transfer-edge-header {
    flex: 0 0 42px;
    min-width: 42px;
}
.module-node-header { font-size: 9px; }
.module-node > small { font-size: 8px; }
.module-node .wait-value { font-size: 8px; }
.cell-module { font-size: 11px; }
.transfer-edge > strong { font-size: 8px; }

.lot-flow-header {
    min-height: 36px;
    gap: 9px;
    padding: 5px 7px;
    font-size: 10px;
}
.lot-flow-header strong { font-size: 16px; }

@media (min-width: 900px) {
    :root {
        --summary-width: 340px;
    }

    .material-copy {
        flex-basis: 110px;
    }
    .material-text strong { font-size: 13px; }
    .slot-summary dl {
        gap: 3px;
    }
    .slot-summary dl > div,
    .slot-summary dl .total {
        min-width: 62px;
        padding: 0 3px;
    }
    .slot-summary dd,
    .slot-summary .total dd {
        font-size: 13px;
    }
    .slot-title {
        flex-basis: 34px;
        width: 34px;
    }
    .slot-title strong {
        font-size: 20px;
    }

    .spacer-material {
        flex-basis: 110px;
        font-size: 10px;
    }
    .spacer-metric {
        font-size: 10px;
    }
    .module-node,
    .module-node-header {
        flex-basis: 96px;
        min-width: 96px;
    }
    .transfer-edge,
    .transfer-edge-header {
        flex-basis: 48px;
        min-width: 48px;
    }
    .module-node-header { font-size: 12px; }
    .module-node > small { font-size: 11px; }
    .module-node .wait-value { font-size: 11px; }
    .cell-module { font-size: 15px; }
    .transfer-edge > strong { font-size: 11px; }
}

@media (min-width: 1200px) {
    .date-query-row {
        grid-template-columns:
            185px
            160px
            160px
            310px
            auto;
    }
}

/* Center the summary and prioritize active duration over waiting time */
.slot-summary {
    justify-content: center;
}
.slot-selector {
    align-self: center;
}
.material-copy {
    justify-content: center;
}
.material-text {
    justify-items: center;
    text-align: center;
}
.material-text strong {
    max-width: 100%;
    text-align: center;
}
.slot-summary dl > div,
.slot-summary dl .total {
    justify-content: center;
    justify-items: center;
    text-align: center;
}
.spacer-material {
    display: grid;
    place-items: center;
    text-align: center;
}

.transfer-edge-header {
    display: grid;
    place-items: center;
    color: #77898d;
    font-size: 8px;
    font-weight: 850;
}
.transfer-edge {
    color: #b2bdc0;
}
.transfer-edge > strong,
.transfer-edge.duration-edge-low > strong,
.slot-flow-row:nth-child(even) .transfer-edge > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-low > strong {
    min-width: 36px;
    padding: 2px 3px;
    border: 1px solid #d1d9db;
    border-radius: 3px;
    background: #f1f4f4;
    color: #8b989b;
    font-weight: 750;
    line-height: 1;
    box-shadow: none;
    transform: none;
}
.transfer-edge.duration-edge-medium {
    background: #eee6fb;
    color: #6537b3;
}
.transfer-edge.duration-edge-medium > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-medium > strong {
    min-width: 40px;
    padding: 3px 4px;
    border-width: 2px;
    border-color: #4e228f;
    background: #7448bf;
    color: #fff;
    font-weight: 950;
    box-shadow:
        inset 0 1px rgba(255,255,255,.32),
        0 1px 2px rgba(78,34,143,.25);
    transform: scale(1.04);
}
.transfer-edge.duration-edge-high {
    background: #f9e1df;
    color: #b7221c;
}
.transfer-edge.duration-edge-high > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-high > strong {
    min-width: 40px;
    padding: 3px 4px;
    border-width: 2px;
    border-color: #8e1712;
    background: #ce342d;
    color: #fff;
    font-weight: 950;
    box-shadow:
        inset 0 1px rgba(255,255,255,.3),
        0 1px 3px rgba(142,23,18,.32);
    transform: scale(1.07);
}

.module-node.wait-node-medium,
.module-node.wait-node-high {
    z-index: 1;
    border: 1px solid #c7d0d2;
    background: #f2f5f5;
    box-shadow: none;
    transform: none;
}

/* Visual strength rises only for values separated from the overall distribution */
.summary-metric.metric-low {
    border-color: #e1e6e7 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .48;
}

.summary-metric.metric-low dt,
.summary-metric.metric-low dd {
    color: #aab4b7 !important;
    font-weight: 650 !important;
}

.summary-metric.metric-none {
    border-color: #d3dcde !important;
    background: #f6f8f8 !important;
    box-shadow: none !important;
    opacity: .74;
}

.summary-metric.metric-none dt {
    color: #87969a !important;
    font-weight: 750 !important;
}

.summary-metric.metric-none dd {
    color: #6f8084 !important;
    font-weight: 800 !important;
}

.transfer-edge.duration-edge-low {
    color: #c9d1d3;
    opacity: .48;
}

.transfer-edge.duration-edge-low > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-low > strong {
    border-color: transparent;
    background: transparent;
    color: #adb8bb;
    font-weight: 600;
}

.transfer-edge.duration-edge-none {
    color: #a9b6b9;
    opacity: .74;
}

.transfer-edge.duration-edge-none > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-none > strong {
    border-color: #dce3e4;
    background: #f7f9f9;
    color: #819094;
    font-weight: 750;
}

.module-node.wait-node-low {
    border-color: #e2e7e8;
    background: transparent;
}

.module-node .wait-time.low {
    border-color: transparent;
    background: transparent;
    color: #aeb8ba;
    font-weight: 600;
    opacity: .48;
}

.module-node.wait-node-none {
    border-color: #d6dfe0;
    background: #f6f8f8;
}

.module-node .wait-time.none {
    border-color: transparent;
    background: transparent;
    color: #819094;
    font-weight: 750;
    opacity: .74;
}

.module-node.wait-node-none:has(.complete) {
    border-color: #dde3e4;
    background: #f4f6f6;
}

.module-node.wait-node-none:has(.complete) .complete {
    opacity: 1;
}

/* All duration/time numbers use one font size */
.flow-scroll {
    --duration-number-size: 12px;
}

.flow-scroll .summary-metric dd,
.flow-scroll .transfer-edge > strong,
.flow-scroll .module-node .wait-value,
.flow-scroll .module-node .cell-time-value {
    font-size: var(--duration-number-size) !important;
}

.flow-scroll .module-node .cell-time-value {
    color: inherit;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.module-node.wait-node-medium > strong,
.module-node.wait-node-high > strong {
    color: #5f7074;
}
.module-node .wait-time.medium,
.module-node .wait-time.high {
    padding: 1px 3px;
    border-width: 1px;
    box-shadow: none;
}
.module-node .wait-time.medium {
    border-color: #d9a454;
    background: #fff0d8;
    color: #8a570d;
}
.module-node .wait-time.high {
    border-color: #d98680;
    background: #ffe8e5;
    color: #9a332d;
}
.module-node .wait-value {
    font-weight: 800;
}

@media (min-width: 900px) {
    .transfer-edge-header {
        font-size: 10px;
    }
    .transfer-edge > strong,
    .transfer-edge.duration-edge-low > strong,
    .slot-flow-row:nth-child(even) .transfer-edge > strong,
    .slot-flow-row:nth-child(even) .transfer-edge.duration-edge-low > strong {
        font-size: 10px;
    }
    .transfer-edge.duration-edge-medium > strong,
    .transfer-edge.duration-edge-high > strong,
    .slot-flow-row:nth-child(even) .transfer-edge.duration-edge-medium > strong,
    .slot-flow-row:nth-child(even) .transfer-edge.duration-edge-high > strong {
        font-size: 12px;
    }
    .module-node .wait-value {
        font-size: 10px;
    }
}

/* Clickable column sorting */
.column-sort-button {
    position: relative;
    margin: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}
.spacer-material.column-sort-button,
.spacer-metric.column-sort-button {
    padding: 0;
}
.spacer-material.column-sort-button,
.spacer-metric.column-sort-button,
.module-node-header.column-sort-button,
.transfer-edge-header.column-sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.column-sort-button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sort-indicator {
    display: inline-grid;
    flex: 0 0 10px;
    place-items: center;
    width: 10px;
    color: #72858a;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}
.sort-indicator::before {
    content: "↕";
    opacity: .48;
}
.column-sort-button:hover {
    background: #e3eef4;
    color: #0b58ad;
}
.column-sort-button:focus-visible {
    z-index: 2;
    box-shadow: inset 0 0 0 2px #1673b8;
}
.column-sort-button[data-sort-direction] {
    background: #dceeff;
    color: #084f92;
    font-weight: 950;
}
.column-sort-button[data-sort-direction="asc"] .sort-indicator::before {
    content: "↑";
    opacity: 1;
}
.column-sort-button[data-sort-direction="desc"] .sort-indicator::before {
    content: "↓";
    opacity: 1;
}

.floating-sort-reset {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid #074d8d;
    border-radius: 22px;
    background: linear-gradient(#2584cf, #0d63ac);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(16,65,94,.3);
    cursor: pointer;
}
.floating-sort-reset span {
    font-size: 20px;
    line-height: 1;
}
.floating-sort-reset:hover {
    background: linear-gradient(#3294df, #0e6fbe);
    transform: translateY(-1px);
}
.floating-sort-reset:focus-visible {
    outline: 3px solid rgba(22,115,184,.3);
    outline-offset: 2px;
}

/* Unified slot list identifiers: checkbox → EQP ID → LOT ID → MATERIAL ID */
:root {
    --summary-width: 410px;
}
.unified-flow-group .slot-summary {
    box-shadow: 3px 0 5px rgba(36,60,66,.08);
}
.summary-identifier {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    min-width: 0;
    height: calc(var(--journey-row-height) - 4px);
    padding: 0 3px;
    overflow: hidden;
    border-right: 1px solid #c5d0d2;
    color: #344b51;
    font-size: 9px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eqp-copy {
    flex-basis: 64px;
    color: #365e70;
}
.lot-copy {
    flex-basis: 64px;
    color: #0b58ad;
}
.spacer-identifier {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
}
.spacer-eqp {
    flex-basis: 64px;
}
.spacer-lot {
    flex-basis: 64px;
}
.spacer-identifier.column-sort-button {
    gap: 2px;
}

@media (min-width: 900px) {
    :root {
        --summary-width: 490px;
    }
    .summary-identifier {
        flex-basis: 76px;
        font-size: 12px;
    }
    .eqp-copy,
    .spacer-eqp {
        flex-basis: 78px;
    }
    .lot-copy,
    .spacer-lot {
        flex-basis: 78px;
    }
    .spacer-identifier {
        font-size: 10px;
    }
}

/* Per-column checkbox filters */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.column-header-wrapper {
    position: relative;
    display: block !important;
    align-self: stretch;
    padding: 0 !important;
}
.column-header-wrapper > .column-sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 2px 13px 2px 2px;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: center;
}
.column-filter-button {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid #9babad;
    border-radius: 2px;
    background: #f8fafa;
    color: #61767b;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}
.column-filter-button:hover,
.column-filter-button[aria-expanded="true"] {
    border-color: #176bc1;
    background: #dceeff;
    color: #07539d;
}
.column-filter-button.is-active {
    border-color: #07519d;
    background: #176bc1;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(23,107,193,.22);
}
.column-filter-popover {
    position: fixed;
    z-index: 140;
    width: min(280px, calc(100vw - 16px));
    padding: 9px;
    border: 1px solid #647f85;
    border-radius: 5px;
    background: #f7f9f9;
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(18,45,52,.28);
}
.column-filter-popover > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}
.column-filter-popover > header strong {
    min-width: 0;
    overflow: hidden;
    color: #173f49;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.column-filter-popover > header button {
    flex: 0 0 auto;
    min-height: 25px;
    padding: 0 7px;
    border: 1px solid #80969b;
    border-radius: 3px;
    background: #fff;
    color: #486066;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}
.column-filter-search {
    display: block;
}
.column-filter-search input {
    width: 100%;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid #90a2a6;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    outline: none;
}
.column-filter-search input:focus {
    border-color: #176bc1;
    box-shadow: 0 0 0 2px rgba(23,107,193,.14);
}
.column-filter-select-all,
.column-filter-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 3px 5px;
    cursor: pointer;
}
.column-filter-select-all {
    margin-top: 6px;
    border-bottom: 1px solid #c4ced0;
    color: #174f72;
    font-size: 10px;
    font-weight: 950;
}
.column-filter-select-all input,
.column-filter-option input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #176bc1;
}
.column-filter-values {
    max-height: min(320px, 48vh);
    overflow-y: auto;
    background: #fff;
}
.column-filter-option {
    border-bottom: 1px solid #e1e7e8;
    color: #354e54;
    font-size: 10px;
}
.column-filter-option:hover {
    background: #e6f3ff;
}
.column-filter-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.column-filter-option small {
    min-width: 23px;
    padding: 1px 4px;
    border-radius: 8px;
    background: #e5ebec;
    color: #62767a;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
}
.column-filter-empty {
    margin: 0;
    padding: 18px 6px;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

/* Simultaneous simulation for up to three selected slots */
.flow-heading-actions .simulate-selected-slots {
    border-color: #176747;
    background: linear-gradient(#36a874, #258058);
}
.simulate-selected-slots small {
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 8px;
    background: rgba(255,255,255,.2);
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .04em;
}
.slot-simulation-modal {
    width: calc(100vw - 18px);
    max-width: none;
    height: calc(100vh - 18px);
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid #315861;
    border-radius: 8px;
    background: #d9e2e3;
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.slot-simulation-modal::backdrop {
    background: rgba(9,27,32,.8);
    backdrop-filter: blur(3px);
}
.slot-simulation-modal-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.slot-simulation-modal-shell > header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 10px 15px;
    border-bottom: 2px solid #28a46e;
    background: #173f49;
    color: #fff;
}
.slot-simulation-modal-shell > header span {
    color: #70f0bd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}
.slot-simulation-modal-shell > header h2 {
    margin: 2px 0 0;
    font-size: 19px;
}
.slot-simulation-modal-shell > header p {
    margin: 3px 0 0;
    color: #bed3d8;
    font-size: 10px;
}
.slot-simulation-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.slot-simulation-transport {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.slot-simulation-modal-shell > header .slot-simulation-transport button {
    min-width: 82px;
    padding: 0 10px;
    border-color: #72979f;
    background: #dce8ea;
}
.slot-simulation-modal-shell > header .slot-simulation-transport .slot-simulation-toggle {
    min-width: 70px;
    border-color: #52d49e;
    background: #70f0bd;
    color: #0a4637;
}
.slot-simulation-modal-shell > header .slot-simulation-transport .slot-simulation-toggle:not(.is-playing) {
    border-color: #60a9dc;
    background: #d8efff;
    color: #084f92;
}
.slot-simulation-transport button:disabled {
    cursor: wait;
    opacity: .45;
}
.slot-simulation-range-control {
    display: grid;
    width: min(330px, 28vw);
    min-width: 250px;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid #56818a;
    border-radius: 4px;
    background: rgba(5,37,44,.72);
}
.slot-simulation-range-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #b9d8df;
    font-size: 9px;
    font-weight: 900;
}
.slot-simulation-range-label strong {
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.slot-simulation-position {
    width: 100%;
    height: 5px;
    margin: 0;
    accent-color: #70f0bd;
    cursor: pointer;
}
.slot-simulation-position:disabled {
    cursor: wait;
    opacity: .45;
}
.slot-simulation-speed {
    display: grid;
    width: min(310px, 32vw);
    min-width: 230px;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid #56818a;
    border-radius: 4px;
    background: rgba(5,37,44,.72);
}
.slot-simulation-speed > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #b9d8df;
    font-size: 9px;
    font-weight: 900;
}
.slot-simulation-speed > label strong {
    color: #70f0bd;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.slot-simulation-speed > div {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 58px;
    align-items: center;
    gap: 8px;
}
.slot-simulation-speed input[type="range"] {
    width: 100%;
    height: 5px;
    margin: 0;
    accent-color: #70f0bd;
    cursor: pointer;
}
.slot-simulation-speed-number {
    display: flex;
    align-items: center;
    height: 27px;
    border: 1px solid #8eb1b8;
    border-radius: 3px;
    background: #f7fafa;
    overflow: hidden;
}
.slot-simulation-speed-number input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 2px 0 7px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #173f49;
    font-size: 11px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.slot-simulation-speed-number span {
    padding-right: 6px;
    color: #315861 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}
.slot-simulation-speed-number:focus-within {
    border-color: #70f0bd;
    box-shadow: 0 0 0 2px rgba(112,240,189,.2);
}
.slot-simulation-modal-shell > header button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #9fc2ca;
    border-radius: 3px;
    background: #f5f8f8;
    color: #173f49;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}
.slot-simulation-grid {
    display: grid;
    grid-template-columns:
        repeat(var(--simulator-count, 1), minmax(340px, 1fr));
    flex: 1 1 auto;
    gap: 7px;
    min-height: 0;
    padding: 7px;
    overflow: auto;
    overscroll-behavior: contain;
}
.slot-simulation-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #6c878c;
    border-radius: 5px;
    background: #edf2f2;
    box-shadow: 0 4px 12px rgba(20,49,55,.18);
}
.slot-simulation-card > header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 5px 8px;
    border-bottom: 1px solid #80979b;
    background: linear-gradient(#f9fbfb, #dce5e6);
}
.slot-simulation-card > header strong {
    color: #084f92;
    font-size: 13px;
}
.slot-simulation-card > header span {
    color: #536b70;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}
.slot-simulation-card iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #b9c6c8;
}

/* 2026-07-26: duration-first comparison hierarchy */
:root {
    --journey-row-height: 68px !important;
    --summary-width: 510px;
}

.slot-flow-row {
    min-height: var(--journey-row-height);
}

.slot-summary,
.slot-summary-spacer {
    gap: 4px;
    padding-right: 5px;
    padding-left: 5px;
}

.slot-summary dl {
    flex: 0 0 auto;
    gap: 0;
    height: calc(var(--journey-row-height) - 8px);
}

.slot-summary dl > .summary-metric,
.slot-summary dl .total {
    display: grid;
    align-content: center;
    justify-content: stretch;
    justify-items: start;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    padding: 5px 7px;
    border-radius: 0;
    text-align: left;
}

.slot-summary dl > .summary-metric.total {
    width: 102px;
    border-radius: 4px 0 0 4px;
    border: 2px solid #0b3e52;
    background: linear-gradient(145deg, #174f63, #0d3545);
    box-shadow: 0 2px 5px rgba(13,53,69,.22);
}

.slot-summary dl > .summary-metric.active {
    width: 92px;
    border: 1px solid #c4ced0;
    background: linear-gradient(145deg, #f7f9f9, #e6ebec);
}

.slot-summary dl > .summary-metric.wait {
    width: 82px;
    border-radius: 0 4px 4px 0;
    border: 1px solid #c4ced0;
    background: linear-gradient(145deg, #f7f9f9, #e6ebec);
}

.slot-summary .summary-metric dt {
    display: block;
    color: #63777c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}

.slot-summary .summary-metric dd,
.slot-summary .total dd {
    color: #243f47;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
}

.slot-summary .summary-metric.total dt {
    color: #9ed7e8;
}

.slot-summary .summary-metric.total dd {
    color: #fff;
    font-size: 18px;
}

.slot-summary .summary-metric.active dd {
    color: #52686e;
    font-size: 16px;
}

.slot-summary .summary-metric.wait dd {
    color: #52686e;
    font-size: 14px;
}

.spacer-metric[data-sort-key="summary-total"] {
    flex: 0 0 102px;
    color: #0d4457;
    font-size: 11px;
}

.spacer-metric[data-sort-key="summary-active"] {
    flex: 0 0 92px;
    color: #62767b;
    font-size: 10px;
}

.spacer-metric[data-sort-key="summary-wait"] {
    flex: 0 0 82px;
    color: #62767b;
    font-size: 9px;
}

.slot-summary-spacer > .spacer-metric + .spacer-metric {
    margin-left: -4px;
}

.transfer-edge,
.transfer-edge-header {
    flex-basis: 58px;
    min-width: 58px;
}

.transfer-edge > strong,
.transfer-edge.duration-edge-low > strong,
.slot-flow-row:nth-child(even) .transfer-edge > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-low > strong {
    min-width: 46px;
    padding: 4px 5px;
    border-color: #9eb6bb;
    background: #f8fbfb;
    color: #284e58;
    font-size: 12px;
    font-weight: 950;
}

.transfer-edge.duration-edge-none {
    color: #8fa5aa;
}

.transfer-edge.duration-edge-none > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-none > strong {
    border-color: #cbd4d6;
    background: #f4f6f6;
    color: #7f8e92;
    font-weight: 750;
    box-shadow: none;
    transform: none;
}

.transfer-edge.duration-edge-medium > strong,
.transfer-edge.duration-edge-high > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-medium > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-high > strong {
    min-width: 48px;
    font-size: 13px;
}

.flow-track-header {
    min-height: 34.2px;
}

.guide-bar .wait-scale::before {
    content: "비교 강조";
    color: #50676d;
    font-size: 8px;
    font-weight: 950;
}

.slot-summary dl > .summary-metric.metric-none,
.slot-summary dl > .summary-metric.metric-low {
    border: 1px solid #cbd4d6 !important;
    background: #f3f5f5 !important;
    box-shadow: none !important;
}

.slot-summary dl > .summary-metric.metric-none dt,
.slot-summary dl > .summary-metric.metric-low dt {
    color: #839195 !important;
    font-weight: 750;
}

.slot-summary dl > .summary-metric.metric-none dd,
.slot-summary dl > .summary-metric.metric-low dd {
    color: #66777b !important;
    font-weight: 800;
}

.slot-compare-modal {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
}

.slot-compare-modal-shell {
    height: 100%;
    max-height: none;
}

.slot-compare-modal-body {
    flex-direction: column;
    gap: 9px;
    max-height: none;
}

.slot-simulation-card-metrics {
    display: grid;
    grid-template-columns: 1.25fr 1fr .9fr;
    gap: 4px;
    margin: 7px 0 0;
}

.slot-compare-overview-metric {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 5px 6px;
    border: 1px solid #c0ccce;
    border-radius: 3px;
    background: #f2f5f5;
}

.slot-compare-overview-metric dt {
    color: #687c81;
    font-size: 8px;
    font-weight: 900;
}

.slot-compare-overview-metric dd {
    margin: 0;
    color: #425a60;
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.slot-compare-overview-metric.total {
    border-color: #174f63;
    background: #174f63;
}

.slot-compare-overview-metric.total dt {
    color: #9ed7e8;
}

.slot-compare-overview-metric.total dd {
    color: #fff;
    font-size: 17px;
}

.slot-compare-overview-metric.active {
    border-color: #c4ced0;
    background: #eef2f2;
}

.slot-compare-overview-metric.active dd {
    color: #52686e;
}

.slot-compare-modal-body > .flow-scroll {
    min-height: 0;
    max-height: none;
}

.slot-compare-modal-body .is-slot-comparison {
    --journey-row-height: 70.2px;
}

.slot-compare-modal-body .is-slot-comparison .slot-flow-row {
    height: var(--journey-row-height);
    min-height: var(--journey-row-height);
}

.slot-simulation-grid {
    grid-template-columns:
        repeat(var(--simulator-count, 1), minmax(500px, 1fr));
}

.slot-simulation-card {
    min-width: 500px;
}

.slot-simulation-card-metrics {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 7px;
    border-bottom: 1px solid #a9b8bb;
    background: #f7f9f9;
}

.slot-simulation-card-metrics .slot-compare-overview-metric {
    padding: 4px 6px;
}

@media (min-width: 900px) {
    :root {
        --summary-width: 600px;
    }
}

/* Duration summary: no fixed metric widths or surrounding whitespace */
.slot-summary,
.slot-summary-spacer {
    gap: 0;
    margin: 0;
    padding: 0;
}

.slot-summary dl {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    gap: 0;
    margin: 0;
    padding: 0;
}

.slot-summary dl > .summary-metric,
.slot-summary dl > .summary-metric.total,
.slot-summary dl > .summary-metric.active,
.slot-summary dl > .summary-metric.wait {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.slot-summary-spacer > .spacer-metric,
.slot-summary-spacer > .spacer-metric[data-sort-key="summary-total"],
.slot-summary-spacer > .spacer-metric[data-sort-key="summary-active"],
.slot-summary-spacer > .spacer-metric[data-sort-key="summary-wait"],
.slot-summary-spacer > .spacer-metric + .spacer-metric {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Compact the entire duration table to its content */
:root {
    --journey-row-height: 41.4px !important;
    --summary-width: 443px;
}

.flow-panel,
.flow-heading,
.flow-scroll,
.flow-list,
.flow-track-header,
.slot-flow-row,
.slot-summary,
.slot-summary-spacer,
.flow-track {
    gap: 0;
    margin: 0;
    padding: 0;
}

.flow-panel,
.flow-scroll {
    width: fit-content;
    max-width: 100%;
}

.flow-list,
.flow-track-header,
.slot-flow-row {
    width: max-content;
    min-width: 0;
}

.slot-summary,
.slot-summary-spacer {
    flex: 0 0 var(--summary-width);
    width: var(--summary-width);
}

.slot-selector,
.spacer-selection {
    flex: 0 0 15px;
    width: 15px;
    min-width: 15px;
}

.summary-identifier,
.spacer-identifier,
.eqp-copy,
.lot-copy,
.spacer-eqp,
.spacer-lot {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
    margin: 0;
    padding: 0;
}

.material-copy,
.spacer-material {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    gap: 0;
    margin: 0;
    padding: 0;
}

.flow-track {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.module-node,
.module-node-header {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    gap: 0;
    margin: 0;
    padding: 0;
}

.module-node.cassette,
.module-node-header.cassette {
    flex-basis: 100px;
    width: 100px;
    min-width: 100px;
}

.module-node.fic,
.module-node-header.fic {
    flex-basis: 64px;
    width: 64px;
    min-width: 64px;
}

.module-node.aligner,
.module-node-header.aligner {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
}

.module-node.chamber,
.module-node-header.chamber {
    flex-basis: 86px;
    width: 86px;
    min-width: 86px;
}

.module-node.cooler,
.module-node-header.cooler {
    flex-basis: 76px;
    width: 76px;
    min-width: 76px;
}

.transfer-edge,
.transfer-edge-header {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    gap: 0;
    margin: 0;
    padding: 0;
}

.flow-track-header button,
.slot-flow-row dt,
.slot-flow-row dd,
.slot-flow-row span,
.slot-flow-row strong,
.slot-flow-row small,
.slot-flow-row i,
.transfer-edge > strong,
.module-node > small,
.module-node .wait-time,
.module-node .complete {
    margin: 0;
    padding: 0;
}

.transfer-edge > strong,
.transfer-edge.duration-edge-low > strong,
.slot-flow-row:nth-child(even) .transfer-edge > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-low > strong {
    width: auto;
    min-width: 0;
}

.flow-track-header .column-sort-button > span,
.slot-summary .summary-identifier,
.slot-summary .material-text strong {
    overflow: visible;
    text-overflow: clip;
}

.date-query-row {
    grid-template-columns: 185px 160px 200px 310px auto;
    align-items: end;
    justify-content: start;
    gap: 7px;
}

.date-query-row > .lot-field {
    margin-left: 13px;
}

.date-query-row .eqp-combo,
.date-query-row .eqp-combo > summary {
    width: 100%;
    max-width: 100%;
}

/* Duration-delay emphasis uses borders and type only; never a yellow cell fill */
.slot-flow-row.has-priority-duration:not(.has-priority-anomaly) {
    background: #f5f7f7;
}

.slot-flow-row:nth-child(even).has-priority-duration:not(.has-priority-anomaly) {
    background: #e9eeee;
}

.slot-flow-row.has-priority-duration:not(.has-priority-anomaly) .slot-summary {
    border-left-color: #d97800;
    background: linear-gradient(135deg, #f9fbfb, #dfe7e8);
}

.summary-metric.metric-medium {
    border-color: #d97800 !important;
    background: #f3f5f5 !important;
    box-shadow: inset 0 0 0 1px rgba(217,120,0,.16) !important;
}

.module-node.wait-node-medium {
    border-color: #d9a454;
    background: #f2f5f5;
}

.module-node .wait-time.medium {
    border-color: #d9a454;
    background: #fff0d8;
    color: #8a570d;
}

/* Duration and waiting-time badges share the same yellow/red scale */
.transfer-edge.duration-edge-medium {
    background: #f2f5f5;
    color: #8a570d;
}

.transfer-edge.duration-edge-medium > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-medium > strong {
    border: 1px solid #d9a454;
    background: #fff0d8;
    color: #8a570d;
    box-shadow: none;
    transform: none;
}

.transfer-edge.duration-edge-high {
    background: #f2f5f5;
    color: #9a332d;
}

.transfer-edge.duration-edge-high > strong,
.slot-flow-row:nth-child(even) .transfer-edge.duration-edge-high > strong {
    border: 1px solid #d98680;
    background: #ffe8e5;
    color: #9a332d;
    box-shadow: none;
    transform: none;
}

/* Heatmap hierarchy: good values recede; worse values gain fill and type contrast */
.slot-flow-row.has-priority-duration,
.slot-flow-row.has-priority-anomaly {
    background: #f5f7f7;
}

.slot-flow-row:nth-child(even).has-priority-duration,
.slot-flow-row:nth-child(even).has-priority-anomaly {
    background: #e9eeee;
}

.slot-flow-row.has-priority-duration .slot-summary,
.slot-flow-row.has-priority-anomaly .slot-summary {
    border-left: 0;
    background: linear-gradient(135deg, #f9fbfb, #dfe7e8);
}

body .flow-scroll .summary-metric.metric-low {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .42;
}

body .flow-scroll .summary-metric.metric-low dt,
body .flow-scroll .summary-metric.metric-low dd {
    color: #aeb9bb !important;
    font-weight: 650 !important;
}

body .flow-scroll .summary-metric.metric-none {
    border-color: #d5dddf !important;
    background: #edf1f1 !important;
    box-shadow: none !important;
    opacity: .72;
}

body .flow-scroll .summary-metric.metric-none dt,
body .flow-scroll .summary-metric.metric-none dd {
    color: #718388 !important;
    font-weight: 800 !important;
}

body .flow-scroll .summary-metric.metric-medium {
    border: 1px solid #d58b13 !important;
    background: #ffe3a8 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45) !important;
    opacity: 1;
}

body .flow-scroll .summary-metric.metric-medium dt,
body .flow-scroll .summary-metric.metric-medium dd {
    color: #754000 !important;
    font-weight: 950 !important;
}

body .flow-scroll .summary-metric.metric-high {
    border: 2px solid #b92e26 !important;
    background: #f4a49d !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38) !important;
    opacity: 1;
}

body .flow-scroll .summary-metric.metric-high dt,
body .flow-scroll .summary-metric.metric-high dd {
    color: #5e0e0a !important;
    font-weight: 950 !important;
}

.flow-scroll .transfer-edge.duration-edge-low {
    background: transparent !important;
    color: #c4cdcf !important;
    opacity: .42;
}

.flow-scroll .transfer-edge.duration-edge-low > strong {
    border-color: transparent !important;
    background: transparent !important;
    color: #aeb9bb !important;
    font-weight: 650 !important;
}

.flow-scroll .transfer-edge.duration-edge-none {
    background: #edf1f1 !important;
    color: #91a0a3 !important;
    opacity: .72;
}

.flow-scroll .transfer-edge.duration-edge-none > strong {
    border-color: #d5dddf !important;
    background: #edf1f1 !important;
    color: #718388 !important;
    font-weight: 800 !important;
}

.flow-scroll .transfer-edge.duration-edge-medium {
    background: #fff1cd !important;
    color: #a26408 !important;
    opacity: 1;
}

.flow-scroll .transfer-edge.duration-edge-medium > strong {
    border-color: #d58b13 !important;
    background: #ffd978 !important;
    color: #754000 !important;
    font-weight: 950 !important;
}

.flow-scroll .transfer-edge.duration-edge-high {
    background: #ffe1de !important;
    color: #a42e27 !important;
    opacity: 1;
}

.flow-scroll .transfer-edge.duration-edge-high > strong {
    border-color: #b92e26 !important;
    background: #f29a93 !important;
    color: #5e0e0a !important;
    font-weight: 950 !important;
}

.flow-scroll .module-node.wait-node-low {
    border-color: transparent !important;
    background: transparent !important;
}

.flow-scroll .module-node .wait-time.low {
    border-color: transparent !important;
    background: transparent !important;
    color: #aeb9bb !important;
    opacity: .42;
}

.flow-scroll .module-node.wait-node-none {
    border-color: #d5dddf !important;
    background: #edf1f1 !important;
}

.flow-scroll .module-node .wait-time.none {
    border-color: transparent !important;
    background: transparent !important;
    color: #718388 !important;
    opacity: .72;
}

.flow-scroll .module-node.wait-node-medium {
    border-color: #d58b13 !important;
    background: #fff1cd !important;
}

.flow-scroll .module-node .wait-time.medium {
    border-color: #d58b13 !important;
    background: #ffd978 !important;
    color: #754000 !important;
    opacity: 1;
}

.flow-scroll .module-node.wait-node-high {
    border-color: #b92e26 !important;
    background: #ffe1de !important;
}

.flow-scroll .module-node .wait-time.high {
    border-color: #b92e26 !important;
    background: #f29a93 !important;
    color: #5e0e0a !important;
    opacity: 1;
}

.flow-scroll .module-node.wait-node-medium > strong,
.flow-scroll .module-node.wait-node-medium .wait-value {
    color: #754000 !important;
    font-weight: 950 !important;
}

.flow-scroll .module-node.wait-node-high > strong,
.flow-scroll .module-node.wait-node-high .wait-value {
    color: #5e0e0a !important;
    font-weight: 950 !important;
}

/* Keep every value legible; heatmap strength comes from the cell fill */
body .flow-scroll .summary-metric.metric-low,
body .flow-scroll .summary-metric.metric-none,
.flow-scroll .transfer-edge.duration-edge-low,
.flow-scroll .transfer-edge.duration-edge-none,
.flow-scroll .module-node .wait-time.low,
.flow-scroll .module-node .wait-time.none {
    opacity: 1;
}

body .flow-scroll .summary-metric.metric-low dt,
body .flow-scroll .summary-metric.metric-none dt {
    color: #52686e !important;
    font-weight: 850 !important;
}

body .flow-scroll .summary-metric.metric-low dd,
body .flow-scroll .summary-metric.metric-none dd {
    color: #29454c !important;
    font-weight: 900 !important;
}

.flow-scroll .transfer-edge.duration-edge-low,
.flow-scroll .transfer-edge.duration-edge-none {
    color: #52686e !important;
}

.flow-scroll .transfer-edge.duration-edge-low > strong,
.flow-scroll .transfer-edge.duration-edge-none > strong {
    color: #29454c !important;
    font-weight: 900 !important;
}

.flow-scroll .module-node.wait-node-low > span,
.flow-scroll .module-node.wait-node-none > span,
.flow-scroll .module-node .wait-time.low,
.flow-scroll .module-node .wait-time.none,
.flow-scroll .module-node .wait-time.low .wait-value,
.flow-scroll .module-node .wait-time.none .wait-value {
    color: #29454c !important;
    font-weight: 900 !important;
}

.flow-scroll .module-node .cell-time-value {
    color: #29454c !important;
}

/* Selected Slot: keep the row fill unchanged and mark only its full perimeter */
.slot-flow-row:has(.slot-selection-input:checked) {
    position: relative;
    z-index: 5;
    box-shadow: none;
}

.slot-flow-row:has(.slot-selection-input:checked)::after {
    position: absolute;
    z-index: 30;
    inset: 0;
    border: 3px solid #08704d;
    content: "";
    pointer-events: none;
}

.slot-flow-row:has(.slot-selection-input:checked) .slot-selection-input {
    accent-color: #08704d;
}

/* Normal values stay uniform; only long duration values receive emphasis */
body .flow-scroll .summary-metric.metric-low,
body .flow-scroll .summary-metric.metric-none {
    border: 1px solid #cbd4d6 !important;
    background: #f3f5f5 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body .flow-scroll .summary-metric.metric-low dt,
body .flow-scroll .summary-metric.metric-none dt {
    color: #52686e !important;
    font-weight: 850 !important;
}

body .flow-scroll .summary-metric.metric-low dd,
body .flow-scroll .summary-metric.metric-none dd {
    color: #29454c !important;
    font-weight: 900 !important;
}

body .flow-scroll .summary-metric.metric-medium {
    border: 1px solid #d58b13 !important;
    background: #ffe3a8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body .flow-scroll .summary-metric.metric-medium dt,
body .flow-scroll .summary-metric.metric-medium dd {
    color: #754000 !important;
    font-weight: 950 !important;
}

body .flow-scroll .summary-metric.metric-high {
    border: 2px solid #b92e26 !important;
    background: #f4a49d !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body .flow-scroll .summary-metric.metric-high dt,
body .flow-scroll .summary-metric.metric-high dd {
    color: #5e0e0a !important;
    font-weight: 950 !important;
}

.flow-scroll .transfer-edge.duration-edge-low,
.flow-scroll .transfer-edge.duration-edge-none {
    background: transparent !important;
    color: #52686e !important;
    opacity: 1 !important;
}

.flow-scroll .transfer-edge.duration-edge-low > strong,
.flow-scroll .transfer-edge.duration-edge-none > strong {
    border: 1px solid #cbd4d6 !important;
    background: #f3f5f5 !important;
    color: #29454c !important;
    box-shadow: none !important;
    font-weight: 900 !important;
    transform: none !important;
}

.flow-scroll .transfer-edge.duration-edge-medium {
    background: #fff1cd !important;
    color: #a26408 !important;
    opacity: 1 !important;
}

.flow-scroll .transfer-edge.duration-edge-medium > strong {
    border: 1px solid #d58b13 !important;
    background: #ffd978 !important;
    color: #754000 !important;
    box-shadow: none !important;
    font-weight: 950 !important;
    transform: none !important;
}

.flow-scroll .transfer-edge.duration-edge-high {
    background: #ffe1de !important;
    color: #a42e27 !important;
    opacity: 1 !important;
}

.flow-scroll .transfer-edge.duration-edge-high > strong {
    border: 1px solid #b92e26 !important;
    background: #f29a93 !important;
    color: #5e0e0a !important;
    box-shadow: none !important;
    font-weight: 950 !important;
    transform: none !important;
}

.flow-scroll .module-node.wait-node-low,
.flow-scroll .module-node.wait-node-none {
    border-color: #d5dddf !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.flow-scroll .module-node.wait-node-low > span,
.flow-scroll .module-node.wait-node-none > span,
.flow-scroll .module-node .wait-time.low,
.flow-scroll .module-node .wait-time.none,
.flow-scroll .module-node .wait-time.low .wait-value,
.flow-scroll .module-node .wait-time.none .wait-value {
    color: #29454c !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

.flow-scroll .module-node .wait-time.low,
.flow-scroll .module-node .wait-time.none {
    border-color: #cbd4d6 !important;
    background: #f3f5f5 !important;
    box-shadow: none !important;
}

.flow-scroll .module-node.wait-node-medium {
    border-color: #d58b13 !important;
    background: #fff1cd !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.flow-scroll .module-node.wait-node-medium > span,
.flow-scroll .module-node .wait-time.medium,
.flow-scroll .module-node .wait-time.medium .wait-value {
    color: #754000 !important;
    font-weight: 950 !important;
    opacity: 1 !important;
}

.flow-scroll .module-node .wait-time.medium {
    border-color: #d58b13 !important;
    background: #ffd978 !important;
    box-shadow: none !important;
}

.flow-scroll .module-node.wait-node-high {
    border-color: #b92e26 !important;
    background: #ffe1de !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.flow-scroll .module-node.wait-node-high > span,
.flow-scroll .module-node .wait-time.high,
.flow-scroll .module-node .wait-time.high .wait-value {
    color: #5e0e0a !important;
    font-weight: 950 !important;
    opacity: 1 !important;
}

.flow-scroll .module-node .wait-time.high {
    border-color: #b92e26 !important;
    background: #f29a93 !important;
    box-shadow: none !important;
}

/* No alternating row fill: every Slot row uses one background */
.slot-flow-row,
.slot-flow-row:nth-child(even),
.slot-flow-row.has-priority-duration,
.slot-flow-row.has-priority-anomaly,
.slot-flow-row:nth-child(even).has-priority-duration,
.slot-flow-row:nth-child(even).has-priority-anomaly {
    background: #fff !important;
}

/* Keep the transfer direction arrow on its own line below the duration */
.flow-scroll .transfer-edge > i {
    z-index: 3;
    top: auto;
    bottom: 5px;
    transform: none;
}