/* PageKept hub. docs/PORTAL-REDESIGN.md section 4; component classes in
   docs/portal-redesign/COMPONENTS.md. Mobile first: phone below 640px, compact rail from
   640px, full rail from 1024px. Served from the binary; no inline styles anywhere. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/open-sans-latin-400.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/open-sans-latin-600.woff2) format("woff2")}
@font-face{font-family:"PageKept Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/cascadia-mono-latin.woff2) format("woff2")}
:root{--canvas:#F3F3F3;--surface:#FFFFFF;--surface-selected:#E8F1FB;--ink:#1B1B1B;--ink-2:#5C5C5C;--stroke:#8A8A8A;--rule:#E0E0E0;
--accent:#0067B8;--accent-hover:#005A9E;--accent-pressed:#004C85;--on-accent:#FFFFFF;--focus:#1B1B1B;
--success:#0F7B0F;--success-bg:#DFF6DD;--caution:#8A5300;--caution-bg:#FFF4CE;--critical:#C42B1C;--critical-bg:#FDE7E9;
--font:"Open Sans",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--mono:"Cascadia Mono","PageKept Mono",Consolas,ui-monospace,Menlo,monospace;
--t-title:1.625rem/2.125rem;--t-title-phone:1.375rem/1.875rem;--t-heading:1.1875rem/1.6875rem;--t-body:1rem/1.5rem;--t-body-strong:1rem/1.5rem;--t-secondary:0.9375rem/1.3125rem;--t-mono:0.9375rem/1.375rem;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;
--gutter:16px;--rail:264px;--rail-compact:88px;--list:380px;--measure:760px;--target:3rem;--bar:64px}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px;scroll-padding-bottom:80px}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--t-body) var(--font);letter-spacing:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
h1,h2,h3,p{margin:0}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--accent-hover)}
strong{font-weight:600}
code,.mono,kbd,pre{font-family:var(--mono);font-size:.9375rem}
img,svg,video{max-width:100%}
svg.ic{flex:none;fill:currentColor}
svg.ic24{width:24px;height:24px}
svg.ic20{width:20px;height:20px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-200px;z-index:10;display:inline-flex;align-items:center;min-height:var(--target);padding:0 16px;background:var(--surface);color:var(--ink);font-weight:600;border:1px solid var(--stroke)}
.skip:focus{top:8px}
[hidden]{display:none!important}

/* Shell: phone */
.app{overflow-x:clip}
.rail{display:none}
.main{min-width:0;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
.main:has(.undo-bar){padding-bottom:calc(var(--bar) + 128px + env(safe-area-inset-bottom,0px))}
.topbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;min-height:56px;padding:4px 8px 4px 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.topbar .brand{flex:none;min-width:44px;margin-left:-8px;padding:0 8px}
.topbar .t{flex:1;min-width:0;font:600 var(--t-heading) var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .back{display:inline-flex;align-items:center;gap:8px;min-height:var(--target);min-width:var(--target);margin-left:-8px;padding:0 8px;color:var(--accent);font-weight:600;text-decoration:none}
.topbar .back svg{fill:currentColor}
.topbar .webmail{padding:0 12px}
.topbar form.signout .btn{min-height:44px;padding:0 12px}
.account{position:relative}
.account summary{display:flex;align-items:center;gap:8px;min-height:var(--target);min-width:var(--target);padding:0 4px;list-style:none;cursor:pointer}
.account summary::-webkit-details-marker{display:none}
.initials{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--ink);color:var(--surface);font:600 .875rem/1 var(--font)}
.account .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.account-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:4;width:min(320px,calc(100vw - 32px));padding:16px;background:var(--surface);border:1px solid var(--stroke);display:grid;gap:8px}
.account-panel .who{font-weight:600}
.pane{display:block;background:var(--surface);padding:24px var(--gutter) 32px;min-height:calc(100vh - 56px - var(--bar));min-height:calc(100dvh - 56px - var(--bar))}
.pane:focus{outline:none}
.pane:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
html:has(.undo-bar){scroll-padding-bottom:208px}
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:2;background:var(--surface);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.bottombar ul{display:flex;list-style:none;margin:0;padding:0}
.bottombar li{flex:1 1 0;min-width:0}
.bottombar a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--bar);padding:4px 2px;color:var(--ink-2);text-decoration:none;font:600 var(--t-secondary) var(--font);text-align:center;position:relative}
.bottombar a svg{fill:currentColor}
.bottombar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottombar a[aria-current="page"]{color:var(--accent)}
.bottombar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:16px;right:16px;height:4px;background:var(--accent)}
.bottombar a:focus-visible,.rail ul a:focus-visible,.rail .brand:focus-visible{outline-offset:-3px}
.undo-slot{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px));z-index:3}
.caution-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px var(--gutter);background:var(--caution-bg);border-left:4px solid var(--caution);color:var(--ink)}
.caution-bar>svg{fill:var(--caution)}
.caution-bar p{flex:1 1 240px}

