/* Afterhold Diagnostic — theme layer that dresses the original tool (app.css, unchanged) in the
   rebuilt site's design: warm paper, ink, clay accent; Playfair Display / DM Sans / Geist Mono;
   Noto Naskh / Noto Sans Arabic for the Arabic page. Loaded AFTER app.css. */

@font-face { font-family: "Playfair Display Variable"; src: url("./fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display Variable"; src: url("./fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans Variable"; src: url("./fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Geist Mono Variable"; src: url("./fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Light editorial palette in every OS mode (the site has no dark theme). */
:root, :root:root {
  color-scheme: light;
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --ink: #1C1917;
  --body: #44403C;
  --muted: #57534E;
  --rust: #9A3412;
  --rust-soft: #FBEFE6;
  --line: #E7E5E4;
  --focus: #9A3412;
  --sand: #F5F2EB;
  --ember: #F97316;
  --serif: "Playfair Display Variable", Georgia, serif;
  --sans: "DM Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: #FAF8F5; --surface: #FFFFFF; --ink: #1C1917; --body: #44403C; --muted: #57534E;
    --rust: #9A3412; --rust-soft: #FBEFE6; --line: #E7E5E4; --focus: #9A3412;
  }
}

body.diagnostic-v2 { font-family: var(--sans); background: var(--bg); padding: 0; }
html[lang="ar"] body.diagnostic-v2 { font-family: "Noto Sans Arabic", var(--sans); }
h1, h2, .result-name { font-family: var(--serif); letter-spacing: -0.02em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] .result-name { font-family: "Noto Naskh Arabic", serif; letter-spacing: 0; }
h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.05; }
html[lang="ar"] h1 { line-height: 1.4; }
::selection { background: #FED7AA; color: var(--ink); }
a { color: var(--rust); text-underline-offset: 4px; }

/* ---------- Site header (mirrors the main site's sticky header) ---------- */
.wa-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(231, 229, 228, .8); background: rgba(250, 248, 245, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wa-header-in { max-width: 72rem; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
.wa-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
html[lang="ar"] .wa-brand { font-family: "Noto Naskh Arabic", serif; letter-spacing: 0; }
.wa-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rust); transition: transform .3s ease; }
.wa-brand:hover .wa-dot { transform: scale(1.5); }
.wa-nav { display: none; align-items: center; gap: 28px; }
.wa-nav a { color: var(--muted); text-decoration: none; font-size: .875rem; transition: color .2s ease; position: relative; }
.wa-nav a:hover, .wa-nav a[aria-current="page"] { color: var(--ink); }
.wa-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; background: var(--rust); }
.wa-actions { display: flex; align-items: center; gap: 8px; }
.wa-header .language-switch { min-height: 36px; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(28, 25, 23, .2); background: transparent; color: var(--ink); text-decoration: none; font-size: .875rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wa-header .language-switch:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wa-menu { position: relative; }
.wa-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.wa-menu > summary::-webkit-details-marker { display: none; }
.wa-menu > summary:hover { background: var(--sand); }
.wa-menu-icon, .wa-menu-icon::before, .wa-menu-icon::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s ease, opacity .2s ease; }
.wa-menu-icon::before, .wa-menu-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.wa-menu-icon::before { top: -6px; } .wa-menu-icon::after { top: 6px; }
.wa-menu[open] .wa-menu-icon { background: transparent; }
.wa-menu[open] .wa-menu-icon::before { transform: translateY(6px) rotate(45deg); }
.wa-menu[open] .wa-menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
.wa-menu-panel { position: fixed; top: 64px; inset-inline: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 24px; box-shadow: 0 20px 40px -24px rgba(28, 25, 23, .25); }
.wa-menu-panel a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
html[lang="ar"] .wa-menu-panel a { font-family: "Noto Naskh Arabic", serif; }
@media (min-width: 768px) {
  .wa-header-in { padding: 0 32px; }
  .wa-nav { display: flex; }
  .wa-menu { display: none; }
}
@media (min-width: 1024px) { .wa-header-in { padding: 0 48px; } }

/* ---------- Tool intro band ---------- */
.wa-intro { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sand), var(--bg)); }
.wa-intro-in { max-width: 880px; margin: 0 auto; padding: 28px 26px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.wa-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; transition: color .2s ease; }
.wa-back:hover { color: var(--rust); }
.wa-back span { display: inline-block; transition: transform .25s ease; }
.wa-back:hover span { transform: translateX(-3px); }
html[lang="ar"] .wa-back span { transform: scaleX(-1); }
html[lang="ar"] .wa-back:hover span { transform: scaleX(-1) translateX(-3px); }
.wa-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--rust); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; }
.wa-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.wa-intro h1 { margin: 0 0 14px; max-width: 18ch; }
.wa-intro h1 em { color: var(--rust); font-style: italic; }
html[lang="ar"] .wa-intro h1 em { font-style: normal; }
.wa-intro p { max-width: 60ch; font-size: 1.06rem; color: var(--muted); margin: 0; }

/* Arabic text never takes the Latin mono face or tracking (it breaks letter joining). */
html[lang="ar"] .wa-back, html[lang="ar"] .wa-eyebrow { font-family: "Noto Sans Arabic", sans-serif; letter-spacing: 0; text-transform: none; font-size: .85rem; }
.language-switch[lang="ar"] { font-family: "Noto Sans Arabic", sans-serif; font-size: 1rem !important; line-height: 1; }

/* ---------- The tool itself ---------- */
.diagnostic-v2 .wrap { max-width: 880px; padding: 36px 26px 96px; }
.diagnostic-v2 .site-nav { display: none; }
.top { border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 40px; }
.brand { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink); transition: color .2s ease; }
.brand:hover { color: var(--rust); }
html[lang="ar"] .brand { font-family: "Noto Sans Arabic", sans-serif; font-size: .9rem; text-transform: none; }
.devnote { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; }
.devnote::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
html[lang="ar"] .devnote { font-family: "Noto Sans Arabic", sans-serif; letter-spacing: 0; font-size: .8rem; }

