/* Understanding CNC Milling Offsets - visual language shared with the
   "Using an Oscilloscope" activity: warm paper page, ink text, Fraunces
   serif headings with red italic accents, dark instrument set into the
   page, JetBrains Mono for machine readouts. */

:root {
    --paper: #f6f3ec;
    --paper-2: #efeadf;
    --ink: #1c1a15;
    --ink-2: #4a463d;
    --ink-3: #8a8478;
    --rule: #d9d3c2;
    --accent: #c8341a;
    --accent-2: #9a2818;
    --machine-bg: #171a20;
    --machine-edge: #262b34;
    --phosphor: #4dffb0;
    --phosphor-dim: #8a9b94;
    --dro-bg: #070c08;
    --dro-green: #39e26f;
    --dro-dim: #7fa88b;
    --warn: #d68a1a;
    --bad: #c8341a;
    --good: #1d7a3e;
    --ghost: #c026a8;
    /* Match offset arrows in the 3D view (scene.js: X ff4444, Y 44cc44, Z 4488ff) */
    --ax-x: #ff4444;
    --ax-y: #44cc44;
    --ax-z: #4488ff;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(200, 52, 26, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(200, 52, 26, 0.03) 0%, transparent 50%);
}
.serif { font-family: 'Fraunces', Georgia, serif; }
.mono  { font-family: 'JetBrains Mono', monospace; }

.wrap { max-width: 1380px; margin: 0 auto; padding: 16px 16px 24px; }

/* ===== Page footer ===== */
.site-footer {
    margin-top: 28px;
    padding: 14px 8px 8px;
    text-align: center;
    border: none;
}
.site-footer a {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== Masthead ===== */
.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.masthead h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(22px, 4vw, 40px);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.masthead h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.masthead-links { display: flex; align-items: center; gap: 2px; }
.masthead-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    background: transparent;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rule);
    transition: color 0.15s, text-decoration-color 0.15s;
}
.masthead-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.masthead-sep { color: var(--ink-3); font-size: 13px; user-select: none; padding: 0 2px; opacity: 0.6; }

/* ===== Bench layout: machine + side column (DRO / always-bar / panel) ===== */
.bench { display: flex; gap: 14px; align-items: flex-start; }
.machine-shell {
    flex: 1;
    min-width: 0;
    align-self: flex-start;           /* hug viewport; don't stretch to side-col height */
    background: var(--machine-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 14px rgba(28, 26, 21, 0.16);
}
.side-col {
    width: 408px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Height follows content (no fixed fill / inner panel scroll) */
}
/* Display area max proportions 950×650 (ratio only - scales with available width) */
#viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 950 / 650;
    flex-shrink: 0;
}
#c { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
#viewcube-stack {
    position: absolute;
    top: 18px;
    right: 10px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: auto;
    min-width: 132px;
}
.viewcube-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}
#viewcube {
    display: block;
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    cursor: pointer;
    border-radius: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    touch-action: none;
}
.vc-face-arrow {
    appearance: none;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background: rgba(12, 16, 22, 0.82);
    color: #f2f5f8;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
/* Pull both arrows 6px toward the cube */
#vc-face-prev { margin-right: -6px; }
#vc-face-next { margin-left: -6px; }
.vc-face-arrow svg {
    display: block;
    stroke-width: 2.8;
}
.vc-face-arrow:hover {
    background: rgba(57, 226, 111, 0.32);
    color: #39e26f;
}
.vc-face-arrow[hidden] { display: none !important; }
#view-zoom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-top: 6px; /* extra space below view cube */
}
.view-toggle-btn {
    appearance: none;
    margin: 6px 0 0;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: rgba(12, 16, 22, 0.72);
    color: #e8ecf0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: background 0.12s, color 0.12s;
}
.view-toggle-btn:hover {
    background: rgba(40, 48, 58, 0.92);
    color: #39e26f;
}
.view-toggle-btn.active {
    background: rgba(57, 226, 111, 0.22);
    color: #39e26f;
}
#view-zoom button {
    appearance: none;
    margin: 0;
    padding: 7px 0;
    border: none;
    border-radius: 8px;
    background: rgba(12, 16, 22, 0.72);
    color: #e8ecf0;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: background 0.12s, color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-zoom button svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}
#view-zoom button:hover {
    background: rgba(40, 48, 58, 0.92);
    color: #39e26f;
}
#view-zoom button:active {
    background: rgba(57, 226, 111, 0.25);
    color: #fff;
}
#view-zoom button.active {
    background: rgba(57, 226, 111, 0.22);
    color: #39e26f;
}
/* 2D tool gauges (upper-left): dial face or edge-finder kick */
.tool-gauge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 7;
    width: 148px;
    padding: 8px 8px 6px;
    background: rgba(12, 16, 22, 0.72);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
