:root {
    color-scheme: dark;
    --bg: #0a0b0e;
    --panel: #121419;
    --panel-strong: #191c22;
    --panel-raised: #22252d;
    --line: rgba(236, 238, 242, 0.11);
    --line-strong: rgba(236, 238, 242, 0.2);
    --text: #f5f6f8;
    --muted: rgba(245, 246, 248, 0.7);
    --dim: rgba(245, 246, 248, 0.44);
    --orange: #ff7133;
    --orange-soft: rgba(255, 107, 26, 0.14);
    --green: #32d583;
    --green-soft: rgba(50, 213, 131, 0.14);
    --blue: #55a7ff;
    --blue-soft: rgba(85, 167, 255, 0.15);
    --pink: #f970c8;
    --pink-soft: rgba(249, 112, 200, 0.14);
    --yellow: #f5c451;
    --red: #f85b5b;
    --board: #0d1512;
    --header-h: 66px;
    --radius: 8px;
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    width: 100%;
    min-width: 300px;
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    letter-spacing: 0;
}

body {
    overflow: hidden;
}

button,
input,
select {
    font: inherit;
    letter-spacing: 0;
}

button,
input[type="range"] {
    accent-color: var(--orange);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.board:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

button {
    color: inherit;
}

.app-header {
    height: var(--header-h);
    padding: 0 18px;
    display: grid;
    grid-template-columns: auto minmax(220px, 380px) 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    background: #0d0f13;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.brand img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 12px rgba(255, 107, 26, 0.28));
}

.brand span {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand strong {
    font-size: 1rem;
}

.brand small {
    margin-top: 4px;
    color: var(--orange);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.project-name span {
    color: var(--dim);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-name input {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 700;
}

.project-name input:hover,
.project-name input:focus {
    border-color: var(--line-strong);
}

.header-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.private-badge {
    height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(85, 167, 255, 0.28);
    border-radius: 6px;
    background: var(--blue-soft);
    color: #98caff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.private-badge svg {
    width: 13px;
    height: 13px;
}

.save-state {
    color: var(--dim);
    font-size: 0.72rem;
}

.header-actions,
.simulation-control,
.mode-control,
.speed-control,
.zoom-control {
    display: flex;
    align-items: center;
}

.header-actions {
    gap: 5px;
}

.icon-button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    cursor: pointer;
}

.icon-button:hover:not(:disabled) {
    border-color: rgba(255, 107, 26, 0.48);
    color: var(--orange);
    background: var(--orange-soft);
}

.icon-button:disabled {
    opacity: 0.3;
    cursor: default;
}

.icon-button svg {
    width: 17px;
    height: 17px;
}

.account-button {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.account-button:hover {
    border-color: rgba(85, 167, 255, 0.48);
    background: var(--blue-soft);
    color: #acd4ff;
}

.account-button svg {
    width: 17px;
    height: 17px;
}

#share-button.is-active {
    border-color: rgba(50, 213, 131, 0.42);
    background: var(--green-soft);
    color: var(--green);
}

.workspace {
    height: calc(100dvh - var(--header-h));
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr) 304px;
    overflow: hidden;
}

.tool-panel,
.inspector-panel {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(245, 246, 248, 0.22) transparent;
    scrollbar-width: thin;
    background: var(--panel);
}

.tool-panel::-webkit-scrollbar,
.inspector-panel::-webkit-scrollbar {
    width: 7px;
}

.tool-panel::-webkit-scrollbar-thumb,
.inspector-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 7px;
    background: rgba(245, 246, 248, 0.22);
    background-clip: padding-box;
}

.tool-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
}

.inspector-panel {
    border-left: 1px solid var(--line);
}

.inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 14px 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #111318;
    box-shadow: 0 8px 18px rgba(9, 10, 13, 0.34);
}