/* Buttons: ink pills like the main site */
.b { border-radius: 999px; padding: 11px 22px; font-size: .875rem; font-weight: 500; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.b:hover:not(:disabled) { filter: none; background: var(--rust); border-color: var(--rust); color: #fff; }
.b:active:not(:disabled) { transform: translateY(1px); }
.b.ghost { background: transparent; border-color: rgba(28, 25, 23, .25); }
.b.ghost:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.b.quiet:hover:not(:disabled) { background: none; border-color: transparent; color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Step rail */
.steps { gap: 10px; margin-bottom: 40px; }
.steps li { border-top-width: 2px; transition: border-color .25s ease; }
.steps li.on { border-color: var(--rust); }
.steps button { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; transition: color .2s ease; }
html[lang="ar"] .steps button { font-family: "Noto Sans Arabic", sans-serif; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.steps button:hover:not(:disabled) { color: var(--ink); }
.step-label { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--rust); }
html[lang="ar"] .step-label { font-family: "Noto Sans Arabic", sans-serif; text-transform: none; letter-spacing: 0; }

/* Surfaces */
.panel { border-radius: 14px; border-color: var(--line); padding: 24px; box-shadow: 0 1px 0 rgba(28, 25, 23, .03), 0 18px 40px -32px rgba(28, 25, 23, .35); }
.panel.rust { border-color: rgba(154, 52, 18, .45); background: linear-gradient(180deg, #FFFFFF, #FFF8F3); }
.warn { border-radius: 0 10px 10px 0; }
html[lang="ar"] .warn { border-radius: 10px 0 0 10px; }
.notice, .example-note { color: var(--rust); }
.result-name { font-size: clamp(2rem, 4.5vw, 2.6rem); }

/* Inputs */
input[type=text], input[type=date], textarea, select { border-radius: 10px; border-color: #D6D3D1; transition: border-color .2s ease, box-shadow .2s ease; }
input[type=text]:focus, input[type=date]:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(154, 52, 18, .12); }
.field > span, legend { font-weight: 500; }

/* Option chips */
.opt span { border-radius: 999px; padding: 9px 15px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.opt span:hover { border-color: var(--ink); }
.opt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Pills, lists */
.pill { border-radius: 999px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
html[lang="ar"] .pill { font-family: "Noto Sans Arabic", sans-serif; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.pill.supported { background: var(--ink); color: var(--bg); }
.list li { transition: background-color .2s ease; }
.rowlink { font-family: var(--serif); font-size: 1.3rem; text-decoration-thickness: 1px; transition: color .2s ease; }
html[lang="ar"] .rowlink { font-family: "Noto Naskh Arabic", serif; }
.rowlink:hover { color: var(--rust); }

/* ---------- Site footer (mirrors the main site) ---------- */
.wa-footer { background: var(--ink); color: #E7E5E4; margin-top: 24px; }
.wa-footer-in { max-width: 72rem; margin: 0 auto; padding: 64px 24px 40px; display: grid; gap: 40px; }
.wa-footer-eyebrow { margin: 0 0 14px; color: rgba(231, 229, 228, .6); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; }
html[lang="ar"] .wa-footer-eyebrow { font-family: "Noto Sans Arabic", sans-serif; letter-spacing: 0; text-transform: none; }
.wa-footer-line { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.2; color: #FAF8F5; max-width: 22ch; }
html[lang="ar"] .wa-footer-line { font-family: "Noto Naskh Arabic", serif; line-height: 1.6; }
.wa-footer-line em { color: var(--ember); }
html[lang="ar"] .wa-footer-line em { font-style: normal; }
.wa-footer-mail { display: inline-block; margin-top: 20px; color: #E7E5E4; font-family: var(--mono); font-size: .8rem; text-decoration: none; }
.wa-footer-mail:hover { color: var(--ember); }
.wa-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; align-content: start; }
.wa-footer-links a { color: #E7E5E4; text-decoration: none; font-size: .9rem; min-height: 40px; display: flex; align-items: center; transition: color .2s ease; }
.wa-footer-links a:hover { color: var(--ember); }
.wa-footer-bottom { border-top: 1px solid #292524; }
.wa-footer-bottom div { max-width: 72rem; margin: 0 auto; padding: 22px 24px; font-size: .75rem; color: rgba(231, 229, 228, .6); }
@media (min-width: 768px) {
  .wa-footer-in { grid-template-columns: 1.4fr 1fr; padding: 80px 32px 48px; }
  .wa-footer-bottom div { padding: 22px 32px; }
}
@media (min-width: 1024px) { .wa-footer-in, .wa-footer-bottom div { padding-inline: 48px; } }

/* Print: just the tool */
@media print {
  .wa-header, .wa-intro, .wa-footer { display: none !important; }
  .diagnostic-v2 .wrap { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Mobile readability and spacing. */
body.diagnostic-v2 .wrap{min-height:0;padding-bottom:48px}
html[lang="ar"] body.diagnostic-v2 p{line-height:1.95}
.wa-footer a{min-height:44px;display:inline-flex;align-items:center}
.wa-header a:focus-visible,.wa-menu summary:focus-visible{outline:2px solid #9a3412;outline-offset:4px}
@media(max-width:639px){.wa-footer{margin-top:32px}.wa-footer-in{padding-top:48px;padding-bottom:36px}html[lang="ar"] body.diagnostic-v2 .muted{font-size:15px}}

@media(min-width:768px) and (max-width:1023px){.wa-nav{display:none}.wa-menu{display:block}}