/* ============================================================================
   Draft Mainframe — Homepage visual layer (v0.9.4A material system)
   Applies the approved material component kit to the locked v0.9.2 homepage
   structure in Pages/Index.cshtml. Copy, module order, routes, and behavior
   are locked; this file is treatment only.
   Recipes: docs/DraftMainframe_Material_Recipe_v0_9_4A.md
   ========================================================================== */

/* ── Tokens + app shell ────────────────────────────────────────────────── */

.dm-home-shell-page {
    /* brand (official v0.8.1 SVG fills) */
    --dm-orange:      #EF4A1E;
    --dm-orange-hot:  #FF7A2E;
    --dm-orange-deep: #A23412;
    --dm-bone:        #ECE4D2;
    --dm-bone-hi:     #FBF4E4;
    --dm-bone-low:    #C9BCA4;

    /* chassis planes */
    --dm-chassis:     #131211;
    --dm-panel:       #1B1915;
    --dm-panel-deep:  #070707;

    /* text */
    --dm-text:        #ECE4D2;
    --dm-ink:         #17120D;
    --dm-muted:       #A79A85;
    --dm-standby:     #8B857C;
    --dm-green-live:  #77E14A;

    /* typography */
    --dm-font-display: "Bahnschrift", "Archivo Narrow", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --dm-font-body:    "Segoe UI", system-ui, -apple-system, sans-serif;
    --dm-track-wide:   0.14em;
    --dm-track-tight:  0.01em;

    /* alpha compositing */
    --dm-orange-rgb: 239 74 30;
    --dm-bone-rgb:   236 228 210;

    /* shared bordered-chamfer octagon (each element sets its own --cut) */
    --cut: 8px;
    --dm-oct: polygon(
        var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
        100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
        var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));

    background:
        radial-gradient(120% 60% at 50% 0%, rgb(var(--dm-orange-rgb) / 5%), transparent 60%),
        linear-gradient(90deg, transparent 0 calc(50% - 216px), rgb(var(--dm-orange-rgb) / 4%) calc(50% - 216px) calc(50% - 215px), transparent calc(50% - 215px) calc(50% + 215px), rgb(var(--dm-orange-rgb) / 4%) calc(50% + 215px) calc(50% + 216px), transparent calc(50% + 216px)),
        #050607;
    color: var(--dm-bone);
    font-family: var(--dm-font-body);
}

.dm-home-shell-page a {
    color: inherit;
    text-decoration: none;
}

.dm-home-shell-page :is(a, button):focus-visible {
    outline: 2px solid var(--dm-orange-hot);
    outline-offset: 3px;
}

.dm-home-shell-page button {
    font: inherit;
    cursor: pointer;
}

/* ── Top app bar — official logo only ──────────────────────────────────── */

.dm-home-shell-page .site-header--home-app {
    position: relative;
    border-bottom: 1px solid rgb(var(--dm-orange-rgb) / 64%);
    background: linear-gradient(180deg, #1D1B18, #0E0D0C);
    box-shadow: 0 6px 18px rgb(0 0 0 / 55%);
}

.dm-home-shell-page .site-header--home-app::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dm-orange-hot), transparent);
    box-shadow: 0 0 1rem rgb(var(--dm-orange-rgb) / 64%);
}

.dm-home-shell-page .site-header--home-app > .page-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 0.55rem;
}

.dm-home-shell-page .site-header--home-app .dm-brand {
    margin-inline: auto;
}

.dm-home-shell-page .dm-header-logo {
    width: clamp(176px, 50vw, 214px);
    max-width: 68vw;
    max-height: 56px;
    object-position: center;
    filter: drop-shadow(0 0 0.65rem rgb(var(--dm-orange-rgb) / 26%));
}

/* ── Shell layout ──────────────────────────────────────────────────────── */

.dm-home-shell-page main.page-shell {
    width: min(430px, 100%);
    min-height: calc(100vh - 72px);
    padding: 0 0 calc(8.9rem + env(safe-area-inset-bottom, 0px));
}

.dm-home-shell {
    display: grid;
    /* v0.9.4C: module-to-module gaps are replaced by explicit circuit corridors;
       module interior spacing is untouched */
    gap: 0;
    padding: 0.85rem 0.65rem 1.1rem;
}

.dm-home-shell h1,
.dm-home-shell h2,
.dm-home-shell h3,
.dm-home-shell p {
    margin: 0;
}

/* ── v0.9.4C Phase 1 — circuit corridors (static topology) ─────────────── */
/* Horizontal signal bridges inside module-to-module corridors. The corridor
   owns the lane, the vertical contact drops/rises, and the node budget.
   Power levels per the v0.9.4C token table; corridor variables are consumed
   by the rendering rules below, never decorative. No JavaScript in Phase 1. */

.dm-circuit-corridor {
    position: relative;
    min-height: var(--dm-corridor-size, 44px);
    pointer-events: none;
    overflow: hidden;
    --dm-corridor-power: 0.45;
    --dm-corridor-core: #EF4A1E;
    --dm-corridor-glow: 28%;
    --dm-corridor-lane-width: 2px;
    /* chassis trench substrate: the bridge is installed in a hardware channel,
       not floating in black space. All layers use #4A302A within the 0.10–0.22
       substrate cap (ghost micro-detail included inside the cap). Static only. */
    background-image:
        linear-gradient(180deg, transparent, rgb(74 48 42 / 18%) 30% 70%, transparent),
        linear-gradient(rgb(74 48 42 / 22%), rgb(74 48 42 / 22%)),
        linear-gradient(rgb(74 48 42 / 22%), rgb(74 48 42 / 22%)),
        repeating-linear-gradient(90deg, rgb(74 48 42 / 11%) 0 6px, transparent 6px 16px),
        linear-gradient(rgb(74 48 42 / 16%), rgb(74 48 42 / 16%)),
        linear-gradient(rgb(74 48 42 / 16%), rgb(74 48 42 / 16%));
    background-size: 100% 100%, 86% 1px, 86% 1px, 64% 1px, 4px 44%, 4px 44%;
    background-position: 0 0, 50% 24%, 50% 76%, 50% 66%, 3% 50%, 97% 50%;
    background-repeat: no-repeat;
}