#edge-gauge {
    pointer-events: auto; /* Offset Tip button must receive clicks */
}
.tool-gauge .edge-offset-btn {
    pointer-events: auto;
    appearance: none;
    margin: 2px 0 0;
    width: 100%;
    padding: 7px 6px;
    border: none;
    border-radius: 8px;
    background: rgba(40, 48, 58, 0.95);
    color: #e8ecf0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}
.tool-gauge .edge-offset-btn:hover {
    background: rgba(57, 226, 111, 0.22);
    color: #39e26f;
}
.tool-gauge .edge-offset-btn.active {
    background: rgba(57, 226, 111, 0.28);
    color: #39e26f;
}
.tool-gauge[hidden] { display: none !important; }
.tool-gauge canvas {
    display: block;
    width: 132px;
    height: 132px;
}
.tool-gauge-readout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #39e26f;
    letter-spacing: 0.04em;
}
.tool-gauge-readout.kick {
    color: #ffb020;
}
.tool-gauge-readout.kick-hard {
    color: #ff6b5a;
}
.tool-gauge-caption {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(232, 236, 240, 0.55);
}
.tool-gauge-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(232, 236, 240, 0.72);
    margin-top: -1px;
}

/* overlays inside viewport — no borders; soft drop shadow only */
#alarm {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--accent); color: #fff;
    padding: 10px 14px; font-weight: 700; font-size: 14px;
    display: none; z-index: 10; align-items: center; gap: 12px;
    border: none; outline: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
#alarm button {
    margin-left: auto; background: #fff; color: var(--accent);
    border: none; border-radius: 4px; padding: 5px 14px;
    font-weight: 700; cursor: pointer; font-family: inherit;
}
#contact {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: #19d451; color: #04230e;
    padding: 8px 14px; border-radius: 12px;
    font-weight: 700; font-size: 12.5px; display: none; z-index: 9;
    max-width: min(520px, 86%);
    text-align: center;
    line-height: 1.35;
    border: none; outline: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Tip below flush on a top (soft band before .100″ crash) */
#contact.soft-warn {
    background: #e8910a;
    color: #1c1204;
}
#contact.at-origin {
    background: #39e26f;
    color: #04230e;
    border: none; outline: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#flash { position: absolute; inset: 0; background: #ff2222; opacity: 0; pointer-events: none; z-index: 8; transition: opacity .1s; }
#toast {
    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
    background: rgba(28, 26, 21, 0.92); color: #f6f3ec;
    padding: 7px 16px; border-radius: 6px; font-size: 12.5px;
    display: none; z-index: 9; max-width: 84%; text-align: center;
    border: none; outline: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* intro pulse marker highlight ring on panel elements */
.intro-glow {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
    animation: glowpulse 1.4s ease-in-out infinite;
}
@keyframes glowpulse {
    0%, 100% { outline-color: var(--accent); }
    50% { outline-color: rgba(200, 52, 26, 0.25); }
}

/* White content surface inside the gray offset box — height follows content */
.panel {
    width: 100%;
    flex: 0 0 auto;
    background: #fff;
    border: none;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    box-shadow: none;
}

/* Above DRO: Configure | Check Your Work | Reset */
.side-top-nav {
    display: grid;
    grid-template-columns: 1.25fr 1fr auto;
    gap: 6px;
    flex-shrink: 0;
}
.side-top-btn {
    appearance: none;
    margin: 0;
    padding: 9px 8px;
    border: none;
    border-radius: 8px;
    background: #1c1a15;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.25;
    transition: background 0.12s, color 0.12s;
}
.side-top-btn:hover {
    background: #3a342c;
}
.side-top-btn.active {
    background: var(--accent);
    color: #fff;
}
#btn-reset {
    min-width: 4.5em;
    padding-left: 10px;
    padding-right: 10px;
    background: #e8910a;
    color: #1c1204;
}
#btn-reset:hover {
    background: #f0a020;
    color: #1c1204;
}

/* challenge badge (matches scope's mystery badge) */
#challenge-badge {
    margin: 0;
    padding: 7px 10px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6b46c1, #553c9a);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    border: 1px solid #4c2f8a;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}
