/* ============================================================
   OSH COMPLIANCE — FRONTEND ASSESSMENT
   Swiss International × Claude Warm Editorial
   Full-width document-grade layout. No shadows, no gradients,
   no border-radius. Hairline separators carry the structure.
   Fonts are registered in Assets.php (Cormorant Garamond /
   Inter / JetBrains Mono) — no stylesheet font import here.
   ============================================================ */

/* ========================================================
   1. DESIGN TOKENS (scoped to .oshc-app — JS/admin theme
      options inject --oshc-* overrides onto the same node)
======================================================== */
.oshc-app {
  /* Palette: Claude Warm Editorial (light) */
  --oshc-purple: #cc785c;              /* legacy name: terracotta accent */
  --oshc-purple-hover: #a9583e;        /* legacy name: accent active */
  /* Text-level accent: --oshc-purple at body size is 3.1:1 on the
     canvas — below AA. Use this darker step for links/labels/markers;
     keep --oshc-purple for fills and graphic accents. */
  --oshc-accent-text: #a9583e;
  --oshc-accent-deep: #8c4630;
  --oshc-bg: #faf9f5;                  /* canvas */
  --oshc-surface: #efe9de;             /* panels, wells */
  --oshc-ink: #181715;                 /* headings, primary text */
  --oshc-body: #3d3d3a;                /* body text */
  --oshc-muted: #6c6a64;               /* secondary text */
  --oshc-hairline: rgba(20, 20, 19, 0.08);
  --oshc-hairline-strong: rgba(20, 20, 19, 0.22);
  --oshc-success: #2f7d32;
  --oshc-warning: #c2710a;
  --oshc-danger: #b3261e;

  /* Type */
  --oshc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --oshc-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --oshc-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Layout: content wraps at min(1360px, 100% - clamp(24px,6vw,96px)) */
  --oshc-max: 1360px;
  --oshc-gutter: max(clamp(12px, 3vw, 48px), calc((100% - var(--oshc-max)) / 2));

  /* Legacy aliases so third-party/admin markup keeps working */
  --oshc-slate: var(--oshc-ink);
  --oshc-text: var(--oshc-body);
  --oshc-border: var(--oshc-hairline-strong);
  --oshc-purple-light: rgba(204, 120, 92, 0.08);

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--oshc-bg);
  color: var(--oshc-body);
  font-family: var(--oshc-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.oshc-app *,
.oshc-app *::before,
.oshc-app *::after {
  box-sizing: border-box;
}

/* ========================================================
   2. UTILITIES
======================================================== */
.screen-reader-text,
.oshc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.oshc-loading {
  padding: 3rem var(--oshc-gutter);
  color: var(--oshc-muted);
  font-family: var(--oshc-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========================================================
   3. LAYOUT — full-width stage, edge-to-edge topbar, wide
      asymmetric grid, slim rail. Legacy two-column markup is
      aliased onto the same grid so both DOM versions render.
======================================================== */
.oshc-stage {
  width: 100%;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* Edge-to-edge bar: hairline spans full bleed, content aligned
   to the shared gutter. */
.oshc-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  width: 100%;
  padding: 0.7rem var(--oshc-gutter);
  border-bottom: 1px solid var(--oshc-hairline);
}

/* Thin progress rule drawn along the topbar's bottom hairline. */
.oshc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}

.oshc-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oshc-accent-text);
  transform: scaleX(var(--oshc-progress, 0));
  transform-origin: left center;
  transition: transform 0.35s linear;
}

@media (prefers-reduced-motion: reduce) {
  .oshc-progress i {
    transition: none;
  }
}

.oshc-topbar .oshc-eyebrow {
  margin: 0;
}

.oshc-topbar-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--oshc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oshc-muted);
  font-variant-numeric: tabular-nums;
}

.oshc-score-chip {
  font-family: var(--oshc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--oshc-ink);
}

/* Main grid: content column + 320px side rail. */
.oshc-grid,
.oshc-two-col-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--oshc-gutter) 0;
  align-items: start;
}

.oshc-col-content {
  min-width: 0;
  width: 100%;
}

.oshc-rail,
.oshc-col-gauge {
  min-width: 0;
  border-left: 1px solid var(--oshc-hairline);
  padding-left: 1.5rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--oshc-muted);
}

/* Rail interior: editorial meta blocks separated by hairlines. */
.oshc-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.oshc-rail-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.oshc-rail-block + .oshc-rail-block {
  padding-top: 1.25rem;
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-rail-label {
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oshc-muted);
}