/* primary horizontal bridge lane */
.dm-circuit-corridor::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: var(--dm-corridor-lane-width, 2px);
    transform: translateY(-50%);
    border-radius: 999px;
    opacity: var(--dm-corridor-power, 0.45);
    background:
        linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--dm-corridor-core) 75%, transparent) 14%,
            var(--dm-corridor-core) 50%,
            color-mix(in srgb, var(--dm-corridor-core) 75%, transparent) 86%,
            transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--dm-corridor-core) var(--dm-corridor-glow, 28%), transparent);
}

/* no secondary lane by default; Bridge B opts in below */
.dm-circuit-corridor::after {
    content: none;
}

/* corridor-owned vertical contacts: drop from the module above, rise to the
   module below — always inside the corridor box */
.dm-circuit-contact {
    position: absolute;
    width: 2px;
    opacity: var(--dm-corridor-power, 0.45);
    background: linear-gradient(180deg,
        var(--dm-corridor-core),
        color-mix(in srgb, var(--dm-corridor-core) 55%, transparent));
}

.dm-circuit-contact--from {
    left: 22%;
    top: 0;
    height: 50%;
}

.dm-circuit-contact--to {
    right: 22%;
    top: 50%;
    bottom: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--dm-corridor-core) 55%, transparent),
        var(--dm-corridor-core));
}

/* contact pads where the drop/rise meets the lane */
.dm-circuit-contact::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--dm-corridor-core);
}

.dm-circuit-contact--from::after { bottom: -2px; }
.dm-circuit-contact--to::after   { top: -2px; }

/* Bridge B static node — the only corridor node in Phase 1 (budget: 1) */
.dm-circuit-node {
    position: absolute;
    left: 42%;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgb(255 217 168 / 72%), rgb(var(--dm-orange-rgb) / 52%) 50%, rgb(var(--dm-orange-rgb) / 24%) 86%);
    box-shadow: 0 0 4px 1px color-mix(in srgb, var(--dm-corridor-core) 14%, transparent);
    opacity: 0.52;
}

/* Bridge A — 01→02 system feed (lane 0.45–0.55, glow 0.12–0.22) */
.dm-circuit-corridor--a {
    --dm-corridor-size: clamp(36px, 10vw, 52px);
    --dm-corridor-power: 0.50;
    --dm-corridor-core: #EF4A1E;
    --dm-corridor-glow: 18%;
    --dm-corridor-lane-width: 2px;
}

/* Bridge B — 02→03 hero handoff (lane 0.72, glow 0.30–0.42) */
.dm-circuit-corridor--b {
    --dm-corridor-size: clamp(48px, 14vw, 72px);
    --dm-corridor-power: 0.72;
    --dm-corridor-core: #EF4A1E;
    --dm-corridor-glow: 34%;
    --dm-corridor-lane-width: 2.5px;
    --dm-corridor-secondary-power: 0.34;
}

/* Bridge B only: thin dashed secondary data lane */
.dm-circuit-corridor--b::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: calc(50% + 9px);
    height: 1px;
    transform: translateY(-50%);
    border-radius: 999px;
    opacity: var(--dm-corridor-secondary-power, 0.34);
    background: repeating-linear-gradient(90deg,
        var(--dm-corridor-core) 0 5px,
        transparent 5px 12px);
}

.dm-circuit-corridor--b .dm-circuit-contact::after {
    opacity: 0.55;
    box-shadow: 0 0 5px color-mix(in srgb, var(--dm-corridor-core) 22%, transparent);
}

/* Bridge C — 03→04 power step-down (lane 0.08–0.12, glow 0.06–0.10).
   The thin horizontal lane must stay visible against the trench substrate so
   the corridor never reads as two detached vertical whiskers. */
.dm-circuit-corridor--c {
    --dm-corridor-size: clamp(36px, 11vw, 56px);
    --dm-corridor-power: 0.10;
    --dm-corridor-core: #9A4A32;
    --dm-corridor-glow: 6%;
    --dm-corridor-lane-width: 1px;
    /* keep the C lane a continuous hairline: contacts inherit the corridor
       power, the lane gets a small legibility floor via its own gradient */
}

.dm-circuit-corridor--c::before {
    opacity: 0.12;
    background: linear-gradient(90deg,
        transparent,
        var(--dm-corridor-core) 12% 88%,
        transparent);
}

/* ── Module chassis (dark hardware panel shell, 3 planes) ──────────────── */

.dm-home-module {
    position: relative;
    padding: 1.15rem 0.95rem 1.2rem;
    border: 1px solid rgb(var(--dm-bone-rgb) / 7%);
    border-radius: 14px;
    background: linear-gradient(180deg, #201E1B, var(--dm-chassis) 30%, #0D0C0B);
    box-shadow:
        0 18px 40px rgb(0 0 0 / 55%),
        inset 0 1px 0 rgb(var(--dm-bone-rgb) / 6%);
    display: grid;
    gap: 0.8rem;
}

/* content sits above the circuit/trace pseudo layers */
.dm-home-module > * {
    position: relative;
    z-index: 1;
}

/* plane 2: inset circuit trace frame + glowing LED side rails */
.dm-home-module::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1px solid rgb(var(--dm-orange-rgb) / 34%);
    border-radius: 10px;
    box-shadow:
        inset 0 0 14px rgb(var(--dm-orange-rgb) / 7%),
        0 0 10px rgb(var(--dm-orange-rgb) / 8%);
    /* v0.9.4C hierarchy patch: side ladders are chassis atmosphere (≤0.20),
       they must sit below the horizontal bridges */
    background-image:
        repeating-linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 18%) 0 4px, rgb(var(--dm-orange-rgb) / 6%) 4px 8px),
        repeating-linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 18%) 0 4px, rgb(var(--dm-orange-rgb) / 6%) 4px 8px),
        radial-gradient(14px 46% at 0% 50%, rgb(var(--dm-orange-rgb) / 8%), transparent 70%),
        radial-gradient(14px 46% at 100% 50%, rgb(var(--dm-orange-rgb) / 8%), transparent 70%);
    background-size: 4px 32%, 4px 32%, 26px 62%, 26px 62%;
    background-position: 1px 50%, calc(100% - 1px) 50%, 0 50%, 100% 50%;
    background-repeat: no-repeat;
    animation: dm-frame-breathe 3.2s ease-in-out infinite alternate;
}