/* Solo pages: sign in, welcome, a code opened on a phone, errors */
body.solo{background:var(--canvas)}
.solo-head{max-width:560px;margin:0 auto;padding:8px var(--gutter)}
body.solo:has(.narrow) .solo-head{max-width:440px}
.brand{display:inline-flex;align-items:center;min-height:var(--target);color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.logo{display:block;flex:none;background-color:currentColor}
.logo.wordmark{width:11.5rem;height:1.75rem;-webkit-mask:url(/static/wordmark-078d887d389ced6f.svg) no-repeat left center/contain;mask:url(/static/wordmark-078d887d389ced6f.svg) no-repeat left center/contain}
.logo.mark{width:1.5625rem;height:2.25rem;-webkit-mask:url(/static/mark-8731670be178a349.svg) no-repeat left center/contain;mask:url(/static/mark-8731670be178a349.svg) no-repeat left center/contain}
@media (forced-colors:active){.logo{background-color:CanvasText;forced-color-adjust:none}}
.solo-pane{display:block;max-width:560px;margin:0 auto 48px;padding:24px var(--gutter) 32px;background:var(--surface)}
.solo-pane.narrow,.solo-pane:has(.narrow){max-width:440px}
.solo-pane:focus{outline:none}

/* Type and structure */
h1.title,h2.title,.dialog-page h1{font:600 var(--t-title-phone) var(--font);margin:0 0 8px}
.lead{color:var(--ink-2);margin:0 0 8px}
.pane h2,.solo-pane h2{font:600 var(--t-heading) var(--font);margin:32px 0 8px}
.pane h2.title{font:600 var(--t-title-phone) var(--font);margin:0 0 8px}
.inert{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.sechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:32px 0 8px}
.sechead h2{margin:0!important}
.pane p+p,.solo-pane p+p{margin-top:12px}
.hint,.help{color:var(--ink-2);font:400 var(--t-secondary) var(--font);max-width:62ch}
.hint{margin:0 0 8px}
.col{max-width:var(--measure)}
.col>p,.solo-pane>p{max-width:70ch}
.disclose{margin:16px 0}
.disclose summary{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.disclose-body{padding:8px 0 0}
time{white-space:nowrap}
.msg:empty{display:none}
.msg{margin:16px 0;padding:12px 16px;border-left:4px solid var(--critical);background:var(--critical-bg);color:var(--ink)}
hr.rule{border:0;border-top:1px solid var(--rule);margin:24px 0}
.narrow>.btn.full{margin:24px 0 8px}
.hint.after{margin-top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--target);padding:0 16px;border:1px solid var(--stroke);border-radius:0;background:var(--surface);color:var(--ink);font:600 var(--t-body-strong) var(--font);text-decoration:none;text-align:center;cursor:pointer;max-width:100%}
.btn svg{fill:currentColor}
.btn:hover{background:var(--canvas);color:var(--ink)}
.btn:active{background:var(--rule)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.btn.text{border-color:transparent;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:.15em;min-height:44px;padding:0 8px}
.btn.text:hover{background:none;color:var(--accent-hover)}
.btn.full{display:flex;width:100%}
form.act{display:inline-block;margin:0}
form.stack{display:grid;gap:16px;max-width:560px;margin:16px 0}
form.stack>.btn,form.stack>button{justify-self:start}

/* Lists */
ul.list{list-style:none;margin:0;padding:0}
ul.list>li+li{border-top:1px solid var(--rule)}
.row{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 0;color:var(--ink);text-decoration:none;position:relative}
.row.two{min-height:64px}
a.row:hover{background:var(--canvas);color:var(--ink)}
.row>svg.ic{fill:var(--ink)}
.row .txt{flex:1;min-width:0}
.row .p1{display:block;font-weight:600}
.row .p2{display:block;color:var(--ink-2);font:400 var(--t-secondary) var(--font)}
.row .end{color:var(--ink-2);font:400 var(--t-secondary) var(--font);white-space:nowrap}
.row>svg.chev{width:20px;height:20px;flex:none;fill:var(--ink-2)}
.row[aria-current="true"]{background:var(--surface-selected)}
.row[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;background:var(--accent)}
.split{display:block}
.split.has-detail>.listpane{display:none}
.detailpane{min-width:0}

/* State */
.status{display:flex;align-items:center;gap:8px;color:var(--ink);font:400 var(--t-secondary) var(--font)}
.status::before{content:"";width:8px;height:8px;flex:none;background:var(--stroke)}
.status.ok::before{background:var(--success)}
.status.caution::before{background:var(--caution)}
.status.critical::before{background:var(--critical)}
.banner{display:flex;gap:16px;align-items:flex-start;padding:16px;margin:16px 0;border-left:4px solid var(--accent);background:var(--surface-selected);color:var(--ink)}
.banner>svg{fill:var(--accent)}
.banner.ok{border-color:var(--success);background:var(--success-bg)}
.banner.ok>svg{fill:var(--success)}
.banner.caution{border-color:var(--caution);background:var(--caution-bg)}
.banner.caution>svg{fill:var(--caution)}
.banner.critical{border-color:var(--critical);background:var(--critical-bg)}
.banner.critical>svg{fill:var(--critical)}
.banner-text{flex:1;min-width:0}
.banner-action{margin-top:12px}
.note{display:flex;gap:16px;align-items:flex-start;margin:16px 0}
.note>svg{fill:var(--accent)}
.note p{margin:0 0 16px;max-width:62ch}
.undo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:8px var(--gutter);background:var(--ink);color:var(--surface)}
.undo-bar p{flex:1 1 100%;font-weight:600}
.undo-bar .btn.text{color:var(--surface)}
.undo-bar .btn.text:focus-visible{outline-color:var(--surface)}
.empty{padding:16px 0}
.empty p:first-child{margin-bottom:4px}
.meter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0}
.meter svg.bar{flex:1 1 200px;max-width:360px;height:8px}
.bar .track{fill:var(--rule)}
.bar .fill{fill:var(--accent)}
.meter.full .bar .fill{fill:var(--caution)}