.oshc-rail-value {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--oshc-body);
}

/* Completion rail: the risk score as a document figure. */
.oshc-rail-score-num {
  font-family: var(--oshc-font-mono);
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-ink);
}

.oshc-rail-score-num small {
  font-size: 45%;
  color: var(--oshc-muted);
  letter-spacing: 0;
}

.oshc-rail-score-label {
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Penalty total inside the score block — hairline split keeps it part of
   the same figure group rather than a separate rail block. */
.oshc-rail-penalty {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-rail-penalty-val {
  font-family: var(--oshc-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-danger);
}

/* Topbar right side: progress text + score chip. */
.oshc-topbar-progress {
  font-variant-numeric: tabular-nums;
}

.oshc-topbar-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--oshc-hairline);
  font-variant-numeric: tabular-nums;
}

.oshc-score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.oshc-score-chip-label {
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oshc-score-chip-num {
  font-family: var(--oshc-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Legacy card markup compat: plain full-width sections.
   The card/bezel treatment is intentionally gone. */
.oshc-card,
.oshc-intro-card,
.oshc-question-card,
.oshc-complete,
.oshc-report-card {
  width: 100%;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--oshc-gutter) clamp(3rem, 6vw, 5rem);
}

.oshc-card .oshc-two-col-layout,
.oshc-card .oshc-grid {
  padding: 0;
}

.oshc-section-inner {
  width: 100%;
}

.oshc-completion-section,
.oshc-report-section {
  width: 100%;
}

.oshc-completion-section .oshc-card,
.oshc-completion-section .oshc-stage,
.oshc-report-section .oshc-card {
  padding-inline: var(--oshc-gutter);
}

/* ========================================================
   4. TYPOGRAPHY & TEXT BLOCKS
======================================================== */
.oshc-app h1,
.oshc-app h2,
.oshc-app h3 {
  margin: 0;
  font-family: var(--oshc-font-display);
  font-weight: 600;
  color: var(--oshc-ink);
  line-height: 1.15;
  text-wrap: balance;
}

/* Screen titles (intro / completion / report) get Cormorant. */
#oshc-intro-title,
#oshc-complete-title,
#oshc-report-title {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
  max-width: 22em;
}

/* The question prompt is the workhorse: Inter, generous size. */
#oshc-question-title {
  font-family: var(--oshc-font-body);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--oshc-ink);
  max-width: 34em;
  margin-bottom: 1.6rem;
}

.oshc-app h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin: 2.75rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-app h4 {
  font-family: var(--oshc-font-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--oshc-ink);
  margin: 0;
}

/* Eyebrow: small caps instrument label (topbar + content). */
.oshc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oshc-muted);
}

.oshc-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--oshc-purple);
  flex-shrink: 0;
}

/* Live-instrument blink — slow, square, no glow. */
@media (prefers-reduced-motion: no-preference) {
  .oshc-pulse-dot {
    animation: oshc-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}

@keyframes oshc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.oshc-intro-text {
  max-width: 62ch;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--oshc-body);
  text-wrap: pretty;
}

/* Question description — lives in the rail on the new markup,
   inline under the options on legacy markup. */
.oshc-description {
  max-width: 60ch;
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--oshc-muted);
}

.oshc-rail .oshc-description,
.oshc-col-gauge .oshc-description {
  margin-top: 0;
}

/* Disclaimer: footnote block, hairline frame, muted. */
.oshc-disclaimer-box {
  max-width: 68ch;
  margin: 1.75rem 0 0;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--oshc-hairline);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--oshc-muted);
}

.oshc-error {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--oshc-danger);
}

.oshc-sync-status {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--oshc-warning);
}

.oshc-error:empty,
.oshc-sync-status:empty {
  display: none;
}

.oshc-section-subtitle {
  margin: -0.35rem 0 1.4rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--oshc-muted);
  max-width: 64ch;
}