#challenge-badge .challenge-badge-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}
#challenge-badge small { display: block; font-weight: 500; opacity: .85; text-transform: none; letter-spacing: 0; }
#challenge-badge .challenge-badge-x {
    flex: 0 0 auto;
    appearance: none;
    margin: -2px -4px 0 0;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    border-radius: 4px;
}
#challenge-badge .challenge-badge-x:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}
#challenge-badge[hidden] { display: none; }
.setup-locked-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}
.setup-locked-note[hidden] {
    display: none !important;
}
.setup-locked-note .btn {
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Guided intro: hide view cube, zoom, and offset-arrow controls */
body.intro-active #viewcube-stack {
    display: none !important;
}
/* Guided intro: hide edge-finder 2D box (upper-left), except the edge-finder demo step */
body.intro-active:not(.intro-edge-gauge) #edge-gauge {
    display: none !important;
}
body.intro-active.intro-edge-gauge #viewport #edge-gauge {
    display: flex !important;
    top: 10px;
    left: 10px;
    z-index: 8;
}
body.intro-active .vp-fab {
    display: none !important;
}

/* ===== Viewport corner FABs (mobile only — expand view tools / 2D gauges) ===== */
.vp-fab {
    display: none; /* desktop: always show full chrome; FABs unused */
    appearance: none;
    margin: 0;
    padding: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: rgba(12, 16, 22, 0.82);
    color: #e8ecf0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    position: absolute;
    z-index: 9;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, color 0.12s;
}
.vp-fab svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}
.vp-fab:hover,
.vp-fab[aria-expanded="true"] {
    background: rgba(57, 226, 111, 0.28);
    color: #39e26f;
}
.vp-fab-view { top: 8px; right: 8px; }
.vp-fab-gauge { top: 8px; left: 8px; }
.vp-fab[hidden] { display: none !important; }
/* Probe contact chip (viewport upper-left, when T17 loaded) */
.probe-status {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 7;
    min-width: 120px;
    padding: 8px 12px;
    background: rgba(12, 16, 22, 0.72);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    pointer-events: none;
}
.probe-status[hidden] { display: none !important; }
.probe-status-title {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(232, 236, 240, 0.55);
}
.probe-status-state {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(232, 236, 240, 0.88);
}
.probe-status.is-contact .probe-status-state {
    color: #39e26f;
}

/* DRO - Haas-style POS readout set into the paper panel.
   All text white except axis letters X/Y/Z (arrow colors). */
#dro {
    background: var(--dro-bg);
    font-family: 'JetBrains Mono', monospace;
    padding: 10px 12px 9px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid #1a2a1e;
    flex-shrink: 0;
    color: #fff;
}
#dro .dro-hdr {
    display: grid;
    grid-template-columns: 28px 1fr 1.08fr;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    align-items: baseline;
}
#dro .dro-pos {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.12em;
}
#dro .dro-col-lab {
    text-align: right;
    font-weight: 600;
    color: #fff;
}
#dro .dro-work-lab { color: #fff; }
#dro .dro-row {
    display: grid;
    grid-template-columns: 28px 1fr 1.08fr;
    gap: 6px;
    align-items: baseline;
    line-height: 1.35;
    margin: 0;
    padding: 2px 4px;
    border-radius: 5px;
    transition: background 0.12s;
    color: #fff;
}
#dro .dro-row.ax-selected[data-ax="x"] { background: rgba(255, 68, 68, 0.18); }
#dro .dro-row.ax-selected[data-ax="y"] { background: rgba(68, 204, 68, 0.18); }
#dro .dro-row.ax-selected[data-ax="z"] { background: rgba(68, 136, 255, 0.18); }
#dro .dro-ax {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
}
#dro .dro-ax-x { color: var(--ax-x); }
#dro .dro-ax-y { color: var(--ax-y); }
#dro .dro-ax-z { color: var(--ax-z); }
#dro .dro-val {
    text-align: right;
    white-space: pre;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
#dro .dro-mach {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    opacity: 0.92;
}
#dro .dro-work {
    color: #fff;
    font-size: 18.5px;
    font-weight: 700;
}
#dro .dro-mach.neg,
#dro .dro-work.neg { color: #fff; }
#dro .dro-row.ax-selected .dro-mach { opacity: 1; }
#dro .dro-row { cursor: pointer; }

/* Tool line under POS rows (tool left, ROT right when set) */
#dro .dro-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px;
    border: none;
    border-top: 1px solid #808080;
    text-align: left;
}
#dro .dro-tool {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}
#dro .dro-rot {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1.35;
    white-space: nowrap;
    text-align: right;
    padding: 0;
    background: none;
    border: none;
}
#busy { display: none !important; }

/* ===== Always-on bar under DRO ===== */
#always-bar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}
#always-bar .ab-box {
    padding: 8px;
    background: #d4d0c8;
    border: none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Gray shell: WORK/TOOL OFFSETS tabs + white panel body */
