/* Approbations-Navigator — one stylesheet, no framework. */
:root{
  --ink:#16202b; --ink-2:#4a5765; --line:#dfe4ea; --line-2:#eef1f4;
  --bg:#ffffff; --bg-2:#f6f8fa; --accent:#1b5e8c; --accent-ink:#134767;
  --warn-bg:#fff6e5; --warn-line:#e8c882; --stage:#8a2b2b;
  --max:74rem; --read:44rem;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
[dir="rtl"]{ --font: "Noto Naskh Arabic", "Segoe UI", system-ui, Tahoma, Arial, sans-serif; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:17px;line-height:1.62;text-rendering:optimizeLegibility}
[dir="rtl"] body{line-height:1.85}

.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
main.wrap{padding-top:2rem;padding-bottom:4rem}

h1{font-size:2rem;line-height:1.22;margin:0 0 .75rem;letter-spacing:-.01em}
h2{font-size:1.3rem;line-height:1.3;margin:2.25rem 0 .6rem}
h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
p{margin:0 0 1rem;max-width:var(--read)}
ul,ol{max-width:var(--read);padding-inline-start:1.3rem;margin:0 0 1.2rem}
li{margin:0 0 .45rem}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--accent-ink)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:var(--read)}
.muted{color:var(--ink-2)}
.small{font-size:.85rem}

.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{position:static;display:inline-block;padding:.5rem 1rem;background:#000;color:#fff}

.staging{background:var(--stage);color:#fff;font-size:.8rem;letter-spacing:.06em;
         text-align:center;padding:.4rem 1rem;font-weight:600}

header.site{border-bottom:1px solid var(--line);background:var(--bg)}
header .bar{display:flex;align-items:center;justify-content:space-between;
            gap:1rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
nav.lang a{font-size:.85rem;color:var(--ink-2);text-decoration:none;padding:.15rem .45rem;
           border:1px solid transparent;border-radius:4px}
nav.lang a.on{color:var(--ink);border-color:var(--line);background:var(--bg-2);font-weight:600}
nav.main{background:var(--bg-2);border-top:1px solid var(--line-2);overflow-x:auto}
nav.main .wrap{display:flex;gap:1.4rem;padding-top:.6rem;padding-bottom:.6rem;white-space:nowrap}
nav.main a{font-size:.92rem;color:var(--ink-2);text-decoration:none}
nav.main a:hover{color:var(--accent)}

.note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:6px;
      padding:.85rem 1rem;margin:1.2rem 0;max-width:var(--read);font-size:.96rem}
.note p{margin:0}

.cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.75rem 0 2rem}
.cards.col{grid-template-columns:1fr;max-width:var(--read)}
.card{display:block;border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;
      text-decoration:none;color:var(--ink);background:var(--bg)}
.card:hover{border-color:var(--accent);background:var(--bg-2)}
.card h3{margin:0;font-size:1rem}
.card.guide h3{margin-bottom:.35rem;font-size:1.05rem;color:var(--accent)}
.card.guide p{margin:0;font-size:.93rem;color:var(--ink-2)}

.cta{border:1px solid var(--line);border-inline-start:4px solid var(--accent);
     border-radius:6px;background:var(--bg-2);padding:1.15rem 1.25rem;margin:2.5rem 0;max-width:var(--read)}
.cta h2{margin:0 0 .5rem;font-size:1.1rem}
.cta p{margin:0 0 .75rem}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
     border:0;border-radius:6px;padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--accent-ink);color:#fff}

/* states table */
.tablewrap{overflow-x:auto;margin:1.5rem 0 2rem;border:1px solid var(--line);border-radius:8px}
table.states{border-collapse:collapse;width:100%;min-width:56rem;font-size:.9rem}
table.states th,table.states td{border-bottom:1px solid var(--line-2);
     padding:.7rem .8rem;text-align:start;vertical-align:top}
table.states thead th{background:var(--bg-2);font-size:.82rem;text-transform:uppercase;
     letter-spacing:.04em;color:var(--ink-2);position:sticky;top:0}
table.states tbody th{font-weight:700;white-space:nowrap}
table.states .contact{font-size:.84rem;line-height:1.5}
table.states .mail{word-break:break-word;color:var(--ink-2)}
table.states .figs{max-width:24rem}
table.states .figs p{margin:0 0 .5rem;font-size:.86rem;max-width:none}
table.states .none{color:#8a94a0;font-style:italic}
.cite{font-size:.78rem;white-space:nowrap}

/* timeline */
ol.steps{list-style:none;padding:0;margin:1.5rem 0;max-width:var(--read)}
li.step{border-inline-start:3px solid var(--line);padding-inline-start:1.25rem;
        padding-bottom:.5rem;margin-bottom:2rem}
li.step h2{margin-top:0}
.stepsrc{font-size:.8rem;color:var(--ink-2)}
.stepsrc a{color:var(--ink-2)}

/* checklist */
.ckbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.92rem;
       background:var(--bg-2);border:1px solid var(--line);border-radius:6px;
       padding:.6rem .9rem;max-width:var(--read)}
