/* ONLORE account: member-bar "Connect X" button and the two-step onboarding dialog. Every selector carries an .account- class.
   Floors (CONTRACT v2.3 §0): labels, pills and badges >= 11px; body, notes, hints and hedge copy >= 12px; text no darker than #8b97a3; buttons >= 44px tall. */

/* Member bar button (rendered into #account-slot by the app). One state per class: is-pending | is-verified | is-rejected | is-appeal.
   The badge is sentence case (not uppercase) so "Pending verification" stays compact; the state is always in the text, never colour alone. */
.account-header-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 14px;border:1px solid #4b565e;border-radius:999px;background:#ffffff06;color:var(--text);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .18s,border-color .18s}
.account-header-button:hover{background:#ffffff0d;border-color:#6b7782}
.account-header-button.is-pending{border-color:#d6ad5442;background:#d6ad5410}
.account-header-button.is-pending:hover{background:#d6ad541a;border-color:#d6ad5475}
.account-header-button.is-verified{border-color:#cbf68b4d;background:#cbf68b0f}
.account-header-button.is-verified:hover{background:#cbf68b1a;border-color:#cbf68b88}
.account-header-button.is-rejected{border-color:#e48f9866;background:#e48f9814}
.account-header-button.is-rejected:hover{background:#e48f9824;border-color:#e48f9899}
.account-header-button.is-appeal{border-color:#86dce44d;background:#86dce410}
.account-header-button.is-appeal:hover{background:#86dce41c;border-color:#86dce488}
.account-x-glyph{display:block;flex:none}
.account-header-copy{display:inline-flex;align-items:center;gap:8px;min-width:0}
.account-header-copy strong{font-weight:600}
.account-header-handle{flex:0 1 auto;min-width:0;max-width:128px;overflow:hidden;text-overflow:ellipsis}
.account-header-badge{display:inline-flex;align-items:center;flex:none;gap:5px;padding:2px 8px;border-radius:999px;background:#d6ad5418;color:#e2c795;font-size:11px;font-weight:700;letter-spacing:.2px;line-height:1.4}
.account-header-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.is-verified .account-header-badge{background:#cbf68b1a;color:var(--accent)}
.is-rejected .account-header-badge{background:#e48f9824;color:#f0b4ba}
.is-appeal .account-header-badge{background:#86dce41a;color:var(--cyan)}

/* Founding titles (CONTRACT v2.4 section 11.8). Gold = Founding Lorekeeper #001-#300 (loud), silver = Early Lorekeeper #301-#1000 (quieter).
   The tier is never colour alone: Founding is a filled star on a gold disc, Early an outlined star in a silver ring, and the title is always in the text. */
.account-member-mark{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;line-height:1}
.account-member-star{display:block;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1}
.account-member-mark.is-founding{background:linear-gradient(145deg,#f9e29a,#d6a22a);color:#2c1d02;box-shadow:0 0 0 1px #f2cf6b99,0 0 10px #f2cf6b4d}
.account-member-mark.is-early{border:1.5px solid #c3ccd5;background:#c3ccd514;color:#d5dde5}
.account-member-mark.is-early .account-member-star,.account-member.is-early .account-member-star{fill:none;stroke-width:2}

/* Dialog frame. The shared #app-dialog scrolls as a whole, which pushes its Close button and a long form's main action out of sight on a phone.
   For the account flow the dialog stops scrolling: a header (Back, step, progress) and a footer (main action) stay put, only .account-body scrolls. */
#app-dialog:has(.account-flow){width:min(520px,calc(100% - 24px))}
#app-dialog[open]:has(.account-flow){display:flex;flex-direction:column;overflow:hidden}
#app-dialog:has(.account-flow) #dialog-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;padding:0}
#app-dialog:has(.account-flow) .dialog-close{top:8px;right:8px;width:44px;height:44px;font-size:26px}
.account-flow{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;max-width:520px;margin:0 auto}
/* position:sticky only matters in a browser without :has(): there the dialog scrolls as before and the bars still stick. Stay below the Close button (z-index 5). */
.account-top{position:sticky;top:0;z-index:2;flex:none;padding-top:10px;background:#11171e}
.account-head{display:flex;align-items:center;gap:6px 14px;min-height:44px;padding:0 64px 0 28px}
.account-head .account-step-label{margin:0;color:var(--muted);font-size:11px;letter-spacing:1.4px}
.account-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-10px;padding:0 10px;border-radius:6px;color:var(--text);font-size:13px;font-weight:600}
.account-back:hover{color:var(--accent)}
.account-progress{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.account-progress span{height:3px;background:#2a333d;transition:background .25s}
.account-progress .is-done{background:var(--accent)}
.account-body{flex:1 1 auto;min-height:0;padding:20px 28px 24px;overflow-y:auto;overscroll-behavior:contain;
  /* edge shadows that only show while there is more to scroll to */
  background:
    linear-gradient(#11171e 30%,#11171e00) 0 0/100% 28px no-repeat local,
    linear-gradient(#11171e00,#11171e 70%) 0 100%/100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0,#00000070,#0000) 0 0/100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,#00000070,#0000) 0 100%/100% 10px no-repeat scroll,
    #11171e}
.account-foot{position:sticky;bottom:0;z-index:2;flex:none;display:grid;gap:10px;padding:14px 28px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:#11171e}
/* The shell styles #dialog-content h2 with an id selector, so the title needs !important to resize. */
.account-flow .account-title{margin:0 0 10px!important;padding-right:0!important;font-size:clamp(24px,7vw,28px)!important;letter-spacing:-.8px!important}
.account-for{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0 0 14px;padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:#c9d1d6;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.account-lead{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.65}

/* Step 1: identity note, what ONLORE asks for, handle form */
.account-xnote{margin:0 0 16px;padding:12px 14px;border:1px solid #86dce433;border-left:3px solid var(--cyan);border-radius:10px;background:#86dce40d;color:#d3dbd9;font-size:13px;line-height:1.6}
.account-scopes{margin:22px 0 0;padding:16px 16px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.account-scopes-title{margin:0 0 11px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.account-scope-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.account-scope{display:flex;align-items:flex-start;gap:10px;margin:0;color:#d3dbd9;font-size:13px;line-height:1.5}
.account-scope-mark{display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#cbf68b18;color:var(--accent)}
.account-scope-mark svg{width:11px;height:11px}
.account-scope.is-never,.account-scope.is-kyc{margin-top:12px;padding-top:12px;border-top:1px solid #ffffff10}
.account-scope.is-never .account-scope-mark,.account-scope.is-kyc .account-scope-mark{background:#86dce41a;color:var(--cyan)}
.account-scope span:last-child{min-width:0;overflow-wrap:anywhere}
.account-field{margin:0}
.account-field-label{display:block;margin-bottom:7px;color:#c9d1d6;font-size:12px;font-weight:550}
.account-input-wrap{display:flex;align-items:center;min-height:48px;border:1px solid #303b47;border-radius:8px;background:#0d131a;transition:border-color .18s,box-shadow .18s}
.account-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px #cbf68b15}
.account-input-wrap.is-invalid{border-color:#e48f98}
.account-at{padding:0 2px 0 14px;color:var(--muted);font-size:16px;font-weight:600}
.account-input{flex:1;min-width:0;min-height:44px;padding:12px 14px 12px 4px;border:0;background:transparent;color:var(--text);font-size:16px}
.account-input:focus,.account-input:focus-visible{outline:none}
.account-input::placeholder{color:#8b97a3}
.account-hint{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.account-field-error{min-height:0;margin:0;color:#edb1b7;font-size:12px;line-height:1.5}
.account-field-error:not(:empty){margin-top:7px}
.account-submit,.account-finish{width:100%;min-height:48px}
.account-footnote{margin:18px 0 0;padding-top:14px;border-top:1px solid #ffffff10;color:var(--muted);font-size:13px;line-height:1.6;text-align:center}

/* Step 2: verification code, post text, X link, confirmation */
.account-code{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin:0 0 18px;padding:12px 16px;border:1px dashed #cbf68b55;border-radius:10px;background:#cbf68b0c}
.account-code-label{color:#c9d1d6;font-size:12px;font-weight:550}
.account-code-value{color:var(--accent);font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:1.5px;-webkit-user-select:all;user-select:all}
.account-quote-label{margin:0 0 7px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.account-quote{padding:14px 16px;border:1px solid #2f3944;border-radius:10px;background:#1b2229;color:#e2e8e4;font-size:14px;line-height:1.65;overflow-wrap:anywhere;cursor:text;-webkit-user-select:all;user-select:all}
.account-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0}
.account-copy{min-height:44px;font-size:13px}
.account-live{color:#b9d79a;font-size:12px;line-height:1.5}
.account-post-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-top:12px;padding:12px 16px;border:1px solid #4b565e;border-radius:10px;background:#ffffff06;color:var(--text);font-size:14px;font-weight:600;transition:background .18s,border-color .18s}
.account-post-link:hover{border-color:var(--accent);background:#cbf68b0d}
.account-post-link-main{display:flex;align-items:center;gap:10px;min-width:0}
.account-post-link-host{flex:none;color:var(--muted);font-size:12px;font-weight:500}
.account-post-link:hover .account-post-link-host{color:var(--accent)}
.account-review{margin:18px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.account-review p+p{margin-top:6px;color:#c9d1d6}
.account-check{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:6px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;cursor:pointer;transition:border-color .18s,background .18s}
.account-check:hover{border-color:#4b565e}
.account-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.account-check:has(input:checked){border-color:#cbf68b55;background:#cbf68b0a}
.account-finish-hint{margin:0;text-align:center}

/* Pending status card */
.account-status-card{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.account-status-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#ffffff0d;color:var(--text)}
.account-status-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.account-status-name{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.account-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid #d6ad5440;border-radius:999px;background:#d6ad5410;color:#e2c795;font-size:11px;font-weight:600;line-height:1.4}
.account-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.account-pill.is-verified{border-color:#cbf68b55;background:#cbf68b12;color:var(--accent)}
.account-pill.is-rejected{border-color:#e48f9866;background:#e48f9814;color:#f0b4ba}
.account-pill.is-appeal{border-color:#86dce455;background:#86dce410;color:var(--cyan)}

/* Founding title inside the status card: the whole card gets a gold (Founding) or silver (Early) frame */
.account-status-card{flex-wrap:wrap}
.account-status-card.is-founding{border-color:#e6bf5a;background:radial-gradient(120% 150% at 0 0,#f2cf6b2b,#0000 62%),linear-gradient(#1a1608,#12171e);box-shadow:0 0 0 1px #f2cf6b40,0 10px 30px -14px #f2cf6b80}
.account-status-card.is-early{border-color:#aeb9c4;background:linear-gradient(#181d23,#12171e)}
.account-status-card.is-founding .account-status-avatar{box-shadow:0 0 0 2px #e6bf5a}
.account-member{display:flex;align-items:center;flex:1 1 100%;gap:12px;min-width:0;padding:12px 14px;border-radius:10px}
.account-member.is-founding{border:1px solid #e6bf5a99;background:linear-gradient(135deg,#f2cf6b2e,#f2cf6b0f);color:#ffe9a6}
.account-member.is-early{border:1px solid #aeb9c488;background:#c3ccd511;color:#d5dde5}
.account-member-badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%}
.account-member.is-founding .account-member-badge{background:linear-gradient(145deg,#f9e29a,#d6a22a);color:#2c1d02;box-shadow:0 0 0 2px #f2cf6b66,0 0 18px #f2cf6b55}
.account-member.is-early .account-member-badge{border:2px solid #c3ccd5;background:#c3ccd514;color:#d5dde5}
.account-member-copy{min-width:0}
.account-member-line{margin:0;line-height:1.35;overflow-wrap:anywhere}
.account-member-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.2px}
.account-member.is-founding .account-member-title{font-size:20px;letter-spacing:-.4px}
.account-member-sample{font-size:12px;font-weight:600;white-space:nowrap}
.account-member-range{margin:3px 0 0;color:#c9d1d6;font-size:12px;line-height:1.5}
.account-member-note{margin:0 0 14px;color:#c9d1d6;font-size:13px;line-height:1.6}
@media(forced-colors:active){.account-member-mark,.account-member-badge{border:1px solid CanvasText}}

/* Review states: reason, appeal deadline, appeal form, the appeal text, held Shards */
.account-block-label{margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.account-reason{margin:0 0 14px;padding:12px 14px;border:1px solid #e48f9840;border-left:3px solid #e48f98;border-radius:10px;background:#e48f980d}
.account-reason .account-block-label{margin-bottom:4px}
.account-reason-text{margin:0;color:#f3d3d6;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.account-deadline{margin:0 0 14px;padding:12px 14px;border:1px solid #d6ad5440;border-radius:10px;background:#d6ad5410}
.account-deadline.is-answer{border-color:#86dce44d;background:#86dce40d}
.account-deadline-main{margin:0;color:var(--text);font-family:var(--display);font-size:16px;font-weight:600;line-height:1.35}
.account-deadline-sub{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.account-appeal-form{margin:0 0 14px}
.account-textarea{display:block;width:100%;min-height:128px;padding:12px 14px;border:1px solid #303b47;border-radius:8px;background:#0d131a;color:var(--text);font-size:16px;line-height:1.6;resize:vertical;overflow-wrap:anywhere;transition:border-color .18s,box-shadow .18s}
.account-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #cbf68b15}
.account-textarea::placeholder{color:#8b97a3}
.account-textarea[aria-invalid="true"]{border-color:#e48f98}
.account-field-meta{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2px 14px}
.account-field-meta .account-hint{flex:1 1 200px}
.account-counter{flex:none;margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.account-counter.is-over{color:#edb1b7;font-weight:600}
.account-appeal-sent{margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.account-appeal-text{margin:0;padding:0;color:#d3dbd9;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow-y:auto}
.account-held{margin:0 0 14px;color:#c9d1d6;font-size:13px;line-height:1.6}
.account-held.is-revoked{color:#edb1b7}
.account-sim-note{margin:0 0 16px;padding:10px 12px;border:1px solid #d6ad5440;border-radius:10px;background:#d6ad5410;color:#e2c795;font-size:13px;line-height:1.6}

/* Preview simulator: dashed and amber so it can never be mistaken for a real review */
.account-sim{margin:16px 0 0;padding:16px;border:1px dashed #d6ad5470;border-radius:12px;background:#d6ad5408}
.account-sim-tag{display:inline-block;margin:0 0 8px;padding:2px 9px;border:1px solid #d6ad5455;border-radius:999px;color:#e2c795;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.account-sim-title{margin:0 0 6px;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.35}
.account-sim-title:focus{outline:none}
.account-sim-lead{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.6}
.account-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.account-sim-button{min-height:48px;padding:8px 10px;font-size:13px;line-height:1.3;text-align:center}
.account-sim-reject{grid-column:1/-1;padding:10px 0}
.account-sim-reject-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.account-sim-reject-row .account-sim-button{min-width:112px}
.account-sim-grid+.account-hint{margin-top:10px}
.account-select{width:100%;min-width:0;min-height:48px;padding:8px 12px;border:1px solid #303b47;border-radius:8px;background:#0d131a;color:var(--text);font-size:14px}
.account-select:focus{border-color:var(--accent)}
.account-facts{margin:0 0 16px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.account-facts>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 16px;font-size:13px}
.account-facts>div+div{border-top:1px solid var(--border)}
.account-facts dt{color:var(--muted)}
.account-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.account-facts .account-code-value{font-size:14px;letter-spacing:1.2px}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.account-actions .btn{min-height:48px;padding:8px 12px;line-height:1.3;text-align:center}
.account-actions.is-single{grid-template-columns:1fr}
.account-actions.is-appeal{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.account-danger{border-color:#edb1b744;color:#edb1b7}
.account-danger:hover:not(:disabled){background:#edb1b70d}

@media(max-width:700px){
  .account-head{padding-left:20px}
  .account-body{padding:18px 20px 22px}
  .account-foot{padding-left:20px;padding-right:20px}
  .account-select{font-size:16px}
  /* the shell gives the button the whole row on a phone: show the full handle and only ellipsise when the badge needs the room */
  .account-header-handle{max-width:none}
}
@media(max-width:420px){
  .account-header-button{padding:8px 12px}
  .account-sim{padding:14px}
  .account-sim-reject-row{grid-template-columns:1fr}
}
@media(max-width:370px){
  .account-head{padding-left:16px;padding-right:56px}
  .account-body{padding:16px 16px 20px}
  .account-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .account-scopes{padding:14px}
  .account-post-link{padding:10px 12px;font-size:13px}
  .account-code{padding:11px 12px}
  .account-code-value{font-size:15px}
  .account-check{padding:6px 12px}
  .account-status-card{padding:14px}
  .account-status-name{font-size:16px}
  .account-reason,.account-deadline,.account-appeal-sent{padding:11px 12px}
  .account-member{gap:10px;padding:10px 12px}
  .account-member-badge{width:40px;height:40px}
  .account-member.is-founding .account-member-title{font-size:18px}
  .account-sim-button{padding:8px 6px;font-size:12px}
  .account-actions.is-appeal{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
/* Landscape phones: very little height, so tighten the bars and put the post confirmation and its button side by side. */
@media(max-height:500px){
  .account-body{padding-top:14px;padding-bottom:16px}
  .account-foot{gap:8px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:500px) and (min-width:480px){
  .account-foot.is-post{grid-template-columns:1fr auto;align-items:center}
  .account-foot.is-post .account-finish{width:auto;min-width:200px}
  .account-foot.is-post .account-finish-hint{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .account-progress span,.account-header-button,.account-post-link,.account-check,.account-textarea{transition:none}
}

/* List a project: extra rewards (features.js, CONTRACT v2.4.1 section 12.1). Cash stays the required budget; token, NFT and whitelist are optional extras.
   Lives in this file because features.js has no stylesheet of its own; every selector carries the .extras- prefix. */
.extras-fieldset{min-width:0;margin:16px 0 19px;padding:14px 16px 8px;border:1px solid var(--border);border-radius:10px;background:#ffffff04}
.extras-fieldset>legend{padding:0 8px;color:#dfe5e8;font-size:14px;font-weight:600}
.extras-intro{margin:0 0 6px;color:var(--muted);font-size:12px;line-height:1.65}
.extras-option{padding:2px 0 4px;border-top:1px solid #ffffff10}
.extras-intro+.extras-option{border-top:0}
.extras-option .feature-check-row{margin:4px 0 6px}
.extras-fields{margin:0 0 10px 32px;padding:14px 0 0 14px;border-left:2px solid #cbf68b30}
.extras-fields[hidden],.extras-chain[hidden]{display:none}
.extras-fields .form-row{align-items:start}
.extras-symbol{position:relative;display:block}
.extras-dollar{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;line-height:1;pointer-events:none}
.form-field .extras-symbol input{padding-left:28px}
.extras-error{margin:0;color:#edb1b7;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.extras-error:empty{display:none}
.feature-check-row>.extras-error{margin:0 0 4px 32px}
.form-field input[aria-invalid=true],.form-field select[aria-invalid=true]{border-color:#e48f98}
.feature-check input[aria-invalid=true]{outline:2px solid #e48f98;outline-offset:2px}
.extras-note{margin:2px 0 10px;color:#a6b5c1;font-size:12px;line-height:1.65}
/* The live preview card reuses the shell's .reward-chips / .reward-chip pills (styles.css), so it looks like the Discover card; this only keeps the list tidy if those are missing. */
#preview-rewards{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
@media(max-width:700px){
  .extras-fieldset{padding:12px 12px 6px}
  .extras-fields{margin-left:6px;padding-left:12px}
}
@media(forced-colors:active){.extras-fieldset{border-color:CanvasText}}
.account-signed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.account-signed strong{color:var(--text,#fff);font-size:15px}
.account-signed small{color:var(--muted);font-size:12px}
.account-signed .account-x-glyph{flex:none}
a.account-submit{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}

/* "Use a different X account" is the only way to switch accounts, so it reads as a link and has a comfortable tap target. */
.account-hint a[data-account="x-login"]{display:inline-block;padding:.45rem 0;text-decoration:underline;text-underline-offset:2px}
.account-hint a[data-account="x-login"]{min-height:44px;display:inline-flex;align-items:center}