/* Layout: one calm column, a sticky header with the language switch, three steps (About you → your branch → Consent), then the stored-record view. */
:root{
  --paper:#F3F5F2; --surface:#FFFFFF; --ink:#17211E; --muted:#59645F; --line:#D5DCD7;
  --accent:#0F5C52; --accent-ink:#FFFFFF; --accent-soft:#E3EFEC;
  --brass:#8A5F17; --brass-soft:#F6EEDC;
  --error:#B3261E; --error-soft:#FBE9E7; --warn-soft:#FFF3D6;
  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-body:"IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ar:"IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1412; --surface:#151D1A; --ink:#E4EBE7; --muted:#99A6A0; --line:#2A3632;
  --accent:#5BBFAE; --accent-ink:#04201B; --accent-soft:#16302B;
  --brass:#D9AE62; --brass-soft:#2B2414;
  --error:#FF8A80; --error-soft:#3A1C1A; --warn-soft:#2E2614; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E1412; --surface:#151D1A; --ink:#E4EBE7; --muted:#99A6A0; --line:#2A3632;
  --accent:#5BBFAE; --accent-ink:#04201B; --accent-soft:#16302B;
  --brass:#D9AE62; --brass-soft:#2B2414;
  --error:#FF8A80; --error-soft:#3A1C1A; --warn-soft:#2E2614; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
#app[dir="rtl"]{font-family:var(--f-ar)}
.wrap{max-width:46rem;margin:0 auto;padding-inline:16px}

header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand{font-weight:600;letter-spacing:.08em;font-size:.82rem;text-transform:uppercase;color:var(--accent)}
.brand span{color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none;margin-inline-start:8px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.lang button{border:0;background:none;color:var(--ink);font:inherit;font-size:.88rem;padding:4px 12px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.lang button:last-child{font-family:var(--f-ar)}


.intro{padding-block:28px 8px}
.intro h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.7rem,4.6vw,2.3rem);line-height:1.15;margin:0 0 10px;text-wrap:balance}
#app[dir="rtl"] .intro h1{font-family:var(--f-ar);font-weight:600}
.intro p{margin:0 0 8px;color:var(--muted);max-width:62ch}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-block:20px 6px;padding:0;list-style:none}
.steps li{border-top:3px solid var(--line);padding-top:6px;font-size:.8rem;color:var(--muted);min-width:0}
.steps li b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li.on{border-color:var(--accent)} .steps li.done{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,4vw,30px);margin-block:14px 40px}
.stephead{margin:0 0 4px;font-size:1.3rem;font-weight:600;outline:none}
.stepintro{margin:0 0 6px;color:var(--muted)}
.qs{display:flex;flex-direction:column;gap:26px;margin-top:22px}
.q{border:0;margin:0;padding:0;min-width:0}
.lbl{display:block;font-weight:600;margin-bottom:4px;padding:0}
.opt-tag{font-weight:400;color:var(--muted);font-size:.88em}
.help{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.col{display:none;margin:2px 0 8px;font-size:.78rem;color:var(--brass);font-family:var(--f-mono);direction:ltr;text-align:left}
.col span{font-family:var(--f-body)}
.showcols .col{display:block}

input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 60%,var(--muted));border-radius:var(--r);padding:10px 12px;min-height:44px}
textarea{min-height:96px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ltr{direction:ltr} #app[dir="rtl"] .ltr{text-align:right}
.counter{font-size:.8rem;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}

.opts{display:grid;gap:8px}
@media (min-width:640px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;background:var(--surface);min-width:0}
.opt input{margin:4px 0 0;accent-color:var(--accent);flex:none;width:18px;height:18px}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt.excl{border-style:dashed}
.opt .yr{margin-inline-start:auto;width:auto;min-height:34px;padding:4px 8px;font-size:.88rem}

.consent{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer}
.consent input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--accent)}
.consent:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.ta{position:relative}
.ta ul{position:absolute;inset-inline:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgb(0 0 0 / .12);z-index:3;max-height:280px;overflow:auto}
.ta li{padding:9px 10px;border-radius:6px;cursor:pointer}
.ta li[aria-selected="true"],.ta li:hover{background:var(--accent-soft)}
.ta li small{display:block;color:var(--muted)}
.ta li.new{border-top:1px solid var(--line);margin-top:4px;color:var(--accent)}
.chosen{margin-top:6px;font-size:.88rem;color:var(--muted)}

.notice{margin-top:8px;padding:10px 12px;border-radius:var(--r);font-size:.9rem;background:var(--warn-soft);display:flex;flex-direction:column;gap:8px}
.notice.info{background:var(--accent-soft)}
.notice label{display:flex;gap:8px;align-items:flex-start}
.err{margin:6px 0 0;color:var(--error);font-size:.9rem;font-weight:500}
.q.bad input[type=text],.q.bad input[type=email],.q.bad input[type=tel],.q.bad input[type=url],.q.bad textarea,.q.bad select,.q.bad .opts .opt,.q.bad .consent{border-color:var(--error)}
.summary{background:var(--error-soft);border:1px solid var(--error);border-radius:var(--r);padding:10px 14px;margin-top:16px;color:var(--ink)}
.summary:focus{outline:2px solid var(--error);outline-offset:2px}

.nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.btn{font:inherit;font-weight:600;border-radius:var(--r);padding:11px 22px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);min-height:44px}
.btn.ghost{background:transparent;color:var(--accent)}
.btn[hidden]{display:none}

.done h2{font-size:1.4rem;margin:0 0 8px}
.done p{margin:0 0 8px;max-width:62ch}
.legacy-record{margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
.record h3{margin:0 0 4px;font-size:1rem;color:var(--brass)}
.record .help{margin-bottom:12px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{text-align:start;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb,var(--paper) 60%,var(--surface))}
td.c{font-family:var(--f-mono);white-space:nowrap;direction:ltr;text-align:left}
td.v code{font-family:var(--f-mono);font-size:.84rem}
td.v small{display:block;color:var(--muted)}
tr.flag td{background:var(--brass-soft)}
tr:last-child td{border-bottom:0}
.rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.foot{color:var(--muted);font-size:.8rem;padding-block:0 32px}
@media (prefers-reduced-motion:no-preference){.card{animation:rise .25s ease-out}@keyframes rise{from{transform:translateY(6px);opacity:.6}to{transform:none;opacity:1}}}

.btn[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.msgpage{padding-block:40px}
.msgpage h1{font-size:1.5rem;margin:0 0 10px}
.msgpage p{color:var(--muted);max-width:60ch}
a{color:var(--accent)}