/* ==========================================================================
   DynaFile — The 3-Minute HR Audit Readiness Test (V1.2)
   Scoped stylesheet. Every selector is namespaced under .arat-root or an
   .arat-* class so nothing leaks into the theme and the theme's own
   resets/typography still apply outside this component.

   BRAND TOKENS
   Identical to the Employee Record Health Check (erhc.css), which derives
   them from the DynaFile ROI Calculator. The two assessments are companion
   tools and must stay visually identical; if a token changes in one,
   change it in the other.
   ========================================================================== */

.arat-root {
  /* Core palette */
  --arat-navy: #232D62;
  --arat-navy-80: #4A5490;
  --arat-navy-60: #6D76AC;
  --arat-navy-40: #A9AECC;
  --arat-cyan: #09AFE5;
  --arat-crimson: #A41C36;
  /* Subtle darkened hover shades for the primary CTAs. The CTA text stays
     white in every state, so the hover cue is a background shift only. */
  --arat-navy-hover: #1A2350;
  --arat-crimson-hover: #86162C;
  --arat-gold: #FCB900;

  /* Neutrals */
  --arat-bg: #f8f9fa;
  --arat-surface: #ffffff;
  --arat-border: #e9ecef;
  --arat-text: #333333;
  --arat-muted: #666666;

  /* Radii — 10px for controls, 15px for cards (matches ROI calculator) */
  --arat-radius-sm: 6px;
  --arat-radius-md: 10px;
  --arat-radius-lg: 15px;

  /* Elevation */
  --arat-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --arat-shadow-navy: 0 4px 20px rgba(35, 45, 98, 0.2);
  --arat-shadow-lift: 0 4px 15px rgba(9, 175, 229, 0.3);

  /* Type */
  --arat-font: 'neue-haas-unica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Motion */
  --arat-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --arat-speed: 0.3s;

  /* Layout */
  --arat-max: 800px;

  font-family: var(--arat-font);
  color: var(--arat-text);
  line-height: 1.6;
  max-width: var(--arat-max);
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.arat-root *,
.arat-root *::before,
.arat-root *::after {
  box-sizing: border-box;
}

/* Reset only inside the component, and only what we need. */
/* :where() keeps this reset at zero specificity, so the utility classes
   below can set their own margins without needing !important. */
.arat-root :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.arat-root :where(fieldset) {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.arat-root :where(ul, ol) {
  list-style: none;
}

/* --------------------------------------------------------------------------
   SHARED PRIMITIVES
   -------------------------------------------------------------------------- */

.arat-card {
  background: var(--arat-surface);
  border-radius: var(--arat-radius-lg);
  box-shadow: var(--arat-shadow);
  padding: 40px;
}

.arat-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
  margin-bottom: 10px;
}

.arat-eyebrow--muted {
  color: var(--arat-muted);
}

.arat-h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--arat-navy);
  letter-spacing: -0.01em;
}

.arat-h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--arat-navy);
}

.arat-h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--arat-navy);
}

.arat-lede {
  font-size: 1.1rem;
  color: var(--arat-muted);
  line-height: 1.6;
}

.arat-body {
  font-size: 1rem;
  color: var(--arat-text);
  line-height: 1.65;
}

.arat-small {
  font-size: 0.85rem;
  color: var(--arat-muted);
}

/* Buttons ---------------------------------------------------------------- */

.arat-btn {
  display: inline-block;
  padding: 18px 28px;
  border: 2px solid transparent;
  border-radius: var(--arat-radius-md);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--arat-speed) var(--arat-ease),
              color var(--arat-speed) var(--arat-ease),
              border-color var(--arat-speed) var(--arat-ease),
              transform var(--arat-speed) var(--arat-ease),
              box-shadow var(--arat-speed) var(--arat-ease);
}

.arat-btn--primary {
  background: var(--arat-navy);
  color: #fff;
  border-color: var(--arat-navy);
}