.oshc-app a {
  color: var(--oshc-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========================================================
   5. ANSWER OPTIONS — full-width hairline-separated rows
      with ≥48px hit areas. Checked = 2px accent left-edge +
      subtle surface tint. No cards, no pills.
======================================================== */
.oshc-options {
  width: 100%;
  margin: 0 0 0.25rem;
}

fieldset.oshc-options,
.oshc-multi-options {
  border: 0;
  margin: 0 0 0.25rem;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.oshc-option,
.oshc-option-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem 0.85rem 1.15rem;
  border-bottom: 1px solid var(--oshc-hairline);
  border-left: 2px solid transparent;
  color: var(--oshc-body);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}

.oshc-option:first-of-type {
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-option:hover {
  background: var(--oshc-surface);
}

.oshc-option.is-checked,
.oshc-option:has(input:checked) {
  background: var(--oshc-surface);
  border-left-color: var(--oshc-purple);
}

.oshc-option input[type="checkbox"],
.oshc-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.oshc-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--oshc-hairline-strong);
  background: transparent;
  color: transparent;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}

.oshc-option.is-checked .oshc-checkbox-box,
.oshc-option:has(input:checked) .oshc-checkbox-box {
  background: var(--oshc-purple);
  border-color: var(--oshc-purple);
  color: #ffffff;
}

/* Single-answer radios share the row component; the round dot echoes the
   square checkbox at the same size and accent. */
.oshc-radio-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--oshc-hairline-strong);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.15s linear;
}

.oshc-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oshc-purple);
  transform: scale(0);
  transition: transform 0.15s linear;
}

.oshc-option.is-checked .oshc-radio-dot,
.oshc-option:has(input:checked) .oshc-radio-dot {
  border-color: var(--oshc-purple);
}

.oshc-option.is-checked .oshc-radio-dot::after,
.oshc-option:has(input:checked) .oshc-radio-dot::after {
  transform: scale(1);
}

.oshc-option-content {
  flex: 1;
  min-width: 0;
}

.oshc-option-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--oshc-ink);
}

.oshc-option.is-checked .oshc-option-label {
  font-weight: 600;
}

/* ========================================================
   7. BUTTONS — square, hairline-aware, caps labels.
      Primary reads --oshc-purple so admin theme options and
      JS theme injection keep working.
======================================================== */
.oshc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  width: 100%;
}

.oshc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}

.oshc-btn-primary {
  padding: 0.9rem 1.85rem;
  /* White caps label needs AA (4.5:1): --oshc-purple only reaches 3.3:1. */
  background-color: var(--oshc-accent-text);
  border-color: var(--oshc-accent-text);
  color: #ffffff;
}

.oshc-btn-primary:hover:not(:disabled) {
  background-color: var(--oshc-accent-deep);
  border-color: var(--oshc-accent-deep);
  color: #ffffff;
}

.oshc-btn-secondary {
  background: transparent;
  border-color: var(--oshc-hairline-strong);
  color: var(--oshc-ink);
}

.oshc-btn-secondary:hover:not(:disabled) {
  border-color: var(--oshc-ink);
  color: var(--oshc-ink);
}

.oshc-btn-icon-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s linear;
}

.oshc-btn-icon-bubble svg {
  display: block;
}

.oshc-btn-primary:hover .oshc-btn-icon-bubble {
  transform: translateX(3px);
}

.oshc-btn:disabled {
  opacity: 0.5;
  filter: saturate(0.35);
}

.oshc-btn--loading {
  pointer-events: none;
  cursor: wait;
}

/* Named CTAs emitted by the JS state machine share the button
   system above; primary actions keep a minimum measure. */
.oshc-start-btn,
.oshc-next,
.oshc-report-btn {
  min-width: 10.5rem;
}

.oshc-back {
  margin-right: 0.25rem;
}

.oshc-restart-btn {
  color: var(--oshc-muted);
}

.oshc-restart-btn:hover:not(:disabled) {
  color: var(--oshc-ink);
}

/* ========================================================
   8. GAUGE DOCK — compact corner instrument (~56–72px).
      Hairline track + scaleY fill driven by --oshc-score,
      mono score, caps risk label tinted by --oshc-risk-color.
      Idle = muted outline only. Complete = accent frame.
======================================================== */
.oshc-gauge-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: var(--oshc-bg, #faf9f5);
  border: 1px solid var(--oshc-hairline-strong, rgba(20, 20, 19, 0.22));
  transition: opacity 0.2s ease, visibility 0.2s;
}