@keyframes dm-frame-breathe {
    from {
        box-shadow:
            inset 0 0 14px rgb(var(--dm-orange-rgb) / 7%),
            0 0 10px rgb(var(--dm-orange-rgb) / 8%);
    }
    to {
        box-shadow:
            inset 0 0 18px rgb(var(--dm-orange-rgb) / 13%),
            0 0 18px rgb(var(--dm-orange-rgb) / 18%);
    }
}

/* corner bolts + corner trace clusters + live glow nodes */
.dm-home-module::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url('/assets/dm/trace-corner.svg'),
        url('/assets/dm/trace-corner-bl.svg'),
        radial-gradient(circle, rgb(255 217 168 / 55%) 0 1.5px, rgb(var(--dm-orange-rgb) / 40%) 3px, rgb(var(--dm-orange-rgb) / 12%) 5px, transparent 7px),
        radial-gradient(circle, rgb(255 217 168 / 55%) 0 1.5px, rgb(var(--dm-orange-rgb) / 40%) 3px, rgb(var(--dm-orange-rgb) / 12%) 5px, transparent 7px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px);
    background-size: 92px 64px, 92px 64px, 14px 14px, 14px 14px, 10px 10px, 10px 10px, 10px 10px, 10px 10px;
    background-repeat: no-repeat;
    background-position:
        calc(100% - 9px) 34px,
        9px calc(100% - 9px),
        0px 30%,
        calc(100% - 0px) 72%,
        3px 3px,
        calc(100% - 3px) 3px,
        3px calc(100% - 3px),
        calc(100% - 3px) calc(100% - 3px);
    opacity: 0.95;
}

/* 02 service rails: the position bank is the primary control surface — real
   glowing LED rail bars with hot junction points, unmistakable at phone scale */