.arat-btn--primary:hover,
.arat-btn--primary:focus-visible {
  background: var(--arat-cyan);
  border-color: var(--arat-cyan);
  color: #000;
  transform: translateY(-2px);
  box-shadow: var(--arat-shadow-lift);
}

.arat-btn--demo {
  background: var(--arat-crimson);
  color: #fff;
  border-color: var(--arat-crimson);
}

.arat-btn--demo:hover,
.arat-btn--demo:focus-visible {
  background: var(--arat-gold);
  border-color: var(--arat-gold);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(252, 185, 0, 0.3);
}

.arat-btn--ghost {
  background: transparent;
  color: var(--arat-navy);
  border-color: var(--arat-border);
}

.arat-btn--ghost:hover,
.arat-btn--ghost:focus-visible {
  background: var(--arat-bg);
  border-color: var(--arat-navy-40);
}

.arat-btn--block {
  display: block;
  width: 100%;
}

.arat-btn[disabled],
.arat-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.arat-btn[disabled]:hover,
.arat-btn[aria-disabled='true']:hover {
  background: var(--arat-navy);
  border-color: var(--arat-navy);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.arat-btn--ghost[disabled]:hover {
  background: transparent;
  border-color: var(--arat-border);
  color: var(--arat-navy);
}

/* Focus visibility — deliberately high contrast, never removed. */
.arat-root :focus-visible {
  outline: 3px solid var(--arat-cyan);
  outline-offset: 3px;
}

/* These receive focus programmatically so screen readers land in the right
   place on screen change. They aren't interactive, so no visible ring. */
.arat-root .arat-question__prompt:focus,
.arat-root .arat-question__prompt:focus-visible,
.arat-root .arat-score__title:focus,
.arat-root .arat-score__title:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   SCREENS
   -------------------------------------------------------------------------- */

.arat-screen[hidden] {
  display: none;
}

/* Intro ------------------------------------------------------------------- */

.arat-intro {
  text-align: left;
}

.arat-intro__title {
  margin-bottom: 18px;
}

.arat-intro__lede {
  margin-bottom: 28px;
  max-width: 46em;
}

.arat-intro__cta {
  margin-bottom: 16px;
}

.arat-intro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.9rem;
  color: var(--arat-muted);
}

.arat-intro__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.arat-intro__meta-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arat-navy-40);
  flex: 0 0 auto;
}

/* "No form required" is a real value proposition — given weight, not shouted. */
.arat-intro__meta-item--flag {
  font-weight: 700;
  color: var(--arat-navy);
}

.arat-intro__meta-item--flag::before {
  background: var(--arat-cyan);
  width: 8px;
  height: 8px;
}

.arat-intro__categories {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--arat-border);
}

.arat-intro__categories-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-muted);
  margin-bottom: 14px;
}

.arat-intro__category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.arat-intro__category {
  display: inline-block;
  padding: 8px 14px;
  background: var(--arat-bg);
  border: 1px solid var(--arat-border);
  border-radius: var(--arat-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--arat-navy);
}

/* Progress ---------------------------------------------------------------- */

.arat-progress {
  margin-bottom: 26px;
}

.arat-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.arat-progress__category {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
}

.arat-progress__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--arat-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.arat-progress__track {
  height: 6px;
  border-radius: 3px;
  background: var(--arat-border);
  overflow: hidden;
}

.arat-progress__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--arat-navy);
  transition: width 0.4s var(--arat-ease);
}

/* Answer + source cards --------------------------------------------------- */

.arat-question__prompt {
  display: block;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--arat-navy);
  margin-bottom: 22px;
}

.arat-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arat-option {
  position: relative;
  display: block;
}

/* The native control stays in the accessibility tree and keeps keyboard
   semantics (arrow keys move between radios); it is visually replaced by the
   card. Never display:none — that would remove it from tab order. */
.arat-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.arat-option__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: var(--arat-bg);
  border: 2px solid var(--arat-border);
  border-radius: var(--arat-radius-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--arat-text);
  transition: background var(--arat-speed) var(--arat-ease),
              border-color var(--arat-speed) var(--arat-ease),
              color var(--arat-speed) var(--arat-ease);
}