.oshc-gauge-dock:has(.oshc-thermometer--complete) {
  border-color: var(--oshc-purple, #cc785c);
}

/* Hide while the app itself is scrolled out of view (landing page). */
.oshc-gauge-dock.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Completion/report carry the score in the rail — the docked instrument
   would read the same number a second time. On intro the instrument lives
   oversized in the content void (.oshc-hero-gauge) instead. */
.oshc-app:has(.oshc-stage--completion) .oshc-gauge-dock,
.oshc-app:has(.oshc-stage--intro) .oshc-gauge-dock {
  display: none;
}

/* Hero instrument — stands in the right side of the content column,
   bottom-anchored so the scale's baseline and big score sit on the same
   line as the primary CTA. On start it shrinks into the rail dock. */
.oshc-stage--intro .oshc-col-content {
  position: relative;
}

.oshc-stage--intro .oshc-col-content > h2,
.oshc-stage--intro .oshc-intro-text,
.oshc-stage--intro .oshc-actions {
  padding-right: 11.5rem;
}

.oshc-hero-gauge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11.5rem;
  height: 13.5rem;
  display: flex;
}

/* Printed measuring scale: numbered mono ticks on a hairline spine. */
.oshc-instrument-scale {
  position: relative;
  width: 4.25rem;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid var(--oshc-hairline-strong);
}

.oshc-instrument-scale li {
  position: absolute;
  right: 0;
  bottom: calc(var(--p) * 100%);
  transform: translateY(50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--oshc-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--oshc-muted);
}

.oshc-instrument-scale li::after {
  content: '';
  width: 0.8rem;
  height: 1px;
  background: var(--oshc-hairline-strong);
}

/* Accent nub straddling the spine at the current reading (rests at 0). */
.oshc-instrument-marker {
  position: absolute;
  left: 4.25rem;
  bottom: 0;
  width: 0.85rem;
  height: 2px;
  background: var(--oshc-accent-text);
  transform: translateX(-50%);
}

/* The reading: big mono score anchored to the scale's baseline. */
.oshc-instrument-read {
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.1rem;
}

.oshc-instrument-score {
  font-family: var(--oshc-font-mono);
  font-size: 3rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--oshc-ink);
}

.oshc-instrument-unit {
  font-family: var(--oshc-font-mono);
  font-size: 0.75rem;
  color: var(--oshc-muted);
  margin-top: 0.35rem;
}

.oshc-instrument-state {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oshc-muted);
  margin-top: 0.8rem;
}

/* Instrument self-test on load: ticks print in sequence, then the marker
   deflects partway up the scale and settles back — a power-on sweep, run
   once. Reduced-motion users get the finished, static instrument. */
@media (prefers-reduced-motion: no-preference) {
  .oshc-instrument-scale li {
    animation: oshc-tick-in 0.3s ease-out both;
  }
  .oshc-instrument-scale li:nth-child(1) { animation-delay: 0.15s; }
  .oshc-instrument-scale li:nth-child(2) { animation-delay: 0.22s; }
  .oshc-instrument-scale li:nth-child(3) { animation-delay: 0.29s; }
  .oshc-instrument-scale li:nth-child(4) { animation-delay: 0.36s; }
  .oshc-instrument-scale li:nth-child(5) { animation-delay: 0.43s; }
  .oshc-instrument-marker {
    animation:
      oshc-calibrate 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both,
      /* After the self-test settles, the instrument keeps a slow idle
         tick — a small deflection every ~7s, like a sensor at rest. */
      oshc-idle-tick 7s ease-in-out 2s infinite;
  }
  .oshc-instrument-read {
    animation: oshc-read-in 0.35s ease-out 0.5s both;
  }
}

@keyframes oshc-tick-in {
  from { opacity: 0; transform: translateY(50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(50%) translateX(0); }
}

@keyframes oshc-read-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes oshc-calibrate {
  0%   { bottom: 0; }
  42%  { bottom: 58%; }
  100% { bottom: 0; }
}

/* Tiny rest-state deflection — the instrument is still measuring. */
@keyframes oshc-idle-tick {
  0%, 78%, 100% { bottom: 0; }
  84%           { bottom: 7%; }
  90%           { bottom: 4%; }
}

/* Flying ghost — fixed box pinned at the hero rect, then transformed to
   the dock rect. transform-origin stays top-left so translate math holds. */
.oshc-gauge-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  transform-origin: left top;
}

.oshc-gauge-ghost .oshc-hero-gauge {
  width: 100%;
  height: 100%;
}

/* The dock pops in as the ghost fades out. */
@keyframes oshc-dock-in {
  from { opacity: 0; transform: scale(1.12); }
}

.oshc-gauge-dock.is-arriving {
  animation: oshc-dock-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.oshc-thermometer-wrap {
  display: contents;
}

.oshc-thermometer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding-left: 1.35rem; /* room for ticks + spine */
}

/* Spine: a plain hairline, same idiom as the hero instrument scale. */
.oshc-thermometer::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--oshc-hairline-strong);
}