#always-bar .ab-box-nav {
    flex: 0 0 auto;
    gap: 8px;
}
#always-bar .ab-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
#always-bar .ab-btn {
    appearance: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #1c1a15;
    padding: 8px 6px;
    cursor: pointer;
    line-height: 1.15;
    transition: background 0.12s, color 0.12s;
}
#always-bar .ab-btn:hover {
    background: #f0eeea;
    color: #1c1a15;
}
#always-bar .ab-btn:active,
#always-bar .ab-btn.active {
    background: #1c1a15;
    color: #fff;
}
/* Top: HOME / MEASURE / PART ZERO SET / TOOL CHANGE - one word per line */
#always-bar .ab-acts .ab-btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 10px;
    padding: 8px 4px;
    letter-spacing: 0.04em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.2;
    min-height: 3.4em;
}
#always-bar .ab-acts .ab-btn span { display: block; }
/* Middle: AXIS + INCREMENT with small labels above */
#always-bar .ab-select {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: nowrap; /* never let INC spill over AXIS */
}
#always-bar .ab-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
#always-bar .ab-group:not(.ab-group-inc) {
    flex: 0 0 auto; /* AXIS keeps fixed footprint */
}
#always-bar .ab-group-inc {
    flex: 1 1 0;
    min-width: 0; /* allow INC grid to shrink inside the row */
}
#always-bar .ab-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1c1a15;
    text-transform: uppercase;
    padding-left: 1px;
}
#always-bar .ab-group-btns {
    display: flex;
    gap: 4px;
    min-width: 0;
}
#always-bar .ab-axes .ab-ax {
    flex: 0 0 34px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
/* Unselected: black text; selected: fill matches offset-arrow color */
#always-bar .ab-axes .ab-ax { color: #1c1a15; }
#always-bar .ab-axes .ab-ax-x:hover { background: rgba(255, 68, 68, 0.14); color: #1c1a15; }
#always-bar .ab-axes .ab-ax-y:hover { background: rgba(68, 204, 68, 0.14); color: #1c1a15; }
#always-bar .ab-axes .ab-ax-z:hover { background: rgba(68, 136, 255, 0.14); color: #1c1a15; }
#always-bar .ab-axes .ab-ax-x.active,
#always-bar .ab-axes .ab-ax-x:active {
    background: var(--ax-x);
    color: #fff;
}
#always-bar .ab-axes .ab-ax-y.active,
#always-bar .ab-axes .ab-ax-y:active {
    background: var(--ax-y);
    color: #fff;
}
#always-bar .ab-axes .ab-ax-z.active,
#always-bar .ab-axes .ab-ax-z:active {
    background: var(--ax-z);
    color: #fff;
}
#always-bar .ab-inc {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-width: 0;
}
#always-bar .ab-inc .ab-btn {
    padding: 7px 2px;
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
/* Bottom: Jog − / Jog + */
#always-bar .ab-jogrow .ab-jog { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 12.5px; }
/* Panel section nav under jog: WORK/TOOL OFFSETS + PROBE + AUTO TOOL LENGTH */
#always-bar .ab-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}
#always-bar .ab-nav .ab-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 9.5px;
    padding: 8px 4px;
    letter-spacing: 0.03em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
    min-height: 3.1em;
    text-align: center;
    text-transform: uppercase;
}
#always-bar .ab-nav .ab-nav-btn span {
    display: block;
}
#always-bar .ab-nav .ab-nav-action:not(.active) {
    background: #fff;
    color: #1c1a15;
}
#always-bar .ab-nav .ab-nav-action:hover {
    background: #f0eeea;
    color: #1c1a15;
}

section { padding: 12px 14px 16px; overflow: visible; flex: 0 0 auto; display: none; }
section.active { display: block; }

.panel-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 0 0 10px;
    white-space: nowrap;
}
.note-compact { margin: 10px 0 0; font-size: 12px; line-height: 1.4; }
.btn-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.btn-stack .btn.wide { margin: 0; }
.g54-list { display: flex; flex-direction: column; gap: 6px; }
.probe-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 14px;
}
.probe-row .probe-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.probe-row select { width: 56px; }
.probe-row input[type=number] { width: 88px; }
.probe-row .btn { margin-left: auto; }
.tooltable-wrap {
    overflow-x: auto;
    margin: 0;
    border: none;
    border-radius: 0;
}
.tooltable-wrap table { margin: 0; width: 100%; table-layout: auto; }
.tooltable-wrap th,
.tooltable-wrap td { padding: 5px 4px; vertical-align: middle; }
#tooltable thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-transform: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}
.tooltable-wrap th:first-child,
.tooltable-wrap td:first-child { padding-left: 0; width: 2.2em; }
.tooltable-wrap th:last-child {
    padding-right: 0;
    white-space: nowrap;
    text-align: right;
}
.tooltable-wrap td:last-child {
    padding-right: 0;
    width: 6.5em;
    text-align: right;
    white-space: nowrap;
}
.tooltable-wrap td:last-child input {
    width: 6.25em;
    max-width: 100%;
    box-sizing: border-box;
}

