/* fe-admin page styles (docs/ARCHITECTURE.md §11): employees, enrollment, review, devices, settings.
   Tokens only: no colour literals. No style attributes: dynamic values arrive as CSS custom properties set from JS. */

/* ---------- shared page primitives ---------- */
.narrow { max-width: 760px; }
.narrow-wide { max-width: 860px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.text-danger { color: var(--color-danger-ink); }
.scroll-y { max-height: 52vh; overflow: auto; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: var(--space-2); }
.list-card { display: flex; flex-direction: column; }
.list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.list-toolbar > .filter-bar, .list-toolbar > .field { flex: 1 1 auto; }
.list-count { margin: 0; font-size: var(--text-sm); }
.list-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.audit-filters .field { min-width: 150px; flex: 0 1 190px; }
.kpi-row { margin-bottom: 0; }
.unknown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.lifecycle { margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-1); }
.warning-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.choice-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); cursor: pointer; min-height: 40px; background: var(--color-surface); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary-ink); font-weight: var(--weight-medium); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.settings-form { max-width: 860px; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.settings-fields > .is-wide { grid-column: 1 / -1; }
.settings-actions, .dset-actions { display: flex; justify-content: flex-end; position: sticky; bottom: 0; padding: var(--space-3) 0; background: var(--color-bg); border-top: 1px solid var(--color-border); z-index: 2; }
.form-status:empty { display: none; }
@media (max-width: 767px) { .settings-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- employees ---------- */
.profile-head { display: flex; flex-direction: row; align-items: center; gap: var(--space-5); padding: var(--space-5); flex-wrap: wrap; }
.profile-id { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.profile-name { font-size: var(--text-xl); margin: 0; }
.profile-sub { margin: 0; color: var(--color-text-muted); }
.profile-actions .kv { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-5); }
.profile-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.profile-panel { min-width: 0; }
.quality-card { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.pose-coverage { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.pose-chip { padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px dashed var(--color-border-strong); color: var(--color-text-subtle); font-size: var(--text-xs); }
.pose-chip.is-on { border-style: solid; border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success-ink); }
.sample-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); }
.sample-tile { min-width: 0; display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.sample-tile img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-3); flex: none; }
.sample-tile.is-excluded { opacity: 0.62; border-style: dashed; }
.sample-meta .progress-wrap { min-width: 0; flex-wrap: wrap; }
.sample-meta { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.unknown-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.import-steps { padding: var(--space-4) var(--space-5); }
.import-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.profile-schedule { align-items: start; }
.consent-notice { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-surface-2); color: var(--color-text); line-height: var(--leading-normal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.consent-form h3 { margin: 0 0 var(--space-3); }
.consent-sign { display: grid; grid-template-columns: auto 1fr auto 160px; gap: var(--space-3); align-items: end; margin-top: var(--space-7); }
.consent-line { border-bottom: 1px solid var(--color-text); height: 1.4em; }

/* ---------- guided enrollment (focus layout) ---------- */
.enroll { min-width: 0; }
.enroll-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 1000px; margin: 0 auto; align-items: start; }
.enroll-intro-wide { grid-column: 1 / -1; }
.enroll-start { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.enroll-tips { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.enroll-problem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6); max-width: 520px; margin: 0 auto; color: var(--color-text); }
.enroll-problem-title { font-size: var(--text-xl); margin: 0; }
.enroll-problem-text { margin: 0; color: var(--color-text-muted); }
.enroll-frame .enroll-problem { position: absolute; inset: 0; justify-content: center; background: var(--color-surface); }
.enroll-camera { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.enroll-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* D22 Face ID-style stage: the ink well, a vignette outside the oval, 60 thin ticks, a pose cursor and a target dot.
   --ring-done is the success green lifted for contrast on ink. */
.enroll-frame {
  --enroll-ratio: 16 / 9;
  --ring-done: color-mix(in srgb, var(--color-success) 72%, var(--color-ink-strong));
  --ring-ink: var(--color-ink-strong);
  position: relative; width: 100%; aspect-ratio: var(--enroll-ratio); max-height: calc(100vh - 300px); min-height: 280px;
  background: var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
}
.enroll-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: var(--color-ink); }
.enroll-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.enroll-mirror { transform: scaleX(-1); }
.enroll-hud [hidden] { display: none; }
.enroll-vignette { fill: var(--color-ink); fill-opacity: 0.74; }
.enroll-oval { stroke: var(--ring-ink); stroke-opacity: 0.3; stroke-width: 1.5; transition: stroke var(--motion-base), stroke-opacity var(--motion-base), stroke-width var(--motion-base); }
.enroll-oval.is-ready { stroke: var(--ring-done); stroke-opacity: 0.95; stroke-width: 2.5; }
.ring-tick { stroke: var(--ring-ink); stroke-width: 3; stroke-linecap: round; opacity: calc(0.2 + var(--glow, 0) * 0.8); transition: opacity 160ms linear, stroke 320ms var(--ease-out), stroke-width 320ms var(--ease-out); }
.enroll-hud[data-step="front"] .ring-tick, .enroll-hud[data-step="glasses"] .ring-tick:not(.is-done) { opacity: 0.12; }
.ring-tick.is-off { opacity: 0.06; }
.ring-tick.is-active { stroke: var(--ring-done); opacity: 0.85; }
.ring-tick.is-done { stroke: var(--ring-done); stroke-width: 4; opacity: 1; }
.ring-tick.is-pulse { animation: ring-pulse 650ms var(--ease-out); }
@keyframes ring-pulse { 0% { stroke-width: 4; } 35% { stroke-width: 8; } 100% { stroke-width: 4; } }
/* D23 far turns: an arc outside the ticks on each side (the second stage of the L and R sectors) */
.ring-far { stroke: var(--ring-ink); stroke-linecap: round; opacity: calc(0.22 + var(--glow, 0) * 0.6); transition: opacity 160ms linear, stroke 320ms var(--ease-out); }
.enroll-hud[data-step="front"] .ring-far, .enroll-hud[data-step="glasses"] .ring-far:not(.is-done) { opacity: 0.1; }
.ring-far.is-target { stroke-dasharray: 2 10; opacity: calc(0.55 + var(--glow, 0) * 0.45); }
.ring-far.is-active { stroke: var(--ring-done); opacity: 0.85; }
.ring-far.is-done { stroke: var(--ring-done); opacity: 1; stroke-dasharray: none; }
.ring-far.is-pulse { animation: far-pulse 650ms var(--ease-out); }
@keyframes far-pulse { 0% { opacity: 1; } 35% { opacity: 0.45; } 100% { opacity: 1; } }
.enroll-threshold { stroke: var(--ring-ink); stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 8; }
.enroll-target { transition: transform 420ms var(--ease-out); }
.enroll-target-dot { fill: var(--ring-done); }
.enroll-target-halo { fill: var(--ring-done); fill-opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: target-halo 1600ms ease-in-out infinite; }
@keyframes target-halo { 0%, 100% { transform: scale(0.8); fill-opacity: 0.32; } 50% { transform: scale(1.35); fill-opacity: 0.12; } }
.enroll-cursor { transition: transform 150ms linear; }
.enroll-cursor-dot { fill: var(--ring-ink); }
.enroll-cursor-ring { fill: none; stroke: var(--ring-ink); stroke-opacity: 0.5; stroke-width: 2; transition: stroke var(--motion-base), stroke-opacity var(--motion-base); }
.enroll-cursor.is-in .enroll-cursor-ring { stroke: var(--ring-done); stroke-opacity: 1; }
.enroll-arrow path { stroke: var(--ring-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; }
.enroll-arrow .enroll-arrow-2 { opacity: 0.42; }
.enroll-arrow-nudge { animation: arrow-nudge 1300ms ease-in-out infinite; }
@keyframes arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.enroll-gotit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-ink-strong); opacity: 0; pointer-events: none; }
.enroll-gotit-mark { width: 104px; height: 104px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 56px; line-height: 1; font-weight: var(--weight-bold); background: var(--ring-done); color: var(--color-ink-strong); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ring-done) 30%, transparent); }
.enroll-gotit-text { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.enroll-gotit.is-on { animation: got-it 1000ms var(--ease-out) forwards; }
@keyframes got-it { 0% { opacity: 0; transform: scale(0.86); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.02); } }
.enroll-instruction { margin: 0; min-height: 1.3em; text-align: center; font-size: clamp(20px, 1.55vw, 28px); line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--color-text); letter-spacing: -0.01em; transition: color var(--motion-base); }
.enroll-instruction.is-warn { color: var(--color-warning-ink); }
.enroll-instruction.is-good { color: var(--color-success-ink); }
/* the in-frame caption pill and the face box (the D20 recognition check uses them) */
.enroll-caption { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); margin: 0; max-width: 90%; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-medium); text-align: center; border: 1px solid var(--color-ink-3); }
.enroll-caption.is-warn { border-color: var(--color-warning); }
.enroll-caption:empty { display: none; }
.enroll-box { stroke-width: 4; }
.enroll-box.is-ready { stroke: var(--color-success); }
.enroll-box.is-bad { stroke: var(--color-warning); }
.enroll-box.is-danger { stroke: var(--color-danger); }
.enroll-lowcam[hidden], .enroll-numbers[hidden] { display: none; }
.enroll-numbers { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.enroll-numbers dt { color: var(--color-text-muted); }
.enroll-numbers dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.enroll-stage-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-ink-strong); background: var(--color-overlay); }
.enroll-stage-status[hidden] { display: none; }
.enroll-picker { max-width: 360px; }
.enroll-picker .field { margin: 0; }
.enroll-camera-name { margin: 0; font-size: var(--text-sm); }
.enroll-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: sticky; top: calc(var(--topbar-height) + var(--space-3)); }
.enroll-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.enroll-step { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-subtle); }
.enroll-step-no { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.enroll-step-body { display: flex; flex-direction: column; min-width: 0; }
.enroll-step-title { font-weight: var(--weight-medium); }
.enroll-step-sub { font-size: var(--text-sm); }
.enroll-step.is-active { color: var(--color-text); }
.enroll-step.is-active .enroll-step-no { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); }
.enroll-step.is-done .enroll-step-no { border-color: var(--color-success); background: var(--color-success); color: var(--color-primary-contrast); }
.enroll-guidance { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--tone-bg); color: var(--tone-ink); border: 1px solid var(--tone); border-left-width: 4px; min-height: 56px; display: flex; align-items: center; transition: background var(--motion-base), border-color var(--motion-base); }
.enroll-message { margin: 0; font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
.enroll-guidance.is-captured { background: var(--color-success-bg); color: var(--color-success-ink); border-color: var(--color-success); }
.enroll-panel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.enroll-panel-title { font-size: var(--text-md); margin: 0; }
.enroll-progress-text { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.enroll-sectors { display: flex; flex-direction: column; gap: var(--space-3); }
.enroll-sector-head { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.enroll-sector-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-2); }
.enroll-sector { display: flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); transition: background var(--motion-base), color var(--motion-base); }
.enroll-sector-glyph { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); }
.enroll-sector-glyph::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--color-text-muted); transform: rotate(var(--a, 0deg)) translateX(5px); }
.enroll-sector-label { flex: 1 1 auto; min-width: 0; }
.enroll-sector.is-target { background: var(--color-primary-bg); color: var(--color-primary-ink); font-weight: var(--weight-medium); }
.enroll-sector.is-target .enroll-sector-glyph { border-color: var(--color-primary); }
.enroll-sector.is-active { background: var(--color-success-bg); }
.enroll-sector.is-done { color: var(--color-text); }
.enroll-sector.is-done .enroll-sector-glyph { border-color: var(--color-success); background: var(--color-success); color: var(--color-primary-contrast); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--weight-bold); line-height: 1; }
.enroll-sector.is-done .enroll-sector-glyph::after { display: none; }
.enroll-timer { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.enroll-timer[hidden] { display: none; }
.enroll-connection { margin: 0; color: var(--color-warning-ink); font-size: var(--text-sm); }
.enroll-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.enroll-actions .btn[hidden] { display: none; }
.enroll-prefs { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.enroll-hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.enroll-strip-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.enroll-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); min-height: 64px; }
.enroll-strip:empty::before { content: "Nothing captured yet"; color: var(--color-text-subtle); font-size: var(--text-sm); }
.enroll-strip-item { position: relative; flex: none; width: 96px; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.enroll-strip-photo { position: relative; width: 96px; aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid var(--color-success); background: var(--color-ink); overflow: hidden; }
.enroll-strip-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.enroll-strip-pose { text-align: center; font-weight: var(--weight-medium); color: var(--color-text); overflow-wrap: anywhere; }
.enroll-strip-remove { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; min-height: 0; }
.enroll-strip-item.is-arriving { visibility: hidden; }
.enroll-strip-item.is-new .enroll-strip-photo { animation: strip-settle 420ms var(--ease-out); }
@keyframes strip-settle { 0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-success) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.enroll-fly { position: fixed; left: 0; top: 0; width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-ink); box-shadow: var(--shadow-2); pointer-events: none; z-index: var(--z-toast); transform-origin: top left; }
@media (prefers-reduced-motion: reduce) {
  .ring-tick.is-pulse, .ring-far.is-pulse, .enroll-target-halo, .enroll-arrow-nudge, .enroll-strip-item.is-new .enroll-strip-photo { animation: none; }
  .enroll-gotit.is-on { animation: none; opacity: 1; }
  .enroll-oval, .enroll-guidance, .ring-tick, .ring-far, .enroll-cursor, .enroll-target, .enroll-cursor-ring, .enroll-instruction { transition: none; }
}
@media (max-width: 1099px) {
  .enroll-camera { grid-template-columns: minmax(0, 1fr); }
  .enroll-side { position: static; }
  .enroll-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .enroll-frame { min-height: 0; aspect-ratio: 1 / 1; }   /* the HUD slices the same square out of the wide frame */
  .enroll-gotit-mark { width: 72px; height: 72px; font-size: 38px; }
  .enroll-gotit-text { font-size: var(--text-xl); }
}