/* Minor ticks printed left of the spine every quarter. */
.oshc-thermometer::after {
  content: '';
  position: absolute;
  left: 0.05rem;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: repeating-linear-gradient(to top,
    var(--oshc-hairline-strong) 0,
    var(--oshc-hairline-strong) 1px,
    transparent 1px,
    transparent 25%);
}

.oshc-thermometer--complete::before {
  background: var(--oshc-purple);
}

/* Fill: a 3px measure centered on the spine, scaleY by --oshc-score. */
.oshc-thermometer-fill {
  position: absolute;
  left: calc(0.55rem - 1px);
  top: 0;
  bottom: 0;
  width: 3px;
  transform: scaleY(var(--oshc-score, 0%));
  transform-origin: center bottom;
  background: var(--oshc-risk-color, var(--oshc-muted));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s linear;
  will-change: transform;
}

/* Reading mark: a real element pinned to the score level on the spine —
   the pointer that says where the measure currently stands. */
.oshc-thermometer-marker {
  position: absolute;
  left: calc(0.55rem - 4px);
  bottom: var(--oshc-score, 0%);
  width: 9px;
  height: 2px;
  background: var(--oshc-risk-color, var(--oshc-muted));
  transform: translateY(50%);
  transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s linear;
}

.oshc-thermometer.is-filling .oshc-thermometer-fill,
.oshc-thermometer.is-filling .oshc-thermometer-marker {
  transition-duration: 0.8s;
}

/* Idle: muted outline only — no spectrum sweep, no animation. */
.oshc-thermometer--idle .oshc-thermometer-fill {
  background: var(--oshc-muted);
}

.oshc-thermometer--idle .oshc-tag-text {
  color: var(--oshc-muted);
}

/* Score block (keeps the legacy .oshc-thermometer-bulb name). */
.oshc-thermometer-bulb {
  order: 1;
  display: flex;
  align-items: center;
}

.oshc-bulb-content {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1;
}

.oshc-bulb-score {
  font-family: var(--oshc-font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-ink);
}

.oshc-bulb-unit {
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--oshc-muted);
}

/* Intro state: tiny play glyph instead of the score. */
.oshc-bulb-play {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--oshc-purple);
}

/* Risk label: caps, letter-spaced, tinted by the risk scale. */
.oshc-thermometer-tag {
  order: 2;
  display: flex;
  align-items: center;
}

.oshc-tag-text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--oshc-risk-text, var(--oshc-risk-color, var(--oshc-muted)));
  white-space: nowrap;
}

/* ========================================================
   9. COMPLETION GATE & CONSENT
======================================================== */
.oshc-gate {
  width: 100%;
  max-width: 44rem;
  margin-top: 2rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--oshc-hairline-strong);
}

.oshc-gate-title {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oshc-ink);
}

.oshc-gate-title span {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--oshc-muted);
}

.oshc-gate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.25rem;
  margin-bottom: 1.1rem;
}

.oshc-gate-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--oshc-ink);
}

.oshc-gate-size-label {
  grid-column: 1 / -1;
}

.oshc-gate-input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--oshc-hairline-strong);
  border-radius: 0;
  background: #fff;
  color: var(--oshc-ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.oshc-gate-input:focus {
  border-color: var(--oshc-ink);
  outline: 2px solid var(--oshc-accent-text);
  outline-offset: 1px;
}

.oshc-gate-input:disabled {
  color: var(--oshc-muted);
  border-color: var(--oshc-hairline);
  background: transparent;
  cursor: default;
}

.oshc-gate-input.is-invalid {
  border-color: var(--oshc-danger);
}

/* Gate selects: native <select> is the hidden form control; the themed
   listbox below replaces the OS popup (unstyled, overflows the frame). */
.oshc-gate select.oshc-gate-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.oshc-gate-size-label {
  position: relative;
}

.oshc-select {
  position: relative;
}

.oshc-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--oshc-hairline-strong);
  border-radius: 0;
  background: #fff;
  color: var(--oshc-ink);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.oshc-select-btn:hover {
  border-color: var(--oshc-muted);
}

.oshc-select-btn:focus-visible {
  border-color: var(--oshc-ink);
  outline: 2px solid var(--oshc-accent-text);
  outline-offset: 1px;
}

.oshc-select-text.is-placeholder {
  color: var(--oshc-muted);
}

.oshc-select-chev {
  flex-shrink: 0;
  color: var(--oshc-muted);
  transition: transform 0.2s ease;
}