.inspector-tabs button {
    height: 31px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.inspector-tabs button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.panel-heading {
    padding: 19px 16px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-heading h2,
.timeline-heading h2 {
    margin: 3px 0 0;
    font-size: 1.04rem;
    line-height: 1.2;
}

.panel-kicker {
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mobile-close {
    display: none;
}

.tool-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #111318;
    box-shadow: 0 8px 18px rgba(9, 10, 13, 0.34);
}

.tool-tab {
    min-width: 0;
    min-height: 34px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.tool-tab.is-active {
    background: var(--panel-raised);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.tool-tab-panel {
    display: none;
    padding: 15px 14px;
}

.tool-tab-panel.is-active {
    display: block;
}

.tool-section-label {
    margin: 0 0 8px;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tool-section-label:not(:first-child) {
    margin-top: 20px;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.tool-button {
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.tool-button > span {
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tool-button:hover {
    border-color: rgba(255, 107, 26, 0.5);
    background: var(--orange-soft);
    color: var(--orange);
}

.tool-button:active,
.yard-starter-grid button:active,
.wide-command:active:not(:disabled) {
    transform: translateY(1px);
}

.tool-button.scare:hover {
    border-color: rgba(249, 112, 200, 0.5);
    background: var(--pink-soft);
    color: var(--pink);
}

.tool-button.effect:hover {
    border-color: rgba(85, 167, 255, 0.5);
    background: var(--blue-soft);
    color: var(--blue);
}

.tool-button svg {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    padding: 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: #c7cbd2;
}

.tool-button.scare svg {
    background: var(--pink-soft);
    color: var(--pink);
}

.tool-button.effect svg {
    background: var(--blue-soft);
    color: var(--blue);
}

.tool-button.frightlink:hover {
    border-color: rgba(50, 213, 131, 0.5);
    background: var(--green-soft);
    color: var(--green);
}

.tool-button.frightlink svg {
    background: var(--green-soft);
    color: var(--green);
}

.tool-button.frightlink > span {
    min-width: 0;
    line-height: 1.08;
}

.frightlink-product-status {
    display: block;
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.54rem;
    font-weight: 700;
}

.tool-button.property:hover {
    border-color: rgba(79, 154, 102, 0.58);
    background: rgba(79, 154, 102, 0.12);
    color: #85d39d;
}

.tool-button.property svg {
    background: rgba(79, 154, 102, 0.12);
    color: #85d39d;
}

.frightlink-toggle {
    margin-top: 14px;
}

.frightlink-summary {
    margin-top: 14px;
}

.frightlink-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.frightlink-metrics > div {
    min-height: 58px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(50, 213, 131, 0.045);
}

.frightlink-metrics span,
.frightlink-device small {
    color: var(--dim);
    font-size: 0.56rem;
    text-transform: uppercase;
}

.frightlink-metrics strong {
    margin-top: 2px;
    color: #8ff0bc;
    font-size: 1rem;
}

.frightlink-devices {
    margin-top: 8px;
    border-top: 1px solid var(--line);
}

.frightlink-device {
    min-height: 39px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.frightlink-device i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dim);
}

.frightlink-device.is-online i { background: var(--green); box-shadow: 0 0 8px rgba(50, 213, 131, 0.5); }
.frightlink-device.is-attention i { background: var(--yellow); }
.frightlink-device strong { overflow: hidden; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.frightlink-device small { white-space: nowrap; }

.frightlink-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--dim);
    font-size: 0.64rem;
    text-align: center;
}

.plan-mode-control {
    margin-bottom: 14px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.plan-mode-control button {
    min-height: 34px;
    padding: 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.57rem;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
}

.plan-mode-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.yard-starter-grid {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.yard-starter-grid button {
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    display: grid;
    overflow: hidden;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(79, 154, 102, 0.25);
    border-radius: 7px;
    background: rgba(79, 154, 102, 0.07);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.yard-starter-grid button > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.yard-starter-grid button:hover,
.yard-starter-grid button.is-active {
    border-color: rgba(79, 154, 102, 0.58);
    background: rgba(79, 154, 102, 0.14);
    color: #9de1b0;
}

.yard-starter-grid button.is-active {
    box-shadow: inset 0 0 0 1px rgba(116, 201, 140, 0.28);
}

.yard-starter-grid svg {
    width: 20px;
    height: 20px;
    color: #74c98c;
}

.property-tool-grid {
    margin-bottom: 14px;
}

.yard-edit-command {
    margin: -6px 0 6px;
}

.yard-remove-command {
    margin: 0 0 14px;
}

.yard-edit-command[hidden],
.yard-remove-command[hidden] {
    display: none;
}

.tool-footer {
    position: sticky;
    bottom: 0;
    z-index: 13;
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: #111318;
    box-shadow: 0 -10px 22px rgba(9, 10, 13, 0.42);
}

.onboarding-tip {
    position: fixed;
    top: calc(var(--header-h) + 68px);
    left: 260px;
    z-index: 80;
    width: min(326px, calc(100vw - 24px));
    padding: 16px;
    border: 1px solid rgba(255, 107, 26, 0.5);
    border-radius: 8px;
    background: #17191f;
    color: var(--text);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.58);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.onboarding-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 54px;
    width: 12px;
    height: 12px;
    border: solid rgba(255, 107, 26, 0.5);
    border-width: 1px 0 0 1px;
    background: #17191f;
    transform: rotate(45deg);
}

.onboarding-tip[hidden] {
    display: none;
}

.onboarding-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.onboarding-close {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.onboarding-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.onboarding-close svg {
    width: 16px;
    height: 16px;
}

.onboarding-heading {
    padding-right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-heading > svg {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
}

.onboarding-heading span {
    display: block;
    color: var(--orange);
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.onboarding-heading h2 {
    margin: 3px 0 0;
    font-size: 0.93rem;
    line-height: 1.2;
}

.onboarding-steps {
    margin: 15px 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.onboarding-steps li {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.onboarding-steps b {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(85, 167, 255, 0.12);
    color: var(--blue);
    font-size: 0.65rem;
}

.onboarding-steps li:nth-child(2) b {
    background: rgba(249, 112, 200, 0.12);
    color: var(--pink);
}

.onboarding-steps li:nth-child(3) b {
    background: rgba(50, 213, 131, 0.12);
    color: var(--green);
}

.onboarding-start {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--orange);
    border-radius: 7px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.onboarding-start svg {
    width: 16px;
    height: 16px;
}

/* Secondary entry into the step-by-step setup wizard. New selector only -
   the original popover and its "Start drawing" button are untouched. */
.onboarding-secondary {
    width: 100%;
    min-height: 34px;
    margin-top: 7px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 107, 26, 0.45);
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.onboarding-secondary svg {
    width: 15px;
    height: 15px;
}

.wide-command {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.wide-command > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.wide-command:hover,
.wide-command.is-active {
    border-color: rgba(255, 107, 26, 0.55);
    background: var(--orange-soft);
    color: var(--orange);
}

.wide-command svg {
    width: 16px;
    height: 16px;
}

.wide-command:disabled {
    opacity: 0.38;
    cursor: default;
}

.danger-command:not(:disabled) {
    border-color: rgba(248, 91, 91, 0.24);
    color: #ff9a9a;
}

.toggle-row {
    min-height: 43px;
    margin-bottom: 9px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.toggle-row > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.toggle-row svg {
    width: 15px;
    height: 15px;
    color: var(--orange);
}

.toggle-row input {
    width: 34px;
    height: 18px;
}

.flow-marker-grid {
    margin-bottom: 18px;
}

.branch-empty {
    margin: 0;
    padding: 11px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    color: var(--dim);
    font-size: 0.66rem;
    text-align: center;
}

.branch-item {
    margin-bottom: 7px;
    padding: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(85, 167, 255, 0.045);
}

.branch-item > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.branch-item > div > svg {
    width: 16px;
    color: var(--blue);
}

.branch-item strong,
.branch-item small {
    display: block;
}

.branch-item strong {
    overflow: hidden;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-item small,
.branch-item label span {
    color: var(--dim);
    font-size: 0.6rem;
}

.branch-delete {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.branch-delete:hover {
    background: rgba(248, 91, 91, 0.12);
    color: var(--red);
}

.branch-delete svg {
    width: 14px;
}

.branch-item label {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px 8px;
}

.branch-item label output {
    color: var(--blue);
    font-size: 0.64rem;
    font-weight: 800;
}

.branch-item label input {
    grid-column: 1 / -1;
}

.site-upload {
    width: 100%;
    min-height: 66px;
    margin-bottom: 20px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px dashed rgba(85, 167, 255, 0.42);
    border-radius: 7px;
    background: var(--blue-soft);
    color: #b9dcff;
    text-align: left;
    cursor: pointer;
}

.site-upload > svg {
    width: 24px;
    height: 24px;
}

.site-upload span,
.site-upload strong,
.site-upload small {
    min-width: 0;
    display: block;
}

.site-upload strong {
    max-width: 150px;
    overflow: hidden;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-upload small {
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.61rem;
}

.site-distance-field input[type="number"] {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
}

.scale-readout {
    margin: 9px 0 17px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-left: 2px solid var(--green);
    background: rgba(50, 213, 131, 0.06);
}

.scale-readout span {
    color: var(--dim);
    font-size: 0.62rem;
}

.scale-readout strong {
    color: var(--green);
    font-size: 0.62rem;
    text-align: right;
}

.control-group {
    margin-bottom: 22px;
}

.control-label {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.73rem;
    font-weight: 700;
}

.control-label output {
    color: var(--orange);
    font-size: 0.68rem;
}

input[type="range"] {
    width: 100%;
    height: 4px;
}

.stage-shell {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 54px minmax(280px, 1fr) 38px 134px;
    background: #0e1014;
    overflow: hidden;
}

.stage-toolbar {
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(18, 20, 25, 0.97);
}

.mode-control,
.speed-control,
.zoom-control {
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.zoom-control {
    gap: 2px;
}

.zoom-control .icon-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
}

.zoom-readout {
    width: 52px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
    cursor: pointer;
}

.zoom-readout:hover {
    background: var(--panel-raised);
    color: var(--text);
}

.mode-button {
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.mode-button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.mode-button svg {
    width: 14px;
    height: 14px;
}

.simulation-control {
    gap: 7px;
}

.play-button {
    height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--orange);
    border-radius: 7px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
}

.play-button.is-running {
    border-color: var(--green);
    background: var(--green);
    color: #04170e;
}

.play-button svg {
    width: 16px;
    height: 16px;
}

.speed-control button {
    min-width: 34px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dim);
    font-size: 0.69rem;
    font-weight: 800;
    cursor: pointer;
}

.speed-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.canvas-wrap {
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        #0b0d11;
    background-size: 32px 32px, 32px 32px, auto;
    scrollbar-color: rgba(255, 113, 51, 0.38) rgba(255, 255, 255, 0.03);
}

.canvas-stage {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.board {
    position: absolute;
    width: min(100%, calc((100dvh - var(--header-h) - 246px) * 1.4286));
    max-width: 1000px;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border: 1px solid rgba(156, 181, 169, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px),
        linear-gradient(120deg, #102019, #17151d 62%, #211711);
    background-size: 5% 7.142%, 5% 7.142%, auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32), 0 20px 48px rgba(0, 0, 0, 0.42);
    touch-action: none;
    transform-origin: 0 0;
    user-select: none;
}

.board.is-route-mode {
    cursor: crosshair;
}

.board.is-route-mode[data-route-tool="freehand"] { cursor: crosshair; }
.board.is-route-mode[data-route-tool="circle"],
.board.is-route-mode[data-route-tool="rectangle"] { cursor: nwse-resize; }
.board.is-calibration-mode { cursor: cell; }

.site-plan-image,
.property-layer,
.board-route,
.frightlink-network-layer,
.heatmap-layer,
.coverage-layer,
.entity-layer,
.route-point-layer,
.calibration-layer,
.guest-layer,
.effect-wash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-plan-image {
    z-index: 0;
    object-fit: fill;
    filter: saturate(0.78) contrast(1.08);
    pointer-events: none;
}

.property-layer {
    z-index: 0;
    pointer-events: none;
}

.board-route {
    z-index: 1;
    pointer-events: none;
}

.frightlink-network-layer {
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

.frightlink-network-layer .hub-range {
    fill: rgba(50, 213, 131, 0.035);
    stroke: rgba(50, 213, 131, 0.24);
    stroke-width: 2;
    stroke-dasharray: 12 10;
}

.frightlink-network-layer .network-link {
    fill: none;
    stroke: rgba(85, 167, 255, 0.62);
    stroke-width: 3;
    stroke-dasharray: 8 7;
    vector-effect: non-scaling-stroke;
}

.frightlink-network-layer .network-link.is-online { stroke: rgba(50, 213, 131, 0.76); }
.frightlink-network-layer .network-link.is-attention { stroke: rgba(245, 196, 81, 0.82); }

#route-shadow,
#route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.branch-shadow,
.branch-line,
#route-preview {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.branch-shadow {
    stroke: rgba(0, 0, 0, 0.72);
    stroke-width: 22;
}

.branch-line {
    stroke: rgba(85, 167, 255, 0.9);
    stroke-width: 6;
    stroke-dasharray: 10 8;
}

#route-preview {
    stroke: var(--orange);
    stroke-width: 6;
    stroke-dasharray: 8 7;
    filter: drop-shadow(0 0 5px rgba(255, 113, 51, 0.72));
}

#route-shadow {
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: var(--route-stroke, 24);
}

#route-line {
    stroke: rgba(255, 211, 104, 0.92);
    stroke-width: 7;
    stroke-dasharray: 15 10;
}

#route-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 42;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
    cursor: pointer;
}

.board.is-route-mode[data-route-tool="point"] #route-hit,
.board.is-route-mode[data-route-tool="branch"] #route-hit,
.board.is-route-mode[data-route-tool="arc"] #route-hit {
    pointer-events: stroke;
    cursor: copy;
}

.heatmap-layer {
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.heat-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(38px + (var(--heat) * 48px));
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, rgb(248, 91, 91) calc(var(--heat) * 100%), rgb(245, 196, 81));
    filter: blur(14px);
    opacity: calc(0.16 + (var(--heat) * 0.32));
    transform: translate(-50%, -50%);
}

.calibration-layer {
    z-index: 8;
    pointer-events: none;
}

.calibration-layer svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.calibration-layer line {
    stroke: var(--green);
    stroke-width: 4;
    stroke-dasharray: 10 7;
}

.calibration-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 2px solid #092516;
    border-radius: 50%;
    background: var(--green);
    color: #092516;
    box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.25);
    font-size: 0.62rem;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.coverage-layer {
    z-index: 2;
    pointer-events: none;
}

.entity-layer {
    z-index: 4;
    pointer-events: none;
}

.route-point-layer {
    z-index: 5;
    pointer-events: none;
}

.guest-layer {
    z-index: 6;
    pointer-events: none;
}

.effect-wash {
    z-index: 7;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.18);
    transition: opacity 180ms ease;
}

.effect-wash.is-active {
    opacity: 1;
}

.coverage-zone {
    position: absolute;
    width: calc(var(--range) * 2%);
    aspect-ratio: 1;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    transform: translate(-50%, -50%);
    border: 1px dashed color-mix(in srgb, var(--entity-color) 42%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--entity-color) 5%, transparent);
    opacity: 0.22;
    transition: opacity 160ms ease, background 160ms ease;
}

.coverage-zone.is-selected {
    background: color-mix(in srgb, var(--entity-color) 10%, transparent);
    opacity: 0.9;
}

.plan-entity {
    --entity-color: var(--orange);
    --entity-scale: 1;
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--entity-color) 78%, white);
    border-radius: 50%;
    background: color-mix(in srgb, var(--entity-color) 28%, #111015);
    color: var(--text);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) rotate(calc(var(--angle) * 1deg)) scale(var(--entity-scale));
    cursor: grab;
    pointer-events: auto;
}

.plan-entity:hover,
.plan-entity.is-selected {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--entity-color) 20%, transparent), 0 8px 20px rgba(0, 0, 0, 0.48);
}

.plan-entity.is-active {
    animation: entity-pulse 650ms ease-out;
}

@keyframes entity-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--entity-color) 72%, transparent); }
    100% { box-shadow: 0 0 0 20px transparent; }
}

.plan-entity svg {
    width: 17px;
    height: 17px;
    transform: rotate(calc(var(--angle) * -1deg));
}

.plan-entity.has-custom-image {
    width: 84px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.plan-entity.has-custom-image:hover,
.plan-entity.has-custom-image.is-selected {
    box-shadow: none;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--entity-color) 62%, transparent));
}

.entity-custom-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.55));
}

.plan-entity[data-type="wall"],
.plan-entity[data-type="queue"] {
    width: 92px;
    height: 24px;
    border-radius: 5px;
}

