.page-head { margin-top: var(--s5); }
.page-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.page-sub { margin-top: var(--s1); color: var(--muted); max-width: 72ch; }
.label { font-weight: 500; }
.fp-h { margin: var(--s5) 0 var(--s3); }
.flow .fp.words li { white-space: nowrap; }
.flow .fp.words { margin-bottom: var(--s3); }

.status-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); color: var(--muted); font-size: var(--fs-small); }
.status-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.status-line.bad { color: var(--pill-negative-ink); }
.status-line.bad .dot { background: var(--negative); }

.file-pick { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.file-pick input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick input[type="file"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-shown { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }

.pair-show { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--s4) 0 var(--s1); max-width: 760px; }
.pair-show > div { min-width: 0; padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.pair-k { color: var(--muted); font-size: var(--fs-small); }
.pair-code { margin-top: var(--s1); font-family: var(--mono); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; letter-spacing: 0.08em; }
.pair-key.mono { margin-top: var(--s2); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.pair-dev { margin-top: var(--s2); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; overflow-wrap: anywhere; }
.pair-sub { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); }
.pair-sub.bad { color: var(--pill-negative-ink); }
ol.pair-steps { display: grid; gap: var(--s2); margin: var(--s4) 0 0; padding-left: var(--s5); list-style: decimal; max-width: 66ch; }
ol.pair-steps li::marker { color: var(--muted); }

.login-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sec-gap) var(--col-gap); margin-top: var(--s5); align-items: start; }
.login-grid > .preview { padding-top: var(--pad-lead); }
.login-grid > .lead { align-self: stretch; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gap); margin-top: var(--s4); max-width: 760px; }
.flow .field-pair .field + .field { margin-top: 0; }
.pv-what { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
#pairStart .pair-steps { margin-top: var(--s5); color: var(--muted); }
.login-grid > .flow { grid-column: span 4; }
.login-grid > .preview { grid-column: span 2; }
.pv-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); padding: var(--s3) 0; }
.pv-rows li + li { border-top: 1px solid var(--rule); }
.pv-rows .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-rows .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }
.pv-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); color: var(--muted); }
.login-grid .actions-row.end { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }

