/* The shell of APEX: the tokens of docs/handoff/home-to-report/STYLE.md, the top bar and the CUI
   marking. A colour has one meaning. Amber is for an abnormal state only, and the marker yellow of
   the frames is not a colour of the product. */

:root {
    --ax-navy: #0E3556;
    --ax-ink: #14202B;
    --ax-ink-2: #3D4852;
    --ax-muted: #8E979F;
    --ax-line: #D4D8DC;
    --ax-line-2: #E6E9EC;
    --ax-canvas: #C9CED3;
    --ax-surface: #FFFFFF;
    --ax-surface-2: #F4F5F6;
    --ax-cui: #502B85;
    --ax-amber: #F2B233;
    --ax-amber-text: #8A5A00;
    --ax-amber-fill: #FFF8E6;
    --ax-red: #B3261E;
    --ax-red-fill: #F9DEDC;
    --ax-green: #1E7B34;
    --ax-green-fill: #DCEFE1;
    --ax-new: #6D5EA8;
    --ax-new-fill: #F4F1FB;

    --ax-title: FjallaOne-Regular, 'Fjalla One', Roboto, sans-serif;
    --ax-body: Roboto, sans-serif;
    --ax-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body { background: var(--ax-canvas); color: var(--ax-ink); font-family: var(--ax-body); line-height: 1.45; }
/* The shell paints no photo behind the page, thus nothing needs the blur. A backdrop-filter
   also made .page the box of every fixed dialog: a dialog opened at the top of the page and not
   where the reader had scrolled. */
.page { backdrop-filter: none; background: none; }

.ax-mono { font-family: var(--ax-mono); font-variant-numeric: tabular-nums; }
.ax-title { font-family: var(--ax-title); text-transform: uppercase; letter-spacing: .03em; }

/* --- CUI: the banner at the top and at the bottom of every page --- */

.ax-cui {
    background: var(--ax-cui); color: #FFFFFF; text-align: center;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; padding: 3px; line-height: 1.4;
}

/* --- The top bar --- */

.ax-top {
    background: var(--ax-ink); color: #FFFFFF; display: flex; align-items: stretch;
    gap: 0; padding: 0; height: 48px; position: sticky; top: 0; z-index: 1030;
}
/* The bar reads as the run screen's band (C6): sections parted by a rule, the same height and type. */
.ax-brand {
    font-family: var(--ax-title); font-size: 22px; letter-spacing: .04em; color: #FFFFFF !important;
    text-decoration: none; display: flex; align-items: center; padding: 0 14px; border-right: 1px solid #2A3A48;
}
.ax-top > nav, .ax-top > ul { padding: 0 6px; }
.ax-nav { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.ax-nav a {
    color: #AFC2D3; text-decoration: none; font-family: var(--ax-title); font-size: 15px;
    letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center;
    padding: 0 12px; height: 100%; border-bottom: 3px solid transparent; line-height: 1;
}
.ax-nav a.active { color: #FFFFFF; border-bottom-color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.ax-nav a:hover { color: #FFFFFF; }

.ax-me { margin-left: auto; position: relative; display: flex; align-items: center; padding: 0 12px; border-left: 1px solid #2A3A48; }
.ax-me > button {
    width: 34px; height: 34px; border-radius: 2px; background: transparent; color: #FFFFFF;
    display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid #FFFFFF;
}
.ax-me .dropdown-menu { border-radius: 2px; }

/* --- Pieces that pages share --- */

.ax-panel { background: var(--ax-line-2); border: 1px solid var(--ax-muted); border-radius: 2px; }
.ax-paper { background: var(--ax-surface); border: 1px solid var(--ax-muted); border-radius: 2px; }
.ax-panel-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 9px 14px; background: var(--ax-line); border-bottom: 1px solid var(--ax-muted);
}
.ax-panel-head .ax-title { font-size: 15px; }

.ax-tag {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 2px; background: var(--ax-line); white-space: nowrap;
    display: inline-block; line-height: 1.4;
}
.ax-state {
    font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 2px; white-space: nowrap;
    display: inline-block; line-height: 1.4; text-decoration: none;
}
.ax-state.ok { background: var(--ax-green-fill); color: #1E5631; border: 1px solid var(--ax-green); }
.ax-state.attention { border: 1px dashed var(--ax-amber-text); color: var(--ax-amber-text); background: var(--ax-amber-fill); }
.ax-state.recording { background: var(--ax-red); color: #FFFFFF; }
.ax-state.added { color: #4A3D78; border: 1px dashed var(--ax-new); background: var(--ax-new-fill); }
.ax-state.alarm { background: var(--ax-red-fill); color: var(--ax-red); border: 1px solid var(--ax-red); }
.ax-state.info { background: #FFFFFF; border: 1px solid var(--ax-muted); color: var(--ax-ink-2); }

.ax-btn {
    font-family: var(--ax-title); font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
    min-height: 44px; padding: 0 16px; margin-bottom: 0; border-radius: 2px; border: 2px solid var(--ax-ink);
    background: var(--ax-surface-2); color: var(--ax-ink); display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
}
.ax-btn:disabled { opacity: .5; cursor: not-allowed; }
.ax-btn.primary { background: var(--ax-navy); border-color: var(--ax-navy); color: #FFFFFF; }
.ax-btn.small { min-height: 34px; font-size: 15px; padding: 0 10px; border-width: 1px; }
.ax-btn.on-dark { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.ax-btn.on-light { background: #FFFFFF; border-color: #FFFFFF; color: var(--ax-ink); }
.ax-btn.on-dark-fill { background: var(--ax-ink); border-color: var(--ax-ink); color: #FFFFFF; }

/* --- A dialog of choices: step kinds, quick actions --- */
    .asd-dim { position: fixed; inset: 0; background: rgba(20, 32, 43, .45); z-index: 1040; }
    .asd { position: fixed; z-index: 1041; top: 12vh; left: 50%; transform: translateX(-50%);
           width: min(660px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
           background: #FFFFFF; border: 2px solid var(--ax-ink); border-radius: 3px;
           box-shadow: 0 14px 34px rgba(20, 32, 43, .35); }
    .asd-head { background: var(--ax-navy); color: #FFFFFF; padding: 12px 16px; display: flex;
                justify-content: space-between; align-items: center; gap: 10px; }
    .asd-body { padding: 12px 12px 14px; line-height: 1.4; }
    .asd-grid, .asd-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .asd-kind { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left;
                border: 1px solid var(--ax-line); border-radius: 2px; background: #FFFFFF;
                color: var(--ax-ink); width: 100%; }
    .asd-kind:hover, .asd-kind:focus-visible { border-color: var(--ax-navy); outline: 2px solid var(--ax-navy); }
    .asd-kind .small { color: var(--ax-ink-2); }
    .asd-icon { width: 28px; height: 28px; border-radius: 2px; color: #FFFFFF; display: grid;
                place-items: center; flex: none; }
    .asd-icon-custom { background: #FFFFFF; color: var(--ax-ink); border: 2px dashed var(--ax-ink); }
    .asd-preset { margin-top: 8px; border-style: dashed; border-color: var(--ax-ink-2); }
    @media (max-width: 575.98px) { .asd-grid, .asd-templates { grid-template-columns: 1fr; } }

/* --- The builder and the run: header, step strip, panes --- */
/* --- Builder v3: header, step strip and three panes --- */
.wb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
           flex-wrap: wrap; margin-bottom: .75rem; }
.wb-head h1 { font-size: 34px; margin: 0; font-weight: 400; }
.wb-crumb { font-size: 14px; color: var(--ax-ink-2); }
.wb-strip { display: flex; align-items: center; gap: 0; padding: 14px 16px; overflow-x: auto;
            margin-bottom: 12px; }
.wb-end { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ax-ink-2);
          flex: none; }
.wb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ax-ink); }
.wb-dot.open { background: #FFFFFF; border: 3px solid var(--ax-ink); }
.wb-line { width: 14px; border-top: 2px solid var(--ax-muted); flex: none; }
.wb-plus { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ax-navy);
           color: var(--ax-navy); background: #FFFFFF; display: grid; place-items: center;
           font-weight: 700; font-size: 18px; flex: none; padding: 0; line-height: 1; }
.wb-plus:hover { background: var(--ax-navy); color: #FFFFFF; }
.wb-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; flex: none;
           border: 1px solid var(--ax-muted); border-radius: 2px; background: #FFFFFF;
           font-size: 13px; line-height: 1.25; cursor: pointer; text-align: left; color: var(--ax-ink); }
.wb-chip.active { border: 2px solid var(--ax-ink); box-shadow: inset 0 -4px 0 var(--ax-ink); }
.wb-chip-sub { color: var(--ax-ink-2); }
.wb-kind-icon { width: 28px; height: 28px; border-radius: 2px; color: #FFFFFF; display: grid;
                place-items: center; flex: none; font-size: 14px; }
.wb-tool { display: block; width: 100%; text-align: left; padding: 8px 12px; margin-bottom: 6px;
           background: #FFFFFF; border: 1px solid var(--ax-line); border-radius: 2px;
           color: var(--ax-ink); font-size: 14.5px; }
.wb-tool:hover:not(:disabled) { border-color: var(--ax-navy); }
.wb-tool.suggested { border: 1px dashed var(--ax-navy); background: #F3F6F9; font-weight: 700;
                     color: var(--ax-navy); }
.wb-tool:disabled { color: var(--ax-muted); }
.wb-section { font-size: 13px; color: var(--ax-ink-2); margin: 10px 0 6px; }
.wb-element { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
              border-bottom: 1px solid var(--ax-line-2); background: #FFFFFF; font-size: 14px; }
.wb-element.active { background: var(--ax-navy); color: #FFFFFF; }
.wb-element.active .text-muted { color: #CFD9E3 !important; }
.wb-element .ax-tag { background: #FFFFFF; border: 1px solid var(--ax-ink); color: var(--ax-ink); }
.wb-element.needs { box-shadow: inset 4px 0 0 var(--ax-amber); }
.wb-element-tools { display: flex; gap: 2px; flex: none; }
.wb-element-tools button { border: none; background: transparent; color: inherit; padding: 0 4px; }
.wb-empty { border: 2px dashed var(--ax-muted); padding: 24px; text-align: center;
            color: var(--ax-ink-2); margin: 12px; }
.wb-pane { max-height: 34rem; overflow-y: auto; }
.wb-inspector { position: sticky; top: 1rem; }
.wb-settings { border: 2px solid var(--ax-ink); }
.wb-settings .wb-pane { max-height: none; overflow: visible; }

@media print {
    .ax-top { display: none; }
    .ax-cui { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.asd-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 575.98px) { .asd-grid-3 { grid-template-columns: 1fr; } }

/* --- The run screen (run screen SPEC): one top band, the main area, and the dock --- */
.rs-page { height: 100vh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.rs-page > .ax-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.rs-band { position: relative; height: 48px; flex: none; background: var(--ax-ink); color: #FFFFFF; display: flex; align-items: stretch; }
.rs-band > * { display: flex; align-items: center; border-right: 1px solid #2A3A48; }
.rs-id { gap: 10px; padding: 0 14px; max-width: 280px; min-width: 0; }
.rs-cell-name { font-family: var(--ax-title); font-size: 22px; line-height: 1; }
.rs-id-run { font-size: 12.5px; line-height: 1.3; color: #C9D3DC; min-width: 0; }
.rs-id-run strong { color: #FFFFFF; font-weight: 500; }
.rs-steps { flex: 1; min-width: 0; gap: 8px; padding: 0 12px; overflow: hidden; white-space: nowrap; }
.rs-tile { display: inline-flex; align-items: center; gap: 8px; height: 28px; max-width: 260px; padding: 0 10px 0 4px; flex: none;
           border: 1px solid #5C6B78; border-radius: 2px; background: transparent; color: #FFFFFF; font-size: 13.5px; }
.rs-tile-icon { width: 22px; height: 22px; font-size: 12px; flex: none; }
.rs-tile-name { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.rs-tile.done { opacity: .7; }
.rs-tile.now { background: #FFFFFF; color: var(--ax-ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ax-navy); opacity: 1; }
.rs-tile.now.recording { box-shadow: inset 0 -3px 0 var(--ax-red); }
.rs-tile.next:disabled { opacity: 1; cursor: default; }
.rs-tile.viewing { outline: 2px solid #FFFFFF; outline-offset: 1px; opacity: 1; }
.rs-tile.added { border-style: dashed; border-color: #B3A8E0; }
.rs-tile-viewing { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.rs-plus { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid #8E979F; background: transparent; color: inherit; font-weight: 700; line-height: 1; padding: 0; }
.rs-pop .rs-plus { color: var(--ax-ink); border-color: var(--ax-ink-2); }
.rs-chip-more { height: 30px; flex: none; padding: 0 10px; border: 1px solid #5C6B78; border-radius: 2px; background: transparent; color: #FFFFFF; font-size: 13px; }
.rs-chip-more.dashed { border-style: dashed; }
.rs-band-hint { flex: none; padding: 2px 8px; background: var(--ax-amber-fill); color: #8A5A00; font-size: 12.5px; border-radius: 2px; }
.rs-pill-box { padding: 0 14px; }
.rs-pill { font-family: var(--ax-title); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; white-space: nowrap; }
.rs-pill.recording { background: var(--ax-red); }
.rs-pill.saved { background: var(--ax-green); }
.rs-pill.attention { background: var(--ax-amber); color: var(--ax-ink); }
.rs-pill.idle { border: 2px solid #8E979F; }
.rs-menu-box { padding: 0 10px; }
.rs-menu-button { width: 34px; height: 34px; border: 2px solid #FFFFFF; border-radius: 2px; background: transparent; color: #FFFFFF; font-size: 20px; line-height: 1; }
.rs-clock { padding: 0 14px; font-size: 16px; border-right: none !important; }

.rs-pop { position: absolute; top: 52px; z-index: 1030; min-width: 260px; max-height: 60vh; overflow: auto; background: #FFFFFF; color: var(--ax-ink);
          border: 2px solid var(--ax-ink); border-radius: 2px; box-shadow: 0 6px 18px rgba(20, 32, 43, .25); padding: 6px; }
.rs-pop-menu { right: 90px; }
.rs-pop-item { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; align-items: center; padding: 6px 10px;
               border: none; background: none; text-align: left; color: var(--ax-ink); text-decoration: none; }
.rs-pop-item:hover, .rs-pop-item:focus-visible { background: var(--ax-line-2); color: var(--ax-ink); }

.rs-banner { flex: none; display: flex; align-items: center; gap: 16px; min-height: 59px; padding: 8px 16px; border-bottom: 2px solid var(--ax-ink); }
.rs-banner.warning { background: var(--ax-amber); color: var(--ax-ink); }
.rs-banner.alarm { background: var(--ax-red); color: #FFFFFF; }
.rs-added { flex: none; }

.rs-main { flex: 1; min-height: 0; padding: 12px 16px; background: var(--ax-canvas, #C9CED3); display: flex; flex-direction: column; }
.rs-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.rs-single { flex: 1; min-height: 0; min-width: 0; display: flex; }
.rs-single > .rs-card { flex: 1; min-width: 0; }
.rs-card { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--ax-muted); border-radius: 2px; }
.rs-card-body { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 16px 16px 32px; }
.rs-step-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 2px solid var(--ax-ink); flex-wrap: wrap; }
.rs-head-dock { margin-left: auto; display: flex; align-items: center; }
.rs-head-dock .rs-main-button { min-height: 38px; min-width: 150px; font-size: 14px; }
.rs-step-head .ax-title.fs-3 { font-size: 20px !important; }
.rs-step-icon { width: 28px; height: 28px; font-size: 14px; }
.rs-tag-read { margin-left: 10px; padding: 1px 6px; background: var(--ax-line-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.rs-footer { flex: none; display: flex; justify-content: flex-end; padding: 6px 12px 10px; }

.rs-side { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.rs-tabs { flex: none; display: flex; background: #FFFFFF; border: 1px solid var(--ax-muted); border-bottom: 2px solid var(--ax-ink); }
.rs-tab { min-height: 44px; padding: 0 12px; border: none; border-right: 1px solid var(--ax-line-2); background: #FFFFFF; color: var(--ax-ink); font-size: 14px; }
.rs-tab.on { background: var(--ax-ink); color: #FFFFFF; font-weight: 700; }
.rs-tab.amber, .rs-tab.amber.on { background: var(--ax-amber); color: var(--ax-ink); font-weight: 700; }
.rs-tab.marked { background: var(--ax-green-fill); color: var(--ax-green); border-color: var(--ax-green); font-weight: 700; transition: background-color .15s ease, color .15s ease; }
.rs-tab-body { flex: 1; min-height: 0; overflow: auto; margin-top: -12px; padding: 12px; background: var(--ax-line-2); border: 1px solid var(--ax-muted); border-top: none; }
.rs-dock { flex: none; }
.rs-dock-col { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.rs-dock-main-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.rs-dock-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.rs-dock-main-row { display: flex; align-items: center; gap: 10px; }
.rs-dock-row .rs-main-button, .rs-dock-col .rs-main-button { min-width: 220px; }
.rs-main-button { min-height: 44px; font-size: 16px; }
.rs-main-button.primary:disabled { opacity: 1; background: #F0F1F2; border-color: var(--ax-muted); color: var(--ax-muted); }
.rs-mark { min-height: 40px; position: relative; overflow: hidden; transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .06s ease; }
.rs-mark:active { transform: translateY(1px); border-color: var(--ax-green); background: var(--ax-green-fill); color: var(--ax-green); }
.rs-mark.marked { border-color: var(--ax-green); background: var(--ax-green-fill); color: var(--ax-green); font-weight: 700; }
.rs-mark-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.rs-mark.marked .rs-mark-flash { animation: rs-mark-pulse .75s ease-out; }
.rs-mark-words { position: relative; z-index: 1; }
@keyframes rs-mark-pulse {
    0% { background: var(--ax-green); opacity: .45; }
    100% { background: var(--ax-green-fill); opacity: 0; }
}
.rs-reason { border: none; background: none; padding: 0; color: #8A5A00; font-weight: 700; text-decoration: underline; text-align: left; font-size: 14px; }
.rs-reason-text { color: var(--ax-ink-2); font-size: 13.5px; }
.rs-hold { position: relative; overflow: hidden; border-color: var(--ax-red); color: var(--ax-red); background: #FFFFFF; }
.rs-hold-fill { position: absolute; inset: 0; width: 0; background: var(--ax-red-fill); }
.rs-hold.holding .rs-hold-fill { width: 100%; transition: width 2s linear; }
.rs-hold-words { position: relative; }
.ax-btn.danger { border-color: var(--ax-red); color: var(--ax-red); background: #FFFFFF; }
.rs-overview .rs-finish { flex: 1; min-width: 0; }
.rs-finish .ax-btn { white-space: normal; height: auto; min-height: 36px; padding-block: 6px; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.sf-na { padding: 2px 8px; background: var(--ax-line-2); color: var(--ax-ink-2); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; border-radius: 2px; }
.rs-done { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--ax-muted); border-radius: 2px; }
.rs-link { border: none; background: none; padding: 0; color: var(--ax-navy); text-decoration: underline; }

/* A step added to one run (F37–F41): dashed and purple until a workflow holds it. */
.rs-tag-new { display: inline-block; padding: 0 6px; border: 1px dashed var(--ax-new); color: var(--ax-new); background: #FFFFFF; font-size: 12px; font-weight: 700; }
.rs-added { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--ax-new-fill); border-bottom: 2px dashed var(--ax-new); }
.rsd { width: min(700px, calc(100vw - 32px)); }
.rsd-only { margin-left: auto; padding: 0 6px; background: #FFFFFF; color: var(--ax-new); border: 1px dashed var(--ax-new); font-size: 12px; font-weight: 700; }
.rsd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--ax-muted); border-radius: 2px; }
.rsd-box { width: 18px; height: 18px; border: 2px solid var(--ax-ink); border-radius: 2px; flex: none; }
.rsd-unit { width: 90px; flex: none; }
.rsd-x { border: none; background: none; font-size: 18px; line-height: 1; padding: 0 4px; }
.rud { width: min(900px, calc(100vw - 32px)); top: 3vh; max-height: 94vh; overflow-y: auto; }
.rud-col { display: flex; flex-direction: column; gap: 6px; }
.rud-step { padding: 8px 12px; border: 1px solid var(--ax-muted); border-radius: 2px; }
.rud-step.added { border: 2px dashed var(--ax-new); background: var(--ax-new-fill); font-weight: 700; display: flex; justify-content: space-between; }
.rud-box { padding: 10px 14px; border: 1px solid var(--ax-muted); border-radius: 2px; }
.rud-box.in-place { border: 2px solid var(--ax-green); background: var(--ax-green-fill); }
.rs-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1050; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--ax-ink); color: #FFFFFF; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* The step on the run screen (D10): fields in two columns, ticks, two-button answers. */
.d-contents { display: contents; }
.sr-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 4px; }
.sr-fields > .sr-wide { grid-column: 1 / -1; }
.sr-fields .mb-2[style*="48rem"] { max-width: none !important; }
.sf-tick { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--ax-muted); border-radius: 2px; background: #FFFFFF; color: var(--ax-ink); font-size: 17px; }
.sf-tick.on { border: 2px solid var(--ax-green); }
.sf-tick:disabled { opacity: .7; }
.sf-box { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ax-ink); border-radius: 2px; color: #FFFFFF; font-size: 18px; }
.sf-tick.on .sf-box { background: var(--ax-navy); border-color: var(--ax-navy); }
.sf-choice { min-width: 110px; height: 54px; padding: 0 18px; border: 2px solid var(--ax-ink); border-radius: 2px; background: #FFFFFF; color: var(--ax-ink); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.sf-choice.on { background: var(--ax-navy); border-color: var(--ax-navy); color: #FFFFFF; }
.sr-fields .custom-field-editor__input-with-unit { position: relative !important; display: block !important; }
.sr-fields .custom-field-editor__unit { position: absolute !important; left: auto !important; right: 14px; font-size: 16px !important; top: 50%; transform: translateY(-50%); margin: 0 !important; color: var(--ax-ink); }
.sr-fields .form-control, .sr-fields .form-select { min-height: 54px; font-size: 18px; padding-right: 44px; border-color: var(--ax-muted); }
.sr-fields input[type="number"].form-control { font-family: var(--ax-mono); }
.sr-fields .form-group { margin-bottom: 8px !important; }
.sr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 991.98px) { .sr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sr-tile { padding: 8px 14px; border: 2px solid var(--ax-muted); border-bottom-width: 5px; border-radius: 2px; background: #F8FAFC; color: var(--ax-ink); line-height: 1.2; opacity: .78; transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease; }
.sr-tile.on { border-color: var(--ax-navy); background: #EBF1FA; box-shadow: inset 0 0 0 1px var(--ax-navy); opacity: 1; }
.sr-tile.selected { border-bottom-color: var(--ax-ink); }
.sr-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.sr-tile-check { width: 16px; height: 16px; flex: none; accent-color: var(--ax-navy); cursor: pointer; margin: 0; }
.sr-tile.alert { background: var(--ax-amber); opacity: 1; }
.sr-tile.more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; border-color: var(--ax-line); border-bottom-width: 2px; background: #FFFFFF; opacity: 1; }
.sr-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--ax-navy); border-radius: 2px; }
.sr-csv { padding: 2px 8px; background: var(--ax-navy); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.sr-file-name { color: var(--ax-navy); text-decoration: underline; font-size: 17px; }
.sr-preview-wrap { width: 100%; max-height: clamp(220px, 45vh, 420px); overflow: auto; border: 1px solid var(--ax-muted); background: #FFFFFF; }
.sr-preview { width: 100%; margin: 0; white-space: nowrap; }
.sr-preview th { position: sticky; top: 0; z-index: 1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--ax-line-2); border-bottom: 2px solid var(--ax-ink); }

/* The report of one run (F54). On paper the CUI line stands at the top and the bottom of every page. */
.rp { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.rp-body { padding: 24px 34px 28px; }
.rp-title { font-size: 28px; margin: 0; text-transform: uppercase; }
.rp-side { display: flex; flex-direction: column; gap: 10px; }
.rp-this-head { padding: 10px 14px; border-bottom: 1px solid var(--ax-muted); text-transform: uppercase; letter-spacing: .04em; }
.rp-state { padding: 1px 6px; background: var(--ax-line-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rp .rd-csv { padding: 1px 7px; background: #D5DADF; font-size: 12px; font-weight: 700; }
.rp-files { margin-top: 24px; }
.rp-files-head { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ax-ink); font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.rp .rd-link { border: none; background: none; padding: 0; color: var(--ax-navy); text-decoration: underline; }
@media (max-width: 991.98px) { .rp { grid-template-columns: 1fr; } }
@media print {
    .rp { display: block; }
    .rp-paper { border: none; }
    .rp-cui-top { position: fixed; top: 0; left: 0; right: 0; }
    .rp-cui-bottom { position: fixed; bottom: 0; left: 0; right: 0; }
    .rp-body { padding: 28px 0; }
    body > .ax-cui, .ax-shell > .ax-cui { display: none; }
}
.rp-signed { padding: 8px 12px; border: 2px solid var(--ax-green); background: var(--ax-green-fill); }

/* The review of a generated run report (F31). */
.rv { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start; }
.rv-head { padding: 10px 14px; border-bottom: 1px solid var(--ax-muted); text-transform: uppercase; letter-spacing: .04em; }
.rv-block { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--ax-muted); border-radius: 2px; background: #FFFFFF; }
.rv-number { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ax-ink); border-radius: 50%; background: var(--ax-amber); font-size: 13px; font-weight: 700; }
@media (max-width: 991.98px) { .rv { grid-template-columns: 1fr; } }

/* The list of runs (F55, F56). */
.rl-search { width: 320px; }
.rl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--ax-navy); color: #FFFFFF; }
.rl-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 1030; width: 360px; background: #FFFFFF; color: var(--ax-ink); border: 1px solid var(--ax-ink); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.rl-pick { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; border-top: 1px solid var(--ax-line-2); background: #FFFFFF; color: var(--ax-ink); }
.rl-pick:hover { background: var(--ax-line-2); }
.rl-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; background: var(--ax-line-2); border-bottom: 2px solid var(--ax-ink); }
.rl-table td { vertical-align: middle; }
.rl-on td { background: #EEF3F8; }
.rl-tick { width: 20px; height: 20px; }
.rl-kind { display: inline-flex; width: 16px; height: 16px; margin-right: 2px; align-items: center; justify-content: center; color: #FFFFFF; font-size: 10px; border-radius: 2px; }
.rl-state { padding: 1px 7px; font-size: 12px; font-weight: 700; border: 1px solid var(--ax-muted); }
.rl-done { border-color: var(--ax-green); color: var(--ax-green); background: var(--ax-green-fill); }
.rl-inprogress { border-color: var(--ax-navy); color: var(--ax-navy); background: #EEF3F8; }
.rl-needsfinishing { border: 1px dashed var(--ax-amber-text); color: var(--ax-amber-text); background: var(--ax-amber-fill); }
.rl-resultslater { border-color: var(--ax-amber-text); color: var(--ax-amber-text); }
.rl-notstarted, .rl-disregarded { border-color: var(--ax-muted); color: var(--ax-ink-2); background: var(--ax-surface-2); }

/* A project as a folder (F58–F61, F83). */
.pf { position: relative; min-height: 70vh; }
.pf-cui { display: inline-block; vertical-align: middle; padding: 1px 6px; background: var(--ax-cui); color: #FFFFFF; font-size: 12px; font-family: var(--ax-body); letter-spacing: .04em; }
.pf-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--ax-muted); border-radius: 2px; background: #FFFFFF; color: var(--ax-ink); }
.pf-card.on { border: 2px solid var(--ax-navy); }
.pf-card i { color: var(--ax-navy); font-size: 18px; }
.pf-ext { display: inline-block; padding: 0 5px; background: var(--ax-navy); color: #FFFFFF; font-size: 11px; font-weight: 700; }
.pf-link { border: none; background: none; padding: 0; font-weight: 700; color: var(--ax-ink); text-align: left; }
.pf-link:hover { text-decoration: underline; }
.pf-drop { position: fixed; inset: 90px 24px 24px; z-index: 1030; border: 3px dashed var(--ax-navy); background: rgba(232, 238, 244, .92); display: flex; align-items: center; justify-content: center; }
.pf-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: copy; }
.pf-drop-words { text-align: center; color: var(--ax-navy); pointer-events: none; }
.pf-ready { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ax-muted); background: var(--ax-line-2); }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px dashed var(--ax-muted); border-radius: 14px; background: #FFFFFF; color: var(--ax-ink); font-size: 14px; }
.pf-chip.on { border: 1px solid var(--ax-ink); background: var(--ax-ink); color: #FFFFFF; }
.pf-x { border: none; background: none; color: inherit; padding: 0; line-height: 1; }

/* Report documents (F62–F82). */
.pk { width: min(1360px, calc(100vw - 32px)); top: 4vh; }
.pk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--ax-muted); }
.pk-chip { padding: 2px 10px; border: 1px solid var(--ax-muted); border-radius: 14px; background: #FFFFFF; }
.pk-chip.on { background: var(--ax-ink); color: #FFFFFF; border-color: var(--ax-ink); }
.pk-tabs { display: flex; border-bottom: 2px solid var(--ax-ink); }
.pk-tab { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border: none; border-right: 1px solid var(--ax-muted); background: #FFFFFF; color: var(--ax-ink); }
.pk-tab.on { background: var(--ax-ink); color: #FFFFFF; font-weight: 700; }
.pk-needs { color: #B7791F; }
.pk-done { color: var(--ax-green); font-weight: 700; }
.pk-tab.on .pk-done { color: #7BD08F; }
.pk-grid { display: grid; grid-template-columns: 240px 380px minmax(0, 1fr); min-height: 330px; }
.pk-col { border-right: 1px solid var(--ax-muted); max-height: 52vh; overflow-y: auto; }
.pk-head { padding: 8px 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--ax-muted); }
.pk-row { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; border: none; border-bottom: 1px solid var(--ax-line-2); background: #FFFFFF; color: var(--ax-ink); }
.pk-row.on { background: var(--ax-navy); color: #FFFFFF; font-weight: 700; }
.pk-row:disabled { opacity: .45; }
.pk-badge { padding: 0 6px; border: 1px solid currentColor; font-size: 11px; font-weight: 700; min-width: 36px; text-align: center; }
.pk-option { display: flex; gap: 12px; align-items: flex-start; margin: 8px 10px; padding: 10px 14px; border: 1px solid var(--ax-muted); border-radius: 2px; }
.pk-option.on { border: 2px solid var(--ax-navy); background: #EEF3F8; }
.pk-option.off { opacity: .55; }
.dk { width: min(1240px, calc(100vw - 32px)); top: 4vh; max-height: 92vh; overflow-y: auto; }
.dk-side { border-right: 1px solid var(--ax-muted); background: var(--ax-line-2); min-height: 420px; }
.dk-side .pk-row.on { background: var(--ax-navy); }
.dk-pick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--ax-muted); border-radius: 2px; margin-bottom: 10px; }
.dk-pick.done { border: 2px solid var(--ax-green); }
.dk-source { padding: 12px 14px; border: 1px solid var(--ax-muted); border-radius: 2px; background: #FFFFFF; color: var(--ax-ink); text-align: left; }
.dk-source.on { border: 2px solid var(--ax-navy); }
.dk-source:disabled { opacity: .5; }
.dk-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dk-kind { padding: 14px; border: 1px solid var(--ax-muted); background: #FFFFFF; text-align: left; color: var(--ax-ink); }
.dk-kind.on { border: 2px solid var(--ax-amber); }
.dk-kind:disabled { opacity: .5; }
.dk-step { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 2px solid var(--ax-ink); border-radius: 50%; background: var(--ax-amber); font-weight: 700; font-size: 13px; }
.rd-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #FFFFFF; border: 1px solid var(--ax-muted); margin-bottom: 12px; }
.rd-insert { display: flex; flex-direction: column; align-items: center; width: 90px; padding: 6px; border: 1px solid transparent; background: none; color: var(--ax-ink); }
.rd-insert:hover:not(:disabled) { border-color: var(--ax-ink); }
.rd-insert:disabled { opacity: .45; }
.rd-canvas { background: #FFFFFF; border: 1px solid var(--ax-muted); padding: 24px 28px; min-height: 60vh; }
.rd-empty { border: 2px dashed var(--ax-muted); padding: 40px; text-align: center; }
.rd-block { position: relative; margin-bottom: 16px; padding: 8px; border: 1px solid transparent; }
.rd-block:hover { border-color: var(--ax-muted); }
.rd-block.on { border: 2px solid var(--ax-navy); }
.rd-tools { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--ax-line-2); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.rd-block:hover .rd-tools, .rd-block.on .rd-tools, .rd-tools:focus-within { opacity: 1; pointer-events: auto; }
.rd-text { border-left: 3px solid var(--ax-muted); padding-left: 12px; font-size: 16px; white-space: pre-wrap; }
.rd-heading { font-family: var(--ax-title); text-transform: uppercase; letter-spacing: .03em; font-size: 26px; margin: 8px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--ax-ink); }
.rd-heading-2 { font-size: 19px; border-bottom: 1px solid var(--ax-muted); }
.rd-divider { border: 0; border-top: 1px solid var(--ax-ink); margin: 4px 0; opacity: 1; }
.rd-page-break { border-top: 2px dashed var(--ax-muted); text-align: center; font-size: 12px; color: var(--ax-ink-2); padding-top: 2px; }
.rd-sep { width: 1px; align-self: stretch; background: var(--ax-line); margin: 0 6px; }
@media print {
    .rd-page-break { border: 0; break-after: page; page-break-after: always; }
    .rd-block { border-color: transparent !important; }
}
.rd-inputs { background: var(--ax-line-2); border: 1px solid var(--ax-muted); padding: 12px;
             position: sticky; top: 60px; max-height: calc(100vh - 76px); overflow: auto; }
.rd-input { background: #FFFFFF; border: 1px solid var(--ax-muted); padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.rd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rd-layout.rd-read { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991.98px) { .rd-layout { grid-template-columns: 1fr; } .pk-grid { grid-template-columns: 1fr; } .rd-inputs { position: static; max-height: none; } }

/* A lot (F88). */
.lp-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--ax-line-2); border-bottom: 1px solid var(--ax-muted); text-transform: uppercase; letter-spacing: .04em; }
.lp-head .small { text-transform: none; letter-spacing: 0; }
.lp-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ax-line-2); }
.rd-draft { display: inline-block; padding: 1px 6px; border: 1px dashed var(--ax-amber-text); color: var(--ax-amber-text); background: var(--ax-amber-fill); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

/* Home: a card for each work cell (F01). The band says what the cell does now (S5). */
.hc-card { display: flex; flex-direction: column; padding: 14px; background: #E4E8EC; border-color: var(--ax-muted); }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hc-name { font-family: var(--ax-title); font-size: 30px; line-height: 1; color: var(--ax-ink); }
.hc-band { display: block; padding: 8px 12px; border: 1px solid var(--ax-muted); border-radius: 2px; color: var(--ax-ink); text-decoration: none; }
.hc-band-word { display: block; font-family: var(--ax-title); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.hc-band-run { display: block; font-size: 13px; }
.hc-band.ready { background: #D2D7DC; }
.hc-band.off { background: #D2D7DC; color: var(--ax-muted); }
.hc-band.running { background: var(--ax-navy); border-color: var(--ax-navy); color: #FFFFFF; }
.hc-band.recording { background: var(--ax-red); border-color: var(--ax-red); color: #FFFFFF; }
.hc-band.running:hover, .hc-band.recording:hover { color: #FFFFFF; filter: brightness(1.1); }
.hc-conn { margin-top: 6px; min-height: 1.2em; }
.hc-action { min-height: 52px; justify-content: center; font-size: 16px; }
.hc-add { border: 2px dashed var(--ax-ink); border-radius: 2px; min-height: 10rem; color: var(--ax-navy); }

/* The list of workflows (F07). */
.wl-tag { display: inline-block; padding: 1px 8px; background: var(--ax-line); color: var(--ax-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wl-tag.own { background: var(--ax-navy); color: #FFFFFF; }
.wl-kind { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 20px; height: 20px; font-size: 11px; margin-right: 2px; }

/* The run report builder (S12): the look of the document builder. */
.rb-insert { width: 78px; font-size: 12.5px; }
.rb-insert .bi { font-size: 18px; }
.rb-pick-body { max-height: 70vh; overflow-y: auto; }
input.rb-title.ax-title { font-size: 32px; border: 1px solid transparent; background: transparent; width: 100%; text-transform: uppercase; }
input.rb-title.ax-title:hover, input.rb-title.ax-title:focus { border-color: var(--ax-muted); background: #FFFFFF; }

/* --- The pages from before the shell (S13) ---
   Bootstrap, apex.css and site.css still draw the older pages. This layer comes last and gives
   their buttons, tables, cards, forms, tabs, alerts and dialogs the tokens of the shell, thus an
   old page and a new one read as one app. Amber and red keep their meaning: an alert of the kind
   "warning" is abnormal, "info" is not. */

a { color: var(--ax-navy); }
a:hover { color: var(--ax-ink); }

.btn, .btn:hover {
    font-family: var(--ax-title); font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase;
    min-height: 38px; padding: 0 14px; margin-bottom: 0; border-radius: 2px; border: 2px solid var(--ax-ink);
    background: #FFFFFF; color: var(--ax-ink); display: inline-flex; align-items: center;
    justify-content: center; gap: 6px; line-height: 1.1; box-shadow: none;
}
.btn:hover { background: var(--ax-line-2); }
.btn:disabled, .btn.disabled { opacity: .5; background: #FFFFFF; border-color: var(--ax-ink); color: var(--ax-ink); }
.btn-sm, .btn-sm:hover, .btn-group-sm > .btn { min-height: 30px; padding: 0 9px; font-size: 14px; border-width: 1px; }
.btn-lg, .btn-lg:hover { min-height: 48px; font-size: 17px; }

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-check:checked + .btn-outline-primary {
    background: var(--ax-navy); border-color: var(--ax-navy); color: #FFFFFF;
}
.btn-primary:hover { background: #164A75; color: #FFFFFF; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--ax-navy); border-color: var(--ax-navy); color: #FFFFFF; }

.btn-secondary, .btn-secondary:hover, .btn-default, .btn-default:hover, .btn-light, .btn-light:hover,
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-dark, .btn-outline-dark:hover {
    background: #FFFFFF; border-color: var(--ax-ink); color: var(--ax-ink);
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-outline-primary:hover,
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--ax-line-2); }
.btn-secondary:disabled, .btn-secondary.disabled { background: #FFFFFF; border-color: var(--ax-ink); color: var(--ax-ink); }

/* A button that removes something says so in red, and is not filled: red is for alarms. */
.btn-danger, .btn-danger:hover, .btn-outline-danger, .btn-outline-danger:hover {
    background: #FFFFFF; border-color: var(--ax-red) !important; color: var(--ax-red);
}
.btn-danger:hover, .btn-outline-danger:hover { background: var(--ax-red-fill); color: var(--ax-red); }
.btn-success, .btn-success:hover, .btn-outline-success, .btn-outline-success:hover {
    background: #FFFFFF; border-color: var(--ax-green); color: var(--ax-green);
}
.btn-link, .btn-link:hover {
    min-height: 0; padding: 0; border-width: 0; display: inline;
    border-color: transparent; background: transparent; color: var(--ax-navy);
    font-family: var(--ax-body); text-transform: none; letter-spacing: 0; text-decoration: underline;
}
.btn-circle, .btn-circle.btn-sm, .btn-circle.btn-md, .btn-circle.btn-xl { border-radius: 2px; }
.btn-close { border-radius: 2px; }

.table { --bs-table-bg: #FFFFFF; --bs-table-striped-bg: var(--ax-surface-2); --bs-table-hover-bg: var(--ax-line-2); border-color: var(--ax-line); }
.table > thead th, .table th {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
    background: var(--ax-line-2); color: var(--ax-ink); border-bottom: 2px solid var(--ax-ink); vertical-align: bottom;
}
.table > tbody td { vertical-align: middle; border-color: var(--ax-line); }
.table > tbody a:not(.btn):not(.ax-btn) { color: var(--ax-ink); font-weight: 700; }
.table-bordered { border-color: var(--ax-muted); }

.card, .tile { border-radius: 2px; border: 1px solid var(--ax-muted); }
.card-header {
    background: var(--ax-line-2); border-bottom: 1px solid var(--ax-muted); border-radius: 0 !important;
    font-family: var(--ax-title); text-transform: uppercase; letter-spacing: .03em;
}
.card-footer { background: var(--ax-line-2); border-top: 1px solid var(--ax-muted); }

.form-control, .form-select, .input-group-text { border-radius: 2px; border-color: var(--ax-muted); }
.form-control:focus, .form-select:focus { border-color: var(--ax-navy); box-shadow: 0 0 0 1px var(--ax-navy); }

.nav-tabs { border-bottom: 2px solid var(--ax-ink); gap: 2px; }
.nav-tabs .nav-link { border: none; border-radius: 0 !important; color: var(--ax-ink); padding: 8px 14px; }
.nav-tabs .nav-link:hover { background: var(--ax-line-2); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--ax-ink); color: #FFFFFF; border: none; }
.nav-pills .nav-link { border-radius: 2px; color: var(--ax-ink); }
.nav-pills .nav-link.active { background: var(--ax-navy); }
/* A tab that is not open yet still says what it is. apex.css drew it light grey on white. */
.nav-link.disabled, .nav-wizard .nav-link.disabled { color: #5F6B76; opacity: 1; }

.badge { border-radius: 2px; font-weight: 700; letter-spacing: .04em; }
.badge.bg-primary { background: var(--ax-navy) !important; }
.badge.bg-secondary { background: var(--ax-line) !important; color: var(--ax-ink); }
.badge.bg-success { background: var(--ax-green-fill) !important; color: #1E5631; border: 1px solid var(--ax-green); }
.badge.bg-warning { background: var(--ax-amber-fill) !important; color: var(--ax-amber-text) !important; border: 1px dashed var(--ax-amber-text); }
.badge.bg-danger { background: var(--ax-red) !important; }

.alert { border-radius: 2px; }
.alert-info, .alert-light, .alert-secondary, .alert-primary { background: #FFFFFF; border: 1px solid var(--ax-muted); color: var(--ax-ink); }
.alert-warning { background: var(--ax-amber-fill); border: 1px dashed var(--ax-amber-text); color: var(--ax-amber-text); }
.alert-danger { background: var(--ax-red-fill); border: 1px solid var(--ax-red); color: #7A1A14; }
.alert-success { background: var(--ax-green-fill); border: 1px solid var(--ax-green); color: #1E5631; }

.list-group-item { border-radius: 0 !important; border-color: var(--ax-line); }
.list-group-item.active { background: var(--ax-navy); border-color: var(--ax-navy); }

.modal-content { border-radius: 2px; border: 1px solid var(--ax-ink); }
.modal-header { background: var(--ax-navy); color: #FFFFFF; border-radius: 0; border-bottom: none; }
.modal-header .modal-title, .modal-header h5 { color: #FFFFFF; font-family: var(--ax-title); text-transform: uppercase; letter-spacing: .03em; }
.modal-header .btn-close { filter: invert(1) !important; opacity: .9; }
.modal-footer { border-top: 1px solid var(--ax-line); }

.dropdown-menu { border-radius: 2px; border-color: var(--ax-muted); }
.page-link { border-radius: 0 !important; color: var(--ax-navy); }
.accordion-button:not(.collapsed) { background: var(--ax-line-2); color: var(--ax-ink); }
.progress { border-radius: 2px; }
.progress-bar { background: var(--ax-navy); }

/* --- The Equipment tab, work cell and equipment pages (M15, A07–A13) --- */
.eq-tabs { display: flex; border-bottom: 2px solid var(--ax-ink); }
.eq-tab { border: none; background: transparent; padding: 8px 14px; color: var(--ax-ink); font-size: 14.5px; }
.eq-tab.on { background: var(--ax-ink); color: #FFFFFF; font-weight: 700; }
.eq-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.eq-kinds { display: flex; flex-direction: column; }
.eq-kinds-scroll { max-height: calc(100vh - 220px); overflow-y: auto; }
.eq-kind { display: flex; gap: 8px; align-items: center; border: none; border-top: 1px solid var(--ax-line-2); background: #FFFFFF; padding: 9px 12px; color: var(--ax-ink); }
.eq-kind.on { background: var(--ax-ink); color: #FFFFFF; font-weight: 700; }
.eq-card { background: #FFFFFF; border: 1px solid var(--ax-muted); border-radius: 2px; padding: 14px 16px; }
.eq-card.wide { grid-column: 1 / -1; }
.eq-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eq-tree { background: #FFFFFF; border: 1px solid var(--ax-muted); }
.eq-tree .row-line { display: flex; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--ax-line-2); font-size: 14px; }
.eq-tree .row-line span:first-child { width: 7rem; color: var(--ax-ink-2); }
.eq-chip { display: inline-block; padding: 1px 6px; border: 1px solid var(--ax-ink); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.eq-chip.dark { background: var(--ax-line-2); border-color: var(--ax-line-2); }
.eq-group td { background: var(--ax-line-2); font-weight: 700; }
@media (max-width: 991.98px) { .eq-split, .eq-slot-grid { grid-template-columns: 1fr; } }

/* --- Sign in (M14, A01–A06) --- */
.si-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 21px); background: var(--ax-canvas); }
.si-left { display: flex; flex-direction: column; padding: 40px 48px; border-right: 2px solid var(--ax-ink); }
.si-drawing { background-color: #EEF1F4; background-image: linear-gradient(#D6DEE6 1px, transparent 1px), linear-gradient(90deg, #D6DEE6 1px, transparent 1px); background-size: 24px 24px; color: var(--ax-navy); }
.si-fig { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.si-svg { width: 100%; margin: auto 0; }
.si-title-block { align-self: flex-end; display: flex; border: 2px solid var(--ax-navy); background: #FFFFFF; font-size: 12px; }
.si-title-mark { font-family: var(--ax-title); font-size: 38px; padding: 4px 14px; border-right: 2px solid var(--ax-navy); }
.si-title-rows div { padding: 6px 10px; }
.si-title-rows div + div { border-top: 1px solid var(--ax-navy); }
.si-station { background: var(--ax-ink); color: #FFFFFF; }
.si-caption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #C9D3DC; }
.si-cell { font-size: 200px; line-height: 1; font-weight: 300; letter-spacing: -.02em; }
.si-sub { color: #C9D3DC; font-size: 18px; }
.si-clock { font-size: 64px; line-height: 1; }
.si-mark { font-size: 28px; letter-spacing: .04em; }
.si-right { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.si-card { width: min(460px, 100%); background: #FFFFFF; border: 2px solid var(--ax-ink); }
.si-card-head { padding: 18px 22px; border-bottom: 1px solid var(--ax-muted); font-family: var(--ax-title); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; }
.si-card-body { padding: 20px 22px; }
.si-card .form-control { min-height: 48px; border: 2px solid var(--ax-ink); border-radius: 0; }
.si-main { width: 100%; min-height: 52px; background: var(--ax-navy); color: #FFFFFF; border: none; font-family: var(--ax-title); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.si-notice { margin-top: 14px; padding: 10px 12px; background: var(--ax-line-2); border: 1px solid var(--ax-muted); font-size: 13.5px; line-height: 1.5; color: var(--ax-ink); }
.si-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.si-states { display: flex; gap: 8px; margin: 10px 0; }
.si-state { flex: 1; padding: 8px; border: 1px solid var(--ax-muted); font-size: 13px; }
.si-state.done { background: var(--ax-green-fill); border-color: var(--ax-green); }
.si-state.now { border: 2px solid var(--ax-ink); font-weight: 700; }
.si-code { letter-spacing: 1.2em; font-size: 26px; text-align: center; font-family: var(--ax-mono, monospace); }
@media (max-width: 991.98px) { .si-page { grid-template-columns: 1fr; } .si-left { display: none; } }

/* A block a builder just placed flashes once, thus the eye finds it (apexReveal). */
@keyframes ax-flash { from { background-color: var(--ax-amber-fill); } to { background-color: transparent; } }
.ax-flash { animation: ax-flash 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .ax-flash { animation: none; } }
.pt-spec > td { background: var(--ax-line-2); }
.rd-number { border-left: 4px solid var(--ax-navy); padding: 4px 12px; }
.rd-figure { font-size: 36px; font-weight: 600; line-height: 1.1; }
/* Home, at the left of the run screen's band: the screen has no top bar of its own. */
.rs-home { flex: none; width: 46px; justify-content: center; color: #FFFFFF !important; font-size: 18px; text-decoration: none; }
.rs-home:hover { background: #2A3A48; }

/* --- The organization: tiles that lead to its parts, and the facts of one thing --- */
.og-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.og-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: var(--ax-ink) !important; text-decoration: none; }
.og-tile:hover { border-color: var(--ax-ink); }
.og-tile i { font-size: 26px; color: var(--ax-navy); }
.og-tile strong { font-family: var(--ax-title); text-transform: uppercase; letter-spacing: .03em; font-size: 19px; }
.og-facts { width: 100%; margin: 0; }
.og-facts td { padding: 8px 14px; border-bottom: 1px solid var(--ax-line-2); vertical-align: top; }
.og-facts td:first-child { width: 36%; color: var(--ax-ink-2); }
.og-actions { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }


/* ---- Nested Work Cell View (wc-*) ---- */
.wc-page {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.wc-head h1 { font-size: 30px; margin: 0; font-weight: 400; }
.wc-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ax-ink-2);
    background: var(--ax-surface);
    border: 1px solid var(--ax-muted);
    padding: 4px 10px;
    border-radius: 2px;
}
.wc-legend strong { color: var(--ax-ink); }
.wc-legend .wc-arrow { color: var(--ax-muted); font-family: 'Roboto Mono', monospace; }

.wc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
@container (max-width: 1080px) {
    .wc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Level 1: Work cell card */
.wc-cell { overflow: hidden; }
.wc-cell-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-cell-name {
    font-family: 'Fjalla One', sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--ax-ink);
    text-decoration: none;
}
.wc-cell-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ax-ink-2);
    white-space: nowrap;
}
.wc-open-link { font-weight: 700; color: var(--ax-navy); }

/* Level 2: Equipment accordion row (exclusive per cell via name="...") */
.wc-eq { border-bottom: 1px solid var(--ax-line); }
.wc-eq:last-child { border-bottom: 0; }
.wc-eq > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 7px 14px;
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wc-eq > summary::-webkit-details-marker { display: none; }
.wc-eq > summary:hover { background: var(--ax-surface-2); }
.wc-eq[open] > summary {
    background: var(--ax-surface-2);
    border-bottom: 1px solid var(--ax-line);
}
.wc-chev {
    display: inline-block;
    width: 14px;
    color: var(--ax-navy);
    font-size: 13px;
    font-weight: 700;
    transition: transform .1s ease;
    flex: none;
}
.wc-eq[open] > summary .wc-chev { transform: rotate(90deg); }

.wc-eq-title {
    font-weight: 700;
    color: var(--ax-ink);
    font-size: 14px;
    white-space: nowrap;
}
.wc-eq-meta {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--ax-ink-2);
    white-space: nowrap;
}
.wc-status {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wc-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.wc-status.online { color: var(--ax-green); }
.wc-status.offline { color: var(--ax-amber-text); }

.wc-eq-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Hide collapsed-only warning chips when the equipment is already open and showing its slot rows */
.wc-eq[open] > summary .wc-when-closed { display: none; }
.wc-eq:not([open]) > summary .wc-when-open { display: none; }

/* Level 3 -> 4 -> 5: Indented slot tree inside open equipment */
.wc-body {
    padding: 6px 10px 8px 14px;
    background: #FAFBFB;
    border-left: 3px solid var(--ax-navy);
    margin-left: 12px;
    max-height: 260px;
    overflow-y: auto;
}
.wc-slots {
    border: 1px solid var(--ax-line);
}
.wc-slots thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.wc-slots th, .wc-slots td { padding: 4px 8px; }
.wc-slots th.col-slot { width: 21%; }
.wc-slots td.slot-cell {
    font-weight: 500;
    color: var(--ax-ink);
    white-space: nowrap;
}
.wc-slot-rule {
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ax-ink-2);
    margin-left: 4px;
}
.wc-slots tr.below td { background: var(--ax-amber-fill); }
.wc-slots tr.below .wc-slot-rule { color: var(--ax-amber-text); font-weight: 700; }
.wc-slots tr.optional td { background: var(--ax-surface-2); color: var(--ax-ink-2); }

/* Fitted hardware + nested consumable lot inside it */
.wc-fit-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wc-fit-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}
.wc-hw {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 6px;
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    border-radius: 2px;
}
.wc-hw-sku {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    color: var(--ax-navy);
}
.wc-hw-desc {
    font-size: 11.5px;
    color: var(--ax-ink-2);
}
.wc-hw-hours {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: var(--ax-ink-2);
}

/* Level 5: Lot nested inside the hardware that holds it */
.wc-lot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    padding: 1px 6px;
    background: var(--ax-line-2);
    border-left: 2px solid var(--ax-navy);
    border-radius: 0 2px 2px 0;
    color: var(--ax-ink);
}
.wc-lot-branch {
    font-family: 'Roboto Mono', monospace;
    color: var(--ax-navy);
    font-weight: 700;
}
.wc-lot-kind {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ax-ink-2);
}
.wc-lot-sku {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    color: var(--ax-navy);
}
.wc-lot.at-build {
    background: transparent;
    border-left-color: var(--ax-muted);
    color: var(--ax-ink-2);
}

.wc-empty {
    padding: 18px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ax-ink-2);
}

/* Breadcrumbs on detail pages */
.wc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    margin-bottom: 10px;
}
.wc-crumb .sep { color: var(--ax-muted); }
.wc-crumb .here { font-weight: 700; color: var(--ax-ink); }
.wc-crumb .kind {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ax-ink-2);
}


/* ---- Layout & Overflow Fixes for Report Canvas and Inventory Sidebar ---- */
.rd-canvas { min-width: 0; max-width: 100%; overflow-x: hidden; }
.rd-block { min-width: 0; max-width: 100%; }
.eq-kinds-scroll { display: flex; flex-direction: column; max-height: calc(100vh - 220px); overflow-y: auto; }
.eq-kind { width: 100%; text-align: left; }

/* ---- Industrial Terminal Left Command Rail & Shell ---- */
div.page, .page.ax-shell-layout {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
    align-items: stretch;
}

.ax-rail {
    width: 224px;
    flex: 0 0 224px;
    background: var(--ax-ink);
    color: #FFFFFF;
    border-right: 2px solid #0B131A;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
    overflow: visible;
    transition: width 0.14s ease, flex-basis 0.14s ease;
}
.ax-rail.collapsed {
    width: 58px;
    flex: 0 0 58px;
}

.ax-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 10px 0 14px;
    background: #0B131A;
    border-bottom: 1px solid #2A3A48;
    flex: none;
}
.ax-rail.collapsed .ax-rail-head {
    padding: 0;
    justify-content: center;
}
.ax-rail .ax-brand {
    padding: 0;
    border-right: none;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.ax-brand-mark {
    font-family: var(--ax-title);
    font-size: 22px;
    letter-spacing: .05em;
    color: #FFFFFF;
}
.ax-rail.collapsed .ax-brand {
    display: none !important;
}
.ax-brand-sub {
    font-family: var(--ax-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #8E979F;
    padding: 2px 5px;
    border: 1px solid #2A3A48;
    border-radius: 2px;
    background: #14202B;
}
.ax-rail-toggle {
    width: 28px;
    height: 28px;
    border: 1px solid #2A3A48;
    border-radius: 2px;
    background: #14202B;
    color: #AFC2D3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    line-height: 1;
}
.ax-rail-toggle:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.ax-rail .ax-nav {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.ax-rail .ax-nav-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid #22303D;
    background: var(--ax-ink);
}
.ax-rail .ax-nav-group-label {
    background: #0B131A;
    color: #8E979F;
    font-family: var(--ax-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 6px 14px 5px;
    border-bottom: 1px solid #1E2C38;
    white-space: nowrap;
    user-select: none;
}

.ax-rail .ax-nav-group-items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ax-rail .ax-nav-group-items > a {
    font-family: var(--ax-title);
    font-size: 14.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px 14px;
    height: auto;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid #1A2733;
    border-left: 4px solid transparent;
    color: #C9D3DC;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.ax-rail.collapsed .ax-nav-group-items > a {
    justify-content: center;
    padding: 12px 4px 12px 0;
}
.ax-nav-ico {
    font-size: 15px;
    width: 18px;
    text-align: center;
    color: #8E979F;
    flex: none;
}
.ax-rail .ax-nav-group-items > a:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .05);
}
.ax-rail .ax-nav-group-items > a:hover .ax-nav-ico {
    color: #FFFFFF;
}
.ax-rail .ax-nav-group-items > a.active {
    color: #FFFFFF;
    background: #1B3248;
    border-left-color: #FFFFFF;
    border-bottom-color: #1A2733;
}
.ax-rail .ax-nav-group-items > a.active .ax-nav-ico {
    color: #FFFFFF;
}

.ax-rail .ax-me {
    margin-left: 0;
    margin-top: auto;
    padding: 8px 10px;
    border-left: none;
    border-top: 1px solid #2A3A48;
    background: #0B131A;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
}
.ax-rail.collapsed .ax-me {
    padding: 8px 0;
}
.ax-rail .ax-me > button.ax-me-btn,
.ax-rail .ax-me > a.ax-me-btn,
.ax-me-btn {
    width: 100% !important;
    height: auto !important;
    background: #14202B;
    border: 1px solid #2A3A48 !important;
    border-radius: 2px;
    color: #FFFFFF;
    padding: 6px 8px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
}
.ax-rail.collapsed .ax-me > button.ax-me-btn,
.ax-rail.collapsed .ax-me > a.ax-me-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.ax-rail .ax-me > button.ax-me-btn:focus,
.ax-rail .ax-me > button.ax-me-btn:focus-visible,
.ax-rail.collapsed .ax-me > button.ax-me-btn:focus,
.ax-rail.collapsed .ax-me > button.ax-me-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.ax-rail .ax-me > button.ax-me-btn:hover,
.ax-me-btn:hover {
    border-color: #8E979F !important;
    background: #1B2A38;
}
.ax-rail.collapsed .ax-me > button.ax-me-btn:hover,
.ax-rail.collapsed .ax-me > a.ax-me-btn:hover {
    background: transparent !important;
}
.ax-rail.collapsed .ax-me > button.ax-me-btn:hover .ax-me-badge,
.ax-rail.collapsed .ax-me > a.ax-me-btn:hover .ax-me-badge {
    background: #1B3248;
}
.ax-me-badge {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    border: 1.5px solid #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ax-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
.ax-me-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #D4D8DC;
}
.ax-rail .ax-me .dropdown-menu {
    min-width: 210px;
    z-index: 1060;
    border: 1px solid #3D4852;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.ax-rail.collapsed .ax-me .dropdown-menu {
    left: 6px !important;
    right: auto !important;
}

.ax-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ax-topbar {
    min-height: 40px;
    background: #DDE1E5;
    border-bottom: 1px solid var(--ax-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ax-topbar .apex-breadcrumb {
    margin: 0;
    padding: 4px 0;
}
.ax-topbar .breadcrumb {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    div.page, .page.ax-shell-layout {
        flex-direction: column !important;
    }
    .ax-rail, .ax-rail.collapsed {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 2px solid #0B131A;
    }
    .ax-rail .ax-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ax-rail .ax-nav-group {
        flex: 1 1 auto;
        border-right: 1px solid #22303D;
    }
    .ax-rail .ax-nav-group-items {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media print {
    .ax-rail, .ax-topbar {
        display: none !important;
    }
    div.page, .page.ax-shell-layout {
        display: block !important;
    }
}

/* ---- Shared Filter Strip, Sortable Headers, & Industrial Pagination ---- */
.ax-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: var(--ax-line-2);
    border: 1px solid var(--ax-muted);
    border-radius: 2px;
    margin-bottom: 10px;
}
.ax-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.ax-filter-label {
    font-family: var(--ax-title);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ax-ink-2);
    white-space: nowrap;
    user-select: none;
}
.ax-filter-pills {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ax-muted);
    border-radius: 2px;
    background: #FFFFFF;
    overflow: hidden;
}
.ax-filter-pill {
    border: none;
    border-right: 1px solid var(--ax-line);
    background: #FFFFFF;
    color: var(--ax-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 10px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}
.ax-filter-pill:last-child {
    border-right: none;
}
.ax-filter-pill:hover {
    background: var(--ax-surface-2);
    color: var(--ax-ink);
}
.ax-filter-pill.active {
    background: var(--ax-ink);
    color: #FFFFFF;
    font-weight: 700;
}
.ax-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ax-surface-2);
    border-top: 1px solid var(--ax-line);
    font-size: 12.5px;
}
.ax-pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ax-pager-btn {
    border: 1px solid var(--ax-muted);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    line-height: 1.35;
    cursor: pointer;
}
.ax-pager-btn:hover:not(:disabled) {
    border-color: var(--ax-ink);
    background: var(--ax-line-2);
}
.ax-pager-btn.active {
    background: var(--ax-ink);
    border-color: var(--ax-ink);
    color: #FFFFFF;
}
.ax-pager-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--ax-surface-2);
}
.ax-sort-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ax-sort-btn:hover {
    color: var(--ax-navy);
}

/* ---- Industrial Comparison Workbench ---- */
.ax-wb-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 1199.98px) {
    .ax-wb-layout {
        grid-template-columns: 1fr;
    }
}
.ax-wb-rail {
    background: #FFFFFF;
    border: 2px solid var(--ax-ink);
    border-radius: 2px;
    position: sticky;
    top: 12px;
}
.ax-cmp-section-hdr td {
    background: #E2E6EA !important;
    font-family: var(--ax-title);
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ax-ink);
    padding: 5px 12px !important;
    border-top: 2px solid var(--ax-muted);
    border-bottom: 1px solid var(--ax-muted);
}
.ax-cmp-delta-pos {
    color: var(--ax-navy);
    font-weight: 600;
}
.ax-cmp-delta-neg {
    color: var(--ax-ink-2);
    font-weight: 600;
}

/* ---- Comparison Builder & Chips ---- */
.ax-cmp-builder {
    border: 2px solid var(--ax-ink);
}
.ax-cmp-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 12px;
    border: 1px solid var(--ax-muted);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ax-ink-2);
    line-height: 1.3;
    text-align: left;
}
.ax-cmp-chip:hover {
    border-color: var(--ax-ink);
    color: var(--ax-ink);
}
.ax-cmp-chip.on {
    border-color: var(--ax-navy);
    background: #EEF3F8;
    color: var(--ax-ink);
    font-weight: 600;
}

/* ---- First-Time User Walkthrough (Home) ---- */
.ax-walkthrough {
    border: 2px solid var(--ax-ink);
    background: #FFFFFF;
}
.ax-wt-step {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid var(--ax-muted);
    border-top: 3px solid var(--ax-ink);
    border-radius: 2px;
    background: var(--ax-surface-2);
}
.ax-wt-inv, .ax-wt-cfg, .ax-wt-out, .ax-wt-rep {
    border-top-color: var(--ax-navy);
}
.ax-wt-num {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background: var(--ax-ink);
    color: #FFFFFF;
    font-family: var(--ax-mono);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    flex: none;
}
.ax-wt-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
}
.ax-wt-concept {
    padding: 10px 12px;
    border: 1px solid var(--ax-line);
    border-left: 3px solid var(--ax-navy);
    border-radius: 2px;
    background: #FFFFFF;
}

/* ---- Comparison Matrix & General Table Readability ---- */
.ax-cmp-table th,
.ax-cmp-table td {
    padding: 8px 12px;
    vertical-align: middle;
}
.ax-cmp-param-col {
    min-width: 190px;
    max-width: 260px;
    background: var(--ax-surface-2) !important;
    border-right: 2px solid var(--ax-line);
}
.ax-cmp-build-col {
    min-width: 155px;
}
.ax-cmp-sub {
    max-width: 190px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.ax-cmp-empty {
    color: var(--ax-muted);
    font-family: var(--ax-mono);
    user-select: none;
}

/* ---- Comparison Studio & Staged Node Composition ---- */
.ax-studio-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid var(--ax-line);
    border-left: 4px solid var(--ax-navy);
    border-radius: 2px;
    margin-bottom: 12px;
}
.ax-studio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ax-studio-modal {
    width: min(880px, calc(100vw - 28px));
    top: 7vh;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ax-studio-modal .asd-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 18px;
}
.ax-studio-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #F1F5F9;
    border-bottom: 1px solid var(--ax-line);
}
.ax-studio-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid var(--ax-line);
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ax-ink-2);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.ax-studio-step:last-child {
    border-right: 0;
}
.ax-studio-step:hover {
    background: #E2E8F0;
    color: var(--ax-ink);
}
.ax-studio-step.active {
    background: #FFFFFF;
    color: var(--ax-navy);
    border-bottom-color: var(--ax-navy);
    font-weight: 600;
}
.ax-studio-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    background: #F8FAFC;
    border-top: 1px solid var(--ax-line);
}
.ax-node-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: #FFFFFF;
    color: var(--ax-ink);
    border: 1px solid var(--ax-line);
    border-radius: 2px;
}
.ax-node-stage-sub {
    font-size: 12px;
    color: var(--ax-ink-2);
    line-height: 1.35;
}
.ax-node-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--ax-line);
    border-left: 3px solid var(--ax-navy);
    border-radius: 2px;
    background: #FFFFFF;
    font-size: 13px;
    cursor: pointer;
}
.ax-node-card:hover {
    border-color: #94A3B8;
}
.ax-node-card.on {
    background: #EEF3F8;
    border-color: #B8C7D6;
    border-left-color: var(--ax-navy);
}
.ax-node-card.kind-win {
    border-left-color: #9A6700;
}
.ax-node-card.kind-inp {
    border-left-color: #475569;
}
.ax-node-card.kind-calc {
    border-left-color: #0F766E;
}
.ax-node-card.kind-calc.on {
    background: #F0FDFA;
    border-color: #99F6E4;
    border-left-color: #0F766E;
}
.ax-node-badge {
    font-family: var(--ax-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    background: #E2E8F0;
    color: #1E293B;
    letter-spacing: .03em;
    flex: none;
}
.ax-node-badge.sig { background: #DBEAFE; color: #0E3556; }
.ax-node-badge.win { background: #FEF3C7; color: #92400E; }
.ax-node-badge.inp { background: #E2E8F0; color: #334155; }
.ax-node-badge.calc { background: #CCFBF1; color: #0F766E; }
.ax-slot-btn {
    border: 1px solid #CBD5E1;
    border-radius: 2px;
    background: #F8FAFC;
    color: #334155;
    font-family: var(--ax-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    line-height: 1.25;
    cursor: pointer;
    flex: none;
}
.ax-slot-btn:hover, .ax-slot-btn.active-win, .ax-slot-btn.active-a, .ax-slot-btn.active-b {
    border-color: var(--ax-navy);
    background: #E7EEF5;
    color: var(--ax-navy);
}
.ax-socket-box {
    border: 1px solid #BCC6D0;
    border-top: 3px solid var(--ax-navy);
    border-radius: 2px;
    background: #FFFFFF;
    padding: 12px 14px;
}
.ax-socket-box.calc-box {
    border-top-color: #0F766E;
}
.ax-socket-slot {
    border: 1px dashed #94A3B8;
    border-radius: 2px;
    background: #F8FAFC;
    padding: 8px 10px;
}
.ax-socket-slot.filled {
    border-style: solid;
    border-color: #CBD5E1;
    background: #FFFFFF;
}
.ax-socket-slot-label {
    display: block;
    font-family: var(--ax-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ax-formula-lineage {
    font-family: var(--ax-mono);
    font-size: 11.5px;
    color: #5A6570;
    line-height: 1.3;
}