.oshc-select-btn[aria-expanded="true"] .oshc-select-chev {
  transform: rotate(180deg);
}

/* Listbox: same width as the control — the reason for the replacement is
   that the OS popup escaped the frame. */
.oshc-select-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--oshc-bg);
  border: 1px solid var(--oshc-hairline-strong);
  box-shadow: 0 8px 24px rgba(24, 23, 21, 0.08);
}

.oshc-select-list li {
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--oshc-body);
  cursor: pointer;
}

.oshc-select-list li + li {
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-select-list li:hover {
  background: var(--oshc-surface);
}

.oshc-select-list li:focus-visible {
  background: var(--oshc-surface);
  outline: 2px solid var(--oshc-ink);
  outline-offset: -2px;
}

/* Selected = same idiom as answer options: accent left edge + surface. */
.oshc-select-list li[aria-selected="true"] {
  background: var(--oshc-surface);
  box-shadow: inset 2px 0 0 var(--oshc-purple);
  color: var(--oshc-ink);
  font-weight: 600;
}

select.oshc-gate-input.is-invalid + .oshc-select .oshc-select-btn {
  border-color: var(--oshc-danger);
}

select.oshc-gate-input:disabled + .oshc-select {
  opacity: 0.5;
  pointer-events: none;
}

/* Unlock zone: business fields beside consent + action, one row at desktop —
   shortens the completion stack and gives the legal text its own column. */
.oshc-unlock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: stretch;
}

/* Completion header spans the full two-box row — title and intro run
   edge-to-edge above the gate+consent pair (intro stage keeps its 62ch
   measure). */
.oshc-stage--completion .oshc-col-content > .oshc-intro-text {
  max-width: none;
}

.oshc-unlock .oshc-gate {
  max-width: none;
  margin-top: 0;
}

.oshc-unlock .oshc-consent {
  max-width: none;
  margin-top: 0;
}

.oshc-unlock-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}

.oshc-unlock-side .oshc-consent {
  flex: 1;
}

.oshc-unlock-side .oshc-actions {
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
}

.oshc-gate-error {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--oshc-danger);
}

.oshc-consent {
  width: 100%;
  max-width: 44rem;
  margin-top: 1.1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--oshc-hairline);
  background: var(--oshc-surface);
}

.oshc-consent.is-error {
  border-color: var(--oshc-danger);
}

.oshc-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.oshc-consent-checkbox,
.oshc-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--oshc-purple);
  cursor: pointer;
}

.oshc-consent-text {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--oshc-muted);
}

.oshc-consent-text strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  color: var(--oshc-ink);
}

.oshc-consent-error {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--oshc-danger);
}

/* ========================================================
   10. REPORT — document feel. Summary band with huge mono
       score, hairline category rows, numbered findings with
       hairline top rules, mono penalty figures.
======================================================== */
.oshc-report-section,
.oshc-report-card {
  counter-reset: oshc-finding;
}

.oshc-report-card {
  padding-top: 0;
}

/* Summary band: ink rule on top, hairline bottom. */
.oshc-report-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  padding: 1.75rem 0 1.9rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--oshc-ink);
  border-bottom: 1px solid var(--oshc-hairline);
}

.oshc-score-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Neutralize legacy inline gradient; the band stays clean. */
  background: transparent !important;
  border: 0;
}

.oshc-score-num {
  font-family: var(--oshc-font-mono);
  font-size: clamp(3.25rem, 6.5vw, 4.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.oshc-score-label {
  margin-top: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oshc-muted);
}

.oshc-summary-info {
  flex: 1;
  min-width: 16rem;
}

.oshc-summary-info strong {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--oshc-font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--oshc-ink);
}

.oshc-summary-info p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--oshc-muted);
}

/* Penalty totals strip inside the summary band. */
.oshc-summary-penalty {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-summary-penalty-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oshc-ink);
}

.oshc-summary-penalty-icon {
  flex-shrink: 0;
  color: var(--oshc-danger);
}

.oshc-summary-penalty-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
}

.oshc-summary-penalty-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.oshc-summary-penalty-item + .oshc-summary-penalty-item {
  border-left: 1px solid var(--oshc-hairline);
  padding-left: 2.25rem;
}

.oshc-penalty-type-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oshc-muted);
}

.oshc-penalty-amount-val {
  font-family: var(--oshc-font-mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-ink);
}

.oshc-penalty--org .oshc-penalty-amount-val {
  font-size: 1.2rem;
  color: var(--oshc-danger);
}