.dm-home-module--rooms::before {
    background-image:
        radial-gradient(circle at 50% 50%, #FFD9A8 0 1.5px, rgb(var(--dm-orange-rgb) / 80%) 3px, rgb(var(--dm-orange-rgb) / 25%) 5px, transparent 7px),
        radial-gradient(circle at 50% 50%, #FFD9A8 0 1.5px, rgb(var(--dm-orange-rgb) / 80%) 3px, rgb(var(--dm-orange-rgb) / 25%) 5px, transparent 7px),
        radial-gradient(circle at 50% 50%, #FFD9A8 0 1.5px, rgb(var(--dm-orange-rgb) / 80%) 3px, rgb(var(--dm-orange-rgb) / 25%) 5px, transparent 7px),
        radial-gradient(circle at 50% 50%, #FFD9A8 0 1.5px, rgb(var(--dm-orange-rgb) / 80%) 3px, rgb(var(--dm-orange-rgb) / 25%) 5px, transparent 7px),
        repeating-linear-gradient(180deg, var(--dm-orange-hot) 0 5px, rgb(var(--dm-orange-rgb) / 22%) 5px 10px),
        repeating-linear-gradient(180deg, var(--dm-orange-hot) 0 5px, rgb(var(--dm-orange-rgb) / 22%) 5px 10px),
        radial-gradient(30px 50% at 0% 50%, rgb(var(--dm-orange-rgb) / 34%), transparent 72%),
        radial-gradient(30px 50% at 100% 50%, rgb(var(--dm-orange-rgb) / 34%), transparent 72%);
    background-size:
        14px 14px, 14px 14px, 14px 14px, 14px 14px,
        7px 38%, 7px 38%,
        34px 64%, 34px 64%;
    background-position:
        0 26%, 0 76%, 100% 26%, 100% 76%,
        2px 50%, calc(100% - 2px) 50%,
        0 50%, 100% 50%;
    background-repeat: no-repeat;
}

/* the 02 frame keeps the top-right trace and bolts but drops the bottom-left
   corner spur so no loose line sits below the socket field */
.dm-home-module--rooms::after {
    background-image:
        url('/assets/dm/trace-corner.svg'),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px);
    background-size: 92px 64px, 10px 10px, 10px 10px, 10px 10px, 10px 10px;
    background-repeat: no-repeat;
    background-position:
        calc(100% - 9px) 34px,
        3px 3px,
        calc(100% - 3px) 3px,
        3px calc(100% - 3px),
        calc(100% - 3px) calc(100% - 3px);
}

/* 03 — cream inset panel (bordered chamfer: rim layer + face layer) */
.dm-home-module--scouting {
    --cut: 14px;
    clip-path: var(--dm-oct);
    border: none;
    border-radius: 0;
    padding: calc(1.15rem + 3px) calc(0.95rem + 3px) calc(1.2rem + 3px);
    background: #33302A;
    box-shadow: none;
    filter: drop-shadow(0 14px 30px rgb(0 0 0 / 50%));
    color: var(--dm-ink);
}

.dm-home-module--scouting::before {
    inset: 3px;
    --cut: 12px;
    clip-path: var(--dm-oct);
    border: none;
    border-radius: 0;
    animation: none;
    background: linear-gradient(180deg, #F6EFDF, var(--dm-bone) 45%, #E0D6C0);
    box-shadow:
        inset 0 2px 0 rgb(255 255 255 / 55%),
        inset 0 -8px 14px rgb(122 105 75 / 22%);
}

.dm-home-module--scouting > * {
    position: relative;
    z-index: 1;
}

/* cream corner bolts */
.dm-home-module--scouting::after {
    background-image:
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 1px, #B0A48C 2.5px, #6E6350 4px, transparent 4.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 1px, #B0A48C 2.5px, #6E6350 4px, transparent 4.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 1px, #B0A48C 2.5px, #6E6350 4px, transparent 4.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 1px, #B0A48C 2.5px, #6E6350 4px, transparent 4.6px);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position:
        13px 12px,
        calc(100% - 13px) 12px,
        13px calc(100% - 12px),
        calc(100% - 13px) calc(100% - 12px);
    opacity: 1;
}

/* 04 — operator bay: dark, dormant, future-facing */
.dm-home-module--operator {
    background: linear-gradient(180deg, #232326, #1A1A1D 40%, #121214);
    border-color: rgb(var(--dm-bone-rgb) / 8%);
    box-shadow:
        0 12px 28px rgb(0 0 0 / 50%),
        inset 0 1px 0 rgb(var(--dm-bone-rgb) / 5%);
}

.dm-home-module--operator::before {
    border-color: rgb(var(--dm-bone-rgb) / 9%);
    box-shadow: none;
    background: none;
    animation: none;
}

.dm-home-module--operator::after {
    background-image:
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position:
        3px 3px,
        calc(100% - 3px) 3px,
        3px calc(100% - 3px),
        calc(100% - 3px) calc(100% - 3px);
    opacity: 0.7;
}

.dm-home-module--operator .dm-module-title h2,
.dm-home-module--operator .dm-module-title p {
    color: var(--dm-standby);
}

/* ── Module head, number badge, titles ─────────────────────────────────── */

.dm-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.dm-module-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.dm-module-title h1,
.dm-module-title h2 {
    font-family: var(--dm-font-display);
    font-stretch: condensed;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    line-height: 1.1;
}

.dm-module-title p {
    margin-top: 0.2rem;
    color: var(--dm-muted);
    font-size: 0.78rem;
}

.dm-home-module--scouting .dm-module-title p {
    color: rgb(23 18 13 / 65%);
}

/* octagonal hardware number badge */
.dm-module-number {
    --cut: 9px;
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 40px;
    padding: 0.2rem 0.45rem;
    clip-path: var(--dm-oct);
    background: linear-gradient(180deg, var(--dm-orange-hot), var(--dm-orange) 60%, var(--dm-orange-deep));
    font-family: var(--dm-font-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: var(--dm-track-tight);
    color: var(--dm-orange-hot);
    text-shadow: 0 0 8px rgb(var(--dm-orange-rgb) / 45%);
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 55%));
}

.dm-module-number::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    --cut: 8px;
    clip-path: var(--dm-oct);
    background: #0C0B0A;
}

.dm-home-module--operator .dm-module-number {
    background: linear-gradient(180deg, #4A4A4E, #3A3A3E 60%, #2A2A2D);
    color: var(--dm-standby);
    text-shadow: none;
}

/* ── State badges ──────────────────────────────────────────────────────── */

.dm-state-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
    border-radius: 7px;
    font-family: var(--dm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--dm-track-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.dm-state-badge::before {
    content: "";
    flex: none;
}

.dm-state-badge--online {
    border: 1px solid rgb(119 225 74 / 55%);
    background: linear-gradient(180deg, #1A1D16, #101208);
    box-shadow: inset 0 1px 0 rgb(var(--dm-bone-rgb) / 6%);
    color: var(--dm-green-live);
}

.dm-state-badge--online::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #C9FFA6, var(--dm-green-live) 60%);
    box-shadow: 0 0 8px rgb(119 225 74 / 60%);
}

.dm-state-badge--routes {
    border: 1px solid rgb(var(--dm-orange-rgb) / 55%);
    background: linear-gradient(180deg, #1D1613, #120D0A);
    box-shadow: inset 0 1px 0 rgb(var(--dm-bone-rgb) / 6%);
    color: var(--dm-orange-hot);
}

.dm-state-badge--routes::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFD9A8, var(--dm-orange-hot) 60%);
    box-shadow: 0 0 8px rgb(var(--dm-orange-rgb) / 60%);
}

.dm-state-badge--primer::before,
.dm-state-badge--standby::before {
    width: 11px;
    height: 8px;
    background-image: radial-gradient(circle, currentColor 0 1.1px, transparent 1.3px);
    background-size: 3.6px 3.6px;
}

.dm-state-badge--primer {
    border: 1px solid var(--dm-orange-deep);
    background: linear-gradient(180deg, #F9B27C, #F0894B);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
    color: var(--dm-ink);
}

.dm-state-badge--standby {
    border: 1px solid rgb(var(--dm-bone-rgb) / 14%);
    background: linear-gradient(180deg, #2C2C2F, #222225);
    box-shadow: inset 0 1px 0 rgb(var(--dm-bone-rgb) / 7%);
    color: var(--dm-standby);
}

/* ── 01 Control Room content ───────────────────────────────────────────── */

.dm-home-lede {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--dm-bone);
}

.dm-cycle-chip {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
    border: 1px solid rgb(var(--dm-orange-rgb) / 40%);
    border-radius: 7px;
    background: linear-gradient(180deg, #1D1613, #120D0A);
    font-family: var(--dm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--dm-track-wide);
    text-transform: uppercase;
    color: var(--dm-bone);
}

.dm-cycle-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFD9A8, var(--dm-orange-hot) 60%);
}

/* ── Expand cards (machined accordion rows) ────────────────────────────── */

.dm-home-actions,
.dm-primer-controls {
    display: grid;
    gap: 0.55rem;
}

.dm-expand-card__button,
.dm-primer-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgb(var(--dm-bone-rgb) / 14%);
    border-radius: 10px;
    background: linear-gradient(180deg, #26231F, #1A1815);
    box-shadow:
        inset 0 1px 0 rgb(var(--dm-bone-rgb) / 8%),
        0 2px 5px rgb(0 0 0 / 35%);
    color: var(--dm-bone);
    font-family: var(--dm-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: left;
    transition: border-color 140ms ease-out;
}

.dm-expand-card__button > span:first-child,
.dm-primer-link > span:first-child {
    flex: 1;
}

/* hardware chevron — rows only, never position tiles */
.dm-expand-card__cue,
.dm-link-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgb(var(--dm-bone-rgb) / 65%);
    border-bottom: 2px solid rgb(var(--dm-bone-rgb) / 65%);
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 140ms ease-out;
}

.dm-link-chevron {
    transform: rotate(-45deg);
    margin-top: 0;
}

.dm-expand-card__button[aria-expanded="true"] {
    border-color: rgb(var(--dm-orange-rgb) / 55%);
    color: var(--dm-orange-hot);
}

.dm-expand-card__button[aria-expanded="true"] .dm-expand-card__cue {
    transform: rotate(-135deg);
    margin-top: 3px;
    border-color: var(--dm-orange-hot);
}

/* inset reveal well */
.dm-expand-card__body {
    margin-top: 0.45rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgb(var(--dm-orange-rgb) / 35%);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--dm-panel-deep), #100F0E);
    box-shadow: inset 0 3px 7px rgb(0 0 0 / 45%);
    color: var(--dm-bone);
    font-size: 0.85rem;
    line-height: 1.5;
}

.dm-expand-card__body ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.3rem;
}

.dm-expand-card__body p {
    margin: 0;
}

/* cream variants inside 03 */
.dm-home-module--scouting .dm-expand-card__button,
.dm-home-module--scouting .dm-primer-link {
    border: 1px solid rgb(94 79 56 / 38%);
    background: linear-gradient(180deg, #F8F1E1, #ECE3CE);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 80%),
        0 2px 5px rgb(60 45 25 / 30%);
    color: var(--dm-ink);
}

.dm-home-module--scouting .dm-expand-card__cue,
.dm-home-module--scouting .dm-link-chevron {
    border-right-color: rgb(23 18 13 / 65%);
    border-bottom-color: rgb(23 18 13 / 65%);
}

.dm-home-module--scouting .dm-expand-card__button[aria-expanded="true"] {
    border-color: rgb(var(--dm-orange-rgb) / 55%);
    color: var(--dm-orange-deep);
}

.dm-home-module--scouting .dm-expand-card__button[aria-expanded="true"] .dm-expand-card__cue {
    border-color: var(--dm-orange-deep);
}

.dm-home-module--scouting .dm-expand-card__body {
    border: 1px solid rgb(var(--dm-orange-rgb) / 35%);
    background: #F2EAD8;
    box-shadow: inset 0 3px 7px rgb(90 70 40 / 25%);
    color: var(--dm-ink);
}

/* ── 02 Position Rooms — cream bolted route plates ─────────────────────── */

.dm-room-bank {
    position: relative;
    display: grid;
    isolation: isolate;
    overflow: hidden;
    gap: 0.82rem;
    padding: 0.12rem 0 0.18rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dm-room-bank::before {
    content: none;
}

.dm-room-bank::after {
    content: none;
}

.dm-room-group {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.6rem;
}

.dm-room-group h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--dm-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--dm-track-wide);
    text-transform: uppercase;
    color: var(--dm-orange-hot);
}

.dm-room-group h3::before,
.dm-room-group h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--dm-orange-rgb) / 45%));
}