/* enrollment review and result */
.enroll-pose-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.review-target.is-done .enroll-pose-mark { background: var(--color-success); border-color: var(--color-success); color: var(--color-primary-contrast); }
.enroll-review { display: flex; flex-direction: column; gap: var(--space-5); max-width: 1100px; margin: 0 auto; }
.enroll-review-head h2 { margin: 0 0 var(--space-1); }
.enroll-review-head p { margin: 0; }
.review-samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); }
.review-sample { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.review-photo { position: relative; background: var(--color-ink); }
.review-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.review-remove { position: absolute; top: var(--space-2); right: var(--space-2); }
.review-meta { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.review-warning .badge { white-space: normal; text-align: left; }
.enroll-review-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4); align-items: start; }
.review-targets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.review-target { display: flex; align-items: center; gap: var(--space-3); }
.review-target .num { margin-left: auto; }
.enroll-review-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; position: sticky; bottom: 0; padding: var(--space-3) 0; background: var(--color-bg); }
.review-hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); max-width: 46ch; text-align: right; }
.enroll-result { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); text-align: center; }
.enroll-result .card { text-align: left; }
.enroll-result-ring { display: flex; justify-content: center; }
.enroll-result h2 { margin: 0; }
@media (max-width: 767px) { .enroll-review-foot { grid-template-columns: minmax(0, 1fr); } .review-hint { text-align: left; } }