h3 {
    font-family: 'JetBrains Mono', monospace;
    margin: 14px 0 8px;
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}
h3:first-child { margin-top: 0; }
.note { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.note b { color: var(--ink); }
label { font-size: 12.5px; color: var(--ink-2); }

input[type=number], select {
    background: #fdfcf8;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 5px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    width: 84px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.04);
}
input[type=number]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(200,52,26,0.15); }
input:disabled, select:disabled { background: var(--paper-2); color: var(--ink-3); }
select { width: auto; max-width: 100%; }

.grid2 { display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; margin: 6px 0; }

.btn {
    background: #fdfcf8;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.btn:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(200,52,26,0.12); }
.btn:active { background: var(--paper-2); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent-2); }
.btn.primary:hover { background: var(--accent-2); }
.btn.go { background: var(--good); color: #fff; border-color: #14582c; }
.btn.go:hover { background: #16612f; }
.btn.wide { width: 100%; margin: 4px 0; display: block; }

/* jog pad */
#jogpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 8px 0; }
.jogbtn {
    padding: 15px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    background: #fdfcf8;
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    touch-action: none;
    box-shadow: 0 1px 2px rgba(28,26,21,0.08);
}
.jogbtn:hover { border-color: #1d7a3e; color: #1d7a3e; }
.jogbtn:active { background: #1d7a3e; color: #fff; border-color: #1d7a3e; }
.incrow { display: flex; gap: 5px; margin: 6px 0; flex-wrap: wrap; }
.incbtn {
    flex: 1;
    padding: 6px 2px;
    font-size: 11.5px;
    background: #fdfcf8;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}
.incbtn.active { background: #1d7a3e; color: #fff; border-color: #1d7a3e; font-weight: 700; }

/* tool table */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
    color: var(--ink-3); text-align: left; font-weight: 600;
    padding: 3px 4px; border-bottom: 1px solid var(--rule); font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace; letter-spacing: .05em; text-transform: uppercase;
}
td { padding: 4px; border-bottom: 1px solid var(--rule); font-family: 'JetBrains Mono', monospace; }
td input { width: 74px; padding: 3px 4px; }
/* Active tool: bold T# and name only (no row fill) */
#tooltable td.tool-num,
#tooltable td.tool-name {
    font-weight: 400;
    color: var(--ink-2);
}
#tooltable td.tool-name {
    text-transform: uppercase !important;
    font-variant: normal;
}
#tooltable tr.activeT td.tool-num,
#tooltable tr.activeT td.tool-name,
#tooltable td.tool-num.is-active,
#tooltable td.tool-name.is-active {
    font-weight: 800 !important;
    color: var(--ink);
}
.loadbtn {
    padding: 3px 9px; font-size: 11px;
    background: #fdfcf8; border: 1px solid var(--rule);
    color: var(--ink-2); border-radius: 4px; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600;
}
.loadbtn:hover { border-color: var(--accent); color: var(--accent); }
tr.activeT .loadbtn { background: var(--accent); color: #fff; border-color: var(--accent-2); }

/* offsets */
.offrow {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 4px 0;
    background: transparent;
    border-radius: 0;
    border: none;
}
.offrow:focus-within {
    border: none;
    background: transparent;
}
.offrow .ax {
    width: 22px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    text-align: center;
}
.offrow .ax-x { color: var(--ax-x); }
.offrow .ax-y { color: var(--ax-y); }
.offrow .ax-z { color: var(--ax-z); }
.offrow input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Rotation row: same grid as X/Y/Z; value field + CLEAR match input height */
.offrow-rot .g54-rot-lab {
    color: var(--ink-2);
}
.offrow-rot .g54-rot-fields {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.offrow-rot .g54-rot-val {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fdfcf8;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 5px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}
.offrow-rot .g54-rot-clear {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--ink-2);
    background: #fdfcf8;
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.offrow-rot .g54-rot-clear:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* grading output */
#gradeout div, #ch-result div { padding: 6px 9px; margin: 5px 0; border-radius: 5px; font-size: 12.5px; line-height: 1.45; }
.g-ok   { background: #e4efe2; color: #1d5c31; border: 1px solid #b9d4b4; }
.g-bad  { background: #f7e3df; color: #8a2418; border: 1px solid #e4b8ae; }
.g-warn { background: #f5ecd6; color: #7a5b1a; border: 1px solid #e0cfa0; }
.g-done {
    background: linear-gradient(135deg, #1d7a3e, #14582c); color: #fff;
    font-weight: 700; text-align: center; padding: 10px !important;
    font-size: 14px !important; letter-spacing: .02em;
}
.chk { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0; font-size: 12.5px; color: var(--ink-2); }
.chk input { margin-top: 2px; }

details { margin: 8px 0; }
summary { cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 600; }
#answers {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink); line-height: 1.6; padding: 8px 10px;
    background: #fdfcf8; border: 1px solid var(--rule); border-radius: 5px; margin-top: 6px;
    white-space: pre-wrap;
}

/* challenge tab */
.stepper { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.step-btn {
    width: 38px; height: 34px; font-size: 17px; font-weight: 700;
    background: #fdfcf8; border: 1px solid var(--rule); border-radius: 6px;
    cursor: pointer; color: var(--ink); font-family: 'JetBrains Mono', monospace;
}
.step-btn:hover { border-color: var(--accent); color: var(--accent); }
.step-readout {
    flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace;
    font-size: 19px; font-weight: 700; background: #fdfcf8;
    border: 1px solid var(--rule); border-radius: 6px; padding: 4px 0;
}
#ch-level { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; margin: 4px 0; text-align: center; }
.task-card {
    background: #fdfcf8; border: 1px solid var(--rule);
    border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 8px 0;
}
.task-card b { color: var(--ink); }

/* ===== Modals (Quick Reference, Configure Work Setup) ===== */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(28, 26, 21, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--paper); border-radius: 10px;
    max-width: 880px; width: 100%; max-height: 88vh; overflow-y: auto;
    padding: 26px 32px 30px; position: relative;
    box-shadow: 0 8px 40px rgba(28, 26, 21, 0.3);
}
.setup-modal {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
    padding-bottom: 18px;
}
.setup-modal-lede {
    margin: 0 0 12px;
    color: var(--ink-3);
    font-size: 13px;
}
.setup-modal-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.setup-modal-tab {
    appearance: none;
    flex: 1;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper-2);
    color: var(--ink-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.setup-modal-tab:hover { border-color: var(--accent); color: var(--accent); }
.setup-modal-tab.active {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #fff;
}
.setup-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 2px;
}
.setup-modal-pane { display: none; }
.setup-modal-pane.active { display: block; }
.setup-modal-pane h3:first-child { margin-top: 0; }
.reset-modal,
.probe-modal,
.autotlo-modal {
    max-width: 480px;
}
.reset-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.probe-mode-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 4px;
}
.probe-mode-tab {
    flex: 1 1 0;
    margin: 0;
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--bg-2, #f0eeea);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.probe-mode-tab:hover { color: var(--ink); }
.probe-mode-tab.active {
    color: #fff;
    background: var(--accent, #c8341a);
}
.probe-mode-pane { display: none; }
.probe-mode-pane.active { display: block; }
.probe-pane-lede { margin: 8px 0 0; font-size: 13px; }
.probe-modal-fields,
.autotlo-modal-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    align-items: center;
    margin: 12px 0 4px;
}
.probe-modal-fields label,
.autotlo-modal-fields .autotlo-lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.probe-modal-fields input,
.probe-modal-fields select {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.probe-corner-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.probe-corner-btn {
    margin: 0;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    background: var(--bg-2, #f0eeea);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    min-height: 52px;
}
.probe-corner-btn:hover { color: var(--ink); background: #e8e4dc; }
.probe-corner-btn.active {
    color: #fff;
    background: var(--accent, #c8341a);
}
.probe-corner-ico {
    width: 36px;
    height: 36px;
    display: block;
}
.probe-corner-ico .pc-part {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: 0.45;
}
.probe-corner-ico .pc-L {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.probe-corner-ico .pc-arr {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    opacity: 0.9;
}
.probe-corner-btn.active .probe-corner-ico .pc-part { opacity: 0.55; }
.autotlo-modal-fields .autotlo-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.modal h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 28px; margin: 0 0 4px; }
.modal h2 em { color: var(--accent); font-style: italic; font-weight: 400; }
/* Modal action / tab buttons: no borders */
.modal .btn,
.modal .btn:hover,
.modal .btn:active,
.modal .btn.primary,
.modal .btn.primary:hover,
.modal .setup-modal-tab,
.modal .setup-modal-tab:hover,
.modal .setup-modal-tab.active {
    border: none;
    box-shadow: none;
}
.modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-3); line-height: 1;
}
.modal-close:hover { color: var(--accent); }
.modal-toolbar { display: flex; gap: 8px; position: absolute; top: 16px; right: 52px; }
.qr-lede { color: var(--ink-2); font-size: 14px; margin: 2px 0 14px; }
.qr-section-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px;
    margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.qr-section-title em { color: var(--accent); font-style: italic; font-weight: 400; }
.qr-section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 14px; }
.qr-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.qr-body b { color: var(--ink); }
.qr-eq {
    font-family: 'JetBrains Mono', monospace; font-size: 15px; text-align: center;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
    padding: 10px; margin: 10px 0; color: var(--ink);
}
.qr-eq b { color: var(--accent); }
.qr-table { margin: 10px 0; }
.qr-table td, .qr-table th { font-size: 12.5px; padding: 6px 8px; vertical-align: top; }
.qr-table td:first-child { font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.qr-fig { display: block; margin: 12px auto; max-width: 100%; }
.qr-fig-caption { text-align: center; font-size: 12px; color: var(--ink-3); margin: -4px 0 10px; font-style: italic; }
.qr-list { padding-left: 20px; margin: 8px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.qr-list li { margin: 5px 0; }
kbd {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px;
    padding: 0 5px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
}

/* ===== Guided intro: sidebar shows only the intro panel ===== */
.side-col.intro-active > .side-top-nav,
.side-col.intro-active > #challenge-badge,
.side-col.intro-active > #dro,
.side-col.intro-active > #always-bar > .ab-box-acts,
.side-col.intro-active > #always-bar > .ab-box-jog,
.side-col.intro-active .ab-nav,
.side-col.intro-active #panel > section {
    display: none !important;
}
/* Intro steps that demo the readout re-show it (showDRO in intro.js) */
.side-col.intro-active.intro-dro > #dro {
    display: block !important;
}
/* Intro: MACHINE POS only - G54 column appears at the G54 step */
#dro.mach-only .dro-hdr,
#dro.mach-only .dro-row {
    grid-template-columns: 28px 1fr;
}
#dro.mach-only .dro-work,
#dro.mach-only .dro-work-lab {
    display: none;
}
.side-col.intro-active > #always-bar {
    flex: 0 0 auto;
    gap: 0;
}
.side-col.intro-active .ab-box-nav {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    gap: 0;
}
.side-col.intro-active #panel {
    flex: 0 0 auto;
    min-height: 0;
    border-radius: 10px;
    background: var(--paper-2);
    overflow: visible;
}
/* Intro fills natural content height (no fixed panel / inner scroll) */
.intro-card {
    position: relative;
    z-index: 30;
    background: var(--paper-2);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    border-radius: 10px;
}
.intro-card[hidden] { display: none; }
.intro-title { font-family: 'Fraunces', Georgia, serif; font-size: 25px; line-height: 1.2; color: var(--ink); margin: 0; font-weight: 600; }
.intro-title em { color: var(--accent); font-style: italic; font-weight: 400; }
.intro-body { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; flex: 0 0 auto; }
.intro-body b { color: var(--ink); }
.intro-step-dots { display: flex; gap: 5px; justify-content: center; }
.intro-step-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.intro-step-dots span.on { background: var(--accent); }
.intro-try {
    background: #fdfcf8; border: 1px dashed var(--accent); border-radius: 8px;
    padding: 10px; text-align: center;
}
.intro-try[hidden] { display: none; }
.intro-try .minijog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.intro-try .minijog .jogbtn {
    width: 100%;
    min-width: 0;
}
.intro-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.intro-skip { background: none; border: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.intro-skip:hover { color: var(--accent); }
.intro-btn {
    background: #fdfcf8; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
    box-shadow: none;
}
.intro-btn:hover { background: #f0eeea; border: none; box-shadow: none; }
.intro-btn.primary { background: var(--accent); color: #fff; border: none; }
.intro-btn.primary:hover { background: var(--accent-2); border: none; }
/* Intro try-it buttons: raised; press uses X/Y/Z axis colors */
.intro-card .jogbtn {
    background: #fdfcf8;
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
    cursor: pointer;
    color: var(--ink);
}
.intro-card .jogbtn.jog-ax-x:hover {
    border-color: var(--ax-x);
    color: var(--ax-x);
    background: rgba(255, 68, 68, 0.10);
}
.intro-card .jogbtn.jog-ax-y:hover {
    border-color: var(--ax-y);
    color: var(--ax-y);
    background: rgba(68, 204, 68, 0.10);
}
.intro-card .jogbtn.jog-ax-z:hover {
    border-color: var(--ax-z);
    color: var(--ax-z);
    background: rgba(68, 136, 255, 0.10);
}
.intro-card .jogbtn.jog-ax-x:active {
    background: var(--ax-x);
    color: #fff;
    border-color: var(--ax-x);
    box-shadow: none;
    transform: translateY(1px);
}
.intro-card .jogbtn.jog-ax-y:active {
    background: var(--ax-y);
    color: #fff;
    border-color: var(--ax-y);
    box-shadow: none;
    transform: translateY(1px);
}
.intro-card .jogbtn.jog-ax-z:active {
    background: var(--ax-z);
    color: #fff;
    border-color: var(--ax-z);
    box-shadow: none;
    transform: translateY(1px);
}
/* Non-axis try buttons keep a neutral press */
.intro-card .jogbtn:not([class*="jog-ax-"]):hover {
    border-color: #1d7a3e;
    color: #1d7a3e;
}
.intro-card .jogbtn:not([class*="jog-ax-"]):active {
    background: #1d7a3e;
    color: #fff;
    border-color: #1d7a3e;
    box-shadow: none;
    transform: translateY(1px);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .bench { flex-direction: column; }
    .side-col { width: 100%; }
    .panel { width: 100%; }
    .machine-shell { align-self: stretch; }
}

/* Mobile / narrow viewport: collapse view tools & 2D gauges to corner icons */
@media (max-width: 768px) {
    /* Taller display: corner FABs sit in the top strip; give the 3D view more height */
    #viewport {
        aspect-ratio: 950 / 820;
    }

    /* AXIS / INCREMENT: stack so INC never overlaps axis buttons */
    #always-bar .ab-select {
        flex-direction: column;
        gap: 8px;
        flex-wrap: nowrap;
    }
    #always-bar .ab-group:not(.ab-group-inc),
    #always-bar .ab-group-inc {
        flex: 0 0 auto;
        width: 100%;
    }
    #always-bar .ab-axes {
        width: 100%;
    }
    #always-bar .ab-axes .ab-ax {
        flex: 1 1 0;
        min-width: 0;
    }
    #always-bar .ab-inc {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }
    #always-bar .ab-inc .ab-btn {
        font-size: 10.5px;
        padding: 8px 1px;
        letter-spacing: 0;
    }

    body:not(.intro-active) .vp-fab {
        display: flex;
    }
    body:not(.intro-active) .vp-fab[hidden] {
        display: none !important;
    }

    /* View tools (upper-right): hidden until FAB expands */
    #viewcube-stack {
        display: none;
        top: 52px;
        right: 8px;
        min-width: 0;
        max-width: calc(100% - 16px);
        padding: 6px;
        background: rgba(12, 16, 22, 0.78);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
    #viewport.view-tools-open #viewcube-stack {
        display: flex;
    }
    #viewcube {
        width: 100px;
        height: 100px;
        flex: 0 0 100px;
    }
    #view-zoom button {
        padding: 6px 0;
    }
    #view-zoom button svg {
        width: 16px;
        height: 16px;
    }
    .view-toggle-btn {
        font-size: 8px;
        padding: 6px 4px;
        margin-top: 4px;
    }

    /* 2D tool gauges + probe chip (upper-left): hidden until FAB expands */
    #viewport:not(.tool-gauge-open) #edge-gauge:not([hidden]),
    #viewport:not(.tool-gauge-open) #dial-gauge:not([hidden]),
    #viewport:not(.tool-gauge-open) #probe-status:not([hidden]) {
        display: none !important;
    }
    #viewport.tool-gauge-open #edge-gauge:not([hidden]),
    #viewport.tool-gauge-open #dial-gauge:not([hidden]),
    #viewport.tool-gauge-open #probe-status:not([hidden]) {
        top: 52px;
        left: 8px;
    }
    .tool-gauge {
        width: 128px;
        padding: 6px 6px 5px;
    }
    .tool-gauge canvas {
        width: 112px;
        height: 112px;
    }
    .probe-status {
        min-width: 100px;
        padding: 6px 10px;
    }
}

