body{font-size:18px;line-height:1.55;min-height:100vh}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.print-only{display:none}
[hidden]{display:none!important}

/* Layout */
.app{display:grid;grid-template-columns:280px minmax(0,860px);column-gap:64px;justify-content:center;max-width:1288px;margin:0 auto;padding:40px 32px 120px}
.side{position:sticky;top:40px;align-self:start;max-height:calc(100vh - 80px);overflow-y:auto;padding:4px}
main{min-width:0}

/* Brand and section links */
.brand img{display:block;height:44px;width:auto}
.brand h1{margin-top:24px;font-size:24px;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.brand p{margin-top:6px;font-size:16px;line-height:1.4;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:4px;margin-top:32px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;border-radius:14px;color:var(--body);font-size:16px;line-height:1.3;font-weight:600;text-decoration:none;transition:background .15s}
.nav a:hover{background:var(--panel)}
.nav a[aria-current="page"]{background:var(--teal-tint);color:var(--teal-deep);font-weight:700}
.nav .count{direction:ltr;flex:none;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}
.nav a[aria-current="page"] .count{color:var(--teal-deep)}

.lang{display:inline-block;margin-top:14px;padding:8px 16px;border-radius:999px;background:var(--panel);color:var(--body);font-size:16px;font-weight:700;text-decoration:none}
.lang:hover{background:var(--teal-tint);color:var(--teal-deep)}

/* Top bar */
.card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:28px}
.top-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.progress-text{font-size:22px;line-height:1.2;font-weight:800;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn.sm{min-height:44px;padding:10px 20px;font-size:16px}
.btn:focus-visible{outline-offset:3px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.confirm span{font-size:16px;font-weight:600;color:var(--ink)}
.bar{height:12px;margin-top:20px;border-radius:999px;background:var(--panel);overflow:hidden}
.fill{height:100%;width:0;border-radius:999px;background:var(--teal);transition:width .25s}
.intro{margin-top:20px;font-size:16px;line-height:1.55;color:var(--muted);max-width:64ch}
.warn{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--teal-tint);color:var(--teal-deep);font-size:16px;font-weight:600}

/* Sections */
.sec{display:none;margin-top:48px}
.sec.is-active{display:block}
.kicker{font-size:16px;font-weight:700;color:var(--teal)}
.sec h2{margin-top:8px;font-size:clamp(30px,4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sec h2:focus{outline:none}
.purpose{margin-top:14px;max-width:62ch;font-size:19px;line-height:1.5;color:var(--body)}
.cards{display:grid;gap:20px;margin-top:32px}

/* Question card */
.qnum{font-size:16px;font-weight:700;color:var(--teal)}
.q{margin-top:6px;font-size:20px;line-height:1.4;font-weight:600;color:var(--ink)}
.why{margin-top:12px;font-size:16px;line-height:1.5;color:var(--muted)}
.why b{font-weight:700;color:var(--body)}
.bring{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.bring b{margin-inline-end:4px;font-size:16px;font-weight:700;color:var(--body)}
.chip{padding:6px 14px;border-radius:12px;background:var(--teal-tint);color:var(--teal-deep);font-size:16px;line-height:1.35;font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-width:460px;min-width:0;margin-top:22px;padding:5px;border:0;border-radius:999px;background:var(--panel)}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:999px;color:var(--body);font-size:16px;font-weight:600;text-align:center;transition:background .15s,color .15s}
.seg input:not(:checked):hover+span{background:rgba(255,255,255,.65)}
.seg input[value="notasked"]:checked+span{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(11,17,21,.14)}
.seg input[value="asked"]:checked+span{background:#BFE0E4;color:var(--teal-deep);font-weight:700}
.seg input[value="answered"]:checked+span{background:var(--teal);color:#fff;font-weight:700}
.seg input:focus-visible+span{outline:3px solid var(--teal-bright);outline-offset:2px}
.notes-label{display:block;margin-top:22px;font-size:16px;font-weight:700;color:var(--body)}
textarea,.field input{display:block;width:100%;border:0;border-radius:14px;background:var(--panel);color:var(--ink);font:inherit}
textarea{min-height:calc(3 * 1.5em + 28px);margin-top:8px;padding:14px 16px;font-size:17px;line-height:1.5;resize:none;overflow:hidden}
textarea::placeholder,.field input::placeholder{color:var(--muted);opacity:1}
.print-block{margin-top:12px}

/* Pager */
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px}
.pager .btn{flex:0 1 auto}
.pager .btn:not(.ghost){margin-inline-start:auto}

/* Baseline form */
.stack{display:grid;gap:20px;margin-top:32px}
.stack .cards{margin-top:0}
.card h3,.panel h3{font-size:22px;line-height:1.25;font-weight:800;color:var(--ink)}
.card h3+.group{margin-top:20px}
.group+.group{margin-top:32px}
.group h4{font-size:18px;line-height:1.3;font-weight:700;color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:14px}
.fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:grid;grid-template-rows:1fr auto;gap:8px}
.field label{font-size:16px;line-height:1.35;font-weight:600;color:var(--ink)}
.field input{min-height:52px;padding:0 16px;font-size:20px;font-weight:600;-moz-appearance:textfield;appearance:textfield}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.panel{background:var(--panel);border-radius:20px;padding:28px}
.panel>p.lead{margin-top:6px;font-size:16px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.tile{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:16px;background:var(--surface)}
.tile-name{font-size:16px;font-weight:700;color:var(--ink)}
.tile-val{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--teal-deep)}
.tile-val.is-empty{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:0;color:var(--muted)}
.tile-desc{font-size:16px;line-height:1.45;color:var(--muted)}
.evidence-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.evidence-count{font-size:16px;font-weight:700;color:var(--teal-deep)}
.check{display:grid;gap:4px;margin-top:14px;list-style:none}
.check label{display:flex;align-items:flex-start;gap:14px;min-height:48px;padding:11px 12px;border-radius:14px;font-size:17px;line-height:1.45;color:var(--ink);cursor:pointer}
.check label:hover{background:var(--panel)}
.check input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--teal);cursor:pointer}
.targets{font-size:16px;line-height:1.55;color:var(--body)}

noscript p{margin:40px auto;max-width:560px;padding:0 24px;font-size:18px}

/* Mobile */
@media (max-width:999px){
  .app{display:block;padding:0 16px 80px}
  .side{display:contents}
  .brand{padding:20px 0 8px}
  .brand img{height:34px}
  .brand h1{margin-top:14px;font-size:22px}
  .nav{position:sticky;top:0;z-index:20;flex-direction:row;gap:8px;margin:0 -16px;padding:10px 16px;overflow-x:auto;background:var(--paper);scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;gap:10px;min-height:44px;padding:8px 16px;border-radius:999px;font-size:16px;white-space:nowrap}
  .nav .count{font-size:16px}
  .top{margin-top:16px}
  .card,.panel{padding:20px}
  .sec{margin-top:36px}
  .purpose{font-size:18px}
  .cards{margin-top:24px}
  .q{font-size:20px}
  .actions .btn,.actions .confirm .btn{flex:1 1 auto}
  .pager .btn{flex:1 1 100%;margin-inline-start:0!important}
  .fields,.fields.cols-3,.tiles{grid-template-columns:minmax(0,1fr)}
  .tile-val{font-size:36px}
  .seg span{padding:0 4px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Print: every section, with status and notes, one section per page */
@media print{
  @page{size:A4;margin:16mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;font-size:11pt;line-height:1.45}
  .app{display:block;max-width:none;padding:0}
  .side{position:static;display:block;max-height:none;overflow:visible;padding:0}
  .nav,.actions,.bar,.intro,.warn,.seg,.notes-label,textarea,.pager,noscript,.lang{display:none!important}
  .print-only{display:block}
  .brand img{height:32px}
  .brand h1{margin-top:12px;font-size:20pt}
  .brand p{font-size:11pt}
  .print-date{margin-top:4px;font-size:10pt;color:var(--muted)}
  .top.card{margin:16px 0 28px;padding:0;box-shadow:none;background:none}
  .progress-text{font-size:13pt}
  .sec,.sec.is-active{display:block;margin-top:0}
  .sec+.sec{break-before:page}
  .sec h2{font-size:24pt}
  .purpose{font-size:12pt}
  .cards,.stack{display:block;margin-top:18px}
  .card{margin-bottom:8px;box-shadow:none;border-radius:0;padding:0 0 10px;break-inside:avoid}
  .q{margin-top:2px;font-size:12pt}
  .why{margin-top:6px}
  .bring{margin-top:8px}
  .why,.chip,.bring b{font-size:10pt}
  .print-block{display:block;font-size:10.5pt}
  .print-block p+p{margin-top:4px}
  .print-block b{color:var(--ink)}
  .print-notes span{white-space:pre-wrap}
  .panel{margin-bottom:14px;border-radius:12px;padding:16px;break-inside:avoid}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .group{break-inside:avoid}
  .group+.group{margin-top:20px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:14px}
  .field input{min-height:0;padding:8px 12px;font-size:12pt}
  .tile-val{font-size:22pt}
  .check input{width:16px;height:16px}
}

.nw{white-space:nowrap}

/* Arabic (right to left): letter spacing breaks joining, and Arabic needs taller lines */
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] body{line-height:1.75}
html[lang=ar] .brand h1,html[lang=ar] .sec h2{line-height:1.35}
html[lang=ar] .q,html[lang=ar] .card h3,html[lang=ar] .panel h3{line-height:1.6}
html[lang=ar] .tile-val{line-height:1.4}