/* ---------- review queue ---------- */
.review-layout { align-items: start; }
.case-list-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.case-list-card .tabs { padding: 0 var(--space-3); overflow-x: auto; flex: none; }
.case-list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.case-row { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; min-height: 60px; }
.case-row:hover { background: var(--color-surface-2); }
.case-row.is-selected { background: var(--color-primary-bg); border-color: var(--color-primary); }
.case-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); image-rendering: pixelated; background: var(--color-surface-3); flex: none; }
.case-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.case-row-name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-row-sub { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-row-score { color: var(--color-text-muted); font-size: var(--text-sm); }
.case-more { padding: var(--space-3); display: flex; justify-content: center; }
.case-more:empty { display: none; }
.case-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.case-crop-wrap { display: flex; justify-content: center; background: var(--color-surface-3); border-radius: var(--radius-md); padding: var(--space-3); }
.case-crop { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; border-radius: var(--radius-sm); background: var(--color-ink); }
.match-row { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.match-row li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--text-xs); }
.match-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-3); }
.match .match-thumb { width: 56px; height: 56px; }
.matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.match { display: flex; align-items: center; gap: var(--space-3); }
.match .match-thumb { flex: none; }
.match-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.match-score { font-weight: var(--weight-semibold); }
.score-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 140px) auto; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.case-facts { margin: 0; }
.case-actions-card { position: sticky; bottom: var(--space-3); box-shadow: var(--shadow-2); z-index: 2; }
.case-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.review-keys { margin: 0; font-size: var(--text-sm); }
.review-keys:empty { display: none; }
.case-back { display: none; }
@media (max-width: 1023px) { .case-back { display: block; } .review-layout.has-case .case-list-card, .review-layout:not(.has-case) .case-detail { display: none; } .case-list-card { max-height: none; } .case-grid { grid-template-columns: minmax(0, 1fr); } .score-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- devices ---------- */
.device-name { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.device-name-text { display: flex; flex-direction: column; min-width: 0; }
.device-head-dot { display: flex; align-items: center; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral); flex: none; display: inline-block; }
.status-dot.is-online { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); }
.status-dot.is-offline { background: var(--color-danger); }
.status-dot.is-waiting { background: var(--color-warning); }
.spark-slot { display: inline-block; width: 96px; }
.device-wait { padding: var(--space-2); }
.health-charts .card-body { padding-top: var(--space-2); }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.alert-item { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.alert-text { flex: 1 1 240px; }
.trust-card { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.trust-qr { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 180px; text-align: center; font-size: var(--text-sm); }
.trust-qr svg { background: var(--color-surface); padding: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.trust-main { flex: 1 1 280px; min-width: 0; }

/* device settings editor */
.dset { display: flex; flex-direction: column; gap: var(--space-3); }
.dset-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.dset-group > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: var(--weight-semibold); list-style-position: inside; }
.dset-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); padding: var(--space-2) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
.dset-field .field-label { font-family: var(--font-mono); font-size: var(--text-sm); }
.dset-flags { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.dset-warn { margin: var(--space-1) 0 0; color: var(--color-warning-ink); font-size: var(--text-sm); }
.dset-status:empty { display: none; }
@media (max-width: 767px) { .dset-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- shifts ---------- */
.shift-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.shift-swatch { --swatch: var(--color-neutral); width: 12px; height: 12px; border-radius: 3px; background: var(--swatch); flex: none; display: inline-block; }
.day-chips { display: inline-flex; gap: 3px; }
.day-chip { width: 20px; height: 20px; border-radius: 4px; background: var(--color-surface-3); color: var(--color-text-subtle); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.day-chip.is-on { background: var(--color-primary-bg); color: var(--color-primary-ink); font-weight: var(--weight-semibold); }
.weekday-table { border-collapse: collapse; width: 100%; min-width: 440px; }
.weekday-table th, .weekday-table td { padding: var(--space-2); text-align: left; font-weight: var(--weight-normal); border-bottom: 1px solid var(--color-border); }
.weekday-table thead th { font-size: var(--text-sm); color: var(--color-text-muted); }
.shift-form .input[type="time"] { max-width: 140px; }

/* ---------- recognition ---------- */
.grade-bar { display: flex; gap: 2px; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-3); }
.grade-seg { flex: 1 1 0; background: var(--tone); min-width: 4px; }
.grade-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
.grade-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-dot.tone-excellent, .legend-dot.tone-good, .legend-dot.tone-fair, .legend-dot.tone-poor, .legend-dot.tone-pending { background: var(--tone); }
.dist-wrap { overflow-x: auto; }
.dist-chart { width: 100%; max-width: 760px; min-width: 520px; height: auto; font-family: var(--font-sans); }   /* 640-unit viewBox: keeps its 12px labels near 12-14px on wide screens */
.dist-grid { stroke: var(--chart-grid); stroke-width: 1; }
.dist-tick, .dist-label { fill: var(--chart-label); font-size: 12px; }
.dist-label { fill: var(--color-text); }
.dist-range { stroke: var(--tone); stroke-width: 2; }
.dist-band { fill: var(--tone); fill-opacity: 0.28; stroke: var(--tone); stroke-width: 1.5; }
.dist-median { stroke: var(--color-text); stroke-width: 3; }
.dist-threshold { stroke: var(--tone); stroke-width: 2; stroke-dasharray: 6 4; }
.dist-title { font-size: var(--text-md); margin: var(--space-3) 0 0; }
.dist-note { margin: 0; font-size: var(--text-sm); }

/* ---------- setup wizard ---------- */
.setup-card .stepper { margin-bottom: var(--space-5); }
.setup-next { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- recognition check (D20): enrollment step, profile test and the standalone page ---------- */
.check-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--space-5); align-items: start; }
.check-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.check-frame { max-height: calc(100vh - 260px); }
.check-side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.check-verdict { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--tone-bg); color: var(--tone-ink); border: 1px solid var(--tone); border-left-width: 8px; transition: background var(--motion-base), border-color var(--motion-base); }
.check-verdict-top { display: flex; gap: var(--space-4); align-items: flex-start; }
.check-verdict-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--tone-ink); border: 2px solid var(--tone); }
.check-verdict-text { min-width: 0; }
.check-headline { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.check-detail { margin: var(--space-2) 0 0; font-size: var(--text-lg); line-height: var(--leading-normal); }
.check-panel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.check-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.check-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.check-score { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.check-meter-track { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--color-surface-3); overflow: visible; }
.check-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--radius-pill); background: var(--tone, var(--color-neutral)); transition: width var(--motion-base) var(--ease-out); }
.check-meter-tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--color-text); border-radius: 1px; }
.check-meter-tick.is-uncertain { background: var(--color-text-subtle); }
.check-meter-marker { position: absolute; top: -5px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--color-text); transition: left var(--motion-base) var(--ease-out); }
.check-meter-labels { position: relative; height: 18px; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.check-meter-lab { position: absolute; top: 0; white-space: nowrap; }
.check-meter-lab.is-low { transform: translateX(calc(-100% - 6px)); }
.check-meter-lab.is-high { transform: translateX(6px); }
.check-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: var(--text-md); }
.check-facts[hidden] { display: none; }
.check-facts dt { color: var(--color-text-muted); }
.check-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.check-facts dd.tone-warning { color: var(--tone-ink); }
.check-tally { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 6px solid var(--tone); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-2); }
.check-tally-text { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.check-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 12px; }
.check-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tone); }
.check-tally .btn { align-self: flex-start; }
.check-advice { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.check-advice[hidden] { display: none; }
.check-advice-title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.check-advice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.check-advice-item { display: flex; gap: var(--space-3); align-items: flex-start; line-height: var(--leading-normal); }
.check-advice-item svg { flex: none; margin-top: 2px; color: var(--tone-ink); }
.check-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.check-note { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.check-note svg { flex: none; margin-top: 2px; }
.check-page-head { max-width: 72ch; margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.check-start { display: flex; justify-content: center; padding: var(--space-6) 0; }
@media (max-width: 1099px) { .check-layout { grid-template-columns: minmax(0, 1fr); } .check-frame { max-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .check-meter-fill, .check-meter-marker, .check-verdict { transition: none; } }