.arat-option__label:hover {
  background: #fff;
  border-color: var(--arat-navy-40);
}

.arat-option__marker {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--arat-navy-40);
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: border-color var(--arat-speed) var(--arat-ease),
              background var(--arat-speed) var(--arat-ease);
}

.arat-option__marker::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.18s var(--arat-ease);
}

.arat-option__input:checked + .arat-option__label {
  background: var(--arat-navy);
  border-color: var(--arat-navy);
  color: #fff;
}

.arat-option__input:checked + .arat-option__label .arat-option__marker {
  border-color: #fff;
  background: var(--arat-navy);
}

.arat-option__input:checked + .arat-option__label .arat-option__marker::after {
  transform: scale(1);
}

.arat-option__input:focus-visible + .arat-option__label {
  outline: 3px solid var(--arat-cyan);
  outline-offset: 3px;
}

/* Legend needs to behave like a block heading; browsers style it oddly by
   default. This keeps the visible prompt inside the fieldset semantics. */
.arat-question__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  float: left; /* Safari/Firefox legend width fix */
}

.arat-question__legend + * {
  clear: both;
}

.arat-option__text {
  flex: 1 1 auto;
  min-width: 0;
}

.arat-priorities__list {
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.arat-priority__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Nav --------------------------------------------------------------------- */

.arat-nav {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--arat-border);
}

.arat-nav__back {
  flex: 0 0 auto;
  min-width: 120px;
}

.arat-nav__next {
  flex: 1 1 auto;
}

/* Transition interstitial ------------------------------------------------- */

.arat-transition {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--arat-bg);
  border-left: 4px solid var(--arat-cyan);
  border-radius: 0 var(--arat-radius-sm) var(--arat-radius-sm) 0;
  font-size: 0.98rem;
  color: var(--arat-text);
}

.arat-transition[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   RESULTS
   -------------------------------------------------------------------------- */

.arat-results > * + * {
  margin-top: 28px;
}

.arat-section {
  background: var(--arat-surface);
  border-radius: var(--arat-radius-lg);
  box-shadow: var(--arat-shadow);
  padding: 34px;
}

.arat-section__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-muted);
  margin-bottom: 18px;
}

/* Score hero -------------------------------------------------------------- */

.arat-score {
  background: var(--arat-navy);
  color: #fff;
  border-radius: var(--arat-radius-lg);
  box-shadow: var(--arat-shadow-navy);
  padding: 38px 34px;
}

.arat-score__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
  margin-bottom: 24px;
}

.arat-score__main {
  display: flex;
  align-items: center;
  gap: 32px;
}

.arat-score__dial {
  flex: 0 0 auto;
  position: relative;
  width: 156px;
  height: 156px;
}

.arat-score__dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.arat-score__dial-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 12;
}

.arat-score__dial-value {
  fill: none;
  stroke: var(--arat-cyan);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--arat-ease);
}

.arat-score__readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.arat-score__number {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.arat-score__denominator {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 6px;
}

.arat-score__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.arat-score__tier {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #fff;
}

.arat-score__description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.arat-score__opportunity {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.arat-score__opportunity strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
  margin-bottom: 6px;
}

/* Diagnosis --------------------------------------------------------------- */

.arat-diagnosis__text {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--arat-text);
}

/* Strongest / opportunity pair -------------------------------------------- */

.arat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.arat-pair--single {
  grid-template-columns: 1fr;
}

.arat-pair__card {
  display: flex;
  flex-direction: column;
}

.arat-pair__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--arat-border);
}

.arat-pair__category {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--arat-navy);
  line-height: 1.2;
}

.arat-pair__score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--arat-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Category bars ----------------------------------------------------------- */

.arat-bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.arat-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.arat-bar__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--arat-navy);
}

.arat-bar__figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.arat-bar__status {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arat-muted);
}

.arat-bar__value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--arat-navy);
  font-variant-numeric: tabular-nums;
}