.oshc-penalty--none .oshc-penalty-amount-val {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--oshc-muted);
}

/* Category analysis lives in the rail: compact rows, hairline meter per
   category — the same measurement idiom as the score instrument. */
.oshc-category-list {
  width: 100%;
  margin-top: 0.6rem;
}

.oshc-category-item {
  display: block;
  padding: 0.6rem 0;
}

.oshc-category-item + .oshc-category-item {
  border-top: 1px solid var(--oshc-hairline);
}

.oshc-category-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.oshc-category-name {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--oshc-ink);
}

/* Per-category meter: 3px hairline track, width-based fill (no animation —
   the report renders at final values). */
.oshc-cat-meter {
  display: block;
  height: 3px;
  margin-top: 0.45rem;
  background: var(--oshc-hairline);
}

.oshc-cat-meter i {
  display: block;
  height: 100%;
  width: var(--oshc-cat-score, 0%);
  background: var(--oshc-cat-color, var(--oshc-muted));
}

/* Findings: single column of numbered document rows — each row is a
   horizontal split (content left, penalty column right) so priority order
   reads top-to-bottom and money figures never wrap mid-number. */
.oshc-findings {
  display: block;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--oshc-hairline-strong);
}

/* Risk badge: semantic text color only (inline color from JS),
   mono — no pill background. */
.oshc-category-badge {
  padding: 0;
  background: transparent !important;
  font-family: var(--oshc-font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Findings: numbered document rows, hairline top rule —
   no left accent bar. */
.oshc-finding {
  counter-increment: oshc-finding;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--oshc-hairline-strong);
}

/* Penalty pair lives in its own right-hand column — money values get room
   to sit on one line instead of wrapping mid-number inside a half-width
   card. */
.oshc-finding > .oshc-penalty-grid {
  grid-column: 2;
  /* span must be explicit — `1 / -1` stops at the first implicit row and
     drops later siblings (e.g. recommended action) into this column */
  grid-row: 1 / span 8;
  align-self: start;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.15rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--oshc-hairline);
}

.oshc-finding-header {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.oshc-finding-header::before {
  content: counter(oshc-finding, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--oshc-font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-muted);
}

.oshc-finding-header h4 {
  flex: 1;
  min-width: 0;
}

/* Priority badge: caps letter-spaced label, semantic color
   text — no pill background. */
.oshc-priority-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oshc-danger);
}

.oshc-priority-badge[data-priority="med"],
.oshc-priority-badge[data-priority="medium"],
.oshc-priority-badge[data-priority="trung-binh"] {
  color: var(--oshc-warning);
}

.oshc-priority-badge[data-priority="low"],
.oshc-priority-badge[data-priority="thap"],
.oshc-priority-badge[data-priority="thấp"] {
  color: var(--oshc-muted);
}

.oshc-finding-desc {
  margin: 0 0 0.7rem;
  max-width: 70ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--oshc-body);
}

.oshc-finding-detail {
  margin: 0.45rem 0;
  max-width: 70ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--oshc-muted);
}

.oshc-finding-detail strong {
  font-weight: 600;
  color: var(--oshc-ink);
}

/* Legal references render in mono (document numbers). */
.oshc-finding-detail a,
.oshc-finding-detail > span {
  font-family: var(--oshc-font-mono);
  font-size: 0.8em;
}

.oshc-finding-detail a {
  color: var(--oshc-accent-text);
  text-underline-offset: 2px;
}

/* Per-finding penalty figures — explicit 2 cols; auto-fit is unsafe here
   (min-content sizing resolves to item-count tracks and overflows narrow
   columns). Collapses to one column under 769px. */
.oshc-penalty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 2rem;
  margin-top: 1rem;
}

.oshc-penalty-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.oshc-penalty-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oshc-muted);
}

.oshc-penalty-val {
  font-family: var(--oshc-font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--oshc-danger);
}

/* ========================================================
   11. FOCUS — visible ink outline on every interactive.
======================================================== */
.oshc-app button:focus-visible,
.oshc-app a:focus-visible,
.oshc-app input:focus-visible,
.oshc-app select:focus-visible,
.oshc-app [tabindex]:focus-visible {
  outline: 2px solid var(--oshc-ink);
  outline-offset: 2px;
}

/* Hidden input focus lands on the row label — a quiet muted edge instead
   of the ink box (radio focus follows selection, so the check already
   marks the spot; checkbox focus still gets a visible cue). */
