/* TIENGHANTOPIK — Account & Authentication (prototype). Reuses tokens.css, site.css, library.css (.fld, .notice, .xc), results.css, skills.css. */
.auth{padding:var(--s-8) 0 0}
.narrow{max-width:520px}
.auth h1{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);margin:0 0 var(--s-2)}
.auth .lead{margin:0 0 var(--s-5);font-size:var(--fs-16)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch);font-weight:700;color:var(--text-primary);margin-bottom:var(--s-2)}
.acard{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-6)}
.afld{margin-bottom:var(--s-4)}
.afld label{font-size:var(--fs-16);color:var(--text-primary);font-weight:600}
.afld input{min-height:48px;font-size:var(--fs-16)}
.afld input[readonly]{background:var(--state-disabled-bg)}
.afld .pw{position:relative}
.afld .pw input{padding-right:56px}
.pwt{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:none;border-radius:var(--r-md);cursor:pointer;display:grid;place-items:center;color:var(--text-secondary)}
.pwt:hover{background:var(--bg-subtle)}
.pwt[aria-pressed="true"]{color:var(--text-primary)}
.fh{margin:0;font-size:var(--fs-14);color:var(--text-secondary)}
.fh:empty{display:none}
.fe{display:flex;gap:var(--s-2);align-items:flex-start;margin:0;font-size:var(--fs-14);font-weight:600;color:var(--state-error)}
.afld.err input{border:2px solid var(--state-error);background:var(--state-error-bg)}
.esum{border:2px solid var(--state-error);background:var(--state-error-bg);color:var(--state-error);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
.esum:focus{outline:3px solid var(--focus);outline-offset:2px}
.es-h{display:flex;gap:var(--s-2);align-items:center}
.esum ul{margin:var(--s-2) 0 0;padding-left:var(--s-6)}
.esum a{color:var(--state-error);font-weight:600}
.block{width:100%}
.block[disabled]{opacity:1}
.flink{margin:calc(var(--s-2)*-1) 0 var(--s-5);font-size:var(--fs-14)}
.flink a,.alinks a,.legal a{font-weight:700;color:var(--coral-700);text-underline-offset:3px}
.alinks{text-align:center;margin:var(--s-5) 0 0}
.alinks p{margin:0}
.legal{margin:var(--s-4) 0 0;font-size:var(--fs-14);color:var(--text-secondary)}
.legal a.ph{border-bottom:1px dashed var(--border-strong);text-decoration:none}
.adone{display:grid;gap:var(--s-3);justify-items:start}
.adone svg{color:var(--text-secondary)}
.adone h2{font-size:var(--fs-24)}
.adone h2:focus{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.adone p{margin:0;color:var(--text-secondary)}
.pm:empty::before{content:"";display:none}
/* guest exploration */
.gtabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0}
.gtab{min-height:var(--touch);padding:0 var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--bg-surface);font-weight:700;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.gtab[aria-selected="true"]{background:var(--n-900);border-color:var(--n-900);color:#fff}
.gnote{margin:var(--s-3) 0;color:var(--text-secondary);font-size:var(--fs-14)}
.gstrip{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;background:var(--state-info-bg);color:#143F70;border-radius:var(--r-md);padding:var(--s-2) var(--s-4);font-size:var(--fs-14);margin:var(--s-3) 0}
.gstrip>span{flex:1 1 16rem}
.gstrip .btn{min-height:40px}
.gstrip .x{padding:0;width:40px}
.mock{border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--s-5);background:var(--bg-sunken);margin:var(--s-3) 0}
.mock-t{margin:0 0 var(--s-3);font-weight:700}
.mock .xgrid{margin:0}
.hintB{display:flex;gap:var(--s-2);align-items:flex-start;margin:0;font-size:var(--fs-14);color:var(--text-secondary)}
.gpanel{border:2px solid var(--n-900);border-radius:var(--r-md);padding:var(--s-4);margin-top:var(--s-4);background:#fff}
.gpanel:focus{outline:3px solid var(--focus);outline-offset:3px}
.gpanel h3{font-size:var(--fs-18);margin:0 0 var(--s-2)}
.gpanel p{margin:0 0 var(--s-3)}
.gp-a{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.gopen{margin:var(--s-8) 0 0;border-top:1px solid var(--border);padding-top:var(--s-5)}
.gopen h2{font-size:var(--fs-20);margin:0 0 var(--s-3)}
.gopen ol{margin:0;padding-left:var(--s-6);display:grid;gap:var(--s-2)}
.mock .qcard{margin-top:0}
@media (max-width:480px){.acard{padding:var(--s-4)}.gstrip .btn:not(.x){flex:1 1 auto}}