.plan-entity[data-type="wall"] {
    --entity-color: #a29baa;
    background: repeating-linear-gradient(90deg, #39343e 0 12px, #26222b 12px 24px);
}

.plan-entity[data-type="queue"] {
    --entity-color: var(--yellow);
    border-style: dashed;
    background: rgba(245, 196, 81, 0.1);
}

.plan-entity[data-type="tree"] { --entity-color: var(--green); }
.plan-entity[data-type="door"] { --entity-color: #c89b6d; }
.plan-entity[data-type="exit"] { --entity-color: var(--green); }
.plan-entity[data-type="emergency"] { --entity-color: #ff8b5f; }
.plan-entity[data-type="bottleneck"] { --entity-color: var(--yellow); }
.plan-entity[data-type="power"] { --entity-color: var(--yellow); }
.plan-entity[data-type="camera"] { --entity-color: var(--blue); }
.plan-entity[data-type="staff"] { --entity-color: #a58bff; }
.plan-entity[data-type="jump"] { --entity-color: var(--red); }
.plan-entity[data-type="actor"] { --entity-color: var(--pink); }
.plan-entity[data-type="prop"] { --entity-color: var(--orange); }
.plan-entity[data-type="sensor"] { --entity-color: var(--green); }
.plan-entity[data-type="strobe"] { --entity-color: #f7f5ff; }
.plan-entity[data-type="speaker"] { --entity-color: var(--blue); }
.plan-entity[data-type="fog"] { --entity-color: #92a4b8; }
.plan-entity[data-type="light"] { --entity-color: var(--yellow); }
.plan-entity[data-type="frightHub"] { --entity-color: #32d583; width: 46px; height: 46px; border-radius: 7px; }
.plan-entity[data-type="frightMotion"] { --entity-color: #55a7ff; }
.plan-entity[data-type="frightPressure"] { --entity-color: #f970c8; }
.plan-entity[data-type="frightRelay"] { --entity-color: #f5c451; border-radius: 7px; }

.entity-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    min-width: max-content;
    max-width: 130px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 4px;
    background: rgba(9, 10, 13, 0.93);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    transform: translateX(-50%) rotate(calc(var(--angle) * -1deg));
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, top 140ms ease;
}

.plan-entity:hover .entity-label,
.plan-entity:focus-visible .entity-label,
.plan-entity.is-selected .entity-label,
.plan-entity[data-type="queue"] .entity-label,
.plan-entity[data-type="exit"] .entity-label {
    top: calc(100% + 9px);
    opacity: 1;
}

.plan-entity.is-property {
    width: calc(var(--entity-width) * 1%);
    height: calc(var(--entity-height) * 1%);
    min-width: 36px;
    min-height: 18px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.plan-entity.is-property svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    opacity: 0.74;
}

.plan-entity.is-property .entity-label,
.plan-entity.is-property:hover .entity-label,
.plan-entity.is-property:focus-visible .entity-label,
.plan-entity.is-property.is-selected .entity-label {
    position: static;
    min-width: 0;
    max-width: calc(100% - 20px);
    padding: 2px 5px;
    border: 0;
    background: rgba(8, 10, 12, 0.48);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.58rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: rotate(calc(var(--angle) * -1deg));
    opacity: 1;
}

.plan-entity[data-type="street"] {
    border-color: rgba(187, 196, 205, 0.38);
    background: #343941;
}

.plan-entity[data-type="street"]::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(245, 196, 81, 0.72) 0 24px, transparent 24px 42px);
    transform: translateY(-50%);
    pointer-events: none;
}

.plan-entity[data-type="street"] > * {
    position: relative;
    z-index: 1;
}

.plan-entity[data-type="sidewalk"] {
    border-color: rgba(224, 222, 216, 0.5);
    background: repeating-linear-gradient(90deg, #7d7e7d 0 38px, #a0a09d 39px 40px);
}

.plan-entity[data-type="lawn"] {
    border-color: rgba(117, 193, 136, 0.44);
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        #234a31;
    background-size: 18px 18px, 18px 18px, auto;
}

.plan-entity[data-type="walkway"] {
    border-color: rgba(224, 218, 204, 0.5);
    background: repeating-linear-gradient(0deg, #87857f 0 25px, #aaa69d 26px 28px);
}

.plan-entity[data-type="driveway"] {
    border-color: rgba(192, 199, 204, 0.4);
    background: linear-gradient(90deg, #545a60, #656c72 50%, #545a60);
}

.plan-entity[data-type="house"] {
    border-color: rgba(222, 159, 148, 0.48);
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
        #553638;
}

.plan-entity[data-type="porch"] {
    border-color: rgba(211, 172, 128, 0.5);
    background: repeating-linear-gradient(90deg, #604b39 0 12px, #765c43 12px 14px);
}

.route-point {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 2px solid #211b0d;
    border-radius: 50%;
    background: var(--yellow);
    color: #211b0d;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: grab;
    font-size: 0.5rem;
    font-weight: 900;
}

.route-point span {
    pointer-events: none;
}

.route-point::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}

.route-point.is-selected {
    box-shadow: 0 0 0 4px rgba(255, 113, 51, 0.34), 0 0 0 7px rgba(0, 0, 0, 0.5), 0 5px 12px rgba(0, 0, 0, 0.55);
}

.route-point.is-endpoint {
    width: 25px;
    height: 25px;
    border-color: #0d271b;
    background: var(--green);
    color: #052013;
}

.board:not(.is-route-mode) .route-point {
    display: none;
}

.route-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9;
    min-height: 38px;
    padding: 4px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: rgba(13, 15, 19, 0.94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.route-tool-strip,
.route-command-strip {
    display: flex;
    align-items: center;
    gap: 4px;
}

.route-tool-strip {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.route-command-strip {
    justify-content: flex-end;
}

.board.is-route-mode .route-actions {
    display: flex;
}

.route-count {
    min-width: 86px;
    padding: 0 8px;
    color: var(--dim);
    font-size: 0.63rem;
    font-weight: 700;
    white-space: nowrap;
}

.route-count strong {
    color: var(--text);
    font-size: 0.72rem;
}

.route-action-button,
.route-done-button {
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.route-action-button {
    width: 29px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--muted);
}

.route-action-button:hover:not(:disabled) {
    background: var(--orange-soft);
    color: var(--orange);
}

.route-action-button.is-active {
    background: var(--orange);
    color: #1b0900;
}

.route-action-button:disabled {
    color: var(--dim);
    opacity: 0.38;
    cursor: default;
}

.route-action-button svg,
.route-done-button svg {
    width: 15px;
    height: 15px;
}

.route-done-button {
    padding: 0 9px;
    gap: 5px;
    background: var(--orange);
    color: #1b0900;
    font-size: 0.64rem;
    font-weight: 900;
}

.heatmap-legend {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 9;
    padding: 6px 8px;
    display: none;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: rgba(13, 15, 19, 0.9);
    color: var(--dim);
    font-size: 0.56rem;
    font-weight: 700;
    pointer-events: none;
}

.heatmap-legend.is-visible {
    display: flex;
}

.heatmap-legend i {
    width: 58px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
}

.guest {
    --guest-color: #f7f5ff;
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 11px;
    height: 11px;
    border: 2px solid #08070a;
    border-radius: 50%;
    background: var(--guest-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--guest-color) 35%, transparent), 0 3px 8px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%);
}

.guest.is-lead {
    width: 14px;
    height: 14px;
    background: var(--orange);
}

.board-label,
.board-scale {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    pointer-events: none;
}

.board-label svg {
    width: 13px;
    height: 13px;
}

.board-label--entry {
    left: 12px;
    bottom: 12px;
}

.board-scale {
    right: 12px;
    bottom: 12px;
}

.board-scale span {
    width: 48px;
    height: 5px;
    border: solid rgba(255, 255, 255, 0.46);
    border-width: 0 1px 1px;
}

.stage-status {
    min-width: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    color: var(--dim);
    font-size: 0.7rem;
}

.stage-status span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.stage-status svg {
    width: 13px;
    height: 13px;
}

.stage-status strong {
    color: var(--muted);
}

.stage-status .status-mode {
    margin-left: auto;
    color: var(--orange);
    font-weight: 800;
}

.timeline {
    min-width: 0;
    padding: 12px 16px 13px;
    overflow: hidden;
    background: #0e1014;
}

.timeline-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.timeline-now {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--orange);
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-now i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 10px rgba(255, 107, 26, 0.6);
}

.timeline-track {
    position: relative;
    height: 86px;
    margin-top: 9px;
    border-top: 1px solid var(--line-strong);
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.045) calc(10% - 1px) 10%);
}

.timeline-track::before,
.timeline-track::after {
    position: absolute;
    top: -20px;
    color: var(--dim);
    font-size: 0.6rem;
}

.timeline-track::before {
    content: "ENTRY";
    left: 0;
}

.timeline-track::after {
    content: "EXIT";
    right: 0;
}

.timeline-event {
    --event-color: var(--orange);
    position: absolute;
    left: calc(var(--progress) * 1%);
    top: calc(5px + (var(--row) * 18px));
    width: 2px;
    height: 16px;
    background: color-mix(in srgb, var(--event-color) 48%, transparent);
}

.timeline-event::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--event-color);
    box-shadow: 0 0 9px color-mix(in srgb, var(--event-color) 55%, transparent);
}

.timeline-event span {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 88px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
}

.timeline-event.edge-end span {
    right: 7px;
    left: auto;
    text-align: right;
}

.timeline-playhead-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--progress) * 1%);
    z-index: 4;
    width: 1px;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255, 107, 26, 0.5);
    pointer-events: none;
}

.analysis-grid {
    padding: 0 14px 17px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.metric {
    min-height: 88px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 2px 0 rgba(255, 113, 51, 0.2);
}

.metric span,
.metric small {
    color: var(--dim);
    font-size: 0.64rem;
}

.metric strong {
    margin: 3px 0 1px;
    color: var(--text);
    font-size: 1.42rem;
    line-height: 1;
}

.analysis-section {
    padding: 16px 14px;
    border-top: 1px solid var(--line);
}

.analysis-section h3 {
    margin: 0;
    font-size: 0.82rem;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.live-indicator {
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--dim);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.live-indicator.is-live {
    border-color: rgba(50, 213, 131, 0.36);
    background: var(--green-soft);
    color: var(--green);
}

.live-stats {
    margin: 12px 0 0;
}

.live-stats div {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.live-stats dt {
    color: var(--dim);
    font-size: 0.69rem;
}

.live-stats dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.71rem;
    font-weight: 800;
    text-align: right;
}

.check-list,
.event-log {
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding: 7px 0 7px 21px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
}

.check-list li.is-warning::before {
    background: var(--yellow);
}

.check-list li.is-danger::before {
    background: var(--red);
}

.event-section {
    min-height: 160px;
}

.text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dim);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
}

.text-button:hover {
    color: var(--orange);
}

.event-log li {
    padding: 7px 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--muted);
    font-size: 0.66rem;
}

.event-log time {
    color: var(--orange);
    font-weight: 800;
}

.event-log .empty-log {
    display: block;
    color: var(--dim);
}

.forecast-panel {
    padding-bottom: 22px;
}

.forecast-scenario-bar {
    padding: 0 14px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    align-items: end;
    gap: 6px;
}

.forecast-scenario-bar label > span,
.forecast-field-grid label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.forecast-scenario-bar select,
.forecast-field-grid input,
.forecast-field-grid select {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font-size: 0.72rem;
}

