/* COBH — BHAT pages (Screen 3 programme page, Screen 4 assessment).
   Loaded after cobh.css and reuses its tokens. */

.btn--green { background: var(--green-ink); color: #fff; }
.btn--green:hover { background: #166534; }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--on-dark:hover { background: rgba(255,255,255,.1); }
.btn[aria-disabled="true"] { background: #94A3B8; color: #fff; border-color: transparent; cursor: not-allowed; }
.status-pill--test { background: #FFF7ED; color: #9A3412; border-color: #FDBA74; }
.muted { color: var(--text-2-strong); font-size: .9375rem; }
.muted a { font-weight: 700; }

/* ---------- Screen 3: programme page ---------- */
.breadcrumbs { padding-top: var(--s4); font-size: .8125rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: '\203A'; margin-right: 6px; color: var(--text-2); }
.breadcrumbs a { color: var(--text-2-strong); }
.breadcrumbs [aria-current] { color: var(--navy); font-weight: 700; }
.bp-hero { padding-block: var(--s5) var(--s6); }
.bp-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6); align-items: center; }
.bp-status { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s3); }
.bp-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -.02em; }
.bp-sub { font-family: var(--font-head); font-weight: 600; color: var(--green-ink); font-size: 1.125rem; margin-top: 6px; }
.bp-lead { margin-top: var(--s4); font-size: 1.0625rem; max-width: 52ch; }
.bp-hero__img { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #E5F6EA; aspect-ratio: 8 / 5; }
.bp-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md); border: 1px solid; font-size: .9375rem; }
.notice > svg.i { font-size: 1.35rem; margin-top: 2px; }
.notice p + p { margin-top: 6px; }
.notice--warn { background: #FFFBEB; border-color: #FCD34D; color: #78350F; }
.notice--info { background: var(--pale); border-color: #BFD6F6; color: var(--navy); }
.notice--error { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.notice--ok { background: #F0FDF4; border-color: #86EFAC; color: #14532D; }

.subnav { position: sticky; top: var(--header-h); z-index: 30; background: #fff; border-bottom: 1px solid var(--border); margin-top: var(--s6); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.subnav a { display: block; padding: 14px 12px; white-space: nowrap; font-family: var(--font-head); font-weight: 500; font-size: .875rem; color: var(--text); text-decoration: none; }
.subnav a:hover { color: var(--blue); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 64px); }

.bp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.prose h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin-bottom: var(--s3); }
.prose p { max-width: 64ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s3); }
.bp-card { background: #F0FBF3; border: 1px solid #C9EBD3; border-radius: var(--r-lg); padding: var(--s5); }
.bp-card h3 { font-size: 1.0625rem; margin-bottom: var(--s3); }
.bp-card .muted { margin-top: var(--s3); }
.ticks li { position: relative; padding-left: 28px; }
.ticks li + li { margin-top: 8px; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--green-ink); border-bottom: 2.5px solid var(--green-ink); transform: rotate(-45deg); }
.ticks--warn li::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #B45309; transform: none; top: 8px; left: 6px; }

.bp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); counter-reset: s; margin-bottom: var(--s3); }
.bp-steps li { counter-increment: s; padding: var(--s4); background: var(--pale); border-radius: var(--r-md); }
.bp-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; margin-bottom: var(--s3); }
.bp-steps h3 { font-size: .9375rem; }
.bp-steps p { font-size: .8125rem; color: var(--text-2-strong); margin-top: 4px; }