/* Forms */
.field{display:grid;gap:4px;max-width:560px}
.field label,.choices legend{font-weight:600}
.field .optional{font-weight:400;color:var(--ink-2)}
input,select,textarea,button{font:inherit;color:inherit}
.field input,.field select,.field textarea{width:100%;min-height:var(--target);padding:0 12px;border:1px solid var(--stroke);border-radius:0;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom:2px solid var(--accent)}
.field-error{display:flex;gap:8px;align-items:flex-start;color:var(--critical);font-weight:600}
.field-error svg{fill:var(--critical);margin-top:3px}
.choices{border:0;margin:0;padding:0;display:grid}
.choices legend{padding:0 0 8px}
.choice,.switch-row{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 0;border-top:1px solid var(--rule);cursor:pointer}
.choice:last-child{border-bottom:1px solid var(--rule)}
.choice .txt,.switch-row .txt{flex:1;min-width:0}
.choice .p1,.switch-row .p1{display:block}
.choice .p2,.switch-row .p2{display:block;color:var(--ink-2);font:400 var(--t-secondary) var(--font)}
.choice input{order:-1;width:24px;height:24px;margin:0;accent-color:var(--accent);flex:none}
.switch-row input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:24px;margin:0;border:1px solid var(--stroke);background:var(--surface);position:relative;cursor:pointer}
.switch-row input::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--ink-2)}
.switch-row input:checked{background:var(--accent);border-color:var(--accent)}
.switch-row input:checked::before{left:23px;background:var(--on-accent)}
.secret-field{margin:8px 0}
.secret-field .k{display:block;color:var(--ink-2);font:400 var(--t-secondary) var(--font);margin:0 0 4px}
.secret-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
code.secret{flex:1 1 220px;min-width:0;display:block;padding:12px 16px;background:var(--canvas);border:1px solid var(--stroke);font:400 var(--t-mono) var(--mono);word-break:break-all;user-select:all;-webkit-user-select:all}

/* Composites */
table.records{width:100%;border-collapse:collapse;margin:8px 0 16px}
.records th,.records td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
.records thead th{color:var(--ink-2);font:600 var(--t-secondary) var(--font)}
.records tbody th{font-weight:600}
.records code{overflow-wrap:anywhere}
.qr-panel{margin:16px 0}
.qr{width:min(296px,100%);padding:16px;margin:16px 0;background:#FFFFFF;border:1px solid var(--rule)}
.qr svg{display:block;width:100%;height:auto}
dialog.dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px var(--gutter);border:0;background:var(--surface);color:var(--ink)}
dialog.dialog::backdrop{background:rgba(27,27,27,.4)}
.dialog h2,.dialog-page h1{margin:0 0 8px}
.dialog-back{margin:-8px 0 16px -8px}
.dialog-back .btn.text{text-decoration:none;font-weight:600}
.dialog p,.dialog-page p{margin:0 0 16px;max-width:62ch}
.dialog-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.dialog-buttons>*{flex:1 1 200px}
.dialog-buttons .btn{width:100%}
.dialog-buttons form.act{display:block}

