/* ============================================================
   BLACKLENS — Pre-Grade Studio
   Brand theme: dark #262626 · light #F2F2F2 · red #DC4F4C
   (palette from assets/dark-bg-logo.png / light-bg-logo.png)
   ============================================================ */

/* BLACKLENS brand palette — from assets/dark-bg-logo.png
   dark bg #262626 · light bg #F2F2F2 · red #DC4F4C
   grays #D9D9D9 / #A6A6A6 / #7F7F7F / #8A8A8A · tick #0D0D0D */
:root {
  --bg: #262626;
  --bg2: #1E1E1E;
  --panel: #2C2C2C;
  --card: #383838;
  --line: #454545;
  --text: #F2F2F2;
  --muted: #A6A6A6;
  --muted-2: #8A8A8A;
  --light: #F2F2F2;
  --gray-1: #D9D9D9;
  --gray-2: #A6A6A6;
  --gray-3: #7F7F7F;
  --ink: #0D0D0D;
  --accent: #DC4F4C;
  --accent-dn: #C2403D;
  --neon: #39FF14;
  --neon-red: #FF2D2D;
  --green: #62a862;
  --green-soft: #9fd89f;
  --yellow: #c9a83c;
  --yellow-soft: #efe08a;
  --orange: #cf7c34;
  --red: #DC4F4C;
  --radius: 12px;

  /* ==========================================================
     DIMENSIONAL TOKENS — the redesign's single source of truth.
     Proposed 2026-08-22, tuned for COMFORT AT 1920 (the density
     policy: at 1366 side panels scroll inside themselves, the
     page itself never does).

     Today's app uses 17 font sizes, 13 gaps and 10 radii, all
     bespoke. These replace them. Change a number here and the
     DESIGN page — and, once propagated, the whole app — follows.
     ========================================================== */

  /* type — 6 steps */
  --fs-xs: 11px;         /* captions, table meta */
  --fs-sm: 12.5px;       /* secondary text, field labels */
  --fs-md: 14px;         /* body: the default for anything read */
  --fs-lg: 16px;         /* card titles, panel headings */
  --fs-xl: 20px;         /* section titles, prominent readouts */
  --fs-display: 28px;    /* page titles, the DRO */

  /* spacing — every gap, pad and margin comes from these */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* radius — three, not ten */
  --r-sm: 4px;           /* inputs, chips */
  --r-md: 8px;           /* buttons, tiles */
  --r-lg: 14px;          /* cards, panels */

  /* control heights — buttons and inputs align by sharing them */
  --ctl-sm: 26px;
  --ctl-md: 32px;
  --ctl-lg: 40px;

  /* the fixed panel widths (everything else is derived) */
  --panel-narrow: 244px;
  --panel-wide: 300px;
  --hair: 1px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
h1 { font-size: 24px; letter-spacing: .3px; }
h2 { font-size: 20px; }
input, select, textarea {
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------- buttons / chips / badges ---------- */
.btn {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .12s, transform .05s;
}
.btn:hover { background: #424242; }
.btn:active { transform: translateY(1px); }
/* red metallic finish, shared by every accent button */
.btn-accent {
  background: linear-gradient(180deg, #f0817d 0%, #dc4f4c 46%, #b03835 100%);
  border-color: #932c29; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.4);
}
.btn-accent:hover { background: linear-gradient(180deg, #f4918d 0%, #e25a57 46%, #bc3f3c 100%); }
.btn-accent:disabled { background: linear-gradient(180deg, #7a4a49, #5e3736); box-shadow: none; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-block { width: 100%; }
.file-btn { display: inline-flex; align-items: center; }

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .4px; }
.badge-on { background: #1d3a24; color: #7fe09a; border: 1px solid #2c5c38; }
.badge-off { background: #3a2a2a; color: #d99; border: 1px solid #5c3a3a; }

.chip {
  display: inline-block; min-width: 44px; text-align: center; font-weight: 700;
  border: none; border-radius: 7px; padding: 6px 8px; font: inherit; cursor: pointer; color: #17181a;
}
.chip-g { background: var(--green); color: #fff; }
.chip-y { background: var(--yellow); color: #fff; }
.chip-o { background: var(--orange); color: #fff; }
.chip-r { background: var(--red); color: #fff; }
.chip-na { background: var(--line); color: var(--muted); }
.chip.sel { outline: 3px solid #fff3; }

.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { background: none; border: none; color: var(--muted); font: inherit; font-weight: 600; padding: 7px 16px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); }

/* ---------- views ---------- */
.view { display: none; }
.view.active { display: block; }

/* ---------- login ---------- */
#view-login.active { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 36px 32px; text-align: center;
}
.brand-block { margin-bottom: 26px; }
.brand-mark { width: 72px; height: 72px; }
.brand-word { font-size: 26px; letter-spacing: 2px; margin-top: 10px; }
.brand-word b { font-weight: 800; }
.brand-tag { font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-top: 4px; }
.login-card h1 { font-size: 17px; margin-bottom: 18px; font-weight: 600; }
.login-card form { display: grid; gap: 14px; text-align: left; }
.login-card label { font-size: 10.5px; letter-spacing: 1.5px; color: var(--muted); display: grid; gap: 6px; font-weight: 700; }
.login-note { margin-top: 20px; font-size: 12px; color: var(--muted); }
.login-error { color: var(--red); font-size: 12.5px; }

/* ---------- splash (after sign-in) ---------- */
#splash {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#splash.fade-out { opacity: 0; transition: opacity .5s ease; }
/* dim-to-black veil between the splashes and before the landing page */
#splash::after, #splash2::after {
  content: ''; position: absolute; inset: 0; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .5s ease; z-index: 9;
}
#splash.dim::after, #splash2.dim::after { opacity: 1; }
.splash-inner { text-align: center; user-select: none; }
.splash-mark { width: min(40vmin, 240px); height: auto; overflow: visible; }
.splash-mark g { transform-box: fill-box; transform-origin: center; }
.sp-left   { animation: sp-from-left  .55s cubic-bezier(.2,.8,.2,1) both .05s; }
.sp-top    { animation: sp-from-top   .55s cubic-bezier(.2,.8,.2,1) both .20s; }
.sp-right  { animation: sp-from-right .55s cubic-bezier(.2,.8,.2,1) both .35s; }
.sp-bottom { animation: sp-from-bot   .55s cubic-bezier(.2,.8,.2,1) both .50s; }
.sp-ticks  { opacity: 0; animation: sp-fade .4s ease both 1.0s; }
.sp-card   { animation: sp-pop .55s cubic-bezier(.34,1.56,.64,1) both 1.15s; }
.splash-word {
  font-size: clamp(26px, 5vmin, 36px); letter-spacing: 6px; margin-top: 26px;
  opacity: 0; animation: sp-rise .5s ease both 1.5s;
}
.splash-word b { font-weight: 800; }
.splash-tag {
  font-size: clamp(10px, 2vmin, 13px); letter-spacing: 7px; color: var(--muted-2);
  margin-top: 8px; opacity: 0; animation: sp-rise .5s ease both 1.7s;
}
@keyframes sp-from-left  { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-from-top   { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-from-right { from { transform: translateX(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-from-bot   { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-pop  { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sp-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #splash *, #splash2 * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---- second splash: the brand mark dissolves into dark smoke, revealing
       the developer names — minimal, modern, mysterious ---- */
#splash2 {
  position: fixed; inset: 0; z-index: 200; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #101013 0%, #060607 72%);
}
#splash2.fade-out { opacity: 0; transition: opacity .5s ease; }
/* drifting smoke layer */
.sp2-smoke { position: absolute; inset: -6%; width: 112%; height: 112%;
  opacity: 0; filter: blur(6px); pointer-events: none; mix-blend-mode: screen; }
#splash2.play .sp2-smoke { animation: sp2-smoke-in 1.6s ease both .1s; }
.sp2-inner { position: relative; text-align: center; user-select: none; padding: 0 24px; }
/* the brand mark, then it dissolves upward into the smoke */
.sp2-mark { width: min(26vmin, 150px); height: auto; overflow: visible; opacity: 0;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.6)); }
#splash2.play .sp2-mark {
  animation: sp2-mark-in .8s cubic-bezier(.2,.8,.2,1) both,
             sp2-mark-dissolve 1.2s cubic-bezier(.4,0,.6,1) 1.5s forwards;
}
.sp2-credit { font-size: clamp(9px, 1.9vmin, 12px); letter-spacing: 6px; text-transform: uppercase;
  color: var(--muted-2); opacity: 0; margin-top: -8px; }
#splash2.play .sp2-credit { animation: sp-fade .7s ease both 2.3s; }
.sp2-names { display: flex; align-items: baseline; justify-content: center; gap: clamp(12px, 2.4vmin, 24px); margin-top: 12px; }
.sp2-names span { font-size: clamp(34px, 8.4vmin, 74px); font-weight: 800; letter-spacing: 2px; color: #f4f4f6;
  opacity: 0; text-shadow: 0 2px 34px rgba(220,79,76,.28), 0 0 60px rgba(0,0,0,.5); }
.sp2-names i { font-style: normal; font-weight: 400; font-size: clamp(20px, 4.4vmin, 34px); color: var(--accent); opacity: 0; }
#splash2.play .sp2-names span { animation: sp2-name-in 1s cubic-bezier(.2,.8,.2,1) both 2.0s; }
#splash2.play .sp2-names i { animation: sp2-x-in .8s cubic-bezier(.2,.8,.2,1) both 2.35s; }
.sp2-prop { margin-top: 20px; font-size: clamp(10px, 2vmin, 13px); letter-spacing: 4px; color: var(--muted-2);
  text-transform: uppercase; opacity: 0; }
.sp2-prop b { color: #d9d9d9; font-weight: 800; }
#splash2.play .sp2-prop { animation: sp-fade .8s ease both 2.9s; }
@keyframes sp2-smoke-in { from { opacity: 0; } to { opacity: .5; } }
@keyframes sp2-mark-in { from { opacity: 0; transform: scale(.82); filter: blur(12px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes sp2-mark-dissolve { from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translateY(-52px) scale(1.1); filter: blur(20px); } }
@keyframes sp2-name-in { from { opacity: 0; letter-spacing: 16px; filter: blur(8px); }
  to { opacity: 1; letter-spacing: 2px; filter: blur(0); } }
@keyframes sp2-x-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* ---------- app shell: sidebar + main ---------- */
#app { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }
#app.no-sb { grid-template-columns: minmax(0, 1fr); }
#main { min-width: 0; }
#sidebar {
  background: var(--bg2); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 16px;
  z-index: 60;
}
.sb-logo { background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 14px; }
.sb-logo img { width: 40px; height: 40px; display: block; }
.sb-btn {
  background: none; border: none; color: var(--muted-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 62px; padding: 9px 2px; border-radius: 12px;
  font-size: 8.5px; letter-spacing: 1px; font-weight: 700; font-family: inherit;
}
.sb-btn .ico {
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; transition: background .12s;
}
.sb-btn:hover { color: var(--text); }
.sb-btn:hover .ico { background: var(--card); }
/* the selected mode wears the brand red on the WHOLE button (operator 2026-10-03) */
.sb-btn.on { color: #fff; background: var(--accent); }
.sb-btn.on .ico { background: rgba(0, 0, 0, .28); outline: none; color: #fff; }
.sb-btn.on:hover .ico { background: rgba(0, 0, 0, .4); }
.sb-spacer { flex: 1; }

/* ---------- topbar ---------- */
#topbar {
  display: flex; align-items: center; gap: 18px; padding: 9px 18px;
  background: var(--bg2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-brand { display: flex; flex-direction: column; cursor: pointer; line-height: 1.25; }
.topbar-brand .tb-word { font-size: 15px; letter-spacing: 3px; }
.topbar-brand .tb-word b { font-weight: 800; }
.topbar-brand .tb-tag { font-size: 8.5px; letter-spacing: 3px; color: var(--muted-2); }

.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Consolas, monospace; font-size: 11.5px; letter-spacing: 1px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.status-chip.on { color: #7fe09a; border-color: #2c5c38; }
.status-chip.on i { background: #7fe09a; }
/* step-by-step click-through: numbered chevron trail */
#step-nav { display: flex; gap: 4px; margin: 0 auto; align-items: center; }
.step-btn {
  background: none; border: 1px solid transparent; color: var(--muted); font: inherit;
  padding: 5px 12px 5px 7px; border-radius: 999px; cursor: pointer; display: flex; gap: 8px; align-items: center;
}
.step-btn .step-num {
  background: var(--card); border-radius: 50%; width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.step-btn .step-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.step-btn .step-txt b { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.step-btn .step-sub { font-size: 9.5px; color: var(--muted-2); letter-spacing: .3px; }
.step-btn:hover { color: var(--text); }
.step-btn.on { background: var(--card); color: var(--text); border-color: var(--line); }
.step-btn.on .step-num { background: var(--accent); color: #fff; }
.step-arrow { color: var(--muted-2); font-size: 15px; user-select: none; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Adding the STAGE chip beside SCOPE pushed this row past a 1366 viewport,
   and the horizontal scrollbar it caused dragged a vertical one in with it.
   Below 1500 the chips go compact rather than the row going wide. */
@media (max-width: 1500px) {
  .topbar-right { gap: 7px; }
  .status-chip { font-size: 10px; letter-spacing: .4px; padding: 3px 8px; gap: 5px; }
  .status-chip i { width: 6px; height: 6px; }
  /* the seven-step trail is the widest thing up here; tighten it rather
     than let the row push the whole page into a horizontal scroll */
  #step-nav { gap: 1px; }
  .step-btn { padding: 4px 8px 4px 5px; gap: 6px; }
  .step-btn .step-num { width: 20px; height: 20px; font-size: 11px; }
  .step-btn .step-txt b { font-size: 11.5px; }
  .step-arrow { margin: 0 -2px; }
  /* the track number is already on the slab tag of every studio page, so
     the topbar copy is what gives way when the row runs out of room */
  #track-badge { display: none; }
  #btn-signout { padding: 4px 9px; font-size: 11px; }
}
.track-badge { font-family: Consolas, monospace; font-size: 13px; color: var(--muted); background: var(--card); padding: 4px 10px; border-radius: 8px; }

/* ---------- home = the ORDERS page (INSPECT design language, 2026-09-23) ---------- */
#view-home.active { display: block; padding: 8px 14px 10px; overflow: hidden; }   /* the board fills the page; its columns scroll */
#view-home, #view-home button { font-family: var(--jb-font); }
.session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.session-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; }
.session-card .track { font-family: Consolas, monospace; color: var(--muted); font-size: 12.5px; }
.session-card .name { font-weight: 700; font-size: 15px; }
.session-card .grade-pill { font-size: 20px; font-weight: 800; color: var(--accent); }
.session-card .row-gap { margin-top: 4px; }
.session-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 60px 0; border: 1px dashed var(--line); border-radius: var(--radius); }
.home-foot { margin-top: 34px; font-size: 12px; text-align: center; }

/* ---------- shared page layout ---------- */
/* One gutter for every working page. Full-Card was missing it, which made
   its header wider than Centering's and moved the pre-grade tag between
   steps. Keep new pages in this list so they inherit the same frame. */
#view-fullcard.active, #view-capture.active, #view-inspect.active,
#view-results.active, #view-labreport.active { display: block; padding: 12px clamp(12px, 2vw, 28px) 24px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
#view-capture .page-head p, #view-inspect .page-head p { display: none; }
/* fixed height so hint-text swaps never shift the page — all 3 studio
   pages share it so the stage starts at the same Y everywhere */
#view-fullcard .hint-line, #view-capture .hint-line, #view-inspect .hint-line { margin-bottom: 8px; padding: 0 12px;
  height: 28px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
#view-capture .cap-chips { margin-bottom: 8px; }
.page-head-right { display: flex; gap: 12px; align-items: center; }
.hint-line { font-family: Consolas, monospace; font-size: 11.5px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-bottom: 12px; }
.row-gap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.cap-layout { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cap-main { min-width: 0; }

/* ---------- locked studio grid (Full-Card / Centering / Inspect) ----------
   ONE template for all three studio pages, so the live view and every
   section sit at the SAME position when you step between them:
   | sd | rail | stage | functions | sd | calibration | sd | results | sd | guide |
   The widths are variables so the pages share one source of truth. */
:root {
  --sd: 34px;            /* labeled section divider */
  --c-rail: 34px;        /* reserved future tool rail */
  --c-funcs: 292px;      /* operation / function boxes */
  --c-cal: 292px;        /* calibration / microscope / lens — wide enough
                            that the Live View Calibration card never clips */
  --c-results: 292px;    /* per-page results column */
  --c-guide: 96px;       /* grading-guide rail */
}
.cap-layout.locked,
.cap-layout.locked.fcgrid {
  display: grid; column-gap: 6px; row-gap: 0; align-items: stretch;
  grid-template-columns:
    var(--sd) var(--c-rail) minmax(0, 1fr) var(--c-funcs)
    var(--sd) var(--c-cal)
    var(--sd) var(--c-results)
    var(--sd) var(--c-guide);
}
.future-rail {
  border: 1px dashed #333; border-radius: 10px; align-self: stretch;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #1d1d1d 10px, #1d1d1d 20px);
}
.fc-funcs { display: flex; flex-direction: column; gap: 8px; }
.fn-card { padding: 9px 10px; display: grid; gap: 6px; }
.cam-stack { display: grid; gap: 8px; }

/* grid tracks set every column's width; drop the flex-era fixed widths so
   each child fills its track instead of fighting it */
.cap-layout.locked > .cap-tools-col,
.cap-layout.locked > .side-panel,
.cap-layout.locked > .ten-chance {
  width: auto; min-width: 0; max-width: none; flex: none; align-self: start;
}

.stage-tag {
  position: absolute; top: 6px; left: 6px; z-index: 6; pointer-events: none;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--muted);
  background: #000b; padding: 3px 8px; border-radius: 5px;
}
.stage-tag.live { color: #7fe09a; }

/* reserved-slot placeholder: keeps a locked box present before its data exists */
.slot-soon { border-style: dashed; }
.slot-soon-p { font-size: 11px; line-height: 1.5; color: var(--muted-2); margin: 0; }
.slot-soon-guide { text-align: center; }

/* AUTO-CENTERING RESULTS: front on top, back below, preliminary lines drawn */
.fc-ac { margin: 0 0 8px; }
.fc-ac:last-child { margin-bottom: 0; }
.fc-ac { display: flex; flex-direction: column; align-items: center; }
.fc-ac canvas { display: block; border-radius: 9px; background: #161616; border: 1px solid #333;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.fc-ac figcaption { width: 100%; }
.fc-ac figcaption { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: .8px; color: var(--muted-2); font-weight: 800; margin-top: 4px; }
.fc-ac figcaption b { font-family: Consolas, monospace; font-size: 11px; color: var(--text); font-weight: 700; letter-spacing: 0; }

/* ---------- section divider: red rule + vertical caption ---------- */
.sec-div {
  position: relative; align-self: stretch; width: var(--sd);
  display: flex; align-items: center; justify-content: center;
}
.sec-div::before {                       /* the hairline itself */
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
  box-shadow: 0 0 8px rgba(220,79,76,.35);
}
.sec-div::after {                        /* vertical caption, read bottom-up */
  content: attr(data-sec); position: relative; z-index: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; white-space: nowrap;
  color: var(--muted); text-transform: uppercase;
  background: var(--bg); padding: 10px 0; border-radius: 6px;
}
.side-panel { display: grid; gap: 9px; align-content: start; flex: 0 1 270px; min-width: 236px; max-width: 300px; }
#view-fullcard .side-panel, #view-capture .side-panel, #view-inspect .side-panel { max-height: calc(100vh - 254px - var(--slabrow)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
/* all three studio pages share the same header/hint stack now, so the
   stage height formula is the shared .stage.portrait one — no overrides */
#view-capture .card, #view-inspect .card { padding: 11px 12px; }
#view-capture .card-head, #view-inspect .card-head { margin-bottom: 6px; }
#view-capture .card select { font-size: 12.5px; padding: 6px 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.card select, .card input[type=number] { margin-top: 6px; }
.card .row-gap { margin-top: 8px; }

/* ---------- chips rows ---------- */
.cap-chips, .ins-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.chips-inline { display: contents; }
.zone-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 7px 12px; font: inherit; font-weight: 700; font-size: 12px;
  letter-spacing: .6px; cursor: pointer;
}
.zone-chip.on { border-color: #5b8dd6; outline: 1px solid #5b8dd6; }
.zone-chip .tick { width: 16px; height: 16px; border-radius: 5px; background: var(--card); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.zone-chip.done .tick { background: var(--green); color: #fff; }
.zone-chip .flag { font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.zone-chip .flag.minor { background: #4b431f; color: var(--yellow-soft); }
.zone-chip .flag.major { background: #4b2a1f; color: #f0b090; }

/* ---------- stage ---------- */
.stage {
  position: relative; background: #000; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 16/9; max-height: 62vh; width: 100%;
}
.stage video, .stage canvas, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* portrait measuring screen (camera feed rotated 90° CW in-app) */
.stage.portrait { aspect-ratio: 9/16; height: max(400px, calc(100vh - 300px - var(--slabrow))); max-height: none; width: auto; max-width: 100%; margin: 0 auto; }
.stage video.rot90 {
  inset: auto; top: 50%; left: 50%;
  transform: translate(var(--panx, 0), var(--pany, 0)) translate(-50%, -50%) rotate(90deg) scale(var(--zoom, 1));
  /* width/height (swapped to stage dims) are set by JS · --zoom is the wheel step · --panx/y is the middle-drag pan */
}
/* upside-down camera mount: 90° + 180° = 270° */
.stage video.rot90.flip180 {
  transform: translate(var(--panx, 0), var(--pany, 0)) translate(-50%, -50%) rotate(270deg) scale(var(--zoom, 1));
}
.stage-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 20px; background: repeating-linear-gradient(45deg, #131315, #131315 12px, #17181a 12px, #17181a 24px);
}
/* fixed height + nowrap: the px/mm badge appears after plotting and must
   not grow the legend (that shifted the whole layout) */
.stage-legend { display: flex; gap: 10px; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; padding: 0; height: 26px; flex: none;
  width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; }
/* the badge reserves room for the longest reading (9999 px = 999.99 mm)
   so its digit count can never move anything */
#cap-px-badge { display: inline-block; min-width: 132px; text-align: left;
  font-family: Consolas, monospace; font-variant-numeric: tabular-nums; }
.cap-stage-wrap { min-width: 0; }
/* equal-width digits everywhere numbers update live */
.bw-grid b, .ps-deds, .rdg-v, .cs-val, .bc-hl-val, .co-mini td, .gc-total, .sr-total
  { font-variant-numeric: tabular-nums; }
.leg-cut { color: var(--neon-red); letter-spacing: 2px; }
.leg-print { color: var(--neon-red); }
.leg-reticle { color: var(--neon-red); font-weight: 700; }
#cap-canvas { z-index: 3; }
/* reticle sits ABOVE the capture so the crosshair stays visible */
#cap-reticle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
/* right-click rubber-band region: inverted preview while dragging */
.rubber {
  position: absolute; z-index: 6; pointer-events: none;
  border: 1px dashed #FF2D2D;
  backdrop-filter: invert(1); -webkit-backdrop-filter: invert(1);
}
.stage.cal-mode { outline: 2px solid var(--neon); }
.cap-stage-wrap { flex: none; }

/* ---- wheel zoom: a CSS scale on the imagery only (loupe/grab/measure
   keep reading the unscaled source) ---- */
.stage > video, .stage > canvas, .stage > #ins-shot-wrap, .stage > .lens-stage-overlay {
  transform: translate(var(--panx, 0), var(--pany, 0)) scale(var(--zoom, 1)); transform-origin: center center;
}
.stage > .grid-ov, .stage > .frame-ov, .stage > .stage-tag,
.stage > .grid-btn, .stage > .stage-empty, .stage > .lens-stage-tag { transform: none; }

/* ---- reference grid overlay (white 1 px) — toggled on every live view ---- */
.grid-ov {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 19.5px, rgba(255,255,255,.72) 19.5px, rgba(255,255,255,.72) 20.5px, transparent 20.5px),
    linear-gradient(to right,  transparent 19.5px, rgba(255,255,255,.72) 19.5px, rgba(255,255,255,.72) 20.5px, transparent 20.5px);
  background-size: 40px 40px;          /* the tile SIZE is what lets centring bite */
  background-position: center center;  /* first tile centred → a line through the middle */
}
/* card-placement frame canvas — sits above the feed, below the reticle */
.frame-ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
/* grid on/off button, bottom-right of every stage */
.grid-btn {
  position: absolute; right: 6px; bottom: 6px; z-index: 7; cursor: pointer;
  width: 28px; height: 28px; border-radius: 7px; font-size: 14px; line-height: 1;
  background: rgba(13,13,13,.92); color: var(--muted-2);
  border: 1px solid var(--line); box-shadow: 0 2px 8px #0008;
  transition: color .12s, border-color .12s, background .12s;
}
.grid-btn.on { color: #fff; border-color: var(--muted-2); background: rgba(13,13,13,.96); }
.grid-btn:hover { color: #fff; border-color: var(--muted); }
.cap-tools-col { display: flex; flex-direction: column; gap: 9px; width: 200px; flex: none; padding-top: 2px; }
.post-cap { display: grid; gap: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; }
/* capture vs post-capture occupy the SAME height so nothing below shifts
   when flipping sides or capturing */
.capture-slot { min-height: 108px; display: flex; flex-direction: column; justify-content: flex-start; }
.rot-row { display: flex; }
.rot-row .btn { flex: 1; }
.tools-note { line-height: 1.5; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card); }
.straighten { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.straighten input { flex: 1; min-width: 0; }
.loupe-toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.loupe-toggle input { width: auto; }
.loupe-toggle select { width: auto; padding: 3px 6px; }
@media (max-width: 1280px) {
  #view-fullcard .side-panel, #view-capture .side-panel, #view-inspect .side-panel { max-height: none; overflow: visible; max-width: none; flex: 1 1 300px; }
  .stage.portrait { height: min(70vh, 640px); }
}
@media (max-width: 980px) {
  .cap-stage-wrap { flex: 1 1 100%; }
  .cap-tools-col { width: 100%; }
}

/* fixed loupe below the capture tools — same portrait shape as the stage */
.loupe-fixed {
  width: 100%; max-width: 212px; aspect-ratio: 9/16; height: auto; flex: none;
  border-radius: 10px; border: 2px solid var(--neon-red); background-color: #000;
  background-repeat: no-repeat; box-shadow: 0 4px 24px #000a;
  margin: 6px auto 0;
}

/* pins */
#ins-shot-wrap { position: absolute; inset: 0; }
#ins-pins { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-minor-c { fill: none; stroke: var(--green-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pin-major-c { fill: none; stroke: var(--yellow-soft); stroke-width: 2.5; }
.pin-surf-major-c { fill: none; stroke: #39d0ff; stroke-width: 2.5; }
.pin-surf-minor-c { fill: none; stroke: #39d0ff; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pin-surf-lbl { fill: #39d0ff; font: 700 9px sans-serif; text-anchor: middle; pointer-events: none; }
.pin-edge-major-c { fill: none; stroke: #f0a060; stroke-width: 2.5; }
.pin-edge-minor-c { fill: none; stroke: #f0a060; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pin-edge-lbl { fill: #f0a060; font: 700 9px sans-serif; text-anchor: middle; pointer-events: none; }
.pin-demo { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.pin-demo.pin-minor { border: 1.5px dashed var(--green-soft); }
.pin-demo.pin-major { border: 2.5px solid var(--yellow-soft); }
/* letter chips in the stage legend (S = surface · E = edge) */
.pin-lbl { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; font-size: 9px; font-weight: 800; }
.pin-lbl.surf { border: 1.5px solid #39d0ff; color: #39d0ff; }
.pin-lbl.edgep { border: 1.5px solid #f0a060; color: #f0a060; }

/* ---------- capture right panel: readings / grading / pre-score ---------- */
.rdg { display: grid; gap: 5px; margin-bottom: 8px; }
.rdg-row { display: grid; grid-template-columns: 40px 1fr 1fr; gap: 5px; align-items: center; }
/* one uniform, readable size across the L/R · T/B readings strip */
.rdg-side { font-size: 10px; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; }
.rdg-pair {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
}
.rdg-k { font-size: 10px; letter-spacing: .5px; color: var(--muted-2); font-weight: 700; }
.rdg-v { font-family: Consolas, monospace; font-size: 10px; font-weight: 700; white-space: nowrap; }
.rdg-v.na { color: var(--muted-2); }
.rdg-v.ok { color: var(--green-soft); }
.rdg-v.mid { color: var(--yellow-soft); }
.rdg-v.bad { color: #f0a080; }
/* ---------- pre-grade tag (A-Slab header strip) ----------
   Its own strip under the topbar, so it reads the same on every step.
   --slabrow is the vertical budget it takes; the stage and the side
   panels subtract it so the page never starts scrolling. */
:root { --slabrow: 0px; }
.slab { min-width: 0; display: flex; align-items: center; gap: 10px; height: 100px; }
/* The tag must occupy the SAME box on every step, so the header is a fixed
   three-column grid — brand | tag | actions — with the outer columns pinned.
   Switching steps then changes the data in the tag, never its geometry. */
:root { --head-brand: 300px; --head-actions: 268px; }
.page-head.has-slab {
  display: grid; grid-template-columns: var(--head-brand) minmax(0, 1fr) var(--head-actions);
  align-items: center; gap: 16px; margin-bottom: 8px;
}
.page-head.has-slab > .cap-head-right, .page-head.has-slab > .page-head-right { justify-content: flex-end; }
.slab.hidden { display: none; }
.slab-thumbs { flex: none; display: flex; gap: 7px; }
.slab-thumb {
  position: relative; width: 68px; height: 95px; border-radius: 6px; overflow: hidden;
  border: 1px solid #4a4a4a; background: #1f1f1f; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slab-thumb.empty { border-style: dashed; border-color: var(--muted-2); }
.slab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slab-thumb-plus { font-size: 19px; color: var(--muted-2); }
/* (the corner vignette + FRONT label were removed — the tag shows the
   card art clean, exactly as captured/served) */
.slab-tag {
  flex: 1 1 auto; min-width: 0; height: 100px; display: flex; align-items: stretch;
  background: linear-gradient(180deg, #121212, #060606); border: 1px solid #3a3a3a;
  border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.slab-foil { flex: none; width: 4px; background: linear-gradient(180deg, #C9C4B8, #6e6a60 55%, #C9C4B8); }
.slab-id { flex: 1 1 auto; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.slab-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slab-name { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slab-name.unset, .slab-num .unset { color: #6a6a6a; font-weight: 600; }
.slab-native { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.slab-btn {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; padding: 4px 10px; border-radius: 5px;
  border: 1px solid #5c5850; color: #C9C4B8; background: #1a1a18; flex: none; white-space: nowrap;
  cursor: pointer; font-family: inherit;
}
.slab-btn:hover { border-color: #8a857a; color: #fff; }
.slab-btn.filter { border-color: #4a5a4a; color: #9fd39f; background: #171a17; }
.slab-btn.filter:hover { border-color: #7ab07a; color: #cdf0cd; }
.slab-num { font-family: Consolas, monospace; font-size: 12px; color: #fff; background: #1c1c1a;
  border: 1px solid #4a463e; border-radius: 5px; padding: 3px 9px; letter-spacing: .04em; flex: none; }
.slab-num em { color: var(--muted-2); font-style: normal; }
.slab-meta { font-family: Consolas, monospace; font-size: 10.5px; color: var(--muted-2);
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slab-pillars { flex: none; display: flex; align-items: stretch; border-left: 1px solid #2c2c2c; }
.slab-p { width: 84px; padding: 12px 4px 10px; text-align: center; border-right: 1px solid #202020; }
.slab-p:last-child { border-right: none; }
.slab-p i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .12em; color: var(--muted-2); font-weight: 800; }
.slab-p b { display: block; font-family: Consolas, monospace; font-size: 25px; font-weight: 700; color: #fff; margin-top: 5px; line-height: 1; }
.slab-p u { display: block; text-decoration: none; font-family: Consolas, monospace; font-size: 9px; color: #6a6a6a; margin-top: 2px; }
.slab-p.dim b { color: #4c4c4c; } .slab-p.dim i { color: #565656; } .slab-p.dim u { color: #3f3f3f; }
.slab-final { flex: none; width: 138px; background: linear-gradient(180deg, #2a0f0f, #150808);
  border-left: 1px solid #3a3a3a; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slab-final i { font-style: normal; font-size: 8.5px; letter-spacing: .14em; color: #d8a3a1; font-weight: 800; }
.slab-final b { font-family: Consolas, monospace; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.05; }
.slab-final u { text-decoration: none; font-size: 9px; color: #a97f7d; letter-spacing: .08em; }
.slab-final.dim b { color: #4c4c4c; }

/* card lookup dialog */
/* compound selector: the base .tool-win width rule sits LATER in the sheet
   and ties on specificity, so a bare .slabq-win here silently loses */
/* wide enough for CODE # · TYPE · LANGUAGE · RARITY · CURRENCY · Search */
.tool-win.slabq-win { width: min(1010px, calc(100vw - 48px)); }
/* dialog type: everything reads 2px larger than the app's control scale */
.slabq-win .tool-head b { font-size: 17px; }
.slabq-win .tool-sub { font-size: 13px; }
.slabq-win .slabq-mode-opt { font-size: 12.5px; }
.slabq-win .slabq-fld i { font-size: 10.5px; }
.slabq-win .slabq-fld input, .slabq-win .slabq-fld select { font-size: 15px; }
.slabq-win .slabq-note { font-size: 13.5px; }
.slabq-win .slabq-rc b { font-size: 14.5px; }
.slabq-win .slabq-rc span { font-size: 12.5px; }
.slabq-win .slabq-rp { font-size: 14px; }
.slabq-win .slabq-rp small { font-size: 11px; }
.slabq-win .slabq-manual-head { font-size: 13px; }
.slabq-win .slabq-link { font-size: 13.5px; }
.slabq-win .slabq-name-opt { font-size: 12.5px; }
.slabq-win .tool-body { padding: 15px 17px; }
.slabq-win .tool-head { padding: 14px 17px 10px; }
/* Every field gets min-width:0 — a flex item's default min-width:auto lets a
   long <option> label push the row wider than the dialog, which is where the
   sideways scrolling came from. */
.slabq-frow { display: flex; gap: 9px; margin-bottom: 12px; align-items: stretch; min-width: 0; }
.slabq-fld { flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
/* the card number is the primary field — room for 20 monospace characters */
/* the entry is the primary control — hold a real width for it */
.slabq-fld.num { flex: 1 1 auto; min-width: 240px; }
.slabq-fld.sel { flex: 0 0 140px; }
.slabq-fld.nat { flex: 0 1 150px; }
.slabq-win .tool-body { overflow-x: hidden; }
.slabq-fld i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .1em; color: var(--muted-2); font-weight: 800; }
.slabq-fld input, .slabq-fld select {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: Consolas, monospace; font-size: 13px; padding: 2px 0; outline: none;
}
/* native dropdowns paint their own list — without these the options render
   white-on-white and are unreadable */
.slabq-fld select { font-family: inherit; font-size: 12px; color-scheme: dark; cursor: pointer; }
.slabq-fld select option { background: #2E2E2E; color: #F2F2F2; }
.slabq-go { flex: 0 0 auto; padding: 0 16px; font-size: 12.5px; align-self: stretch; }
.slabq-note { font-size: 11.5px; color: var(--yellow-soft); margin: 0 0 8px; line-height: 1.45; }
.slabq-rows { display: grid; gap: 2px; }
.slabq-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line); cursor: pointer;
  font-family: inherit; text-align: left; color: var(--muted);
}
.slabq-row:hover { background: var(--bg2); border-radius: 6px; }
.slabq-art { flex: none; width: 32px; height: 45px; border-radius: 3px; background: var(--bg2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.slabq-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* no scan available for this printing — tidy placeholder, not a broken icon */
.slabq-art.noimg::after, .slabq-noimg::after { content: '▧'; font-size: 16px; color: var(--muted-2); opacity: .5; }
.slabq-rc { flex: 1 1 auto; min-width: 0; }
.slabq-rc b { display: block; font-size: 12.5px; color: var(--text); }
.slabq-rc span { font-size: 10.5px; color: var(--muted-2); font-family: Consolas, monospace; }
.slabq-rp { flex: none; font-family: Consolas, monospace; font-size: 12px; color: var(--muted-2); text-align: right; }
.slabq-rp small { display: block; font-size: 9px; }
/* sort the results by price — sits over the list, right-aligned above the
   price column it acts on */
.slabq-sortrow { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.slabq-sort {
  background: #2f2f2f; border: 1px solid #3d3d3d; color: var(--muted-2);
  font-size: 11.5px; letter-spacing: .4px; padding: 4px 10px; border-radius: 4px;
  cursor: pointer; white-space: nowrap;
}
.slabq-sort:hover { color: #e8e8e8; border-color: #565656; }
.slabq-sort.on { color: #fff; border-color: var(--accent); }
.slabq-sort[disabled] { opacity: .55; cursor: default; }
/* PSA10 · BGS10 · RAW per row — a figure with no comps is dropped from
   the row entirely, so the column count varies and the grid grows to fit
   whatever is there. Graded headers read white, RAW reads red. */
.slabq-rp.slabq-rp4 { display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(62px, auto); justify-content: end;
  gap: 2px 16px; align-items: end; }
.slabq-rp .p4 { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* each grader gets its own header colour; a BGS 10 worth 2x the PSA 10 is
   a Black Label and says so */
.slabq-rp .p4 i { font-style: normal; font-size: 12.5px; letter-spacing: .5px; white-space: nowrap; font-weight: 700; }
.slabq-rp .p4 i.psa { color: #7fc4ff; }        /* light blue */
.slabq-rp .p4 i.bgs { color: #ffdc7a; }        /* light yellow */
.slabq-rp .p4 i.bgsbl { color: #c9a2ff; }      /* light purple — Black Label */
.slabq-rp .p4 i.raw { color: #f08a87; }        /* soft red */
.slabq-rp .p4 b { font-size: 13.5px; white-space: nowrap; }
.slabq-rp .p4 b.psa { color: #fff; font-weight: 700; }
.slabq-rp .p4 b.raw { color: #c9c9c9; font-weight: 400; }
.slabq-rp .p4.none { color: var(--muted-2); }
/* CURRENCY label must never wrap — the field grows to fit it instead */
.slabq-fld.cur { flex: 0 0 auto; min-width: 96px; }
/* SET NAME dropdowns (2026-09-26) — the dialog row stays ONE line: the
   fixed selects give a little, the set list takes what is left */
.slabq-fld.set { flex: 1 1 190px; min-width: 150px; max-width: 320px; }
.slabq-win .slabq-fld.num { min-width: 150px; }
.slabq-win .slabq-fld.sel { flex: 0 0 108px; }
.slabq-win .slabq-fld.set { flex: 1 1 170px; min-width: 130px; max-width: 250px; }
.slabq-win .slabq-fld.rar { flex: 1 1 130px; min-width: 110px; max-width: 190px; }
.slabq-win .slabq-fld.cur { min-width: 78px; flex-basis: 78px; }
/* YEAR (2026-09-26) — a narrow select beside SET NAME */
.slabq-fld.yr2 { flex: 0 0 82px !important; min-width: 76px; max-width: 90px; }
.sub-frow2 .slabq-fld.yr2 { flex: 0 0 86px !important; }
.sub-frow2 .slabq-fld.set { flex: 1 1 280px; max-width: none; }
.sub-frow2 .slabq-fld.note { flex: 1 1 160px; min-width: 120px; }
/* RARITY carries long names ("Quarter Century Secret Rare") — give it room
   but never let it push the row into a second line */
.slabq-fld.rar { flex: 1 1 190px; min-width: 150px; max-width: 260px; }
/* YEAR is four digits — no more room than that */
.slabq-fld.yr { flex: 0 0 auto; width: 92px; }
.slabq-fld i { white-space: nowrap; }
/* hover preview: the hovered row's card, large, LEFT of the dialog */
.slabq-preview {
  position: fixed; z-index: 1002; width: 250px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 10px 40px #000c;
}
.slabq-preview img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--bg2); min-height: 120px; }
.slabq-preview .sp-cap { font-size: 11px; font-weight: 700; color: var(--text); text-align: center;
  margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slabq-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-bottom: 12px; }
.slabq-mode-opt { font: inherit; font-size: 10.5px; font-weight: 700; padding: 5px 13px; color: var(--muted-2);
  background: none; border: none; cursor: pointer; white-space: nowrap; }
.slabq-mode-opt.on { background: var(--accent); color: #fff; }
.slabq-manual { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.slabq-manual-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); margin-bottom: 7px; }
.slabq-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.slabq-link { background: none; border: none; font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--muted-2); cursor: pointer; padding: 0; white-space: nowrap; text-decoration: underline; }
.slabq-link:hover, .slabq-link.on { color: var(--accent); }
.slabq-toggle { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-left: auto; }
.slabq-name-opt { flex: 1 1 0; text-align: center; font-size: 10.5px; font-weight: 700; padding: 6px 12px;
  color: var(--muted-2); background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.slabq-name-opt.on { background: var(--accent); color: #fff; }

/* ---------- FULL-CARD CAPTURE (step 1, 30 cm) ---------- */
/* The rig panel is moved between steps; a [hidden] anchor marks its slot.
   It carries the most cards of any column, so cap it to the stage height and
   let it scroll internally — otherwise it drives the whole page into scroll.
   Two ids so it outranks `#view-capture .side-panel { max-height: none }`
   further down the sheet. */
#view-capture #rig-panel, #view-fullcard #rig-panel {
  max-height: calc(100vh - 300px - var(--slabrow)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.fc-side-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fc-side-btn {
  background: var(--bg2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 4px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .6px; cursor: pointer; font-family: inherit;
}
.fc-side-btn:hover { color: var(--text); border-color: var(--muted-2); }
.fc-side-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fc-count { font-size: 11px; font-weight: 700; color: var(--muted-2); letter-spacing: .4px; align-self: center; }
.step-of { text-align: center; font-size: 11.5px; color: var(--muted); }
/* the action stack is pinned to the card widget's height, so a step with
   3 buttons and a step with 1 render the SAME header height */
.cap-head-actions { height: 110px; gap: 5px; }
.cap-head-actions .btn { min-width: 132px; padding: 5px 12px; font-size: 12.5px; }
.upload-lbl { display: block; text-align: center; cursor: pointer; }
.lock-note { color: var(--yellow-soft); margin-top: 4px; }

/* microscope card: device row + resolution rows */
.cam-row2 { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 6px; align-items: center; }
.cam-row2 select { min-width: 0; font-size: 11.5px; padding: 5px 6px; }
.res-row { display: grid; grid-template-columns: 1fr 80px; gap: 7px; align-items: center; margin-top: 6px; }
.res-row > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.res-sel { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 11.5px; padding: 4px 5px; color-scheme: dark; cursor: pointer; }

/* NEAR / FAR profile rows — ONE consistent line each:
   name · height · readout · action · toggle */
.prof-row { display: grid; grid-template-columns: 42px 68px minmax(0,1fr) auto 42px; gap: 7px; align-items: center; margin-top: 9px; }
.prof-name { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--text); }
.prof-cm { font-size: 11px; color: var(--muted); font-family: Consolas, monospace; white-space: nowrap; }
.prof-cm input { width: 44px; background: var(--bg2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); font-family: Consolas, monospace; font-size: 11px; padding: 3px 4px; text-align: right; }
.prof-val { font-size: 11px; color: var(--muted-2); font-family: Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.prof-val small { font-size: 9px; opacity: .8; }
.prof-val .prof-k { color: var(--muted); }
/* the value cell now holds two lines (scale + k) — let the row grow to fit */
.prof-row { align-items: center; }
.btn.tgl { min-width: 40px; }
.btn.tgl.on { background: #1d3a24; border-color: #2c5c38; color: #7fe09a; }
.btn-xs.has { border-color: var(--green-soft); color: var(--green-soft); }

/* collapsible cards: click the header to fold the body away.
   The chevron sits on the LEFT of the title — same on every card. */
.card.collapsible > .card-head { cursor: pointer; user-select: none; }
.card.collapsible > .card-head > b::before {
  content: '\25be'; display: inline-block; color: var(--muted-2); font-size: 12px;
  margin-right: 7px; transition: transform .18s;
}
.card.collapsible.collapsed > .card-head { margin-bottom: 0; }
.card.collapsible.collapsed > .card-head > b::before { transform: rotate(-90deg); }
.card.collapsible.collapsed > :not(.card-head) { display: none; }

/* ---------- compact app-style controls (tools col + rig panel) ---------- */
.compactui .btn, #rig-panel .btn { padding: 6px 9px; font-size: 11.5px; border-radius: 8px; }
#rig-panel .card { padding: 8px 9px; }
#rig-panel .card-head { margin-bottom: 4px; }
#rig-panel .card-head b, .cam-stack .card-head b, .fn-card .card-head b { font-size: 13px; }
#rig-panel p.small { font-size: 11px; line-height: 1.45; }
#rig-panel .cal-guide { font-size: 10.5px; line-height: 1.45; }
#rig-panel .btn-xs { font-size: 11px; padding: 4px 9px; }
.uvc-foot { margin-top: 6px; }
.uvc-foot .tiny { font-size: 8.5px; }

/* ---------- rig height (30 cm / 20 cm) ---------- */
.rig-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rig-btn {
  background: var(--bg2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 4px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .5px; cursor: pointer; font-family: inherit;
}
.rig-btn:hover { color: var(--text); border-color: var(--muted-2); }
.rig-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* locked to the step — shown as state, not offered as a choice */
.rig-btn:disabled { cursor: default; opacity: .55; }
.rig-btn.on:disabled { opacity: 1; }
#rig-note { margin-top: 6px; letter-spacing: .3px; }

/* per-height record buttons (Set scale / Save profile) */
.h-save { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.h-save-lbl { font-size: 10px; color: var(--muted-2); font-weight: 700; letter-spacing: .4px; width: 100%; }
.h-btn { border-color: var(--muted-2); }
.h-btn.has { border-color: var(--green-soft); color: var(--green-soft); }
.h-btn.active { box-shadow: inset 0 0 0 1px var(--accent); }
.h-btn.flash { background: var(--accent); border-color: var(--accent); color: #fff; }
.h-line { display: flex; gap: 8px; font-size: 10px; font-weight: 700; margin: 4px 0 2px; flex-wrap: wrap; }
.h-line .ok { color: var(--green-soft); }
.h-line .na { color: var(--muted-2); }
#lens-height-line { display: block; color: var(--muted-2); }
.cal-span { display: block; margin-top: 6px; }
/* first-run instructions, retired for good once the step is done */
.help-gone { display: none !important; }

/* ---------- TOOLS rail + mode window ---------- */
.tools-rail { display: flex; flex-direction: column; gap: 6px; flex: none; width: 58px; padding-top: 2px; }
.tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 2px; cursor: pointer; font-family: inherit; color: var(--muted);
}
.tool-btn:hover { border-color: var(--muted-2); color: var(--text); }
.tool-btn .tool-t { font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.tool-btn .tool-l { font-size: 8px; font-weight: 700; letter-spacing: .5px; opacity: .8; }
.tool-btn.on { border-color: var(--accent); color: var(--accent); }
.tool-btn.open { background: var(--accent); border-color: var(--accent); color: #fff; }

.tool-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.tool-modal.hidden { display: none; }
.tool-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); }
.tool-win {
  position: relative; width: min(460px, calc(100vw - 32px)); max-height: min(76vh, 640px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
.tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px 9px; border-bottom: 1px solid var(--line); }
.tool-head b { font-size: 15px; }
.tool-sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.tool-x { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tool-x:hover { color: var(--text); }
.tool-body { padding: 13px 15px; overflow-y: auto; scrollbar-width: thin; }
.tool-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 15px 13px; border-top: 1px solid var(--line); }
.tool-foot:empty { display: none; }
.tool-p { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0 0 9px; }
.tool-p.muted { color: var(--muted-2); }
.tool-p.ok, .tool-tbl .ok, .tool-out .ok { color: var(--green-soft); }
.tool-p.mid { color: var(--yellow-soft); }
.tool-p.bad { color: var(--accent); }
.tool-p.na, .tool-tbl .na, .tool-out .na { color: var(--muted-2); }
.tool-err { color: var(--accent); font-size: 12px; }
.tool-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 10px; }
.tool-tbl th { text-align: left; font-size: 9.5px; letter-spacing: .5px; color: var(--muted-2); padding: 0 6px 4px 0; }
.tool-tbl td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.tool-tbl b { color: var(--text); font-family: Consolas, monospace; }
.tool-big { font-family: Consolas, monospace; font-size: 28px; font-weight: 700; text-align: center; margin: 6px 0; color: var(--text); }
.tool-big.ok { color: var(--green-soft); } .tool-big.mid { color: var(--yellow-soft); }
.tool-big.bad { color: var(--accent); }   .tool-big.na { color: var(--muted-2); }
.tool-meter { position: relative; height: 4px; background: var(--bg2); border-radius: 3px; margin: 0 0 12px; }
.tool-meter i { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--accent); border-radius: 1px; }
.tool-out { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.tool-check { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.tool-check:first-child { border-top: none; }
.tool-check input { margin-top: 2px; accent-color: var(--accent); }
.tool-check b { display: block; font-size: 12px; }
.tool-check i { display: block; font-size: 10.5px; color: var(--muted-2); font-style: normal; margin-top: 1px; }
@media (max-width: 980px) {
  .tools-rail { flex-direction: row; width: 100%; flex-wrap: wrap; }
}

/* lens correction card */
.lens-preview-wrap { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; display: flex; justify-content: center; }
.lens-preview-wrap canvas { max-width: 100%; height: auto; display: block; }
.lens-row { align-items: center; }
.lens-slider { display: grid; grid-template-columns: 62px 1fr 44px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.lens-slider input[type=range] { min-width: 0; accent-color: var(--accent); }
.lens-slider span { font-family: Consolas, monospace; font-size: 11px; text-align: right; color: var(--text); }

/* Centering Studio header + flip card */
.cap-head-2 { display: flex; align-items: center; gap: 18px; }
.cap-head-right { display: flex; gap: 14px; align-items: center; margin-left: auto; }
/* stacked brand lockup */
.cap-brand { display: flex; align-items: center; gap: 14px; }
.cap-brand-text { line-height: 1; }
.cap-brand-name { font-size: 44px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.cap-brand-name b { color: #fff; font-weight: 800; }
.cap-brand-sub { margin-top: 5px; font-size: 12.5px; font-weight: 600; letter-spacing: 4.6px; color: var(--muted); }
/* ---------- card widget: fixed-size front/back + edge/zone compass ----------
   Identical box on every step so the header row never changes height. A 3x3
   grid: card centre, 4 edge chips, 4 corner chips (zones variant only). */
.cardw {
  /* the card cell is a true 3:4 */
  --cw-cell: 18px; --cw-card: 51px; --cw-mid: 68px; --cw-gap: 3px;
  flex: none; display: grid; gap: var(--cw-gap);
  grid-template-columns: var(--cw-cell) var(--cw-card) var(--cw-cell);
  grid-template-rows: var(--cw-cell) var(--cw-mid) var(--cw-cell);
}
.cardw .cw-slot { visibility: hidden; }
.cardw button { font: inherit; cursor: pointer; padding: 0; }
.cardw.cardw-static .cw-edge { cursor: default; }

/* the centre card — 3:4; front = dark green-grey, back = brown */
.cw-card {
  border-radius: 6px; border: 1px solid #5a6a5a; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #34423a, #1d2620);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.cw-card.back { background: linear-gradient(160deg, #7a5a38, #59402a); border-color: #8a6a48; }
.cw-card.inert { cursor: default; }
.cw-side { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; color: #fff; text-shadow: 0 1px 2px #0009; }
/* full-card photo step: the WHOLE card is the shoot target */
.cardw.photo-full .cw-card { outline: 2px solid #39FF14; outline-offset: 2px; }
/* photo-area emphasis: this step's green boxes glow, the rest recede */
.cardw.photo-corners .cw-corner:not(.done),
.cardw.photo-edges .cw-edge:not(.done) {
  border-color: #39FF14; color: #b8ffb0;
  background: rgba(57,255,20,.14);
  box-shadow: 0 0 5px rgba(57,255,20,.35);
}
.cardw.photo-corners .cw-edge:not(.on):not(.done) { opacity: .55; }
.cardw.photo-edges .cw-corner:not(.on):not(.done) { opacity: .55; }

/* edge chips (green) — wide on T/B, tall on L/R */
.cw-edge {
  border-radius: 5px; border: 1px solid #2f6a3c; color: #9fe0b0; font-weight: 800;
  background: linear-gradient(180deg, rgba(45,90,55,.55), rgba(30,60,38,.55));
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.cw-edge:hover:not(.inert) { border-color: #4fae66; color: #d6f5df; }
.cw-edge.done { background: #2c9e52; border-color: #37b862; color: #fff; }
.cw-edge.on { box-shadow: 0 0 0 2px var(--neon, #39FF14); border-color: #39FF14; color: #fff; }
.cw-edge.inert { opacity: .5; }

/* corner chips — square shoot-targets at the card's corners */
.cw-corner {
  border-radius: 4px; border: 1px solid #2f6a3c; color: #9fe0b0; font-weight: 800; font-size: 7px;
  letter-spacing: .3px; background: linear-gradient(180deg, rgba(45,90,55,.5), rgba(30,60,38,.5));
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.cw-corner:hover { border-color: #4fae66; color: #fff; }
.cw-corner.done { background: #2c9e52; border-color: #37b862; color: #fff; }
.cw-corner.on { box-shadow: 0 0 0 2px #fff; border-color: #fff; color: #fff; }

.cap-head-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.cap-head-actions .btn { white-space: nowrap; justify-content: center; padding: 7px 14px; font-size: 13px; }
/* (4) lens-correction preview shown on the MAIN live view */
.lens-stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; border-radius: inherit; }
/* corrected live feed: sits UNDER the guide canvas (3) and reticle (4) */
.lens-stage-overlay.live { z-index: 2; pointer-events: none; }
.lens-stage-tag { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 6; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #39FF14; background: #000b; padding: 3px 7px; border-radius: 5px; }
#view-capture #lens-card p.small { font-size: 11px; line-height: 1.42; color: var(--muted); }
/* (3) compact microscope card — one row: device | Start | Stop */
.compact-cam select { padding: 4px 6px; font-size: 11.5px; }
/* the head must never break to a second line in a narrow column — keep the
   badge whole and let the title ellipsize if it truly runs out of room */
.compact-cam .card-head { flex-wrap: nowrap; gap: 6px; align-items: center; }
.compact-cam .card-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-cam #cam-badge { flex: none; white-space: nowrap; }
.cam-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; align-items: center; margin-top: 2px; }
.cam-row .btn { padding: 5px 10px; font-size: 11.5px; }
/* (4) lens correction: tighter sliders + on/off toggle button */
#btn-lens-toggle.on { background: #1d3a24; border-color: #2c5c38; color: #7fe09a; }
/* (8) 10-CHANCE tab panel */
.ten-chance { flex: 0 0 96px; display: flex; flex-direction: column; gap: 9px; align-content: start; }
.tc-head {
  background: linear-gradient(155deg, #4a1a1a, #2c0f0f); border: 1px solid #6a2b2b; border-radius: 11px;
  text-align: center; padding: 9px 6px 8px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.tc-head b { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.tc-head span { display: block; font-size: 11px; letter-spacing: 3px; color: #d9a3a3; margin-top: 2px; }
.tc-tabs { display: flex; flex-direction: column; gap: 9px; }
.tc-co {
  border: 1px solid #4a4a4a; border-left: 3px solid var(--accent); border-radius: 9px;
  background: linear-gradient(180deg, #343434, #262626); color: #F2F2F2;
  font-size: 15px; font-weight: 800; letter-spacing: 2.5px; padding: 14px 4px; cursor: default;
  max-height: 70px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  transition: opacity .45s, max-height .45s, padding .45s, margin .45s, border-width .45s;
}
.tc-co.out { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; margin-top: -9px; pointer-events: none; }
.tc-note { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.35; }
/* keep all five columns on one row down to iPad Pro width */
@media (max-width: 1460px) {
  /* compact the locked grid — same regions, narrower tracks. The
     calibration column still fits the whole card (rows compact below). */
  :root {
    --sd: 26px; --c-rail: 16px;
    --c-funcs: 238px; --c-cal: 252px; --c-results: 238px; --c-guide: 80px;
  }
  /* the calibration/lens profile rows are the widest content — tighten
     them so they clear the narrower column instead of clipping */
  .prof-row { grid-template-columns: 33px 60px minmax(0,1fr) auto 40px; gap: 4px; }
  .prof-row .btn-xs { padding: 4px 6px; font-size: 10px; }
  .prof-name { font-size: 10.5px; }
  .prof-cm { font-size: 10px; }
  .prof-cm input { width: 36px; font-size: 10px; }

  /* pre-grade tag: below ~1500 the wordmark, the tag and the compass will
     not share a line, so the tag compresses AND takes its own row — the
     stage gives back exactly that row's height so nothing starts scrolling */
  .slab { height: 82px; gap: 8px; }
  .slab-thumb { width: 48px; height: 67px; }
  .slab-thumb-lbl { font-size: 7px; }
  .slab-tag { height: 80px; }
  .slab-id { padding: 7px 10px; gap: 4px; }
  .slab-name { font-size: 14px; }
  .slab-native { font-size: 11px; }
  .slab-meta { display: none; }
  /* compact header columns — the tag keeps the same geometry, just narrower */
  :root { --head-brand: 228px; --head-actions: 224px; }

  /* the page wordmark is decorative here — the topbar already carries the
     brand — so it yields width to the tag rather than the other way round */
  #view-capture .cap-brand-name, #view-fullcard .cap-brand-name { font-size: 30px; }
  #view-capture .cap-brand-sub, #view-fullcard .cap-brand-sub { font-size: 10px; letter-spacing: 3px; margin-top: 3px; }
  #view-capture .cap-brand, #view-fullcard .cap-brand { gap: 9px; }

  /* the identity block is the part that must not be squeezed out: the
     name collapsed to a few pixels when the buttons kept their full size */
  .slab-btn { font-size: 8.5px; padding: 3px 6px; letter-spacing: .03em; max-width: 88px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .slab-name { min-width: 82px; }
  .slab-num { font-size: 10.5px; padding: 2px 7px; }
  .slab-p { width: 56px; padding: 9px 2px 8px; }
  .slab-p i { font-size: 7.5px; letter-spacing: .04em; }
  .slab-p b { font-size: 19px; margin-top: 3px; }
  .slab-p u { font-size: 8px; }
  .slab-final { width: 92px; }
  .slab-final b { font-size: 24px; }
  .slab-final i { font-size: 7.5px; }
  .slab-final u { font-size: 8px; }
  .ten-chance { flex: 0 0 80px; }
  .tc-co { font-size: 13.5px; letter-spacing: 2px; padding: 12px 3px; }
  /* 7 nav steps don't fit the topbar with subtitles at this width — keep
     number + title, drop the subs and arrows, and tighten so all 7 fit */
  #step-nav { gap: 2px; }
  #step-nav .step-arrow { display: none; }
  .step-btn { padding: 4px 6px; gap: 5px; }
  .step-btn .step-num { width: 18px; height: 18px; font-size: 10.5px; }
  .step-btn .step-txt b { font-size: 10.5px; }
  .step-btn .step-sub { display: none; }
}

/* ===== narrow viewports (iPad Pro Safari etc.) — keep the SAME layout as
   the 1366 Windows reference instead of collapsing the 1fr live-view track.
   Below 1366 the fixed side columns would starve the stage (an ~88 px strip
   on an 11" iPad) AND the 6-step topbar overflows, so the WHOLE workspace
   (topbar + page) pans together as one unit at the 1366 reference width.
   1366+ is untouched → the hard no-scroll requirement at 1366×1024 and
   1920×1080 still holds. ===== */
@media (max-width: 1365px) {
  /* #main (topbar + views) becomes the single horizontal pan container so the
     numbered steps stay aligned with the columns below, exactly like Windows */
  #main { overflow-x: auto; overflow-y: hidden; }
  #topbar, #view-capture.active, #view-inspect.active,
  #view-fullcard.active, #view-setup.active, #view-stage.active { min-width: 1300px; }
  /* and on a short viewport the control columns scroll inside themselves —
     the page still never scrolls */
  #view-stage .stg-col { overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
  /* the old ≤1280 rule sets the stage to 70vh (=584 px on an 834-tall iPad),
     which overflowed vertically; use the height-fitting formula like desktop
     so the page never scrolls vertically on iPad landscape */
  .stage.portrait { height: max(330px, calc(100vh - 300px - var(--slabrow))); }
  /* the studio side panels (esp. the Centering results, which is uncapped on
     desktop) must scroll internally on the shorter iPad viewport rather than
     push the page taller. `.active` out-specifies the desktop max-height:none */
  #view-capture.active .side-panel, #view-inspect.active .side-panel,
  #view-fullcard.active .side-panel,
  #view-capture.active .cap-tools-col, #view-inspect.active .cap-tools-col {
    max-height: calc(100vh - 300px - var(--slabrow)); overflow-y: auto; overflow-x: hidden; }
}

/* centering score card (FRONT / BACK, /100 per side) */
/* BLACKLENS Centering panel */
.bl-centering .card { padding-top: 12px; padding-bottom: 12px; }
.bc-headline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc-hl-tile { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; text-align: center; }
.bc-hl-tile.red { background: #3a1414; border-color: #5c2a2a; }
.bc-hl-lbl { font-size: 9px; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.bc-hl-val { display: block; font-size: 30px; font-weight: 800; line-height: 1.05; margin: 1px 0; }
.bc-hl-tile.red .bc-hl-val { color: #f0a080; }
.bc-hl-of { font-size: 9px; color: var(--muted); letter-spacing: .5px; }
.bc-sub { font-size: 11px; letter-spacing: 1.2px; color: var(--text); font-weight: 800; margin: 12px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); text-transform: uppercase; }
.bc-tiles { margin-top: 11px; }
.wtg-row { display: flex; gap: 6px; }
.wtg-co { flex: 1; text-align: center; font-size: 12px; font-weight: 800; padding: 6px 2px; border-radius: 6px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--green-soft); transition: opacity .25s; }
.wtg-co.out { opacity: .15; }

/* ===== Centering Studio 2.0 — fit a fixed window, no scroll ===== */
#view-capture .side-panel { max-height: none; overflow: visible; gap: 7px; }
#view-capture .side-panel > .card { padding: 8px 10px; }
#view-capture .card-head { margin-bottom: 5px; }
/* compact lens-correction card (the preview was the tallest element) */
#view-capture .lens-preview-wrap { max-height: 116px; margin: 5px 0; }
#view-capture .lens-preview-wrap canvas { max-height: 112px; width: auto; }
#lens-card p, #cal-card p, #cal-card ol { font-size: 11px; line-height: 1.42; margin: 4px 0; }
#cal-card ol { padding-left: 15px; }
#cal-card ol li { margin-bottom: 1px; }
#view-capture .lens-slider { margin-top: 0; }
#view-capture .lens-slider + .lens-slider { margin-top: -2px; }
#view-capture .lens-row, #cal-card .row-gap { margin-top: 5px; }
/* compact BLACKLENS Centering panel */
.bl-centering .card { padding: 7px 10px; }
.bc-hl-tile { padding: 5px 4px; }
.bc-hl-val { font-size: 21px; }
.bc-sub { margin: 6px 0 3px; }
.bc-tiles { margin-top: 5px; }
.bl-centering .cs-tile { padding: 4px 6px; }
.bl-centering .cs-val { font-size: 19px; }
/* BACK tile sits on a lighter grey so it reads distinctly from FRONT */
.cs-tile.back { background: #3b3b3b; border-color: #4f4f4f; }
.bl-centering .cs-lbl, .bc-hl-lbl { font-size: 9px; }
.bl-centering .cs-of, .bc-hl-of { font-size: 8.5px; }
.bl-centering .rdg { gap: 3px; margin-bottom: 4px; }
.bl-centering .bw-list { gap: 2px; }
/* was gap:2px — that collapsed the COLUMN gap too, so the value in the
   left column sat against the label in the right one */
.bl-centering .ps-deds { gap: 3px 7px; font-size: 11px; }
.bl-centering .ps-deds .ded { gap: 6px; padding: 3px 5px; }
.bl-centering .co-mini td { padding: 2px 1px; font-size: 12px; }
.wtg-co { padding: 5px 2px; }
/* (hint-line spacing is shared by all three studio pages above) */

/* centering score card (FRONT / BACK, /100 per side) */
.cent-score { margin-top: 4px; }
.cs-sub { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.cs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-tile { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; }
.cs-lbl { font-size: 10px; letter-spacing: 2px; color: var(--muted); font-weight: 700; }
.cs-val { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; margin: 2px 0; color: var(--green-soft); }
.cs-val.na { color: var(--muted-2); }
.cs-val.ok { color: var(--green-soft); }
.cs-val.mid { color: var(--yellow-soft); }
.cs-val.bad { color: var(--orange); }
.cs-of { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.co-mini { width: 100%; border-collapse: collapse; table-layout: fixed; }
.co-mini th { font-size: 9.5px; letter-spacing: .5px; color: var(--muted); padding: 3px 1px; }
.co-mini td { text-align: center; font-weight: 800; font-size: 13px; padding: 3px 1px; border-top: 1px solid var(--line); }
.co-mini td.g10 { color: var(--green-soft); }
.co-mini td.g9 { color: var(--yellow-soft); }
.co-mini td.glow { color: var(--orange); }
.pregrade-box {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 10px; align-items: stretch;
  margin-top: 10px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.pg-div { background: var(--line); }
.pg-item { display: grid; gap: 2px; align-content: start; }
.pg-lbl { font-size: 8.5px; letter-spacing: 1.5px; color: var(--muted-2); font-weight: 700; }
.pg-val { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.pg-where { font-size: 13.5px; font-weight: 800; letter-spacing: .5px; line-height: 1.5; color: var(--green-soft); white-space: pre-line; }
.pg-sub { font-size: 8.5px; color: var(--muted-2); }
.ps-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.ps-score b { font-size: 30px; font-weight: 800; }
.ps-deds { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; font-family: Consolas, monospace; font-size: 12.5px; margin-bottom: 8px; }
/* border widths — both sides side-by-side, always present */
.bw-grid { display: grid; grid-template-columns: 58px 1fr 1fr; gap: 4px 8px; align-items: center; }
/* one uniform, readable size across the whole border-widths table */
.bw-h { font-size: 10px; letter-spacing: .6px; color: var(--muted); font-weight: 800; text-align: center; }
.bw-e { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.bw-grid b { font-family: Consolas, monospace; font-size: 10px; font-weight: 700; text-align: center; }
.bw-u { font-size: 10px; color: var(--muted); margin-left: 2px; }
.bw-mm { font-size: 10px; color: var(--muted); margin-left: 4px; }
.bw-na { color: var(--muted-2); }
/* each deduction is its own cell, so a value can never crowd the label
   of the column beside it */
.ps-deds .ded {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  color: var(--muted); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 7px;
}
.ps-deds .ded b { color: var(--green-soft); }
.ps-deds .ded b.hit { color: var(--accent); }
.cal-guide { margin: 10px 0 8px 18px; display: grid; gap: 4px; }

/* ---------- capture right panel ---------- */
.score100-row { display: flex; gap: 22px; margin-bottom: 12px; }
.score100-row .chip { font-size: 17px; min-width: 54px; }
.ring-row { display: flex; gap: 14px; align-items: center; }
.ring {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, var(--green)) calc(var(--pct, 0) * 1%), var(--line) 0);
  position: relative;
}
.ring::before { content: ''; position: absolute; inset: 7px; background: var(--panel); border-radius: 50%; }
.ring span { position: relative; font-size: 24px; font-weight: 800; color: var(--green-soft); }
.ring small { position: relative; font-size: 8px; letter-spacing: 1.5px; color: var(--muted); }
.ring.big { width: 96px; height: 96px; }
.ring.big span { font-size: 27px; }
.sub-grade { font-size: 19px; font-weight: 800; color: var(--green-soft); }
.ratio-block { margin-bottom: 12px; }
.ratio-lbls { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ratio-lbls b { color: var(--text); font-size: 13px; }
.bar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--green); border-radius: 4px; transition: width .2s; }
.bw-list { display: grid; gap: 6px; }
.bw-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 5px 2px; font-size: 13px; }
.bw-row:last-child { border-bottom: none; }
.bw-row b span { color: var(--muted); font-size: 11px; margin-left: 3px; }
.scale-opt { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.scale-opt summary { cursor: pointer; font-weight: 600; }

/* ---------- inspect: WHOLE CARD xy-panorama ---------- */
.whole-col { width: 296px; flex: none; display: flex; flex-direction: column; gap: 8px; }
/* Full-Card Creation (stitcher) removed — its .wc-* styles went with it. */
.pins-row { display: flex; gap: 8px; }
.pins-row .btn { flex: 1; }

/* compact scope connect/disconnect + live-view loupe toggle */
.ins-scope-row { align-items: center; justify-content: space-between; }
#btn-ins-scope { letter-spacing: 1px; font-size: 10.5px; white-space: nowrap; }
#btn-ins-scope.on { border-color: var(--green-soft); color: var(--green-soft); }

/* UVC camera controls panel (Inspect) */
.btn-xs { padding: 4px 8px; font-size: 11px; }
/* ---------- camera settings: grouped pro layout ---------- */
.uvc-controls { display: grid; gap: 2px; margin-top: 2px; }
.uvc-sec {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line);
}
.uvc-sec:first-child { margin-top: 2px; padding-top: 0; border-top: none; }
.uvc-sec-t { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 800; }
.uvc-row { display: grid; grid-template-columns: 78px minmax(0,1fr) 52px; gap: 8px; align-items: center; min-height: 20px; }
.uvc-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uvc-val { font-family: Consolas, monospace; font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.uvc-val.auto { color: var(--muted-2); font-weight: 600; }
.uvc-row input[type=range] { min-width: 0; width: 100%; accent-color: var(--accent); }
.uvc-row input[type=range]:disabled { opacity: .35; }
.uvc-bool { letter-spacing: .5px; }
.uvc-bool.on { background: #1d3a24; border-color: #2c5c38; color: #7fe09a; }
.uvc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
/* mode dropdown: every mode the camera reports (auto/continuous/manual...) */
.uvc-mode { flex: none; width: 104px; min-width: 88px; max-width: 104px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font-size: 11px; padding: 4px 5px; color-scheme: dark; cursor: pointer; }
/* the microscope card carries the full panel now — let it breathe but
   never drive the operation column into page scroll */
#view-fullcard .cap-tools-col, #view-inspect .cap-tools-col { max-height: calc(100vh - 300px - var(--slabrow)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }

/* square ×2 live-view loupe at the bottom of the FULL-CARD column */
.ins-loupe-sq {
  width: 100%; aspect-ratio: 1/1; flex: none;
  border-radius: 10px; border: 2px solid var(--neon-red); background-color: #000;
  background-repeat: no-repeat; box-shadow: 0 4px 24px #000a;
}

/* inspect readings rows: ticks + per-section pre-score / pre-grade */
.ird-row { grid-template-columns: 56px .6fr .6fr 1.5fr 1fr; }
.ird-row .rdg-v { text-align: center; }
.ird-head span { font-size: 8.5px; letter-spacing: .5px; color: var(--muted-2); font-weight: 700; text-align: center; }
.ird-pg { font-size: 13px; }
@media (max-height: 920px), (max-width: 1500px) {
  .whole-col { width: 250px; }
}

/* ---------- inspect ---------- */
.g100 { display: grid; gap: 8px; }
.g100-row { display: grid; grid-template-columns: 86px repeat(3, 1fr); gap: 6px; align-items: center; font-size: 13px; }
.g100-row input { grid-column: 2 / -1; }
/* Inspection Status — per-pillar defect ledger (same tick formulas) */
.pstat { display: grid; gap: 0; }
.pst-head, .pst-row { display: grid; grid-template-columns: 1fr 34px 34px 34px 66px; gap: 6px; align-items: center; }
.pst-head { font-size: 8.5px; letter-spacing: .12em; color: var(--muted-2); font-weight: 800; padding: 0 0 4px; }
.pst-head span { text-align: center; }
.pst-head span:first-child { text-align: left; }
.pst-row { border-top: 1px solid var(--line); padding: 5px 0; font-variant-numeric: tabular-nums; }
.pst-name { font-size: 10.5px; letter-spacing: .08em; color: var(--text); font-weight: 800; }
.pst-n { text-align: center; font-family: Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.pst-n.maj { color: #f0a080; } .pst-n.min { color: var(--yellow-soft); } .pst-n.tk { color: var(--text); }
.pst-n.zero { color: var(--muted-2); }
.pst-badge { justify-self: end; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 6px; background: #1d3a24; color: #7fe09a; }
.pst-badge.flag { background: #4b2a1f; color: #f0b090; }
.future-card { text-align: center; padding: 22px; border-style: dashed; letter-spacing: 2px; }
.nav-btns { display: flex; }

/* ---------- results ---------- */
.res-meta { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 12px; margin-bottom: 16px; }
.res-meta label { display: grid; gap: 5px; font-size: 11px; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.track-big { font-family: Consolas, monospace; font-size: 20px; font-weight: 700; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.res-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.res-hero .ring { width: 110px; height: 110px; }
.res-hero .ring span { font-size: 32px; }
.res-kpis { display: flex; gap: 34px; flex-wrap: wrap; }
.kpi .kpi-lbl { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; }
.kpi .kpi-val { font-size: 30px; font-weight: 800; }
.kpi .kpi-val.red { color: var(--accent); }
.bl-pill { display: inline-block; border: 1px solid var(--yellow); color: var(--yellow-soft); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.bl-pill.no { border-color: #6b5a2a; color: #b9a86a; }
.bl-pill.yes { background: #423409; }
.checklist { width: 100%; border-collapse: collapse; }
.checklist th, .checklist td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.checklist th { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.checklist .x { color: var(--red); font-weight: 800; }
.checklist .ok { color: var(--green-soft); font-weight: 800; }
.checklist .gr { font-weight: 800; color: var(--accent); text-align: right; }
.mini-chips { display: inline-flex; gap: 4px; }
.mini-chips .mc { min-width: 34px; text-align: center; border-radius: 5px; font-size: 11.5px; font-weight: 700; color: #fff; padding: 3px 4px; }
.mini-chips .lbl { font-size: 8.5px; color: var(--muted); text-align: center; letter-spacing: .5px; }
.ceiling-row { font-family: Consolas, monospace; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 10px; }
.warn-line { color: var(--yellow-soft); font-family: Consolas, monospace; font-size: 12px; margin-top: 8px; }
.co-table { width: 100%; border-collapse: collapse; }
.co-table th, .co-table td { padding: 8px 8px; text-align: center; border-bottom: 1px solid var(--line); font-size: 13px; }
.co-table th { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.co-table td:first-child, .co-table th:first-child { text-align: left; }
.co-table .co-grade { font-size: 16px; font-weight: 800; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.g-item { text-align: center; }
.g-item .g-img { position: relative; aspect-ratio: 4/3; background: #000; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.g-item img { width: 100%; height: 100%; object-fit: cover; }
.g-item svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-item .g-lbl { font-family: Consolas, monospace; font-size: 10.5px; color: var(--muted); margin-top: 5px; letter-spacing: .5px; }
.g-item .g-lbl .minor { color: var(--yellow-soft); }
.g-item .g-lbl .major { color: #f0a080; }
.g-item .g-lbl .pass { color: var(--green-soft); }
.res-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.res-section-title { margin: 18px 0 10px; font-size: 15px; }

/* ---------- lab report (RAWLITY-style, BLACKLENS brand) ---------- */
.labreport-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.lab {
  width: min(920px, 100%); margin: 0 auto; aspect-ratio: 1/1; background: #1C1C1C; color: #F2F2F2;
  border: 1px solid #3F3F3F; position: relative; padding: 3.2%; display: grid;
  grid-template-rows: auto 1fr auto; font-size: clamp(8px, 1.05vw, 12px);
  background-image: radial-gradient(circle at 50% 40%, #242424 0%, #1C1C1C 70%);
}
.lab * { box-sizing: border-box; }
.lab-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; border-bottom: 1px solid #3F3F3F; padding-bottom: 1.6%; }
.lab-graders { display: flex; gap: 8px; }
.lab-grader { border: 1px solid #595959; border-radius: 4px; padding: 4px 7px; text-align: center; font-size: .8em; letter-spacing: 1px; color: #A6A6A6; }
.lab-grader::after { content: '◉'; display: block; font-size: 1.1em; margin-top: 2px; }
.lab-title { text-align: center; }
.lab-title .lab-brand { display: flex; gap: 8px; align-items: center; justify-content: center; }
.lab-title .lab-brand img { width: 2.6em; height: 2.6em; }
.lab-title .lab-brand span { font-size: 2.2em; letter-spacing: 4px; font-weight: 300; }
.lab-title .lab-brand b { font-weight: 800; }
.lab-title .lab-sub { font-size: .78em; letter-spacing: 4px; color: #A6A6A6; margin-top: 2px; }
.lab-title .lab-report-lbl { color: var(--accent); letter-spacing: 5px; font-size: .95em; margin-top: 6px; font-weight: 600; }
.lab-cardid { text-align: right; font-size: .85em; color: #D9D9D9; letter-spacing: 1px; }
.lab-body { display: grid; grid-template-columns: 24% 1fr 26%; gap: 2.4%; padding: 2.4% 0; min-height: 0; }
.lab-col-l { border-right: 1px solid #3F3F3F; padding-right: 6%; display: flex; flex-direction: column; }
.lab-sec-title { text-align: center; font-weight: 800; letter-spacing: 1.5px; border-top: 2px solid #A6A6A6; border-bottom: 1px solid #3F3F3F; padding: 5px 0; font-size: .95em; }
.lab-ratio { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: .78em; text-align: center; padding: 6px 0; color: #A6A6A6; }
.lab-ratio b { color: #F2F2F2; }
.lab-cent { text-align: center; padding: 4px 0 8px; border-bottom: 1px solid #3F3F3F; }
.lab-cent .lc-row { display: flex; justify-content: space-around; font-size: 1.25em; font-weight: 800; }
.lab-cent .lc-lbl { display: flex; justify-content: space-around; font-size: .7em; color: #A6A6A6; letter-spacing: 1px; }
.lab-cent .lc-note { font-size: .68em; color: #D9D9D9; letter-spacing: 1px; margin-top: 4px; }
.lab-grade { text-align: center; padding: 10px 0; border-bottom: 1px solid #3F3F3F; }
.lab-grade .lg-num { font-size: 4.6em; font-weight: 800; color: #F2F2F2; line-height: 1; }
.lab-grade .lg-txt { letter-spacing: 3px; font-size: 1.1em; margin-top: 6px; color: #D9D9D9; }
.lab-subs { padding: 8px 0; border-bottom: 1px solid #3F3F3F; font-size: .95em; }
.lab-subs .ls-row { display: flex; justify-content: space-between; padding: 3px 0; letter-spacing: 1px; }
.lab-subs .ls-row b { color: #F2F2F2; }
.lab-note-title { font-size: 1.5em; font-weight: 800; letter-spacing: 1px; text-align: center; margin-top: 10px; }
.lab-note-body { font-size: .85em; color: #A6A6A6; margin-top: 8px; min-height: 3em; white-space: pre-wrap; }
.lab-col-c { display: flex; flex-direction: column; min-height: 0; }
.lab-cardimg { flex: 1; border: 1px solid #3F3F3F; display: flex; align-items: center; justify-content: center; min-height: 0; background: #161616; }
.lab-cardimg img { max-width: 92%; max-height: 92%; object-fit: contain; }
.lab-cardimg .ph { color: #595959; letter-spacing: 2px; font-size: .9em; text-align: center; }
.lab-refnote { text-align: center; padding-top: 8px; }
.lab-refnote .rn1 { font-weight: 800; letter-spacing: 1px; font-size: .95em; }
.lab-refnote .rn2 { color: #D9D9D9; font-size: .85em; letter-spacing: 1px; margin: 3px 0; }
.lab-refnote .rn3 { color: #8A8A8A; font-size: .75em; max-width: 90%; margin: 4px auto 0; }
.lab-col-r { border-left: 1px solid #3F3F3F; padding-left: 6%; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lab-defect-title { font-weight: 800; letter-spacing: 1px; text-align: center; border-bottom: 1px solid #3F3F3F; padding-bottom: 5px; font-size: 1em; }
.lab-defect { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lab-defect .ld-head { display: flex; gap: 6px; align-items: center; font-size: .85em; padding: 3px 0; }
.lab-defect .ld-num { width: 1.7em; height: 1.7em; border: 1px solid #A6A6A6; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; flex: none; }
.lab-defect .ld-img { flex: 1; border: 1px solid #3F3F3F; background: #161616; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.lab-defect .ld-img img { width: 100%; height: 100%; object-fit: cover; }
.lab-defect .ld-img .ld-raw { position: absolute; top: 4px; right: 6px; font-size: .7em; color: #D9D9D9; letter-spacing: 1px; }
.lab-defect .ld-img .ph { color: #4A4A4A; letter-spacing: 2px; font-size: .8em; }
.lab-foot { border-top: 1px solid #3F3F3F; padding-top: 1.4%; display: flex; justify-content: space-between; color: #8A8A8A; font-size: .75em; letter-spacing: 1px; }

/* ---------- guide ---------- */
#view-guide.active { display: block; padding: 26px clamp(16px, 4vw, 48px) 48px; }
.guide-card { margin-bottom: 16px; padding: 18px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.wf-step {
  position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 6px;
}
.wf-step .wf-num {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 7px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.wf-step .wf-ico { font-size: 17px; width: 32px; height: 32px; border-radius: 9px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.wf-step b { font-size: 13.5px; }
.wf-step p { font-size: 11.5px; color: var(--muted); margin: 0; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.br-rule {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
}
.br-rule .br-ico { font-size: 16px; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.br-rule b { font-size: 13.5px; }
.br-rule p { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.bl-bar { border-color: var(--accent); }
.blb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.blb-grid b { color: var(--accent); font-size: 12.5px; letter-spacing: 1px; }
.blb-grid p { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- records / verify / settings ---------- */
#view-records.active, #view-settings.active { display: block; padding: 24px clamp(12px, 3vw, 36px) 40px; }
#view-verify.active { display: block; padding: 40px 16px; }
.mono { font-family: Consolas, monospace; }
.rec-search { width: 300px; max-width: 100%; }
.rec-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rec-table th { text-align: left; color: var(--muted); font-size: 11px; letter-spacing: 1px; padding: 8px; border-bottom: 1px solid var(--line); }
.rec-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rec-table tr:last-child td { border-bottom: none; }
.rec-grade { font-weight: 800; color: var(--accent); font-size: 15px; }
.rec-score { font-family: Consolas, monospace; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rec-actions { text-align: right; white-space: nowrap; }
.rec-thumb { width: 40px; padding: 4px 8px; }
.rec-thumb img { width: 34px; height: 47px; object-fit: cover; border-radius: 4px; display: block; border: 1px solid var(--line); }
.rec-thumb-ph { display: block; width: 34px; height: 47px; border-radius: 4px; background: var(--bg2); border: 1px dashed var(--muted-2); }
.rec-table { min-width: 1020px; }               /* the ledger columns need room */
.rec-owner { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.rec-gradecell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rec-src-tag { font-size: 8px; letter-spacing: .5px; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted-2); }
.rec-src-tag.api { border-color: #2e7d52; color: var(--green-soft); }
.rec-src-tag.cust { border-color: #7a6a2e; color: #d8bc2a; }
.rec-src-tag.bl { border-color: var(--accent); color: var(--accent); }
.is-locked { opacity: .72; cursor: not-allowed; }
.rec-dw-lock { background: var(--bg); border-left: 2px solid var(--accent); padding: 8px 10px;
  border-radius: 0 6px 6px 0; line-height: 1.55; }

/* status pills */
.rec-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; white-space: nowrap; border: 1px solid transparent; }
.rec-pill.wait { background: #2f2f2f; color: #bdbdbd; border-color: #444; }
.rec-pill.info { background: #16323d; color: #6fc6e8; border-color: #26576b; }
.rec-pill.work { background: #3a2f16; color: #e2b657; border-color: #6b5526; }
.rec-pill.good { background: #16351f; color: #6fd08b; border-color: #2b6640; }
.rec-pill.done { background: #23293a; color: #9db0e8; border-color: #3b466b; }
.rec-pill.stop { background: #3b1d1d; color: #ef8f8c; border-color: #6e3230; }

/* filter bar */
.rec-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px; }
.rec-f { display: flex; flex-direction: column; gap: 4px; }
.rec-f > span { font-size: 9.5px; letter-spacing: 1px; color: var(--muted-2); }
.rec-f select { min-width: 168px; }
.rec-f-count { margin-left: auto; }

/* records: breadcrumb + folder levels */
.rec-crumb { display: flex; align-items: center; gap: 6px; margin: 2px 0 3px; flex-wrap: wrap; }
.rec-crumb button { background: none; border: none; color: var(--accent); font: inherit; font-size: 12.5px;
  cursor: pointer; padding: 0; }
.rec-crumb button:hover { text-decoration: underline; }
.rec-crumb span { font-size: 12.5px; color: var(--text); font-weight: 600; }
.rec-crumb i { color: var(--muted-2); font-style: normal; font-size: 11px; }
.rec-linkbtn { background: none; border: none; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; padding: 0; }
.rec-linkbtn:hover { text-decoration: underline; }

.rec-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rec-folder { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px;
  color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.rec-folder:hover { border-color: var(--accent); transform: translateY(-1px); }
.rec-folder.wide { grid-column: span 1; }
.rf-ico { font-size: 20px; color: var(--accent); line-height: 1.1; flex: none; }
.rf-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rf-body b { font-size: 14px; }
.rf-body i { font-style: normal; font-size: 11px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rf-meta { font-size: 10.5px; color: var(--muted-2); }
.rf-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rf-pills .rec-pill { font-size: 9px; padding: 2px 7px; }
.rec-empty { padding: 34px; text-align: center; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }

/* resizable / wrapping columns */
#rec-table th { position: relative; vertical-align: bottom; }
#rec-table th[data-h] { cursor: default; user-select: none; }
.col-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; }
.col-grip:hover { background: var(--accent); opacity: .5; }
#rec-table td { vertical-align: middle; }
.rec-res { display: flex; flex-direction: column; gap: 1px; }
.rec-colhint { margin: 8px 0 0; }
.btn-xs { padding: 3px 7px; font-size: 10.5px; border-radius: 6px; }

/* customer drawer: per-order payment rows */
.rec-ordrow { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; margin-bottom: 9px; background: var(--bg); }
.rec-ordgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* customer-level actions above the order folders */
.rec-custbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rec-custbar .tiny { flex: 1 1 220px; }
.job-chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.job-chip b { color: var(--text); font-weight: 600; }
.job-chip .mono { color: var(--accent); margin-left: 4px; }
.job-chip i { font-style: normal; opacity: .7; }
.rec-post { color: var(--green-soft); }
.rec-market { color: #fff; font-family: Consolas, monospace; font-size: 13.5px; }
.rec-market-out { margin-top: 8px; }
.rec-mstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.rec-mstats > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.rec-mstats > div.mid { border-color: #26576b; }
.rec-mstats b { font-size: 15px; }
.rec-mstats .mid b { color: #6fc6e8; font-size: 17px; }
.rec-mlist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11px; }
.rec-mlist li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--line); }
.rec-mlist li:last-child { border-bottom: none; }
.rec-mlist a { color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-mlist a:hover { color: var(--text); text-decoration: underline; }
.rec-certlink { color: var(--accent); text-decoration: none; }
.rec-certlink:hover { text-decoration: underline; }

/* order folder footer: payment + courier links */
.rec-folderwrap { display: flex; flex-direction: column; }
.rec-folderwrap .rec-folder { border-radius: 12px 12px 0 0; border-bottom: none; }
.rf-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg);
  border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; padding: 7px 12px; }
.rf-pay { background: none; border: 1px solid var(--line); color: var(--muted); font: inherit;
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.rf-pay:hover { color: var(--text); border-color: var(--muted-2); }
.rf-pay.on { border-color: #2b6640; color: var(--green-soft); background: #16351f; font-weight: 600; }
.rf-link { font-size: 10.5px; color: var(--accent); text-decoration: none; }
.rf-link:hover { text-decoration: underline; }

/* test-mode warning, wherever sending is about to happen */
.rb-testbanner, .set-testbox { background: #3a2f16; border: 1px solid #6b5526; color: #e2b657; }
.rb-testbanner { padding: 8px 10px; border-radius: 7px; font-size: 11.5px; margin: 0 0 8px; line-height: 1.5; }
.set-testbox { border-radius: 9px; padding: 11px 12px; margin-top: 12px; }
.set-testbox .set-label { color: #e2b657; }
.set-testbox .tiny { color: #d8bc8a; }

/* batch drawer: tabbed sections */
.rb-tabs { display: flex; gap: 4px; margin: 10px 0 4px; flex-wrap: wrap; }
.rb-tab { flex: 1 1 auto; background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 11px; padding: 7px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rb-tab:hover { color: var(--text); }
.rb-tab.on { border-color: var(--accent); color: var(--text); background: var(--card); font-weight: 600; }
.rb-pane { display: none; }
.rb-pane.on { display: block; }
.rb-sub { background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; margin-bottom: 10px; }
.rb-how { background: var(--bg); border-left: 2px solid var(--accent); padding: 7px 9px;
  border-radius: 0 6px 6px 0; margin: 6px 0 10px; line-height: 1.5; }
.rb-pane textarea { width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 12px; resize: vertical; }

/* batch update */
.rec-cb { width: 30px; padding-left: 10px !important; }
.rec-cb input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
tr.rec-sel td { background: rgba(220, 79, 76, .07); }
/* batch drawer — same furniture as the Manage drawer, but deliberately
   WITHOUT a scrim: the table behind it must stay clickable so rows can be
   ticked while the panel is open. Sits below Manage so that one can open
   over the top of it. */
.rec-bd { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; z-index: 55;
  background: var(--card); border-left: 2px solid var(--accent); display: flex; flex-direction: column;
  box-shadow: -18px 0 40px rgba(0,0,0,.45); }
.rec-bd .rec-dw-head h3 { margin: 0 0 3px; font-size: 16px; }
/* push the table clear of the drawer instead of hiding half of it */
#view-records.batch-open { padding-right: 436px; }
@media (max-width: 1240px) { #view-records.batch-open { padding-right: 0; } }
.rb-hint { margin: 10px 0 0; line-height: 1.55; }
.rb-notify { line-height: 1.45; }
.rb-btns { display: flex; gap: 8px; margin-top: 10px; }
.rb-btns .btn-accent { margin-left: auto; }
#rec-batch-msg { margin: 8px 0 0; line-height: 1.5; }
.rb-hintline, .rb-failline { display: block; margin-top: 6px; padding: 7px 9px; border-radius: 6px; line-height: 1.5; }
.rb-hintline { background: #3a2f16; border: 1px solid #6b5526; color: #e2b657; }
.rb-failline { background: #3b1d1d; border: 1px solid #6e3230; color: #ef8f8c; }
.rec-dw-cap { font-size: 9.5px; letter-spacing: 1.6px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.rec-bd textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  padding: 8px 10px; resize: vertical; margin-top: 4px; }
.rb-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rb-foot .btn { margin-left: auto; }
#rec-batch-msg { flex: 1 1 220px; }

/* manage drawer */
.rec-dw-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; }
.rec-dw { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; z-index: 61;
  background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  box-shadow: -18px 0 40px rgba(0,0,0,.45); }
.rec-dw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); }
.rec-dw-head h3 { margin: 0 0 2px; font-size: 16px; }
.rec-dw-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.rec-dw-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rec-dw-sec:last-child { border-bottom: none; }
.rec-dw-cap { font-size: 9.5px; letter-spacing: 1.6px; color: var(--accent); margin-bottom: 8px; font-weight: 700; }
.rec-dw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-dw-foot { padding: 14px 18px; border-top: 1px solid var(--line); }
.rec-dw-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rec-dw-hist li { border-left: 2px solid var(--line); padding-left: 9px; font-size: 12px; }

.verify-wrap { width: 560px; max-width: 100%; margin: 0 auto; text-align: center; }
.verify-wrap h2 { margin-top: 6px; }
.verify-form { display: flex; gap: 8px; margin: 18px 0; }
.verify-form input { flex: 1; font-family: Consolas, monospace; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; text-align: center; }
.verify-hit, .verify-miss { text-align: left; }
.vh-head { display: flex; justify-content: space-between; align-items: flex-start; }
.vh-track { font-size: 17px; }
.vh-grade b { font-size: 34px; font-weight: 800; color: var(--accent); }
.vh-name { font-size: 19px; font-weight: 700; margin-top: 6px; }
.vh-cos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vh-co { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; display: grid; text-align: center; }
.vh-co b { font-size: 15px; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.set-label { display: grid; gap: 5px; font-size: 10.5px; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; margin-top: 10px; }
.set-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text); margin-top: 14px; }
.set-check input { width: auto; margin-top: 2px; }
.login-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.login-link:hover { text-decoration: underline; }

/* ---------- print ---------- */
/* ================= RealRaw-style report ================= */
.rr-report { display: flex; flex-direction: column; gap: 16px; }
.rr-top { grid-template-columns: 2fr 1fr; margin-bottom: 0; }

/* executive summary dials */
.pillar-dials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 14px; }
.pillar-dial { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pd-sub { font-size: 10px; color: var(--muted); line-height: 1.45; font-family: Consolas, monospace; }
.pregrade-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg2); border: 1px solid #6b5a2a; border-radius: 9px; padding: 10px 14px; font-size: 14px;
}
.pregrade-banner.ok { border-color: #2c5c38; }
.pregrade-banner .pgb-x { color: var(--yellow-soft); font-weight: 800; }
.pregrade-banner.ok .pgb-x { color: var(--green-soft); }
.pregrade-banner .pgb-score { margin-left: auto; font-family: Consolas, monospace; font-size: 12.5px; color: var(--muted); }
.rr-comment { margin-top: 10px; }

/* centering side card */
.rr-cent-side + .rr-cent-side { margin-top: 12px; }
.rr-cent-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }

/* score breakdown */
.rr-score-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.rr-kpi { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.rr-kpi b { font-size: 26px; font-weight: 800; }
.rr-kpi b.tier { font-size: 15px; color: var(--orange); }
.rr-kpi .muted { font-size: 14px; }
.rr-kpi-lbl { font-size: 10px; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; margin-top: 3px; }
.score-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--line); }
.sr-name b { font-size: 13px; }
.sr-grade { font-size: 20px; font-weight: 800; }
.sr-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-badge { font-family: Consolas, monospace; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.sr-badge.full { color: var(--green-soft); border-color: #2c5c38; }
.sr-badge.cut { color: #f0a080; border-color: #5c3a3a; }
.sr-break { font-family: Consolas, monospace; font-size: 11px; color: var(--muted); }
.sr-total { font-family: Consolas, monospace; font-size: 15px; font-weight: 700; text-align: right; }
.rr-foot { margin-top: 10px; line-height: 1.5; }

/* by-grader cards */
.grader-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 10px; }
.grader-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; }
.gc-badge { display: inline-block; border: 1px solid #6b5a2a; color: #b9a86a; border-radius: 6px; font-size: 11px; font-weight: 800; padding: 2px 9px; letter-spacing: .5px; }
.gc-grade { font-size: 26px; font-weight: 800; margin: 6px 0 2px; }
.gc-tier { font-size: 10.5px; color: var(--muted); min-height: 26px; line-height: 1.3; }
.gc-total { font-family: Consolas, monospace; font-size: 13px; font-weight: 700; margin-top: 4px; }
.gc-poss { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gc-poss b { color: var(--accent); }

/* assessment */
.assess-row { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); }
.ar-body { flex: 1; }
.ar-body b { font-size: 13px; }
.ar-grade { flex: none; font-size: 16px; font-weight: 800; border: 1px solid; border-radius: 7px; padding: 3px 11px; }
.assess-banner { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 11px 14px; font-size: 13px; font-weight: 600; margin: 12px 0 8px; }

/* inspection thumbnail count badge */
.g-item .g-img { position: relative; }
.g-badge { position: absolute; left: 6px; bottom: 6px; font-family: Consolas, monospace; font-size: 10.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 5px; background: #000a; }
.g-badge.pass { color: var(--green-soft); }
.g-badge.minor { color: var(--green-soft); }
.g-badge.major { color: var(--yellow-soft); }
.g-badge.surf { color: #39d0ff; }
.g-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted-2); font-size: 11px; }

@media (max-width: 1180px) {
  .rr-top { grid-template-columns: 1fr; }
  .grader-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pillar-dials { grid-template-columns: repeat(2, 1fr); }
  .grader-cards, .rr-score-kpis { grid-template-columns: repeat(2, 1fr); }
  .score-row { grid-template-columns: 90px 1fr; }
  .sr-total { grid-column: 2; text-align: left; }
}

/* centering-only export report (print only, light layout) */
.centering-report { display: none; }
.cr-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #1a1a1a; padding-bottom: 8px; }
.cr-brand { display: flex; align-items: center; gap: 8px; font-size: 20px; letter-spacing: 1px; }
.cr-brand img { width: 30px; height: 30px; }
.cr-title { margin-left: auto; font-weight: 800; letter-spacing: 3px; font-size: 16px; }
.cr-id { font-family: Consolas, monospace; font-weight: 700; }
.cr-meta { margin: 8px 0 14px; color: #555; font-size: 13px; }
.cr-top { display: flex; align-items: center; gap: 26px; margin-bottom: 16px; }
.centering-report .ring { background: conic-gradient(var(--ring-color, #3aa) calc(var(--pct,0) * 1%), #e5e5e5 0); }
.centering-report .ring::before { background: #fff; }
.centering-report .ring small { color: #777; }
.cr-headline { display: flex; gap: 16px; }
.cr-hl { border: 1px solid #ccc; border-radius: 10px; padding: 10px 20px; text-align: center; }
.cr-hl.red { background: #fbeaea; border-color: #e0b4b4; }
.cr-hl span { display: block; font-size: 10px; letter-spacing: 1px; color: #777; font-weight: 700; }
.cr-hl b { font-size: 30px; font-weight: 800; }
.cr-hl i { font-size: 12px; color: #888; font-style: normal; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr-box { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; }
.cr-box h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .5px; }
.cr-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cr-tbl th { color: #888; font-size: 10px; text-align: center; padding: 3px; font-weight: 700; }
.cr-tbl td { text-align: center; padding: 4px 3px; border-top: 1px solid #eee; font-family: Consolas, monospace; }
.cr-tbl td:first-child, .cr-tbl th:first-child { text-align: left; font-family: inherit; font-weight: 700; }
.cr-wtg { margin-top: 8px; font-size: 12px; }
.cr-wtg span { display: inline-block; font-weight: 800; padding: 2px 7px; margin-right: 4px; border: 1px solid #ccc; border-radius: 5px; }
.cr-wtg span.out { opacity: .25; }
/* captured edge shots, guides burned in */
.cr-shots { margin-top: 14px; break-inside: avoid; page-break-inside: avoid; }
.cr-shots h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .5px; text-transform: capitalize; }
.cr-shots h4 i { font-weight: 400; font-style: normal; color: #888; font-size: 10.5px; letter-spacing: 0; margin-left: 6px; }
.cr-shot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cr-shot { margin: 0; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fafafa; break-inside: avoid; }
.cr-shot img { display: block; width: 100%; height: 96px; object-fit: contain; background: #000; }
.cr-noshot { height: 96px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; background: #f2f2f2; }
.cr-shot figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4px 7px; font-size: 10.5px; }
.cr-shot figcaption b { letter-spacing: .5px; }
.cr-shot figcaption span { font-family: Consolas, monospace; color: #555; }
.cr-foot { display: flex; justify-content: space-between; margin-top: 16px; font-size: 10.5px; color: #888; border-top: 1px solid #ddd; padding-top: 6px; }

/* ===== FULL pre-grade report (print only, light document — modelled on
   the reference export: caption rows, hairline tables, ring dials) ===== */
.full-report { display: none; font-family: var(--rep-font); color: #111; }
.full-report [class^="fr-"], .full-report [class*=" fr-"] { font-family: var(--rep-font); }
.fr-cap { font-size: 10px; font-weight: 800; letter-spacing: .28em; color: #666; }
.fr-titlebar { display: flex; align-items: center; gap: 16px;
  border-bottom: 3px solid #111; padding-bottom: 10px; margin: 4px 0 14px; }
.fr-titlethumb { width: 92px; height: 128px; object-fit: cover; border-radius: 7px; border: 1px solid #ccc;
  flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.fr-titletext { flex: 1 1 auto; min-width: 0; }
.fr-titlebar h1 { margin: 0; font-size: 25px; }
.fr-titlemeta { font-size: 11.5px; letter-spacing: .04em; color: #555; margin-top: 3px; }
.fr-titletrack { font-family: Consolas, monospace; font-size: 10.5px; color: #888; margin-top: 4px; }
/* TAG-style card hero: front + back, large, up top */
.fr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 14px; break-inside: avoid; }
.fr-cardshot { margin: 0; }
.fr-cardshot img { display: block; width: 100%; height: 300px; object-fit: contain; background: #f4f4f4; border-radius: 10px; border: 1px solid #e2e2e2; }
.fr-cardshot .fr-noshot { height: 300px; border-radius: 10px; }
.fr-cardshot figcaption { text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: #888; margin-top: 5px; }
.fr-exec { background: #f4f4f4; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; break-inside: avoid; }
.fr-exec-cap { font-size: 9.5px; font-weight: 800; letter-spacing: .22em; color: #666; margin-bottom: 10px; }
.fr-dials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fr-dial { text-align: center; }
.fr-dial .ring { margin: 0 auto; }
.full-report .ring { width: 66px; height: 66px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, #3aa) calc(var(--pct, 0) * 1%), #e3e3e3 0); }
.full-report .ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
  box-shadow: none; }
.full-report .ring span { position: relative; font-size: 17px; font-weight: 800; }
.fr-dial-lbl { margin-top: 5px; font-size: 9px; font-weight: 800; letter-spacing: .18em; color: #555; }
.fr-dial-sub { font-size: 8.5px; color: #888; margin-top: 2px; }
.fr-exec-line { border-top: 1px solid #ddd; margin-top: 11px; padding-top: 9px; font-size: 13.5px; font-weight: 800; }
.fr-scoreline { display: flex; gap: 34px; align-items: baseline; margin: 4px 0 8px; }
.fr-big { font-size: 27px; font-weight: 800; }
.fr-big i { font-style: normal; font-size: 10.5px; font-weight: 700; color: #777; letter-spacing: .06em; margin-left: 5px; }
.fr-ptable { border-top: 1px solid #ccc; margin-bottom: 16px; }
.fr-prow { display: grid; grid-template-columns: 74px 76px 76px 1fr 84px 40px; gap: 8px; align-items: center;
  border-bottom: 1px solid #e5e5e5; padding: 6px 0; font-size: 12px; }
.fr-pname { font-weight: 700; }
.fr-chip { font-family: Consolas, monospace; font-size: 10.5px; border: 1px solid #ccc; border-radius: 6px;
  padding: 2px 7px; text-align: center; white-space: nowrap; }
.fr-pnote { font-size: 10.5px; color: #555; font-family: Consolas, monospace; }
.fr-ptot { text-align: right; font-size: 12.5px; }
.fr-pg { text-align: right; font-size: 13px; }
.fr-seccap { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #444;
  border-top: 1px solid #bbb; padding-top: 8px; margin: 14px 0 6px; }
.fr-gtable { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 4px; }
.fr-gtable th { text-align: left; font-size: 10px; letter-spacing: .06em; color: #666; padding: 4px 6px 4px 0; }
.fr-gtable td { border-top: 1px solid #e5e5e5; padding: 5px 6px 5px 0; }
.fr-gtable td:first-child { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: #666; }
.fr-atable { border-top: none; }
.fr-arow { display: grid; grid-template-columns: 74px 34px 1fr; gap: 10px; align-items: baseline;
  border-bottom: 1px solid #e5e5e5; padding: 6px 0; font-size: 11.5px; }
.fr-ag { font-size: 13px; }
.fr-anote { color: #444; }
.fr-ceiling { font-size: 12px; font-weight: 800; margin: 10px 0 0; }
.fr-page { break-before: page; page-break-before: always; }
.fr-btable { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 8px; }
.fr-btable th { text-align: left; font-size: 9.5px; letter-spacing: .12em; color: #666; padding: 4px 0; }
.fr-btable td { border-top: 1px solid #e5e5e5; padding: 5px 0; }
.fr-btable td:nth-child(2) { font-family: Consolas, monospace; }
.fr-btable td:nth-child(3) { font-family: Consolas, monospace; color: #333; }
.fr-border { margin-bottom: 16px; break-inside: avoid; }
.fr-shotrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fr-shot { margin: 0; break-inside: avoid; }
.fr-shot img { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: 8px; background: #eee; }
.fr-noshot { height: 88px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #f0f0f0; color: #aaa; font-size: 10px; }
.fr-shot figcaption { font-family: Consolas, monospace; font-size: 8.5px; letter-spacing: .08em;
  color: #888; text-align: center; margin-top: 3px; }
.fr-inspsum { font-family: Consolas, monospace; font-size: 10.5px; color: #333; line-height: 1.55; margin: 2px 0 10px; }
.fr-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
.fr-gitem { break-inside: avoid; }
.fr-crops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.fr-crop { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fr-crop.minor { border: 2px dotted #2e9e52; }
.fr-crop.major { border: 2.5px solid #d8bc2a; }
.fr-crop.surf { border: 2.5px solid #39a8d0; }
.fr-crop.edgep { border: 2.5px solid #e08a3c; }
.fr-gitem-lbl { font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #555; margin-bottom: 4px; }
.fr-crop-fig { margin: 0; text-align: center; }
.fr-crop-fig figcaption { font-size: 7.5px; color: #888; margin-top: 2px; letter-spacing: .3px; }
.fr-bl { border-top: 1px solid #bbb; margin-top: 16px; padding-top: 10px; font-size: 11.5px; }
.fr-tiny { font-size: 9px; color: #999; line-height: 1.5; margin: 8px 0 0; }
.fr-foot { display: flex; justify-content: space-between; font-size: 9.5px; color: #888;
  border-top: 1px solid #ddd; margin-top: 10px; padding-top: 5px; font-family: Consolas, monospace; }

/* ===== Guide — topic tabs ===== */
.gd-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; }
.gd-tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; }
.gd-tab { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
  padding: 10px 12px; cursor: pointer; font: inherit; transition: border-color .12s, color .12s; }
.gd-tab:hover { color: var(--text); border-color: var(--muted-2); }
.gd-tab.on { border-color: var(--accent); color: var(--text); background: var(--bg2); }
.gd-tab .gd-ico { font-size: 14px; line-height: 1.4; opacity: .8; flex: none; }
.gd-tab.on .gd-ico { color: var(--accent); opacity: 1; }
.gd-tab b { display: block; font-size: 12.5px; line-height: 1.25; }
.gd-tab i { display: block; font-style: normal; font-size: 9.5px; color: var(--muted-2); letter-spacing: .3px; margin-top: 2px; }
.gd-topic { display: none; }
.gd-topic.on { display: block; animation: gdIn .16s ease-out; }
@keyframes gdIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.gd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.gd-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; }
.gd-panel p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; }
.gd-panel p:last-child { margin-bottom: 0; }
.gd-panel-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px;
  letter-spacing: .6px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gd-example { background: var(--card); border: 1px dashed var(--muted-2); border-radius: 7px;
  padding: 8px 10px; font-family: Consolas, monospace; font-size: 11.5px; word-break: break-all; }
.gd-list { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.7; }
.gd-list li { margin-bottom: 3px; }

.gd-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.gd-keys > div { display: flex; align-items: center; gap: 7px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 12px; }
.gd-keys span { color: var(--muted); }
kbd { background: var(--card); border: 1px solid var(--muted-2); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; font-family: Consolas, monospace; font-size: 11px; color: var(--text); }

.gd-steps { margin: 10px 0 0; padding-left: 19px; font-size: 12.5px; line-height: 1.75; }
.gd-steps li { margin-bottom: 5px; }
.gd-warn { border-color: var(--accent); }
.gd-err { font-family: Consolas, monospace; font-size: 11.5px; background: #3b1d1d;
  border: 1px solid #6e3230; color: #ef8f8c; padding: 2px 7px; border-radius: 5px; }

.gd-copybox { position: relative; }
.gd-copybox pre { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-family: Consolas, monospace; font-size: 12px; line-height: 1.65;
  color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; }
.gd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gd-table th { text-align: left; color: var(--muted); font-size: 10px; letter-spacing: 1px;
  padding: 7px 9px; border-bottom: 1px solid var(--line); }
.gd-table td { padding: 8px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gd-table tr:last-child td { border-bottom: none; }
.gd-table td:first-child { white-space: nowrap; color: var(--text); }

@media (max-width: 1100px) {
  .gd-wrap { grid-template-columns: 1fr; }
  .gd-tabs { position: static; flex-direction: row; flex-wrap: wrap; }
  .gd-tab { width: auto; flex: 1 1 160px; }
  .gd-tab i { display: none; }
}

/* ===== Public card report (#/report) ===== */
.rp-wrap { width: 780px; max-width: 100%; margin: 0 auto; font-family: var(--rep-font); }
#view-labreport, #view-verify .card { font-family: var(--rep-font); }
.rp-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rp-brand .brand-word { font-size: 17px; }
.rp-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rp-doc { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.rp-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  border-bottom: 2px solid var(--accent); padding-bottom: 14px; }
.rp-head h1 { margin: 3px 0 4px; font-size: 22px; }
.rp-idbox { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rp-track { font-size: 15px; font-weight: 700; }
.rp-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.rp-score { text-align: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 22px; min-width: 150px; }
.rp-big { font-size: 42px; font-weight: 800; line-height: 1; color: var(--accent); }
.rp-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.rp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; min-width: 260px; }
.rp-pillar { background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 6px; text-align: center; }
.rp-pillar b { display: block; font-size: 19px; }
.rp-pillar span { font-size: 8px; letter-spacing: .6px; color: var(--muted-2); }
.rp-shots { display: flex; gap: 14px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.rp-shot { margin: 0; text-align: center; }
.rp-shot img { max-width: 300px; width: 100%; border: 1px solid var(--line); border-radius: 9px; display: block; }
.rp-shot figcaption { font-size: 9.5px; letter-spacing: 2px; color: var(--muted-2); margin-top: 5px; }
.rp-noimg { width: 220px; aspect-ratio: 3/4; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; border: 1.5px dashed var(--line);
  border-radius: 9px; color: var(--muted-2); font-size: 11px; letter-spacing: 1px; }
.rp-noimg span { font-size: 9px; opacity: .75; }
.rp-legend { text-align: center; margin: 10px 0 0; }
.rp-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
.rp-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--line); width: 190px; }
.rp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rp-table tr:last-child th, .rp-table tr:last-child td { border-bottom: none; }
.rp-foot { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; line-height: 1.6; }
@media print {
  body.printing-report #sidebar, body.printing-report #topbar, body.printing-report .no-print { display: none !important; }
  .rp-doc { border: none; padding: 0; }
}

/* ===== Public status tracking (#/track) ===== */
.tk-card { text-align: left; margin-top: 4px; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tk-name { font-size: 18px; font-weight: 700; margin-top: 10px; }
.tk-note { margin: 8px 0 0; }
/* vertical rail so long status names never collide on a phone */
.tk-rail { list-style: none; margin: 18px 0 6px; padding: 0; }
.tk-rail li { position: relative; padding: 0 0 16px 26px; }
.tk-rail li::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.tk-rail li:last-child::before { display: none; }
.tk-rail li.on::before { background: var(--green-soft); }
.tk-rail .mc-dot { position: absolute; left: 0; top: 1px; margin: 0; }
.tk-lbl { display: block; font-size: 13px; color: var(--muted-2); line-height: 1.2; }
.tk-rail li.on .tk-lbl { color: var(--text); font-weight: 600; }
.tk-when { font-size: 10.5px; color: var(--muted-2); }
.tk-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tk-fact { flex: 1; min-width: 140px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.tk-fact b { font-size: 16px; }
.tk-foot { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 9px; line-height: 1.5; }

/* ===== Customer portal (My Cards) ===== */
/* customer shell: hide every operational entry point */
.customer-mode .sb-btn[data-nav="new"],
.customer-mode .sb-btn[data-nav="setup"],
.customer-mode .sb-btn[data-nav="records"],
.customer-mode .sb-btn[data-nav="home"],
.customer-mode #step-nav { display: none !important; }

/* AGENT shell — the full studio minus the app configuration */
.agent-mode .sb-btn[data-nav="settings"] { display: none !important; }

/* Settings → Access: granted-agent rows */
.agent-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 0; border-bottom: 1px solid #3a3a3a; }
.agent-row:last-child { border-bottom: 0; }
.login-ok { background: #16351f; border: 1px solid #2b6640; color: #9ee0b4; font-size: 12.5px;
  padding: 9px 11px; border-radius: 8px; margin-top: 10px; line-height: 1.5; text-align: left; }

.mc-verify { border-color: #6b5526; }
.mc-verify p { margin: 6px 0 10px; }
.mc-prefs { margin-bottom: 14px; }
.mc-prefs-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 10px; }
.mc-line-setup { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.mc-code { background: var(--card); border: 1px solid var(--accent); color: var(--accent);
  padding: 2px 8px; border-radius: 5px; letter-spacing: 1.5px; font-weight: 700; }

.mc-empty { padding: 34px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.mc-card { display: grid; grid-template-columns: 116px 1fr; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.mc-art img { width: 116px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.mc-art-ph { width: 116px; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--muted-2); border-radius: 8px; color: var(--muted-2); font-size: 26px; }
.mc-info { min-width: 0; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mc-head h3 { margin: 0 0 3px; font-size: 16px; }
.mc-hold { background: #3b1d1d; border: 1px solid #6e3230; color: #ef8f8c; font-size: 12.5px;
  border-radius: 8px; padding: 8px 10px; margin: 10px 0; }

/* status timeline */
.mc-track { list-style: none; display: flex; margin: 14px 0 8px; padding: 0; gap: 0; }
.mc-track li { flex: 1; position: relative; text-align: center; }
.mc-track li::before { content: ''; position: absolute; top: 6px; left: 0; right: 50%; height: 2px; background: var(--line); }
.mc-track li::after { content: ''; position: absolute; top: 6px; left: 50%; right: 0; height: 2px; background: var(--line); }
.mc-track li:first-child::before, .mc-track li:last-child::after { display: none; }
.mc-track li.on::before, .mc-track li.on::after { background: var(--green-soft); }
.mc-track li:last-child.on::after { display: none; }
.mc-dot { position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 0 auto 5px;
  border-radius: 50%; background: var(--bg2); border: 2px solid var(--line); }
.mc-track li.on .mc-dot { background: var(--green-soft); border-color: var(--green-soft); }
.mc-steplbl { font-size: 9px; letter-spacing: .4px; color: var(--muted-2); }
.mc-track li.on .mc-steplbl { color: var(--text); }

.mc-grades { display: flex; gap: 10px; margin: 12px 0 4px; }
.mc-gbox { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; }
.mc-gbox b { font-size: 18px; }
.mc-selfgrade { margin-top: 8px; }
.mc-selfgrade summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.mc-selfgrade summary:hover { color: var(--text); }
.mc-sg-row { display: flex; gap: 8px; margin: 9px 0 4px; flex-wrap: wrap; }
.mc-sg-row select { width: 92px; }
.mc-sg-row input { width: 120px; }

/* ===== Step 7 — Job Summary ===== */
#summary-body { padding: 4px 2px; }
.js-loading { padding: 40px; text-align: center; }
.js-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.js-maps { display: flex; gap: 14px; justify-content: center; }
.js-map { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.js-map img { max-height: calc(100vh - 230px); max-width: 100%; width: auto; border: 1px solid var(--line); border-radius: 10px; background: #000; }
.js-map figcaption { font-size: 10px; letter-spacing: 2px; color: var(--muted-2); }
.js-map.empty { align-self: stretch; }
.js-noimg { aspect-ratio: 3/4; min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 1.5px dashed var(--line); border-radius: 10px; color: var(--muted-2); font-size: 11px; letter-spacing: 1px; }
.js-noimg span { font-size: 9px; opacity: .7; }
.js-info { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.js-cardhead h2 { margin: 0 0 3px; font-size: 20px; }
.js-grade { display: flex; gap: 10px; }
.js-kpi { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.js-kpi b { display: block; font-size: 24px; line-height: 1; }
.js-kpi b.tier { font-size: 14px; }
.js-kpi span { font-size: 8.5px; letter-spacing: 1px; }
.js-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.js-pillar { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 4px; text-align: center; }
.js-pillar b { display: block; font-size: 17px; }
.js-pillar span { font-size: 8px; letter-spacing: .5px; color: var(--muted-2); }
.js-defects { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; }
.js-defects b { color: var(--text); }

/* ===== SETUP page — calibration & lens ===== */
/* ---- shared Microscope card: device picker / resolutions / Camera
   Settings appear ONLY on SETUP; the studio pages show just the camera
   ON/OFF + the merged lens-correction & scale toggle ---- */
/* (2026-09-11) the camera stack shows its FULL controls on every page —
   the .setup-only gating and the studio Scale readout block are gone */

/* ===== SETUP — 3 equal columns, no scroll ===== */
/* the operator's CAMERA mockup: live view | calibration + loupe + bench |
   camera cards | the four captured rulers */
.setup-layout { display: grid; column-gap: 6px;
  grid-template-columns: var(--sd) auto var(--sd) minmax(0, 1.05fr) minmax(0, .95fr) var(--sd) 290px;
  /* the same budget the STAGE page uses, so the live view on the two pages
     is one box in two places: identical size, identical position */
  align-items: stretch; height: calc(100vh - 180px); }
.setup-layout > * { min-height: 0; min-width: 0; }
.setup-livecol, .setup-opcol, .setup-camcol { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
/* the live box is the STAGE page's, to the pixel: full column height, 9/16,
   width derived, centred and never stretched by the flex cross-axis */
.setup-livecol .stage.portrait { flex: 1 1 auto; align-self: center;
  height: 100%; min-height: 0; width: auto; max-width: 100%; margin: 0; }
.setup-opcol > .sg-card { flex: 0 0 auto; }
.setup-oprow { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.setup-oprow > .card { min-height: 0; display: flex; flex-direction: column; }
.setup-loupecard #setup-loupe { flex: 1 1 auto; min-height: 90px; margin-top: 6px;
  background: #101010 no-repeat; border: 1px solid var(--line); border-radius: 8px; }
.setup-benchcard .setup-complete { margin-top: auto; }
#view-setup #cam-stack { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
#view-setup #cap-cam-card, #view-setup #cap-uvc-card { margin: 0; flex: 0 0 auto; }
#view-setup .card.collapsible > .card-head { cursor: pointer; }
/* trim the space around the vertical caption (keep the left position) */
.setup-layout .sec-div::after { padding: 2px 0; }
/* the loupe is a panel of its own on this page now, and its resolution is a
   real control in the Camera card — both were hidden when the magnifier was
   briefly replaced by Ctrl+wheel zoom */
/* no slab tag on SETUP → don't reserve the studio header height (that left a
   big empty band under the wordmark) */
#view-setup .page-head { min-height: 0; align-items: center; }
/* #setup-video inherits .stage video (+ .rot90.flip180 from sizeVideos) */
#setup-guides { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; }
/* the loupe floats over the stage's top-right — no layout height cost */
.setup-loupe { position: absolute; top: 8px; right: 8px; z-index: 7; width: 150px; aspect-ratio: 9/16;
  border-radius: 10px; border: 2px solid var(--neon-red); background: #000 no-repeat; box-shadow: 0 4px 20px #000a; }

/* the CAMERA cards: plain panels, no wizard chrome */
.sg-card { display: flex; flex-direction: column; }
.sg-card > .card-body { display: flex; flex-direction: column; gap: 0; }
/* the shared #cam-stack (Camera + Camera Settings) becomes grid items */
#view-setup #cam-stack { display: contents; }
#view-setup #cap-cam-card { grid-area: cam; align-self: start; margin: 0; }
#view-setup #cap-uvc-card { grid-area: uvc; align-self: start; margin: 0; }
/* below ~1500px there is no room for two columns inside the card — the
   wizard stacks over the camera cards instead of squeezing beside them */
@media (max-width: 1500px) {
  .setup-layout { grid-template-columns: var(--sd) auto var(--sd) minmax(0, 1.05fr) minmax(0, .95fr) var(--sd) 210px; }
  /* the live view is width-capped here for the same reason as STAGE: a
     full-height 9/16 box would starve every column beside it */
  .setup-livecol .stage.portrait { flex: 0 0 auto; width: 300px; height: calc(300px * 16 / 9); }
}

/* axis picker + editable bench-scale rows (the simplified CAMERA card) */
.sg-axisrow { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.sg-seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sg-seg .btn { border: none; border-radius: 0; padding: 5px 12px; font-size: 10.5px; letter-spacing: .06em; }
.sg-seg .btn.on { background: var(--accent); color: #fff; }
.sg-cal-row { margin-top: 9px; }
.sg-calhint { margin: 8px 0 0; line-height: 1.5; }
.sg-scale-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sg-scale-row span { flex: 0 0 96px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--text); }
.sg-scale-row input { width: 96px; font-family: Consolas, monospace; }
.sg-scale-row u { text-decoration: none; font-size: 10.5px; color: var(--muted-2); }
.sg-devrow b { font-family: Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.sg-devrow b.ok { color: #7fe09a; }
.sg-devrow b.bad { color: var(--accent); }

/* Instructions box */
.sg-instr-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg2); }
.sg-instr-box .sg-instr { margin: 6px 0 0; min-height: 0; }
/* calibrated table */
.sg-caltable { width: 100%; border-collapse: collapse; font-size: 12px; }
.sg-caltable th, .sg-caltable td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sg-caltable thead th { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 800; }
.sg-caltable tbody th { font-weight: 800; letter-spacing: .06em; color: var(--text); }
.sg-caltable td { font-family: Consolas, monospace; color: var(--green-soft); }
.sg-caltable tr:last-child th, .sg-caltable tr:last-child td { border-bottom: none; }
/* full-width green CTA once the bench is fully calibrated */
.setup-complete { margin-top: 12px; padding: 12px; font-size: 14px; font-weight: 800; letter-spacing: .04em;
  background: #1d3a24; border: 1px solid #2c5c38; color: #7fe09a; }
.setup-complete:hover { background: #24482d; border-color: #39FF14; color: #baf7c4; }
.setup-complete.hidden { display: none; }
/* keep every slider + value inside its cell (was overflowing the panel) */
#cap-uvc-card .uvc-row { min-width: 0; }
#cap-uvc-card .uvc-row > * { min-width: 0; }
#cap-uvc-card .uvc-controls select { max-width: 100%; }
/* the microscope's own Scale & Lens readout is redundant on SETUP */
#view-setup #cap-cal-readout { display: none; }
.sg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.sg-title { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.sg-step { font-size: 11px; font-weight: 700; color: var(--muted); }
/* NEAR › FAR track */
/* the four-step wizard checklist — done ✓ / current ● / pending */
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sg-steps .sp-step { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted-2); font-size: 11.5px; font-weight: 700;
  transition: border-color .15s, background .15s, color .15s; }
.sg-steps .sp-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; background: #0d0d0d; border: 1px solid var(--line); }
.sg-steps .sp-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-steps .sp-step.on { border-color: var(--accent); background: #3a1414; color: #fff; box-shadow: 0 0 0 1px var(--accent) inset; }
.sg-steps .sp-step.on .sp-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.sg-steps .sp-step.done { border-color: #2c5c38; color: #7fe09a; }
.sg-steps .sp-step.done .sp-n { background: #1d3a24; border-color: #2c5c38; color: #7fe09a; }
.sg-instr { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; min-height: 0; }
.sg-instr b { color: var(--text); }
.sg-cap-row { display: flex; gap: 8px; }
.sg-cap-row .btn { flex: 1 1 0; }
.sg-block { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--bg2); }
.sg-block-lbl { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted-2); text-transform: uppercase; margin-bottom: 8px; }
.sg-cal-row { display: flex; align-items: center; gap: 10px; }
.sg-cal-row label { flex: 0 0 auto; white-space: nowrap; }
.sg-cal-row .btn { flex: 0 0 auto; }
.sg-cal-row input { width: 52px; }
.sg-readout { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: Consolas, monospace; font-size: 12px; font-weight: 700;
  color: var(--green-soft); text-align: center; }
.setup-guide .lens-slider { margin-top: 8px; }
.sg-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.setup-progress { display: flex; gap: 7px; }
.sp-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; background: var(--bg2); border: 1px solid var(--line); color: var(--muted-2); }
.sp-dot.on { border-color: var(--accent); color: #fff; }
.sp-dot.done { background: #1d3a24; border-color: #2c5c38; color: #7fe09a; }
.sg-stored { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.sg-st-row { display: grid; grid-template-columns: 54px 1fr 1fr; gap: 8px; align-items: baseline;
  font-family: Consolas, monospace; font-size: 12px; }
.sg-st-h { font-weight: 800; letter-spacing: .08em; color: var(--text); font-family: inherit; }
.sg-st-row span { color: var(--muted); }
.sg-st-k { color: var(--muted-2); }

/* corrected output: before→after per height, stacked, filling the height */
.setup-compare { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 6px; align-self: stretch; min-width: 0; min-height: 0; }
.sc-cell { margin: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.sc-cell .sc-img { flex: 1 1 auto; }
.sc-cell figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.sc-cell figcaption span { font-family: Consolas, monospace; font-weight: 700; color: var(--text); }
.sc-pair { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-half { display: flex; flex-direction: column; min-height: 0; }
.sc-half u { text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .14em; color: var(--muted-2);
  text-decoration: none; margin-top: 3px; }
.sc-img { position: relative; flex: 1 1 0; min-height: 0; border-radius: 8px; overflow: hidden;
  background: #000; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: none; }
.sc-cell.has .sc-img img { display: block; }
.sc-cell.has .sc-ph { display: none; }
.sc-ph { color: var(--muted-2); font-size: 10.5px; }
/* report calibration appendix */
.fr-calrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }

@media print {
  body { background: #fff; }
  .no-print, #topbar { display: none !important; }
  /* centering-only export */
  body.print-centering #app { display: none !important; }
  body.print-centering .centering-report { display: block; padding: 12mm; color: #111; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #view-labreport.active { padding: 0; }
  .lab { width: 100%; border: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: 210mm 210mm; margin: 0; }
  /* full pre-grade report — @page is switched to A4 by an injected
     style during the export, so the square lab-report page survives */
  body.print-fullreport #app, body.print-fullreport #splash { display: none !important; }
  body.print-fullreport .full-report { display: block; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Export report = print the redesigned Results page. @page stays
     210mm square (lab report needs it) so pad the results view instead
     of using a page margin, and let cards paginate cleanly. */
  body.print-results .res-meta, body.print-results .res-actions { display: none !important; }
  body.print-results #view-results.active { padding: 10mm; }
  body.print-results .card { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-results .rr-report { gap: 8mm; }
}

/* ---------- responsive / iPad landscape ---------- */
@media (max-width: 1180px) {
  .cap-layout { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 900px) {
  .cap-layout { grid-template-columns: 1fr; }
  .side-panel { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .res-meta { grid-template-columns: 1fr 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  /* tight header: keep only the numbered circles + arrows */
  #step-nav .step-txt, #step-nav .step-arrow { display: none; }
  .step-btn { padding: 5px; }
}
@media (max-height: 920px) {
  .loupe-fixed { max-width: 178px; }
}
@media (max-width: 700px) {
  #app { grid-template-columns: 52px minmax(0, 1fr); }
  .sb-btn { width: 44px; }
  .sb-btn > span:not(.ico) { display: none; }
  .sb-logo img { width: 32px; height: 32px; }
  .topbar-brand .tb-tag { display: none; }
  #user-chip { display: none; }
}

/* ============================================================
   XY STAGE  —  the motion stage under the camera column.
   Same locked-grid feel as the studio pages: a section divider, the
   top-down map in the wide column, the controls stacked at the right.
   Nothing here scrolls the document.
   ============================================================ */
/* STAGE v4 (operator mockup 2026-09-11): FOUR RESIZABLE COLUMNS on the
   NEW JOB schema — live view | mapping (FCV + camera stack) | operation
   (coordinates · connection · sequence · calibration) | control (jog ·
   move · position · machine · wire log). The three named sec-divs drag
   the column to their LEFT; the control column takes the remainder.
   Column vars live on #view-stage (see the v3/v4 block near EOF). */
.stage-layout { display: grid; column-gap: 6px;
  grid-template-columns: var(--sd) var(--stg-c-live) var(--sd) var(--stg-c-map) var(--sd) var(--stg-c-op) var(--sd) minmax(300px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch; height: calc(100vh - 180px); }
.stage-layout > * { min-height: 0; min-width: 0; }
.stage-layout .sec-div.jb-resizable { cursor: col-resize; }

.stg-livecol, .stg-fcvcol, .stg-opcol { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
/* width-driven like the NEW JOB live box: the column var sets the width,
   the 9/16 aspect derives the height, capped so it can never outgrow the
   layout (both constraints on WIDTH keeps the aspect true — a height cap
   on an aspect box is the documented black-band letterbox bug) */
.stg-livebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* 2K/4K + GRID grouped right, CENTERING's foot manner (2026-09-13) */
.stg-livebar-right { display: inline-flex; align-items: center; gap: 6px; }
.stg-panelhead { flex: 0 0 auto; display: flex; justify-content: space-between;
  align-items: baseline; padding: 0 2px; font-size: 12.5px; }
.stg-mapbox { flex: 1 1 auto; min-width: 0; min-height: 110px; position: relative; }
.stg-opcol > .card { flex: 0 0 auto; }
#stg-map { position: absolute; inset: 0; width: 100%; height: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* Two columns, so nothing scrolls. One column held 1254px of cards in a
   767px box; splitting them is what makes the page fit rather than
   shrinking anything down to unreadable. */
.stg-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.stg-col .card { padding: 9px 10px; }
.stg-col .card-head { margin-bottom: 6px; }
.stg-poscard { flex: 0 0 auto; }

.stg-row { display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; margin-top: 5px; }
.stg-row:first-child { margin-top: 0; }
/* direct children only: inside a .stg-field (a COLUMN flex box) a basis of
   120px would be read as a 120px-tall select, not a 120px-wide one */
.stg-row > select { flex: 1 1 120px; min-width: 0; }
.stg-field select, .stg-field input { flex: 0 0 auto; }

.stg-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 70px; min-width: 0; }
.stg-field i { font-style: normal; font-size: 10px; letter-spacing: .5px; color: var(--muted-2); }
.stg-field input, .stg-field select { width: 100%; margin-top: 0; }

/* the readout is the one thing an operator reads from across the bench */
.stg-dro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stg-dro > div { background: #1f1f1f; border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 8px; display: flex; align-items: baseline; gap: 8px; }
.stg-dro i { font-style: normal; color: var(--muted-2); font-size: 11px; }
.stg-dro b { font-family: Consolas, monospace; font-size: 17px; color: #fff; }

.stg-meta { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 6px 0 0; }
.stg-meta dt { color: var(--muted-2); font-size: 11.5px; }
.stg-meta dd { margin: 0; font-size: 11.5px; font-family: Consolas, monospace; }

.stg-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.stg-pad button { padding: 5px 0; font-size: 13px; }
.stg-pad-mid { display: block; }

/* State pill: green idle, amber moving, red alarm. Red is never used for
   anything but a real fault, so it can be trusted at a glance. */
#view-stage .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted-2); }
#view-stage .pill.ok { color: #39FF14; border-color: #2b6b23; }
#view-stage .pill.warn { color: var(--yellow-soft); border-color: #6b5f23; }
#view-stage .pill.bad { color: var(--accent); border-color: #6b2b2b; }

.stg-msg { margin: 8px 0 0; font-size: 11.5px; color: var(--muted-2); min-height: 15px; }
.stg-msg.ok { color: #39FF14; }
.stg-msg.warn { color: var(--yellow-soft); }
.stg-msg.bad { color: var(--accent); }

/* NOT HOMED is a safety banner, not a hint — it stays loud. */
#view-stage .banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 8px 12px; font-size: 12.5px;
  background: rgba(220,79,76,.12); border: 1px solid var(--accent);
  border-radius: var(--radius); color: #f2d5d4; }

.btn.btn-danger { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.btn-danger:disabled { opacity: .4; }

/* (v4: the live view is width-driven by --stg-c-live at every size — the
   old ≤1460 340px cap and the ≤1365 alternate template are gone; below
   1366 the #main pan container carries the 1300px reference layout) */

/* ---------- 3 × 3 mosaic panel (Full-Card page) ---------- */
#mos-card .mos-note { margin: 0 0 8px; line-height: 1.45; font-size: 11.5px; color: var(--muted-2); }
#mos-card .mos-note.warn { color: #E8B44A; }
#mos-card .stg-row { margin-bottom: 6px; }
#mos-card .btn { margin-bottom: 6px; }
.mos-teach { padding-bottom: 8px; border-bottom: 1px solid #3A3A3A; margin-bottom: 10px; }
select.mos-map { width: 148px; flex: 0 0 auto; }
.mos-run { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.mos-grid {
  flex: 0 0 auto; display: grid; gap: 2px;
  grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(3, 18px);
}
.mos-cell { background: #333; border: 1px solid #4A4A4A; border-radius: 2px; }
.mos-cell.on { background: #39FF14; border-color: #39FF14; }

/* ---------- stage auto-capture (Centering · Inspection) ---------- */
.stg-auto { display: flex; flex-direction: column; gap: 6px; }
.stg-auto .stg-msg:empty { display: none; }

/* ---------- STAGE: the commissioning controls, brought in-app ---------- */
/* console + wire log sit under the map, where monospace has room to breathe */
/* Full Card View: ONE seamless composite with invisible hit zones — a
   quadrant outlines only on hover or selection, never as a grid line */
.stg-fcv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.stg-fcv-stage { flex: 1 1 auto; min-height: 0; display: flex;
  align-items: center; justify-content: center;
  background: #141414; border: 1px solid var(--line); border-radius: var(--radius); }
#stg-fcv-imgbox { position: relative; background: center / cover no-repeat; border-radius: 3px; }
#stg-fcv-cellov { position: absolute; inset: 0; }
.stg-fcv-hit { position: absolute; cursor: pointer; border: 1px solid transparent; border-radius: 2px; }
.stg-fcv-hit:hover { border-color: rgba(255,255,255,.55); }
.stg-fcv-hit.sel { border-color: #39FF14; box-shadow: 0 0 0 1px #39FF14 inset; }
.stg-fcv-bar { flex: 0 0 auto; }

/* the Microscope + Camera Settings stack (replaced the loupe 2026-09-09):
   mountCam inserts #cam-stack BEFORE the anchor (a hidden marker) —
   style the stack itself; it scrolls internally so the column never
   overflows */
.stg-camcol { display: none; }
/* the stack holds ONLY Camera Settings on this page since 2026-09-12
   (the Camera card re-mounts under the Live View) — the FCV preview
   takes the height (operator: larger) */
/* the stack holds Camera Settings on STAGE (the Camera card splits to
   the live column) — the v4.2 share keeps the FCV tall above it */
.stg-fcvcol > #cam-stack { flex: 0 1 38%; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; padding-right: 2px; }
.stg-fcvcol > #cam-stack .card { margin-bottom: 6px; }
/* the operation column scrolls internally now that Camera Settings
   rides below Capture Sequence (both collapsible) */
#view-stage .stg-opcol { overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
/* compact rows in the narrow columns (the Camera card sits in the live
   column since 2026-09-12, Camera Settings in the operation column
   since 2026-09-13 — the compact rules follow the card, not the stack) */
#view-stage #cam-stack .uvc-row, #view-stage #cap-uvc-card .uvc-row { grid-template-columns: 72px minmax(0,1fr) 48px; gap: 6px; }
#view-stage #cap-cam-card .res-row { grid-template-columns: 1fr 76px; }
/* Position card compacted so the Machine card fits the connection column */
#stg-card-pos .stg-dro > div { padding: 3px 7px; }
#stg-card-pos .stg-dro b { font-size: 14px; }
#stg-card-pos .stg-meta dt, #stg-card-pos .stg-meta dd { font-size: 10.5px; }
#stg-card-pos .stg-wpos th, #stg-card-pos .stg-wpos td { padding: 1px 6px; font-size: 10.5px; }
/* the loupe: same image, 2× the preview scale, panned to the cursor */
.stg-loupecard { flex: 0 0 26%; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#stg-loupe { flex: 1 1 auto; min-height: 0; background: #141414 no-repeat;
  border: 1px solid var(--line); border-radius: var(--radius); }
.stg-term { padding: 8px 10px !important; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.stg-term .card-head { margin-bottom: 6px; }
.stg-headtools { display: flex; align-items: center; gap: 8px; }
.stg-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-2); }
.stg-inline input { margin: 0; width: auto; }
.stg-pre {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0;
  background: #1b1b1b; border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; font-family: Consolas, monospace; font-size: 10.5px; line-height: 1.5;
  color: var(--muted-2); white-space: pre-wrap; word-break: break-all; scrollbar-width: thin;
}
.stg-term form.stg-row { margin-top: 6px; flex-wrap: nowrap; }
.stg-term form.stg-row input { flex: 1 1 auto; min-width: 0; }
.wl-tx { color: #7FC8FF; }
.wl-rx { color: #A6A6A6; }
.wl-note { color: #7F7F7F; font-style: italic; }
.wl-err { color: var(--accent); }

/* machine vs work, side by side — the one place both are worth seeing */
.stg-wpos { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11.5px; }
.stg-wpos th, .stg-wpos td { text-align: right; padding: 2px 4px; font-weight: 400; }
.stg-wpos thead th { color: var(--muted-2); font-size: 9.5px; letter-spacing: .5px; }
.stg-wpos tbody th { text-align: left; color: var(--muted-2); }
.stg-wpos td { font-family: Consolas, monospace; color: var(--text); }

/* two per row in a 244px column: three would clip "Set origin" */
#stg-seq-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; margin-top: 5px; }

.stg-btns { flex-wrap: wrap; }
.stg-btns .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }

/* FCV processing progress: thin fill bar with a stage label over it */
.stg-prog {
  position: relative; height: 16px; margin-top: 6px;
  background: #1b1b1b; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.stg-prog i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--accent); opacity: .5; transition: width .15s linear;
}
.stg-prog span {
  position: relative; display: block; text-align: center;
  font-size: 10px; line-height: 14px; letter-spacing: .4px; color: #A6A6A6;
}

/* Run + capture cadence: settle → [1s] → photo → [1s] → next, one line */
.stg-cadence { align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.stg-cadence > select.stg-cad-sel { flex: 0 0 auto; width: 52px; min-width: 0; }

/* Absolute move: everything on one line — inputs sized for three digits,
   the Go button beside them, never beneath */
#stg-card-move .stg-row { flex-wrap: nowrap; }
#stg-card-move .stg-field { flex: 0 1 auto; }
#stg-card-move .stg-field input { width: 54px; }

/* Jog: compact squares so the card sits at the G-code card's height */
#view-stage .stg-pad { grid-template-columns: repeat(3, 40px); grid-auto-rows: 40px;
  justify-content: center; gap: 4px; }
#view-stage .stg-pad button { aspect-ratio: auto; font-size: 13px; }

/* FCV action bar: the two buttons, right-aligned, wrapping before clipping */
.stg-fcv-bar { justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* the grid button's look for other stage-corner toggles. NOT .grid-btn:
   bindGrids() binds that class to the shared grid, and auto-align must
   not flip the grid when clicked. */
.icon-btn {
  position: absolute; z-index: 7; cursor: pointer;
  width: 28px; height: 28px; border-radius: 7px; font-size: 14px; line-height: 1;
  background: rgba(13,13,13,.92); color: var(--muted-2);
  border: 1px solid var(--line); box-shadow: 0 2px 8px #0008;
  transition: color .12s, border-color .12s, background .12s;
}
.icon-btn.on { color: #fff; border-color: var(--muted-2); background: rgba(13,13,13,.96); }
.icon-btn:hover { color: #fff; border-color: var(--muted); }
.stg-fcv-stage { position: relative; }
#stg-fcv-align { left: 6px; bottom: 6px; }

/* the loupes host the shared grid overlay + button like every live view */
#stg-loupe, #setup-loupe { position: relative; overflow: hidden; }
#stg-loupe .grid-btn, #setup-loupe .grid-btn { right: 6px; bottom: 6px; }

/* the 3x3 / 4x3 pattern switch in the Full Card View head */
.stg-modeseg .btn { padding: 3px 9px; font-size: 10px; }

/* per-resolution bench-scale rows on the CAMERA page */
.sg-res-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.sg-res-row > b { flex: 0 0 26px; font-size: 11px; letter-spacing: .06em; }
.sg-res-row label { display: flex; align-items: center; gap: 5px; font-size: 10.5px;
  color: var(--muted-2); font-weight: 800; }
.sg-res-row input { width: 82px; font-family: Consolas, monospace; }
.sg-res-row u { text-decoration: none; font-size: 10px; color: var(--muted-2); margin-left: auto; }
.sg-res-row.live { border-color: #2c5c38; background: rgba(29,58,36,.25); }
.sg-res-row.live > b { color: #7fe09a; }

/* the operator asked for smaller, tidier controls in the side columns */
#view-stage .stg-col .btn { padding: 4px 8px; font-size: 11px; }
#view-stage .stg-pad button { aspect-ratio: 1 / 1; padding: 0; font-size: 14px; }
#view-stage .stg-dro > div { aspect-ratio: 1 / 1; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px; }
#view-stage .stg-dro i { font-size: 10px; }
#view-stage .stg-dro b { font-size: 20px; }
.stg-pre-sm { flex: 0 0 auto; height: 112px; font-size: 10px; }
.stg-wirecard { flex: 1 1 auto !important; display: flex; flex-direction: column; min-height: 90px; }
.stg-wirecard .stg-pre { flex: 1 1 auto; min-height: 0; }
#view-stage .card.collapsible.collapsed { flex: 0 0 auto !important; }
.stage-chip { cursor: pointer; }
.stg-keys { margin-top: 6px; }
#stg-feedrate { width: 100%; }
#view-stage .pill.bad.hidden { display: none; }



/* the Start-the-service block only exists while nothing is answering */
.stg-boot { margin-top: 8px; padding: 8px; border: 1px solid var(--accent);
  border-radius: var(--radius); background: rgba(220,79,76,.10); }
.stg-boot.hidden { display: none; }
.stg-boot .tiny { margin-top: 6px; line-height: 1.45; }

/* ---------- STAGE: live view beside the map ---------- */
/* the portrait rule is height-driven from the viewport everywhere else; here
   the column already has a height, so take it and let the width follow */
/* full column height; the 9/16 aspect then fixes the width, and the grid's
   auto track takes exactly that */
#view-stage .stage.portrait { height: 100%; min-height: 0; margin: 0; }
#view-stage .stage-tag.hidden, #view-stage .stage-empty.hidden { display: none; }



/* ============================================================
   DESIGN page — the live style guide. Deliberately the ONLY
   view allowed to scroll: it is a reference document, not an
   operator screen.
   ============================================================ */
#view-design.active { display: block; padding: var(--sp-3) clamp(var(--sp-3), 2vw, var(--sp-6)) var(--sp-5); }
.dz-vp { font-family: Consolas, monospace; font-size: var(--fs-sm); color: var(--muted-2); }
.dz-wrap { max-width: 1180px; }
.dz-budget { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--sp-4);
  padding: var(--sp-3); border: var(--hair) solid var(--line); border-radius: var(--r-md); background: var(--bg2); }
.dz-budget b { color: var(--text); }
.dz-sec { margin-bottom: var(--sp-6); }
.dz-sec > h3 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: var(--hair) solid var(--line); }
.dz-sec > h3 small { font-weight: 400; font-size: var(--fs-sm); color: var(--muted-2); margin-left: var(--sp-2); }
.dz-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.dz-row { display: grid; grid-template-columns: 120px 62px minmax(0, 1fr) 230px;
  align-items: center; gap: var(--sp-3); }
.dz-tok { font-family: Consolas, monospace; font-size: var(--fs-xs); color: var(--neon); }
.dz-val { font-family: Consolas, monospace; font-size: var(--fs-xs); color: var(--muted-2); }
.dz-use { font-size: var(--fs-xs); color: var(--muted-2); }
.dz-sample { color: var(--text); line-height: 1.3; }
.dz-barwrap { height: 18px; display: flex; align-items: center; }
.dz-bar { height: 12px; background: var(--accent); border-radius: 2px; }
.dz-radbox { width: 74px; height: 34px; background: var(--card); border: var(--hair) solid var(--line); }
.dz-ctlrow { display: flex; align-items: center; gap: var(--sp-2); }
.dz-demo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
.dz-cgroup { margin-bottom: var(--sp-3); }
.dz-clabel { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: var(--sp-2); }
.dz-swatches { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.dz-swatch { display: flex; flex-direction: column; gap: 3px; font-family: Consolas, monospace; font-size: var(--fs-xs); }
.dz-swatch code { color: var(--muted); }
.dz-swatch span { color: var(--muted-2); }
.dz-chip { width: 86px; height: 40px; border-radius: var(--r-sm); border: var(--hair) solid var(--line); }
.dz-stagebox { display: flex; gap: var(--sp-4); align-items: stretch; }
.dz-stage { height: 300px; width: auto; aspect-ratio: 9/16; margin: 0; }
.dz-stagebox .sec-div { height: 300px; }

/* ================= JOB: FULLCARD CAPTURING AND CENTERING ================= */
/* BLACKLENS2 typography: everything on this page is Bahnschrift (DIN),
   condensed for titles/pills, tabular figures for readouts */
:root { --jb-font: Bahnschrift, 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif; }
/* every BLACKLENS report is set in Bahnschrift / Bahnschrift SemiCondensed
   (operator 2026-09-27); Barlow (Google Fonts) stands in on devices
   without Bahnschrift (phones scanning the QR), the Japanese / Chinese
   system faces cover card names */
:root {
  --rep-font: Bahnschrift, 'Barlow', 'Yu Gothic UI', 'Meiryo', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
  --rep-font-sc: 'Bahnschrift SemiCondensed', Bahnschrift, 'Barlow Semi Condensed', 'Yu Gothic UI', 'Meiryo', 'Microsoft YaHei', 'Arial Narrow', sans-serif;
}
.rep-sc { font-family: var(--rep-font-sc); font-stretch: semi-condensed; }
#view-job, #view-job button, #view-job select, #view-job input {
  font-family: var(--jb-font);
}
#view-job .jb-title, #view-job .jb-pill, #view-job .jb-card-name,
#view-job .card-head b { font-stretch: semi-condensed; letter-spacing: .5px; }

/* the column vars live on the VIEW so the header grid and the working
   grid share them — a divider drag resizes both rows together */
#view-job { padding: 2px 10px 10px 5px; overflow: auto; --sd: 27px;
  --jb-c-live: 268px; --jb-c-cent: 430px; --jb-c-bw: 252px; }
#view-job [hidden] { display: none !important; }
#view-job .jb-panel { padding: 8px 10px; }
#view-job .jb-panel .card-head { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

/* ---- header: card id · slab widget · pillar tab strip ----
   The header is a GRID on the SAME column template as .jb-grid (operator
   mock 2026-09-09): search box over live+preview, slab over the centering
   window, grade pills over the results column — dragging a divider
   resizes its header cell along with the column below. */
.jb-head { display: grid; gap: 10px; align-items: stretch; margin-top: 2px;
  grid-template-columns: var(--sd) var(--jb-c-live) 292px var(--sd) var(--jb-c-cent) var(--jb-c-bw) var(--sd) minmax(340px, 1fr);
  min-width: 1330px; }
.jb-card-id { grid-column: 1 / 4; display: flex; gap: 12px; align-items: center; background: #171717;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; min-width: 0; }
.jb-card-thumb { width: 56px; height: 74px; border: 2px dashed var(--accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: #2b1416; font-size: 18px; flex: 0 0 auto; overflow: hidden; }
.jb-card-thumb.filled { border-style: solid; }
.jb-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jb-card-meta { min-width: 0; }
/* name + id stay ONE line each at a compact size (operator 2026-09-22) so
   the search box reads identically on CENTERING and INSPECTION, whatever
   width its column gives it */
.jb-card-name { font-size: 16px; font-weight: 700; color: #F2F2F2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.jb-card-code { font-size: 12px; color: #A6A6A6; letter-spacing: 1.2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* SEARCH CARD over the ORDER pill, at the box's right edge */
.jb-card-actions { margin-left: auto; display: grid; grid-template-columns: auto;
  gap: 5px; position: relative; flex: 0 0 auto; }
.jb-card-actions .btn, .jb-slab-actions .btn { min-width: 104px; padding: 3px 8px; font-size: 9.5px; letter-spacing: 1px; }
/* the ORDER pill: section-divider red, informational only (hover for
   details) — VIEW ORDER is the clickable one */
#jb-cardnum { min-width: 158px; background: var(--accent); border-color: var(--accent);
  color: #fff; cursor: default; }
#jb-cardnum:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* SAVE JOB over VIEW ORDER at the LEFT of the slab section (2026-09-22) */
.jb-slab-actions { display: grid; grid-template-columns: auto auto; gap: 5px; position: relative; flex: 0 0 auto; }
#jb-newjob { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
#jb-newjob:hover { background: #24713a; }
.jb-slab-body { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
/* VIEW ORDER popover: the order's job list, anchored under the buttons */
.jb-orderpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 6px; padding: 8px;
  min-width: 340px; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.jb-op-head { font-size: 10.5px; letter-spacing: 1.5px; color: #A6A6A6; padding: 2px 6px 7px;
  border-bottom: 1px solid #333; margin-bottom: 4px; font-family: var(--jb-font); }
.jb-op-row { display: flex; gap: 12px; align-items: center; padding: 5px 6px; border-radius: 4px;
  cursor: pointer; font-size: 12px; color: #d9d9d9; white-space: nowrap; }
.jb-op-row:hover { background: #2a2a2a; }
.jb-op-row.cur { cursor: default; }
.jb-op-row b { font-family: var(--jb-font); letter-spacing: 1px; font-weight: 600; }
.jb-op-row span { overflow: hidden; text-overflow: ellipsis; }
.jb-op-note { margin-left: auto; color: #8a8a8a; font-size: 10px; letter-spacing: 1px; }
.jb-op-row.cur .jb-op-note { color: #39FF14; }

.jb-slab { grid-column: 4 / 7; display: flex; gap: 10px; align-items: center;
  background: #171717; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; min-width: 0; }
.jb-pg { height: 64px; }
.jb-slab-scores { font-size: 9.5px; letter-spacing: .8px; color: #A6A6A6; line-height: 1.45;
  min-width: 128px; }
.jb-ss-row { display: flex; }
.jb-ss-row b { color: #F2F2F2; }
.jb-ss-row span { color: #F2F2F2; font-variant-numeric: tabular-nums; margin-left: auto; }
/* QR + the Job# under it (operator 2026-09-22) — the whole block links to
   the card's online report, which the QR itself encodes */
.jb-qrbox { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.jb-qr { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 3px;
  background: #171717; }
.jb-qr-id { font-family: var(--jb-font); font-size: 8.5px; letter-spacing: .8px; color: #A6A6A6;
  white-space: nowrap; }
.jb-slablogo { height: 64px; }

.jb-pills { grid-column: 7 / 9; display: flex; gap: 3px; min-width: 0; }
.jb-pill { display: flex; flex-direction: column; justify-content: space-between;
  flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; letter-spacing: .8px; color: #C9C9C9;
  background: linear-gradient(180deg, #383838, #191919); border: 1px solid #000;
  padding: 8px 2px 6px; text-transform: uppercase; overflow: hidden; }
/* the score reads BIG (operator 2026-09-22); whole grades print bare
   ("10"), halves keep the decimal ("9.5") */
.jb-pill b { font-size: 30px; line-height: 1; color: #F2F2F2; margin-top: 6px; font-variant-numeric: tabular-nums; }
.jb-pill.on { background: linear-gradient(180deg, #7e2c28, #3a1615); border-color: var(--accent); color: #F2D9D9; }
.jb-pillgap { width: 6px; border-left: 1px solid var(--line); margin: 4px 2px; }
.jb-pill-grade { background: linear-gradient(180deg, #4a4a4a, #222); color: #C9C9C9; }

/* floating toast — occupies no layout space, so nothing shifts */
.jb-msg { position: fixed; left: 92px; bottom: 14px; z-index: 80; margin: 0;
  max-width: 60vw; padding: 7px 14px; font-size: 11.5px; color: #D9D9D9;
  background: rgba(18,18,18,.96); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); display: none; }
.jb-msg.show { display: block; }
.jb-msg.ok { color: #39FF14; border-color: #1d5c2e; }
.jb-msg.warn { color: #E8B44A; border-color: #6b5320; }
.jb-msg.bad { color: #ff8a87; border-color: var(--accent); }
#view-job .stg-prog { margin: 4px 0 0; }

/* ---- the working grid: red section dividers between the zones ---- */
.jb-grid { display: grid; gap: 10px; margin-top: 6px; align-items: start;
  grid-template-columns: var(--sd) var(--jb-c-live) 292px var(--sd) var(--jb-c-cent) var(--jb-c-bw) var(--sd) minmax(340px, 1fr);
  min-width: 1330px; }
.jb-grid .sec-div.jb-resizable { cursor: col-resize; }
.jb-grid .sec-div { min-height: 480px; }
.jb-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jb-headtools { margin-left: auto; display: flex; gap: 4px; }
.jb-shotbtn.on, #jb-guide.on { border-color: var(--accent); color: #fff; background: #5a2321; }
.jb-shotbtn { min-width: 30px; padding-left: 5px !important; padding-right: 5px !important; }
/* six capture patterns need a tighter segment */
.stg-modeseg { flex: 0 0 auto; }
.stg-modeseg .btn { padding: 3px 5px; font-size: 10px; letter-spacing: 0; }
/* ≤1460 the FCV column is ~171px — the segment can't share a row with the
   title, so the head wraps (title / modes / hint) instead of crushing */
@media (max-width: 1460px) {
  .jb-headtools { gap: 3px; }
  .jb-shotbtn { min-width: 24px; }
  .stg-modeseg .btn { padding: 3px 4px; font-size: 9.5px; }
  #stg-fcv .stg-panelhead { flex-wrap: wrap; row-gap: 2px; }
  #stg-fcv .stg-headtools { flex-wrap: wrap; justify-content: flex-end;
    row-gap: 2px; margin-left: auto; }
}

.btn.btn-teal { background: #123f3f; border-color: #19c8c8; color: #aef2f2; }
.btn.btn-blue { background: #16324c; border-color: #2f7fc0; color: #a8d4f5; }

/* footer strip shared by Live View and the centering panel */
.jb-foot { display: flex; align-items: center; gap: 3px; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 6px; flex-wrap: nowrap; min-width: 0; }
.jb-tab { font-family: var(--jb-font); font-size: 11px; letter-spacing: 1.5px; padding: 4px 14px;
  background: #1b1b1b; color: #7F7F7F; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.jb-tab.on { background: #5a2321; border-color: var(--accent); color: #fff; }
.jb-foot-note { margin-left: auto; font-size: 9px; letter-spacing: .3px; color: #7F7F7F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Live View 2K/4K segment: FRONT/BACK-style pills, blue like Load Sequence */
.jb-resseg { margin-left: auto; display: inline-flex; gap: 3px; }
.jb-resseg .jb-tab { padding: 3px 7px !important; font-size: 10.5px !important; letter-spacing: 1px; }
.jb-tab-blue.on { background: #16324c; border-color: #2f7fc0; color: #a8d4f5; }
#jb-grid-live { padding-left: 8px; padding-right: 8px; }
.jb-foot .btn { flex: 0 0 auto; }

.jb-livebox { position: relative; aspect-ratio: 9/16; background: #000;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  height: min(calc((var(--jb-c-live) - 40px) * 16 / 9), max(calc(100vh - 300px), 320px));
  width: auto; margin: 0 auto; }
.jb-livebox video { position: absolute; left: 50%; top: 50%;
  /* --lvx/--lvy/--lvz = the live-view zoom hooks (screen-space pan
     first, so cursor math stays simple); unset anywhere else = 1:1 */
  transform: translate(var(--lvx, 0px), var(--lvy, 0px))
             translate(-50%, -50%) rotate(270deg) scale(var(--lvz, 1));
  object-fit: cover; }
.jb-gridov { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 12.5%); }

.jb-prevbox { position: relative; width: 100%; aspect-ratio: 4800/6200; background: #101010;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.jb-prevbox img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jb-prevbox.empty { border-style: dashed; border-color: #3a3a3a; }
.jb-prevbox.empty img { display: none; }
.jb-prevbox.empty::after { content: 'NO CAPTURE'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #4a4a4a; font-size: 12px; letter-spacing: 3px; }
.jb-btnrow { display: flex; gap: 4px; margin-top: 5px; }
/* fine-rotation row: label · nudge · slider · nudge · readout · reset */
.jb-rotrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.jb-rot-label { font-family: var(--jb-font); font-size: 10px; letter-spacing: 1.5px;
  color: #A6A6A6; white-space: nowrap; }
.jb-rotrow input[type="range"] { flex: 1 1 0; min-width: 0; height: 18px; margin: 0;
  accent-color: var(--accent); background: transparent; cursor: ew-resize; }
/* mouse adjustments must not leave the global red focus ring behind;
   keyboard focus (focus-visible) keeps it for accessibility */
.jb-rotrow input[type="range"]:focus:not(:focus-visible) { outline: none; }
.jb-rotrow input[type="range"]:disabled { cursor: default; opacity: .35; }
.jb-rot-nudge { flex: 0 0 auto; width: 26px; padding: 3px 0 !important; font-size: 12px; line-height: 1.2; }
.jb-rot-val { font-family: var(--jb-font); font-variant-numeric: tabular-nums;
  font-size: 11px; color: #d8fbfb; min-width: 48px; text-align: right; white-space: nowrap; }
#jb-rot-reset { flex: 0 0 auto; padding: 3px 8px !important; font-size: 10.5px; }
.jb-btnrow .btn { flex: 1 1 0; min-width: 0; padding: 4px 3px; font-size: 10.5px;
  white-space: nowrap; letter-spacing: 0; line-height: 1.3; }
.jb-foot .btn { padding: 4px 10px; font-size: 10.5px; white-space: nowrap; }
#view-job select { width: 100%; height: 27px; padding: 2px 6px; font-size: 11px; }
.jb-seqnote { text-align: right; color: #7F7F7F; margin-top: 2px; }

/* ---- centering operation ---- */
.jb-centbox { position: relative; width: 100%; aspect-ratio: 4800/6200; background: #101010;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden; user-select: none; }
.jb-centbox.empty::after { content: 'no processed image \2014  capture, then Use FRONT / Use BACK';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #7F7F7F; font-size: 12px; text-align: center; padding: 20px; }
.jb-centwrap { position: absolute; left: 0; top: 0; }
.jb-centwrap img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jb-frame { position: absolute; pointer-events: none; border-radius: 1px; }
.jb-frame-outer { outline: 1.5px solid #19e0e0; box-shadow: 0 0 0 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45); }
.jb-frame-inner { outline: 1.5px solid #ffe14d; box-shadow: 0 0 0 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45); }
/* selected frame (grabbed last): slightly translucent (10% transparency)
   so selection reads without hiding the line — the arrow keys move THIS
   frame 1 px per press */
.jb-frame.sel { opacity: .9; }
/* the SELECTED frame turns neon pink (grips included); deselecting
   restores its own colour — outer cyan, inner yellow */
.jb-frame-outer.sel, .jb-frame-inner.sel { outline-color: #FF10F0; }
.jb-frame-outer.sel .jb-hand::after, .jb-frame-inner.sel .jb-hand::after { background: #FF10F0; }
.jb-hand { position: absolute; pointer-events: auto; }
.jb-hand.h { left: -7px; right: -7px; height: 14px; top: -7px; cursor: ns-resize; }
.jb-hand.h.b { top: auto; bottom: -7px; }
.jb-hand.v { top: -7px; bottom: -7px; width: 14px; left: -7px; cursor: ew-resize; }
.jb-hand.v.r { left: auto; right: -7px; }
/* midpoint grips, visible so the frames read as adjustable instruments */
.jb-hand::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 5px;
  transform: translate(-50%, -50%); border-radius: 2px; background: #F2F2F2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7); opacity: .85; }
.jb-hand.v::after { width: 5px; height: 18px; }
.jb-frame-outer .jb-hand::after { background: #19e0e0; }
.jb-frame-inner .jb-hand::after { background: #ffe14d; }
.jb-hand:hover::after { background: var(--accent); }
/* corner grips resize both adjacent edges at once; above the edge hands
   so they win the hit-test where the two overlap */
.jb-hand.c { width: 16px; height: 16px; z-index: 2; }
.jb-hand.c.tl { left: -8px; top: -8px; cursor: nwse-resize; }
.jb-hand.c.tr { left: auto; right: -8px; top: -8px; cursor: nesw-resize; }
.jb-hand.c.bl { left: -8px; top: auto; bottom: -8px; cursor: nesw-resize; }
.jb-hand.c.br { left: auto; right: -8px; top: auto; bottom: -8px; cursor: nwse-resize; }
.jb-hand.c::after { width: 9px; height: 9px; border-radius: 2px; }
.jb-dims { position: absolute; padding: 2px 8px; background: rgba(10,10,10,.85);
  border: 1px solid #19e0e0; border-radius: 3px; color: #d8fbfb; font-size: 11px;
  letter-spacing: .5px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.jb-guide-ov { position: absolute; inset: 0; pointer-events: none; }
.jb-guide-ov i { position: absolute; background: rgba(57, 255, 20, .6); }
.jb-guide-ov i.h { left: 0; right: 0; height: 1px; }
.jb-guide-ov i.v { top: 0; bottom: 0; width: 1px; }

/* ---- border widths panels (mock: FRONT red band header) ---- */
.jb-bwcard { overflow: hidden; }
.jb-bwhead-f, .jb-bwhead-b { margin: -8px -10px 8px; padding: 6px 10px; }
.jb-bwhead-f, .jb-bwhead-b { background: linear-gradient(90deg, #333, #1d1d1d); }
.jb-bwcard.sel .jb-bwhead-f, .jb-bwcard.sel .jb-bwhead-b {
  background: linear-gradient(90deg, #7e2c28, #3a1615); }
.jb-bwcard.sel { border-color: var(--accent); }
.jb-bwhead-f b, .jb-bwhead-b b { letter-spacing: 2px; }
.jb-bwhead-f span, .jb-bwhead-b span { margin-left: auto; font-size: 9.5px; letter-spacing: 1.5px; color: #A6A6A6; }
.jb-bw { font-size: 11px; color: #A6A6A6; display: flex; flex-direction: column; gap: 3px; }
.jb-bw i { font-style: normal; letter-spacing: 1px; font-size: 10px; }
.jb-bw span, .jb-bw b { float: right; color: #F2F2F2; font-family: var(--jb-font); font-variant-numeric: tabular-nums; }
.jb-bw div { overflow: hidden; border-bottom: 1px solid #222; padding-bottom: 2px; }
.jb-bw .btn { margin-top: 6px; align-self: flex-end; }

/* ---- results ---- */
.jb-rescard { overflow: hidden; }
.jb-reshead { margin: -8px -10px 8px; padding: 6px 10px;
  background: linear-gradient(90deg, #2b2b2b, #1a1a1a); display: flex; align-items: center; }
.jb-rescard.sel .jb-reshead { background: linear-gradient(90deg, #7e2c28, #3a1615); }
.jb-rescard.sel { border-color: var(--accent); }
.jb-reshead b { letter-spacing: 2px; }
.jb-bigratio { margin-left: auto; font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #7e2c28, #5a2321); padding: 2px 14px; border-radius: 3px;
  font-family: var(--jb-font); font-variant-numeric: tabular-nums; }
.jb-rc-grade { display: flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .5px;
  color: #A6A6A6; margin-bottom: 8px; background: #1d1d1d; border: 1px solid #222;
  border-radius: 3px; padding: 5px 8px; }
.jb-rc-grade i { font-style: normal; font-weight: 700; letter-spacing: 2px; color: #D9D9D9; }
.jb-rc-grade b { color: #F2F2F2; font-family: var(--jb-font); font-variant-numeric: tabular-nums; }
.jb-rc-grade .pen { margin-left: auto; color: #fff; background: #5a2321; border: 1px solid var(--accent);
  border-radius: 3px; padding: 2px 12px; font-size: 15px; }
.jb-rc-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; text-align: center;
  font-size: 9px; letter-spacing: .5px; color: #7F7F7F; text-transform: uppercase; }
.jb-rc-row span { background: #1d1d1d; border: 1px solid #222; border-radius: 3px; padding: 4px 2px; }
.jb-rc-row b { display: block; font-size: 15px; color: #F2F2F2; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* the BLACKLENS grade pill wears the section-divider red */
.jb-rc-row span:first-child { background: var(--accent); border-color: var(--accent); color: #f7dedd; }
.jb-rc-row span:first-child b { color: #fff; }

.jb-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jb-res { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jb-res-val { font-size: 17px; font-weight: 700; color: #F2F2F2; font-family: var(--jb-font);
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
.jb-res-mid { display: flex; align-items: center; gap: 6px; }
.jb-res-imgbox { width: clamp(110px, calc(100% - 70px), 340px); flex: 1 1 auto;
  aspect-ratio: 4800/6200; border: 1px dashed #3a3a3a;
  border-radius: 4px; background: #141414; overflow: hidden; position: relative; }
.jb-res-mid { width: 100%; }
.jb-res { min-width: 0; width: 100%; }
.jb-res-imgbox.filled { border-style: solid; border-color: var(--line); aspect-ratio: auto; }
.jb-res-imgbox img { width: 100%; height: auto; display: none; }
.jb-res-imgbox.filled img { display: block; }
.jb-res-imgbox:not(.filled)::after { content: '\2014'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: #4a4a4a; }
.jb-res-cap { display: flex; gap: 12px; margin-top: 4px; font-size: 10.5px; color: #A6A6A6;
  letter-spacing: .5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jb-nextrow { display: flex; gap: 5px; margin-top: 8px; }
.jb-prevstep { flex: 0 0 40px; }
.jb-next { flex: 1 1 auto; background: linear-gradient(90deg, #1d5c2e, #16451f);
  border-color: #2e8c46; color: #c9f2cf; letter-spacing: 1.5px; }

@media (max-width: 1500px) {
  .jb-grid, .jb-head { grid-template-columns: var(--sd) var(--jb-c-live) 258px var(--sd) var(--jb-c-cent) var(--jb-c-bw) var(--sd) minmax(320px, 1fr); }
}
#jb-grid-live.on, #jb-grid-cent.on { border-color: var(--accent); color: #fff; background: #5a2321; }

/* one topbar for the whole app: the new LOGOS mark plus, on the JOB page,
   the page title in place of the studio tag */
/* JOB page title, PDF style: BLACKLENS heavy, FULLCARD semibold, the rest
   light — one Bahnschrift line, semi-condensed, zero margins, left aligned */
.tb-page { font-family: Bahnschrift, 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
  font-size: 32px; font-weight: 300; font-stretch: semi-condensed;
  letter-spacing: 2px; color: #C9C9C9; text-transform: uppercase; margin-left: 12px; }
.tb-page b { color: #F2F2F2; font-weight: 600; }
#topbar.tb-job .tb-tag { display: none; }
#topbar.tb-job { padding: 12px 16px; min-height: 0; }
#topbar.tb-job .topbar-brand { flex-direction: row; align-items: center; margin: 0; padding: 0; }
#topbar.tb-job .tb-word { font-family: Bahnschrift, 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
  font-size: 32px; font-weight: 700; font-stretch: semi-condensed; letter-spacing: 2.5px; }

/* Capture Sequence: cadence dropdown rides beside Load Sequence */
#view-job select.jb-cadsel { flex: 1 1 0; width: auto; min-width: 0; }
#jb-connect.on, #ai-connect.on { background: #14321a; border-color: #2e8c46; color: #a9e6b4; }

/* ============ AI INSPECT (view-ai) — FULLCARD AUTO AI INSPECTION ============
   The corners · edges · surface lane on the INSPECT design language.
   Three columns: live view (auto-detection overlay) | operation (record +
   annotated playback) | results (the operator's scoring sheet). The grand
   red sec-divs follow the INSPECT schema — each drags the column to its
   left (leading one fixed), widths persisted (blacklens.ai.cols). */
#view-ai { padding: 2px 10px 10px 5px; overflow: auto; --sd: 27px;
  --ai-c-live: 560px; --ai-c-op: 470px; }
#view-ai, #view-ai button, #view-ai select, #view-ai input { font-family: var(--jb-font); }
#view-ai .card-head b { font-size: 14.5px; font-stretch: semi-condensed; letter-spacing: .5px; }
#view-ai .btn { font-size: 11.5px; padding-top: 3px; padding-bottom: 3px; }
/* the borrowed job header rides the SAME template as the grid (the
   INSPECT schema, operator 2026-09-12): the search box spans the leading
   divider + live column — a divider drag resizes them TOGETHER — the
   slab spans the operation column, the grade pills the results column */
#view-ai .jb-head { grid-template-columns: var(--sd) var(--ai-c-live) var(--sd) var(--ai-c-op) var(--sd) minmax(360px, 1fr);
  min-width: 0; }   /* the job page's 1330px pan floor stays on INSPECT only */
#view-ai .jb-head > * { min-width: 0; }
#view-ai .jb-head .jb-card-id { grid-column: 1 / 3; }
#view-ai .jb-head .jb-slab { grid-column: 3 / 5; }
#view-ai .jb-head .jb-pills { grid-column: 5 / 7; }
/* here the CORNERS / EDGES / SURFACE pills wear the red; centering rests */
#view-ai .jb-pills .jb-pill.on { background: linear-gradient(180deg, #383838, #191919); border-color: #000; color: #C9C9C9; }
#view-ai .jb-pills .jb-pill:nth-child(2), #view-ai .jb-pills .jb-pill:nth-child(3), #view-ai .jb-pills .jb-pill:nth-child(4) {
  background: linear-gradient(180deg, #7e2c28, #3a1615); border-color: var(--accent); color: #F2D9D9; }
.ai-grid { display: grid; column-gap: 10px; margin-top: 6px; align-items: stretch;
  grid-template-columns: var(--sd) var(--ai-c-live) var(--sd) var(--ai-c-op) var(--sd) minmax(360px, 1fr);
  /* fallback — sizeAll() sets the real height from the header's measured
     bottom, so a taller wrapped header never pushes the page into scroll */
  height: calc(100vh - 220px); }
.ai-grid > * { min-height: 0; min-width: 0; }
.ai-grid .sec-div.jb-resizable { cursor: col-resize; }
.ai-col { display: flex; flex-direction: column; gap: 10px; min-height: 0;
  overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.ai-col > .card, #ai-scores > .card { flex: 0 0 auto; padding: 8px 10px; }
.ai-col > .card .card-head, #ai-scores > .card .card-head { margin-bottom: 5px; }
/* the scoring stack + the flow buttons below it (BACK — Centering is
   live; NEXT — Inspection Report lights up when that module ships) */
.ai-scorestack { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.ai-nextrow { flex: 0 0 auto; margin-top: auto; }
.ai-back { flex: 0 0 auto; letter-spacing: 1px; }
/* the rotated live/playback boxes — width-driven, 9/16, overlays share
   the video's exact box + rotation so annotations align 1:1. The live
   window shares its row with a NARROW fixed filter rail (96px) pinned
   to its right — the window takes all the remaining width */
.ai-liverow { display: flex; gap: 8px; align-items: stretch;
  justify-content: space-between; min-height: 0; }
#view-ai .jb-livebox { flex: 0 0 auto; overflow: hidden;
  height: min(calc((var(--ai-c-live) - 240px) * 16 / 9), calc(100vh - 280px)); }
/* zoom/pan wrapper — imagery + annotation canvases move together, the
   grid overlay outside it stays screen-fixed */
.ai-zoomwrap { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ai-rail { flex: 0 0 210px; min-width: 0; display: flex; flex-direction: column;
  gap: 4px; overflow-y: auto; scrollbar-width: thin; }
.ai-rail > .btn { font-size: 10px; padding-left: 2px; padding-right: 2px; }
/* tiny group captions, the design system's field-label voice */
.ai-lbl { display: flex; justify-content: space-between; align-items: center;
  margin-top: 5px; font-size: 9px; letter-spacing: 1.5px; color: var(--muted-2); }
.ai-lbl .btn { font-size: 8.5px !important; padding: 1px 6px; letter-spacing: 1px; }
/* compact adjustment sliders — the EXPERT panel, miniaturised */
.ai-adj { display: flex; flex-direction: column; gap: 2px; }
.ai-adj label { display: grid; grid-template-columns: 56px 1fr 27px;
  align-items: center; gap: 4px; min-height: 15px; }
.ai-adj i { font-style: normal; font-size: 8px; letter-spacing: .6px;
  color: var(--muted-2); white-space: nowrap; overflow: hidden; }
.ai-adj input { width: 100%; min-width: 0; height: 10px; accent-color: var(--accent); }
.ai-adj b { font-family: Consolas, monospace; font-size: 9.5px; font-weight: 400;
  text-align: right; font-variant-numeric: tabular-nums; }
#view-ai .ai-playbox { height: min(calc((var(--ai-c-op) - 44px) * 16 / 9), calc(100vh - 610px)); background: #050505; }
.ai-ov { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(270deg); pointer-events: none; }
.ai-ov2 { z-index: 2; }
#ai-live-filter { z-index: 1; }
#ai-live-filter[hidden] { display: none; }
/* FREEZE VIEW — accent while the still is held */
#ai-freeze-btn.on { border-color: var(--accent); color: #fff; background: #5a2321; }
/* the UVC SAVE SETTINGS / SAVED toggle (IMAGE section head) */
.uvc-save { font-size: 9px !important; letter-spacing: 1px; padding: 2px 8px; white-space: nowrap; }
.uvc-save.saved { border-color: var(--green); color: var(--green-soft); background: #1d2b1d; }
.ai-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 1px; }
.ai-modes .btn { min-width: 0; padding: 2px 1px; font-size: 9px; letter-spacing: .4px; }
.ai-modes .btn:last-child { grid-column: 1 / -1; }
.ai-modes .btn.on { border-color: var(--accent); color: #fff; background: #5a2321; }
.ai-sensrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 2px; }
.ai-sensrow span { flex: 1 1 auto; font-size: 9.5px; letter-spacing: 1px; color: var(--muted-2); white-space: nowrap; }
.ai-sensrow input { flex: 1 1 100%; min-width: 0; accent-color: var(--accent); }
.ai-sensrow b { font-family: Consolas, monospace; font-size: 11.5px; min-width: 22px; text-align: right; }
/* the foot wears INSPECT's exact tab sizing; GRID matches #jb-grid-live */
#view-ai .jb-tab { font-size: 12px; padding: 3px 11px; }
#ai-grid { padding-left: 8px; padding-right: 8px; }
.ai-reclen { margin-left: auto; align-self: center; white-space: nowrap; }
/* the playback window and the right rail share a row — playback takes
   the height; the rail stacks the borrowed Jog card (its 40px square
   rules are #view-stage-scoped and stay behind) over the STAGE and
   RECORDING button groups */
.ai-oprow { display: flex; gap: 8px; align-items: flex-start; min-height: 0; }
.ai-oprail { flex: 0 0 178px; display: flex; flex-direction: column; gap: 4px;
  min-width: 0; }
.ai-oprail .btn { width: 100%; }
.ai-oprail select { width: 100%; min-width: 0; font-size: 10.5px; }
.ai-oprail .ai-reclen { margin: 1px 0 0; text-align: center; }
#view-ai #stg-card-jog { flex: 0 0 auto; width: 100%; margin: 0; }
#view-ai .stg-pad { grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px;
  justify-content: center; gap: 4px; }
#view-ai .stg-pad button { aspect-ratio: 1 / 1; padding: 0; font-size: 13px; }
#view-ai #stg-card-jog .stg-row { margin-top: 4px; }
/* Step / Reset share a row in the rail's STAGE group */
.ai-btnrow { display: flex; gap: 4px; }
.ai-oprail .ai-btnrow .btn { width: auto; flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
/* Camera + Camera Settings under the Live View Operation card (operator
   2026-09-24): the shared #cam-stack with STAGE/CAM's compaction; the
   live column scrolls past the fold */
#view-ai #cam-stack { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
#view-ai #cam-stack .card { margin: 0; padding: 7px 10px 8px; }
#view-ai #cam-stack .card-head { margin-bottom: 4px; }
#view-ai #cam-stack .uvc-row { grid-template-columns: 72px minmax(0, 1fr) 48px; gap: 6px 8px; min-height: 15px; }
#view-ai #cam-stack .uvc-controls { gap: 0; margin-top: 0; }
#view-ai #cam-stack .uvc-row input[type=range] { height: 14px; }
#view-ai #cam-stack .uvc-mode { padding-top: 1px; padding-bottom: 1px; }
#view-ai #cam-stack .uvc-sec { margin-top: 2px; padding-top: 3px; }
#view-ai #cam-stack .uvc-sec-t { line-height: 1.1; }
#view-ai #cam-stack .uvc-foot { margin-top: 4px; }
/* zoom readout — top-right of every live view and the centering/expert
   window, shown only while zoomed */
.zoom-tag { position: absolute; top: 6px; right: 6px; z-index: 7; pointer-events: none;
  font-family: var(--jb-font); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; color: #EAEAEA; background: rgba(10, 10, 10, .82);
  border: 1px solid #3a3a3a; border-radius: 4px; padding: 2px 7px; }
.zoom-tag[hidden] { display: none; }
.ai-play-tag { position: absolute; left: 6px; top: 6px; z-index: 3; font-size: 9.5px;
  letter-spacing: 1.5px; padding: 2px 7px; border-radius: 3px;
  background: rgba(220, 79, 76, .85); color: #fff; }
.ai-play-tag[hidden] { display: none; }
/* ---- CARD NAVIGATOR (operator 2026-09-13): the idle playback window
   shows the centering-operation card image with the Live View's current
   position boxed on it. .nav on #ai-playbox flips between the two —
   visibility (not display) so sizeBox geometry never moves. ---- */
#ai-nav { position: absolute; inset: 0; z-index: 2; background: #050505; }
#ai-playbox:not(.nav) #ai-nav { display: none; }
#ai-playbox.nav video, #ai-playbox.nav .ai-ov, #ai-playbox.nav .ai-play-tag { visibility: hidden; }
#ai-nav-img { position: absolute; display: none; user-select: none; -webkit-user-drag: none; }
#ai-nav-ov { position: absolute; pointer-events: none; }
.ai-nav-chip { position: absolute; left: 6px; bottom: 6px; z-index: 3; pointer-events: none;
  font-family: var(--jb-font); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; color: #EAEAEA; background: rgba(10, 10, 10, .82);
  border: 1px solid #3a3a3a; border-radius: 4px; padding: 2px 7px; white-space: nowrap;
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.ai-nav-chip[hidden] { display: none; }
.ai-nav-hint { position: absolute; inset: 10px; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 14px;
  border: 1px dashed #3a3a3a; border-radius: 4px;
  color: var(--muted-2); font-size: 10.5px; letter-spacing: .5px; line-height: 1.7; }
.ai-nav-hint[hidden] { display: none; }
/* ---- defect marking on the Live View (operator 2026-09-13): the drag
   box previews its region in NEGATIVE (backdrop-filter inverts whatever
   the live view composites underneath), release opens MINOR/MAJOR ---- */
#ai-negbox { position: absolute; z-index: 6; pointer-events: none;
  border: 1px dashed rgba(255, 255, 255, .95); outline: 1px solid rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
#ai-negbox[hidden] { display: none; }
#ai-defmenu { position: absolute; z-index: 8; width: 192px; padding: 6px;
  display: flex; flex-direction: column; gap: 5px;
  background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55); }
/* the measured size of the boxed mark — mm via the active resolution's
   calibration (or the derivation from the other one); hover = box + area */
.ai-def-size { font-family: Consolas, monospace; font-size: 10.5px; line-height: 1.35;
  color: #EAEAEA; background: #101010; border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 6px; min-height: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
#ai-defmenu[hidden] { display: none; }
.ai-defmenu-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; letter-spacing: 1.5px; color: var(--muted-2); }
.ai-defmenu-head button { background: none; border: 0; color: var(--muted);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.ai-defmenu-head button:hover { color: #fff; }
#ai-defmenu > .btn { width: 100%; font-weight: 700; letter-spacing: 1.5px; }
#ai-defmenu > .btn.major { background: #5a2321; border-color: var(--accent); color: #fff; }
#ai-defmenu > .btn.major:hover { background: #7c2b28; }
#ai-defmenu > .btn.minor { background: #4a3f14; border-color: #E8C547; color: #F5E9B8; }
#ai-defmenu > .btn.minor:hover { background: #63541b; }
.ai-log { flex: 1 1 auto; min-height: 70px; overflow-y: auto; scrollbar-width: thin;
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; margin-top: 7px;
  font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ai-log-row { display: flex; gap: 9px; padding: 1px 0; cursor: pointer; color: var(--muted); }
.ai-log-row:hover { color: #fff; }
.ai-log-row b { font-family: Consolas, monospace; font-weight: 400; }
/* ---- CORNERS & EDGES gallery (operator 2026-09-13): the results
   column leads with every corner tile + edge strip of both sides,
   cropped from the stored 4K FR/BR report images ---- */
.ai-gallery { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.ai-gallery:empty { display: none; }
.ai-gal-side { padding: 8px 10px; }
.ai-gal-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px; }
.ai-gal-head b { font-size: 12.5px; letter-spacing: 1px; }
.ai-gal-name { font-family: Consolas, monospace; font-size: 10px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-gal-empty { border: 1px dashed #3a3a3a; border-radius: 4px; padding: 14px 10px;
  text-align: center; color: var(--muted-2); font-size: 10.5px; line-height: 1.6; }
.ai-gal-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ai-gal-c { position: relative; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; background: #101010; cursor: zoom-in; touch-action: none; }
.ai-gal-c canvas { display: block; width: 100%; aspect-ratio: 1 / 1; }
.ai-gal-edges { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ai-gal-e { position: relative; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; background: #101010; cursor: zoom-in; touch-action: none; }
.ai-gal-e canvas { display: block; width: 100%; }
.ai-gal-e i { position: absolute; left: 5px; top: 4px; font-style: normal;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px; color: #EAEAEA;
  background: rgba(8, 8, 8, .66); border-radius: 3px; padding: 1px 6px; }
/* ---- the scoring sheet ---- */
.ai-sc-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 7px; }
.ai-sc-side { font-size: 10.5px; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px;
  text-align: center; white-space: nowrap; font-weight: 700; }
.ai-sc-side.f { background: #4a4a4a; color: #eee; }
.ai-sc-side.b { background: var(--accent); color: #fff; }
.ai-sc-title { text-align: center; font-size: 13px; letter-spacing: 1.5px; }
.ai-sc-title i { font-style: normal; display: block; font-size: 18px; line-height: 1.15; }
.ai-sc-grid { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; gap: 4px 7px; align-items: center; }
.ai-ct { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ai-ct.b { justify-content: flex-start; }
.ai-ct .btn { width: 22px; padding: 1px 0 2px; line-height: 1; }
.ai-ct b { min-width: 18px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ai-sc-lbl { text-align: center; font-size: 10.5px; color: var(--muted); padding: 3px 9px;
  background: #1c1c1c; border: 1px solid var(--line); border-radius: 3px; white-space: nowrap; }
.ai-sc-sub { font-size: 10.5px; color: var(--muted-2); text-align: right; font-variant-numeric: tabular-nums; }
.ai-sc-sub.b { text-align: left; }
.ai-sc-lblsub { background: none; border: none; color: var(--muted-2); font-size: 9.5px; letter-spacing: 1px; }

/* 7) the classic NEW flow steps aside for NEW JOB */
#sidebar .sb-btn[data-nav="new"] { display: none; }
/* 8) the CAMERA page left the side menu (operator 2026-09-12) — the
   camera controls live on STAGE/CAM; the page itself stays routable */
#sidebar .sb-btn[data-nav="setup"] { display: none; }
/* 9) the 16/36/42 shot pills are INDICATORS (operator 2026-09-12): they
   light with the selected sequence, never select or calibrate */
.jb-shotbtn { pointer-events: none; }

/* the capture progress bar lives in the topbar now — slim professional
   track, red gradient fill, stage label riding on it */
#topbar .jb-prog { position: relative; flex: 0 1 420px; height: 20px; margin: 0 16px 0 24px;
  align-self: center; background: #1b1b1b; border: 1px solid #000; border-radius: 10px;
  overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
#topbar .jb-prog i { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(180deg, #e0625e, #b03330); border-radius: 10px;
  transition: width .2s ease; }
#topbar .jb-prog span { position: relative; display: block; text-align: center;
  font-family: var(--jb-font); font-size: 10.5px; letter-spacing: 2px; line-height: 18px;
  color: #F2F2F2; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; }

.jb-dimsline { font-family: var(--jb-font); font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .4px; color: #d8fbfb; text-align: center;
  white-space: nowrap; overflow: hidden; border-color: #19c8c8 !important; }

/* section dividers = long rectangular red boxes, the CENTERING-tile style
   (shared by the JOB, STAGE and AI pages — one design language) */
#view-job .sec-div, #view-stage .sec-div, #view-ai .sec-div, #view-submit .sec-div, #view-home .sec-div {
  background: linear-gradient(180deg, #7e2c28, #3a1615 55%, #2b1210);
  border: 1px solid var(--accent); border-radius: 6px;
  box-shadow: none;
  align-items: flex-end;
}
#view-job .sec-div::before, #view-stage .sec-div::before, #view-ai .sec-div::before, #view-submit .sec-div::before, #view-home .sec-div::before { display: none; }
#view-job .sec-div::after, #view-stage .sec-div::after, #view-ai .sec-div::after, #view-submit .sec-div::after, #view-home .sec-div::after {
  content: attr(data-sec);
  font-family: Bahnschrift, 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
  font-weight: 400; font-stretch: semi-condensed;
  font-size: 14.5px; letter-spacing: .5em; color: #E8E8E8;
  background: transparent; text-shadow: none;
  padding: 14px 0;
}
#view-job .sec-div.jb-resizable:hover, #view-ai .sec-div.jb-resizable:hover { filter: brightness(1.18); }

/* ---- SPLASH: 5 s, PRE-GRADING → GRADING gold → dim into the Library ---- */
.spx-vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(70, 24, 22, .28), transparent 55%),
              radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .8) 100%); }
.spx-vignette.gold {
  background: radial-gradient(ellipse at 50% 46%, rgba(96, 82, 40, .30), transparent 55%),
              radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .85) 100%); }
.spx-inner { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.spx-logo { width: min(34vw, 46vh); opacity: 0; }
#splash.play .spx-logo {
  animation: spxIn 2.6s cubic-bezier(.16, .84, .3, 1) forwards; }
#splash2.play .spx-logo {
  animation: spxInGold 3s cubic-bezier(.16, .84, .3, 1) forwards; }
@keyframes spxIn {
  0% { opacity: 0; transform: scale(1.16); filter: blur(16px) brightness(.4); }
  38% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}
@keyframes spxInGold {
  0% { opacity: 0; transform: scale(.94); filter: blur(10px) brightness(2.2); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: scale(1.02); filter: blur(0) brightness(1); }
}
.spx-sweep { position: absolute; top: -20%; bottom: -20%; width: 22%; left: -30%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  mix-blend-mode: screen; pointer-events: none; }
.spx-sweep.gold { background: linear-gradient(90deg, transparent, rgba(255, 232, 170, .30), transparent); }
#splash.play .spx-sweep { animation: spxSweep 1.6s .9s ease-in-out forwards; }
@keyframes spxSweep { from { left: -30%; } to { left: 120%; } }
.spx-credit { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center;
  font-family: Bahnschrift, 'Franklin Gothic Medium', Arial, sans-serif;
  font-weight: 400; font-stretch: semi-condensed;
  font-size: 24px; letter-spacing: .5em; color: #8A8A8A; opacity: 0; }
#splash2.play .spx-credit { animation: spxCredit 2.2s 1s ease forwards; }
@keyframes spxCredit { to { opacity: .9; } }

/* ---- splash finale: the screen splits in half and slides away (the red
   lightning bolt + white flash were removed on operator order 2026-09-11
   — plain black halves, same split motion) ---- */
#splash2 .spx-half { position: absolute; top: 0; bottom: 0; width: 51%;
  background: #0D0D0D; opacity: 0; pointer-events: none; }
#splash2 .spx-half.l { left: 0; }
#splash2 .spx-half.r { right: 0; }
#splash2.split { background: transparent !important; }
#splash2.split .spx-inner, #splash2.split .spx-credit, #splash2.split .spx-vignette {
  animation: spxGone .18s ease forwards; }
#splash2.split .spx-half { opacity: 1; }
#splash2.split .spx-half.l { animation: spxHalfL 1s .22s cubic-bezier(.7, 0, .2, 1) forwards; }
#splash2.split .spx-half.r { animation: spxHalfR 1s .22s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes spxGone { to { opacity: 0; } }
@keyframes spxHalfL { to { transform: translateX(-102%) skewX(-1.5deg); } }
@keyframes spxHalfR { to { transform: translateX(102%) skewX(-1.5deg); } }

/* ---- one size up on every button and header in the working grid,
   9-SHOT-sized type with tighter vertical padding ---- */
/* ---- STAGE module wears the NEW JOB design language (2026-09-09):
   jb type on everything, 14.5px bold card heads, grand red sec-divs
   (shared rule above), compact buttons, blue/green action parity ---- */
#view-stage, #view-stage button, #view-stage select, #view-stage input {
  font-family: var(--jb-font);
}
#view-stage { --sd: 27px; padding: 2px 10px 10px 5px; }
/* the page-head + hint-line are gone (title lives in the topbar) — the
   old 180px budget would leave a dead band under the layout */
#view-stage .stage-layout { height: calc(100vh - 79px); }
/* the NOT-HOMED banner sits above the layout: subtract its height while
   it shows, or the page scrolls exactly the banner's 49px */
#view-stage:has(#stg-nothomed:not(.hidden)) .stage-layout { height: calc(100vh - 128px); }
/* below 1366 the #main pan container adds a horizontal scrollbar — its
   ~13px height must come out of the budget or the page scrolls 13px */
@media (max-width: 1365px) {
  #view-stage .stage-layout { height: calc(100vh - 93px); }
}
#view-stage .card-head b {
  font-stretch: semi-condensed; letter-spacing: .5px; font-size: 14.5px; }
#view-stage .stg-panelhead b {
  font-stretch: semi-condensed; letter-spacing: .5px; font-size: 13.5px; font-weight: 700; }
#view-stage .btn { font-size: 11.5px; padding-top: 3px; padding-bottom: 3px; }
#view-stage .stg-modeseg .btn { font-size: 10px; }   /* the pattern segment keeps its compaction */
#stg-disconnect { background: #14321a; border-color: #2e8c46; color: #a9e6b4; }

/* ---- STAGE v4 (2026-09-11): resizable four-column layout ---- */
/* defaults fit the 1300px pan reference exactly: 276+278+278 + 3 sd +
   6 gaps leaves ~336px for the control column */
#view-stage { --stg-c-live: 276px; --stg-c-map: 278px; --stg-c-op: 278px; }
/* the live box is width-driven by its column, aspect-true, and capped by
   the layout height MINUS the legend + the Camera card + the Scale
   Calibration card riding below it (both caps on WIDTH so 9/16 holds) */
#view-stage .stg-livecol .stage.portrait { flex: 0 1 auto; align-self: center;
  height: auto; max-height: none; aspect-ratio: 9 / 16;
  width: min(100%, calc((100vh - 364px) * 9 / 16)); }
@media (max-width: 1365px) {
  #view-stage .stg-livecol .stage.portrait { width: min(100%, calc((100vh - 378px) * 9 / 16)); }
  /* short viewports: the column scrolls internally rather than the page */
  #view-stage .stg-livecol { overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}
#view-stage .stg-livebar .jb-tab { font-size: 10.5px; padding: 3px 7px; }
/* Scale Calibration under the Live View — compressed */
.stg-livecol #stg-card-scale { padding: 8px 10px; }
.stg-livecol #stg-card-scale .card-head { margin-bottom: 4px; }
#stg-scale-cur:empty { display: none; }
/* CONTROL: two stacks (jog · position · machine | connection · absolute
   move) over the full-width wire log (operator 2026-09-11) */
.stg-ctrl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; align-items: start; flex: 0 0 auto; }
.stg-ctrl-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stg-ctrl #stg-card-move .stg-row { flex-wrap: nowrap; }
.stg-ctrl #stg-card-move .stg-field { flex: 1 1 0; }
.stg-ctrl #stg-card-move .stg-field input { width: 100%; }
.stg-ctrl #stg-card-move #stg-go { flex: 0 0 auto; }
.stg-ctrl #stg-card-conn .card-head { flex-wrap: wrap; row-gap: 2px; }
#view-stage .stg-pad { justify-content: center; }
/* three per row, one base each */
.stg-calbtns .btn { flex: 1 1 calc(33.3% - 4px); padding-left: 2px; padding-right: 2px; }
#view-stage .stg-calbtns .btn.on, #view-job .jb-calrow .btn.on {
  border-color: var(--accent); color: #fff; background: #5a2321; }
.jb-cal-badge.stale { color: #3a2b05; background: #E8B44A; }

/* ---- STAGE v4.1 (operator pass 2026-09-11): NEW JOB card templates ---- */
/* Full-Card Preview as a card with 16/36/42 pills + dashed NO CAPTURE */
#view-stage #stg-fcv.card { padding: 8px 10px; display: flex; }
#stg-fcv-imgbox.empty { flex: 1 1 auto; align-self: stretch; position: relative;
  background: #101010; border: 1px dashed #3a3a3a; border-radius: 4px; }
#stg-fcv-imgbox.empty::after { content: 'NO CAPTURE'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #4a4a4a; font-size: 12px; letter-spacing: 3px; }
#stg-fcv .stg-fcv-bar #stg-fcv-hint { flex: 1 1 auto; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
/* the sequence card wears the NEW JOB rows */
#view-stage .jb-seqnote { font-size: 10.5px; }
#stg-card-seq select.jb-cadsel { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; }
#stg-card-seq .jb-btnrow .btn { flex: 1 1 auto; min-width: 0; }
#stg-card-seq .jb-btnrow { align-items: flex-end; }
/* background-color LONGHAND on purpose: with the shorthand, this button
   kept .btn-teal's background while taking this rule's border/color —
   observed in the pane, cascade says impossible, longhand sidesteps it */
#view-stage #stg-seq-connect.on { background-color: #14321a; border-color: #2e8c46; color: #a9e6b4; }
/* Camera + Camera Settings compressed on this page (operator: too much
   line spacing; second tightening pass 2026-09-12) — the Camera card
   lives OUTSIDE the stack here, under the Live View, so target both */
#view-stage #cam-stack .card, #view-stage .stg-livecol #cap-cam-card, #view-stage .stg-opcol #cap-uvc-card { padding: 7px 10px 8px; }
#view-stage #cam-stack .card-head, #view-stage .stg-livecol #cap-cam-card .card-head, #view-stage .stg-opcol #cap-uvc-card .card-head { margin-bottom: 4px; }
#view-stage #cap-cam-card .res-row { margin-top: 3px; }
#view-stage #cap-cam-card .res-row select { padding: 3px 6px; }
#view-stage #cam-stack .uvc-controls, #view-stage #cap-uvc-card .uvc-controls { gap: 0; margin-top: 0; }
#view-stage #cam-stack .uvc-row, #view-stage #cap-uvc-card .uvc-row { min-height: 15px; gap: 6px 8px; }
#view-stage #cam-stack .uvc-row input[type=range], #view-stage #cap-uvc-card .uvc-row input[type=range] { height: 14px; }
#view-stage #cam-stack .uvc-mode, #view-stage #cap-uvc-card .uvc-mode { padding-top: 1px; padding-bottom: 1px; }
#view-stage #cam-stack .uvc-sec, #view-stage #cap-uvc-card .uvc-sec { margin-top: 2px; padding-top: 3px; }
#view-stage #cam-stack .uvc-sec-t, #view-stage #cap-uvc-card .uvc-sec-t { line-height: 1.1; }
#view-stage #cam-stack .uvc-foot, #view-stage #cap-uvc-card .uvc-foot { margin-top: 4px; }

#view-job .btn { font-size: 11.5px; padding-top: 3px; padding-bottom: 3px; }
#view-job .jb-btnrow .btn { font-size: 11.5px; }
#view-job .jb-tab { font-size: 12px; padding: 3px 11px; }
#view-job .card-head b { font-size: 14.5px; }
#view-job .jb-bw { font-size: 12px; }
#view-job .jb-bw i { font-size: 11px; }
#view-job .jb-bwhead-f span, #view-job .jb-bwhead-b span { font-size: 10.5px; }
#view-job .jb-rc-grade { font-size: 11.5px; }
#view-job .jb-rc-row { font-size: 10px; }
#view-job .jb-seqnote { font-size: 10.5px; }
#view-job .jb-foot-note { font-size: 10px; }

/* selected side in the results: red bed 5px around the card frame */
.jb-res.sel .jb-res-imgbox {
  box-shadow: 0 0 0 5px #7e2c28, 0 0 14px rgba(220, 79, 76, .45);
  border-color: var(--accent);
}

#jb-load { height: 27px; padding: 0 8px; display: inline-flex; align-items: center;
  justify-content: center; align-self: flex-end; }
#view-job .jb-btnrow { align-items: flex-end; }

/* centering grid overlay + its colour square */
.jb-cgrid { position: absolute; pointer-events: none; }
/* ring hit strokes (zoomed + grid ON): clickable guide pickers */
.jb-cgrid .cg-hit { cursor: pointer; }
#jb-cgrid-color { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line);
  border-radius: 3px; background: #1b1b1b; cursor: pointer; flex: 0 0 auto; }
#jb-grid-cent.on { border-color: var(--accent); color: #fff; background: #5a2321; }

/* EXPERT MODE (was Enlarge Window): the window grows to a viewport-derived
   height replacing the header's score slab; the panel controls MOVE into
   the right column (DOM move in setFocus) together with the Image Mode /
   Image Adjustment deck; the widths column, results thumbnails and the
   unselected side's result card step aside. The topbar STAYS. ESC exits.
   The grid template shrinks by the removed track — hiding a child without
   retracking slides every later column into the wrong slot. */
#view-job.jb-focus #jb-col-widths { display: none; }
#view-job.jb-focus .jb-grid, #view-job.jb-focus .jb-head {
  grid-template-columns: var(--sd) var(--jb-c-live) 292px var(--sd) var(--jb-c-cent) var(--sd) minmax(300px, 1fr);
}
/* focus header: the slab cell is gone (window extends up into it); the
   search box keeps its columns and the grade pills stay over results */
#view-job.jb-focus .jb-pills { grid-column: 6 / 8; }
#view-job.jb-focus .jb-centcard > .card-head { display: none; }
#view-job.jb-focus .jb-centcard { position: relative; z-index: 4; }  /* rises over the emptied header middle */
#view-job.jb-focus .jb-centbody > .jb-centbox { margin: 0 auto; width: auto; }
#view-job.jb-focus .jb-head .jb-slab { display: none; }        /* the window takes the slab's room */
/* the search box renders IDENTICALLY in and out of expert mode (operator
   2026-09-09) — the old focus-only margin-left:12px override is gone */
#view-job.jb-focus #jb-resthumbs { display: none; }            /* no Front/Back results panel here */
#view-job.jb-focus .jb-rescard:not(.sel) { display: none; }    /* only the side being worked on */
#jb-enlarge.on { border-color: var(--accent); color: #fff; background: #5a2321; }

/* expert-only blocks live in the results column, hidden outside the mode */
.jb-exp-only { display: none; }
#view-job.jb-focus .jb-exp-only { display: block; }
/* the action row shows in BOTH modes now (under the Estimated Card size
   line normally, under the enlarged window in expert) — only Apply is
   expert-only */
#jb-exp-actions, #jb-img-actions { display: flex; gap: 6px; }
#view-job:not(.jb-focus) #jb-exp-apply { display: none; }
#jb-exp-controls { display: none; }
#view-job.jb-focus #jb-exp-controls { display: block; background: #202020; border: 1px solid #3a3a3a;
  border-radius: 6px; padding: 6px 8px 8px; }
#jb-exp-controls .jb-btnrow, #jb-exp-controls .jb-rotrow, #jb-exp-controls .jb-foot { margin-top: 5px; }
#jb-exp-controls .jb-rotrow { margin-top: 0; }
.jb-exp-modes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 2px; }
.jb-exp-modes button { font-family: var(--jb-font); font-size: 8.5px; letter-spacing: .4px;
  padding: 6px 2px; background: #1c1c1c; color: #A6A6A6; border: 1px solid #3a3a3a;
  border-radius: 4px; cursor: pointer; white-space: nowrap; }
.jb-exp-modes button:hover { border-color: #666; color: #F2F2F2; }
.jb-exp-modes button.on { border-color: var(--accent); color: #fff; background: #5a2321; }
.jb-exp-subhead { margin-top: 10px; }
.jb-exp-subtools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#jb-exp-reset { margin: 0; padding: 3px 8px; font-size: 10px; }
/* the action row travels under the enlarged window in expert mode */
#view-job.jb-focus .jb-centbody > #jb-exp-actions { margin-top: 8px; }
/* Scale Calibration row under the Live View: button + PASS/FAIL badge */
.jb-calrow { align-items: center; }
.jb-calrow .btn { flex: 1 1 auto; }
.jb-cal-badge { font-family: var(--jb-font); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; padding: 4px 12px; border-radius: 3px; flex: 0 0 auto; }
.jb-cal-badge.pass { color: #0d2b12; background: #39FF14; }
.jb-cal-badge.fail { color: #fff; background: var(--accent); }
.jb-cal-note { font-family: var(--jb-font); font-variant-numeric: tabular-nums; font-size: 10px;
  letter-spacing: .5px; color: #d8fbfb; text-align: center; margin-top: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.jb-exp-sliders label { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.jb-exp-sliders i { font-style: normal; font-family: var(--jb-font); font-size: 9.5px;
  letter-spacing: 1px; color: #A6A6A6; width: 74px; flex: 0 0 auto; }
.jb-exp-sliders input[type="range"] { flex: 1 1 0; min-width: 0; height: 16px; margin: 0;
  accent-color: var(--accent); background: transparent; }
.jb-exp-sliders input[type="range"]:focus:not(:focus-visible) { outline: none; }
.jb-exp-sliders b { font-family: var(--jb-font); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: #d8fbfb; width: 40px; text-align: right; flex: 0 0 auto; }
/* the preview column scrolls internally (Full-Card Preview + Capture
   Sequence + Camera Settings since 2026-09-13); fitPrevCol sets the
   viewport-bound max-height */
#view-job .jb-prevcol { min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding-right: 2px; }
#view-job .jb-prevcol > .card { flex: 0 0 auto; }
/* the UVC card compacts on CENTERING like on STAGE/CAM */
/* the compact Camera Settings row on CENTERING (operator 2026-09-13 —
   the full UVC panel lives on STAGE/CAM; this is ON/OFF + the jump) */
#jb-cam-mini .jb-cam-open { width: 100%; }
#view-job .jb-prevcol { overflow-x: hidden; }
/* compact since 2026-09-13 (second trim same day) — the IMAGE OUTPUT
   row rides below them and must never cross the divider */
#jb-exp-actions .btn, #jb-img-actions .btn { flex: 1 1 0; padding: 3px 6px; font-size: 11.5px; }
.jb-imgout { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 1px 2px 0; max-width: 100%; min-width: 0; overflow: hidden; }
.jb-imgout span { flex: 0 1 auto; font-size: 9px; letter-spacing: 1.5px; color: var(--muted-2);
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-job .jb-imgout select { flex: 0 0 96px; width: 96px; min-width: 0;
  font-size: 11px; padding: 3px 6px; }

/* centering-grid colour swatch + opacity popover */
.jb-cgrid-wrap { position: relative; display: inline-flex; align-items: center; }
.jb-cgrid-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40;
  background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 6px; padding: 8px 10px 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55); display: none; width: 214px; }
.jb-cgrid-pop.show { display: block; }
.jb-cgrid-pop label { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.jb-cgrid-head { font-family: var(--jb-font); font-size: 9.5px; letter-spacing: 1.8px;
  color: #A6A6A6; padding-bottom: 6px; border-bottom: 1px solid #333; margin-bottom: 8px; }
.jb-cgrid-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.jb-cgrid-sw { width: 100%; aspect-ratio: 1 / 1; border: 1px solid #3a3a3a; border-radius: 4px;
  cursor: pointer; padding: 0; }
.jb-cgrid-sw:hover { border-color: #fff; }
#jb-cgrid-hue { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px;
  border: 1px solid #3a3a3a;
  background: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red); }
#jb-cgrid-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px;
  border-radius: 3px; background: #F2F2F2; border: 1px solid #111; cursor: pointer; }
.jb-cgrid-chip { width: 18px; height: 14px; border-radius: 3px; border: 1px solid #3a3a3a;
  display: inline-block; }
.jb-cgrid-pop i { font-style: normal; font-family: var(--jb-font); font-size: 9px;
  letter-spacing: 1px; color: #A6A6A6; white-space: nowrap; }
.jb-cgrid-pop input[type="range"] { flex: 1 1 0; min-width: 0; height: 14px; margin: 0;
  accent-color: var(--accent); }
.jb-cgrid-pop b { font-family: var(--jb-font); font-size: 10px; color: #d8fbfb;
  width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== INSPECTION REPORT v2 — the customer document (js/jobreport.js, 2026-09-27)
   The operator's example: white A4 pages (794 × 1123 px = 210 × 297 mm at
   96 dpi) in Bahnschrift, dark grey #404040 FRONT · brand red BACK · gold
   #AB9B6F PRE-GRADE. Pages are fixed-size so screen and print match; the
   print runs from a body-level clone (#jr-print) — #app's sidebar grid
   would squeeze it otherwise. ===== */
.rp-wrap.jr-mode { width: 830px; }
.rp-wrap.jr-mode #rp-pdf, .rp-wrap.jr-mode .rp-actions a { display: none; }
.jr { font-family: var(--rep-font); color: #404040; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.jr * { box-sizing: border-box; }
.jr-page { position: relative; width: 794px; height: 1123px; margin: 0 auto 22px; background: #fff; overflow: hidden;
  padding: 34px 44px 0; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 12px; line-height: 1.35; }
.jr .sc, .jr-l2, .jr-l3, .jr-plist span, .jr-cap2, .jr-pop i, .jr-stat i, .jr-dim > span, .jr-cline, .jr-cos span,
.jr-dc span, .jr-dlist, .jr-legend, .jr-strip i, .jr-ccl, .jr-sheet, .jr-notes p, .jr-pfoot, .jr-noimg, .jr-dnone, .jr-more {
  font-family: var(--rep-font-sc); font-stretch: semi-condensed; }
/* header */
.jr-head { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: start; gap: 12px; }
.jr-hl, .jr-hr { min-width: 0; }
.jr-name { font-size: 18px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-l2, .jr-l3 { font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: #8a8a8a; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-l2 b { color: #404040; font-weight: 700; }
.jr-l3 b { color: #DC4F4C; font-weight: 700; }
.jr-hc { text-align: center; }
.jr-hc img { height: 40px; display: block; margin: 0 auto 5px; }
.jr-word { font-size: 17px; letter-spacing: 3.6px; line-height: 1; margin-left: 3px; }
.jr-word b { font-weight: 700; }
.jr-studio { font-size: 6.5px; letter-spacing: 3.3px; margin-top: 4px; margin-left: 3px; }
.jr-hr { text-align: right; }
.jr-rep { font-size: 18px; font-weight: 700; letter-spacing: .3px; line-height: 1.15; }
.jr-id { font-size: 12.5px; color: #a6a6a6; margin-top: 3px; letter-spacing: .4px; }
.jr-id b { color: #404040; }
.jr-ord { font-size: 12.5px; color: #DC4F4C; margin-top: 3px; letter-spacing: .4px; }
.jr-rule { border: none; border-top: 1px solid #cfcfcf; margin: 12px 0 10px; }
.jr-t { text-align: center; font-size: 23px; font-weight: 400; letter-spacing: .6px; margin: 0 0 12px; text-transform: uppercase; line-height: 1.2; }
.jr-t b { font-weight: 700; color: #404040; }
.jr-t .a { color: #404040; }
.jr-t .b { color: #a6a6a6; }
/* BLACKLENS SUMMARY */
.jr-sum { display: grid; grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr); gap: 0 12px; }
.jr-scol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.jr-toprow { display: flex; align-items: center; gap: 14px; height: 96px; }
.jr-slab { width: 92px; height: 92px; display: block; flex: none; }
.jr-slab.empty { border: 3px solid #404040; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #a6a6a6; }
.jr-plist { display: grid; gap: 4px; }
.jr-plist div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 122px; }
.jr-plist span { font-size: 11.5px; letter-spacing: .5px; }
.jr-plist i { font-style: normal; min-width: 34px; text-align: center; background: #404040; color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 2px; }
.jr-plist i.red { background: #DC4F4C; }
.jr-plist i.none { background: #e6e6e6; color: #a6a6a6; }
.jr-score { width: 92px; height: 92px; flex: none; border-radius: 8px; background: #DC4F4C; color: #fff; display: flex; align-items: center; justify-content: center; }
.jr-score b { font-size: 35px; font-weight: 700; letter-spacing: -.5px; }
.jr-cap { font-size: 13px; letter-spacing: .6px; margin: 8px 0 10px; text-transform: uppercase; }
.jr-cap b { font-weight: 700; }
.jr-cap em { font-style: normal; }
.jr-cap em.gold { color: #AB9B6F; }
.jr-cap em.red { color: #DC4F4C; }
.jr-finish { width: 214px; height: 284px; border-radius: 6px; overflow: hidden; padding: 6px; }
.jr-finish.front { background: #404040; }
.jr-finish.back { background: #DC4F4C; }
.jr-finish .jr-zoom { width: 100%; height: 100%; border-radius: 3px; }
.jr-finish img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jr-cap2 { font-size: 10px; letter-spacing: 1.5px; color: #a6a6a6; margin-top: 6px; text-align: center; text-transform: uppercase; }
.jr-mid { position: relative; display: flex; flex-direction: column; align-items: center; }
.jr-mid::before { content: ''; position: absolute; left: 50%; top: 22px; bottom: 24px; width: 1.5px; margin-left: -.75px; background: #d9d9d9; }
.jr-mid > * { position: relative; z-index: 1; }
.jr-pill { background: #a6a6a6; color: #fff; font-size: 12px; letter-spacing: .9px; padding: 2px 10px; border-radius: 2px; white-space: nowrap; }
.jr-pill.rk { margin-top: 44px; }
.jr-pill.en { margin-top: 70px; }
.jr-pop { display: flex; gap: 10px; margin-top: 12px; }
.jr-pop > div, .jr-stat { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 0 2px 2px; }
.jr-stat { margin-top: 10px; }
.jr-box { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 30px; padding: 0 6px;
  border: 2px solid #404040; border-radius: 4px; font-size: 16px; font-weight: 700; color: #404040; background: #fff; }
.jr-box.wide { min-width: 62px; }
.jr-pop .red .jr-box { border-color: #DC4F4C; color: #DC4F4C; }
.jr-pop i, .jr-stat i { font-style: normal; font-size: 7.5px; letter-spacing: .6px; color: #a6a6a6; text-align: center; margin-top: 3px; line-height: 1.25; display: block; }
.jr-pop i b { display: block; font-size: 8px; color: #404040; white-space: nowrap; }
.jr-pop .red i b { color: #DC4F4C; }
/* CENTERING – MEASUREMENT */
.jr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.jr-cside, .jr-dside, .jr-eside, .jr-kside { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.jr-dim { display: grid; grid-template-columns: 54px auto 54px; align-items: center; justify-items: center; gap: 4px 6px; }
.jr-dim .t { grid-column: 2; grid-row: 1; }
.jr-dim .l { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.jr-dim .jr-cbox { grid-column: 2; grid-row: 2; }
.jr-dim .r { grid-column: 3; grid-row: 2; justify-self: start; }
.jr-dim .b { grid-column: 2; grid-row: 3; }
.jr-dim > span { font-size: 9px; letter-spacing: .8px; color: #a6a6a6; line-height: 1.3; }
.jr-dim > span b { font-size: 12px; color: #404040; font-weight: 700; margin: 0 2px; }
.jr-cside.back .jr-dim > span b { color: #DC4F4C; }
.jr-cbox { position: relative; overflow: hidden; border: 1.5px solid #404040; border-radius: 6px; background: #f2f2f2; }
.jr-cside.back .jr-cbox { border-color: #DC4F4C; }
.jr-crop { position: absolute; max-width: none; height: auto; display: block; }
.jr-inner { position: absolute; border: 1.5px dashed #404040; }
.jr-cside.back .jr-inner { border-color: #DC4F4C; }
.jr-flab { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11.5px; letter-spacing: .3px; padding: 1px 7px;
  border-radius: 3px; background: rgba(255,255,255,.86); white-space: nowrap; }
.jr-flab.in { top: 6px; color: #404040; }
.jr-flab.out { bottom: 6px; color: #8a8a8a; }
.jr-cside.back .jr-flab.in { color: #DC4F4C; }
.jr-cside.back .jr-flab.out { color: #d9706d; }
.jr-cline { font-size: 11px; letter-spacing: .6px; color: #8a8a8a; margin-top: 6px; }
.jr-cline b { color: #404040; font-size: 12.5px; }
.jr-cline i { font-style: normal; margin: 0 7px; color: #cfcfcf; }
.jr-cos { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; justify-content: center; }
.jr-cos span { font-size: 9.5px; letter-spacing: .6px; color: #8a8a8a; border: 1px solid #d9d9d9; border-radius: 3px; padding: 1px 6px; }
.jr-cos span b { color: #404040; }
.jr-cos span.bl { background: #404040; border-color: #404040; color: #fff; }
.jr-cos span.bl b { color: #fff; }
.jr-cside.back .jr-cos span.bl { background: #DC4F4C; border-color: #DC4F4C; }
/* DEFECT MAP · CORNERS: the card with callout circles */
.jr-dmap, .jr-kmap { position: relative; flex: none; }
.jr-dcard { position: absolute; overflow: hidden; border-radius: 4px; background: #f2f2f2; }
.jr-dside.front .jr-dcard, .jr-kside.front .jr-dcard { box-shadow: 0 0 0 1.5px #404040; }
.jr-dside.back .jr-dcard, .jr-kside.back .jr-dcard { box-shadow: 0 0 0 1.5px #DC4F4C; }
.jr-dlines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.jr-dlines .ld { stroke: #8a8a8a; stroke-width: 1; stroke-dasharray: 1.4 3; stroke-linecap: round; fill: none; }
.jr-dside.back .jr-dlines .ld, .jr-kside.back .jr-dlines .ld { stroke: #e0807d; }
.jr-dlines .pt { stroke: #fff; stroke-width: 1.2; }
.jr-dlines .pt.major, .jr-dlines .pt.back { fill: #DC4F4C; }
.jr-dlines .pt.minor { fill: #e0b64a; }
.jr-dlines .pt.micro { fill: #8a8a8a; }
.jr-dlines .pt.front { fill: #404040; }
.jr-dc { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #404040; display: flex; align-items: center; justify-content: center; background: #e6e6e6; }
.jr-dside.back .jr-dc { border-color: #DC4F4C; }
.jr-dc.major { background: #f4b8b6; }
.jr-dc.minor { background: #FFF4D0; }
.jr-dc.micro { background: #e6e6e6; }
.jr-dc.pic { border-width: 2.5px; }
.jr-dc.pic.major { border-color: #DC4F4C; }
.jr-dc.pic.minor { border-color: #d9b44a; }
.jr-dc.pic.micro { border-color: #9a9a9a; }
.jr-dc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.jr-dc span { font-size: 7.5px; letter-spacing: .4px; color: #404040; }
.jr-dside.back .jr-dc span { color: #DC4F4C; }
.jr-dc i { position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; border-radius: 8px; background: #404040; color: #fff; font-style: normal;
  font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.jr-dside.back .jr-dc i { background: #DC4F4C; }
.jr-dnone { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 1.6px; color: #a6a6a6; }
.jr-dlist { list-style: none; margin: 4px 0 0; padding: 0; width: 336px; columns: 2; column-gap: 12px; font-size: 9px; letter-spacing: .3px; color: #8a8a8a; }
.jr-dlist li { break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.55; }
.jr-dlist b { display: inline-block; min-width: 14px; color: #404040; }
.jr-dlist em { font-style: normal; font-weight: 700; margin-right: 4px; }
.jr-dlist em.major { color: #DC4F4C; }
.jr-dlist em.minor { color: #b8912a; }
.jr-dlist em.micro { color: #8a8a8a; }
.jr-more { font-size: 9px; color: #a6a6a6; margin-top: 2px; }
.jr-legend { display: flex; justify-content: center; gap: 22px; margin: 4px 0 0; font-size: 10px; letter-spacing: 1.2px; color: #8a8a8a; }
.jr-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; border: 1px solid #404040; }
.jr-legend i.major { background: #f4b8b6; border-color: #DC4F4C; }
.jr-legend i.minor { background: #FFF4D0; border-color: #d9b44a; }
.jr-legend i.micro { background: #e6e6e6; border-color: #9a9a9a; }
.jr-cc { position: absolute; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2.5px solid #404040; background: #e6e6e6;
  display: flex; align-items: center; justify-content: center; }
.jr-cc.back { border-color: #DC4F4C; }
.jr-cc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-cc img.v1 { transform: scale(2.3); }
.jr-cc img.v1.tl { transform-origin: 17% 17%; }
.jr-cc img.v1.tr { transform-origin: 83% 17%; }
.jr-cc img.v1.bl { transform-origin: 17% 83%; }
.jr-cc img.v1.br { transform-origin: 83% 83%; }
.jr-cc span { font-size: 11px; color: #a6a6a6; }
.jr-ccl { position: absolute; width: 120px; text-align: center; line-height: 1.25; }
.jr-ccl b { display: block; font-size: 11px; letter-spacing: .4px; color: #404040; }
.jr-kside.back .jr-ccl b { color: #DC4F4C; }
.jr-ccl span { display: block; font-size: 10px; color: #8a8a8a; }
.jr-ccl em { display: block; font-style: normal; font-size: 8px; color: #a6a6a6; }
/* EDGES – INSPECTION */
.jr-eside { gap: 5px; }
.jr-strip { position: relative; width: 336px; border-radius: 4px; overflow: hidden; border: 1px solid #d9d9d9; background: #f2f2f2; }
.jr-strip img { display: block; width: 100%; height: auto; }
.jr-strip i { position: absolute; left: 5px; top: 4px; font-style: normal; font-size: 8px; letter-spacing: 1.3px; color: #fff;
  background: rgba(64,64,64,.86); padding: 1px 6px; border-radius: 2px; z-index: 1; }
.jr-eside.back .jr-strip i { background: rgba(220,79,76,.92); }
.jr-zoom { position: relative; overflow: hidden; }
.jr-zoom img { transform-origin: 50% 50%; }
.jr-zoom .zoom-tag { position: absolute; top: 6px; right: 6px; }
/* SCORE SHEET + notes */
.jr-sheet { width: 100%; border-collapse: collapse; font-size: 10px; letter-spacing: .3px; color: #404040; line-height: 1.25; }
.jr-sheet th { text-align: left; font-size: 9px; letter-spacing: 1.2px; color: #fff; background: #404040; padding: 3px 8px; font-weight: 600; }
.jr-sheet th.n { text-align: right; }
.jr-sheet th:nth-child(4), .jr-sheet th:nth-child(5) { background: #DC4F4C; }
.jr-sheet td { padding: 1px 8px; border-bottom: 1px solid #efefef; font-variant-numeric: tabular-nums; }
.jr-sheet .n { text-align: right; }
.jr-sheet tr.grp td { font-weight: 700; letter-spacing: 1px; padding-top: 5px; border-bottom: 1px solid #d9d9d9; }
.jr-sheet tr.grp i { font-style: normal; font-weight: 400; color: #8a8a8a; margin-left: 6px; }
.jr-sheet tr.hit td { color: #DC4F4C; }
.jr-sheet tr.sub td { color: #8a8a8a; font-size: 9.5px; }
.jr-sheet tr.tot td { font-weight: 700; font-size: 12px; border-top: 2px solid #404040; padding-top: 5px; }
.jr-notes { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; }
.jr-notes img { width: 70px; height: 70px; border: 1px solid #e3e3e3; border-radius: 4px; flex: none; }
.jr-notes b { font-size: 11px; letter-spacing: .6px; }
.jr-notes p { margin: 4px 0 0; font-size: 9.5px; color: #8a8a8a; line-height: 1.45; }
.jr-notes p.url { color: #404040; }
/* page footer: issue line + the two bars */
.jr-pfoot { position: absolute; left: 44px; right: 44px; bottom: 44px; display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: 1.4px; color: #a6a6a6; }
.jr-bars { position: absolute; left: 44px; right: 44px; bottom: 22px; display: flex; gap: 38px; }
.jr-bars span { flex: 1; height: 16px; background: #404040; }
.jr-bars span.red { background: #DC4F4C; }
.jr-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #a6a6a6; font-size: 10px; letter-spacing: 1.5px; background: #f2f2f2; }
.jr-noimg.tall { height: 150px; width: 336px; border: 1px dashed #d9d9d9; border-radius: 4px; }
#jr-print { display: none; }
@media print {
  body.print-jobreport > *:not(#jr-print) { display: none !important; }
  body.print-jobreport #jr-print { display: block; }
  #jr-print .jr-page { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  #jr-print .jr-page:last-child { break-after: auto; page-break-after: auto; }
  #jr-print .jr-zoom img { transform: none !important; }
  #jr-print .zoom-tag { display: none !important; }
}

/* ===== ORDERS page (the library re-based on orders, 2026-09-23; reformatted
   the same day: the page bar is the INSPECT module's red section box laid
   FLAT, customers are full-width sections and every order is a card in an
   auto-fill grid that spreads across the page - never one squeezed column) ===== */
.ord-bar { display: flex; align-items: center; gap: 18px; padding: 9px 16px; margin-bottom: 14px;
  background: linear-gradient(180deg, #7e2c28, #3a1615 55%, #2b1210);
  border: 1px solid var(--accent); border-radius: 6px; }
.ord-bar-title { font-weight: 400; font-stretch: semi-condensed; font-size: 14.5px; letter-spacing: .5em;
  color: #E8E8E8; white-space: nowrap; }
.ord-bar-title b { font-weight: 600; color: #fff; }
.ord-bar-note { font-size: 10.5px; letter-spacing: 1px; color: #E3BDBB; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ord-bar-counts { margin-left: auto; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #F2D5D3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-bar-actions { flex: 0 0 auto; }
#btn-newjob { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; letter-spacing: 1.2px;
  font-size: 11px; font-weight: 600; padding: 6px 16px; border-radius: 6px; }
#btn-newjob:hover { background: #24713a; }
.ord-list { display: block; }
.ord-cust { margin-bottom: 22px; }
.ord-cust-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 6px; margin-bottom: 10px;
  border-bottom: 1px solid #333; }
.ord-cust-head b { font-weight: 600; font-stretch: semi-condensed; font-size: 14.5px; letter-spacing: 1.5px;
  color: #F2F2F2; }
.ord-cust-head span { font-size: 10.5px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; align-items: start; }
.ord-card { background: #171717; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 12px;
  display: grid; gap: 8px; align-content: start; min-width: 0; }
.ord-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ord-id { font-weight: 700; letter-spacing: 1px; color: var(--accent); font-size: 14px; white-space: nowrap; }
.ord-type { font-size: 10.5px; color: var(--muted); letter-spacing: .5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ord-status { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; letter-spacing: 1.5px; padding: 2px 8px;
  border-radius: 3px; border: 1px solid var(--line); color: #A6A6A6; background: #1b1b1b; }
.ord-status.complete { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
.ord-cust-line { font-size: 12px; color: #D9D9D9; cursor: pointer; }
.ord-cust-line:hover { color: #fff; text-decoration: underline; }
.ord-cust-line.muted { cursor: default; text-decoration: none; }
.ord-jobs { display: grid; gap: 4px; }
.ord-jobs:empty { display: none; }
/* job row = two lines: Job# + level badge, the card name underneath (a
   one-line row squeezed the name to nothing at 1366) */
.ord-job { display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 5px 8px; border-radius: 5px; background: #111; border: 1px solid #262626; }
.ord-job-main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.ord-job b { font-weight: 600; letter-spacing: .8px; white-space: nowrap; color: #F2F2F2; }
.ord-job-main .ord-lvl { justify-self: start; }
.ord-job-name { grid-column: 1 / 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bdbdbd; font-size: 11.5px; }
.ord-lvl { font-style: normal; font-size: 9px; letter-spacing: 1.2px; padding: 2px 7px; border-radius: 3px;
  background: #2a2a2a; color: #bbb; white-space: nowrap; }
.ord-lvl.cen { background: #3a2a10; color: #f0c060; }
.ord-lvl.ins { background: #1f2f4a; color: #8fc4ff; }
.ord-lvl.rep { background: #1d5c2e; color: #bfe6c5; }
.ord-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.ord-actions .btn { padding: 4px 12px; font-size: 10.5px; letter-spacing: 1px; border-radius: 4px; }
.ord-foot { justify-content: flex-end; margin-top: 2px; }
.ord-legacy { margin-top: 6px; }
.ord-legacy summary { cursor: pointer; color: var(--muted); font-size: 11px; letter-spacing: 2px; margin-bottom: 12px; }
/* ---- the ORDERS board (2026-09-26): three dividers — IN PROGRESS ·
   COMPLETED · RETURNED — each a scrolling column; order cards drag across ---- */
.ord-board { --sd: 27px; display: grid; gap: 10px; min-height: 0;
  grid-template-columns: var(--sd) minmax(0, 1fr) var(--sd) minmax(0, 1fr) var(--sd) minmax(0, 1fr); }
.ord-board > * { min-height: 0; min-width: 0; }
#view-home .sec-div.blue { background: linear-gradient(180deg, #2a5f9e, #14304f 55%, #0f2238); border-color: #3b82f6; }
.ord-col { display: flex; flex-direction: column; min-height: 0; background: #141414; border: 1px solid var(--line); border-radius: 6px; }
.ord-col.drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: #1c1414; }
.ord-col-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 6px; border-bottom: 1px solid #2a2a2a; }
.ord-col-head b { font-weight: 600; font-stretch: semi-condensed; font-size: 13.5px; letter-spacing: 2px; color: #F2F2F2; }
.ord-col-head span { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.ord-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 10px; display: grid; gap: 10px; align-content: start; }
.ord-col-empty { font-size: 10.5px; letter-spacing: 1px; color: var(--muted-2); text-align: center; padding: 24px 10px; border: 1px dashed #444; border-radius: 6px; line-height: 1.6; }
.ord-card[draggable="true"] { cursor: grab; }
.ord-card.dragging { opacity: .45; }
.ord-id[data-act] { cursor: pointer; }
.ord-id[data-act]:hover { text-decoration: underline; }
.ord-status.open { background: #3a2a10; border-color: #6b4a14; color: #f0c060; }
.ord-status.returned { background: #1f2f4a; border-color: #2f6fb3; color: #cfe4ff; }
.ord-cust-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
.ord-in { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--jb-font); font-size: 11.5px; color: #eee;
  background: #111; border: 1px solid #333; border-radius: 4px; padding: 4px 7px; }
.ord-in:focus { outline: none; border-color: var(--accent); }
.ord-notify { background: #16324f; border-color: #2f6fb3; color: #cfe4ff; letter-spacing: 1px; font-size: 10px; font-weight: 700; padding: 4px 10px; }
.ord-notify:hover:not(:disabled) { background: #1f4870; color: #fff; }
.ord-notify:disabled { opacity: .45; cursor: default; }
.ord-notified { font-size: 9.5px; letter-spacing: 1px; color: #8fc4ff; text-transform: uppercase; }
.ord-foot { flex-wrap: wrap; }
.ord-foot .ord-del { color: #ffb3ae; }
.ord-col-body .session-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* colour families (operator 2026-09-26): BLACKLENS = the dark grey card with
   the red ORDER#; PSA blue + blue; BGS golden + yellow; ARS red + white */
.ord-card.fam-psa { background: #12263d; border-color: #2f6fb3; }
.ord-card.fam-psa .ord-id { color: #8fc4ff; }
.ord-card.fam-psa .ord-in { background: #0c1a2c; border-color: #2a5486; }
.ord-card.fam-bgs { background: #3a2e0c; border-color: #a8862a; }
.ord-card.fam-bgs .ord-id { color: #ffd54a; }
.ord-card.fam-bgs .ord-in { background: #2a2108; border-color: #7a6220; }
.ord-card.fam-bgs .ord-type, .ord-card.fam-bgs .ord-brief { color: #d9c890; }
.ord-card.fam-ars { background: #7a2622; border-color: #c94a45; }
.ord-card.fam-ars .ord-id { color: #fff; }
.ord-card.fam-ars .ord-type, .ord-card.fam-ars .ord-brief, .ord-card.fam-ars .ord-chev { color: #f5d0ce; }
.ord-card.fam-ars .ord-in { background: #4a1512; border-color: #a13a35; }
.ord-card.fam-ars .ord-status.open { background: #5a1c18; border-color: #e0908a; color: #ffe0de; }
.ord-card.fam-ars .ord-job { background: #3f1310; border-color: #6b221e; }
/* collapsible to ONE line: the chevron on the left, the brief fills the line */
.ord-chev { flex: 0 0 auto; background: none; border: none; color: var(--muted-2); cursor: pointer; font: inherit; font-size: 12px;
  padding: 0 2px 0 0; line-height: 1; transition: transform .18s; }
.ord-chev:hover { color: #fff; }
.ord-card.collapsed .ord-chev { transform: rotate(-90deg); }
.ord-card.collapsed > :not(.ord-head) { display: none; }
.ord-card.collapsed { padding: 7px 12px; gap: 0; }
.ord-brief { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: #bdbdbd; letter-spacing: .3px; }
.ord-card.collapsed .ord-brief { display: inline; flex: 1 1 auto; }
.ord-card.collapsed .ord-type { flex: 0 0 auto; }
.ord-fold { margin-left: auto; background: none; border: 1px solid #333; color: var(--muted); font: inherit; font-size: 8.5px; letter-spacing: 1.2px;
  padding: 2px 7px; border-radius: 3px; cursor: pointer; }
.ord-fold:hover { color: #fff; border-color: #555; }
.ord-fold[hidden] { display: none; }
/* the collapsed line (2026-09-27): customer + jobs + agent, no status / type */
.ord-card.collapsed .ord-status, .ord-card.collapsed .ord-gt { display: none; }
.ord-brief.none { opacity: .6; }
.ord-agent { display: none; flex: 0 1 auto; max-width: 170px; min-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; letter-spacing: 1px; color: #9a9a9a; }
.ord-card.collapsed .ord-agent { display: inline; }
.ord-agent .lbl { font-weight: 400; }
/* the collapsed line gives the customer the room: tighter gaps, a smaller ORDER# and date */
.ord-card.collapsed .ord-head { gap: 7px; }
.ord-card.collapsed .ord-id { font-size: 13px; letter-spacing: .6px; }
.ord-card.collapsed .ord-type { font-size: 9.5px; }
/* narrow columns (1366 and below): the collapsed line compacts itself —
   smaller ORDER#, no date (the DATE filter has it), the agent without its label */
.ord-col-body { container-type: inline-size; overflow-x: hidden; }
@container (max-width: 470px) {
  .ord-card.collapsed .ord-head { gap: 6px; }
  .ord-card.collapsed .ord-id { font-size: 12.5px; letter-spacing: .4px; }
  .ord-card.collapsed .ord-type { display: none; }
  .ord-card.collapsed .ord-agent { min-width: 30px; max-width: 110px; }
  .ord-card.collapsed .ord-agent .lbl { display: none; }
  .ord-card.collapsed .ord-agent.none { display: none; }   /* no agent recorded: the customer takes the room */
  .ord-card.collapsed .ord-head-del { padding: 2px 5px; letter-spacing: .4px; }
}
.ord-selbar { margin-left: auto; }
.ord-agentline { font-size: 9.5px; letter-spacing: 1px; color: #9a9a9a; }
.ord-card.fam-ars .ord-agent, .ord-card.fam-ars .ord-agentline { color: #f5d0ce; }
.ord-card.fam-bgs .ord-agent, .ord-card.fam-bgs .ord-agentline { color: #d9c890; }
.ord-card.fam-psa .ord-agent, .ord-card.fam-psa .ord-agentline { color: #9fbfe0; }
/* the bar's search + filters */
.ord-bar { flex-wrap: wrap; row-gap: 6px; }
.ord-filters { display: flex; align-items: center; gap: 8px; flex: 1 1 520px; min-width: 0; }
.ord-f { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 3px 8px; min-width: 0; }
.ord-f:focus-within { border-color: #ffb3ae; }
.ord-f i { font-style: normal; font-size: 8.5px; letter-spacing: 1.3px; color: #F2D5D3; white-space: nowrap; }
.ord-f input, .ord-f select { background: none; border: none; outline: none; color: #fff; font-family: var(--jb-font); font-size: 11.5px; color-scheme: dark; min-width: 0; padding: 1px 0; }
.ord-f select option { background: #2E2E2E; color: #F2F2F2; }
.ord-f.search { flex: 1 1 240px; max-width: 360px; }
.ord-f.search input { width: 100%; }
.ord-f.month { position: relative; }
.ord-mbtn { background: none; border: none; color: #fff; font-family: var(--jb-font); font-size: 11.5px; letter-spacing: 1px; cursor: pointer; padding: 1px 2px; }
.ord-mbtn:hover { color: #ffd9d7; }
.ord-mbtn.on { color: #ffd54a; }
.ord-month-in { position: absolute; left: 40px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.ord-f.type select { max-width: 190px; cursor: pointer; }
.ord-fx { background: none; border: none; color: #F2D5D3; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.ord-fx:hover { color: #fff; }
.ord-fx[hidden] { display: none; }
/* the bar works the SELECTION (2026-09-26): tick cards, then move / delete them together */
.ord-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ord-selbar .btn { padding: 4px 9px; font-size: 9.5px; letter-spacing: 1px; border-radius: 4px; }
.ord-selbar .btn:disabled { opacity: .4; cursor: default; }
.ord-sel-n { font-size: 10px; letter-spacing: 1.5px; color: #F2D5D3; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ord-pick { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.ord-card.picked { outline: 2px solid #ffb3ae; outline-offset: -2px; }
.ord-head-del { display: none; flex: 0 0 auto; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; background: #4a1512; border: 1px solid #a13a35;
  color: #ffd9d7; cursor: pointer; font: inherit; font-size: 9px; }
.ord-card.collapsed .ord-head-del { display: inline-block; }
.ord-head-del:hover { background: #6b1f1c; color: #fff; }

/* ============ SUBMISSION (view-submit) — CARD GRADING SUBMISSION ZONE (2026-09-26) ============
   Three columns on the INSPECT divider schema: the card expanded | the
   search box over a results list that scrolls and keeps loading | the
   LIST CREATOR (blue divider — the mockup's second colour). */
#view-submit { padding: 2px 10px 10px 5px; overflow: auto; --sd: 27px; --sub-c-prev: 330px; --sub-c-list: 460px; font-family: var(--jb-font); }
#view-submit .sec-div.jb-resizable { cursor: col-resize; }
#view-submit .sec-div.jb-resizable:hover { filter: brightness(1.18); }
#view-submit button, #view-submit select, #view-submit input { font-family: var(--jb-font); }
#view-submit [hidden] { display: none !important; }
#view-submit .card-head b { font-size: 14.5px; font-weight: 700; font-stretch: semi-condensed; letter-spacing: .5px; }
.sub-grid { display: grid; gap: 10px; margin-top: 6px; height: calc(100vh - 86px); min-width: 1300px;
  grid-template-columns: var(--sd) var(--sub-c-prev) minmax(520px, 1fr) var(--sd) var(--sub-c-list); }   /* the vars: the dividers drag them */
.sub-grid > * { min-height: 0; min-width: 0; }
.sub-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sub-col > .card { flex: 0 0 auto; padding: 8px 10px; }
.sub-col > .card .card-head { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#view-submit .sec-div.blue { background: linear-gradient(180deg, #2a5f9e, #14304f 55%, #0f2238); border-color: #3b82f6; }
/* column 1 — the card, expanded */
.sub-prevcard { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; }
.sub-prevcard .card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }   /* never scrolls — sizeGrid() fits the picture */
.sub-prevbox { position: relative; width: 100%; aspect-ratio: 5 / 7; max-height: 50vh; margin: 0 auto 8px;
  background: #171717; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sub-prevbox img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sub-prev-empty { font-size: 10.5px; letter-spacing: 1px; color: var(--muted-2); text-align: center; padding: 18px; border: 1px dashed #444; border-radius: 6px; margin: 16px; }
.sub-attrs { width: 100%; border-collapse: collapse; font-size: 11px; }
.sub-attrs th { text-align: left; font-size: 9.5px; letter-spacing: 2px; color: #E8E8E8; background: #3a3a3a; padding: 3px 8px; font-weight: 700; }
.sub-attrs td { padding: 1px 8px; border-bottom: 1px solid #262626; vertical-align: top; line-height: 1.3; }
.sub-attrs td:first-child { color: var(--muted); text-align: right; width: 40%; letter-spacing: .5px; font-size: 10.5px; white-space: nowrap; }
.sub-attrs td:last-child { color: #F2F2F2; word-break: break-word; }
/* column 2 — the search box */
.sub-modes { display: inline-flex; gap: 3px; }
.sub-modes .jb-tab { font-size: 10px; padding: 3px 10px; }
.sub-hint { margin: -2px 0 8px; letter-spacing: 1px; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-frow, .sub-frow2, .sub-manual { margin-bottom: 8px; }
.sub-frow .slabq-fld.num { min-width: 180px; }
.sub-frow .slabq-fld.sel { flex: 0 0 118px; }
.sub-frow .slabq-fld.rar { flex: 1 1 140px; min-width: 120px; max-width: 220px; }
.sub-frow .slabq-fld.cur { min-width: 84px; flex-basis: 84px; }
.sub-frow .slabq-go { line-height: 1.1; font-size: 10.5px; letter-spacing: 1px; padding: 0 12px; }
.slabq-fld.blue { background: #16324f; border-color: #2f6fb3; }
.slabq-fld.blue i { color: #9cc4f0; }
.sub-frow2 .slabq-fld.sel { flex: 0 0 210px; }
.sub-minis { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.sub-minis .btn { font-size: 9.5px; letter-spacing: 1px; padding: 3px 10px; border-radius: 4px; font-weight: 700; }
.sub-minis .btn.on { filter: brightness(1.15); outline: 1px solid #fff3; }
.sub-note { margin: 0 0 2px; }
.sub-note:empty { display: none; }
.sub-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  background: #171717; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.sub-rows { gap: 4px; }
.sub-rows .slabq-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; width: 100%;
  background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sub-rows .slabq-row.sel, .sub-rows .slabq-row:hover { background: #262626; border-color: #3a3a3a; }
.sub-rows .slabq-row.listed { border-color: #2a7a3e; }
.sub-rows .slabq-art { width: 40px; height: 56px; }
.sub-rows .slabq-rc b { font-size: 13px; font-weight: 700; }
.sub-rows .slabq-rc b em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #ffdc7a; margin-left: 6px; letter-spacing: .5px; }
.sub-rows .slabq-rc b em.sub-inlist { font-size: 9px; letter-spacing: 1px; color: #bfe6c5; background: #1f3d2a; border: 1px solid #2a7a3e; border-radius: 3px; padding: 0 5px; }
.sub-rows .slabq-rc span { font-size: 11px; }
.sub-rows .slabq-rp { min-width: 110px; }
.sub-add { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 1px; padding: 5px 10px; border-radius: 4px; font-weight: 700; min-width: 96px; }
.slabq-more { text-align: center; font-size: 10px; letter-spacing: 1.5px; color: var(--muted-2); padding: 10px 0 4px; text-transform: uppercase; cursor: pointer; }
.slabq-more.err { color: #ffb3ae; }
/* column 3 — the list creator */
.sub-subm { display: grid; gap: 6px; }
.sub-subm .slabq-fld { flex: none; }
.sub-listcard { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; }
.sub-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 6px;
  background: #171717; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.sub-list-empty { font-size: 10.5px; letter-spacing: 1px; color: var(--muted-2); text-align: center; padding: 24px 10px; border: 1px dashed #444; border-radius: 6px; }
.sub-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: start;
  background: #5a2321; border: 1px solid #7e2c28; border-radius: 6px; padding: 7px 8px; }
.sub-item .slabq-art { width: 52px; height: 72px; }
.sub-item-meta { min-width: 0; font-size: 11px; color: #f0d0ce; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; }
.sub-item-meta .sub-jobid { color: #ffd9d7; letter-spacing: .5px; font-size: 10.5px; }
.sub-item-line { font-size: 10.5px; color: #f0d0ce; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* editable in place: name · number · set look like text until touched */
.sub-ed { font: inherit; font-family: var(--jb-font); color: #fff; background: transparent; border: 1px solid transparent; border-bottom-color: #7e2c28;
  border-radius: 3px; padding: 1px 4px; min-width: 0; width: 100%; }
.sub-ed:hover { border-color: #9a3b37; }
.sub-ed:focus { outline: none; background: #2a0f0e; border-color: #ffb3ae; }
.sub-ed-name { font-size: 13px; font-weight: 700; }
.sub-ed-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px; }
.sub-ed-num, .sub-ed-set { font-size: 11px; }
.sub-item.filed { background: #1f3d2a; border-color: #2a7a3e; }
.sub-item.filed .sub-ed { border-bottom-color: #2a7a3e; }
.sub-item.filed .sub-ed:focus { background: #14321a; border-color: #8fe0a4; }
.sub-item.filed .sub-item-meta, .sub-item.filed .sub-item-line, .sub-item.filed .sub-jobid { color: #d6f2dc; }
.sub-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sub-mini { font: inherit; font-family: var(--jb-font); font-size: 9px; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; background: #2a2a2a; border: 1px solid #444; color: #ddd; cursor: pointer; }
.sub-mini:hover { background: #3a3a3a; color: #fff; }
.sub-note-btn.has { background: #5c4a16; border-color: #a8862a; color: #ffe6a8; }
.sub-noteed { grid-column: 1 / -1; }
.sub-notearea { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--jb-font); font-size: 11px; color: #fff; background: #2a0f0e;
  border: 1px solid #9a3b37; border-radius: 4px; padding: 4px 6px; resize: vertical; min-height: 40px; }
.sub-orderbtns { display: flex; gap: 6px; margin-top: 2px; }
.sub-orderbtns .btn { flex: 1 1 0; letter-spacing: 1px; font-size: 10px; font-weight: 700; padding: 5px 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* per item (2026-09-26): rarity select · declared GRADED / RAW values · INSPECTION */
.sub-ed-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; align-items: center; }
.sub-ed-rar { font: inherit; font-family: var(--jb-font); font-size: 10.5px; color: #fff; background: #2a0f0e; border: 1px solid #7e2c28; border-radius: 3px; padding: 1px 4px; max-width: 100%; min-width: 0; }
.sub-item.filed .sub-ed-rar { background: #14321a; border-color: #2a7a3e; }
.sub-decl { display: grid; grid-template-columns: auto 78px; gap: 2px 5px; align-items: center; justify-items: end; }
.sub-decl i { font-style: normal; font-size: 8.5px; letter-spacing: 1px; color: #ffd9d7; }
.sub-decl input { width: 78px; box-sizing: border-box; text-align: right; font: inherit; font-family: var(--jb-font); font-size: 10.5px; color: #fff;
  background: #2a0f0e; border: 1px solid #7e2c28; border-radius: 3px; padding: 1px 4px; font-variant-numeric: tabular-nums; }
.sub-decl input.auto { color: #ffe6a8; }
.sub-decl input:focus { outline: none; border-color: #ffb3ae; }
.sub-decl .sub-decl-cur { grid-column: 1 / -1; font-size: 8.5px; letter-spacing: 1px; color: #ffd9d7; white-space: nowrap; }
.sub-item.filed .sub-decl input { background: #14321a; border-color: #2a7a3e; }
.sub-item.filed .sub-decl i, .sub-item.filed .sub-decl-cur { color: #bfe6c5; }
.sub-insp { background: #1f3d2a; border-color: #2a7a3e; color: #dff5e3; }
.sub-insp:hover { background: #2a5a3a; color: #fff; }
/* ---- SUBMISSION compaction (operator 2026-09-26) ---- */
#view-submit .slabq-fld { padding: 3px 9px; gap: 1px; border-radius: 5px; }
#view-submit .slabq-fld i { font-size: 7.5px; letter-spacing: .08em; }
#view-submit .slabq-fld input, #view-submit .slabq-fld select { font-size: 11.5px; padding: 1px 0; }
#view-submit .slabq-fld select { font-size: 11px; }
.sub-frow, .sub-frow2 { margin-bottom: 6px; gap: 6px; }
.sub-frow .slabq-go { font-size: 11px; padding: 0 14px; line-height: 1; letter-spacing: 1.5px; }
.sub-imgbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 10px !important;
  background: #16324f; border-color: #2f6fb3; color: #cfe4ff; }
.sub-imgbtn small { font-size: 7.5px; letter-spacing: 1px; color: #8fc4ff; }
.sub-imgbtn:hover { background: #1f4870; color: #fff; }
.sub-imgbtn:disabled { opacity: .5; cursor: default; }
.sub-searchcard.dropping { outline: 2px dashed #3b82f6; outline-offset: -3px; }
.sub-subm { gap: 4px; }
.sub-hint { margin: -2px 0 5px; }
/* the SORT bar over the results */
.sub-sortbar { display: flex; align-items: center; gap: 5px; margin: 0 0 5px; font-size: 9.5px; letter-spacing: 1.5px; color: var(--muted); }
.sub-sortlbl { font-weight: 700; margin-right: 2px; }
.sub-sortbtn { font: inherit; font-family: var(--jb-font); font-size: 9.5px; letter-spacing: 1.2px; font-weight: 700; padding: 3px 9px; border-radius: 4px;
  background: #262626; border: 1px solid #3a3a3a; color: #ddd; cursor: pointer; }
.sub-sortbtn:hover { background: #333; color: #fff; }
.sub-sortbtn.on { background: #7e2c28; border-color: var(--accent); color: #fff; }
.sub-sortbtn:disabled { opacity: .5; cursor: default; }
.sub-sortnote { margin-left: auto; font-size: 9.5px; letter-spacing: 1px; color: var(--muted-2); }
/* compact list items: values inline, one button row, red REMOVE */
.sub-item { grid-template-columns: 44px minmax(0, 1fr); gap: 7px; padding: 5px 7px; }
.sub-item .slabq-art { width: 44px; height: 62px; }
.sub-item-meta { gap: 3px; }
.sub-ed-name { font-size: 12.5px; }
.sub-ed-row3 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.sub-decl-in { display: inline-flex; align-items: center; gap: 4px; }
.sub-decl-in i { font-style: normal; font-size: 8px; letter-spacing: 1px; color: #ffd9d7; white-space: nowrap; }
.sub-decl-in input { width: 68px; box-sizing: border-box; text-align: right; font: inherit; font-family: var(--jb-font); font-size: 10.5px; color: #fff;
  background: #2a0f0e; border: 1px solid #7e2c28; border-radius: 3px; padding: 1px 4px; font-variant-numeric: tabular-nums; }
.sub-decl-in input.auto { color: #ffe6a8; }
.sub-decl-in input:focus { outline: none; border-color: #ffb3ae; }
.sub-item.filed .sub-decl-in input { background: #14321a; border-color: #2a7a3e; }
.sub-item.filed .sub-decl-in i { color: #bfe6c5; }
.sub-item-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.sub-item-foot .sub-jobid { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-item-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.sub-item-btns .sub-remove { background: #6b1f1c; border-color: #c94a45; color: #ffe0de; }
.sub-item-btns .sub-remove:hover { background: #8a2a25; color: #fff; }
/* ---- SUBMISSION seventh pass (operator 2026-09-27) ---- */
/* button colours: green = create / add / xlsx, grey = load / clear, blue = save, red = pdf */
.btn.btn-green { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
.btn.btn-green:hover:not(:disabled) { background: #24713a; color: #fff; }
.btn.btn-grey { background: #2e2e2e; border-color: #4a4a4a; color: #e0e0e0; }
.btn.btn-grey:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
.btn.btn-red { background: #7e2c28; border-color: #c94a45; color: #ffe0de; }
.btn.btn-red:hover:not(:disabled) { background: #9a3733; color: #fff; }
/* the search grid: two field rows on the left, SEARCH spanning both on the right */
.sub-fwrap { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; margin-bottom: 6px; }
.sub-frows { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sub-fwrap .sub-frow, .sub-fwrap .sub-frow2 { margin-bottom: 0; }
.sub-fwrap .slabq-fld { max-width: none; }
/* the minimums add up to the 520px column floor (398px beside SEARCH) — no overlap when the grid pans */
.sub-frow .slabq-fld.fg-q { flex: 2.4 1 0; min-width: 118px; }
.sub-frow .slabq-fld.fg-game { flex: 1.3 1 0; min-width: 96px; }
.sub-frow .slabq-fld.fg-lang { flex: 1.1 1 0; min-width: 84px; }
.sub-frow .slabq-fld.fg-cur { flex: 0 0 80px; min-width: 80px; }
.sub-frow2 .slabq-fld.fg-set { flex: 2.6 1 0; min-width: 150px; }
.sub-frow2 .slabq-fld.fg-year { flex: 0 0 84px !important; min-width: 84px; max-width: 84px; }
.sub-frow2 .slabq-fld.fg-rar { flex: 1.6 1 0; min-width: 100px; }
.sub-go { align-self: stretch; font-size: 12px !important; letter-spacing: 2px !important; padding: 0 8px !important; }
/* IMAGE (beta) as a head tab */
.sub-modes .sub-imgbtn { display: inline-flex; flex-direction: row; align-items: center; padding: 3px 10px !important; margin-left: 6px;
  background: #16324f; border-color: #2f6fb3; color: #cfe4ff; font-size: 10px; letter-spacing: 1px; }
.sub-modes .sub-imgbtn:hover { background: #1f4870; color: #fff; }
/* the Search Results header, the sort bar right-aligned with the ADD TO LIST column */
.sub-reshead { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; padding: 0 2px; }
.sub-reshead b { font-size: 13.5px; font-weight: 700; font-stretch: semi-condensed; letter-spacing: .5px; color: #F2F2F2; }
.sub-reshead .sub-sortbar { margin: 0 0 0 auto; }
.sub-reshead .sub-sortnote { margin: 0 6px 0 0; }
/* customer + email on one line */
.sub-custrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sub-custrow .slabq-fld { min-width: 0; }
.sub-item-price { font-size: 10.5px; color: #fff; text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sub-item-price i { font-style: normal; color: #ffd9d7; font-size: 9px; letter-spacing: 1px; margin-right: 4px; }
.sub-remove { font-size: 9px; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; background: #2a2a2a; border: 1px solid #444; color: #ddd; cursor: pointer; font: inherit; font-size: 9px; }
.sub-remove:hover { background: #3a3a3a; color: #fff; }
.sub-listfoot { display: flex; gap: 6px; margin-top: 6px; }
.sub-listfoot .btn { flex: 1 1 0; letter-spacing: 1px; font-size: 10px; font-weight: 700; padding: 5px 4px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sub-listfoot .sub-compile { flex: 1.5 1 0; }   /* the long label; the buttons never push the column (no side scroll) */
.sub-listfoot .btn:disabled { opacity: .45; cursor: default; }
.sub-compile { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
.sub-compile:hover { background: #24713a; }
.sub-compile:disabled { opacity: .45; cursor: default; }
@media (max-width: 1365px) { #view-submit.active { min-width: 1300px; } }

/* ---- SUBMISSION print sheet (EXPORT PDF, 2026-09-26): a white A4 landscape
   table of the listed cards WITH their notes; on screen it does not exist ---- */
#sub-print { display: none; }
@media print {
  body.printing-submission > *:not(#sub-print) { display: none !important; }
  body.printing-submission #sub-print { display: block; color: #111; background: #fff; font: 10pt/1.35 var(--rep-font); }
  /* the header WRAPS instead of squeezing (2026-09-27, AGENT joined the
     fields): each field keeps its value on one line, and when the row runs
     out of room the fields move under the brand, right-aligned */
  #sub-print .sp-head { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 6px; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #DC4F4C; padding-bottom: 6px; margin-bottom: 10px; }
  #sub-print .sp-brand { font-size: 20pt; letter-spacing: 3px; }
  #sub-print .sp-brand b { font-weight: 800; }
  #sub-print .sp-brand span { font-size: 11pt; letter-spacing: 2px; color: #444; }
  #sub-print .sp-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 16px; row-gap: 4px; margin-left: auto; font-size: 9.5pt; }
  #sub-print .sp-meta i { display: block; font-style: normal; font-size: 7pt; letter-spacing: 1.5px; color: #777; }
  #sub-print .sp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  #sub-print .sp-table th, #sub-print .sp-table td span, #sub-print .sp-meta, #sub-print .sp-foot { font-family: var(--rep-font-sc); font-stretch: semi-condensed; }
  #sub-print .sp-table th { text-align: left; font-size: 8pt; letter-spacing: 1px; color: #fff; background: #404040; padding: 4px 6px; }
  #sub-print .sp-table td { padding: 4px 6px; border-bottom: 1px solid #ddd; vertical-align: top; font-size: 9pt; }
  #sub-print .sp-table td span { color: #555; font-size: 8pt; }
  #sub-print .sp-art img { width: 34px; height: 47px; object-fit: cover; border-radius: 2px; }
  #sub-print .sp-note { white-space: pre-wrap; font-size: 8.5pt; overflow-wrap: anywhere; }
  #sub-print .sp-table td { overflow-wrap: anywhere; }
  #sub-print tr { break-inside: avoid; }
  #sub-print .sp-foot { margin-top: 10px; font-size: 7.5pt; color: #777; text-align: right; }
}

/* ============================================================
   THE PLAN (operator 2026-09-27): four access levels, the new menu,
   BLACKBOARD and BLACKVAULT — every page in Bahnschrift
   ============================================================ */
/* one font family everywhere (Bahnschrift; Barlow stands in on devices
   without it — phones opening BLACKVAULT from the QR) */
body { font-family: var(--rep-font); }
.status-chip, .track-badge { font-family: var(--rep-font); font-variant-numeric: tabular-nums; }

/* ---- the menu: data-roles decides who sees a button (js/app.js applyMenu) ---- */
#sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
#sidebar::-webkit-scrollbar { display: none; }
#sidebar [hidden] { display: none !important; }
/* INSPECTION's three sub-steps: a tray under the button, one numbered
   step each — 1 CENTERING · 2 MAP INSPECT · 3 REPORTING */
.sb-subs { display: flex; flex-direction: column; gap: 1px; width: 62px; margin: -3px 0 3px; padding: 3px 0;
  background: #161616; border: 1px solid #2c2c2c; border-radius: 9px; }
.sb-sub { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 3px 0 4px;
  background: none; border: none; border-radius: 7px; cursor: pointer; color: var(--muted-2);
  font-family: inherit; font-size: 7px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.sb-sub i { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 8.5px; background: #2a2a2a; border: 1px solid #454545; color: #bbb; }
.sb-sub:hover { color: var(--text); background: #222; }
.sb-sub.on { color: #fff; background: #2a1817; }
.sb-sub.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
/* a viewer sees BLACKBOARD locked — it asks them to sign up */
.sb-btn.locked { opacity: .72; }
.sb-btn.locked .ico { position: relative; }
.sb-btn.locked .ico::after { content: '\1F512'; position: absolute; right: -7px; bottom: -5px; font-size: 10px; filter: grayscale(1) brightness(1.6); }
.sb-auth .ico { font-size: 14px; }
/* LOGIN / LOGOUT moved into the menu — the topbar button steps aside */
#btn-signout { display: none !important; }
/* the stage / scope chips mean nothing to a customer or a viewer */
.viewer-mode #stage-chip, .viewer-mode #scope-chip, .customer-mode #stage-chip, .customer-mode #scope-chip { display: none !important; }
@media (max-height: 820px) {
  .sb-btn { padding: 6px 2px; gap: 3px; }
  .sb-btn .ico { width: 26px; height: 26px; }
  .sb-logo { margin-bottom: 8px; }
}
/* the A4 view (a v2/v3 INSPECTION REPORT) links back to its BLACKVAULT carousel */
.rp-wrap:not(.jr-mode) .rp-vault { display: none; }
.rp-wrap.jr-mode .rp-actions a.rp-vault { display: inline-block; }

/* ============ BLACKVAULT (view-vault) ============ */
#view-vault.active { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 10px; overflow: hidden; min-height: 0; }
#view-vault, #view-vault button, #view-vault input { font-family: var(--rep-font); }
.bv-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 6px; padding: 7px 12px;
  border-radius: 6px; background: linear-gradient(180deg, #5e4b1c, #2f2610 60%, #231c0b); border: 1px solid #c9a83c; }
#view-vault.bv-jobmode .bv-bar { background: linear-gradient(180deg, #7e2c28, #3a1615 55%, #2b1210); border-color: var(--accent); }
.bv-brand { font-size: 17px; letter-spacing: 3px; color: #f4e7c0; white-space: nowrap; }
.bv-brand b { font-weight: 800; color: #fff; }
.bv-brand span { margin-left: 12px; font-size: 9px; letter-spacing: 2.2px; color: #d9c890; }
#view-vault.bv-jobmode .bv-brand span { color: #F2D5D3; }
.bv-find { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bv-find[hidden], .bv-jobbar[hidden] { display: none; }
.bv-f { display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.22); border-radius: 5px; padding: 2px 10px; }
.bv-f:focus-within { border-color: #f4e7c0; }
.bv-f i { font-style: normal; font-size: 8.5px; letter-spacing: 1.4px; color: #e8d9a8; }
.bv-f input { background: none; border: none; outline: none; color: #fff; font-size: 13px; letter-spacing: 1.2px; width: 170px; padding: 4px 0; }
.bv-btn { padding: 5px 12px; font-size: 10.5px; letter-spacing: 1.2px; border-radius: 4px; font-weight: 700; }
.bv-btn.red { background: linear-gradient(180deg, #e25a57, #b03835); border-color: #932c29; color: #fff; }
.bv-btn.green { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
.bv-btn.blue { background: #16324f; border-color: #2f6fb3; color: #cfe4ff; }
.bv-btn:disabled { opacity: .42; cursor: default; }
.bv-jobbar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.bv-jstate { display: flex; align-items: baseline; gap: 8px; margin-right: 6px; font-size: 11px; letter-spacing: 1px; color: #F2D5D3; }
.bv-jstate b { font-size: 13px; color: #fff; letter-spacing: 1.2px; }
.bv-jstate em { font-style: normal; font-size: 9.5px; letter-spacing: 1.4px; padding: 2px 8px; border-radius: 3px; }
.bv-jstate em.pre { background: #4a3a10; color: #f0c060; }
.bv-jstate em.ok { background: #1d5c2e; color: #dff5e3; }
.bv-jstate em.loc { background: #1f2f4a; color: #cfe4ff; }
.bv-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bv-rec { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* the hero line: the card · VERIFIED + Job# · the grade slab · BLACKSCORE */
.bv-hero { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 8px 12px; min-width: 0;
  background: #1b1b1b; border: 1px solid var(--line); border-radius: 6px; }
.bv-thumb { flex: 0 0 auto; width: 46px; height: 64px; border-radius: 3px; overflow: hidden; background: #111; border: 1px solid #333;
  display: flex; align-items: center; justify-content: center; color: #555; }
.bv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bv-idcol { flex: 1 1 auto; min-width: 0; }
.bv-name { font-size: 20px; font-weight: 700; letter-spacing: .5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.bv-native { font-size: 12px; color: #bdbdbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-meta { font-size: 11.5px; color: #A6A6A6; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-meta b { color: #F2F2F2; font-weight: 600; }
.bv-meta i { font-style: normal; color: #555; }
.bv-ver { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bv-ver b { font-size: 14.5px; letter-spacing: 1.2px; color: #fff; }
.bv-ver i { font-style: normal; font-size: 9px; letter-spacing: 1.3px; color: var(--muted); }
.bv-seal { font-size: 9px; letter-spacing: 1.6px; padding: 2px 8px; border-radius: 3px; font-weight: 700; }
.bv-seal.ok { background: #1d5c2e; color: #dff5e3; border: 1px solid #2a7a3e; }
.bv-seal.loc { background: #1f2f4a; color: #cfe4ff; border: 1px solid #2f6fb3; }
.bv-seal.pre { background: #4a3a10; color: #f0c060; border: 1px solid #6b5320; }
.bv-gradebox { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid #333; }
.bv-slabimg { height: 60px; width: auto; display: block; }
.bv-gradebox b { display: block; font-size: 30px; line-height: 1; color: #fff; font-weight: 700; }
.bv-gradebox i { font-style: normal; font-size: 9.5px; letter-spacing: 1.5px; color: #d9c890; }
.bv-scorebox { flex: 0 0 auto; background: linear-gradient(180deg, #e25a57, #9e302d); border: 1px solid #c94a45; border-radius: 5px; padding: 5px 13px; text-align: center; }
.bv-scorebox b { display: block; font-size: 25px; line-height: 1.05; color: #fff; }
.bv-scorebox i { font-style: normal; font-size: 7.5px; letter-spacing: 1.2px; color: #ffe0de; line-height: 1.2; display: block; }
.bv-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.bv-acts:empty { display: none; }
.bv-acts .sm { display: none; }
@media (max-width: 760px) { .bv-acts .sm { display: inline; } }
/* the section tabs + arrows */
.bv-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.bv-tablist { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bv-tablist::-webkit-scrollbar { display: none; }
.bv-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 8px;
  background: #1b1b1b; border: 1px solid #333; border-radius: 4px; color: #A6A6A6; font-size: 12px; letter-spacing: 2.2px; cursor: pointer; white-space: nowrap; }
.bv-tab i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #2c2c2c; font-size: 10px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.bv-tab:hover { color: #fff; border-color: #555; }
.bv-tab.on { background: linear-gradient(180deg, #7e2c28, #3a1615); border-color: var(--accent); color: #fff; }
.bv-tab.on i { background: var(--accent); color: #fff; }
.bv-arrow { flex: 0 0 auto; width: 36px; height: 33px; border-radius: 4px; background: #1b1b1b; border: 1px solid #333; color: #ddd; cursor: pointer; font-size: 12px; }
.bv-arrow:hover:not(:disabled) { border-color: #777; color: #fff; }
.bv-arrow:disabled { opacity: .28; cursor: default; }
.bv-sideseg { display: none; }
.bv-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 9px; }
.bv-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #666; background: none; cursor: pointer; }
.bv-dot.on { background: var(--accent); border-color: var(--accent); }
/* the carousel: one slide per section, the track slides sideways */
.bv-stage { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bv-track { display: flex; height: 100%; transition: transform .38s cubic-bezier(.2, .75, .2, 1); will-change: transform; }
.bv-slide { flex: 0 0 100%; height: 100%; min-width: 0; padding: 0 1px; }
.bv-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; height: 100%; }
.bv-cols3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px) minmax(0, 1fr); gap: 10px; height: 100%; }
.bv-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 8px; padding: 8px;
  background: #1b1b1b; border: 1px solid var(--line); border-radius: 6px; }
.bv-side.front { border-top: 3px solid #6a6a6a; }
.bv-side.back { border-top: 3px solid var(--accent); }
.bv-phead { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bv-phead b { font-size: 12.5px; font-weight: 600; letter-spacing: 2px; color: #F2F2F2; }
.bv-phead span { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
/* a zoom cell: the picture fitted inside (container units keep its aspect),
   zoomed / panned by transforming .bv-zin */
.bv-zc { position: relative; overflow: hidden; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 4px; container-type: size; touch-action: none; cursor: zoom-in; }
.bv-zc.zoomed { cursor: grab; }
.bv-zin { position: relative; width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform; }
.bv-zin[style*="--ar"] { width: min(100cqw, calc(100cqh * var(--ar))); height: min(100cqh, calc(100cqw / var(--ar))); }
.bv-zin img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.bv-grow { flex: 1 1 auto; }
.bv-none { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 2px; color: #666; }
.bv-zc.noimg { cursor: default; }
.bv-zc.noimg .bv-none { display: flex; }
.bv-zc.noimg .bv-zin { visibility: hidden; }
.bv-zc.loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 2px solid #444; border-top-color: #c9a83c; animation: bv-spin .8s linear infinite; }
@keyframes bv-spin { to { transform: rotate(360deg); } }
.bv-zc .zoom-tag { z-index: 6; }
/* 1 SUMMARY */
.bv-sumcard { overflow-y: auto; scrollbar-width: thin; }
.bv-sumtop { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; }
.bv-slabbig { height: 150px; width: auto; display: block; }
.bv-slabbig.empty { width: 100px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #555; border: 1px dashed #444; border-radius: 6px; }
.bv-sumg b { display: block; font-size: 46px; line-height: 1; color: #fff; font-weight: 700; }
.bv-sumg i { display: block; font-style: normal; font-size: 12px; letter-spacing: 2px; color: #d9c890; margin-top: 2px; }
.bv-bs { display: block; margin-top: 10px; font-size: 9.5px; letter-spacing: 1.2px; color: var(--muted); }
.bv-bs b { display: inline; font-size: 21px; color: #ff8a87; }
.bv-ptable { width: 100%; border-collapse: collapse; font-size: 12px; }
.bv-ptable th { font-size: 9.5px; letter-spacing: 1.5px; color: var(--muted); text-align: left; padding: 4px 6px; border-bottom: 1px solid #3a3a3a; font-weight: 600; }
.bv-ptable td { padding: 5px 6px; border-bottom: 1px solid #242424; color: #ddd; letter-spacing: .6px; }
.bv-ptable td.g { font-size: 16px; font-weight: 700; color: #fff; }
.bv-ptable td.s i { font-style: normal; color: #777; font-size: 10px; }
.bv-ptable td.l.red { color: #ff8a87; }
.bv-popgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bv-popgrid div { background: #141414; border: 1px solid #2a2a2a; border-radius: 4px; padding: 6px 4px; text-align: center; }
.bv-popgrid b { display: block; font-size: 21px; color: #fff; line-height: 1.15; }
.bv-popgrid i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: 1.2px; color: var(--muted); line-height: 1.3; }
.bv-fine { font-size: 9.5px; color: #777; line-height: 1.5; margin: 0; }
/* 2 CENTERING: the card inside its outer frame, border widths hugging it */
.bv-cent { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; --mmr: 150px; }
.bv-cent .bv-cbox { flex: 1 1 auto; width: 100%; }
.bv-cbox .bv-zin.bv-clip { width: min(calc(100cqw - var(--mmr)), calc(100cqh * var(--ar))); height: min(100cqh, calc((100cqw - var(--mmr)) / var(--ar))); }
.bv-cbox .bv-mm.l, .bv-cbox .bv-mm.r { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; transition: opacity .15s; }
.bv-cbox .bv-mm.l { right: calc(50% + min(calc(100cqw - var(--mmr)), calc(100cqh * var(--ar))) / 2 + 10px); text-align: right; }
.bv-cbox .bv-mm.r { left: calc(50% + min(calc(100cqw - var(--mmr)), calc(100cqh * var(--ar))) / 2 + 10px); text-align: left; }
.bv-zc.zoomed .bv-mm { opacity: 0; }
.bv-mm { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.bv-mm b { font-size: 17px; color: #fff; letter-spacing: .5px; font-weight: 700; }
.bv-cbox { background: #0d0d0d; }
.bv-zin.bv-clip { overflow: hidden; outline: 2px solid #39c6ff; outline-offset: -2px; }
.bv-zin img.bv-crop { position: absolute; max-width: none; height: auto; object-fit: fill; }
.bv-inner { position: absolute; border: 2px dashed #ffd54a; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }
.bv-inner em, .bv-outer { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; letter-spacing: 1.2px;
  background: rgba(0,0,0,.7); padding: 1px 7px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.bv-inner em { top: 5px; color: #ffd54a; }
.bv-outer { bottom: 5px; color: #7fdcff; }
.bv-cstats { flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
.bv-cstats b { font-size: 18px; color: #fff; letter-spacing: .5px; }
.bv-cos { flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.bv-cos span { font-size: 10px; letter-spacing: 1.2px; padding: 3px 9px; border-radius: 3px; background: #262626; border: 1px solid #3a3a3a; color: #bbb; }
.bv-cos span b { color: #fff; font-size: 12.5px; margin-left: 3px; }
.bv-cos span.bl { background: #3a1615; border-color: var(--accent); color: #F2D9D9; }
/* 3 CORNERS: a square block of four tiles, the readings + sheet beside it */
.bv-cwrap { flex: 1 1 auto; min-height: 0; container-type: size; display: flex; gap: 8px; }
.bv-cgrid { flex: 0 0 auto; width: min(100cqh, calc(100cqw - 214px)); height: min(100cqh, calc(100cqw - 214px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.bv-cside { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.bv-cside .bv-reads { grid-template-columns: minmax(0, 1fr); }
.bv-clab { position: absolute; left: 6px; bottom: 6px; display: flex; flex-direction: column; font-style: normal; font-size: 10px; letter-spacing: 1px;
  background: rgba(8,8,8,.75); color: #9fd89f; padding: 3px 8px; border-radius: 3px; pointer-events: none; }
.bv-clab b { color: #eee; }
.bv-reads { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bv-reads span { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 7px; font-size: 11.5px; color: #eee;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-reads span b { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.bv-reads span i { font-style: normal; font-size: 9px; color: #9fd89f; }
/* the INSPECTION sheet of the section, per side */
.bv-ded { flex: 0 0 auto; width: 100%; border-collapse: collapse; font-size: 11px; }
.bv-ded th { text-align: left; font-size: 10px; letter-spacing: 1.5px; color: #F2F2F2; font-weight: 600; padding: 3px 6px; border-bottom: 1px solid #3a3a3a; }
.bv-ded td { padding: 2px 6px; color: #8a8a8a; border-bottom: 1px solid #222; }
.bv-ded tr.hit td { color: #ffd9d7; }
.bv-ded .n { text-align: right; font-variant-numeric: tabular-nums; }
/* 4 EDGES */
.bv-strips { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bv-strip { position: relative; min-height: 0; display: flex; }
.bv-strip > .bv-zc { flex: 1 1 auto; }
.bv-chip { position: absolute; left: 6px; top: 6px; z-index: 5; font-style: normal; font-size: 9px; letter-spacing: 1.5px;
  background: rgba(0,0,0,.72); color: #fff; padding: 1px 8px; border-radius: 3px; pointer-events: none; }
/* 5 SURFACE: the defect map + the list */
.bv-surf { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(200px, 1fr); gap: 8px; }
.bv-dcol { min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; touch-action: pan-y; }
.bv-dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bv-dlist li { display: flex; gap: 9px; align-items: center; padding: 4px 6px 4px 4px; background: #141414; border: 1px solid #2a2a2a; border-radius: 4px; cursor: pointer; }
.bv-dlist li:hover { border-color: #555; }
.bv-dlist li > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: 11px; color: #ccc; }
.bv-dlist li > div b { font-size: 9.5px; letter-spacing: 1.2px; color: #eee; font-weight: 600; }
.bv-dlist li > div span { flex: 1 1 100%; font-size: 10.5px; color: var(--muted); }
.bv-dlist em { font-style: normal; font-size: 9px; letter-spacing: 1.2px; padding: 1px 6px; border-radius: 3px; }
.bv-dlist em.major { background: #DC4F4C; color: #fff; }
.bv-dlist em.minor { background: #FFEEB7; color: #3a2a00; }
.bv-dlist em.micro { background: #444; color: #ddd; }
.bv-def { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #888; background: #0d0d0d; cursor: zoom-in; }
.bv-def img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.bv-def.major { border-color: #DC4F4C; }
.bv-def.minor { border-color: #FFD54A; }
.bv-def.micro { border-color: #9a9a9a; }
.bv-def.noimg { cursor: default; }
.bv-def i { position: absolute; right: -4px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: #111; border: 1px solid #666;
  color: #fff; font-style: normal; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.bv-nodef { font-size: 11px; letter-spacing: 1.5px; color: #777; text-align: center; padding: 22px 8px; border: 1px dashed #3a3a3a; border-radius: 5px; }
.bv-mk { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bv-mk.major { background: #DC4F4C; }
.bv-mk.minor { background: #c9960f; }
.bv-mk.micro { background: #666; }
.bv-mk.hot { outline: 3px solid #39FF14; outline-offset: 1px; }
/* the landing card */
.bv-landing { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; overflow-y: auto; }
.bv-lcard { max-width: 660px; text-align: center; }
.bv-lmark { font-size: 56px; letter-spacing: 9px; color: #f4e7c0; line-height: 1; }
.bv-lmark b { color: #fff; font-weight: 800; }
.bv-lsub { font-size: 12px; letter-spacing: 7px; color: #c9a83c; margin-top: 8px; }
.bv-lcard p { margin: 24px 0 20px; font-size: 14px; line-height: 1.75; color: #cfcfcf; }
.bv-lcard p b { color: #fff; letter-spacing: 1px; }
.bv-lsteps { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 10.5px; letter-spacing: 1.5px; color: #bbb; }
.bv-lsteps i { font-style: normal; display: inline-flex; width: 19px; height: 19px; margin-right: 7px; border-radius: 50%; background: #c9a83c; color: #231c0b;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.bv-recent { margin-top: 28px; }
.bv-recent > b { font-size: 9.5px; letter-spacing: 2px; color: var(--muted); font-weight: 600; }
.bv-recent > div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 9px; }
.bv-rchip { background: #1b1b1b; border: 1px solid #3a3a3a; color: #bbb; border-radius: 4px; padding: 5px 11px; font-size: 11px; cursor: pointer; }
.bv-rchip:hover { border-color: #c9a83c; color: #fff; }
.bv-rchip b { color: #fff; margin-right: 7px; letter-spacing: 1px; }
.bv-miss b { font-size: 16px; color: #fff; letter-spacing: .6px; }
.bv-miss p { font-size: 13px; color: #bbb; line-height: 1.7; margin-top: 10px; }
.bv-spin { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid #333; border-top-color: #c9a83c; animation: bv-spin .8s linear infinite; }
/* the QR scanner + the defect lightbox */
.bv-scanner, .bv-lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.84); }
.bv-scanner[hidden], .bv-lightbox[hidden] { display: none; }
.bv-scanwin { position: relative; width: min(92vw, 520px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bv-scanwin video { width: 100%; border-radius: 8px; background: #000; display: block; }
.bv-scanframe { position: absolute; top: 8%; left: 50%; width: 56%; aspect-ratio: 1; transform: translateX(-50%); border: 3px solid #c9a83c; border-radius: 14px; pointer-events: none; }
.bv-scanhint { font-size: 12.5px; letter-spacing: 1px; color: #eee; text-align: center; }
.bv-lbwin { width: min(92vw, 920px); height: min(86vh, 920px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bv-lbcell { width: 100%; flex: 1 1 auto; }
/* phones: one side at a time (the FRONT / BACK switch), swipe for sections */
@media (max-width: 760px) {
  #view-vault.active { padding: 6px 8px 8px; gap: 6px; }
  .bv-bar { padding: 6px 8px; gap: 8px; }
  .bv-brand { font-size: 15px; }
  .bv-brand span { display: none; }
  .bv-find { margin-left: 0; flex: 1 1 100%; }
  .bv-f { flex: 1 1 auto; }
  .bv-f input { width: 100%; }
  .bv-jobbar { margin-left: 0; }
  /* the hero in two rows: the card, then VERIFIED · grade · BLACKSCORE · link */
  .bv-hero { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  .bv-thumb { width: 34px; height: 47px; }
  .bv-idcol { flex: 1 1 calc(100% - 44px); }
  .bv-name { font-size: 15px; }
  .bv-native { display: none; }
  .bv-ver { flex: 1 1 auto; align-items: flex-start; gap: 2px; }
  .bv-ver b { font-size: 12px; }
  .bv-ver i { display: none; }
  .bv-gradebox { padding-left: 0; border-left: 0; gap: 5px; }
  .bv-slabimg { height: 36px; }
  .bv-gradebox b { font-size: 20px; }
  .bv-gradebox i { font-size: 7.5px; letter-spacing: 1px; }
  .bv-scorebox { padding: 3px 8px; }
  .bv-scorebox b { font-size: 17px; }
  .bv-scorebox i { display: none; }
  .bv-acts { flex-direction: row; }
  .bv-acts [data-act="a4"] { display: none; }
  .bv-acts .bv-btn { padding: 4px 7px; font-size: 9px; }
  .bv-acts .lg { display: none; }
  /* the summary card fits the phone without scrolling */
  .bv-sumtop { gap: 10px; }
  .bv-popgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .bv-popgrid b { font-size: 15px; }
  .bv-popgrid i { font-size: 6.5px; letter-spacing: .6px; }
  .bv-ptable td { padding: 3px 5px; }
  .bv-fine { display: none; }
  .bv-arrow { display: none; }
  .bv-tab { font-size: 10px; letter-spacing: 1px; padding: 6px 3px; }
  .bv-tab i { display: none; }
  .bv-sideseg { display: flex; flex: 0 0 auto; gap: 2px; }
  .bv-sideseg button { background: #1b1b1b; border: 1px solid #333; color: #999; font-size: 9.5px; letter-spacing: 1px; padding: 6px 7px; border-radius: 4px; cursor: pointer; }
  .bv-sideseg button.on { background: #3a1615; border-color: var(--accent); color: #fff; }
  .bv-cols2, .bv-cols3 { grid-template-columns: minmax(0, 1fr); }
  .bv-stage[data-side="front"] .bv-side.back, .bv-stage[data-side="back"] .bv-side.front { display: none; }
  .bv-cols3 > .bv-side { display: none !important; }   /* SUMMARY on a phone = the grade breakdown; the pictures are one swipe on */
  .bv-slabbig { height: 84px; }
  .bv-sumg b { font-size: 32px; }
  .bv-surf { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
  .bv-cwrap { flex-direction: column; }
  .bv-cgrid { align-self: center; width: min(100cqw, calc(100cqh - 150px)); height: min(100cqw, calc(100cqh - 150px)); }
  .bv-cside .bv-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-cent { --mmr: 96px; }
  .bv-mm b { font-size: 14px; }
  .bv-lmark { font-size: 38px; letter-spacing: 6px; }
}

/* ============ BLACKBOARD (view-board) ============ */
#view-board.active { display: block; padding: 8px 14px 10px; overflow: hidden; }
#view-board, #view-board button, #view-board input, #view-board select { font-family: var(--rep-font); }
.bb-bar { margin-bottom: 8px; background: linear-gradient(180deg, #3d3d3d, #232323 60%, #1a1a1a); border-color: #8a8a8a; }
.bb-bar .ord-f { border-color: rgba(255,255,255,.18); }
.bb-bar .ord-f i { color: #d9d9d9; }
.bb-bar .ord-f:focus-within { border-color: #ffb3ae; }
.bb-bar .bb-counts { color: #d9d9d9; }
.bb-filters { flex: 1 1 640px; flex-wrap: wrap; row-gap: 6px; }
.bb-filters select { max-width: 150px; cursor: pointer; }
.bb-tabs { display: none; }
.bb-grid { --sd: 27px; display: grid; gap: 10px; min-height: 0;
  grid-template-columns: var(--sd) minmax(0, 1fr) var(--sd) minmax(0, 1.08fr) var(--sd) minmax(0, 1.12fr); }
.bb-grid > * { min-height: 0; min-width: 0; }
#view-board .sec-div {
  background: linear-gradient(180deg, #7e2c28, #3a1615 55%, #2b1210); border: 1px solid var(--accent); border-radius: 6px; box-shadow: none; align-items: flex-end; }
#view-board .sec-div::before { display: none; }
#view-board .sec-div::after { content: attr(data-sec); font-family: Bahnschrift, 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
  font-weight: 400; font-stretch: semi-condensed; font-size: 14.5px; letter-spacing: .5em; color: #E8E8E8; background: transparent; text-shadow: none; padding: 14px 0; }
#view-board .sec-div.gold { background: linear-gradient(180deg, #6b5a26, #3a2f12 55%, #2a220c); border-color: #c9a83c; }
#view-board .sec-div.blue { background: linear-gradient(180deg, #2a5f9e, #14304f 55%, #0f2238); border-color: #3b82f6; }
.bb-col { display: flex; flex-direction: column; min-height: 0; background: #141414; border: 1px solid var(--line); border-radius: 6px; }
.bb-colhead { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 6px; border-bottom: 1px solid #2a2a2a; }
.bb-colhead b { font-weight: 600; font-stretch: semi-condensed; font-size: 13.5px; letter-spacing: 2px; color: #F2F2F2; }
.bb-colhead span { margin-left: auto; font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.bb-colbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 10px; }
.bb-empty { font-size: 11px; letter-spacing: .8px; color: var(--muted-2); text-align: center; padding: 26px 14px; border: 1px dashed #444; border-radius: 6px; line-height: 1.7; }
.bb-empty b { display: block; color: #ddd; font-size: 13px; letter-spacing: 1px; margin-bottom: 4px; }
/* the directory: a group per card name · year · language, its exact printings under it */
.bb-all { width: 100%; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; padding: 8px 11px;
  background: #1b1b1b; border: 1px solid #333; border-radius: 5px; color: #ddd; cursor: pointer; }
.bb-all b { font-size: 11.5px; letter-spacing: 2px; font-weight: 600; }
.bb-all span { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.bb-all:hover, .bb-grphead:hover, .bb-card:hover { background: #222; }
.bb-all.on, .bb-grp.on > .bb-grphead, .bb-card.on { outline: 2px solid var(--accent); outline-offset: -2px; background: #221716; }
.bb-grp { margin-bottom: 8px; background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 6px; overflow: hidden; }
.bb-grphead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: none; border: none; color: inherit; cursor: pointer; text-align: left; }
.bb-thumb { flex: 0 0 auto; width: 36px; height: 50px; border-radius: 3px; overflow: hidden; background: #0d0d0d; border: 1px solid #333;
  display: flex; align-items: center; justify-content: center; color: #555; }
.bb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-thumb i { font-style: normal; }
.bb-thumb.big { width: 96px; height: 134px; border-radius: 5px; }
.bb-thumb.row { width: 26px; height: 36px; }
.bb-gname { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bb-gname b { font-size: 13.5px; font-weight: 600; letter-spacing: .4px; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-gname i { font-style: normal; font-size: 11px; color: #bdbdbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-gname em { font-style: normal; font-size: 9.5px; letter-spacing: 1.2px; color: var(--muted); }
.bb-gstat { flex: 0 0 auto; min-width: 40px; display: flex; flex-direction: column; align-items: center; }
.bb-gstat b { font-size: 17px; line-height: 1.1; color: #fff; }
.bb-gstat i { font-style: normal; font-size: 8px; letter-spacing: 1.2px; color: var(--muted); }
.bb-gstat.top b { color: #ff8a87; }
.bb-cards { display: grid; gap: 1px; background: #262626; border-top: 1px solid #2a2a2a; }
.bb-card { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 56px; background: #161616; border: none; color: inherit; cursor: pointer; text-align: left; }
.bb-cmeta { flex: 1 1 auto; min-width: 0; font-size: 11px; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cstat { flex: 0 0 auto; font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.bb-cstat b { margin-left: 2px; font-size: 12px; color: #fff; }
.bb-cstat.top b { color: #ff8a87; }
/* the population report */
.bb-phero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.bb-phero.all { flex-direction: column; align-items: flex-start; gap: 5px; }
.bb-bigmark { font-size: 32px; letter-spacing: 7px; color: #cfcfcf; line-height: 1; }
.bb-bigmark b { color: #fff; font-weight: 800; }
.bb-pname { font-size: 20px; font-weight: 700; letter-spacing: .5px; color: #fff; text-transform: uppercase; }
.bb-pnative { font-size: 13px; color: #bdbdbd; }
.bb-pmeta { font-size: 11px; color: var(--muted); letter-spacing: .6px; margin-top: 3px; }
.bb-pmeta b { color: #eee; font-weight: 600; }
.bb-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.bb-stats div { background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 5px; padding: 8px 4px; text-align: center; }
.bb-stats b { display: block; font-size: 22px; line-height: 1.1; color: #fff; }
.bb-stats i { display: block; margin-top: 3px; font-style: normal; font-size: 8px; letter-spacing: 1.2px; line-height: 1.3; color: var(--muted); }
.bb-stats .gold b { color: #ffd54a; }
.bb-sec { margin: 6px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #333; font-size: 10px; letter-spacing: 2.4px; color: #F2F2F2; }
.bb-dist { display: grid; gap: 5px; margin-bottom: 14px; }
.bb-dbar { display: grid; grid-template-columns: 34px minmax(60px, 96px) minmax(0, 1fr) 30px 38px; align-items: center; gap: 8px; font-size: 11px; }
.bb-dbar .g { font-size: 14px; font-weight: 700; color: #fff; text-align: right; }
.bb-dbar .nm { font-size: 9px; letter-spacing: 1px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-dbar .track { height: 12px; background: #111; border: 1px solid #2a2a2a; border-radius: 2px; overflow: hidden; }
.bb-dbar .track i { display: block; height: 100%; background: linear-gradient(90deg, #7e2c28, #DC4F4C); }
.bb-dbar > b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.bb-dbar > em { font-style: normal; text-align: right; font-size: 10px; color: var(--muted); }
.bb-dbar.zero { opacity: .42; }
.bb-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bb-pills div { background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 5px; padding: 6px; text-align: center; }
.bb-pills i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: 1.3px; color: var(--muted); }
.bb-pills b { font-size: 19px; color: #fff; }
/* the leaderboard: BLACKSCORE rank, gold · silver · bronze on top */
.bb-row { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 5px; padding: 7px 10px;
  background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 5px; color: inherit; cursor: pointer; text-align: left; }
.bb-row:hover { border-color: #555; background: #202020; }
.bb-rank { flex: 0 0 38px; font-size: 16px; color: #bbb; font-variant-numeric: tabular-nums; }
.bb-row.gold { border-color: #a8862a; background: linear-gradient(90deg, #2e2410, #1b1b1b 62%); }
.bb-row.gold .bb-rank { color: #ffd54a; }
.bb-row.silver .bb-rank { color: #e6e6e6; }
.bb-row.bronze .bb-rank { color: #d38c52; }
.bb-rmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bb-rmain b { font-size: 12.5px; letter-spacing: .5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-rmain i { font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-rp { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, auto); gap: 0 8px; font-size: 8.5px; letter-spacing: .8px; color: var(--muted); }
.bb-rp i { font-style: normal; white-space: nowrap; }
.bb-rp b { color: #ddd; font-size: 10px; }
.bb-rg { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; }
.bb-rg b { font-size: 17px; line-height: 1; color: #fff; }
.bb-rg i { font-style: normal; font-size: 7.5px; letter-spacing: .8px; color: #d9c890; white-space: nowrap; }
.bb-rs { flex: 0 0 62px; text-align: right; white-space: nowrap; }
.bb-rs b { font-size: 18px; color: #ff8a87; }
.bb-rs i { font-style: normal; font-size: 9px; color: var(--muted); }
/* phones / narrow windows: one column at a time */
@media (max-width: 900px) {
  #view-board.active { padding: 6px 8px 8px; }
  .bb-tabs { display: flex; gap: 3px; margin-left: auto; }
  .bb-tabs button { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.2); color: #ccc; border-radius: 4px; padding: 4px 8px;
    font-size: 9.5px; letter-spacing: 1.2px; cursor: pointer; }
  .bb-tabs button.on { background: #3a1615; border-color: var(--accent); color: #fff; }
  .bb-grid { grid-template-columns: minmax(0, 1fr); }
  .bb-grid > .sec-div { display: none; }
  .bb-grid[data-pane="dir"] .bb-col:not([data-pane="dir"]),
  .bb-grid[data-pane="pop"] .bb-col:not([data-pane="pop"]),
  .bb-grid[data-pane="lead"] .bb-col:not([data-pane="lead"]) { display: none; }
  .bb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-rp { display: none; }
  .bb-filters { flex-basis: 100%; }
}

/* ============ DASHBOARD: the ORDERS ARCHIVE + the ORDER VIEW (operator plan 2026-09-27) ============ */
#view-home [hidden] { display: none !important; }
.ord-board .ord-arch { display: none; }
.ord-board.archive { grid-template-columns: var(--sd) minmax(0, 1fr); }
.ord-board.archive > :not(.ord-arch) { display: none; }
.ord-board.archive > .sec-div.ord-arch { display: flex; }
.ord-board.archive > .ord-col.ord-arch { display: flex; }
.ord-board.archive .ord-col-body { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); align-items: start; }
#view-home .sec-div.gold { background: linear-gradient(180deg, #6b5a26, #3a2f12 55%, #2a220c); border-color: #c9a83c; }
.ord-archbtn { color: #e8d9a8; }
.ord-archtoggle { background: #2f2610; border-color: #c9a83c; color: #f4e7c0; letter-spacing: 1.2px; }
.ord-archtoggle.on { background: #5e4b1c; color: #fff; }
.ord-status.archived { background: #2f2610; border-color: #6b5a26; color: #e8d9a8; }
/* SUB# cards and relations */
.ord-subtag { flex: 0 0 auto; font-size: 8.5px; letter-spacing: 1.2px; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.12); color: #fff; font-weight: 700; }
.ord-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: 1px; color: #9a9a9a; }
.ord-rellink { background: #111; border: 1px solid #3a3a3a; color: #ddd; border-radius: 3px; padding: 1px 7px; font: inherit; font-size: 10px; letter-spacing: .6px; cursor: pointer; }
.ord-rellink:hover { border-color: #888; color: #fff; }
.ord-rellink.fam-psa, .od-subtag.fam-psa, .od-subrow.fam-psa { border-color: #2f6fb3; color: #8fc4ff; }
.ord-rellink.fam-bgs, .od-subtag.fam-bgs, .od-subrow.fam-bgs { border-color: #a8862a; color: #ffd54a; }
.ord-rellink.fam-ars, .od-subtag.fam-ars, .od-subrow.fam-ars { border-color: #c94a45; color: #ffd9d7; }
.ord-post { font-style: normal; font-size: 9px; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; background: #0c1a2c; color: #cfe4ff; border: 1px solid #2f6fb3; white-space: nowrap; }
/* the ORDER VIEW */
.od-bar { flex-wrap: wrap; row-gap: 6px; gap: 12px; margin-bottom: 8px; }
.od-bar.fam-psa { background: linear-gradient(180deg, #1f4870, #12263d 60%, #0c1a2c); border-color: #2f6fb3; }
.od-bar.fam-bgs { background: linear-gradient(180deg, #6b5a26, #3a2e0c 60%, #2a2108); border-color: #a8862a; }
.od-bar.fam-ars { background: linear-gradient(180deg, #9e302d, #7a2622 60%, #4a1512); border-color: #c94a45; }
.od-back { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.3); color: #fff; letter-spacing: 1.2px; }
.od-id { font-size: 18px; letter-spacing: 1.5px; color: #fff; font-weight: 600; }
.od-meta { font-size: 11px; letter-spacing: 1px; color: #E3BDBB; }
.od-bar.fam-psa .od-meta { color: #cfe4ff; }
.od-bar.fam-bgs .od-meta { color: #f4e7c0; }
.od-counts { font-size: 10.5px; letter-spacing: 1.3px; color: #F2D5D3; text-transform: uppercase; }
.od-acts { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.od-acts .btn { padding: 4px 9px; font-size: 9.5px; letter-spacing: 1px; border-radius: 4px; }
.od-edit { background: #16324f; border-color: #2f6fb3; color: #cfe4ff; }
.od-grid { --sd: 27px; display: grid; gap: 10px; min-height: 0; grid-template-columns: var(--sd) minmax(0, 1fr) var(--sd) minmax(300px, 380px); }
.od-grid > * { min-height: 0; min-width: 0; }
.od-col { display: flex; flex-direction: column; min-height: 0; background: #141414; border: 1px solid var(--line); border-radius: 6px; }
.od-colhead { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 6px; border-bottom: 1px solid #2a2a2a; }
.od-colhead b { font-weight: 600; font-stretch: semi-condensed; font-size: 13.5px; letter-spacing: 2px; color: #F2F2F2; }
.od-colhead span { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.od-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 10px; display: grid; gap: 6px; align-content: start; }
.od-job { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 5px; }
.od-job.picked { outline: 2px solid #ffb3ae; outline-offset: -2px; }
.od-pick { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.od-art { flex: 0 0 auto; width: 40px; height: 56px; border-radius: 3px; overflow: hidden; background: #0d0d0d; border: 1px solid #333; display: flex; align-items: center; justify-content: center; color: #555; }
.od-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-art i { font-style: normal; }
.od-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.od-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.od-l1 b { font-size: 12.5px; letter-spacing: .8px; color: #fff; font-weight: 600; }
.od-l2 { font-size: 12px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-l3 { font-size: 10px; color: var(--muted); letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-subtag { background: #0f0f0f; border: 1px solid #3a3a3a; border-radius: 3px; padding: 1px 6px; font: inherit; font-size: 9px; letter-spacing: .8px; cursor: pointer; color: #ddd; }
.od-f { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; }
.od-f i { font-style: normal; font-size: 7.5px; letter-spacing: 1.2px; color: var(--muted); }
.od-f select, .od-f input { background: #111; border: 1px solid #3a3a3a; border-radius: 4px; color: #eee; font-family: var(--rep-font); font-size: 11px; padding: 3px 6px; width: auto; }
.od-f.st select { min-width: 132px; }
.od-f.cert input { width: 118px; }
.od-f.st.complete select { border-color: #2a7a3e; color: #bfe6c5; }
.od-f.st.returned select { border-color: #2f6fb3; color: #cfe4ff; }
.od-f.st.open select { border-color: #6b4a14; color: #f0c060; }
.od-verify { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 1px; color: #8fc4ff; text-decoration: none; }
.od-verify:hover { text-decoration: underline; }
.od-jacts { flex: 0 0 auto; display: flex; gap: 5px; }
.od-jacts .btn { padding: 4px 9px; font-size: 9.5px; letter-spacing: 1px; border-radius: 4px; }
.od-vault { background: #2f2610; border-color: #c9a83c; color: #f4e7c0; }
.od-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.od-card { background: #141414; border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.od-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 2px; color: #F2F2F2; font-weight: 600; }
.od-h b { color: #ffb3ae; letter-spacing: 1px; }
.od-row { display: flex; gap: 6px; align-items: center; }
.od-row > .ord-in, .od-row > select { flex: 1 1 auto; min-width: 0; }
.od-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.od-btns .btn { padding: 4px 9px; font-size: 9.5px; letter-spacing: 1px; border-radius: 4px; }
.od-stbtn.open { border-color: #6b4a14; color: #f0c060; }
.od-stbtn.complete { border-color: #2a7a3e; color: #bfe6c5; }
.od-stbtn.returned { border-color: #2f6fb3; color: #cfe4ff; }
.od-btns .btn:disabled { opacity: .4; cursor: default; }
.od-lbl { font-size: 8.5px; letter-spacing: 1.4px; color: var(--muted); }
.od-note { margin: 0; font-size: 10px; line-height: 1.55; color: #8a8a8a; }
.od-sel { background: #111; border: 1px solid #3a3a3a; border-radius: 4px; color: #eee; font-family: var(--rep-font); font-size: 11px; padding: 4px 6px; }
.od-mksub { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; letter-spacing: 1px; white-space: nowrap; }
.od-mksub:disabled { opacity: .45; }
.od-subrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; text-align: left; background: #0f0f0f; border: 1px solid #3a3a3a; border-radius: 4px; padding: 5px 8px; cursor: pointer; font: inherit; }
.od-subrow b { font-size: 11.5px; letter-spacing: .8px; }
.od-subrow span { grid-column: 1; font-size: 9.5px; color: #9a9a9a; letter-spacing: .5px; }
.od-subrow .ord-status { grid-row: 1 / 3; grid-column: 2; margin: 0; }
@media (max-width: 1365px) {
  .od-grid { grid-template-columns: var(--sd) minmax(0, 1fr) var(--sd) minmax(270px, 320px); }
  .od-job { flex-wrap: wrap; }
}

/* ============ SETTINGS → Access: agent PROFILES (operator plan 2026-09-27) ============ */
.set-inline { display: flex; gap: 6px; margin-top: 4px; }
.set-inline input { flex: 1 1 auto; }
.agent-new { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 6px; }
.agent-head, .agent-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 62px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.agent-head { font-size: 9px; letter-spacing: 1.3px; color: var(--muted); padding: 2px 0 4px; border-bottom: 1px solid #3a3a3a; }
.agent-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.agent-in { padding: 4px 6px; font-size: 11.5px; border-radius: 4px; }
.agent-acts { display: flex; gap: 4px; }
.agent-cfg { font-style: normal; font-size: 8px; letter-spacing: 1px; padding: 1px 4px; border-radius: 3px; background: #2a2a2a; color: #bbb; margin-left: 4px; }

/* ============ SUBMISSION type sizes (operator 2026-09-27, three screenshots) ============
   measured size + the operator's points, scoped to #view-submit (the INSPECT search dialog
   shares the .slabq-* classes and keeps its own sizes) */
/* 1) SEARCH CARD · the Search Results header · Grading Submission: text +2pt, SEARCH +2pt, other buttons +1pt */
#view-submit .sub-searchcard .card-head b, #view-submit .sub-gradecard .card-head b { font-size: calc(14.5px + 2pt); }
#view-submit .sub-gradecard .card-head span { font-size: calc(11px + 2pt); }
#view-submit #sub-hint { font-size: calc(9.5px + 2pt); }
#view-submit .sub-searchcard .slabq-fld i, #view-submit .sub-gradecard .slabq-fld i { font-size: calc(7.5px + 2pt); }
#view-submit .sub-searchcard .slabq-fld input, #view-submit .sub-gradecard .slabq-fld input { font-size: calc(11.5px + 2pt); }
#view-submit .sub-searchcard .slabq-fld select, #view-submit .sub-gradecard .slabq-fld select { font-size: calc(11px + 2pt); }
#view-submit #sub-searchnote { font-size: calc(11.5px + 2pt); }
#view-submit .sub-go { font-size: calc(12px + 2pt) !important; }
#view-submit .sub-modes .jb-tab { font-size: calc(10px + 1pt); }
#view-submit .sub-reshead b { font-size: calc(13.5px + 2pt); }
#view-submit #sub-rescount { font-size: calc(11px + 2pt); }
#view-submit .sub-sortbar, #view-submit .sub-sortnote { font-size: calc(9.5px + 2pt); }
#view-submit .sub-sortbtn { font-size: calc(9.5px + 1pt); }
#view-submit .sub-orderbtns .btn { font-size: calc(10px + 1pt); }
/* 2) Card Preview: +1pt */
#view-submit .sub-prevcard .card-head b { font-size: calc(14.5px + 1pt); }
#view-submit #sub-prev-cap { font-size: calc(11px + 1pt); }
#view-submit .sub-prev-empty { font-size: calc(10.5px + 1pt); }
#view-submit .sub-attrs th { font-size: calc(9.5px + 1pt); }
#view-submit .sub-attrs td { font-size: calc(11px + 1pt); }
#view-submit .sub-attrs td:first-child { font-size: calc(10.5px + 1pt); }
/* 3) result rows: the name line + set / number / year +2pt, grade labels + prices +1pt; ADD TO LIST unchanged */
#view-submit .sub-rows .slabq-rc b { font-size: calc(13px + 2pt); }
#view-submit .sub-rows .slabq-rc b em { font-size: calc(10.5px + 2pt); }
#view-submit .sub-rows .slabq-rc b em.sub-inlist { font-size: calc(9px + 2pt); }
#view-submit .sub-rows .slabq-rc span { font-size: calc(11px + 2pt); }
#view-submit .sub-rows .slabq-rp { font-size: calc(12px + 1pt); }
#view-submit .sub-rows .slabq-rp small { font-size: calc(9px + 1pt); }
#view-submit .sub-rows .slabq-rp .p4 i { font-size: calc(12.5px + 1pt); }
#view-submit .sub-rows .slabq-rp .p4 b { font-size: calc(13.5px + 1pt); }

/* ============ THE CLOUD + the JOBS ARCHIVE (operator 2026-09-27) ============ */
.cloud-chip { cursor: pointer; }
.cloud-chip.on { color: #7fe09a; border-color: #2c5c38; }
.cloud-chip.on i { background: #7fe09a; }
.cloud-chip.busy { color: #f0c060; border-color: #6b4a14; }
.cloud-chip.busy i { background: #f0c060; animation: cloud-blink 1s ease-in-out infinite; }
.cloud-chip.warn { color: #E8B44A; border-color: #6b5320; }
.cloud-chip.warn i { background: #E8B44A; }
.cloud-chip.bad { color: #ff8a87; border-color: var(--accent); }
.cloud-chip.bad i { background: var(--accent); }
.cloud-chip.off { color: var(--muted-2); }
@keyframes cloud-blink { 50% { opacity: .3; } }
.ord-cloudtag { font-style: normal; font-size: 8.5px; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  background: #0c1a2c; color: #8fc4ff; border: 1px solid #2f6fb3; align-self: center; }
.ord-jobstoggle { background: #0c1a2c; border-color: #2f6fb3; color: #cfe4ff; letter-spacing: 1.2px; }
.ord-jobstoggle:hover { background: #16324f; color: #fff; }
/* the archive: a bar + a grid of job cards that scrolls on its own */
.ja-bar { flex-wrap: wrap; row-gap: 6px; gap: 12px; margin-bottom: 8px; background: linear-gradient(180deg, #1f4870, #12263d 60%, #0c1a2c); border-color: #2f6fb3; }
.ja-title { font-size: 16px; letter-spacing: 2.5px; color: #fff; font-weight: 600; white-space: nowrap; }
.ja-filters { flex: 1 1 520px; flex-wrap: wrap; row-gap: 6px; }
.ja-bar .ord-f { border-color: rgba(255,255,255,.2); }
.ja-bar .ord-f i { color: #cfe4ff; }
.ja-bar .ord-bar-counts { color: #cfe4ff; }
.ja-sync { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; letter-spacing: 1.2px; }
.ja-body { overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.ja-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 10px; align-content: start; padding: 2px; }
.ja-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px; background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 6px; min-width: 0; }
.ja-thumb { flex: 0 0 auto; width: 64px; height: 88px; border-radius: 4px; overflow: hidden; background: #0d0d0d; border: 1px solid #333;
  display: flex; align-items: center; justify-content: center; color: #555; }
.ja-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ja-thumb i { font-style: normal; }
.ja-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ja-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ja-l1 b { font-size: 14px; color: #fff; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ja-l2 { font-size: 11.5px; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ja-l3 { font-size: 10.5px; color: var(--muted); letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ja-l3 b { color: #F2F2F2; font-weight: 600; letter-spacing: .8px; }
.ja-pics { display: grid; gap: 4px; margin-top: 4px; }
.ja-pic { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; background: #141414; border: 1px solid #262626; border-radius: 4px; }
.ja-side { flex: 0 0 auto; font-size: 9px; letter-spacing: 1.4px; padding: 1px 6px; border-radius: 3px; font-weight: 700; }
.ja-side.front { background: #404040; color: #fff; }
.ja-side.back { background: var(--accent); color: #fff; }
.ja-pic em { flex: 1 1 auto; min-width: 0; font-style: normal; font-size: 10px; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ja-pic em.cloud { color: #8fc4ff; }
.ja-pic em.local { color: #f0c060; }
.ja-pic em.up { color: #7fe09a; }
.ja-pic em.none { color: #777; }
.ja-pic .btn { padding: 2px 8px; font-size: 9.5px; letter-spacing: 1px; border-radius: 3px; }
.ja-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.ja-acts .btn { padding: 4px 10px; font-size: 9.5px; letter-spacing: 1px; border-radius: 4px; white-space: nowrap; }
.ja-vault { background: #2f2610; border-color: #c9a83c; color: #f4e7c0; }
.ja-up { background: #16324f; border-color: #2f6fb3; color: #cfe4ff; }
/* the picture viewer: full screen, zoomable (the BLACKVAULT zoom cell) */
.ja-viewer { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 18px; }
.ja-viewer[hidden] { display: none; }
.ja-vwin { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.ja-vhead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; color: #eee; }
.ja-vhead b { font-size: 14px; letter-spacing: 1.5px; }
.ja-vhead span { font-size: 12px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ja-vhead .ja-vhint { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: #888; }
.ja-vhead .btn { padding: 4px 12px; font-size: 10px; letter-spacing: 1px; }
.ja-vcell { flex: 1 1 auto; }
@media (max-width: 1365px) {
  .ja-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* ---- POSTGRADE Excel round trip (operator 2026-09-27, js/postgrade.js):
   the import buttons wear the template's amber, the PREVIEW is a modal ---- */
.ord-pgimport, .od-pgimp { background: #2e210b; border-color: #b8860b; color: #FFC000; }
.ord-pgimport:hover, .od-pgimp:hover { background: #3d2c0e; color: #ffd24d; }
.od-pgexp { background: #1d5c2e; border-color: #2a7a3e; color: #dff5e3; }
.od-pgexp:hover { background: #24713a; color: #fff; }
.pg-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--rep-font); }
.pg-box { width: min(1180px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: #161616; border: 1px solid #3a3a3a; border-top: 3px solid #FFC000; border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,.6); overflow: hidden; }
.pg-head { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px 10px; border-bottom: 1px solid #2a2a2a; }
.pg-head b { flex: 0 0 auto; font-size: 17px; letter-spacing: 2.5px; color: #FFC000; font-weight: 700; }
.pg-file { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #9a9a9a; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-x { flex: 0 0 auto; background: none; border: 0; color: #aaa; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pg-x:hover { color: #fff; }
.pg-sum { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #2a2a2a; }
.pg-chip { font-size: 12px; letter-spacing: 1.4px; padding: 4px 10px; border-radius: 4px; border: 1px solid #3a3a3a; color: #ccc; background: #111; }
.pg-chip b { font-size: 14px; margin-left: 4px; color: #fff; }
.pg-chip.new { border-color: #2a7a3e; background: #13301b; color: #bfe6c5; }
.pg-chip.change { border-color: #6b4a14; background: #2e210b; color: #f0c060; }
.pg-chip.skip { border-color: #8a3431; background: #2c1211; color: #ffb3ae; }
.pg-chip.empty { color: #8a8a8a; }
.pg-tablewrap { flex: 1 1 auto; min-height: 120px; overflow: auto; scrollbar-width: thin; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-table th { position: sticky; top: 0; z-index: 1; background: #262626; color: #cfcfcf; font-size: 11px; letter-spacing: 1.5px; text-align: left; padding: 7px 10px; font-weight: 600; border-bottom: 1px solid #3a3a3a; white-space: nowrap; }
.pg-table td { padding: 6px 10px; border-bottom: 1px solid #242424; color: #ddd; vertical-align: top; }
.pg-table .pg-job { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; letter-spacing: .5px; color: #fff; white-space: nowrap; }
.pg-table .pg-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-table .pg-g { font-weight: 700; color: #fff; text-align: center; }
.pg-table .pg-res { min-width: 200px; font-size: 12px; letter-spacing: .6px; }
.pg-table .pg-res i { font-style: normal; color: #9a9a9a; margin-left: 6px; }
.pg-table tr.new .pg-res { color: #7fd99a; }
.pg-table tr.change .pg-res { color: #f0c060; }
.pg-table tr.same .pg-res { color: #9a9a9a; }
.pg-table tr.skip .pg-res { color: #ff9b95; }
.pg-table tr.empty td { color: #6f6f6f; }
.pg-empty { padding: 30px; text-align: center; color: #8a8a8a; font-size: 13px; }
.pg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #2a2a2a; }
.pg-hint { flex: 1 1 auto; font-size: 12px; color: #8a8a8a; line-height: 1.5; }
.pg-foot .btn { font-size: 13px; letter-spacing: 1.2px; padding: 7px 16px; }
.pg-apply:disabled { opacity: .45; cursor: default; }

/* ---- the ORDER VIEW module +2pt (operator 2026-09-27: "make the font on
   the whole module bigger by 2pt") — the DASHBOARD's order / SUB# view
   (#ord-detail): every size is the MEASURED px + 2pt, scoped here so the
   board and the other pages keep theirs ---- */
#ord-detail .od-back, #ord-detail .od-mksub { font-size: calc(13px + 2pt); }
#ord-detail .ord-subtag { font-size: calc(8.5px + 2pt); }
#ord-detail .od-id { font-size: calc(18px + 2pt); }
#ord-detail .od-meta, #ord-detail .od-h, #ord-detail .od-sel { font-size: calc(11px + 2pt); }
#ord-detail .ord-status, #ord-detail .od-verify, #ord-detail .ord-notified, #ord-detail .od-subrow span { font-size: calc(9.5px + 2pt); }
#ord-detail .od-counts, #ord-detail .ord-col-empty { font-size: calc(10.5px + 2pt); }
#ord-detail .od-acts .btn, #ord-detail .od-jacts .btn, #ord-detail .od-btns .btn { font-size: calc(9.5px + 2pt); }
#ord-detail .sec-div::after { font-size: calc(14.5px + 2pt); }
#ord-detail .od-colhead b { font-size: calc(13.5px + 2pt); }
#ord-detail .od-colhead span, #ord-detail .od-l3, #ord-detail .od-note, #ord-detail .ord-notify, #ord-detail .ord-rellink { font-size: calc(10px + 2pt); }
#ord-detail .od-art i { font-size: calc(14px + 2pt); }
#ord-detail .od-l1 b { font-size: calc(12.5px + 2pt); }
#ord-detail .ord-lvl, #ord-detail .od-subtag { font-size: calc(9px + 2pt); }
#ord-detail .od-l2 { font-size: calc(12px + 2pt); }
#ord-detail .od-f i { font-size: calc(7.5px + 2pt); }
#ord-detail .od-f select, #ord-detail .od-f input { font-size: calc(11px + 2pt); }
#ord-detail .ord-cloudtag, #ord-detail .od-lbl { font-size: calc(8.5px + 2pt); }
#ord-detail .ord-in { font-size: calc(11.5px + 2pt); }
#ord-detail .od-subrow b { font-size: calc(11.5px + 2pt); }
/* a job row WRAPS its fields under the card when the list column is narrow
   (1366: a SUB# row — status · grade · cert# · verify · buttons — ran 919 px
   in a 796 px column and the list scrolled sideways, before the +2pt too);
   the card name keeps ≥ 260 px, a wrapped line sits right */
#ord-detail .od-job { flex-wrap: wrap; justify-content: flex-end; min-width: 0; row-gap: 6px; }
#ord-detail .od-main { flex: 1 1 260px; }

/* ---- DASHBOARD bar (operator 2026-09-28): the SELECTION row sits LEFT on
   the bar's second line; ORDERS ARCHIVE · JOBS ARCHIVE · IMPORT POSTGRADE
   keep the right end of that line ---- */
#view-home > .ord-bar .ord-selbar { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
#view-home > .ord-bar .ord-selbar #ord-archive-toggle { margin-left: auto; }
.ord-merge { background: #16324f; border-color: #2f6fb3; color: #cfe4ff; }
.ord-merge:hover:not(:disabled) { background: #1f4870; color: #fff; }

/* ---- ONE module-header size across SUBMISSION and the DASHBOARD
   (operator 2026-09-28: "make all the header font the same size in every
   module") = SEARCH CARD's 14.5px + 2pt for every module title; the
   weight, case and letter-spacing keep each page's own look ---- */
#view-submit .card > .card-head > b,
#view-submit .sub-reshead > b,
#view-home .ord-col > .ord-col-head > b,
#ord-detail .od-col > .od-colhead > b,
#ord-detail .od-card > .od-h,
#jobs-archive .ja-bar > .ja-title { font-size: calc(14.5px + 2pt); }

/* ---- BLACKBOARD · PUBLISHED REPORTS (admin, 2026-09-28): every report of
   the picked card, each removable ---- */
.bb-reps { display: flex; flex-direction: column; gap: 5px; }
.bb-rep { display: flex; align-items: center; gap: 8px; background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 5px; padding: 5px 8px; }
.bb-rep-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bb-rep-open b { font-size: 12.5px; letter-spacing: .6px; color: #fff; }
.bb-rep-open i { font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bb-rep-open:hover b { color: #ffb3ae; }
.bb-rep-del { flex: 0 0 auto; background: #4a1512; border: 1px solid #a13a35; color: #ffd9d7; border-radius: 4px; padding: 4px 10px; font: inherit; font-size: 9.5px; letter-spacing: 1px; cursor: pointer; }
.bb-rep-del:hover { background: #6b1f1c; color: #fff; }

/* ---- BLACKVAULT hero (operator 2026-09-28): the slab picture alone (the
   "10 GEM MINT" text beside it is gone), the BLACKSCORE number larger over
   its one-word label (no "/ 1000"), the card name +4pt and the details
   +2pt with the thumbnail scaled to match ---- */
.bv-name { font-size: calc(20px + 4pt); }
.bv-native { font-size: calc(12px + 2pt); }
.bv-meta { font-size: calc(11.5px + 2pt); }
.bv-thumb { width: 54px; height: 75px; }
.bv-gradebox { padding-left: 16px; }
.bv-scorebox { padding: 6px 16px; min-width: 96px; }
.bv-scorebox b { font-size: 34px; line-height: 1; }
.bv-scorebox i { font-size: 9.5px; letter-spacing: 2px; margin-top: 3px; }
@media (max-width: 760px) {
  .bv-name { font-size: 17px; }
  .bv-meta { font-size: 12.5px; }
  .bv-thumb { width: 38px; height: 53px; }
  .bv-gradebox { padding-left: 0; }
  .bv-scorebox { padding: 3px 8px; min-width: 0; }
  .bv-scorebox b { font-size: 21px; }
  .bv-scorebox i { display: block; font-size: 7px; letter-spacing: 1px; margin-top: 1px; }   /* one word now - it fits */
}

/* ---- BLACKVAULT → BLACKBOARD (operator 2026-09-28): signed-in CUSTOMERS
   only — applyMenu sets body[data-role]; visitors (viewer), staff and the
   job mode (the find form hides) never show it ---- */
#bv-board { display: none; }
body[data-role="customer"] #bv-board { display: inline-block; }
.bv-btn.bv-boardbtn { background: linear-gradient(180deg, #3a3a3a, #232323); border-color: #8a8a8a; color: #F2F2F2; }
.bv-btn.bv-boardbtn:hover { background: linear-gradient(180deg, #4a4a4a, #2c2c2c); color: #fff; border-color: #c8c8c8; }
@media (max-width: 760px) {
  /* a phone: the Job# search keeps its one line (the field shrinks first),
     BLACKBOARD takes its own line under it — customers only */
  body[data-role="customer"] .bv-find { flex-wrap: wrap; row-gap: 6px; }
  body[data-role="customer"] .bv-find .bv-f { flex: 1 1 0; min-width: 0; }
  body[data-role="customer"] #bv-board { flex: 1 1 100%; }
}

/* JOBS ARCHIVE — the RECORD row above FRONT / BACK (2026-10-03: 'how will I know my records are up?') */
.ja-side.rec { background: #262626; color: #cfcfcf; border: 1px solid #3a3a3a; }
.ja-pic em.bad { color: #ff8a80; }
.ja-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* BLACKPORT placeholder (2026-10-03) — the portfolio page is being built */
.port-wrap { padding: 48px 24px; display: flex; justify-content: center; font-family: var(--rep-font); }
.port-soon { max-width: 560px; text-align: center; border: 1px dashed #4a4a4a; border-radius: 12px; padding: 30px 28px; background: #1a1a1a; }
.port-soon b { display: block; font-size: 22px; letter-spacing: 4px; color: #fff; }
.port-soon p { color: #cfcfcf; margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.port-soon p.muted { color: #8a8a8a; font-size: 12.5px; }