.arat-bar__track {
  height: 12px;
  border-radius: 6px;
  background: var(--arat-border);
  overflow: hidden;
}

.arat-bar__fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--arat-navy);
  transition: width 0.9s var(--arat-ease);
}

/* Monochrome navy ramp: intensity communicates degree without implying
   pass/fail or legal compliance. No red, no green. */
.arat-bar__fill--t4 { background: var(--arat-navy); }
.arat-bar__fill--t3 { background: var(--arat-navy-80); }
.arat-bar__fill--t2 { background: var(--arat-navy-60); }
.arat-bar__fill--t1 { background: var(--arat-navy-40); }

/* Priorities -------------------------------------------------------------- */

.arat-priorities__intro {
  margin-bottom: 24px;
  max-width: 48em;
}

.arat-priority {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--arat-border);
}

.arat-priority:last-child {
  padding-bottom: 0;
}

.arat-priority__index {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--arat-navy);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.arat-priority__step {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
  margin-bottom: 5px;
}

.arat-priority__category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arat-muted);
  margin-bottom: 6px;
}

.arat-priority__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--arat-navy);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Bridge ------------------------------------------------------------------ */

.arat-bridge {
  background: var(--arat-navy);
  color: #fff;
  border-radius: var(--arat-radius-lg);
  box-shadow: var(--arat-shadow-navy);
  padding: 38px 34px;
  text-align: center;
}

.arat-bridge__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--arat-cyan);
  margin-bottom: 22px;
}

.arat-bridge__arrow {
  display: block;
  margin: 0 auto 18px;
  width: 26px;
  height: 34px;
}

