/* MedStudy Africa portal styles: same navy, white and turquoise identity as the study app */
:root {
  --navy: #0B2545; --navy-2: #13315C; --turq: #17B8B0; --turq-ink: #0B7F7A; --turq-soft: #E3F6F4;
  --bg: #F5F8FB; --surface: #FFFFFF; --fg: #0B1F36; --muted: #56677D; --line: #D9E2EC;
  --ok: #138A52; --ok-soft: #E4F5EC; --bad: #C2413A; --bad-soft: #FBEAE8; --warn: #A86A00; --warn-soft: #FDF3DF;
  --on-navy: #FFFFFF; --on-navy-muted: #B8C8DC;
  --font-display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #061426; --surface: #0C1F3A; --fg: #E6EEF7; --muted: #9FB2C8; --line: #1C3558;
  --turq-ink: #3FD6CD; --turq-soft: #0E3340; --ok: #4CC98A; --ok-soft: #0E3326; --bad: #F08A80; --bad-soft: #3A1A1C; --warn: #F0B54A; --warn-soft: #3A2A0E;
  --navy: #071A33; --navy-2: #0F2A4D; color-scheme: dark } }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; text-wrap: balance }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600 } h2 { font-size: 1.35rem; font-weight: 600 } h3 { font-size: 1.1rem; font-weight: 600 }
p { margin: 0 }
a { color: var(--turq-ink) }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px }
[hidden] { display: none !important }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); width: 100% }
.top { background: var(--navy); color: var(--on-navy) }
.top .wrap { display: flex; align-items: center; gap: 16px; padding-block: 12px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-navy); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem }
.brand b { color: var(--turq); font-weight: 600 }
.top nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .95rem }
.top nav a { color: var(--on-navy-muted); text-decoration: none } .top nav a:hover { color: var(--on-navy) }
main { flex: 1; padding-block: 32px 64px }
footer { background: var(--navy); color: var(--on-navy-muted); font-size: .88rem }
footer .wrap { padding-block: 20px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between }
footer a { color: var(--on-navy-muted) }
.stack { display: grid; gap: 14px } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; min-width: 0 }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.auth { max-width: 460px; margin: 0 auto; width: 100% }
.eyebrow { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--turq-ink) }
.muted { color: var(--muted) } .small { font-size: .9rem }
.formula { font-family: var(--font-mono); font-size: .78rem; color: var(--muted) }
label.field { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); min-width: 0 }
.input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg) }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; padding: 11px 18px; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--turq); color: #062A2A }
.btn:hover { filter: brightness(1.06) } .btn:disabled { opacity: .55; cursor: default }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line) }
.btn.danger { background: var(--bad); color: #fff }
.btn.small { padding: 6px 12px; font-size: .9rem }
.btn.block { width: 100% }
.msg { padding: 10px 14px; border-radius: 8px; font-size: .93rem }
.msg.ok { background: var(--ok-soft); color: var(--ok) } .msg.bad { background: var(--bad-soft); color: var(--bad) } .msg.info { background: var(--turq-soft); color: var(--turq-ink) } .msg.warn { background: var(--warn-soft) }
.pill { display: inline-block; font-family: var(--font-mono); font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--turq-soft); color: var(--turq-ink); white-space: nowrap }
.pill.ok { background: var(--ok-soft); color: var(--ok) } .pill.bad { background: var(--bad-soft); color: var(--bad) } .pill.warn { background: var(--warn-soft); color: var(--warn) }
.stat b { display: block; font-family: var(--font-display); font-size: 1.8rem; font-variant-numeric: tabular-nums }
.table-wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top }
th { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500 }
.meter { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden } .meter i { display: block; height: 100%; background: var(--turq) }
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface) }
.tabs button { border: 0; background: transparent; padding: 9px 16px; cursor: pointer; font-weight: 600; color: var(--muted) }
.tabs button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy) }
.prose { max-width: 70ch } .prose h2 { margin-top: 24px } .prose p, .prose ul { margin: 10px 0 }
@media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr) } .card { padding: 18px } }

@media print { header.top, footer, .tabs, .no-print { display: none !important } body { background: #fff } .card { box-shadow: none; border: 1px solid #ccc } }

footer .foot-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px }
footer a.social { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; text-decoration: none; margin-left: 4px }
footer a.social:hover, footer a.social:focus-visible { background: var(--turq); color: #062A2A }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100% } .tabs button { white-space: normal }
.bill-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); width: max-content; max-width: 100% }
.bill-toggle button { border: 0; background: transparent; color: var(--fg); padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer }
.bill-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff }
.save-tag { font-size: .75rem; background: var(--turq); color: #062A2A; border-radius: 999px; padding: 1px 7px; margin-left: 4px }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px }
.pick { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); cursor: pointer; font: inherit }
.pick.on { border: 2px solid var(--turq); background: var(--turq-soft) }
.pick .pp { font-weight: 700 }

/* Collapsible "Your plan requests" */
.req-drop { border: 1px solid var(--line, #dfe6ec); border-radius: 12px; padding: 10px 14px; }
.req-drop summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.req-drop summary::-webkit-details-marker { display: none; }
.req-drop summary::before { content: "▸"; transition: transform .15s; display: inline-block; }
.req-drop[open] summary::before { transform: rotate(90deg); }
.req-drop .table-wrap { margin-top: 10px; }