/* ===== United Doctors Front branding and interaction layer =====
   Loaded after styles.css. Colours come from the UDF emblem:
   navy shield, royal-blue laurel and pale-gold ring. */
body { overflow-x: clip; }
.topbar { position: sticky; top: 0; z-index: 20; background: #ffffffeb; backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .2s ease, border-color .2s ease; }
.topbar.scrolled { box-shadow: 0 6px 20px -12px #13254b55; border-bottom-color: transparent; }
.topbar::after { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--laurel), var(--navy) 45%, var(--gold-deep) 75%, var(--gold)); }
.header-inner { min-height: 68px; }
.brand-logo { width: 52px; height: auto; transition: transform .35s cubic-bezier(.2, .8, .3, 1.4); }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.navigation a { position: relative; transition: color .15s ease, background-color .15s ease; }
.navigation a[aria-current] { color: white; background: var(--navy); }
.navigation a[aria-current]:hover { color: white; background: var(--navy-deep); }
.navigation a[aria-current] .mini-count { color: var(--gold); }
.navigation a[aria-current]::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); }
.header-links { display: flex; align-items: center; gap: 14px; }
.header-udf { padding: 7px 11px; border: 1px solid var(--gold-deep); border-radius: 999px; color: var(--navy); background: #fbf8d8; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, transform .15s ease; }
.header-udf:hover { background: var(--gold); text-decoration: none; transform: translateY(-1px); }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 46px 0 78px; color: white;
  background: radial-gradient(120% 90% at 85% 10%, #3a5fb0 0%, transparent 55%), linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #2a4c92 100%); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 60px; z-index: -1; background: linear-gradient(transparent, #13254b40); }
.hero-rays { position: absolute; z-index: -1; right: -12%; top: 50%; width: 900px; aspect-ratio: 1; translate: 0 -50%;
  background: repeating-conic-gradient(from 0deg, #f1ea8f1f 0deg 1.4deg, transparent 1.4deg 9deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 22%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, #000 22%, transparent 62%);
  animation: spin 90s linear infinite; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 40px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #ffffff2e; border-radius: 999px; background: #ffffff12; color: #dfe6f7; font-size: 12px; font-weight: 600; }
.pulse-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 #f1ea8f99; animation: pulse 2s ease-out infinite; }
.hero h1 { margin-top: 16px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.035em; max-width: 16ch; }
.hero-lede { margin-top: 12px; max-width: 56ch; color: #d3dcf1; font-size: 15px; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; max-width: 340px; }
.hero-stats div { padding: 11px 13px; border: 1px solid #ffffff21; border-radius: 8px; background: #ffffff0f; transition: background-color .2s ease, transform .2s ease; }
.hero-stats div:hover { background: #ffffff1c; transform: translateY(-2px); }
.hero-stats dt { color: #b9c6e4; font-size: 11px; font-weight: 600; }
.hero-stats dd { margin: 2px 0 0; color: var(--gold); font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-badge { position: relative; display: grid; place-items: center; width: 300px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 58%, #ffffffe6 66%, #ffffff00 71%); animation: float 6s ease-in-out infinite; }
.hero-badge::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed #c8b44566; animation: spin 40s linear infinite; }
.hero-badge img { width: 78%; height: auto; filter: drop-shadow(0 6px 14px #13254b33); }

/* Predict form floats over the hero */
.predict-form { position: relative; }
.predict-form::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--navy), var(--gold-deep)); }
#predictor > .predict-form { z-index: 2; margin-top: -46px; box-shadow: 0 18px 40px -22px #13254b66; border-color: #d3dbea; }
input, select { transition: border-color .15s ease, box-shadow .15s ease; }
input:hover, select:hover { border-color: #8fa3c6; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #27468a26; }

/* Surfaces and controls */
.panel { box-shadow: var(--shadow); }
.button { transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--navy)); border-color: var(--navy); box-shadow: 0 6px 16px -8px #1d3566aa; }
.button.primary:hover { background: linear-gradient(135deg, #2f53a0, var(--navy-deep)); }
.icon-button { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.icon-button:hover:not(:disabled) { transform: translateY(-1px); }
.icon-button[aria-pressed="true"], .icon-button[aria-pressed="true"]:hover { color: var(--gold); background: var(--navy); border-color: var(--navy); box-shadow: 0 4px 12px -6px #13254b99; }
.icon-button[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.icon-button[aria-pressed="true"]:hover { background: var(--navy-deep); }
th { background: #eef2f9; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #f5f8fe; }
.tab { transition: color .15s ease, border-color .15s ease; }
.tab[aria-pressed="true"] { border-bottom-color: var(--gold-deep); }
.tab[aria-pressed="true"] .tab-count { color: var(--navy); background: var(--gold); border-radius: 999px; padding: 0 6px; }
.stat-strip > div { box-shadow: var(--shadow); border-top: 3px solid var(--navy); transition: transform .2s ease; }
.stat-strip > div:nth-child(2) { border-top-color: var(--laurel); }
.stat-strip > div:nth-child(3) { border-top-color: var(--gold-deep); }
.stat-strip > div:nth-child(4) { border-top-color: #6c86c4; }
.stat-strip > div:hover { transform: translateY(-2px); }
.notice { border-left-color: var(--gold-deep); background: #fbfaee; }
.page > .subpage-heading::before { content: ''; display: block; width: 46px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--navy), var(--gold-deep)); }
.page:not([hidden]) { animation: rise .35s ease both; }
.details-dialog[open] { animation: pop .22s ease both; }
.toast { left: 50%; right: auto; translate: -50% 0; border-left: 4px solid var(--gold); background: var(--navy-deep); box-shadow: 0 10px 30px -10px #13254b99; animation: rise .25s ease both; }

/* Feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease, border-color .25s ease; }
.feature-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold-deep)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.feature-card:hover { text-decoration: none; transform: translateY(-4px); border-color: #c4cfe4; box-shadow: 0 18px 36px -20px #13254b66; }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card b { font-size: 16px; }
.feature-card > span:not(.feature-icon) { color: var(--muted); font-size: 13px; }
.feature-card i { position: absolute; left: 18px; bottom: 14px; font-style: normal; font-weight: 700; color: var(--accent); transition: transform .25s ease; }
.feature-card:hover i { transform: translateX(6px); }
.feature-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 10px; color: var(--navy); background: linear-gradient(135deg, #fbf8d8, var(--gold)); }
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.revealed { opacity: 1; transform: none; transition: opacity .5s ease var(--delay, 0ms), transform .5s ease var(--delay, 0ms), box-shadow .25s ease, border-color .25s ease; }
.reveal.revealed:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* Footer */
.site-footer { margin-top: 30px; border-top: 0; color: #c6d0e8; background: linear-gradient(135deg, var(--navy-deep), var(--navy)); }
.site-footer::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); }
.footer-inner { min-height: 0; padding-block: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; color: #c6d0e8; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: white; }
.footer-brand:hover { text-decoration: none; }
.footer-brand img { width: 74px; height: auto; padding: 6px; border-radius: 50%; background: white; transition: transform .35s ease; }
.footer-brand:hover img { transform: rotate(-8deg); }
.footer-brand span { display: flex; flex-direction: column; }
.footer-brand small { color: var(--gold); font-weight: 600; }
.footer-inner p { max-width: 60ch; order: 0; width: auto; }
.footer-links { display: flex; flex-direction: column; align-items: end; gap: 6px; }
.footer-links a { color: white; font-weight: 650; white-space: nowrap; }
.footer-links a:hover { color: var(--gold); }

/* Back to top */
.to-top { position: fixed; z-index: 15; right: 20px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--gold); border-radius: 50%; color: white; background: var(--navy); box-shadow: 0 10px 24px -10px #13254b99; animation: rise .25s ease both; transition: transform .15s ease; }
.to-top:hover { transform: translateY(-3px); }

@keyframes spin { to { rotate: 360deg; } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px #f1ea8f00; } 100% { box-shadow: 0 0 0 0 #f1ea8f00; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; }
  .hero-badge { width: 200px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero { padding: 26px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats dd { font-size: 20px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { flex-direction: row; flex-wrap: wrap; align-items: start; gap: 8px 16px; }
}
@media (max-width: 620px) {
  .header-udf { display: none; }
  .brand-logo { width: 44px; }
  .feature-grid { grid-template-columns: 1fr; }
  .multi-panel { width: calc(100vw - 50px); }
  .hero-kicker { font-size: 11px; }
  .to-top { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Footer disclaimer */
.site-footer .footer-inner { padding-bottom: 76px; }
.footer-text { display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
.footer-disclaimer { padding: 9px 12px; border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: #ffffff12; color: #e3e9f7; }
.footer-disclaimer strong { color: var(--gold); }

.result-guide.result-disclaimer { padding: 8px 12px; border-left: 3px solid var(--gold-deep); border-radius: 0 6px 6px 0; background: #fbfaee; color: var(--muted); }
.result-disclaimer strong { color: var(--navy); }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease; }
.contact-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--card-accent, var(--navy)); }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px #13254b66; }
.contact-email { --card-accent: linear-gradient(90deg, var(--navy), var(--gold-deep)); }
.contact-x { --card-accent: #111; }
.contact-instagram { --card-accent: linear-gradient(90deg, #f9a03f, #e1306c, #833ab4); }
.contact-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: white; background: var(--navy); }
.contact-email .contact-icon { color: var(--navy); background: linear-gradient(135deg, #fbf8d8, var(--gold)); }
.contact-x .contact-icon { background: #111; }
.contact-instagram .contact-icon { background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #833ab4); }
.contact-card h2 { font-size: 19px; margin-top: 4px; }
.contact-card p { color: var(--muted); }
.contact-value { margin-top: auto; padding-top: 6px; font-size: 16px; font-weight: 750; word-break: break-all; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.footer-social { display: flex; gap: 8px; margin-top: 6px; }
.footer-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff3d; border-radius: 50%; color: white; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.footer-social a:hover { color: var(--navy); background: var(--gold); transform: translateY(-2px); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* Outlook notes */
.outlook-note { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.badge.single { margin-top: 5px; color: #8a3b12; background: #fdeee2; border: 1px solid #f3c9a8; cursor: help; }

/* Branch multi-select */
.multi { position: relative; min-width: 0; }
.multi-label { display: block; font-size: 12px; font-weight: 690; }
.multi-trigger { width: 100%; min-height: 40px; margin-top: 5px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #b9c7d2; border-radius: 4px; background: white; font-size: 13px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.multi-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-trigger svg { flex: none; color: var(--muted); transition: transform .2s ease; }
.multi-trigger:hover { border-color: #8fa3c6; }
.multi-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px #27468a26; }
.multi-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.multi-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 360px; max-width: calc(100vw - 32px); border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: 0 22px 48px -18px #13254b66; animation: pop .16s ease both; }
.multi-head { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.multi-head input { margin: 0; min-height: 36px; }
.multi-count { flex: none; color: var(--muted); font-size: 11px; font-weight: 650; }
.multi-list { max-height: 290px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.multi-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; padding: 7px 8px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.multi-option:hover { background: var(--soft); }
.multi-option input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--navy); grid-row: span 2; }
.multi-option small { grid-column: 2; color: var(--muted); font-size: 11px; font-weight: 500; }
.multi-option:has(input:checked) { background: #fbf8d8; }
.multi-empty { padding: 14px; color: var(--muted); text-align: center; }
.multi-actions { display: flex; gap: 6px; justify-content: end; padding: 10px; border-top: 1px solid var(--border); }
.multi-actions .button { min-height: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:not(:empty) { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border: 1px solid #d9cf7f; border-radius: 999px; background: #fbf8d8; color: var(--navy); font-size: 12px; font-weight: 650; animation: pop .18s ease both; transition: background-color .15s ease; }
.chip span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffffffb3; font-size: 14px; line-height: 1; }
.chip:hover { background: var(--gold); }
.chip-clear { padding-right: 11px; border-color: var(--border); background: white; color: var(--muted); }
.chip-clear:hover { background: var(--soft); }