/* 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); }
/* 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.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; 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-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-red); opacity: 1; }
.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.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; display: flex; }
.rs-single > .rs-card { flex: 1; }
.rs-card { min-height: 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; overflow: auto; padding: 12px 16px; }
.rs-step-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 2px solid var(--ax-ink); }
.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-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: flex-end; gap: 8px; }
.rs-dock-main-col { display: flex; flex-direction: column; align-items: flex-end; 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; }
.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; }
.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(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sr-tile { padding: 8px 14px; border: 2px solid var(--ax-ink); border-bottom-width: 5px; border-radius: 2px; background: #FFFFFF; color: var(--ax-ink); line-height: 1.2; }
.sr-tile.on { box-shadow: inset 0 0 0 1px var(--ax-ink); }
.sr-tile.alert { background: var(--ax-amber); }
.sr-tile.more { border-color: var(--ax-line); border-bottom-width: 2px; }
.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%; overflow-x: auto; border: 1px solid var(--ax-line-2); }
.sr-preview { width: 100%; margin: 0; white-space: nowrap; }
.sr-preview th { 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-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); }

/* 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: #3B6C99; 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 { position: absolute; right: 6px; top: 6px; display: none; gap: 4px; }
.rd-block:hover .rd-tools, .rd-block.on .rd-tools { display: flex; }
.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; 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 {
    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-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; }