/* Mission 6 — identity pages (sign-in, activation, recovery, account). Reuses mos.css tokens only. */
.id-body { min-height:100dvh; display:flex; flex-direction:column; background:
  radial-gradient(1200px 500px at 50% -200px, var(--accent-soft), transparent 70%), var(--bg); }
.id-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3); flex-wrap:wrap; }
.id-brand { display:inline-flex; align-items:center; gap:10px; font:700 var(--t-md)/1 var(--font-display); color:var(--text); min-height:44px; }
.id-brand:hover { text-decoration:none; }
.id-mark { width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-weight:800; font-size:15px; }
.id-nav { display:flex; gap:var(--s1); flex-wrap:wrap; }
.id-main { flex:1; width:100%; margin:0 auto; padding:var(--s4) var(--s4) var(--s8); }
.id-main.narrow { max-width:460px; }
.id-main.wide { max-width:880px; }
@media (min-width:720px) { .id-main.narrow { padding-top:var(--s8); } }
.id-card { padding:var(--s6) var(--s5); }
@media (min-width:720px) { .id-card { padding:var(--s8); } }
.id-card h1 { font-size:var(--t-xl); }
.id-lead { color:var(--text-2); margin-top:6px; }
.id-form { margin-top:var(--s5); }
.id-form .btn-block { margin-top:var(--s5); }
.id-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3); }
.id-row .check { min-height:44px; }
.id-link { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.id-alt { text-align:center; margin-top:var(--s4); font-size:var(--t-sm); color:var(--text-2); }
.id-alt a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
.id-pw { position:relative; display:block; }
.id-pw .input { padding-right:76px; }
.id-reveal { position:absolute; right:4px; top:50%; transform:translateY(-50%); min-height:36px; min-width:60px; padding:0 10px; border:0; border-radius:10px;
  background:transparent; color:var(--accent-strong); font:600 var(--t-sm) var(--font); cursor:pointer; }
.id-reveal:hover { background:var(--surface-2); }
.id-codes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2); margin:var(--s4) 0; padding:var(--s4); background:var(--surface-2); border-radius:var(--r-md);
  font:600 15px/1.2 var(--mono); letter-spacing:.04em; list-style:none; }
.id-codes li { padding:6px 4px; text-align:center; }
.id-facts { list-style:none; margin:var(--s4) 0 0; padding:0; }
.id-facts li { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0; }
.id-facts svg { width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px; }
.id-steps { display:flex; gap:6px; margin-bottom:var(--s4); list-style:none; padding:0; }
.id-steps li { flex:1; height:4px; border-radius:var(--r-full); background:var(--line); }
.id-steps li.on { background:var(--accent); }
.id-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:var(--s4); font-size:var(--t-xs); color:var(--text-3); text-align:center; }
.id-session { display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4); min-height:60px; }
.id-session + .id-session { border-top:1px solid var(--line); }
.id-session .lead-ico { width:40px; height:40px; flex:none; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-2); color:var(--text-2); }
.id-session .t { font-weight:600; }
.id-session .d { color:var(--text-2); font-size:var(--t-sm); overflow-wrap:anywhere; }
.id-mailbody { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border-radius:var(--r-md); padding:var(--s4); font-size:var(--t-sm); line-height:1.6; }
.id-meta { display:grid; grid-template-columns:auto 1fr; gap:6px var(--s4); font-size:var(--t-sm); }
.id-meta dt { color:var(--text-3); } .id-meta dd { margin:0; overflow-wrap:anywhere; }
.id-mail-row { display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4); min-height:60px; color:inherit; }
.id-mail-row:hover { background:var(--surface-2); text-decoration:none; }
.id-mail-row .grow { min-width:0; }
.id-mail-row .t { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.id-mail-row .d { color:var(--text-2); font-size:var(--t-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media print { .id-top, .id-foot, .demo-ribbon, .no-print { display:none !important; } .id-codes { background:none; } }
/* authenticator setup: phone path first on touch screens, QR first on computers */
.id-enroll { display:flex; flex-direction:column; gap:var(--s5); margin-top:var(--s5); }
.id-enroll-qr { order:1; } .id-enroll-phone { order:2; } .id-key { order:3; }
@media (pointer:coarse), (max-width:719px) { .id-enroll-phone { order:1; } .id-enroll-qr { order:2; } }
.id-step-h { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-md); margin-bottom:var(--s3); }
.id-num { width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; font-size:13px; font-weight:700; flex:none; }
.id-qr { display:grid; place-items:center; padding:var(--s4); background:#fff; border-radius:var(--r-md); border:1px solid var(--line); }
.id-qr svg { width:min(200px, 100%); height:auto; }
.id-small { font-size:var(--t-sm); color:var(--text-2); margin-top:6px; }
.id-or { font-size:var(--t-base); color:var(--text-2); }
/* only the option that comes first carries the step number; the others read as alternatives */
.id-enroll-phone .id-num-ph, .id-only-touch { display:none; } .id-enroll-phone .id-step-h { font-size:var(--t-base); color:var(--text-2); }
@media (pointer:coarse), (max-width:719px) {
  .id-enroll-phone .id-num-ph { display:grid; } .id-only-touch { display:inline; } .id-only-wide { display:none; }
  .id-enroll-phone .id-step-h { font-size:var(--t-md); color:var(--text); }
  .id-enroll-qr .id-num-qr { display:none; } .id-enroll-qr .id-step-h { font-size:var(--t-base); color:var(--text-2); }
  .id-enroll-qr { order:3 !important; } .id-key { order:2 !important; }
}
.id-keysteps { padding-left:20px; margin:var(--s2) 0 var(--s3); }
.id-keysteps li + li { margin-top:4px; }
.id-secret { font:600 16px/1.4 var(--mono); letter-spacing:.06em; background:var(--surface-2); padding:8px 12px; border-radius:var(--r-sm); overflow-wrap:anywhere; flex:1 1 200px; }
.id-rules { list-style:none; padding:0; margin:var(--s2) 0 0; font-size:var(--t-sm); color:var(--text-2); }
.id-rules li { display:flex; align-items:center; gap:8px; min-height:24px; }
.id-rules li::before { content:"○"; width:16px; text-align:center; color:var(--text-3); font-weight:700; }
.id-rules li[data-ok="1"] { color:var(--ok-600); }
.id-rules li[data-ok="1"]::before { content:"✓"; color:var(--ok-600); }
.id-rules li[data-ok="0"].touched { color:var(--bad-600); }
.id-rules li[data-ok="0"].touched::before { content:"✕"; color:var(--bad-600); }
@media (max-width:719px) { .id-foot > span[aria-hidden] { display:none; } }