/* /cybertruck viewer. Loads before site-shell.css, so rules that compete
   with shell selectors such as .site-shell .site-content p repeat that prefix. */

.ct-viewer {
    --ct-width: max(100%, min(1040px, calc(100vw - 96px)));
    width: var(--ct-width);
    margin: 2rem 0 0 calc((100% - var(--ct-width)) / 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "controls" "info";
    gap: 18px;
}

.ct-viewer [hidden] { display: none !important; }

.ct-stage {
    grid-area: stage;
    position: relative;
    height: clamp(380px, 68vh, 680px);
    border: 1px solid #373630;
    border-radius: 8px;
    background: radial-gradient(120% 85% at 50% 38%, #3b3f43 0%, #25282b 65%, #1c1e20 100%);
    overflow: hidden;
    scroll-margin-top: 16px;
}

.ct-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    outline: none;
    touch-action: none;
}
.ct-stage canvas:active { cursor: grabbing; }
.ct-stage canvas.is-hovering { cursor: pointer; }
.ct-stage canvas:focus-visible { outline: 2px solid #aaa69d; outline-offset: -2px; }

.ct-labels { position: absolute; inset: 0; pointer-events: none; }

.ct-label {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    padding: 3px 9px;
    border: 1px solid #6a675f;
    border-radius: 999px;
    background: rgba(27, 26, 24, 0.88);
    color: #eeeae3;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}
.ct-label:hover,
.ct-label[aria-pressed="true"] { border-color: #eeeae3; }
.ct-label[aria-pressed="true"] { background: #eeeae3; color: #1b1a18; }

/* Keep all exploded-part names outside the canvas. Only the selected part gets
   an on-model callout, so orbiting and zooming cannot stack names over the truck. */
.ct-part-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ct-part-label {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid #45453d;
    border-radius: 5px;
    background: #22231f;
    color: #d8d5ce;
    font-weight: 500;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}
.ct-part-label:hover { border-color: #aaa69d; color: #eeeae3; }
.ct-part-label[aria-pressed="true"] { background: #eeeae3; color: #1b1a18; border-color: #eeeae3; }
.ct-part-label:focus-visible { outline: 2px solid #c5cbb1; outline-offset: 2px; }
.ct-selection-label { pointer-events: none; }

.ct-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 240px;
    padding: 6px 10px;
    border: 1px solid #45453d;
    border-radius: 6px;
    background: rgba(27, 26, 24, 0.94);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}
.ct-tooltip strong { display: block; font-weight: 600; color: #eeeae3; }
.ct-tooltip span { display: block; color: #aaa69d; }

.ct-loading,
.ct-fallback,
.ct-noscript {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px;
    text-align: center;
}
.ct-noscript { background: #1e1d1b; }
.site-shell .site-content :is(.ct-loading, .ct-fallback p, .ct-noscript) {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.site-shell .site-content .ct-fallback p:first-child { max-width: 34ch; color: var(--text); }

.ct-controls {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

.ct-button {
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid #45453d;
    border-radius: 7px;
    background: #22231f;
    color: #eeeae3;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
.ct-button:hover:not(:disabled) { border-color: #77756b; }
.ct-button[aria-pressed="true"] { background: #eeeae3; border-color: #eeeae3; color: #1b1a18; }
.ct-button:disabled { opacity: 0.45; cursor: not-allowed; }

.ct-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}
.ct-slider input { flex: 1 1 auto; min-width: 120px; max-width: 360px; accent-color: #aaa69d; }
.site-shell .ct-slider input:focus-visible { outline: 2px solid #c5cbb1; outline-offset: 4px; }
.ct-slider output { min-width: 3.2em; color: var(--text); font-variant-numeric: tabular-nums; }

.site-content .ct-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.site-content .ct-jumps li { margin: 0; }
.site-shell .site-content .ct-jumps a {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #45453d;
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}
.site-shell .site-content .ct-jumps a:hover { border-color: #aaa69d; }

.site-shell .site-content .ct-help {
    max-width: 66ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ct-info {
    grid-area: info;
    padding-top: 16px;
    border-top: 1px solid #373630;
}
.site-shell .site-content .ct-info-status {
    display: inline-block;
    margin: 0 0 8px;
    padding: 1px 9px;
    border: 1px solid #45453d;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.site-shell .site-content .ct-info-name {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}
.site-shell .site-content .ct-info-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; }
.site-shell .site-content .ct-permalink {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

@media (min-width: 900px) {
    .ct-viewer {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas: "stage info" "controls info";
        column-gap: 28px;
    }
    .ct-info {
        position: relative;
        min-height: 240px;
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid #373630;
    }
    .ct-info-inner {
        position: absolute;
        inset: 0 0 0 24px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #45453d transparent;
    }
}

.site-content .ct-viewer + .section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #222; }

.site-content .ct-group {
    margin: 2rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.site-content .ct-parts { margin: 0 0 1rem; padding: 0; list-style: none; }
.site-content .ct-part {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #2c2b27;
    scroll-margin-top: 16px;
}

.ct-part-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
}

.site-shell .site-content .ct-part-name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #5f5d56;
    text-underline-offset: 4px;
    cursor: pointer;
}
.site-shell .site-content .ct-part-name:hover,
.site-shell .site-content .is-selected .ct-part-name { text-decoration-color: currentColor; }
.site-shell .site-content .is-selected .ct-part-name { text-decoration-thickness: 2px; }

.ct-status {
    flex: none;
    padding: 1px 9px;
    border: 1px solid #45453d;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ct-part[data-kind="estimate"] .ct-status { border-style: dashed; border-color: #9a968c; color: var(--text); }

.site-shell .site-content .ct-part-body p { margin: 8px 0 0; font-size: 0.98rem; line-height: 1.7; }
.site-shell .site-content .ct-note { color: var(--text-secondary); }
.site-shell .site-content .ct-estimate { color: var(--text-secondary); }

.site-shell .site-content a.ct-cite {
    color: var(--text-secondary);
    text-decoration-color: #5f5d56;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.site-content .ct-sources { margin: 0 0 1rem; padding-left: 1.6rem; list-style: decimal; }
.site-content .ct-sources li { margin: 0 0 0.9rem; padding-left: 0.3rem; scroll-margin-top: 16px; }
.ct-sources li::marker { color: var(--text-secondary); }
.ct-accessed { color: var(--text-secondary); }

.site-content .ct-sources li:target,
.site-content .ct-part:target { outline: 1px dashed #8d897f; outline-offset: 6px; }

.site-shell .site-content .ct-fan {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .ct-stage { height: clamp(340px, 62vh, 520px); }
    .ct-button { min-height: 44px; }
    .ct-slider input { max-width: none; }
}

/* v2: modes, FSD view, camera markers, data tables ------------------------------------- */

.ct-modes {
    display: inline-flex;
    padding: 3px;
    border: 1px solid #45453d;
    border-radius: 9px;
    background: #1e1e1b;
    gap: 2px;
}
.ct-modes .ct-button { border: 0; background: transparent; border-radius: 6px; min-height: 34px; }
.ct-modes .ct-button[aria-pressed="true"] { background: #eeeae3; color: #1b1a18; }
.ct-modes .ct-button:hover:not(:disabled):not([aria-pressed="true"]) { background: #2a2a26; }

.ct-stage[data-mode="fsd"] {
    background: radial-gradient(120% 85% at 50% 38%, #1d2429 0%, #1a1d20 55%, #17191b 100%);
    border-color: #35444c;
}

.ct-label-camera {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c9ecfa;
}
.ct-label-camera::before {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #1a3947;
    box-shadow: 0 0 0 2px rgba(13, 22, 27, 0.45);
}
.ct-label-camera[aria-pressed="true"] { background: transparent; color: #c9ecfa; }
.ct-label-camera:hover::before,
.ct-label-camera[aria-pressed="true"]::before { background: currentColor; }
.ct-label-camera:focus-visible { outline: 1px solid currentColor; outline-offset: 0; }
.ct-label-camera.is-cabin { color: #f6dcb4; }
.ct-label-camera.is-cabin::before { background: #5b4224; }
.ct-label-camera.is-cabin:hover::before,
.ct-label-camera.is-cabin[aria-pressed="true"]::before { background: currentColor; }
.ct-camera-caption { top: auto; bottom: 12px; left: 12px; max-width: calc(100% - 24px); white-space: normal; }

.site-shell .site-content .ct-inline-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.site-content .ct-flow {
    display: grid;
    gap: 10px;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.site-content .ct-flow-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-areas: "index name" "index text";
    column-gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #2c2b27;
    border-radius: 8px;
    background: #1e1d1b;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.site-content .ct-flow-step.is-active { border-color: #6fd3ff; background: #1a2227; }
.ct-flow-index {
    grid-area: index;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #45453d;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.ct-flow-step.is-active .ct-flow-index { border-color: #6fd3ff; color: #6fd3ff; }
.ct-flow-name { grid-area: name; font-weight: 600; font-size: 1rem; color: var(--text); }
.ct-flow-text { grid-area: text; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
@media (min-width: 700px) {
    .site-content .ct-flow { grid-template-columns: repeat(3, 1fr); }
}

.site-shell .site-content .ct-disclaimer {
    padding: 12px 14px;
    border: 1px dashed #9a968c;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text);
}

.site-shell .site-content .ct-camera-name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #5f5d56;
    text-underline-offset: 3px;
    cursor: pointer;
}
.site-shell .site-content .ct-camera-name:hover,
.site-shell .site-content .ct-camera-name[aria-pressed="true"] { text-decoration-color: currentColor; }
.site-shell .site-content .ct-camera-name[aria-pressed="true"] { text-decoration-thickness: 2px; }

.site-content .ct-specs th[scope="row"],
.site-content .ct-dimensions th[scope="row"],
.site-content .ct-cameras th[scope="row"] { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.site-content .ct-specs thead th { color: var(--text-secondary); }
.site-content .ct-row-total td,
.site-content .ct-row-total th { border-bottom: 0; color: var(--text-secondary); }
.site-content .ct-row-estimate td,
.site-content .ct-row-estimate th { color: var(--text-secondary); }
.site-content .ct-sensors { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
.site-content .ct-sensors li { font-size: 0.98rem; }
.site-shell .site-content .ct-checked { color: var(--text-secondary); font-size: 0.95rem; }
.ct-third-party { color: var(--text-secondary); }

.ct-table-scroll { max-width: 100%; overflow-x: auto; }
.ct-table-scroll:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 3px; }
.site-content .ct-specs, .site-content .ct-cameras { display: table; width: 100%; }
.site-content .ct-specs { min-width: 620px; }
.site-content .ct-cameras { min-width: 460px; }
.site-content .ct-specs thead, .site-content .ct-cameras thead { display: table-header-group; }
.site-content .ct-specs tbody, .site-content .ct-cameras tbody { display: table-row-group; }

/* Compact physical controls; details stay below the model instead of obscuring it. */
.ct-operations { border-top: 1px solid var(--border-color, #444); padding-top: 8px; width: 100%; }
.ct-action-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-action-bar .ct-button { min-height: 34px; font-size: 12px; padding: 5px 8px; }
.ct-operation-tools { position: relative; margin-top: 4px; }
.ct-operation-tools > .ct-close-parts { position: absolute; right: 0; top: 0; min-height: 32px; padding: 4px 8px; font-size: 12px; }
.ct-action-bar .ct-button[aria-pressed="mixed"] { border-color: #aaa69d; background: #393b32; }
.ct-more-operations { margin: 0; }
.ct-operations summary { cursor: pointer; font-size: 12px; min-height: 34px; box-sizing: border-box; line-height: 18px; padding: 8px 80px 8px 0; }
.ct-operations summary span { opacity: .55; margin-left: 8px; font-size: 11px; }
.ct-operation-row { display: grid; grid-template-columns: 55px 1fr; gap: 6px; margin-top: 6px; align-items: start; }
.ct-operation-row > span { font-size: 11px; opacity: .65; padding-top: 8px; }
.ct-operation-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-operation-row .ct-button { min-height: 32px; font-size: 11px; padding: 4px 7px; }
#ct-operation-note, .ct-cabin-hint { font-size: 12px; line-height: 1.5; margin: 0; }
.ct-more-operations > .ct-note { font-size: 11px; opacity: .65; margin: 8px 0 0; }
.ct-cabin-hint { width: 100%; }
#ct-operation-note { margin-top: 8px; }