.dm-room-group h3::after {
    background: linear-gradient(90deg, rgb(var(--dm-orange-rgb) / 45%), transparent);
}

.dm-room-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.62rem;
    isolation: isolate;
}

.dm-room-grid::before {
    content: none;
}

.dm-room-socket {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    padding: 5px 5px 8px;
    overflow: hidden;
    isolation: isolate;
}

.dm-room-socket::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --cut: 10px;
    clip-path: var(--dm-oct);
    background-image:
        linear-gradient(180deg, transparent, rgb(var(--dm-orange-rgb) / 34%) 22% 78%, transparent),
        linear-gradient(180deg, transparent, rgb(var(--dm-orange-rgb) / 34%) 22% 78%, transparent),
        linear-gradient(90deg, transparent, rgb(var(--dm-orange-rgb) / 26%) 28% 72%, transparent),
        linear-gradient(180deg, #2A251F, #090807 56%, #050505);
    background-size: 2px calc(100% - 20px), 2px calc(100% - 20px), 56% 1px, 100% 100%;
    background-position: 5px 50%, calc(100% - 5px) 50%, 50% calc(100% - 6px), 0 0;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 5px 10px rgb(0 0 0 / 82%),
        inset 0 -4px 7px rgb(0 0 0 / 68%),
        inset 0 0 0 1px rgb(var(--dm-bone-rgb) / 6%),
        inset 0 -1px 0 rgb(var(--dm-orange-rgb) / 18%);
}

.dm-room-socket::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    bottom: 6px;
    z-index: 2;
    height: 1px;
    pointer-events: none;
    opacity: 0.72;
    background: linear-gradient(90deg, transparent, rgb(var(--dm-orange-rgb) / 68%) 18% 82%, transparent);
    box-shadow: 0 1px 0 rgb(var(--dm-orange-rgb) / 16%);
}

/* plate anchor stays unclipped so focus outlines render */
.dm-home-shell-page .dm-room-plate {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 54px;
    font-family: var(--dm-font-display);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: var(--dm-track-tight);
    color: var(--dm-ink);
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / 58%));
    transition: transform 140ms ease-out, filter 160ms ease-out;
}

/* mounted socket plane: engineered housing with top bezel light, side
   contact slits, and an integrated under-seam glow (light escaping the
   socket seam — not a floating rail artifact) */
.dm-room-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    --cut: 9px;
    clip-path: var(--dm-oct);
    background-image:
        linear-gradient(rgb(var(--dm-bone-rgb) / 12%), rgb(var(--dm-bone-rgb) / 12%)),
        linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 20%), rgb(var(--dm-orange-rgb) / 62%)),
        linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 20%), rgb(var(--dm-orange-rgb) / 62%)),
        linear-gradient(90deg, transparent, rgb(var(--dm-orange-rgb) / 44%) 28% 72%, transparent),
        linear-gradient(180deg, #3A362E, #141311 58%, #0C0B0A);
    background-size:
        calc(100% - 26px) 1px,
        3px calc(100% - 16px),
        3px calc(100% - 16px),
        48% 1px,
        100% 100%;
    background-repeat: no-repeat;
    background-position:
        50% 1px,
        0 60%,
        100% 60%,
        50% calc(100% - 1px),
        0 0;
}

