/* Account and community screens. Spec: docs/design/auth.md section 0.2. Loaded after the App's inline styles. */
:root { --field-line: #80838A; --danger: #C2361A; }
/* Larger text scale for in-car legibility (body >= 17px) */
.t17 { font-size: 17px; line-height: 1.45; }
.t17 p { margin: 0; }
.t17 .notice, .t17 .foot, .t17 .ghost, .t17 .btn2, .t17 .chip, .t17 .mitem small { font-size: 17px; line-height: 1.45; }
.t17 .foot { text-align: left; }
.t17 .chip { height: 44px; padding: 0 16px; align-self: flex-start; }
.t17 .lbl { display: block; font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.t17 button:focus-visible, .t17 a:focus-visible { outline: 3px solid var(--orangeD); outline-offset: 2px; }
.t17 h1:focus { outline: none; }
.t17 .ghost { width: 100%; }
.t17 .btn2 { flex: none; width: 100%; }
.primary.block { flex: none; width: 100%; }
.primary:disabled, .btn2:disabled, .ghost:disabled { opacity: 0.45; cursor: default; transform: none; }
.btnrow { display: flex; gap: 12px; } .btnrow > * { flex: 1; min-width: 0; }
.field { display: block; width: 100%; height: 64px; border-radius: 16px; border: 2px solid var(--field-line); background: #F7F8FA; padding: 0 16px; font: inherit; font-size: 17px; font-weight: 500; color: var(--fg); }
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25); }
.field[aria-invalid="true"] { border-color: var(--danger); }
.field:disabled { opacity: 0.55; }
.field.code { font-family: var(--mono); font-size: 32px; letter-spacing: 0.4em; padding-left: calc(16px + 0.4em); text-align: center; }
.fieldmsg { display: flex; gap: 8px; align-items: flex-start; min-height: 25px; font-size: 17px; line-height: 1.45; color: var(--muted); }
.fieldmsg svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.fieldmsg > span:first-of-type { flex: 1; }
.fieldmsg.ok { color: var(--greenInk); } .fieldmsg.err { color: #8A1F14; }
.card { background: #F7F8FA; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card b { font-size: 17px; font-weight: 800; }
.card .v { font-size: 24px; font-weight: 800; overflow-wrap: anywhere; }
.card .v.none { font-size: 17px; font-weight: 500; color: var(--muted); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 22px; background: var(--soft); color: var(--fg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.avatar svg { width: 22px; height: 22px; }
.carrow.plain { border-color: transparent; background: #F7F8FA; }
.carrow.plain > svg { width: 18px; height: 18px; }
.carrow.plain .t b, .carrow.plain .t span { overflow-wrap: anywhere; }
.carrow.plain .nudge { color: var(--orangeD); }
.match { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 24px; border: 2px solid var(--orange); background: rgba(255, 90, 31, 0.06); text-align: center; }
.match .lbl { margin-bottom: 0; }
.match output { font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; padding-left: 0.06em; font-variant-numeric: tabular-nums; color: var(--fg); }
.screen .spacer { flex: 1; min-height: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } .primary:active, .iconbtn:active, .round:active { transform: none; } }