@media (min-width:640px){
  html{scroll-padding-top:16px;scroll-padding-bottom:16px}
  .main,.main:has(.undo-bar){padding-bottom:0}
  html:has(.undo-bar){scroll-padding-bottom:96px}
  .app{display:flex;min-height:100vh;min-height:100dvh}
  .rail{display:flex;flex-direction:column;flex:none;width:var(--rail-compact);position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;padding:12px 0 24px;background:var(--canvas)}
  .rail .brand{display:flex;justify-content:center;padding:0 4px;margin-bottom:8px}
  .rail .wordmark,.topbar .brand{display:none}
  .rail .biz{display:none}
  .rail ul{list-style:none;margin:0;padding:0}
  .rail ul a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--bar);padding:8px 4px;color:var(--ink);text-decoration:none;font:400 var(--t-secondary) var(--font);text-align:center;position:relative}
  .rail ul a svg{fill:currentColor}
  .rail ul a:hover{background:var(--rule);color:var(--ink)}
  .rail ul a[aria-current="page"]{background:var(--surface-selected);font-weight:600}
  .rail ul a[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;background:var(--accent)}
  .rail .group{margin:12px 12px 4px;padding-top:12px;border-top:1px solid var(--stroke);height:1px;overflow:hidden;color:transparent}
  .main{flex:1;display:flex;flex-direction:column}
  .topbar{position:static;justify-content:flex-end;min-height:64px;padding:8px 24px;background:var(--canvas);border-bottom:0}
  .topbar .t{display:none}
  .topbar .back{margin-right:auto}
  .account .name{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .pane{flex:1;margin:0 24px 24px 0;padding:32px;min-height:0}
  .bottombar{display:none}
  .undo-slot{position:sticky;bottom:0;left:auto;right:auto;margin:0 24px 24px 0}
  .undo-bar p{flex:1 1 200px}
  .caution-bar{padding:12px 24px}
  .solo-head{padding:16px 32px}
  .solo-pane{padding:32px}
  h1.title,h2.title,.pane h2.title,.dialog-page h1{font:600 var(--t-title) var(--font)}
  table.records{table-layout:fixed}
  .records thead th:nth-child(1){width:22%}
  .records thead th:nth-child(2){width:5.5rem}
  .records thead th:nth-child(3){width:24%}
  .records thead th:nth-child(5){width:8.5rem}
  .records td,.records th{overflow-wrap:normal}
  .records td[data-label="Value"],.records code{overflow-wrap:anywhere}
  .dialog-back{display:none}
  dialog.dialog{width:calc(100% - 32px);max-width:560px;height:fit-content;margin:auto;padding:24px;border:1px solid var(--stroke);box-shadow:0 8px 24px rgba(0,0,0,.16)}
}
@media (max-width:639.98px){
  table.records,.records tbody,.records tr,.records th,.records td{display:block}
  .records thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .records tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .records th,.records td{border:0;padding:4px 0}
  .records tbody th{font:600 var(--t-heading) var(--font)}
  .records td::before{content:attr(data-label);display:block;color:var(--ink-2);font:400 var(--t-secondary) var(--font)}
}
@media (min-width:1024px){
  .rail{width:var(--rail);padding:8px 0 24px}
  .rail .brand{justify-content:flex-start;padding:0 24px;margin-bottom:0}
  .rail .wordmark{display:block}
  .rail .mark{display:none}
  .rail .biz{display:block;padding:0 24px 24px;color:var(--ink-2);font:400 var(--t-secondary) var(--font)}
  .rail .brand+ul{margin-top:40px}
  .rail ul a{flex-direction:row;justify-content:flex-start;gap:16px;min-height:var(--target);padding:0 24px;font:400 var(--t-body) var(--font);text-align:left}
  .rail .group{height:auto;overflow:visible;color:var(--ink-2);margin:16px 24px 4px;padding-top:16px;border-top-color:var(--rule);font:600 var(--t-secondary) var(--font)}
  .topbar .back{display:none}
  .split{display:flex;background:var(--surface);margin:0 -32px -32px;min-height:calc(100vh - 88px);min-height:calc(100dvh - 88px)}
  .split>.listpane,.split.has-detail>.listpane{display:block;width:var(--list);flex:none;border-right:1px solid var(--rule);padding:0 24px 32px;overflow-y:auto;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);position:sticky;top:0}
  .split .listpane ul.list{margin-left:-24px;margin-right:-24px}
  .split .listpane .row{padding-left:24px;padding-right:24px}
  .detailpane{flex:1;padding:0 32px 32px;max-width:calc(var(--measure) + 64px)}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.row,.rail ul a{transition:background-color .1s}
  .undo-bar{animation:rise .15s ease-out}
  @keyframes rise{from{transform:translateY(8px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Existing pages, until wave 2 rebuilds them on the components above. */
.legacy .intro{color:var(--ink-2);max-width:70ch;margin:0 0 8px}
.legacy .intro p{margin:0 0 8px}
.legacy section.sec{margin:32px 0 0}
.legacy section.sec h2{margin:0 0 8px}
.legacy section.sec>p{margin:0 0 12px;max-width:70ch}
.legacy .tbl{overflow-x:auto;margin:0 0 16px}
.legacy table{border-collapse:collapse;width:100%}
.legacy th{text-align:left;font:600 var(--t-secondary) var(--font);color:var(--ink-2);padding:8px 16px 8px 0;border-bottom:1px solid var(--stroke);white-space:nowrap}
.legacy td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.legacy th:last-child,.legacy td:last-child{padding-right:0}
.legacy .muted{color:var(--ink-2)}
.legacy .state{display:inline-flex;align-items:center;gap:8px}
.legacy .state::before{content:"";width:8px;height:8px;flex:none;background:var(--stroke)}
.legacy .state.ok::before{background:var(--success)}
.legacy .state.warn::before{background:var(--caution)}
.legacy .state.danger::before{background:var(--critical)}
.legacy input:not([type=checkbox]):not([type=hidden]):not([type=radio]),.legacy select{min-height:var(--target);padding:0 12px;border:1px solid var(--stroke);border-radius:0;background:var(--surface);color:var(--ink);max-width:100%}
.legacy input:focus,.legacy select:focus{border-bottom:2px solid var(--accent)}
.legacy button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);padding:0 16px;border:1px solid var(--stroke);border-radius:0;background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;max-width:100%}
.legacy button:hover{background:var(--canvas)}
.legacy form.inline{display:inline-block;vertical-align:middle;margin:0 8px 0 0}
.legacy form.inline button{min-height:44px;padding:0 4px;border-color:transparent;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:.15em}
.legacy form:not(.inline){display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.legacy form:not(.inline) input:not([type=checkbox]):not([type=hidden]),.legacy form:not(.inline) select{flex:1 1 180px;min-width:0}
.legacy form:not(.inline) label{display:inline-flex;align-items:center;gap:8px}
.legacy form:not(.inline) label.field{display:block;flex-basis:100%;font-weight:600}
.legacy label.field{display:block;font-weight:600;margin:0 0 4px}
.legacy .secret{display:block;padding:12px 16px;margin:8px 0;background:var(--canvas);border:1px solid var(--stroke);font:400 var(--t-mono) var(--mono);word-break:break-all;user-select:all;-webkit-user-select:all}
.legacy .err{color:var(--critical);font-weight:600}
.legacy p.err:not(:empty){border-left:4px solid var(--critical);background:var(--critical-bg);color:var(--ink);padding:12px 16px;margin:16px 0 0}
.legacy .help{margin:8px 0 0}
.legacy dl.fields{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 16px}
.legacy dl.fields dt{color:var(--ink-2);font:400 var(--t-secondary) var(--font);padding:8px 0 0}
.legacy dl.fields dd{margin:0;padding:0 0 8px;border-bottom:1px solid var(--rule)}
.legacy pre.headers{margin:0 0 16px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-height:24rem;overflow:auto;white-space:pre-wrap;color:var(--ink-2)}
.legacy .cred{margin:16px 0}
.legacy .cred .k{display:block;color:var(--ink-2);font:400 var(--t-secondary) var(--font);margin:0 0 4px}
.legacy details.manual{margin:24px 0}
.legacy details.manual summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline}
.legacy .qr{width:min(296px,100%)}
.legacy code{word-break:break-all}
@media (min-width:640px){
  .legacy dl.fields{grid-template-columns:minmax(9rem,max-content) minmax(0,1fr)}
  .legacy dl.fields dt{padding:12px 24px 12px 0;border-bottom:1px solid var(--rule)}
  .legacy dl.fields dd{padding:12px 0}
}