/* ===== Print: Quick Reference only ===== */
@media print {
    body.print-qr .wrap, body.print-qr #intro-card { display: none !important; }
    body.print-qr .modal-backdrop { position: static; background: none; padding: 0; display: block; }
    body.print-qr .modal { box-shadow: none; max-height: none; overflow: visible; max-width: none; padding: 0; }
    body.print-qr .modal-close, body.print-qr .modal-toolbar { display: none; }
    body.print-qr { background: #fff; }
}

/* ===== Challenge attempts pill ===== */
.ch-attempts {
    margin: 8px 0 2px;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--paper-2);
    border: 1px dashed var(--rule);
    border-radius: 7px;
}
.ch-attempts b { color: var(--accent, #14582c); }

/* ===== Award badge modal ===== */
.award-modal { text-align: center; }
.award-modal .award-badge {
    font-size: 54px;
    line-height: 1;
    margin: 4px auto 2px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.award-modal h2 { margin: 4px 0 2px; }
.award-modal .award-sub {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}
.award-modal .award-stamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-3);
    margin: 2px 0 10px;
}
.award-modal .award-name-row {
    text-align: left;
    margin: 0 auto 6px;
    max-width: 420px;
}
.award-modal h3 { margin: 10px 0 6px; }
.award-modal .award-checklist {
    text-align: left;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.award-modal .award-checklist > div {
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: 'JetBrains Mono', monospace;
}
.award-modal .reset-modal-actions { justify-content: center; margin-top: 12px; }