/* components shared by every screen: fields, chips, buttons, option cards */
textarea, .nm, .inp, .fld input, .fld select { font:inherit; font-size:16px; color:var(--ink); background:var(--panel); border:1.5px solid var(--rule); border-radius:var(--r); padding:12px 15px; min-height:50px; width:100%; transition:border-color .15s, box-shadow .15s; }
textarea { min-height:120px; resize:vertical; }
textarea:focus-visible, .nm:focus-visible, .inp:focus-visible, .fld input:focus-visible { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
::placeholder { color:var(--soft); opacity:.6; }
.inp { flex:1; min-width:0; width:auto; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:inherit; color:inherit; background:var(--panel); border:1.5px solid var(--rule); border-radius:999px; padding:10px 18px; min-height:46px; cursor:pointer; transition:background .15s, border-color .15s, transform .1s; }
.chip:hover { border-color:var(--primary); } .chip:active { transform:scale(.97); }
.chip.on { background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:600; }
.row2 { display:flex; gap:10px; } .row2 button { margin-top:10px; } button.danger { color:var(--coral); }
summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; } summary::-webkit-details-marker { display:none; }
/* display:flex drops the native triangle, so folded cards draw their own chevron */
details.card > summary::after { content:""; flex:none; margin-inline-start:auto; width:9px; height:9px; border:solid var(--soft); border-width:0 2px 2px 0; transform:translateY(-3px) rotate(45deg); transition:transform .15s; }
details.card[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
button.main { width:100%; font:700 18px var(--display); border:0; border-radius:var(--r); padding:15px 18px; min-height:54px; background:var(--primary); color:var(--on-primary); cursor:pointer; margin-top:14px; transition:transform .1s, box-shadow .15s, filter .15s; box-shadow:0 8px 20px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
button.main:hover:not(:disabled) { filter:brightness(1.07); } button.main:active:not(:disabled) { transform:scale(.985); }
button.main:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
button.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--rule); font-family:var(--body); font-weight:600; box-shadow:none; }
button.inline { width:auto; margin-top:0; padding:0 18px; }
button.link { background:none; border:0; padding:0 4px; min-height:44px; font:600 14px var(--body); color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.hint { font:400 13px var(--body); color:var(--soft); }
.rtl-note { direction:rtl; text-align:right; }
.mt6 { margin-top:6px; } .mt8 { margin-top:8px; }
.wait { color:var(--soft); font-size:15px; }
.coach-wait { direction:rtl; text-align:right; font-size:15px; }
.weak-text { font-size:14px; color:var(--soft); margin-top:4px; }
.learn { min-height:44px; align-items:center; display:inline-flex; font:600 14px var(--body); color:var(--primary); text-decoration:none; border-bottom:1.5px solid currentColor; margin-top:8px; }

/* labelled field */
.fld { display:grid; gap:6px; margin:14px 0; } .fld > span { font:600 14px var(--body); color:var(--soft); }
.fld .pw { position:relative; display:block; font:inherit; color:inherit; } .fld .pw input { padding-inline-end:76px; } .fld .pw button { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); }
.fld .msg-err { color:var(--coral); font:500 14px var(--body); min-height:1px; }

/* option cards (onboarding): one tap picks, the check mark confirms */
.opts { display:grid; gap:10px; margin:6px 0 4px; } .opts.two { grid-template-columns:1fr 1fr; }
.opt { position:relative; text-align:start; font:inherit; color:inherit; background:var(--panel); border:1.5px solid var(--rule); border-radius:var(--r); padding:13px 16px; min-height:54px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:2px; transition:border-color .15s, background .15s, transform .1s; }
.opt b { font:600 16px/1.5 var(--body); } .opt small { color:var(--soft); font:400 13px/1.45 var(--body); }
.opt:hover { border-color:var(--primary); } .opt:active { transform:scale(.99); }
.opt.on { border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary); }
.opt.on::after { content:""; position:absolute; inset-inline-end:14px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.opt.on { padding-inline-end:46px; }
.opt.off { opacity:.45; cursor:not-allowed; }
@media (max-width:420px) { .opts.two { grid-template-columns:1fr; } }
/* WhatsApp follow-up: a link that looks like the main button, in WhatsApp green */
a.main.wa { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; min-height:54px; margin-top:14px; padding:15px 18px; border-radius:var(--r); font:700 18px var(--display); text-decoration:none; background:#16793D; color:#fff; }
a.main.wa:focus-visible { outline:3px solid color-mix(in srgb, #16793D 45%, transparent); outline-offset:2px; }