.arat-bridge__arrow path {
  stroke: var(--arat-cyan);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arat-bridge__headline {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.arat-bridge__copy {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  max-width: 40em;
  margin: 0 auto;
}

/* Conversion -------------------------------------------------------------- */

.arat-convert {
  text-align: center;
}

.arat-convert__title {
  margin-bottom: 14px;
}

.arat-convert__copy {
  max-width: 40em;
  margin: 0 auto 26px;
}

.arat-convert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Footer ------------------------------------------------------------------ */

.arat-footer {
  text-align: center;
  padding-top: 8px;
}

.arat-footer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.arat-footer__btn {
  padding: 12px 20px;
  font-size: 0.9rem;
  background: transparent;
  border: 2px solid var(--arat-border);
  border-radius: var(--arat-radius-md);
  font-family: inherit;
  font-weight: 700;
  color: var(--arat-navy);
  cursor: pointer;
  transition: background var(--arat-speed) var(--arat-ease),
              border-color var(--arat-speed) var(--arat-ease);
}

.arat-footer__btn:hover {
  background: #fff;
  border-color: var(--arat-navy-40);
}

.arat-disclaimer {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--arat-muted);
  max-width: 46em;
  margin: 0 auto;
}

/* Screen-reader only ------------------------------------------------------ */

.arat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal animation -------------------------------------------------------- */

.arat-reveal {
  opacity: 0;
  transform: translateY(24px);
}

.arat-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--arat-ease), transform 0.6s var(--arat-ease);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .arat-root {
    padding: 24px 15px;
  }

  .arat-card,
  .arat-section {
    padding: 24px 20px;
  }

  .arat-score,
  .arat-bridge {
    padding: 28px 20px;
  }

  .arat-h1 { font-size: 1.7rem; }
  .arat-h2 { font-size: 1.3rem; }
  .arat-question__prompt { font-size: 1.15rem; }

  .arat-pair {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Score dial stacks above the tier copy on narrow screens. */
  .arat-score__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .arat-score__dial {
    width: 132px;
    height: 132px;
    align-self: center;
  }

  .arat-score__tier { font-size: 1.35rem; }
  .arat-bridge__headline { font-size: 1.35rem; }

  .arat-convert__actions .arat-btn,
  .arat-nav__next,
  .arat-nav__back {
    width: 100%;
  }

  .arat-convert__actions {
    flex-direction: column;
  }

  /* Answer cards stay comfortably tappable. */
  .arat-option__label {
    padding: 15px 16px;
    min-height: 60px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .arat-nav {
    flex-wrap: wrap;
  }

  .arat-nav__back,
  .arat-nav__next {
    flex: 1 1 100%;
  }

  /* Back sits below Next so the primary action is thumb-adjacent. */
  .arat-nav__back {
    order: 2;
  }

  .arat-nav__next {
    order: 1;
  }

  .arat-score__number { font-size: 2.6rem; }
  .arat-priority { gap: 14px; }
  .arat-priority__index { width: 36px; height: 36px; font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

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

  .arat-reveal {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   AUDIT-READINESS ADDITIONS
   The only styles in this file that do not exist in erhc.css. Everything
   above is the companion tool's stylesheet with the prefix changed and the
   source-picker and convergence-funnel blocks removed, so the two
   assessments stay visually identical.
   -------------------------------------------------------------------------- */

/* The Health Check fans a row of system chips into the convergence arrow.
   This tool has no source picker, so the same slot carries one sentence
   instead. Sized between .arat-bridge__copy and the headline so the arrow
   still reads as pointing from the condition to the outcome. */
.arat-bridge__lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 44em;
  margin: 0 auto 20px;
}

/* Intro meta list gets a third item ("About 3 minutes"), so it is allowed to
   wrap to two lines on the narrowest phones without the dots colliding. */
@media (max-width: 400px) {
  .arat-intro__meta {
    gap: 6px 14px;
    font-size: 0.86rem;
  }
}

/* This tool's category names are materially longer than the Health Check's
   ("Retention & Record Management" against "Record Completeness"), so the
   three places a category name sits beside a right-aligned figure are
   stacked on narrow screens rather than left to wrap mid-name. */
@media (max-width: 560px) {
  .arat-progress__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .arat-progress__category {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }

  .arat-bar__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 10px;
  }

  .arat-pair__head {
    flex-wrap: wrap;
  }

  .arat-pair__category {
    font-size: 1.15rem;
  }

  .arat-priority__category {
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   THEME INTERACTION-STATE GUARDS  (production fix)

   The component inherits the theme's typography by design, but dynafile.com
   also styles bare `a` and `button` elements. Those rules carry more
   specificity than a single component class, which broke two things live:

     1. Theme `a:visited` / `a:focus` recolored the two CTA anchors after a
        visitor clicked through and came back, leaving dark text on the navy
        and crimson fills.
     2. Theme `button:hover` recolored the Retake and Print labels to match
        their own hover background, so the labels vanished. `color` was not
        in the component's transition list, so it snapped instantly.

   Every selector below is scoped under .arat-root. No global `a:visited`,
   `a:hover` or `button:hover` rules are introduced. `!important` is applied
   only to color, background-color, border-color and text-decoration on these
   four controls, because the theme may itself use !important and this needs
   to hold on the first deploy.

   Scope note: these rules target the CTA ANCHORS and the two footer buttons
   only. The in-assessment navy buttons (Check My Employee Records, Next) keep
   their approved cyan hover, which was never affected.
   ========================================================================== */

/* --- Primary CTA: navy fill, white type, every state --------------------- */
.arat-root a.arat-btn--primary,
.arat-root a.arat-btn--primary:link,
.arat-root a.arat-btn--primary:visited,
.arat-root a.arat-btn--primary:hover,
.arat-root a.arat-btn--primary:focus,
.arat-root a.arat-btn--primary:focus-visible,
.arat-root a.arat-btn--primary:active {
  color: #ffffff !important;
  background-color: var(--arat-navy) !important;
  border-color: var(--arat-navy) !important;
  text-decoration: none !important;
  /* No transform, so nothing moves between states. */
  transform: none;
}

.arat-root a.arat-btn--primary:hover,
.arat-root a.arat-btn--primary:focus-visible,
.arat-root a.arat-btn--primary:active {
  background-color: var(--arat-navy-hover) !important;
  border-color: var(--arat-navy-hover) !important;
  box-shadow: 0 4px 15px rgba(35, 45, 98, 0.28);
}

/* --- Demo CTA: crimson fill, white type, every state --------------------- */
.arat-root a.arat-btn--demo,
.arat-root a.arat-btn--demo:link,
.arat-root a.arat-btn--demo:visited,
.arat-root a.arat-btn--demo:hover,
.arat-root a.arat-btn--demo:focus,
.arat-root a.arat-btn--demo:focus-visible,
.arat-root a.arat-btn--demo:active {
  color: #ffffff !important;
  background-color: var(--arat-crimson) !important;
  border-color: var(--arat-crimson) !important;
  text-decoration: none !important;
  transform: none;
}

.arat-root a.arat-btn--demo:hover,
.arat-root a.arat-btn--demo:focus-visible,
.arat-root a.arat-btn--demo:active {
  background-color: var(--arat-crimson-hover) !important;
  border-color: var(--arat-crimson-hover) !important;
  box-shadow: 0 4px 15px rgba(164, 28, 54, 0.28);
}

/* --- Utility buttons: light fill / navy type, inverting on hover --------- */
.arat-root .arat-footer__btn,
.arat-root .arat-footer__btn:link,
.arat-root .arat-footer__btn:visited {
  color: var(--arat-navy) !important;
  background-color: transparent !important;
  border-color: var(--arat-border) !important;
  text-decoration: none !important;
}

.arat-root .arat-footer__btn:hover,
.arat-root .arat-footer__btn:focus,
.arat-root .arat-footer__btn:focus-visible,
.arat-root .arat-footer__btn:active {
  color: #ffffff !important;
  background-color: var(--arat-navy) !important;
  border-color: var(--arat-navy) !important;
}

/* --- Back button: same latent defect, pinned to its existing appearance ---
   `.arat-btn--ghost:hover` set background and border but not color, which is
   the identical omission that broke Retake and Print. The theme's
   `button:hover` colour would win here too. This pins the colour to the navy
   it already uses, so there is no visual change, only protection. */
.arat-root .arat-btn--ghost,
.arat-root .arat-btn--ghost:hover,
.arat-root .arat-btn--ghost:focus,
.arat-root .arat-btn--ghost:focus-visible,
.arat-root .arat-btn--ghost:active {
  color: var(--arat-navy) !important;
}

/* Include color so the inversion eases rather than snapping. */
.arat-root .arat-footer__btn {
  transition: background-color var(--arat-speed) var(--arat-ease),
              border-color var(--arat-speed) var(--arat-ease),
              color var(--arat-speed) var(--arat-ease);
}

/* --------------------------------------------------------------------------
   PRINT
   The report is not a PDF product, but an HR leader who wants to circulate it
   internally will reach for Cmd-P. This makes that output presentable.
   -------------------------------------------------------------------------- */

@media print {
  .arat-root {
    max-width: none;
    padding: 0;
    color: #000;
  }

  .arat-print-hide,
  .arat-footer__actions,
  .arat-convert__actions {
    display: none !important;
  }

  .arat-section,
  .arat-card {
    box-shadow: none;
    border: 1px solid #ccc;
    padding: 18px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .arat-score,
  .arat-bridge {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .arat-results > * + * {
    margin-top: 16px;
  }

  /* Two cards side by side are cramped on paper. */
  .arat-pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .arat-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .arat-bar__fill,
  .arat-score__dial-value {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
	.dynafile-footer,
	#breadcrumbs,
	.hero.gb-block-container,
	.custom-box.in-header,
	.js .nav-primary,
	.menu-toggle,
	#hubspot-messages-iframe-container {
		display: none !important;
	}
	details ::details-content {
    content-visibility: visible !important;
    height: auto !important;
    display: block !important;
  }

  /* 2. Optional: Force older browsers to reveal contents if they don't support the pseudo-element */
  details > :not(summary) {
    display: block !important;
  }
}