.oshc-option:focus-within:not(.is-checked):not(:has(input:checked)) {
  outline: 2px solid transparent;
  box-shadow: inset 2px 0 0 var(--oshc-muted);
}

/* Programmatic screen-morph focus target: tabindex="-1" is unreachable by
   keyboard, so a ring can only ever fire on the scripted jump — Chrome
   applies :focus-visible to script focus and shows a stray box on load. */
.oshc-app h1[tabindex="-1"]:focus,
.oshc-app h2[tabindex="-1"]:focus {
  outline: 2px solid transparent;
}

/* ========================================================
   12. MOTION — fade-up for screens, opacity+transform only.
======================================================== */
.oshc-slide-in {
  animation: oshcFadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.oshc-stage {
  animation: oshcFadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes oshcFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oshc-app *,
  .oshc-app *::before,
  .oshc-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .oshc-slide-in,
  .oshc-stage {
    animation: none;
  }

  .oshc-thermometer-fill {
    transition: none;
  }
}

/* ========================================================
   13. RESPONSIVE
======================================================== */
@media (max-width: 860px) {
  .oshc-grid,
  .oshc-two-col-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .oshc-rail,
  .oshc-col-gauge {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--oshc-hairline);
    padding-top: 1.25rem;
  }

  /* Completion payoff: score block reads before the gate form. */
  .oshc-stage--completion .oshc-rail {
    order: -1;
  }

  /* Narrow columns: instrument drops back into flow under the CTA. */
  .oshc-stage--intro .oshc-col-content > h2,
  .oshc-stage--intro .oshc-intro-text,
  .oshc-stage--intro .oshc-actions {
    padding-right: 0;
  }

  .oshc-hero-gauge {
    position: static;
    margin-top: 2rem;
    height: 9rem;
  }
}

@media (max-width: 768px) {
  .oshc-topbar {
    padding-block: 0.6rem;
  }

  #oshc-intro-title,
  #oshc-complete-title,
  #oshc-report-title {
    font-size: 1.9rem;
  }

  .oshc-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .oshc-btn {
    width: 100%;
  }

  .oshc-gate-grid {
    grid-template-columns: 1fr;
  }

  .oshc-unlock {
    grid-template-columns: 1fr;
  }

  .oshc-report-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .oshc-finding {
    grid-template-columns: 1fr;
  }

  .oshc-finding > .oshc-penalty-grid {
    grid-column: auto;
    grid-row: auto;
    margin-top: 1rem;
    padding-left: 0;
    border-left: 0;
  }

  /* Compact dock: ~44px pill, label stays but shrinks. */
  .oshc-gauge-dock {
    right: 0.85rem;
    bottom: 0.85rem;
    padding: 0.4rem 0.65rem;
  }

  .oshc-thermometer {
    min-height: 40px;
    padding-left: 11px;
  }

  .oshc-tag-text {
    font-size: 0.7rem;
  }
}

/* ========================================================
   14. PRINT — document output: dock/actions hidden,
       black-on-white report, findings unbreakable.
======================================================== */
@media print {
  .oshc-app {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  .oshc-app *,
  .oshc-app *::before,
  .oshc-app *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  .oshc-gauge-dock,
  .oshc-topbar,
  .oshc-actions,
  .oshc-gate,
  .oshc-consent,
  .oshc-options,
  .oshc-sync-status,
  .oshc-error {
    display: none !important;
  }

  .oshc-stage,
  .oshc-card,
  .oshc-report-card,
  .oshc-completion-section {
    padding: 0;
  }

  .oshc-grid,
  .oshc-two-col-layout {
    display: block;
    padding: 0;
  }

  .oshc-rail,
  .oshc-col-gauge {
    border: 0;
    padding: 0;
  }

  .oshc-app h1,
  .oshc-app h2,
  .oshc-app h3,
  .oshc-app h4,
  .oshc-app p {
    orphans: 3;
    widows: 3;
  }

  .oshc-finding,
  .oshc-category-item,
  .oshc-penalty-item,
  .oshc-summary-penalty-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .oshc-findings {
    display: block;
    border-bottom-color: #999999;
  }

  .oshc-finding,
  .oshc-category-item {
    border-color: #999999;
  }

  .oshc-cat-meter {
    background: #dddddd !important;
  }

  .oshc-cat-meter i {
    background: #666666 !important;
  }

  .oshc-report-summary {
    border-top-color: #000000;
    border-bottom-color: #999999;
  }

  .oshc-app a {
    text-decoration: underline;
  }
}