/* cream chamfered face + corner bolts */
.dm-room-plate::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    --cut: 7px;
    clip-path: var(--dm-oct);
    background-image:
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        linear-gradient(180deg, var(--dm-bone-hi), var(--dm-bone) 52%, var(--dm-bone-low));
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
    background-repeat: no-repeat;
    background-position:
        7px 6px,
        calc(100% - 7px) 6px,
        7px calc(100% - 6px),
        calc(100% - 7px) calc(100% - 6px),
        0 0;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 70%),
        inset 0 -4px 6px rgb(94 79 56 / 34%);
}

/* pressed / tap — frame_C physics, CSS only */
.dm-room-plate:active,
.dm-room-plate:focus-visible {
    transform: translateY(1px) scale(0.995);
    filter:
        drop-shadow(0 2px 5px rgb(0 0 0 / 45%))
        drop-shadow(0 0 10px rgb(var(--dm-orange-rgb) / 55%))
        drop-shadow(0 0 26px rgb(var(--dm-orange-rgb) / 25%));
}

/* socket power-up: bezel light holds, rim lights and under-seam go hot */
.dm-room-plate:active::before,
.dm-room-plate:focus-visible::before {
    background-image:
        linear-gradient(rgb(var(--dm-bone-rgb) / 12%), rgb(var(--dm-bone-rgb) / 12%)),
        linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 55%), var(--dm-orange-hot)),
        linear-gradient(180deg, rgb(var(--dm-orange-rgb) / 55%), var(--dm-orange-hot)),
        linear-gradient(90deg, transparent, var(--dm-orange-hot) 10% 90%, transparent),
        linear-gradient(180deg, #3A362E, #141311 58%, #0C0B0A);
}

.dm-room-plate:active::after,
.dm-room-plate:focus-visible::after {
    background-image:
        radial-gradient(circle at 8px 50%, #FFFFFF 0 2px, #FFD9A8 6px, transparent 13px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 85%) 0 0.8px, #B0A48C 2px, #6E6350 3px, transparent 3.6px),
        linear-gradient(180deg, #FFC084, var(--dm-orange-hot) 42%, var(--dm-orange) 85%);
    background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
    background-position:
        0 0,
        7px 6px,
        calc(100% - 7px) 6px,
        7px calc(100% - 6px),
        calc(100% - 7px) calc(100% - 6px),
        0 0;
    box-shadow:
        inset 0 2px 7px rgb(120 30 0 / 45%),
        inset 0 -1px 0 rgb(255 255 255 / 35%);
}

/* ── 03 Scouting System — method nodes ─────────────────────────────────── */

.dm-method-node-grid {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
    padding: 0.4rem 0.1rem 0.1rem;
}

/* connected dotted trace behind the nodes */
.dm-method-node-grid::before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: calc(0.4rem + 23px);
    height: 2px;
    background: repeating-linear-gradient(90deg,
        rgb(var(--dm-orange-rgb) / 70%) 0 4px,
        transparent 4px 10px);
}

/* live glow node at the trace midpoint */
.dm-method-node-grid::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(0.4rem + 23px);
    width: 8px;
    height: 8px;
    margin: -3px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #FFD9A8, var(--dm-orange-hot) 45%, var(--dm-orange-deep) 90%);
    box-shadow: 0 0 10px 2px rgb(var(--dm-orange-rgb) / 55%);
    animation: dm-node-breathe 2.6s ease-in-out infinite alternate;
}

@keyframes dm-node-breathe {
    from { box-shadow: 0 0 6px 1px rgb(var(--dm-orange-rgb) / 40%); }
    to   { box-shadow: 0 0 12px 3px rgb(var(--dm-orange-rgb) / 70%); }
}

.dm-method-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: transparent;
    min-width: 0;
    transition: transform 140ms ease-out;
}

.dm-method-node__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #262019;
    background: radial-gradient(circle at 38% 32%, #FDF7E8, var(--dm-bone) 68%, #DDD3BD);
    box-shadow:
        inset 0 -3px 5px rgb(94 79 56 / 30%),
        0 2px 5px rgb(60 45 25 / 35%);
    font-family: var(--dm-font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--dm-ink);
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.dm-method-node > span:last-child {
    font-family: var(--dm-font-display);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dm-ink);
    white-space: nowrap;
}

.dm-method-node:active,
.dm-method-node:focus-visible {
    transform: translateY(1px);
}

.dm-method-node:active .dm-method-node__icon,
.dm-method-node:focus-visible .dm-method-node__icon,
.dm-method-node[aria-expanded="true"] .dm-method-node__icon {
    border-color: var(--dm-orange-deep);
    box-shadow:
        inset 0 -3px 5px rgb(94 79 56 / 30%),
        0 0 10px rgb(var(--dm-orange-rgb) / 40%);
}