.bp-panel { background: var(--pale); border: 1px solid #D6E6FB; border-radius: var(--r-lg); padding: var(--s6) var(--s5); }
.bp-panel h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin-bottom: var(--s4); }
.bp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.bp-grid3 > div { background: #fff; border-radius: var(--r-md); padding: var(--s4); border: 1px solid #DCE7F5; }
.bp-grid3 h3 { font-size: 1rem; margin-bottom: 6px; }
.bp-grid3 p { font-size: .875rem; color: var(--text-2-strong); }
.bp-cta { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--s6) var(--s5); }
.bp-cta h2 { color: #fff; font-size: 1.5rem; }
.bp-cta p { color: #DCE7F5; margin-top: 4px; }
.bp-cta .hero__ctas { margin-top: 0; }

@media (max-width: 1099px) {
  .bp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bp-hero__grid, .bp-two { grid-template-columns: 1fr; }
  .bp-hero__img { order: -1; }
  .bp-steps { grid-template-columns: 1fr; }
  .bp-cta .btn { width: 100%; }
}

/* Screen 3 hero — full-bleed bone illustration (per approved design, 1 Oct 2026) */
.bp-hero--bleed { position: relative; overflow: hidden; padding-block: var(--s6) var(--s7); background: linear-gradient(90deg, #fff 0%, #F3F8FF 45%, #E6F0FC 100%); }
.bp-bleed { position: absolute; inset: 0 0 0 40%; margin: 0; }
.bp-bleed img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }
.bp-bleed .bp-hero__hand { right: clamp(16px, 3vw, 48px); bottom: auto; top: 50%; transform: translateY(-50%) rotate(-6deg); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.05; }
.bp-bleed .bp-hero__hand span + span { padding-left: 0; }
.bp-bleed .bp-hero__hand span:nth-child(2), .bp-bleed .bp-hero__hand span:nth-child(4) { padding-left: .3em; }
.bp-hero--bleed .bp-hero__grid { position: relative; display: block; }
.bp-hero__copy { max-width: 600px; }
@media (max-width: 767px) {
  .bp-hero--bleed { padding-top: 0; background: #fff; }
  .bp-bleed { position: relative; inset: auto; height: 230px; margin-bottom: var(--s4); }
  .bp-bleed img { -webkit-mask-image: none; mask-image: none; }
}

/* Screen 3 corrections (bone hero, info cards, pathway status, next steps) */
.bp-hero__img--bone { position: relative; aspect-ratio: 3 / 2; background: #0b3e7a; }
.bp-hero__img--bone img { object-position: 60% 50%; }
.bp-hero__hand { position: absolute; right: 16px; bottom: 14px; margin: 0; font-family: var(--font-hand); font-weight: 600; font-size: clamp(1.1rem, .8rem + 1vw, 1.6rem); line-height: 1.1; color: #fff; transform: rotate(-5deg); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bp-hero__hand span { display: block; } .bp-hero__hand span + span { padding-left: 1.2em; }
.bp-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.bp-cards4 li { display: flex; gap: 12px; padding: var(--s4); background: var(--pale); border-radius: var(--r-md); border: 1px solid #DCE7F5; }
.bp-cards4 svg.i { font-size: 1.8rem; color: var(--blue); flex: none; }
.bp-cards4 h2 { font-size: 1rem; margin-bottom: 4px; }
.bp-cards4 p { font-size: .875rem; color: var(--text-2-strong); }
.bp-dl { margin: 0; display: grid; gap: 6px; }
.bp-dl dt { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin-top: 6px; }
.bp-dl dd { margin: 0; font-size: .9375rem; }
.bp-steps li .status-pill { margin-top: var(--s3); white-space: normal; }
.bp-next { display: grid; gap: var(--s3); counter-reset: n; margin-bottom: var(--s4); }
.bp-next li { counter-increment: n; position: relative; padding-left: 48px; }
.bp-next li::before { content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; }
.bp-next h3 { font-size: 1rem; }
.bp-next p { font-size: .9375rem; color: var(--text-2-strong); }
@media (max-width: 1099px) { .bp-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bp-cards4 { grid-template-columns: 1fr; } }

/* ---------- Screen 4: assessment app ---------- */
.ax-body { background: var(--bg); min-height: 100vh; }
.ax-bar { position: sticky; top: 0; z-index: 40; background: var(--navy-logo); color: #fff; }
.ax-bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: var(--s3); max-width: 880px; }
.ax-bar__brand { display: inline-flex; align-items: center; gap: var(--s3); color: #fff; text-decoration: none; }
.ax-bar__brand img { height: 42px; width: auto; }
.ax-bar__brand span { font-family: var(--font-head); font-weight: 600; font-size: .875rem; border-left: 1px solid rgba(255,255,255,.35); padding-left: var(--s3); }
.ax-bar .icon-btn { color: #fff; }
.ax-bar .icon-btn:hover { background: rgba(255,255,255,.12); }
.ax-mode { background: #FFF7ED; color: #7C2D12; border-bottom: 1px solid #FDBA74; font-size: .875rem; }
.ax-mode .wrap { max-width: 880px; padding-block: 8px; display: flex; gap: 8px; align-items: flex-start; }
.ax-mode--preview { background: #FEF2F2; color: #7F1D1D; border-color: #FCA5A5; }

.ax-menu { position: absolute; right: var(--gutter); top: 56px; width: min(320px, calc(100vw - 32px)); background: #fff; color: var(--text); border-radius: var(--r-md); box-shadow: 0 16px 40px rgba(6,45,89,.2); border: 1px solid var(--border); padding: 8px; }
.ax-menu a, .ax-menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font-family: var(--font-head); font-weight: 500; font-size: .9375rem; color: var(--navy); text-decoration: none; cursor: pointer; text-align: left; }
.ax-menu a:hover, .ax-menu button:hover { background: var(--pale); }
.ax-menu .sep { border-top: 1px solid var(--border); margin: 6px 0; }

.ax-main { max-width: 880px; margin-inline: auto; padding: var(--s5) var(--gutter) 120px; }
.ax-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ax-progress { padding: var(--s4) var(--s5) 0; }
.ax-progress__row { display: flex; justify-content: space-between; gap: var(--s3); font-size: .8125rem; color: var(--text-2-strong); font-weight: 700; flex-wrap: wrap; }
.ax-progress__bar { height: 8px; border-radius: 99px; background: #E2E8F0; margin-top: 8px; overflow: hidden; }
.ax-progress__bar span { display: block; height: 100%; background: var(--green-ink); border-radius: 99px; transition: width .25s ease; }
.ax-save { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ax-save--ok { color: var(--green-ink); }
.ax-save--warn { color: #B45309; }
.ax-content { padding: var(--s5); }
.ax-content h1 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); letter-spacing: -.01em; }
.ax-intro { margin-top: var(--s2); color: var(--text-2-strong); max-width: 62ch; }
.ax-proxy { margin-top: var(--s3); font-size: .875rem; background: var(--pale); color: var(--navy); padding: 8px 12px; border-radius: 8px; display: inline-block; }
.ax-fields { display: grid; gap: var(--s5); margin-top: var(--s5); }
.ax-fields fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ax-q { display: grid; gap: var(--s2); }
.ax-label, .ax-q legend { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; padding: 0; }
.ax-hint { font-size: .875rem; color: var(--text-2-strong); }
.ax-pending { font-size: .75rem; color: #9A3412; font-weight: 700; }
.ax-opts { display: grid; gap: 8px; margin-top: 4px; }
.ax-opts--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ax-opts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-height: 50px; border: 1.5px solid #CBD5E1; border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.ax-opt:hover { border-color: var(--sky); }
.ax-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.ax-opt:has(input:checked) { border-color: var(--blue); background: #F3F8FF; }
.ax-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.ax-opt input:focus-visible { box-shadow: none; }
.ax-opt b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--navy); }
.ax-opt small { display: block; font-size: .8125rem; color: var(--text-2-strong); margin-top: 2px; }
.ax-input { display: flex; align-items: stretch; max-width: 360px; }
.ax-input input, .ax-select, .ax-text { width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid #94A3B8; border-radius: var(--r-sm); font: inherit; font-size: 1rem; color: var(--text); background: #fff; }
.ax-input input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ax-input .unit { display: grid; place-items: center; padding: 0 14px; border: 1.5px solid #94A3B8; border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg); color: var(--text-2-strong); font-weight: 700; }
.ax-select { max-width: 420px; }
.ax-text { max-width: 520px; }
.ax-input input:focus, .ax-select:focus, .ax-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,99,213,.25); }
.ax-input input:disabled { background: #F1F5F9; color: #94A3B8; }
.ax-inline-check { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; cursor: pointer; min-height: 40px; }
.ax-inline-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.ax-q.has-error .ax-opt, .ax-q.has-error input:not([type=checkbox]):not([type=radio]), .ax-q.has-error select { border-color: #DC2626; }
.ax-err { display: flex; gap: 6px; align-items: flex-start; color: #B91C1C; font-weight: 700; font-size: .875rem; }
.ax-err::before { content: '!'; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #B91C1C; color: #fff; font-size: .75rem; margin-top: 1px; }
.ax-search { max-width: 420px; position: relative; }
.ax-search input { padding-left: 40px; }
.ax-search svg.i { position: absolute; left: 13px; top: 15px; font-size: 1.1rem; color: var(--text-2); }
.ax-bmi { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--r-md); padding: var(--s4); }
.ax-bmi strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--navy); line-height: 1.1; }
.ax-bmi p { font-size: .875rem; color: var(--text-2-strong); margin-top: 6px; max-width: 56ch; }
.ax-consent-info { display: grid; gap: var(--s3); margin-top: var(--s4); }
.ax-consent-info details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 14px; }
.ax-consent-info summary { cursor: pointer; padding: 12px 0; font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.ax-consent-info details > div { padding-bottom: 12px; font-size: .9375rem; }
.ax-consent-info details > div p + p { margin-top: 6px; }

.ax-errsum { margin-top: var(--s4); }
.ax-errsum h2 { font-size: 1rem; color: #991B1B; margin-bottom: 6px; }
.ax-errsum a { color: #991B1B; font-weight: 700; }
.ax-errsum li + li { margin-top: 4px; }

.ax-nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); background: rgba(255,255,255,.97); border-top: 1px solid var(--border); }
.ax-nav .btn { min-width: 140px; }
.ax-nav .btn--back { background: #fff; color: var(--navy); border-color: #CBD5E1; }
.ax-nav .btn--back:hover { background: var(--bg); }

/* Welcome */
.ax-welcome__img { margin: 0; background: #0b3e7a; aspect-ratio: 3 / 2; }
.ax-welcome__img img { width: 100%; height: 100%; object-fit: contain; }
.ax-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s5); }
.ax-cards3 > div { display: flex; gap: 10px; padding: var(--s4); border-radius: var(--r-md); background: var(--pale); }
.ax-cards3 svg.i { font-size: 1.5rem; color: var(--blue); flex: none; }
.ax-cards3 h2 { font-size: .9375rem; }
.ax-cards3 p { font-size: .8125rem; color: var(--text-2-strong); margin-top: 2px; }
.ax-resume { margin-top: var(--s5); }
.ax-resume summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.ax-resume form, .ax-resume .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s3); }
.ax-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .875rem; word-break: break-all; background: var(--bg); border: 1px dashed #94A3B8; border-radius: 8px; padding: 10px 12px; }

/* Review / done */
.ax-review { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ax-review section { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); }
.ax-review header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.ax-review h2 { font-size: 1rem; }
.ax-review dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; margin: var(--s3) 0 0; font-size: .875rem; }
.ax-review dt { color: var(--text-2-strong); }
.ax-review dd { margin: 0; font-weight: 700; color: var(--text); }
.ax-review .unsure { color: #B45309; }
.ax-edit { background: none; border: 1.5px solid #CBD5E1; border-radius: 8px; padding: 6px 14px; min-height: 40px; font-family: var(--font-head); font-weight: 600; color: var(--blue); cursor: pointer; }
.ax-edit:hover { background: var(--pale); }
.ax-review section.needs { border-color: #FCA5A5; background: #FEF2F2; }
.ax-done-head { text-align: center; padding-top: var(--s4); }
.ax-done-head .tick { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green-ink); color: #fff; }
.ax-done-head .tick svg.i { font-size: 2.4rem; stroke-width: 2.6; }
.ax-done-head h1 { margin-top: var(--s3); }
.ax-result { margin-top: var(--s5); border: 2px solid var(--navy); border-radius: var(--r-lg); padding: var(--s5); background: linear-gradient(180deg, #F3F8FF 0%, #fff 70%); }
.ax-result h2 { font-size: 1.25rem; }
.ax-result__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s3); }
.ax-result__score { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ax-result__score strong { font-family: var(--font-head); font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); line-height: 1; color: var(--navy); }
.ax-result__score span { font-weight: 700; color: var(--text-2-strong); }
.ax-result__band { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; padding: 6px 16px; border-radius: 999px; border: 2px solid; }
.ax-result__band--low { background: #F0FDF4; color: #14532D; border-color: #86EFAC; }
.ax-result__band--moderate { background: #FFFBEB; color: #78350F; border-color: #FCD34D; }
.ax-result__band--high { background: #FEF2F2; color: #991B1B; border-color: #FCA5A5; }
.ax-result__label { font-size: .875rem; color: var(--text-2-strong); margin-top: 6px; }
.ax-result__notice { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; font-size: .9375rem; }
.ax-result__notice p + p { margin-top: 6px; }
.ax-result__meta { margin-top: var(--s3); font-size: .8125rem; color: var(--text-2-strong); }
.ax-h2 { font-size: 1.0625rem; margin-top: var(--s5); }
.ax-h3 { font-size: .9375rem; margin-top: var(--s4); }
.ax-factors { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.ax-factors li { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 12px; font-size: .9375rem; }
.ax-factors li + li { border-top: 1px solid var(--border); }
.ax-factors .pts { font-weight: 700; color: var(--navy); }
.ax-more { margin-top: var(--s4); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 14px; font-size: .9375rem; }
.ax-more summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--blue); }
.ax-more ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }
.ax-more p { margin: 8px 0 12px; color: var(--text-2-strong); }
@media print { .ax-more[open], .ax-more { display: block; } }
.ax-gauge { width: 200px; height: auto; flex: none; }
.ax-gauge__track { fill: none; stroke: #E2E8F0; stroke-width: 16; stroke-linecap: round; }
.ax-gauge__value { fill: none; stroke-width: 16; stroke-linecap: round; }
.ax-gauge--low .ax-gauge__value { stroke: #16A34A; } .ax-gauge--moderate .ax-gauge__value { stroke: #F59E0B; } .ax-gauge--high .ax-gauge__value { stroke: #DC2626; }
.ax-result__text { display: grid; gap: 8px; justify-items: start; }
.ax-disclaimer { margin-top: var(--s3); padding: 10px 14px; border-left: 4px solid var(--navy); background: var(--pale); color: var(--navy); font-weight: 700; font-size: .9375rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ax-ftin { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ax-ftin .ax-input { max-width: 170px; }
.ax-env { font-family: var(--font-head); font-weight: 600; font-size: .75rem; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); color: #DCE7F5; }
.ax-path { display: grid; gap: 8px; margin-top: var(--s2); counter-reset: p; }
.ax-path li { counter-increment: p; position: relative; padding-left: 40px; font-size: .9375rem; min-height: 28px; }
.ax-path li::before { content: counter(p); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #94A3B8; color: var(--text-2-strong); font-weight: 700; font-size: .8125rem; }
.ax-path li.is-done::before { content: '\2713'; background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.ax-done-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

@media (max-width: 767px) {
  .ax-main { padding-inline: 0; padding-top: 0; }
  .ax-card { border-radius: 0; border-inline: 0; }
  .ax-content, .ax-progress { padding-inline: var(--s4); }
  .ax-nav { padding-inline: var(--s4); }
  .ax-nav .btn { min-width: 0; flex: 1; }
  .ax-opts--cards, .ax-cards3 { grid-template-columns: 1fr; }
  .ax-review dl { grid-template-columns: 1fr; }
  .ax-review dd { margin-bottom: 6px; }
  .ax-bar__brand span { display: none; }
}

@media print {
  .ax-bar, .ax-mode, .ax-nav, .ax-done-actions, .ax-progress, .skip-link { display: none !important; }
  .ax-card { box-shadow: none; border: 0; }
  .ax-body { background: #fff; }
}