/* A fixed application frame. Only the active panel can scroll. */
:root { --screen-safe-top: env(safe-area-inset-top,0px); --screen-safe-bottom: env(safe-area-inset-bottom,0px); }
html { height: 100%; overflow: hidden; }
body {
  position: fixed; inset: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; overscroll-behavior: none;
}
/* Home Screen web apps have no Safari toolbar. Use the measured app viewport
   instead of fixed insets, which can resolve to a shorter box on iOS. */
html.is-ios-standalone, html.is-ios-standalone body { height: var(--standalone-viewport-height,100%); }
html.is-ios-standalone body { bottom: auto; }
html.is-ios-standalone .tool-tabs { padding-bottom: 12px; }
.masthead {
  width: 100%; max-width: 1200px; height: auto; min-height: 66px; flex: 0 0 auto;
  padding: calc(9px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 9px max(22px, env(safe-area-inset-left));
}
.brand { background: none; text-align: left; }
.brand-mark { font-size: 2rem; }
.header-right { gap: 12px; }
.header-right .edition { margin-right: 10px; }
.header-right .icon-button { width: 38px; height: 38px; }
.game-shell {
  width: 100%; max-width: 1200px; flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; padding: 0 22px;
}
.case-heading { padding: 13px 2px; align-items: center; flex: 0 0 auto; gap: 14px; }
.case-heading > div:first-child { display: flex; align-items: center; gap: 13px; }
.case-heading .eyebrow { font-size: .75rem; margin: 0; flex-shrink: 0; }
.case-heading h1 { font-size: 1.85rem; letter-spacing: -.01em; }
.job-stats { flex-direction: row; gap: 16px; padding: 0; }
.job-stats > div { display: flex; align-items: baseline; gap: 7px; padding-left: 14px; min-width: 0; }
.job-stats span { font-size: 1.1rem; }
.job-stats small { font-size: .75rem; margin: 0; }
.workbench { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; width: 100%; --bottom-dock-height: calc(136px + env(safe-area-inset-bottom)); }
.panel-stack { position: absolute; inset: 0; min-height: 0; overflow: hidden; }
.tab-panel { height: 100%; min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tab-panel[hidden] { display: none !important; }
.tab-panel:focus-visible { outline-offset: -4px; }
/* The launcher and menu share one bottom anchor, so they cannot overlap. */
.bottom-dock { position: absolute; inset: auto 0 0; z-index: 20; display: flex; flex-direction: column; pointer-events: none; }
.bottom-dock > * { pointer-events: auto; }
.tool-tabs {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px; padding: 7px 16px max(6px,env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); border-bottom: 0; background: #11191e;
}
.tool-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 58px; padding: 7px 3px; border: 1px solid transparent; border-radius: 7px;
  font-size: .875rem; line-height: 1.2; white-space: normal; color: #aab8c2;
}
.tool-tabs button[aria-current] { border-color: #534832; background: #2b291f; color: var(--amber); }
.tool-tabs button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tool-tabs button > span { font-size: .875rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tool-tabs .count { font-size: .75rem; font-weight: 400; margin-left: 0; padding: 1px 4px; }
.tool-tabs button:focus-visible { outline-offset: -2px; }
.order-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: 32px; align-items: start; max-width: 1000px; margin: 0 auto; }
.order-layout .vehicle-image { height: min(54vh, 460px); min-height: 260px; border-radius: 6px; grid-column: auto; grid-row: auto; }
.order-details .vehicle-info { padding: 4px 0 22px; }
.order-details .vehicle-info h2 { font-size: 2.5rem; }
.order-details .vehicle-info p { font-size: 1rem; }
.order-details .customer-note { margin: 0; padding: 17px 0 20px; }
.order-details .customer-note blockquote { font-size: 1rem; line-height: 1.7; }
.order-details .assignment { padding: 20px 0 0; display: block; border: 0; }
.order-details .assignment .section-label { display: block; }
.order-details .assignment > p:nth-child(2) { font-size: 1rem; max-width: none; margin-top: 10px; }
.order-details .progress-steps { margin-top: 19px; }
.order-details .progress-steps span { font-size: .75rem; }
.order-details .scenario-note { padding: 15px 0 21px; font-size: .75rem; }
.queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.queue-toolbar > span { font: .75rem var(--mono); color: var(--muted); }
.queue-toolbar .secondary-button { min-height: 44px; padding: 9px 14px; font-size: .875rem; }
.customer-note .section-label b { font-weight: 500; }
.customer-list { display: grid; gap: 10px; margin-top: 20px; }
.customer-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 1px solid #43515b; border-radius: 6px; background: #222d35; padding: 16px 14px; }
.customer-card:hover { background: #2c3a43; border-color: var(--amber); }
.customer-card[aria-current] { border-color: var(--amber); background: #302e24; }
.customer-number { flex-shrink: 0; font: .875rem var(--mono); color: var(--amber); padding-top: 4px; }
.customer-card-copy { display: block; flex: 1; min-width: 0; }
.customer-card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 10px; }
.customer-card-top strong { font-size: .9375rem; }
.customer-card-top small { color: var(--muted); font-size: .75rem; }
.customer-card.is-solved .customer-card-top small { color: var(--green); }
.customer-case-title { display: block; font: 600 1.6rem/1.15 var(--heading); margin: 5px 0 6px; }
.customer-summary { display: block; color: #bcc7ce; font-size: .875rem; line-height: 1.5; }
.customer-arrow { flex-shrink: 0; align-self: center; color: var(--amber); }
#dialog-content .session-note { font-size: .8125rem; color: var(--muted); margin-top: 17px; }
.observation-reading { font: 500 1.8rem var(--mono); color: var(--amber); margin-bottom: 17px; padding: 15px; background: #11191f; border: 1px solid #45535c; border-radius: 5px; }
.next-customer-note { color: var(--green); font-size: .9375rem; margin-top: 25px; }
.debrief-actions { align-items: center; }
.evidence-choice { overflow-wrap: anywhere; }
.evidence-choice b { flex-shrink: 0; }
.case-heading > div:first-child { min-width: 0; }
.job-stats { flex-shrink: 0; }
#panel-test { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 16px; }
.bench-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; flex: 0 0 auto; max-width: 850px; width: 100%; margin: 0 auto; }
.bench-toolbar > div:first-child { display: contents; }
.bench-toolbar h2 { grid-column: 1; grid-row: 1; font-size: 1.75rem; }
.bench-toolbar p { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.bench-tools { grid-column: 2; grid-row: 1; display: flex; gap: 8px; align-items: center; }
.bench-tools .secondary-button { font-size: .875rem; padding: 8px 12px; min-height: 38px; font-weight: 500; }
.bench-tools .icon-button { height: 38px; width: 38px; }
.test-rig { position: relative; display: flex; flex-direction: column; gap: 0; flex: 1 0 375px; min-height: 375px; max-width: 850px; width: 100%; margin: 0 auto; isolation: isolate; }
.circuit { flex: 1 1 0; min-height: 145px; position: relative; border-radius: 7px 7px 0 0; border-bottom: 0; overflow: hidden; }
.circuit svg { display: block; width: 100%; height: 100%; max-height: none; position: absolute; inset: 0; }
.meter { flex: 0 0 auto; padding: 0 15px 13px; margin: 0; border-radius: 0 0 8px 8px; box-shadow: 0 4px 0 #0b1115; border-color: #4a5c68; position: relative; background: #253039; }
.socket-row { display: flex; justify-content: space-between; gap: 25px; margin: 0 3px 6px; min-height: 42px; }
.socket-button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 2px 8px; background: transparent; border-bottom: 2px solid transparent; border-radius: 0 0 4px 4px; text-align: left; }
.socket-button.active { border-color: #baa459; background: #354047; }
.socket-button small { display: block; font: 400 .75rem/1.3 var(--mono); color: #aebbc4; }
.socket-button strong { display: block; font-size: .875rem; font-weight: 500; line-height: 1.35; }
.socket-pin { display: block; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #8f9ba7; background: #03080c; box-shadow: 0 0 0 3px #0b1319; flex-shrink: 0; }
.socket-pin.red-pin { border-color: #ee7169; }
.meter-screen { min-height: 90px; padding: 5px 12px 7px; border-width: 2px; }
.meter-screen > span:first-child { font-size: .75rem; letter-spacing: .045em; line-height: 1.4; }
.meter-screen > div { margin-top: -10px; line-height: 1; }
.meter-screen strong { font-size: 2.8rem; line-height: 1.25; }
.meter-screen .meter-unit { font-size: 1.2rem; }
.meter-screen > span:last-child { font-size: .75rem; line-height: 1.3; }
.meter-top { margin: 2px 0; min-height: 27px; color: #b6c4ce; font-size: .75rem; }
.meter-top .text-button { min-height: 27px; padding: 3px 0; font-size: .875rem; font-family: var(--body); letter-spacing: 0; }
.measure-actions { margin-top: 1px; gap: 10px; }
.measure-actions button { font-size: .9375rem; min-height: 44px; }
.measure-actions button > span:last-child { font-size: .75rem; }
.lead-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; opacity: 0; }
.lead-layer.ready { opacity: 1; }
.lead-shadow,.lead { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lead-shadow { stroke: #020608; stroke-width: 7px; opacity: .8; }
.lead { stroke-width: 4.3px; }
.black-lead { stroke: #60717e; }
.red-lead { stroke: #e55b54; }
.probe-handle { pointer-events: all; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; outline: none; }
.probe-handle.dragging { cursor: grabbing; filter: drop-shadow(0 4px 5px #0009); }
.probe-hit { fill: transparent; stroke: transparent; stroke-width: 2px; }
.probe-handle:focus-visible .probe-hit { stroke: var(--amber); }
.probe-needle { stroke: #d7e0e5; stroke-width: 4px; stroke-linecap: round; }
.probe-tip { fill: #f7fafb; stroke: #2b343a; stroke-width: 1px; }
.probe-grip { stroke-width: 1.5px; }
.black-handle .probe-grip { fill: #26343e; stroke: #9baebb; }
.red-handle .probe-grip { fill: #e6635b; stroke: #ffb4a4; }
.probe-ribs { fill: none; stroke: #080f1566; stroke-width: 2px; }
.probe-mark { fill: #e2e9ec; }
.probe-node.snap-target .node-ring { stroke: var(--amber); stroke-width: 5px; fill: #8a7132; filter: drop-shadow(0 0 7px #ffd66a); }
.probe-node.snapped .node-ring { animation: terminal-snap .42s ease-out; }
.test-rig.is-dragging .circuit { border-color: #68766c; }
.probe-handle[aria-disabled=true] { cursor: default; }
#probe-dialog .probe-selectors { margin: 20px 0 24px; }
#probe-dialog .probe-label { font-size: .75rem; min-height: 40px; }
#probe-dialog select { font-size: 1rem; min-height: 48px; }
.toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
@keyframes terminal-snap { 0% { stroke-width: 8px; filter: drop-shadow(0 0 12px #f9c449); } 100% { stroke-width: 2px; } }
@media (max-width: 750px) {
  .masthead { min-height: 58px; padding-right: max(15px,env(safe-area-inset-right)); padding-left: max(15px,env(safe-area-inset-left)); }
  .brand { font-size: .875rem; gap: 9px; }
  .brand-mark { font-size: 1.7rem; padding: 3px 6px 5px; }
  .edition { display: none; }
  .game-shell { padding: 0 max(0px,env(safe-area-inset-right)) 0 max(0px,env(safe-area-inset-left)); }
  .case-heading { padding: 10px 15px; }
  .case-heading h1 { font-size: 1.7rem; }
  .case-heading > div:first-child { gap: 9px; }
  .case-heading > div:first-child { flex-wrap: wrap; gap: 2px 9px; }
  .case-heading .eyebrow { margin: 0; }
  .job-stats { gap: 11px; }
  .job-stats > div { gap: 5px; padding-left: 10px; }
  .job-stats span { font-size: 1rem; }
  .job-stats small { font-size: .75rem; }
  .workbench { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .tab-panel { padding: 20px 17px; }
  .tool-tabs { gap: 4px; padding: 6px 8px max(6px,env(safe-area-inset-bottom)); }
  .tool-tabs button { min-height: 58px; padding: 6px 1px; }
  .tool-tabs button > span { font-size: .875rem; gap: 3px; }
  .tool-tabs .count { position: absolute; top: 3px; left: calc(50% + 10px); font-size: .75rem; padding: 1px 4px; }
  #tab-evidence { position: relative; }
  .order-layout { grid-template-columns: 1fr; gap: 20px; }
  .order-layout .vehicle-image { height: clamp(150px,25dvh,250px); min-height: 0; }
  .order-layout .vehicle-image img { object-position: 50% 55%; }
  .order-details .vehicle-info { padding-top: 0; padding-bottom: 15px; }
  .order-details .vehicle-info h2 { font-size: 2.2rem; }
  .queue-toolbar { margin-bottom: 17px; padding-bottom: 14px; }
  #panel-test { padding: 9px 12px 12px; gap: 7px; }
  .bench-toolbar { gap: 3px 8px; }
  .bench-toolbar h2 { font-size: 1.5rem; }
  .bench-tools { gap: 6px; }
  .bench-tools .secondary-button { padding: 7px 10px; }
  .test-rig { min-height: 370px; flex-basis: 370px; }
  .circuit { min-height: 138px; }
  .circuit svg { height: 100%; }
  .node-caption { font-size: 24px; }
  .cable-label { font-size: 21px; }
  .positive-label { transform: translateY(57px); }
  .ground-label { transform: translateY(-64px); }
  .wire-label:not(.cable-label) { display: none; }
  .meter { padding: 0 10px 10px; }
  .socket-row { gap: 8px; margin: 0 0 4px; }
  .socket-button { gap: 8px; padding: 3px 7px; }
  .socket-button small { font-size: .75rem; }
  .socket-button strong { font-size: .875rem; }
  .meter-screen { padding: 4px 9px 6px; }
  .meter-screen strong { font-size: 2.6rem; }
  .meter-screen > span:first-child { font-size: .75rem; letter-spacing: 0; }
  .meter-screen > div { margin-top: -8px; }
  .meter-top { font-size: .75rem; }
  .measure-actions { gap: 8px; }
  .measure-actions button { font-size: .875rem; padding: 10px 4px; }
  .measure-actions button > span:last-child { display: none; }
}
@media (max-width: 370px) {
  .case-heading .eyebrow { display: none; }
  .case-heading h1 { font-size: 1.65rem; }
  .bench-tools .secondary-button { padding: 7px 8px; }
  .socket-button { padding-right: 2px; padding-left: 4px; gap: 7px; }
  .socket-button small { font-size: .75rem; letter-spacing: -.04em; }
  .tool-tabs { padding-left: 3px; padding-right: 3px; gap: 2px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .masthead { min-height: 48px; padding-top: 5px; padding-bottom: 5px; }
  .case-heading { padding-top: 6px; padding-bottom: 6px; }
  .test-rig { min-height: 330px; flex-basis: 330px; }
  .tool-tabs button { flex-direction: row; min-height: 40px; }
  .tool-tabs { padding-top: 3px; padding-bottom: max(3px,env(safe-area-inset-bottom)); }
}

/* Approved Fault Found monogram. */
.brand-logo { display: block; width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px; object-fit: cover; }
@media (max-width: 750px) { .brand-logo { width: 38px; height: 38px; border-radius: 8px; } }

/* A passive touch indicator can paint over the full-width menu without a
   reserved gutter. Scrolling, focus and probe gestures remain native. */
.panel-scroll-indicator { display: none; }
@media (hover: none) and (pointer: coarse) {
  .has-scroll-indicator .tab-panel { scrollbar-width: none; }
  .has-scroll-indicator .tab-panel::-webkit-scrollbar { display: none; width: 0; }
  .has-scroll-indicator .panel-scroll-indicator { display: block; position: absolute; top: 0; bottom: 0; right: 1px; width: 3px; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .2s; }
  .has-scroll-indicator .panel-scroll-indicator.is-scrolling { opacity: .7; }
  .panel-scroll-indicator > span { display: block; width: 100%; border-radius: 3px; background: #acb2b5; }
}