.dm-method-node[aria-expanded="true"] .dm-method-node__icon {
    background: radial-gradient(circle at 38% 32%, #FFD9A8, #F5B071 68%, #E8945A);
}

/* node explanation wells */
.dm-node-explanations p {
    margin-top: 0.45rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgb(var(--dm-orange-rgb) / 35%);
    border-radius: 8px;
    background: #F2EAD8;
    box-shadow: inset 0 3px 7px rgb(90 70 40 / 25%);
    color: var(--dm-ink);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ── 04 Operator Bay — dormant chips ───────────────────────────────────── */

.dm-operator-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.dm-dormant-chip {
    position: relative;
    z-index: 0;
    padding: 0.9rem 0.8rem;
    border: none;
    background: transparent;
    font-family: var(--dm-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--dm-track-wide);
    text-transform: uppercase;
    color: var(--dm-standby);
    transition: color 140ms ease-out, filter 140ms ease-out;
}

.dm-dormant-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    --cut: 8px;
    clip-path: var(--dm-oct);
    background: #3A3A3E;
    transition: background 140ms ease-out;
}

.dm-dormant-chip::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    --cut: 7px;
    clip-path: var(--dm-oct);
    background: linear-gradient(180deg, #2E2E31, #232326);
    box-shadow: inset 0 1px 0 rgb(var(--dm-bone-rgb) / 8%);
}

.dm-dormant-chip:active,
.dm-dormant-chip:focus-visible,
.dm-dormant-chip[aria-expanded="true"] {
    color: var(--dm-bone-low);
    filter: drop-shadow(0 3px 10px rgb(var(--dm-orange-rgb) / 25%));
}

.dm-dormant-chip:active::before,
.dm-dormant-chip:focus-visible::before,
.dm-dormant-chip[aria-expanded="true"]::before {
    background: rgb(var(--dm-bone-rgb) / 26%);
}

.dm-operator-note {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgb(var(--dm-bone-rgb) / 14%);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--dm-panel-deep), #100F0E);
    box-shadow: inset 0 3px 7px rgb(0 0 0 / 45%);
    color: var(--dm-bone-low);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ── Bottom dock — hardware command strip ──────────────────────────────── */

.dm-bottom-dock {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 20;
    width: min(430px, 100%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.5rem 0.35rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #23211D, var(--dm-chassis) 40%, #0B0A0A);
    box-shadow:
        inset 0 -1px 0 rgb(var(--dm-orange-rgb) / 30%),
        inset 0 1px 0 rgb(var(--dm-bone-rgb) / 8%),
        0 -8px 24px rgb(0 0 0 / 55%);
}

.dm-bottom-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px),
        radial-gradient(circle at 35% 30%, #4A4A4A 0 1px, #202020 2.5px, #0A0A0A 4px, transparent 4.5px);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 4px 4px, calc(100% - 4px) 4px;
}

.dm-home-shell-page .dm-dock-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    padding: 0.55rem 0.15rem 0.5rem;
    color: rgb(var(--dm-bone-rgb) / 85%);
    font-family: var(--dm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: var(--dm-track-wide);
    text-transform: uppercase;
    transition: filter 160ms ease-out, transform 140ms ease-out;
}

/* segment dividers */
.dm-dock-item + .dm-dock-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgb(var(--dm-bone-rgb) / 14%), transparent);
}

/* icons: SVG masks; hide the fallback letter */
.dm-dock-icon {
    width: 22px;
    height: 22px;
    overflow: hidden;
    font-size: 0;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: var(--dm-dock-icon) no-repeat center / contain;
    mask: var(--dm-dock-icon) no-repeat center / contain;
}

.dm-dock-item:nth-child(1) .dm-dock-icon { --dm-dock-icon: url('/assets/dm/icon-home.svg'); }
.dm-dock-item:nth-child(2) .dm-dock-icon { --dm-dock-icon: url('/assets/dm/icon-rooms.svg'); }
.dm-dock-item:nth-child(3) .dm-dock-icon { --dm-dock-icon: url('/assets/dm/icon-prospects.svg'); }
.dm-dock-item:nth-child(4) .dm-dock-icon { --dm-dock-icon: url('/assets/dm/icon-board.svg'); }
.dm-dock-item:nth-child(5) .dm-dock-icon { --dm-dock-icon: url('/assets/dm/icon-method.svg'); }

/* selected — lit cream plate, treatment only */
.dm-home-shell-page .dm-dock-item.is-selected {
    color: var(--dm-ink);
    filter: drop-shadow(0 0 8px rgb(var(--dm-orange-rgb) / 50%));
}

.dm-dock-item.is-selected::after {
    content: "";
    position: absolute;
    inset: 2px 3px;
    z-index: -1;
    --cut: 8px;
    clip-path: var(--dm-oct);
    background:
        linear-gradient(180deg, var(--dm-bone-hi), var(--dm-bone)) padding-box,
        linear-gradient(180deg, var(--dm-orange-hot), var(--dm-orange-deep)) border-box;
    border: 2px solid transparent;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

/* standby — dim, geometry intact */
.dm-home-shell-page .dm-dock-item.is-standby {
    color: #67625A;
}

.dm-dock-state {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--dm-standby);
}

.dm-dock-item:active {
    transform: translateY(1px);
}

/* ── Hover — desktop-only additive polish ──────────────────────────────── */

@media (hover: hover) {
    .dm-room-plate:hover,
    .dm-method-node:hover .dm-method-node__icon,
    .dm-expand-card__button:hover,
    .dm-primer-link:hover,
    .dm-dormant-chip:hover,
    .dm-dock-item:hover {
        filter: brightness(1.07);
    }
}

/* ── v0.9.4D — live power layer (idle-alive, no scroll dependency) ─────── */
/* The homepage is powered ON at load. Atmosphere runs at idle on infinite
   loops; affordance is static elevated energy on clickable controls; response
   is a brief local pulse on tap/open (classes from circuit-state.js).
   Scroll-wake is dropped per the v0.9.4D behavior map. Moving-node budget:
   Bridge B current (1) + Bridge A occasional pass (1) + one ambient rail
   drifter (1) = max 3 concurrent. All repeating animations are `infinite`. */

/* Level 3 idle affordance — clickable seams read hotter than passive copy */
.dm-expand-card__button,
.dm-primer-link {
    box-shadow:
        inset 0 1px 0 rgb(var(--dm-bone-rgb) / 8%),
        inset 0 -1px 0 rgb(var(--dm-orange-rgb) / 24%),
        0 2px 5px rgb(0 0 0 / 35%);
}

.dm-home-module--scouting .dm-expand-card__button,
.dm-home-module--scouting .dm-primer-link {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 80%),
        inset 0 -1px 0 rgb(var(--dm-orange-rgb) / 30%),
        0 2px 5px rgb(60 45 25 / 30%);
}

/* traveling current elements (aria-hidden spans inside corridors) */
.dm-circuit-current {
    position: absolute;
    top: 50%;
    left: 8%;
    width: 64px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent,
        rgb(var(--dm-orange-rgb) / 82%) 30%,
        var(--dm-orange-hot) 68%,
        #FFD9A8);
    filter: drop-shadow(0 0 8px rgb(var(--dm-orange-rgb) / 50%));
    will-change: left, opacity;
}