.forecast-section {
    padding: 15px 14px;
    border-top: 1px solid var(--line);
}

.forecast-section h3 {
    margin: 0 0 13px;
    font-size: 0.78rem;
}

.forecast-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 8px;
}

.capacity-mode-control {
    margin-top: 15px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
}

.capacity-mode-control button {
    height: 30px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

.capacity-mode-control button.is-active {
    background: var(--panel-raised);
    color: var(--text);
}

.manual-capacity-fields {
    margin-top: 12px;
}

.operational-limit-fields {
    margin-top: 12px;
}

.capacity-source-row {
    min-height: 35px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.capacity-source-row p {
    margin: 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.35;
}

.capacity-source-row button {
    min-width: max-content;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 800;
    cursor: pointer;
}

.capacity-source-row button:hover {
    border-color: rgba(255, 113, 51, 0.46);
    color: var(--orange);
}

.capacity-source-row button svg {
    width: 13px;
    height: 13px;
}

.forecast-slider {
    margin-top: 17px;
    display: block;
}

.forecast-slider > span {
    margin-bottom: 9px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.67rem;
}

.forecast-slider output {
    color: var(--orange);
    font-weight: 800;
}

.capacity-grid {
    padding: 0 14px 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.capacity-grid > div {
    min-height: 79px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.capacity-grid span,
.capacity-grid small {
    color: var(--dim);
    font-size: 0.59rem;
}

.capacity-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.capacity-title button {
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--dim);
    cursor: pointer;
}

.capacity-title button:hover {
    border-color: rgba(255, 113, 51, 0.48);
    color: var(--orange);
}

.capacity-title button svg {
    width: 12px;
    height: 12px;
}

.capacity-grid strong {
    margin: 3px 0 1px;
    color: #a9d3ff;
    font-size: 1.25rem;
    line-height: 1;
}

.money-input,
.percent-input {
    position: relative;
}

.money-input i,
.percent-input i {
    position: absolute;
    top: 50%;
    color: var(--dim);
    font-size: 0.68rem;
    font-style: normal;
    transform: translateY(-50%);
    pointer-events: none;
}

.money-input i { left: 9px; }
.percent-input i { right: 9px; }
.money-input input { padding-left: 20px; }
.percent-input input { padding-right: 20px; }

.finance-summary {
    margin: 0 14px;
    padding: 4px 12px 10px;
    border-left: 2px solid var(--green);
    background: rgba(50, 213, 131, 0.055);
}

.finance-summary > div {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.finance-summary span {
    color: var(--dim);
    font-size: 0.65rem;
}

.finance-summary strong {
    font-size: 0.72rem;
}

.finance-summary .finance-total {
    min-height: 45px;
    border-bottom: 0;
}

.finance-total strong {
    color: var(--green);
    font-size: 1rem;
}

.finance-total strong.is-negative {
    color: var(--red);
}

.finance-summary p {
    margin: 5px 0 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.4;
}

.forecast-disclaimer {
    margin: 14px 14px 0;
    color: var(--dim);
    font-size: 0.59rem;
    line-height: 1.45;
}

.editor-form {
    padding: 0 14px 16px;
}

.editor-preview {
    min-height: 78px;
    margin-bottom: 15px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.editor-preview-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--orange-soft);
    color: var(--orange);
}

.editor-preview-icon svg {
    width: 18px;
    height: 18px;
}

.editor-preview-image {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.editor-preview-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.45));
}

.editor-preview strong {
    display: block;
    font-size: 0.84rem;
}

.editor-preview small {
    color: var(--dim);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.field {
    margin-bottom: 14px;
}

.field > span,
.field-row label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.field > .control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.field > .control-label > span {
    color: var(--dim);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.field > .control-label output {
    flex: 0 0 auto;
    color: var(--orange);
    font-size: 0.7rem;
    font-weight: 800;
}

.field input[type="text"],
.field select,
.field-row input {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--text);
    font-size: 0.76rem;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.field .control-label {
    margin-bottom: 8px;
}

.editor-actions {
    padding-top: 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--line);
}

.editor-actions button {
    min-height: 36px;
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.editor-actions .delete-button {
    border-color: rgba(248, 91, 91, 0.28);
    color: var(--red);
}

.prop-media-group {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(249, 112, 200, 0.24);
    border-radius: 7px;
    background: rgba(249, 112, 200, 0.035);
}

.prop-media-group .tool-section-label {
    color: #f4a7d8;
}

.prop-media-preview {
    height: 126px;
    margin-bottom: 9px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
}

.prop-media-preview img {
    max-width: 94%;
    max-height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.48));
}

.prop-media-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap: 6px;
}

.prop-media-actions button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    cursor: pointer;
}

.prop-media-actions button:hover {
    border-color: rgba(249, 112, 200, 0.48);
    color: #f4a7d8;
}

.prop-media-actions button svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.prop-media-actions .delete-button {
    border-color: rgba(248, 91, 91, 0.25);
    color: #ff9a9a;
}

.system-field-group {
    padding: 12px;
    border: 1px solid rgba(50, 213, 131, 0.22);
    border-radius: 7px;
    background: rgba(50, 213, 131, 0.035);
}

.system-field-group .tool-section-label {
    color: #8be8b5;
}

.system-field-group .field:last-child {
    margin-bottom: 0;
}

.app-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: min(720px, calc(100dvh - 36px));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #15171c;
    color: var(--text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}

.app-dialog::backdrop {
    background: rgba(3, 4, 6, 0.76);
    backdrop-filter: blur(5px);
}

.auth-dialog {
    width: min(430px, calc(100vw - 28px));
}

.promo-dialog {
    width: min(960px, calc(100vw - 28px));
    overflow: hidden;
}

.promo-media {
    background: #08090c;
}

.promo-media video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #050609;
}

.promo-downloads {
    min-height: 56px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--line);
    background: #15171c;
}

.promo-downloads a {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
}

.promo-downloads a:hover {
    border-color: rgba(255, 113, 51, 0.48);
    background: var(--orange-soft);
    color: var(--orange);
}

.promo-downloads svg {
    width: 15px;
    height: 15px;
}

.dialog-heading {
    min-height: 76px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
}

.dialog-heading h2 {
    margin: 3px 0 0;
    font-size: 1rem;
}

#signed-out-auth,
.account-summary,
.share-state,
.shared-plan-actions {
    padding: 18px 16px;
}

.google-signin,
.share-primary {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(85, 167, 255, 0.36);
    border-radius: 7px;
    background: var(--blue-soft);
    color: #b9dcff;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.google-signin svg,
.share-primary svg {
    width: 17px;
}

.dialog-divider {
    position: relative;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--dim);
    font-size: 0.6rem;
}

.dialog-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line);
}

.dialog-divider span {
    position: relative;
    padding: 0 8px;
    background: #15171c;
}

.dialog-field {
    margin-bottom: 12px;
    display: block;
}

.dialog-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dialog-field input,
.share-link-row input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font-size: 0.75rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.dialog-actions button,
.account-summary > button,
.plans-toolbar button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.dialog-actions button.primary {
    border-color: var(--orange);
    background: var(--orange);
    color: #1b0900;
}

.dialog-error {
    min-height: 17px;
    margin: 10px 0 0;
    color: #ff9a9a;
    font-size: 0.65rem;
}

.account-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.account-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
}

.account-avatar svg { width: 22px; }
.account-summary strong,
.account-summary small { display: block; }
.account-summary strong { font-size: 0.76rem; }
.account-summary small { margin-top: 3px; color: var(--dim); font-size: 0.63rem; }

.plans-toolbar {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--line);
}

.plans-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plans-toolbar button:disabled {
    opacity: 0.35;
    cursor: default;
}

.plans-toolbar svg { width: 14px; }

.plans-list {
    min-height: 110px;
    padding: 10px 16px;
}