.ways { margin-top: var(--sec-gap); row-gap: 0; }
.way { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(176px, auto); align-items: baseline; column-gap: var(--col-gap); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.way:has(+ .way.quiet), .way:has(+ .panel.quiet) { border-bottom: 1px solid var(--rule); }
.way h2 { margin: 0; }
.way .note { margin: 0; max-width: 60ch; }
.way .btn { margin: 0; justify-self: end; align-self: center; }
.ways > .panel.quiet { margin-top: var(--sec-gap); }
#state h1.answer { font-size: var(--fs-stamp); line-height: var(--lh-stamp); }
#state { max-width: none; }
.what-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.what-list li { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 3fr); column-gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.what-list li > div { display: contents; }
.what-list .t { font-weight: 500; }
.what-list .s { color: var(--muted); }
.ret-grid { margin-top: var(--s6); }
.ret-grid > .ret { align-self: stretch; }
.ret .actions-row { margin-top: auto; padding-top: var(--s4); }
.ret-error { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); color: var(--pill-negative-ink); font-size: var(--fs-small); overflow-wrap: anywhere; max-width: 640px; }
.ret-error[hidden] { display: none; }
ul.ret-next { display: grid; gap: var(--s2); margin-top: var(--s4); padding-left: var(--s5); list-style: disc; max-width: 640px; }
.ret-next li::marker { color: var(--faint); }
.answer.done svg { color: var(--positive); }
.what-list.one { grid-template-columns: minmax(0, 1fr); }
.what-list.one li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.what-list.got { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .what-list.got { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .what-list.got { grid-template-columns: minmax(0, 1fr); } }

.acct-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.acct-title { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.acct-title .avatar { width: 40px; height: 40px; font-size: var(--fs-body); }
.acct-title .page-sub { margin-top: 2px; }
.acct-head + #notices:not(:empty) { margin-top: var(--s1); }
.acct-grid { display: grid; margin-top: var(--s5); }
.acct-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap) var(--col-gap); padding: var(--s5) 0; }
.acct-row + .acct-row { border-top: 1px solid var(--rule); }
.acct-row:first-child { padding-top: var(--s2); }
.acct-label { grid-column: span 2; min-width: 0; padding-top: var(--s2); }
.acct-label h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.acct-label p { margin-top: var(--s2); color: var(--muted); max-width: 46ch; }
.acct-panel { grid-column: span 4; }
.acct-kv { margin-bottom: 0; background: none; padding: 0; gap: var(--s3); }
.acct-kv > div { grid-template-columns: 150px minmax(0, 1fr); }
.acct-kv .kfp { display: inline-flex; }
.acct-more { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); }
.acct-staff { font-weight: 500; }
.erase-when { display: flex; align-items: center; gap: var(--s3); color: var(--pill-negative-ink); font-weight: 600; }
.erase-when svg { width: 18px; height: 18px; color: var(--negative); }
.erase-pending .muted { margin-top: var(--s1); }
.dz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.dz-item { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dz-item + .dz-item { padding-left: var(--s6); border-left: 1px solid var(--rule); }
.dz-item .muted { margin: var(--s1) 0 var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); }
.dz-item > .btn { margin-top: var(--s1); }
.dz-item > .confirm, .dz-item > .verdict, .dz-item > .wait-slot { align-self: stretch; }
.dz-note { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); color: var(--pill-negative-ink); font-size: var(--fs-small); }
.dz .confirm { max-width: none; }
.dz .verdict { margin-top: var(--s3); }
.dz-item[hidden] + .dz-item, .dz:has(> .dz-item[hidden]) > .dz-item { padding-left: 0; border-left: 0; }
.dz:has(> .dz-item[hidden]) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) and (min-width: 961px) { .what-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .login-grid > .flow, .login-grid > .preview { grid-column: 1 / -1; }
  .login-grid > .preview { padding-top: 0; }
  .way { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .way .note { grid-column: 1; grid-row: 2; }
  .way .btn { grid-column: 2; grid-row: 1 / span 2; }
  .what-list { grid-template-columns: minmax(0, 1fr); }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .dz { grid-template-columns: minmax(0, 1fr); }
  .dz-item + .dz-item { margin-top: var(--s4); padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .dz-item > .btn { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .login-grid > .preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; align-content: start; }
  .login-grid > .preview > * { grid-column: 1; }
  .login-grid > .preview > h2 { grid-column: 1 / -1; }
  .login-grid > .preview > .pv-rows { grid-column: 2; grid-row: 2 / span 3; }
  .login-grid > .preview > .pv-rows li:first-child { padding-top: 0; }
  .login-grid > .preview > .pv-what { margin-top: 0; }
  .acct-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .acct-label, .acct-panel { grid-column: auto; }
}
@media (max-width: 760px) {
  .acct-label, .acct-panel { grid-column: 1 / -1; }
  .acct-label p { max-width: 72ch; }
  .acct-row { gap: var(--s3); }
  .way { grid-template-columns: minmax(0, 1fr); }
  .way .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--s2); }
  .what-list li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .pair-show { grid-template-columns: minmax(0, 1fr); }
  .pair-code { font-size: var(--fs-title); line-height: var(--lh-title); }
  .acct-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.flow p.muted + form, .flow p.muted + .field { margin-top: var(--s4); }
.acct-panel.quiet { padding-top: var(--s2); align-items: flex-start; }
.acct-panel.quiet .actions-row:first-child, .acct-panel.quiet #eraseOpen > .actions-row:first-child { margin-top: 0; }

.login-grid .flow > h2 { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; margin-bottom: var(--s4); }
.login-grid .flow > h2:focus { outline: none; }
#way-pair:has(#pairShow:not([hidden])) > h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.015em; }
.pair-code { font-size: var(--fs-stamp); line-height: var(--lh-stamp); }
@media (max-width: 760px) { .pair-code { font-size: var(--fs-stamp); line-height: var(--lh-stamp); } }
.ways-in { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.way-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(150px, auto); column-gap: var(--col-gap); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.way-in .wt { font-weight: 600; }
.way-in .wp { color: var(--muted); max-width: 60ch; }
.way-in > .btn, .way-in > a { justify-self: end; }
.way-in.on > .btn { background: var(--active); border-color: var(--active); }
.way-in.quiet { padding: var(--s3) 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.way-in.quiet .wt { font-weight: 500; }
.ways-in + .login-grid { margin-top: var(--s6); }
@media (max-width: 760px) {
  .way-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  .way-in > .btn, .way-in > a { justify-self: start; margin-top: var(--s2); }
}
.login-grid:has(#done:not([hidden]), #already:not([hidden])) .pv-foot { display: none; }

.pair-show.with-qr { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.pair-show.with-qr > .pair-qr, .pair-show.with-qr > .pair-facts { padding: 0; background: none; }
.pair-qr { display: grid; justify-items: start; gap: var(--s2); margin: 0; }
.pair-qr figcaption { max-width: 176px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pair-facts { display: grid; gap: var(--gap); min-width: 0; }
.pair-facts > div { min-width: 0; padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.pair-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pair-link code { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pair-show.with-qr { grid-template-columns: minmax(0, 1fr); }
  .pair-show.with-qr > .pair-qr { order: 2; }
}

.acct-index { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); }
.acct-index a { font-size: var(--fs-small); line-height: var(--lh-small); }
.acct-index a[hidden] { display: none; }
@media (max-width: 760px) { .acct-index { gap: 0 var(--s4); } .acct-index a { display: inline-flex; align-items: center; min-height: 32px; } .acct-index a[hidden] { display: none; } }
.acct-row { scroll-margin-top: 72px; }
.addr { display: flex; align-items: flex-start; gap: var(--s5); }
.addr .qr-tile { width: 152px; }
.addr-url { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; overflow-wrap: anywhere; }
.addr .muted { margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.acct-sum { font-weight: 500; }
.erase-steps { display: grid; margin: var(--s3) 0 0; }
.erase-steps > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; }
.erase-steps > div + div { border-top: 1px solid var(--negative-border); }
.erase-steps dt { font-weight: 600; color: var(--pill-negative-ink); }
.erase-steps dd { color: var(--text); }
@media (max-width: 760px) {
  .addr { flex-direction: column; gap: var(--s3); }
  .erase-steps > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.notices-note { margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.notices-failing { display: grid; gap: var(--s1); margin-top: var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--pill-warning-ink); overflow-wrap: anywhere; }
.notices-failing .nf-h { font-weight: 500; }
.notices-failing[hidden] { display: none; }
#email .verdict { margin-top: var(--s3); }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion] :is(.login-grid, .acct-grid) :is(.flow, .confirm, .verdict, .erase-pending) {
    transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out);
  }
  @starting-style {
    html[data-motion] :is(.login-grid, .acct-grid) :is(.flow, .confirm, .verdict, .erase-pending):not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}