.ckbar button{font:inherit;font-size:.85rem;background:var(--bg);border:1px solid var(--line);
              border-radius:5px;padding:.3rem .7rem;cursor:pointer;color:var(--ink)}
.ckbar button:hover{border-color:var(--accent);color:var(--accent)}
#ckcount{font-weight:700}
.ckgroup{margin:2rem 0}
ul.cklist{list-style:none;padding:0;max-width:var(--read)}
ul.cklist li{margin:0;border-bottom:1px solid var(--line-2)}
ul.cklist label{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .2rem;cursor:pointer}
ul.cklist input{margin-top:.35rem;width:1.05rem;height:1.05rem;flex:0 0 auto}
ul.cklist input:checked + span{color:var(--ink-2);text-decoration:line-through}
.hint{display:block;font-size:.85rem;color:var(--ink-2);text-decoration:none;margin-top:.15rem}
ul.cklist input:checked + span .hint{text-decoration:none}

/* form */
.formwrap{border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.5rem;
          margin:2.5rem 0;max-width:var(--read);background:var(--bg-2)}
.formwrap h2{margin-top:0}
.row{margin:0 0 1rem}
.row label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.25rem}
.row input,.row select{width:100%;font:inherit;padding:.55rem .7rem;border:1px solid var(--line);
       border-radius:5px;background:var(--bg);color:var(--ink)}
.row input:focus,.row select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
fieldset{border:1px solid var(--line);border-radius:6px;margin:0 0 1rem;padding:.8rem 1rem;background:var(--bg)}
legend{font-size:.9rem;font-weight:600;padding:0 .35rem}
.opt{display:inline-flex;align-items:center;gap:.4rem;margin-inline-end:1.1rem;
     margin-bottom:.35rem;font-size:.95rem;cursor:pointer}
.consentbox{border:2px solid var(--accent);border-radius:6px;background:var(--bg);
            padding:1rem 1.1rem;margin:1.4rem 0}
.consentbox h3{margin:0 0 .6rem;font-size:.95rem;text-transform:uppercase;
               letter-spacing:.05em;color:var(--accent-ink)}
.consentline{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.consentline input{margin-top:.3rem;width:1.15rem;height:1.15rem;flex:0 0 auto}
.consent-tr{margin:.7rem 0 .2rem;font-size:.95rem;color:var(--ink-2)}
.formmsg{margin-top:.8rem;font-size:.95rem;min-height:1.2em}
.formmsg.ok{color:#1a6b3c;font-weight:600}
.formmsg.bad{color:#9a2020;font-weight:600}
.formmsg .after{display:block;font-weight:400;color:var(--ink-2);margin-top:.35rem}
ul.how li{margin-bottom:.6rem}

.sources{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);max-width:var(--read)}
.sources h2{margin-top:0;font-size:1rem}
.sources ol{font-size:.88rem;color:var(--ink-2)}
.src-note{font-size:.86rem;color:var(--ink-2)}
.related{margin-top:2rem;max-width:var(--read)}
.related h2{font-size:1rem}

footer.site{border-top:1px solid var(--line);background:var(--bg-2);padding:1.75rem 0 2.5rem;
            font-size:.88rem;color:var(--ink-2)}
footer.site p{max-width:var(--read)}
footer .legal a{margin-inline-end:1.1rem}
footer .stand{font-size:.8rem}

.pick{padding-top:4rem}
ul.langpick{list-style:none;padding:0;max-width:36rem}
ul.langpick li{margin-bottom:.9rem}
ul.langpick a{font-size:1.2rem;font-weight:600}
ul.langpick .muted{display:block;font-size:.92rem}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.6rem}
  main.wrap{padding-top:1.5rem}
}

@media print{
  .staging,header.site nav,nav.lang,.cta,footer.site,.ckbar button,.skip{display:none!important}
  body{font-size:11pt}
  a{color:#000;text-decoration:none}
  ul.cklist input{-webkit-appearance:none;appearance:none;border:1px solid #000;
                  width:.9em;height:.9em;border-radius:2px}
  ul.cklist input:checked{background:#000}
  ul.cklist input:checked + span{text-decoration:none}
  .ckgroup{break-inside:avoid}
}