.plan-list-item {
    min-height: 58px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.plan-list-item.is-active {
    border-color: rgba(50, 213, 131, 0.34);
    background: var(--green-soft);
}

.plan-list-item > div,
.plan-open {
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.plan-open {
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.plan-list-item > div > svg,
.plan-open > svg {
    width: 17px;
    flex: 0 0 auto;
    color: var(--green);
}

.plan-list-item strong,
.plan-list-item small {
    display: block;
}

.plan-list-item strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-list-item small {
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.6rem;
}

.plan-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
}

.plan-icon:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.plan-icon.delete-plan:hover { background: rgba(248, 91, 91, 0.12); color: var(--red); }
.plan-icon svg { width: 14px; }

.plans-signed-out,
.empty-plans {
    margin: 0;
    padding: 10px 16px 16px;
    color: var(--dim);
    font-size: 0.65rem;
    line-height: 1.45;
}

.share-state > p,
.shared-plan-actions > p {
    margin: 0 0 15px;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.share-link-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
}

.revoke-share {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ff9a9a;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: pointer;
}

.shared-readonly .private-badge {
    border-color: rgba(50, 213, 131, 0.35);
    background: var(--green-soft);
    color: var(--green);
}

.shared-readonly .plan-entity {
    cursor: pointer;
}

.mobile-dock {
    display: none;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 100;
    max-width: min(360px, calc(100vw - 32px));
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #1c1820;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.is-actionable {
    pointer-events: auto;
}

.toast-action {
    min-width: 44px;
    min-height: 30px;
    margin-left: 10px;
    padding: 0 10px;
    border: 1px solid rgba(255, 113, 51, 0.5);
    border-radius: 6px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

/* Phone-only chrome is hidden everywhere outside the phone layer below. */
.phone-only,
.sheet-grabber,
.sheet-close,
.phone-board-ui,
.phone-stat-strip,
.phone-context-bar,
.phone-handle,
.phone-placement-chip,
.phone-tray,
.phone-route-strip,
.phone-mode-bar,
.phone-add-button,
.phone-starter-card,
.phone-transport,
.phone-scrim,
.phone-sheet-shell,
.phone-menu,
.phone-confirm,
.phone-banner,
.check-show {
    display: none;
}


/* ==================================================================
   First-site setup wizard ("Set up my haunt").
   Base scope (not phone-only) because the same step table also drives the
   desktop quick-start entry. Inert until .is-visible is set by the JS, so it
   cannot affect any existing desktop or tablet layout.
   ================================================================== */
.phone-tour {
    display: none;
}

.phone-tour.is-visible {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: block;
    /* The wizard must not swallow taps - the whole point is that the user
       interacts with the control being pointed at. Only the card is live. */
    pointer-events: none;
}

.phone-tour-ring {
    position: fixed;
    pointer-events: none;
    border: 2px solid var(--orange);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}

.phone-tour-card {
    position: fixed;
    left: calc(16px + env(safe-area-inset-left));
    right: calc(16px + env(safe-area-inset-right));
    /* real instructional copy needs room; cap against the viewport and scroll
       inside instead of clipping at a hardcoded height. */
    max-height: 68vh;
    padding: 12px 14px 13px;
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: #181b21;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Mid tap-to-place: the card shrinks to a top strip so the board underneath
   stays visible and usable. */
.phone-tour.is-placing .phone-tour-card {
    max-height: 40vh;
}

/* Steps whose work happens ON the board (draw the route, watch it run) keep the
   card in a top strip so the yard underneath stays visible and tappable. */
.phone-tour.is-pinned-top .phone-tour-card {
    max-height: 52vh;
}

.phone-tour-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#phone-tour-exit {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: -6px -6px 0 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dim);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.phone-tour-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    line-height: 1.25;
}

.phone-tour-card p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--muted);
}

.phone-tour-card p b {
    color: var(--orange);
}

.phone-tour-choices {
    display: none;
    gap: 8px;
    margin: 0 0 10px;
}

.phone-tour-choices.is-visible {
    display: grid;
    /* 112px keeps two choices per row even on a 320px phone. */
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.phone-tour-choice {
    min-height: 48px;
    padding: 7px 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 113, 51, 0.5);
    border-radius: 11px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.phone-tour-choice.is-active {
    border-color: var(--orange);
    background: var(--orange);
    color: #1b0900;
}

.phone-tour-choice span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.phone-tour-choice small {
    color: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.75;
}

.phone-tour-choice svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.phone-tour-field {
    margin: 0 0 10px;
}

.phone-tour-field[hidden] {
    display: none;
}

.phone-tour-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.phone-tour-field-row {
    display: flex;
    gap: 8px;
}

.phone-tour-field-row input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #10131a;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 800;
}

#phone-tour-field-apply {
    flex: 0 0 auto;
    min-width: 58px;
    min-height: 42px;
    border: 1px solid rgba(255, 113, 51, 0.5);
    border-radius: 10px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.phone-tour-summary {
    margin: 0 0 10px;
    padding: 10px 11px;
    display: grid;
    gap: 7px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
}

.phone-tour-summary[hidden] {
    display: none;
}

.phone-tour-summary li {
    min-width: 0;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 700;
}

.phone-tour-summary svg {
    width: 15px;
    height: 15px;
    color: var(--orange);
}

.phone-tour-card p.phone-tour-status {
    margin: 0 0 9px;
    color: var(--dim);
    font-size: 0.68rem;
    font-weight: 700;
}

.phone-tour-status[hidden] {
    display: none;
}

.phone-tour-progress {
    margin: 0 0 8px;
    color: var(--dim);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* The card scrolls on short viewports, so Back / Skip / Next stay pinned to
   its bottom edge - otherwise the only way forward is below the fold. */
.phone-tour-actions {
    position: sticky;
    bottom: -13px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -14px -13px;
    padding: 9px 14px 13px;
    background: #181b21;
}

.phone-tour-spacer {
    flex: 1 1 auto;
}

.phone-tour-actions button {
    min-width: 64px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.phone-tour-actions button[hidden] {
    display: none;
}

#phone-tour-next {
    border-color: var(--orange);
    background: var(--orange);
    color: #1b0900;
}

#phone-tour-next:disabled {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--dim);
    cursor: default;
}

/* Desktop / tablet: the card is a floating panel, not a full-width bar. */
@media (min-width: 681px) {
    .phone-tour-card {
        left: 50%;
        right: auto;
        width: 400px;
        margin-left: -200px;
        max-height: 74vh;
    }
}

@media (min-width: 681px) {
    .tool-button {
        min-height: 68px;
        padding: 8px 5px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    .yard-starter-grid button {
        min-height: 74px;
        padding: 8px 5px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 22px auto;
        justify-items: center;
        gap: 6px;
        text-align: center;
    }
}

@media (max-width: 1120px) {
    .onboarding-tip {
        left: 236px;
    }

    .workspace {
        grid-template-columns: 220px minmax(0, 1fr) 250px;
    }

    .app-header {
        grid-template-columns: auto minmax(160px, 280px) 1fr auto;
    }

    .private-badge {
        display: none;
    }

    .plan-mode-control button {
        min-width: 0;
        padding: 3px 1px;
        overflow: hidden;
        font-size: 0.53rem;
    }
}

@media (max-width: 880px) {
    .workspace {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .inspector-panel {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        z-index: 40;
        width: min(310px, 92vw);
        border-left: 1px solid var(--line-strong);
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.46);
        transform: translateX(105%);
        transition: transform 180ms ease;
    }

    body.mobile-inspector-open .inspector-panel {
        transform: translateX(0);
    }

    .mobile-close {
        display: inline-grid;
    }
}

@media (min-width: 681px) and (max-width: 880px) {
    .app-header {
        padding: 0 12px;
        grid-template-columns: auto minmax(150px, 220px) 1fr auto;
        gap: 10px;
    }

    .brand span,
    .project-name span,
    .save-state,
    .account-button span {
        display: none;
    }

    .brand img {
        width: 34px;
        height: 34px;
    }

    .project-name input {
        height: 36px;
    }

    .header-actions {
        gap: 4px;
    }

    .header-actions .icon-button,
    .account-button {
        width: 34px;
        height: 34px;
    }

    .account-button {
        padding: 0;
        justify-content: center;
    }

    .stage-toolbar {
        padding: 0 8px;
        gap: 7px;
    }

    .mode-button span,
    .play-button span,
    .speed-control {
        display: none;
    }

    .mode-button {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .play-button {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .simulation-control .icon-button {
        width: 34px;
        height: 34px;
    }

    .zoom-control .icon-button {
        width: 28px;
        height: 28px;
    }

    .zoom-readout {
        width: 42px;
    }

    .tool-panel .mobile-close {
        display: none;
    }

    .mobile-dock {
        position: fixed;
        right: 12px;
        bottom: 12px;
        z-index: 60;
        display: block;
    }

    .mobile-dock button {
        display: none;
    }

    .mobile-dock button[data-mobile-panel="inspector"] {
        min-width: 94px;
        height: 40px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid var(--line-strong);
        border-radius: 7px;
        background: rgba(25, 28, 34, 0.96);
        color: var(--muted);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
        font-size: 0.65rem;
        font-weight: 800;
    }

    .mobile-dock button[data-mobile-panel="inspector"] svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   PHONE LAYER (max-width: 680px) - board-first mobile chrome.
   Keep this breakpoint in sync with PHONE_BP in lab.js.
   Nothing above this fence may change for phones; nothing in
   this fence may leak upward past 680px.
   ============================================================ */
@media (max-width: 680px) {
    :root {
        --header-h: calc(48px + env(safe-area-inset-top));
        --phone-bar-h: calc(56px + env(safe-area-inset-bottom));
        /* --app-vh is written by lab.js from visualViewport (1% of the *visible*
           height). Falls back to 1vh so the layout still works with no JS, and
           dvh is used as the middle rung where it is supported. */
        --app-vh-fallback: 1vh;
    }

    /* iOS Safari: the page itself must never rubber-band - that hand-off is
       what makes Safari cancel in-flight pointers and strand the sheet drag. */
    html,
    body {
        overscroll-behavior: none;
        /* The base rule floors the document at 300px so the desktop layout has
           somewhere to stand. On a phone that floor is a trap: Safari's per-site
           Page Zoom (and Android's font/display scaling) shrink the LAYOUT
           viewport, so a 320px phone at 125% zoom is a 256px viewport - the
           document then stayed 300px wide and the whole app scrolled sideways,
           parking the "..." menu button off the right edge with the fixed
           chrome sized to the narrower viewport. The phone layout is
           flex/grid all the way down and reflows fine, so let it. */
        min-width: 0;
    }

    /* ---- top bar: back, name, save dot, menu ---- */
    .app-header {
        padding: env(safe-area-inset-top) 6px 0 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .brand img {
        width: 30px;
        height: 30px;
    }

    .brand span,
    .project-name span,
    .header-status,
    #promo-button,
    #plans-button,
    #share-button,
    #account-button,
    #undo-button,
    #redo-button,
    #export-button,
    .onboarding-tip,
    .mobile-dock {
        display: none;
    }

    .project-name input {
        height: 40px;
        padding: 0 8px;
        font-size: 0.82rem;
        font-weight: 800;
        text-overflow: ellipsis;
    }

    .header-actions {
        gap: 0;
    }

    .phone-only {
        display: inline-grid;
    }

    .phone-save-dot {
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .phone-save-dot i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--dim);
        transition: background 200ms ease;
    }

    .phone-save-dot[data-state="saving"] i { background: var(--orange); }
    .phone-save-dot[data-state="cloud"] i { background: var(--green); }
    .phone-save-dot[data-state="error"] i { background: var(--red); }

    #phone-menu-button {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
    }

    .app-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 100) - 28px);
    }

    .plans-toolbar button {
        flex: 1 1 120px;
        justify-content: center;
    }

    .promo-downloads {
        justify-content: stretch;
    }

    .promo-downloads a {
        flex: 1;
        justify-content: center;
    }

    /* ---- the board IS the screen ---- */
    .workspace {
        height: calc(100vh - var(--header-h) - var(--phone-bar-h));
        height: calc(100dvh - var(--header-h) - var(--phone-bar-h));
        height: calc((var(--app-vh, var(--app-vh-fallback)) * 100) - var(--header-h) - var(--phone-bar-h));
        display: block;
    }

    .stage-shell {
        width: 100%;
        height: 100%;
        grid-template-rows: minmax(0, 1fr);
    }

    .stage-toolbar,
    .stage-status,
    .stage-shell .timeline,
    .tool-footer,
    .board.is-route-mode .route-actions,
    .board.is-route-mode .heatmap-legend {
        display: none;
    }

    .canvas-wrap {
        padding: 0;
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    .board {
        border-radius: 6px;
    }

    /* ---- elements: 28px+ visual, 44px hit, labels on zoom/selection ---- */
    .plan-entity {
        width: 32px;
        height: 32px;
    }

    .plan-entity::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
    }

    .plan-entity[data-type="wall"],
    .plan-entity[data-type="queue"] {
        width: 72px;
        height: 22px;
    }

    .plan-entity.is-selected {
        box-shadow: 0 0 0 2px var(--orange), 0 8px 20px rgba(0, 0, 0, 0.48);
    }

    .plan-entity.phone-pulse {
        animation: phone-pulse 800ms ease-out 2;
    }

    @keyframes phone-pulse {
        0% { outline: 3px solid rgba(255, 113, 51, 0.9); outline-offset: 2px; }
        100% { outline: 3px solid transparent; outline-offset: 16px; }
    }

    .entity-label {
        display: none;
        font-size: 0.7rem;
    }

    body.phone-zoom-labels .entity-label,
    .plan-entity.is-selected .entity-label,
    .plan-entity.is-property .entity-label {
        display: block;
        top: calc(100% + 8px);
        opacity: 1;
    }

    .plan-entity.is-property .entity-label {
        top: auto;
        font-size: 0.7rem;
    }

    .route-point {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .route-point.is-endpoint {
        width: 30px;
        height: 30px;
    }

    /* ---- floating board controls ---- */
    .phone-board-ui {
        display: block;
        position: fixed;
        left: calc(10px + env(safe-area-inset-left));
        right: calc(10px + env(safe-area-inset-right));
        top: calc(var(--header-h) + 10px);
        z-index: 30;
        pointer-events: none;
    }

    .phone-board-ui > * {
        pointer-events: auto;
    }

    .phone-board-ui.is-play {
        top: calc(var(--header-h) + 50px);
    }

    .phone-board-ui.is-play .phone-undo-pill,
    .phone-board-ui.is-play .phone-health-chip {
        display: none;
    }

    .phone-undo-pill {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        overflow: hidden;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.92);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    .phone-undo-pill button {
        width: 47px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--muted);
    }

    .phone-undo-pill button:first-child {
        border-right: 1px solid var(--line);
    }

    .phone-undo-pill button:disabled {
        opacity: 0.35;
    }

    .phone-undo-pill svg {
        width: 18px;
        height: 18px;
    }

    .phone-float-right {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    #phone-fit-button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgba(20, 22, 28, 0.92);
        color: var(--muted);
    }

    #phone-fit-button svg {
        width: 18px;
        height: 18px;
    }

    .phone-zoom-readout {
        min-width: 44px;
        height: 30px;
        padding: 0 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.85);
        color: var(--dim);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-health-chip {
        min-width: 44px;
        height: 38px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: rgba(20, 22, 28, 0.92);
        color: var(--dim);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .phone-health-chip svg {
        width: 15px;
        height: 15px;
    }

    .phone-health-chip.is-warning {
        border-color: rgba(255, 113, 51, 0.5);
        color: var(--orange);
    }

    .check-show {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        margin-left: 8px;
        padding: 0 11px;
        border: 1px solid rgba(255, 113, 51, 0.45);
        border-radius: 999px;
        background: var(--orange-soft);
        color: var(--orange);
        font-size: 0.7rem;
        font-weight: 800;
        cursor: pointer;
    }

    /* ---- live stat strip (Play) ---- */
    .phone-stat-strip {
        position: fixed;
        left: calc(10px + env(safe-area-inset-left));
        right: calc(10px + env(safe-area-inset-right));
        top: calc(var(--header-h) + 8px);
        z-index: 31;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(13, 15, 19, 0.82);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
    }

    .phone-stat-strip span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .phone-stat-strip b {
        color: var(--text);
    }

    .phone-stat-strip svg {
        width: 13px;
        height: 13px;
    }

    /* iOS Safari: kill double-tap-to-zoom on every phone control. A stray
       double tap while placing elements zooms the visual viewport and drags
       all position:fixed chrome out of view ("the tools became hidden"). */
    .phone-mode-bar,
    .phone-mode-tab,
    .phone-add-button,
    .phone-tray,
    .phone-tray-item,
    .phone-placement-chip,
    .phone-placement-chip button,
    .phone-context-bar,
    .phone-context-bar button,
    .phone-waypoint-bar button,
    .phone-transport,
    .phone-transport button,
    .phone-route-strip,
    .phone-route-strip button,
    .phone-board-ui button,
    .phone-stat-strip,
    .phone-banner button,
    .phone-tour-card button,
    .phone-tour-choice,
    .phone-starter-card button,
    .phone-menu button,
    .phone-confirm-actions button,
    .tool-tabs,
    .tool-tab,
    .tool-button,
    .inspector-tabs button,
    .yard-starter-grid button,
    .plan-mode-control button,
    #phone-menu-button,
    .phone-save-dot {
        touch-action: manipulation;
    }

    /* ---- bottom mode bar: Build / Route / Play + "+" ---- */
    .phone-mode-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: var(--phone-bar-h);
        padding: 0 calc(86px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line-strong);
        background: rgba(11, 12, 16, 0.97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .phone-mode-tab {
        margin: 6px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--dim);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-mode-tab.is-active {
        background: var(--orange-soft);
        color: var(--orange);
    }

    .phone-mode-tab svg {
        width: 18px;
        height: 18px;
    }

    .phone-add-button {
        position: fixed;
        z-index: 62;
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--orange);
        color: #1b0900;
        font-size: 1.3rem;
        font-weight: 900;
        box-shadow: 0 10px 26px rgba(255, 113, 51, 0.4);
        cursor: pointer;
    }

    .phone-add-button svg {
        width: 24px;
        height: 24px;
    }

    .phone-add-button:disabled {
        opacity: 0.35;
    }

    body[data-phone-mode="route"] .phone-add-button,
    body[data-phone-mode="play"] .phone-add-button,
    body[data-phone-mode="play"] .phone-mode-bar,
    body.phone-sheet-raised .phone-mode-bar,
    body.phone-sheet-raised .phone-add-button {
        display: none;
    }

    /* SAFETY NET - reconcilePhoneChrome() sets .phone-force-chrome when the
       mode bar computed to display:none while no sheet is actually open.
       The invariant is: the user can ALWAYS get back to the library. */
    body.phone-force-chrome .phone-mode-bar {
        display: grid !important;
    }

    body.phone-force-chrome:not([data-phone-mode="route"]):not([data-phone-mode="play"]) .phone-add-button {
        display: grid !important;
    }

    /* ---- transport bar (Play) ---- */
    .phone-transport.is-visible {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: var(--phone-bar-h);
        padding: 0 calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
        display: flex;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid var(--line-strong);
        background: rgba(11, 12, 16, 0.97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .phone-transport.is-visible::-webkit-scrollbar {
        display: none;
    }

    .phone-transport button {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-transport svg {
        width: 17px;
        height: 17px;
    }

    .phone-transport .phone-transport-play {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--orange);
        color: #1b0900;
    }

    .phone-transport .phone-transport-play.is-running {
        background: var(--green);
        color: #04170e;
    }

    .phone-transport .phone-transport-play svg {
        width: 21px;
        height: 21px;
    }

    .phone-speed {
        margin-left: auto;
        padding: 3px;
        display: flex;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.3);
    }

    .phone-transport .phone-speed button {
        min-width: 38px;
        min-height: 38px;
        border-radius: 999px;
        color: var(--dim);
        font-size: 0.7rem;
    }

    /* Narrow phones (iPhone SE / mini): tighten the speed pill so the
       run-of-show button stays on screen instead of being clipped. */
    @media (max-width: 380px) {
        .phone-transport.is-visible {
            gap: 2px;
        }

        .phone-transport .phone-speed button {
            min-width: 30px;
            padding: 0 2px;
            font-size: 0.66rem;
        }

        .phone-transport button {
            min-width: 40px;
        }
    }

    .phone-transport .phone-speed button.is-active {
        background: var(--panel-raised);
        color: var(--text);
    }

    /* ---- route mode strip ---- */
    .phone-route-strip {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--phone-bar-h);
        z-index: 58;
        height: 48px;
        padding: 0 8px 0 calc(14px + env(safe-area-inset-left));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-top: 1px solid var(--line);
        background: rgba(16, 18, 23, 0.97);
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
    }

    #phone-route-hint {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #phone-route-done {
        min-width: 78px;
        height: 40px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.78rem;
        font-weight: 900;
    }

    #phone-route-done svg {
        width: 15px;
        height: 15px;
    }

    /* ---- placement chip + recent tray ---- */
    .phone-placement-chip {
        position: fixed;
        left: 50%;
        bottom: calc(var(--phone-bar-h) + 82px);
        z-index: 58;
        max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
        padding: 6px 6px 6px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 113, 51, 0.55);
        border-radius: 20px;
        background: rgba(38, 20, 10, 0.95);
        color: var(--orange);
        font-size: 0.74rem;
        font-weight: 800;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        transform: translateX(-50%);
    }

    .phone-placement-chip svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

    /* Element name over the instruction: the instruction is the whole point of
       the chip and must never be the part that gets ellipsised away. */
    .phone-placement-chip span {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.2;
    }

    .phone-placement-chip span b {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .phone-placement-chip span small {
        font-size: 0.64rem;
        font-weight: 700;
        color: rgba(255, 180, 140, 0.85);
        white-space: nowrap;
    }

    #phone-placement-done {
        min-width: 62px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.74rem;
        font-weight: 900;
    }

    .phone-tray {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--phone-bar-h);
        z-index: 57;
        /* Deeper bottom pad: the "+" sits over the tray's bottom-right corner,
           and with two-line labels the last recent was being clipped by it.
           Tight gap + 8px inline pad keeps five 66px recents inside 375px. */
        padding: 8px calc(8px + env(safe-area-inset-right)) 14px calc(8px + env(safe-area-inset-left));
        display: flex;
        /* NOT justify-content:center - centering pushes the leading item to a
           negative offset once the row overflows, and scrollLeft can never go
           below 0, so that item becomes unreachable. Auto margins center while
           there is free space and collapse to 0 once the row overflows. */
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        border-top: 1px solid var(--line);
        background: rgba(11, 12, 16, 0.94);
    }

    .phone-tray::-webkit-scrollbar {
        display: none;
    }

    .phone-tray-item:first-child {
        margin-left: auto;
    }

    .phone-tray-item:last-child {
        margin-right: auto;
    }

    .phone-tray-item {
        width: 66px;
        min-height: 60px;
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        font-size: 0.61rem;
        font-weight: 700;
    }

    /* Wrap to two lines instead of ellipsising mid-word: a recents row reading
       "FrightLi... / Jump sc... / Animate..." is a row of guesses. */
    .phone-tray-item span {
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.15;
        text-align: center;
    }

    .phone-tray-item.is-active {
        border-color: var(--orange);
        background: var(--orange-soft);
        color: var(--orange);
    }

    .phone-tray-item svg {
        width: 18px;
        height: 18px;
    }

    /* ---- placement on a short viewport (phone in landscape) ----
       Set by syncCompactPlacement() when a placement is armed on a viewport
       under 430px tall. At 568x320 the wizard card, the chip and the tray
       together left the yard a 3px strip and buried the chip's Done button, so
       while the placement is live the board wins: the tray stands down, the chip
       drops next to the mode bar, and the setup card yields (the chip carries the
       same instruction, and ending the placement brings the card back). */
    body.phone-compact-placement .phone-tray {
        display: none;
    }

    body.phone-compact-placement .phone-placement-chip {
        bottom: calc(var(--phone-bar-h) + 12px);
    }

    body.phone-compact-placement .phone-tour.is-placing .phone-tour-card {
        display: none;
    }

    /* ---- selection context bar + handles ---- */
    .phone-context-bar {
        position: fixed;
        z-index: 62;
        display: flex;
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(18, 20, 26, 0.97);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    }

    .phone-context-bar button {
        min-width: 52px;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .phone-context-bar button:active {
        background: rgba(255, 255, 255, 0.07);
    }

    .phone-context-bar button.is-danger {
        color: #ff9a9a;
    }

    .phone-context-bar svg {
        width: 16px;
        height: 16px;
    }

    .phone-handle {
        position: fixed;
        z-index: 61;
        width: 44px;
        height: 44px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 113, 51, 0.6);
        border-radius: 50%;
        background: rgba(24, 16, 10, 0.95);
        color: var(--orange);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        touch-action: none;
    }

    .phone-handle svg {
        width: 17px;
        height: 17px;
    }

    /* ---- sheet system ---- */
    .tool-panel,
    .inspector-panel,
    .phone-sheet-shell {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        width: 100%;
        height: 92vh;
        height: 92dvh;
        height: calc(var(--app-vh, var(--app-vh-fallback)) * 92);
        display: flex;
        flex-direction: column;
        /* The shell itself never scrolls. It is laid out at FULL height and
           translated down, so its own scrollport would always equal its content
           and nothing below the fold could ever be reached (that is what forced
           users to drag the grabber just to reach Tree). --sheet-hidden is the
           part of the shell that is below the screen edge; padding it out of the
           content box makes the flex children lay out inside the VISIBLE region,
           so the content region below scrolls at every snap. */
        overflow: hidden;
        overscroll-behavior: contain;
        border: 1px solid var(--line-strong);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        background: #14161c;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
        padding-bottom: calc(var(--sheet-hidden, 0px) + env(safe-area-inset-bottom));
        transform: translateY(105%);
        transition: transform 220ms cubic-bezier(0.33, 1, 0.5, 1);
    }

    /* the scrolling content region of each sheet */
    .tool-panel > .tool-tab-panel,
    .inspector-panel > #selection-editor,
    .inspector-panel > .analysis-panel,
    .inspector-panel > .forecast-panel,
    .phone-sheet-shell > .phone-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* everything above the content region is chrome and must never squish */
    .tool-panel > .sheet-grabber,
    .tool-panel > .panel-heading,
    .tool-panel > .tool-tabs,
    .inspector-panel > .sheet-grabber,
    .inspector-panel > .panel-heading,
    .inspector-panel > .inspector-tabs,
    .phone-sheet-shell > .sheet-grabber {
        flex: 0 0 auto;
    }

    body.mobile-tools-open .tool-panel,
    body.mobile-inspector-open .inspector-panel {
        transform: translateY(105%);
    }

    .tool-panel.is-dragging,
    .inspector-panel.is-dragging,
    .phone-sheet-shell.is-dragging {
        transition: none;
    }

    .sheet-grabber {
        position: sticky;
        top: 0;
        z-index: 15;
        min-height: 30px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding-top: 8px;
        background: inherit;
        touch-action: none;
        cursor: grab;
    }

    .sheet-grabber::before {
        content: "";
        position: absolute;
        inset: -8px 0;
    }

    /* A drag-down gesture was the ONLY way out of a half-open sheet: the board
       behind it is inert at that snap and the scrim only exists at full. First
       run, that reads as a dead end, so every sheet gets a real close target.
       Sits above the grabber's own ::before hit area. */
    .sheet-close {
        position: absolute;
        top: 0;
        right: 4px;
        z-index: 3;
        width: 40px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--dim);
        touch-action: manipulation;
        cursor: pointer;
    }

    .sheet-close:active {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text);
    }

    .sheet-close svg {
        width: 17px;
        height: 17px;
    }

    .sheet-grabber span {
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-close {
        display: none !important;
    }

    /* Chrome vs content: on a 320x568 phone the library sheet spent 156px on
       grabber + two-line title + category chips and left 151px for the elements
       themselves - ONE row of pickers, everything else behind a scroll. The
       kicker ("ELEMENTS") is pure decoration on a sheet you just opened from
       "+", so drop it and put the title on one line: ~46px back, which is most
       of another row. */
    .tool-panel > .panel-heading,
    .inspector-panel > .panel-heading {
        padding: 2px 14px 9px;
    }

    .tool-panel > .panel-heading .panel-kicker,
    .inspector-panel > .panel-heading .panel-kicker {
        display: none;
    }

    .tool-panel > .panel-heading h2,
    .inspector-panel > .panel-heading h2 {
        margin: 0;
        font-size: 0.92rem;
    }

    .phone-sheet-body {
        padding: 0 4px 22px;
    }

    #run-of-show-body .timeline {
        display: block;
        padding: 8px 14px 22px;
        background: transparent;
    }

    #run-of-show-body .timeline-track {
        height: 96px;
    }

    #run-of-show-body .timeline-event span {
        width: 72px;
        font-size: 0.7rem;
    }

    /* library: horizontal category chips + 3-up grid */
    .tool-tabs {
        position: static;
        margin: 2px 10px 10px;
        padding: 4px;
        display: flex;
        /* flex-shrink:0 + a hard min-height. Without these the chip row is a
           shrinkable flex item of the column-flex sheet whose automatic minimum
           size is 0 (because overflow-x:auto makes overflow-y compute to auto),
           so any tall tab squeezed it from 50px to 10px and the picker vanished. */
        flex: 0 0 auto;
        min-height: 50px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 8px;
        scrollbar-width: none;
        border-radius: 999px;
    }

    .tool-tabs::-webkit-scrollbar {
        display: none;
    }

    .tool-tab {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 40px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 0.74rem;
        white-space: nowrap;
    }

    /* Narrow phones: tighten the chip padding so all five categories fit
       without scrolling. The row still scrolls if it ever does overflow. */
    @media (max-width: 380px) {
        .tool-tab {
            padding: 0 10px;
            font-size: 0.71rem;
        }

        .tool-tabs {
            margin-inline: 8px;
            gap: 2px;
        }
    }

    .tool-grid {
        /* minmax floor keeps every element button above the tappable size no
           matter how narrow the phone is; auto-fit drops to 2 columns instead
           of squishing three. */
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: 8px;
    }

    .tool-button {
        min-width: 0;
        min-height: 88px;
        padding: 10px 6px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 0.72rem;
    }

    .tool-button > span {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .tool-button svg {
        width: 32px;
        height: 32px;
    }

    .yard-starter-grid button {
        min-height: 74px;
    }

    .plan-mode-control button {
        min-height: 44px;
        font-size: 0.7rem;
    }

    .inspector-tabs button,
    .capacity-mode-control button {
        min-height: 44px;
    }

    /* ---- scrims, menu, confirm ---- */
    .phone-scrim {
        position: fixed;
        inset: 0;
        z-index: 64;
        background: rgba(0, 0, 0, 0.4);
    }

    .phone-scrim.is-visible {
        display: block;
    }

    #phone-menu-scrim {
        z-index: 88;
        background: rgba(0, 0, 0, 0.35);
    }

    .phone-menu.is-open {
        position: fixed;
        top: calc(var(--header-h) + 6px);
        right: calc(8px + env(safe-area-inset-right));
        z-index: 90;
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 100) - var(--header-h) - 20px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 228px;
        padding: 6px;
        display: block;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: #181b21;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    .phone-menu button {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 700;
        text-align: left;
    }

    .phone-menu button:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .phone-menu button.is-danger {
        color: #ff9a9a;
    }

    .phone-menu svg {
        width: 16px;
        height: 16px;
    }

    .phone-menu-divider {
        height: 1px;
        margin: 6px 4px;
        background: var(--line);
    }

    .phone-confirm {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: block;
        padding: 20px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
        border-top: 1px solid var(--line-strong);
        border-radius: 16px 16px 0 0;
        background: #171a20;
        transform: translateY(110%);
        transition: transform 200ms ease;
    }

    .phone-confirm.is-open {
        transform: translateY(0);
    }

    .phone-confirm h3 {
        margin: 0 0 8px;
        font-size: 0.95rem;
    }

    .phone-confirm p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .phone-confirm-actions {
        display: flex;
        gap: 8px;
    }

    .phone-confirm-actions button {
        min-height: 46px;
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        font-size: 0.8rem;
        font-weight: 800;
    }

    .phone-confirm-actions .is-danger {
        border-color: rgba(248, 91, 91, 0.5);
        background: rgba(248, 91, 91, 0.14);
        color: #ff9a9a;
    }

    /* ---- quick start: banner + spotlight tour ---- */
    .phone-banner {
        position: fixed;
        left: calc(8px + env(safe-area-inset-left));
        right: calc(8px + env(safe-area-inset-right));
        top: calc(var(--header-h) + 6px);
        z-index: 85;
        max-height: 56px;
        padding: 6px 6px 6px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 113, 51, 0.4);
        border-radius: 14px;
        background: rgba(30, 20, 14, 0.97);
        color: var(--text);
        font-size: 0.76rem;
        font-weight: 700;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform: translateY(-120%);
        transition: transform 240ms ease, opacity 240ms ease;
        pointer-events: none;
    }

    .phone-banner.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* While the banner is up, drop the floating board controls below it. */
    body.phone-banner-open .phone-board-ui {
        top: calc(var(--header-h) + 72px);
    }

    body.phone-banner-open .phone-board-ui.is-play {
        top: calc(var(--header-h) + 112px);
    }

    body.phone-banner-open .phone-stat-strip {
        top: calc(var(--header-h) + 70px);
    }

    .phone-banner > svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: var(--orange);
    }

    .phone-banner span {
        flex: 1;
        min-width: 0;
    }

    #phone-banner-start {
        min-width: 60px;
        min-height: 40px;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: #1b0900;
        font-size: 0.74rem;
        font-weight: 900;
    }

    #phone-banner-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: var(--dim);
        font-size: 0.9rem;
    }

    /* ---- setup wizard card: size against the VISIBLE viewport ----
       iOS Safari's collapsing toolbar changes the usable height without
       changing 100vh, so the card cap rides --app-vh like the sheets do. */
    .phone-tour-card {
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 56));
    }

    .phone-tour.is-placing .phone-tour-card {
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 38));
    }

    .phone-tour.is-pinned-top .phone-tour-card {
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 52));
    }

    /* A step with no on-screen target is centred (scene, size, the closing
       summary): nothing under it needs to stay visible except the header and
       the mode bar, so cap it against the strip BETWEEN those two instead of a
       flat 56%. 56% of a 568px-tall phone is 318px, and the size step is 475px
       of content - the third size preset sat half-under the sticky action row
       and the custom-width field was off the card entirely. The strip formula
       is what makes a centred card fit by construction: the card is centred on
       the viewport and the strip is (near enough) centred too.
       is-placing / is-pinned-top keep their tighter caps - those steps are
       teaching against the board or the library and must not cover it. */
    .phone-tour.is-centred .phone-tour-card {
        max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 100) - var(--header-h) - var(--phone-bar-h) - 16px);
    }

    /* The action row is sticky and opaque, so scrolled content slid under it
       with a hard cut - a half-visible answer button reads as a broken layout,
       not as "there is more below". Fade the last 18px into it. */
    .phone-tour-actions::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -18px;
        height: 18px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(24, 27, 33, 0), #181b21);
    }

    /* ---- phone in landscape: the wizard must show its ANSWERS ----
       At 568x320 the card had room for the question and the sticky action row
       and NOTHING else: all four "What are you decorating?" buttons were a 4px
       sliver under the actions. Buy that space back - one-line answers, no
       sub-notes, copy clamped - so the choices land above the fold. */
    @media (max-height: 460px) {
        .phone-tour-card {
            padding: 10px 12px 11px;
        }

        /* lab.js pins a targeted card to the top on a viewport this short
           (PHONE_SHORT_VIEWPORT_H) precisely so it can have the whole strip -
           the 52% that is-pinned-top gets in portrait would be a downgrade. */
        .phone-tour.is-pinned-top .phone-tour-card {
            max-height: calc((var(--app-vh, var(--app-vh-fallback)) * 100) - var(--header-h) - var(--phone-bar-h) - 16px);
        }

        .phone-tour-title {
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

        .phone-tour-card p {
            margin-bottom: 7px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .phone-tour-choices.is-visible {
            gap: 6px;
            margin-bottom: 7px;
        }

        .phone-tour-choice {
            min-height: 40px;
            padding: 5px 9px;
            flex-direction: row;
            gap: 6px;
        }

        /* "city lot - 28 ft deep" under "Small - 40 ft": the label already
           carries the number that matters. */
        .phone-tour-choice small {
            display: none;
        }

        .phone-tour-actions {
            padding-top: 7px;
        }

        .phone-tour-actions button {
            min-height: 38px;
        }
    }

    /* ---- first-run yard starter card (empty board) ---- */
    .phone-starter-card {
        position: fixed;
        left: calc(12px + env(safe-area-inset-left));
        right: calc(12px + env(safe-area-inset-right));
        bottom: calc(var(--phone-bar-h) + 14px);
        z-index: 40;
        display: block;
        padding: 14px;
        border: 1px solid rgba(255, 113, 51, 0.38);
        border-radius: 16px;
        background: rgba(26, 19, 14, 0.97);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }

    .phone-starter-card[hidden] {
        display: none;
    }

    .phone-starter-card h3 {
        margin: 0 0 4px;
        font-size: 0.9rem;
    }

    .phone-starter-card p {
        margin: 0 0 12px;
        color: var(--muted);
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .phone-starter-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }

    .phone-starter-actions button {
        min-height: 50px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid rgba(255, 113, 51, 0.5);
        border-radius: 11px;
        background: var(--orange-soft);
        color: var(--orange);
        font-size: 0.76rem;
        font-weight: 800;
    }

    .phone-starter-actions svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    .phone-starter-dismiss {
        width: 100%;
        /* 44px touch target and AA contrast: this is the "no thanks" out of
           the very first card a new phone user sees. */
        min-height: 44px;
        margin-top: 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: rgba(245, 246, 248, 0.66);
        font-size: 0.72rem;
        font-weight: 800;
    }

    /* ---- toasts above the bottom bar ---- */
    .toast {
        bottom: calc(var(--phone-bar-h) + 8px);
        max-width: calc(100vw - 24px);
        font-size: 0.74rem;
    }

    /* While a placement is armed the recent-placement tray occupies the band
       just above the mode bar (73px) and the "Placing: ..." chip sits on top of
       it (82px up, ~50px tall). A toast parked at bar + 8px lands right on the
       tray and covers the very button the user is about to tap again ("Tree
       added" blotting out the Tree chip). Clear both while the tray is up.
       .phone-tray-open is set by enterPhonePlacement / cleared by
       exitPhonePlacement. */
    body.phone-tray-open .toast {
        /* tray (73) + chip (82 up, 50 tall) + 8px of air = 140 clears the chip,
           148 leaves a visible gap above it. */
        bottom: calc(var(--phone-bar-h) + 148px);
    }

    /* ==============================================================
       WIZARD vs A RAISED SHEET.
       A step whose target is the "+" (every library step) loses its
       target the instant the library opens, because the "+" is
       display:none while a sheet is raised. An untargeted card is
       CENTRED and may use the whole strip between the header and the
       mode bar - so opening the library mid-wizard parked a 320px card
       across the library, hiding its grabber, its close button, its
       whole tab row and all but the last row and a half of tools. On a
       320x568 phone that leaves 124px of library; in landscape it left
       none at all ("adding a tree made the tools disappear").
       lab.js measures the gap the raised sheet leaves under the header
       and picks one of two behaviours. Both are reverted the moment the
       sheet closes (dismissPhoneSheet re-runs the anchor pass).
       ============================================================== */

    /* Enough room above the sheet: the card becomes a single-line strip
       under the header - step title on the left, the same forward
       controls on the right. It never covers the sheet, and the sheet's
       own grabber / close / tabs stay reachable. */
    .phone-tour.is-over-sheet .phone-tour-card {
        top: auto;
        bottom: auto;
        max-height: none;
        padding: 7px 8px 7px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: visible;
    }

    /* DOM order is head(✕) -> title -> copy -> answers -> actions.
       On one line we want title, actions, ✕. */
    /* Two lines, not one with an ellipsis: on a 320px phone the buttons take
       ~150px of the strip, and "Where is the house?" clipped to "Where is the
       ..." is not an instruction. Two clamped lines cost 16px of a 200px gap. */
    .phone-tour.is-over-sheet .phone-tour-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 0.8rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .phone-tour.is-over-sheet .phone-tour-actions button {
        min-width: 56px;
        padding: 0 10px;
    }

    .phone-tour.is-over-sheet .phone-tour-actions {
        order: 2;
        flex: 0 0 auto;
        position: static;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .phone-tour.is-over-sheet .phone-tour-actions::before {
        display: none;
    }

    .phone-tour.is-over-sheet .phone-tour-head {
        order: 3;
        flex: 0 0 auto;
    }

    /* Back and the spacer are noise on one line; Skip and Next are the
       two that matter and updateWizardControls keeps Skip enabled, so
       the strip can never be a dead end. */
    .phone-tour.is-over-sheet #phone-tour-progress,
    .phone-tour.is-over-sheet #phone-tour-back,
    .phone-tour.is-over-sheet .phone-tour-spacer,
    .phone-tour.is-over-sheet .phone-tour-card > p,
    .phone-tour.is-over-sheet .phone-tour-choices,
    .phone-tour.is-over-sheet .phone-tour-field,
    .phone-tour.is-over-sheet .phone-tour-summary {
        display: none;
    }

    /* Not enough room (a full-snap sheet, or any sheet in landscape):
       there is nowhere to put a strip that is not on top of the sheet,
       so the wizard stands down entirely until the sheet is closed. */
    .phone-tour.is-yielded {
        display: none;
    }

    /* ==============================================================
       SMALL-TEXT CONTRAST (phone only - desktop keeps its palette).
       --dim is rgba(245,246,248,0.44), which composites to about 4.0:1
       on the card and panel backgrounds. That is under AA for text this
       small, and it lands on exactly the lines that matter most: the
       hint that explains why Next is locked, the sub-notes under the
       answers, the library's own tab row and section headings.
       ============================================================== */
    .phone-tour-card p.phone-tour-status,
    #phone-tour-exit,
    .phone-mode-tab:not(.is-active),
    .phone-sheet .tool-tab:not(.is-active),
    .phone-sheet .tool-section-label,
    .phone-sheet .panel-kicker {
        color: rgba(245, 246, 248, 0.66);
    }

    .phone-tour-choice small {
        opacity: 0.95;
        font-size: 0.64rem;
    }

    /* ==============================================================
       44px TOUCH TARGETS.
       Grown as an invisible ::before overlay rather than by resizing
       the boxes: these all sit in space-starved chrome (a sheet
       grabber, a wizard action row, a floating board chip) where 6 more
       px of layout would cost a row of content.
       ============================================================== */
    #phone-tour-exit,
    .phone-tour-actions button,
    .sheet-close,
    .phone-health-chip {
        position: relative;
    }

    #phone-tour-exit::before,
    .phone-tour-actions button::before,
    .sheet-close::before,
    .phone-health-chip::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }

    /* Bar buttons sit shoulder to shoulder in a strip, so these grow
       down the 48px bar only - a wider halo would steal a neighbour's
       taps. */
    #phone-route-done,
    .phone-waypoint-bar button,
    .phone-context-bar button,
    .phone-placement-chip button {
        position: relative;
    }

    #phone-route-done::before,
    .phone-waypoint-bar button::before,
    .phone-context-bar button::before,
    .phone-placement-chip button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: max(100%, 44px);
        transform: translateY(-50%);
    }

    /* Play's speed pill is deliberately narrow on a <=380px phone so the
       run-of-show button stays on screen, so 1x/4x/8x can only grow
       downwards - and its inactive labels were the dimmest text in the
       transport bar at 10.6px. */
    .phone-transport .phone-speed button {
        position: relative;
        color: rgba(245, 246, 248, 0.66);
    }

    .phone-transport .phone-speed button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: max(100%, 44px);
        transform: translateY(-50%);
    }

    /* The library's tab row was 40px. It cannot use the ::before trick
       above - .tool-tab carries `overflow: hidden` for its own
       text-overflow ellipsis, which clips the pseudo back to the box -
       so this one really does grow, by 4px. */
    .phone-sheet .tool-tab {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.assumptions-panel {
    border: 1px solid rgba(245, 197, 81, 0.18);
    background: rgba(245, 197, 81, 0.055);
}

.assumptions-panel p {
    margin: 0;
    color: rgba(245, 246, 248, 0.78);
    line-height: 1.45;
}

.assumptions-grid {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
}

.assumptions-grid div {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.assumptions-grid dt {
    color: rgba(245, 197, 81, 0.88);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.assumptions-grid dd {
    margin: 4px 0 0;
    color: rgba(245, 246, 248, 0.82);
    line-height: 1.4;
}