/* pre-blurred glow layer under the current head (animated via parent only) */
.dm-circuit-current::before {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #FFE6BA, rgb(var(--dm-orange-rgb) / 68%) 44%, transparent 70%);
    filter: blur(2px);
}

/* Bridge B center node: soft stationary pulse via pre-blurred halo layer */
.dm-circuit-node::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--dm-orange-rgb) / 18%), transparent 70%);
    filter: blur(2px);
    opacity: 0.14;
}

/* ambient rail drifter (module 02 right gutter — never crosses text) */
.dm-ambient-node {
    position: absolute;
    right: 4px;
    top: 12%;
    z-index: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 40% 35%, #FFD9A8, var(--dm-orange-hot) 55%, transparent 90%);
    filter: blur(0.5px);
    pointer-events: none;
    will-change: top, opacity;
}

@media (prefers-reduced-motion: no-preference) {

    /* B1 — hero current: linear travel, 6s cycle (travel ≈ 3.2s), forever */
    .dm-circuit-corridor--b .dm-circuit-current {
        animation: dm-current-b 6s linear infinite;
    }

    /* Bridge A — occasional feed pass: 24s cycle (travel ≈ 2.4s), forever */
    .dm-circuit-corridor--a .dm-circuit-current {
        width: 40px;
        background: linear-gradient(90deg,
            transparent,
            rgb(var(--dm-orange-rgb) / 40%) 40%,
            rgb(var(--dm-orange-rgb) / 75%));
        animation: dm-current-a 24s linear infinite;
    }

    /* B2 — center node soft pulse (stationary; not a moving node) */
    .dm-circuit-node::after {
        animation: dm-node-soft 3.6s ease-in-out infinite;
    }

    /* A1 — SYSTEM ONLINE chip softly alive (status, not a button) */
    .dm-state-badge--online::before {
        animation: dm-chip-alive 4.5s ease-in-out infinite;
    }

    /* ambient drifter: slow rail descent, 26s loop, forever */
    .dm-ambient-node {
        animation: dm-ambient-drift 26s linear infinite;
    }

    /* level 4 — triggered pulses (JS adds .is-pulsing; never delays routes) */
    .dm-home-shell-page .dm-room-plate.is-pulsing {
        animation: dm-plate-pulse 300ms ease-out 1;
    }

    .dm-home-shell-page .dm-dock-item.is-pulsing {
        animation: dm-dock-pulse 250ms ease-out 1;
    }

    .dm-expand-card__button.is-pulsing,
    .dm-primer-link.is-pulsing {
        animation: dm-row-pulse 450ms ease-out 1;
    }

    .dm-method-node.is-pulsing .dm-method-node__icon {
        animation: dm-node-glow 450ms ease-out 1;
    }

    /* T1 — tile tap routes power: bank rail + Bridge B entry contact flash */
    .dm-home-module--rooms.is-route-pulse .dm-room-socket::after {
        animation: dm-bank-route 350ms ease-out 1;
    }

    .dm-home-module--rooms.is-route-pulse + .dm-circuit-corridor--b .dm-circuit-contact--from {
        animation: dm-contact-flash 350ms ease-out 1;
    }
}

/* current travel: keyframed on `left` so the lane span is correct at every
   corridor width; single tiny element, trivial layout cost */
@keyframes dm-current-b {
    0%   { left: 8%; opacity: 0; }
    5%   { opacity: 1; }
    48%  { opacity: 1; }
    53%  { left: calc(92% - 64px); opacity: 0; }
    100% { left: calc(92% - 64px); opacity: 0; }
}

@keyframes dm-current-a {
    0%   { left: 8%; opacity: 0; }
    1%   { opacity: 0.8; }
    9%   { opacity: 0.8; }
    10%  { left: calc(92% - 40px); opacity: 0; }
    100% { left: calc(92% - 40px); opacity: 0; }
}

@keyframes dm-node-soft {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.28; }
}

@keyframes dm-chip-alive {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

@keyframes dm-ambient-drift {
    0%   { top: 12%; opacity: 0; }
    6%   { opacity: 0.35; }
    46%  { opacity: 0.35; }
    52%  { top: 82%; opacity: 0; }
    100% { top: 82%; opacity: 0; }
}

@keyframes dm-plate-pulse {
    0% {
        filter:
            drop-shadow(0 2px 5px rgb(0 0 0 / 45%))
            drop-shadow(0 0 12px rgb(var(--dm-orange-rgb) / 60%))
            drop-shadow(0 0 30px rgb(var(--dm-orange-rgb) / 30%));
    }
}

@keyframes dm-dock-pulse {
    0% { filter: drop-shadow(0 0 10px rgb(var(--dm-orange-rgb) / 45%)); }
}

@keyframes dm-row-pulse {
    0% { box-shadow: 0 0 12px rgb(var(--dm-orange-rgb) / 35%); }
}

@keyframes dm-node-glow {
    45% {
        border-color: var(--dm-orange-deep);
        box-shadow:
            inset 0 -3px 5px rgb(94 79 56 / 30%),
            0 0 12px rgb(var(--dm-orange-rgb) / 45%);
    }
}

@keyframes dm-bank-route {
    35% {
        opacity: 1;
        box-shadow: 0 1px 0 rgb(var(--dm-orange-rgb) / 32%);
    }
}

@keyframes dm-contact-flash {
    35% { opacity: 1; }
}

/* v0.9.4D reduced-motion contract: static powered states remain, currents
   stop. (The global reduced-motion kill switch below also applies.) */
@media (prefers-reduced-motion: reduce) {
    .dm-circuit-current,
    .dm-circuit-node::after,
    .dm-ambient-node,
    .is-pulsing {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    /* keep a visible static current seat so the lane still reads powered */
    .dm-circuit-corridor--b .dm-circuit-current {
        opacity: 0.55;
        left: 42%;
    }
}
/* ── Motion safety ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .dm-home-shell-page *,
    .dm-home-shell-page *::before,
    .dm-home-shell-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}