/* #257 F1 app shell: mobile first (390px), 44px tap targets, iPhone safe areas. */
body.app { margin: 0; min-height: 100vh; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.app-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--bg, #0b0b12); border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.app-top .logo { min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; letter-spacing: .08em; text-decoration: none; color: inherit; flex: none; }
.app-name { min-height: 44px; min-width: 44px; max-width: 62vw; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 8px; border: 1px solid var(--mut, rgba(255,255,255,.35)); background: transparent; /* visible in light + dark */ color: inherit; font-size: 14px; cursor: pointer; }
.app-banner { margin: 0; padding: 8px max(12px, env(safe-area-inset-left)); font-size:var(--fs-12); text-align: center; background: rgba(255,196,0,.14); color: inherit; }
.app-main { padding: 16px max(12px, env(safe-area-inset-left)); max-width: 720px; margin: 0 auto; }
.app-card { padding: 16px; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.12)); }
.app-card .btn { min-height: 44px; display: inline-flex; align-items: center; }
.app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg, #0b0b12); border-top: 1px solid var(--line, rgba(255,255,255,.12)); }
.app-nav a { min-height: 56px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; opacity: .7; font-size: 14px; }
.app-nav a.cur { opacity: 1; font-weight: 700; box-shadow: inset 0 3px 0 currentColor; }
#app-status { margin: 12px; }
/* #257 F2 Profile home */
.profile-home { display: grid; gap: 14px; }
.profile-home h2 { margin: 0 0 6px; font-size:var(--fs-20); } .profile-home h3 { margin: 0 0 4px; font-size:var(--fs-16); }
.app-welcome { margin: 0; padding: 12px; border-radius: 8px; background: rgba(46,204,113,.16); font-weight: 600; }
.ph-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.ph-avatar-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; background: rgba(127,127,127,.2); }
.ph-name { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.ph-url { overflow-wrap: anywhere; margin: 0 0 4px; font-size:var(--fs-12); }
.ph-bal { margin: 0; font-size:var(--fs-28); font-weight: 800; }
.profile-home .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.profile-home .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }
.profile-home .btn.full { width: 100%; box-sizing: border-box; }
.ph-next { display: grid; gap: 10px; }
.ph-disabled { opacity: .55; }

/* #257 F5 edit mode */
.pe-form { display: grid; gap: 12px; }
.pe-field { display: grid; gap: 4px; }
.pe-field input, .pe-field textarea { min-height: 44px; box-sizing: border-box; width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; }
.pe-field .err { margin: 0; }

/* Monochrome reskin: 420px mobile column, flat header / bottom nav / cards, G mark before the wordmark. */
.app-top, .app-nav { background: var(--bg); border-color: var(--bd); }
.app-top { max-width: 420px; margin: 0 auto; }
.app-top .logo { gap: 8px; font-size: 16px; letter-spacing: -.01em; text-transform: none; }
.app-top .logo::before { content: ''; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--bd); background: #000 url(/src/ui/brand/mark-64.png) center / 100% no-repeat; flex: none; }
.app-name { border-radius: 8px; border-color: var(--bd); font-weight: 600; }
.app-banner { max-width: 420px; margin: 0 auto; background: var(--card); border-bottom: 1px solid var(--bd); color: var(--mut); }
.app-main { max-width: 420px; }
.app-card { border-radius: 8px; border-color: var(--bd); background: var(--card); }
.app-nav { left: 50%; right: auto; width: 100%; max-width: 420px; transform: translateX(-50%); }
.app-nav a { color: var(--mut); opacity: 1; font-weight: 500; }
.app-nav a.cur { color: var(--fg); box-shadow: none; }
/* Delete account (PR-08). Danger colours are the theme.css palette; do not restamp --bd-strong. */
.btn.danger { background: var(--danger); color: var(--on-danger); border: 0; border-radius: 999px; }
.btn.danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn.danger:active:not(:disabled) { background: var(--danger-active); }
.btn.danger:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.btn.danger:disabled, .btn.danger[disabled] { opacity: .45; cursor: not-allowed; }
.btn.danger-ghost { background: transparent; color: var(--danger-text); border: 1px solid var(--danger-text); border-radius: 999px; min-height: 44px; }
.btn.danger-ghost:hover:not(:disabled) { background: transparent; }
.btn.danger-ghost:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.set-danger .set-who > .set-danger-sub { white-space: normal; font-size: 14px; color: var(--mut); }
.dlg-delete { border: 1px solid var(--bd); background: var(--card); color: var(--fg); width: 480px; max-width: calc(100vw - 32px); border-radius: 16px; padding: 28px; box-sizing: border-box; margin: auto; }
.dlg-delete[open] { display: flex; flex-direction: column; gap: 12px; }
.dlg-delete::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-delete .dlg-grab { display: none; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.dlg-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgba(244, 33, 46, .12); color: var(--danger-text); }
.dlg-ico.ok { background: rgba(0, 186, 124, .12); color: var(--ok); }
.dlg-ico svg { width: 24px; height: 24px; }
.dlg-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--fg); font-size:var(--fs-20); border-radius: 999px; }
.dlg-x:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.dlg-delete h2 { margin: 0; font-size:var(--fs-28); font-weight: 800; }
.dlg-delete h2:focus { outline: none; }
.dlg-name { margin: 0; overflow-wrap: anywhere; font-size:var(--fs-14); color: var(--mut); }
.dlg-body { overflow: auto; min-height: 0; max-height: 80vh; display: grid; gap: 10px; }
.dlg-callout { margin: 0; background: rgba(244, 33, 46, .08); border: 1px solid rgba(244, 33, 46, .35); border-radius: 10px; padding: 12px 14px; display: flex; gap: 8px; align-items: flex-start; }
.dlg-callout svg { width: 18px; height: 18px; flex: none; }
.dlg-bullets { margin: 0; padding-left: 18px; font-size:var(--fs-14); }
.dlg-bullets li + li { margin-top: 8px; }
.dlg-help { margin: 0; color: var(--mut); font-size:var(--fs-12); }
.dlg-delete label { font-size: 14px; }
.dlg-delete input { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--bd-strong); border-radius: 12px; background: var(--field, var(--card)); color: var(--fg); padding: 0 12px; font: inherit; }
.dlg-delete input:focus, .dlg-delete input:focus-visible { outline: none; border-color: var(--check); box-shadow: 0 0 0 3px rgba(29, 155, 240, .35); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 12px; position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--bd); margin: 0 -28px -28px; padding: 12px 28px 28px; }
.dlg-actions .btn { min-height: 44px; }
.dlg-spin { width: 16px; height: 16px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: dlg-spin 1s linear infinite; }
@keyframes dlg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dlg-spin { animation: none; display: none; } }
@media (max-width: 860px) {
  .dlg-delete { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; max-height: 92dvh; border-radius: 16px 16px 0 0; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .dlg-body { max-height: none; }
  .dlg-delete .dlg-grab { display: block; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--bd); }
  .dlg-actions { flex-direction: column; gap: 10px; margin: 0 -20px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); }
  .dlg-actions .btn { width: 100%; min-height: 48px; justify-content: center; }
}
/* profile-ux: icon-only nav (X style). 56px rows, icons in currentColor; the active icon is filled. */
.app-nav a { min-width: 44px; }
.app-nav .nav-ico { display: block; width: 26px; height: 26px; }
/* Flat bar, hairline top border, generous spacing. */
.app-nav { border-top: 1px solid var(--bd); box-shadow: none; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.app-nav a { min-height: 60px; }
.app-welcome { border-radius: 8px; background: var(--card); border: 1px solid var(--bd); }
.ph-avatar-empty { background: var(--card); border: 1px solid var(--bd); }
.pe-field input, .pe-field textarea { border-radius: 8px; }

/* Vector G mark (tokens in theme.css): white in dark, black in light. */
.app-top .logo::before { background: transparent var(--mark) center / 100% no-repeat; border: 0; border-radius: 0; }
/* profile-ux: the public site (site-template markup) inside the Profile tab, in the monochrome tokens. */
.profile-site { display: grid; gap: 14px; }
.site-view .page { border: 1px solid var(--bd); background: var(--card); border-radius: 16px; padding: 16px; }
.site-view .banner { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 12px; border: 1px solid var(--bd); }
.site-view .banner.img-placeholder { height: 140px; }
.site-view .card { padding: 4px 4px 0; overflow: hidden; border: 0; background: none; border-radius: 0; box-shadow: none; }
.site-view .card.has-banner { overflow: visible; overflow-wrap: anywhere; }
.site-view .avatar { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg); background: var(--card); margin: 10px 0 8px; }
.site-view .card.has-banner .avatar { margin-top: -44px; margin-left: 12px; position: relative; z-index: 1; }
.site-view h1 { font-size:var(--fs-28); line-height: 1.2; margin: 8px 0 2px; overflow-wrap: anywhere; }
.site-view h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0 0 10px; font-weight: 600; }
.site-view .desc { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; }
.site-view .box { border-top: 1px solid var(--bd); padding: 14px 4px 4px; margin: 14px 0 0; }
.site-view .links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-view .links li { border: 1px solid var(--bd); border-radius: 999px; display: flex; align-items: center; min-height: 44px; font-size: 14px; overflow-wrap: anywhere; }
.site-view .links li > a, .site-view .links li > span { display: flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--fg); text-decoration: none; }
.site-view .addrs, .site-view .kv { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.site-view .addrs dt, .site-view .kv dt { color: var(--mut); } .site-view .addrs dd, .site-view .kv dd { margin: 0; overflow-wrap: anywhere; }
.site-view .addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .site-view .addr-row .mono { flex: 1 1 100%; }
.site-view .copy { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--bd); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.site-view .explorer, .site-view .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; color: var(--fg); }
.site-view .agent p { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.site-view .muted, .site-view .live { color: var(--mut); }
.site-view .live { font-size: 12px; border-top: 1px solid var(--bd); padding-top: 12px; margin: 16px 0 0; }
.site-view .img-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--mut); border: 1px dashed var(--bd); }
.site-view .error { border: 1px solid var(--bd); border-radius: 12px; padding: 14px; }
.ps-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.ps-actions .btn, .follow .btn { min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none; }
.follow { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
.fstats { display: flex; gap: 14px; margin: 0; font-size: 14px; } .fstats b { color: var(--fg); }
.fmsg { margin: 4px 0 0; width: 100%; }
/* profile-ux: records editor */
.rec-section { display: grid; gap: 10px; }
.rec-section h2 { margin: 0; font-size: 16px; }
.rec-row { display: grid; gap: 6px; }
.rec-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-row-head label, .rec-label { font-weight: 600; }
.rec-remove, .rec-add, .rec-add-menu .btn, .rec-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.rec-remove { min-width: 44px; padding: 0 12px; }
.rec-add { justify-self: start; }
.rec-add-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-addr { margin: 0; }
.rec-review { display: grid; gap: 8px; }
.rec-review h3 { margin: 6px 0 0; font-size: 14px; color: var(--mut); }
.rec-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rec-diff li { border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.rec-diff-key { font-weight: 600; }
.rec-diff-removed .rec-diff-val { text-decoration: line-through; color: var(--mut); }
.rec-editor, .rec-section, .rec-row, .rec-review { min-width: 0; }
.rec-editor input, .rec-editor textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.rec-addr, .rec-diff-val { overflow-wrap: anywhere; word-break: normal; }

/* profile-ux v2: records as quiet chips (Addresses, Social, Other). */
.site-view .kv.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.site-view .chip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--bd); border-radius: 999px; font-size: 14px; max-width: 100%; }
.site-view .chip dt { color: var(--mut); margin: 0; } .site-view .chip dd { margin: 0; overflow-wrap: anywhere; }
.site-view .chip a { color: var(--fg); }
.site-view .eth-block { margin: 8px 0 16px; }
.site-view .eth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.site-view .eth-label { flex: 1 0 100%; font-size:var(--fs-12); color: var(--mut); }
.site-view .addrs { display: flex; flex-wrap: wrap; gap: 8px; }
.site-view .addrs dt { display: none; }
.site-view .addr-row { border: 1px solid var(--bd); border-radius: 18px; padding: 6px 6px 6px 14px; width: 100%; }
.site-view .box { border-top: 0; padding-top: 8px; }
.site-view h2 { text-transform: none; letter-spacing: 0; font-size: 14px; }
/* Edit sheet */
.rec-editor { display: grid; gap: 14px; }
.sheet { background: var(--card); border: 1px solid var(--bd); border-radius: 22px 22px 16px 16px; padding: 10px 16px 16px; display: grid; gap: 12px; }
.sheet-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--bd); margin: 0 auto 4px; }
.sheet-title { text-align: center; font-size: 20px; margin: 0; }
.sheet-sub { text-align: center; margin: 0; }
.rec-label { font-size: 14px; font-weight: 600; margin: 0; }
.rec-media { display: grid; gap: 8px; }
.rec-media-body { display: flex; gap: 14px; align-items: flex-start; }
.rec-media-header .rec-media-body { flex-direction: column; align-items: stretch; }
.rec-preview { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--bd); color: var(--mut); }
.rec-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-preview-avatar { width: 88px; height: 88px; border-radius: 50%; }
.rec-preview-header { width: 100%; height: 96px; border-radius: 12px; }
.rec-initial { font-size:var(--fs-28); font-weight: 700; color: var(--fg); }
.rec-media-side { flex: 1; min-width: 0; display: grid; gap: 8px; }
.rec-media-line, .rec-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rec-media-btn, .rec-more, .sheet-foot .btn, .tile, .picker-cat, .rec-x { min-height: 44px; }
.rec-media-btn { justify-self: start; border-radius: 999px; }
.rec-rows { display: grid; gap: 14px; border-top: 1px solid var(--bd); padding-top: 14px; }
.rec-row { display: grid; gap: 6px; min-width: 0; }
.rec-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rec-keytag { font-size: 12px; color: var(--mut); }
.rec-line { border: 1px solid var(--bd); border-radius: 12px; padding: 0 4px 0 12px; }
.rec-line .ico { flex: none; color: var(--mut); }
.rec-line input, .rec-line textarea { border: 0; background: transparent; flex: 1; min-height: 44px; padding: 10px 0; }
.rec-line input:focus, .rec-line textarea:focus { outline: none; }
.rec-line:focus-within { border-color: var(--fg); }
.rec-readonly { padding: 10px 12px; }
.rec-kv { flex: 1; display: grid; min-width: 0; }
.rec-kv input + input { border-top: 1px solid var(--bd); }
.rec-x { min-width: 44px; border: 0; background: transparent; color: var(--mut); font-size:var(--fs-20); line-height: 1; cursor: pointer; }
.rec-x:hover { color: var(--fg); }
.rec-more { justify-self: center; border-radius: 999px; padding: 0 20px; }
.sheet-foot { display: grid; gap: 10px; border-top: 1px solid var(--bd); padding-top: 14px; }
.sheet-foot .btn { justify-content: center; width: 100%; border-radius: 12px; }
.sheet-foot .btn[disabled] { opacity: .45; }
/* Add profile fields picker: rail + tile grid, no search box. */
.picker { display: grid; grid-template-columns: 84px 1fr; gap: 10px; max-height: 62vh; }
.picker-rail { display: grid; align-content: start; gap: 2px; position: sticky; top: 0; }
.picker-cat { text-align: left; border: 0; background: transparent; color: var(--mut); font: inherit; font-size: 14px; padding: 0 4px; cursor: pointer; }
.picker-cat[aria-current="true"] { color: var(--fg); font-weight: 700; }
.picker-grid { overflow-y: auto; max-height: 62vh; display: grid; gap: 14px; padding-right: 2px; }
.picker-sec h3 { margin: 0 0 8px; font-size:var(--fs-12); color: var(--mut); font-weight: 600; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border: 1px solid var(--bd); border-radius: 12px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.tile[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.tile[disabled] { color: var(--mut); opacity: .55; cursor: default; }
.tile-note { font-size:var(--fs-12); color: var(--mut); }
#picker-sec-other .tile[data-testid="picker-tile-custom"] { grid-column: 1 / -1; min-height: 64px; grid-auto-flow: column; justify-content: center; }
.rec-review { display: grid; gap: 8px; }
.rec-diff li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.rec-diff li .rec-diff-val { grid-column: 1 / -1; }
.app-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.rec-more { gap: 6px; }
.follow.own { justify-content: flex-start; }

/* app-polish (William's live iPhone run): calmer, homepage-clean. Whitespace and hairlines instead of gray boxed cards. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-top { border-bottom: 0; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 6px; }
.app-top .logo.logo-mark { width: 44px; height: 44px; justify-content: center; gap: 0; }
.app-top .logo.logo-mark::before { width: 28px; height: 28px; }
.app-name { border-radius: 999px; padding: 0 16px; }
/* Smaller, quieter test-name bar: same text and testid. */
.app-banner { background: transparent; border: 0; font-size:var(--fs-12); letter-spacing: .02em; padding: 2px 12px 6px; color: var(--mut); }
.app-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.app-main { padding-top: 8px; }
/* Wallet */
.wallet-view { display: grid; gap: 0; }
.wv-balance { padding: 28px 4px 24px; text-align: center; border-bottom: 1px solid var(--bd); display: grid; justify-items: center; gap: 6px; }
.wv-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--mut); letter-spacing: 0; }
.wv-amount { margin: 0; font-size:var(--fs-40); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; }
.wv-amount .wv-unit { font-size:var(--fs-20); font-weight: 600; letter-spacing: 0; color: var(--mut); }
.wv-muted { color: var(--mut); font-size:var(--fs-28); font-weight: 600; }
.wv-balance .hint { margin: 0; }
.wv-balance .btn, .wv-addr .btn, .wv-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; }
.wv-addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--bd); }
.wv-addr .mono { font-size:var(--fs-14); }
.wv-actions { display: grid; padding: 20px 4px 0; }
.wv-actions .btn { width: 100%; box-sizing: border-box; border-radius: 12px; }
/* Search */
.search-tab { display: grid; gap: 10px; }
.st-form { display: flex; gap: 8px; align-items: center; border: 1px solid var(--bd-strong); border-radius: 999px; padding: 4px 4px 4px 18px; margin-top: 8px; }
.st-form:focus-within { border-color: var(--fg); }
.st-input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px; padding: 0; }
.st-input:focus { outline: none; }
.st-go { min-height: 44px; border-radius: 999px; padding: 0 18px; flex: none; }
.st-go[disabled] { opacity: .6; }
.st-count, .st-status { margin: 4px 4px 0; }
.st-results { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
/* Profile: reads as the site. No boxed page; banner + overlapping avatar; counts and Edit/Follow in one row. */
.site-view .page { border: 0; background: transparent; border-radius: 0; padding: 0; }
.site-view .banner { border: 0; border-radius: 0; height: 132px; margin: 0 calc(-1 * max(12px, env(safe-area-inset-left))); width: calc(100% + 2 * max(12px, env(safe-area-inset-left))); }
.site-view .banner-empty { display: block; background: var(--card); border-bottom: 1px solid var(--bd); }
.site-view .avatar-empty { display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size:var(--fs-40); font-weight: 700; color: var(--fg); background: var(--card); }
.site-view .card.has-banner .avatar { margin-left: 4px; }
.fstats { gap: 12px; color: var(--mut); white-space: nowrap; }
.site-view .box { padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--bd); }
.site-view .addr-row { border: 0; border-radius: 0; padding: 0; flex-wrap: nowrap; }
.site-view .addr-row .mono { flex: 1 1 auto; font-size:var(--fs-14); }
.site-view .chip { border-color: var(--bd); }
.site-view .links li { border-color: var(--bd); }
.app-welcome { background: transparent; border: 0; border-bottom: 1px solid var(--bd); border-radius: 0; padding: 10px 0; }
.site-view .banner-empty { border-bottom: 0; }
.site-view .chip a, .site-view .explorer { display: inline-flex; align-items: center; min-height: 44px; }
.site-view .chip { padding-top: 0; padding-bottom: 0; }
/* PR B: Search hero + clean result cards; Back from a profile opened in Search. */
.st-hero { text-align: center; padding: 28px 0 6px; }
.st-title { font-size:var(--fs-40); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.st-tagline { margin: 6px 0 0; color: var(--mut); font-size:var(--fs-14); }
.ps-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--fg); text-decoration: none; font-weight: 600; }
.ps-back::before { content: "\2190"; }
/* Primary-name check badge (site template markup): Twitter blue (var(--check)), the one colour exception (William). */
.site-view .primary-badge { display: inline-flex; vertical-align: -0.1em; margin-left: 6px; color: var(--check); }
.site-view .primary-badge svg { display: block; width: .8em; height: .8em; }
.site-view .primary-badge .pb-tick { stroke: var(--on-check); }
/* PR C: in-page Sepolia wallet (monochrome; OpenSea-mobile-inspired layout, tokens only). */
.wt { display: grid; gap: 14px; }
.wt-ident { margin: 12px 0 -4px; min-width: 0; }
.wt-name { display: block; font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt .wv-balance { text-align: left; padding: 6px 0 0; }
.wt .wv-label { font-size:var(--fs-12); color: var(--mut); font-weight: 500; margin: 0; }
.wt .wv-amount { font-size: var(--fs-56, 56px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 2px 0; }
@media (max-width: 360px) { .wt .wv-amount { font-size: 40px; } }
.wt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wt-tile { aspect-ratio: 1 / 1; min-height: 88px; max-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--bd); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
@media (min-width: 861px) { .wt-tile { min-height: 44px; } }
.wt-ico { width: 24px; height: 24px; }
.wt-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--bd); }
.wt-tabbtn { border: 0; background: none; padding: 10px 0; min-height: 44px; border-radius: 0; color: var(--mut); font-weight: 600; border-bottom: 2px solid transparent; }
.wt-tabbtn.on { color: var(--fg); border-bottom-color: var(--fg); }
.wt-list { list-style: none; margin: 0; padding: 0; }
.wt-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); min-height: 56px; }
.wt-row:last-child { border-bottom: 0; }
.wt-tok { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-weight: 700; }
.wt-tok .wt-ico { width: 18px; height: 18px; }
.wt-mid, .wt-right { display: grid; gap: 1px; min-width: 0; }
.wt-mid { flex: 1; } .wt-right { text-align: right; justify-items: end; }
.wt-sym, .wt-amt { font-weight: 600; font-variant-numeric: tabular-nums; } .wt-sub { font-size:var(--fs-12); color: var(--text-2, var(--mut)); }
.wt-empty { text-align: center; padding: 28px 0; color: var(--text-2, var(--mut)); }
.wt-empty-panel { display: grid; gap: 12px; justify-items: center; padding: 28px 12px; }
.wt-empty-card { border: 1px solid var(--bd); border-radius: 12px; background: var(--card); padding: 28px 16px; }
.wt-empty-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2, var(--bd)); color: var(--fg); }
.wt-empty-ico .wt-ico { width: 20px; height: 20px; }
.wt-empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.wt-empty-line { margin: 0; max-width: 36ch; font-size: 14px; line-height: 1.4; color: var(--mut); text-align: center; }
.wt-empty-card .btn { min-height: 44px; }
.wt-empty-panel .wt-empty { padding: 0; }
.wt-credits-disclosure { margin: 20px 4px 8px; font-size: var(--fs-12, 12px); line-height: 1.45; color: var(--text-2, var(--mut)); overflow-wrap: anywhere; }
.wt-credits-disclosure summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--fg); font-weight: var(--fw-semi, 600); list-style: none; }
.wt-credits-disclosure summary::-webkit-details-marker { display: none; }
.wt-credits-body p { margin: 8px 0 0; }
.wt-credits-disclosure, .wt-credits-body { color: var(--credit, var(--text-2, var(--mut))); }
.wt-details { margin: 8px 0 0; color: var(--text-2, var(--mut)); }
.wt-details summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--fg); }
.wt-details-text { margin: 6px 0 0; overflow-wrap: anywhere; font-size: var(--fs-12, 12px); }
.wt-screen { display: grid; gap: 12px; }
.wt-bar { display: flex; align-items: center; gap: 8px; }
.wt-title { font-size: 20px; margin: 0; }
.wt-back { border: 0; background: none; }
.wt-amtrow { display: flex; align-items: center; gap: 10px; }
.wt-big { flex: 1; min-width: 0; font-size:var(--fs-40); font-weight: 800; border: 0; background: transparent; padding: 4px 0; color: var(--fg); }
.wt-big:focus { outline: none; }
.wt-select { width: auto; flex: none; min-height: 44px; border-radius: 999px; padding: 0 14px; font-weight: 600; }
.wt-chips { display: flex; gap: 8px; }
.wt-chip { flex: 1; min-height: 44px; border-radius: 999px; padding: 0 10px; font-weight: 600; }
.wt-input { min-height: 48px; }
.wt-msg { margin: 0; }
.wt-qrbox { justify-self: center; background: white; border-radius: 8px; padding: 8px; border: 1px solid var(--bd); }
.wt-qr { display: block; width: 220px; height: 220px; }
.wt-full { overflow-wrap: anywhere; text-align: center; margin: 0; }
.wt-note { text-align: center; }
.wt-swapcard { border: 1px solid var(--bd); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; }
.wt-flip { justify-self: center; margin: -18px 0; position: relative; z-index: 1; background: var(--bg); border-radius: 50%; }
.wt-out { font-size:var(--fs-40); }
.wt-review { margin: 0; display: grid; }
.wt-rrow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); }
.wt-rrow dt { color: var(--mut); } .wt-rrow dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.wt-ok { font-size:var(--fs-16); font-weight: 700; margin: 8px 0 0; }
/* Pixel pass: same 12px gutter as the public template (name, avatar and sections line up). */
.site-view .card, .site-view .card.has-banner { padding: 0; }
.site-view .card.has-banner .avatar, .site-view .avatar { margin-left: 0; }
.site-view .banner { max-width: none; }
.site-view .chip { min-width: 0; } .site-view .chip dd { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* PR 303 uploads: a visually hidden file input behind a 44px label button; the link field stays as the fallback. */
.rec-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rec-media-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-media-actions > .rec-media-btn { margin: 0; min-height: 44px; }
label.rec-media-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.rec-media-side:has(.rec-file:focus-visible) label.rec-media-btn { outline: 2px solid var(--fg); outline-offset: 2px; }
/* Settings: grouped cards. Desktop (861px+, the app's mobile-nav breakpoint) is an index plus a 640px column.
   Mobile is one column under a 56px header. Sign out is the last row of Account.
   The segment control's outer edge is --bd-strong; hairline dividers stay --bd. */
.settings { display: flex; flex-direction: column; min-width: 0; }
.settings-h { font-size:var(--fs-20); font-weight: 700; margin: 0; }
.set-group { border: 0; margin: 0 0 32px; padding: 0; min-width: 0; min-inline-size: 0; scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
.set-h { font-size:var(--fs-20); font-weight: 700; line-height: 1.3; margin: 0 0 4px; padding: 0; float: none; width: auto; }
.set-group legend.set-h { float: none; display: block; width: 100%; padding: 0; }
.set-desc { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--mut); }
.set-card > .set-help, .set-card > [data-testid="settings-primary-note"] { margin: 4px 16px 12px; }
.set-card { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--bd-strong); } /* Outer edge is a control; the dividers stay --bd. Four tiles: 2×2 until the desktop settings column. */
.seg-btn { min-height: 44px; border: 1px solid var(--bd); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; line-height: 1.2; text-align: center; }
.seg-name { font-weight: inherit; }
.seg-hint { font-size: 12px; font-weight: 500; color: var(--mut); }
.seg-btn + .seg-btn { border-left: 1px solid var(--bd); }
.seg-btn:hover { background: var(--card); }
.seg-btn[aria-checked="true"] { border: 2px solid var(--fg); background: var(--card); color: var(--fg); font-weight: 700; }
.seg-btn[aria-checked="true"]::before { content: "\2713"; content: "\2713" / ""; margin-right: 6px; }
.set-row, .set-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; box-sizing: border-box; }
.set-who { display: flex; flex-direction: column; min-width: 0; }
.set-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-who > .hint { white-space: normal; }
.set-value { color: var(--mut); flex: none; }
.set-row .btn, .set-item .btn { min-height: 44px; flex: none; }
.set-badge { flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid var(--bd); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--mut); }
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list:empty { display: none; }
.set-list li + li { border-top: 1px solid var(--bd); }
.settings .btn[disabled] { opacity: .45; cursor: not-allowed; }
.settings .set-link { min-height: 52px; }
.settings .seg-btn { min-height: 72px; }
@media (min-width: 861px) { .settings .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Docs & legal rows. The base min-height stays 44px; the grouped card raises it to 52. The arrow is decorative. */
.set-link { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 0; min-height: 44px; padding: 8px 16px; color: var(--fg); text-decoration: none; border-radius: 0; box-sizing: border-box; }
.set-link-label { grid-column: 1; }
.set-link .hint { grid-column: 1; font-size:var(--fs-12); }
.set-link::after { content: "\2197"; content: "\2197" / ""; grid-column: 2; grid-row: 1 / span 2; color: var(--mut); font-size: 14px; line-height: 1; }
.set-link:hover { background: color-mix(in srgb, var(--card) 85%, var(--fg)); text-decoration: none; }
.set-link:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.set-empty-ico { display: block; }
.set-agents-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--surface-2, var(--card));color:var(--fg)}
.set-agents-ico svg{width:22px;height:22px}
.set-agents-title{margin:0;font-size:var(--fs-16);font-weight:600;color:var(--fg)}
.set-agents-line{margin:0;font-size:var(--fs-14);color:var(--mut);max-width:42ch}
.set-agents-soon{min-height:44px}
.set-agents-soon[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.set-textlink { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 4px 16px 14px; color: var(--fg); font-weight: 600; text-decoration: none; }
.set-retry { margin: 0 16px 14px; }
.set-key-issue { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; }
.set-key-issue[hidden] { display: none; }
.set-key-input { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; }
.set-key-reveal { margin: 0 16px 12px; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; }
.set-key-reveal[hidden] { display: none; }
.set-key-reveal h3 { margin: 0 0 6px; font-size: 16px; }
.set-key-token { margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-12); line-height: 1.4; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.set-key-actions, .set-key-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-key-manage { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.set-key-manage[hidden] { display: none; }
.set-key-manage .btn { min-height: 44px; }
.set-item:has(.set-key-row-actions) { flex-wrap: wrap; }
.set-key-row-actions { flex: none; }
.set-key-row-actions .btn { min-height: 44px; }
.set-skel { display: grid; }
.set-skel-row { height: 52px; background: var(--card); }
.set-skel-row + .set-skel-row { border-top: 1px solid var(--bd); }
@media (prefers-reduced-motion: no-preference) {
  .set-skel-row { animation: set-skel 1.1s ease-in-out infinite; }
}
@keyframes set-skel { 50% { opacity: .55; } }
.set-account { margin-bottom: 0; }
.set-account .set-card { border-bottom: 0; border-radius: 12px 12px 0 0; }
.settings > [data-testid="settings-signout"] { width: 100%; box-sizing: border-box; margin: 0 0 32px; min-height: 52px; padding: 0 16px; justify-content: flex-start; text-align: left; border: 1px solid var(--bd); border-radius: 0 0 12px 12px; background: var(--card); color: var(--danger-text, var(--err)); font-weight: 600; }
.settings > [data-testid="settings-signout"]:hover { background: color-mix(in srgb, var(--card) 85%, var(--fg)); }
.settings-meta { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--mut); text-align: center; }
.settings-index { display: none; }
.settings-index-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.set-index-link { display: flex; align-items: center; min-height: 32px; padding: 4px 12px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.3; color: var(--mut); text-decoration: none; }
.set-index-link[aria-current="true"] { color: var(--fg); border-left-color: var(--fg); }
/* Post-signup primary-name card. */
.primary-intent{margin-bottom:12px}.primary-intent-actions{display:flex;gap:8px;flex-wrap:wrap}.primary-intent-actions .btn{min-height:44px}
.copy-scratch{position:fixed;top:0;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* Follow counts open who (William, iPhone). */
.fstat-btn { border: 0; background: transparent; color: inherit; font: inherit; padding: 0 8px 0 0; min-height: 44px; cursor: pointer; }
.fstat-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 8px; }
.fl-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.fl-sheet { width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--bd); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 12px 16px 24px; }
.fl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--bd); padding-bottom: 8px; }
.fl-title { font-size:var(--fs-20); margin: 0; }
.fl-close { min-height: 44px; }
.fl-list { list-style: none; margin: 0; padding: 0; }
.fl-item { border-bottom: 1px solid var(--bd); }
.fl-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; color: inherit; text-decoration: none; }
.fl-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-weight: 700; }
.fl-avatar img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.fl-avatar.has-img { color: transparent; } /* CTO Oct 17 (item 4): the letter only shows when no image loads */
.fl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.fl-dn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-name { font-size:var(--fs-12); color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-name.fl-title { font-weight: 700; font-size: 16px; color: var(--fg); }
.fl-check { display: inline-flex; color: var(--check); }
.fl-check svg { display: block; width: 16px; height: 16px; }
.fstat-btn > .muted { margin-left: .25em; }
.ps-primary-msg { margin: 4px 0 0; }

/* tx progress + completed view (Send, Swap, Set as primary) */
.wt-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-weight: 600; }
.wt-progress[hidden] { display: none; }
.wt-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: wt-spin .8s linear infinite; flex: none; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wt-spin { animation-duration: 2.4s; } }
.wt-donebox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 16px 0; }
.wt-donebox .wt-review { width: 100%; text-align: left; }
.wt-check { width: 56px; height: 56px; }

/* Send: big centered amount like the Wallet balance; shrinks with length, never clips at 390px. */
.wt-amtrow-send { flex-direction: column; align-items: center; gap: 8px; }
.wt-big-send { width: 100%; text-align: center; font-size:var(--fs-40); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; padding: 4px 8px; box-sizing: border-box; font-variant-numeric: tabular-nums; text-overflow: clip; }
.wt-big-send.fit-1 { font-size: 28px; } .wt-big-send.fit-2 { font-size: 20px; } .wt-big-send.fit-3 { font-size: 16px; }
.wt-quote-loading { color: var(--mut); }
/* Primary name row: Retry + Check status wrap under the name at 390px instead of overflowing. */
[data-testid="settings-primary"] .set-row { flex-wrap: wrap; row-gap: 8px; }
[data-testid="settings-primary"] .set-who { flex: 1 1 100%; }
[data-testid="settings-primary"] .set-who > .hint { white-space: normal; }
/* Primary name set: the check in Twitter blue (var(--check)), the one colour exception to monochrome. */
.wt-check.is-primary { color: var(--check); }
.ps-primary-help, .set-help { margin: 4px 0 0; }
.set-name .primary-badge { display: inline-flex; vertical-align: -0.1em; margin-left: 6px; color: var(--check); }
.set-name .primary-badge svg { display: block; width: 1em; height: 1em; }
.set-name .primary-badge .pb-tick { stroke: var(--on-check); }
/* Remove check: confirm step wraps on narrow screens. */
.remove-confirm { margin: 10px 0 0; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; }
.remove-confirm p { margin: 0 0 6px; overflow-wrap: anywhere; }
.remove-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.remove-actions .btn { min-height: 44px; border-radius: 999px; }
/* Issue 349 PR 2: Twitter-style circle icon buttons on Profile (Check / Share / GeoCities Pay). Blue only when checked. */
.pi-bar { display: inline-flex; gap: 8px; align-items: center; }
.pi-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--bd); background: transparent; color: var(--fg); cursor: pointer; text-decoration: none; position: relative; }
.pi-btn-share { border-color: var(--bd-strong); }
.pi-btn::after { content: ""; position: absolute; inset: -2px; }
.pi-btn:hover, .pi-btn:focus-visible { border-color: var(--fg); }
.pi-ico { width: 20px; height: 20px; }
.pi-btn-check.on { color: var(--check); border-color: var(--check); }
.pi-pop { margin: 8px 0 0; padding: 12px; border: 1px solid var(--bd); border-radius: 16px; background: var(--bg); max-width: 360px; }
.pi-share-menu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.pi-share-menu button, .pi-share-menu a { font: inherit; font-size:var(--fs-12); line-height: 1.2; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bd); background: transparent; color: var(--fg); text-decoration: none; cursor: pointer; }
.pi-help { margin: 0 0 8px; font-size: 14px; }
.pi-slot { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pi-msg { margin: 6px 0 0; }
/* Live search suggestions. */
.st-form { position: relative; }

/* Settings header: 56px on a phone, with Back. At 861px and up the title moves into the section index. */
.settings-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; min-height: 56px; margin: 0 0 16px; position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 8; background: var(--bg); }
.settings-head .settings-h { grid-column: 2; margin: 0; }
.settings-close { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; color: var(--fg); }
body[data-tab="settings"] .app-main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 861px) {
  body[data-tab="settings"] .app-main { max-width: 904px; }
  .settings { display: grid; grid-template-columns: 200px minmax(0, 640px); column-gap: 32px; align-items: start; justify-content: start; }
  .settings-index { display: block; position: sticky; top: 16px; align-self: start; grid-column: 1; grid-row: 1 / span 24; }
  .settings-index-title { display: block; }
  .settings > :not(.settings-index) { grid-column: 2; }
  .settings-head { display: none; }
}
@media (max-width: 860px) {
  .settings-index { display: none; }
}
/* X-style profile header (William's phone test, Oct 17): one shared row for own and other profiles. Avatar on the left
   overlapping the banner; right-aligned on the same row: equal outlined icon circles, then the main pill last.
   own: check, share, Edit records. other: share, pay, Follow. Counts sit under the name (.ps-meta). */
.ps-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.ps-head > .avatar { flex: none; }
.ps-head > .ps-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 10px 0 0 auto; min-width: 0; }
/* QA minor (PR 387 review): at 320px (avatar 76 + 3 circles + pill > the card) the nowrap row overflowed. Narrow screens: tighter
   gaps and pill padding, and the row may wrap (the pill stays last, right-aligned). Circles stay 40px + 2px overhang
   (44px tap target); the pill keeps its 44px hit area. */
@media (max-width: 374px) {
  .ps-head { gap: 6px; }
  .ps-head > .ps-actions, .ps-circles, .ps-head .pi-bar { gap: 6px; }
  .ps-pill .btn { padding: 0 12px; }
}
.ps-circles, .ps-pill, .ps-head .pi-bar { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ps-head .pi-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; box-sizing: border-box; } /* equal circles (theme buttons default to 44px tall) */
.ps-pill .btn { min-height: 40px; height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; font-weight: 700; white-space: nowrap; position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.ps-pill .btn::after { content: ""; position: absolute; inset: -2px; } /* 44px hit area, same 2px overhang as the circles */
.ps-head > .pi-pop { position: absolute; right: 0; top: 100%; z-index: 6; margin: 6px 0 0; width: min(360px, 100%); box-sizing: border-box; }
.ps-meta { margin: 8px 0 2px; }
.ps-meta .follow { flex-direction: row; justify-content: flex-start; }
.ps-meta > .fmsg, .ps-meta > .pi-msg { margin: 6px 0 0; white-space: normal; }
.site-view .card .ps-head > .avatar { margin-left: 0; }
/* Issue 430 (William, Oct 17): token logos, read-only Pay recipient, nickname under the name, two-row header actions. */
.wt-tokbox { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 6px; box-sizing: border-box; background: transparent; } /* one shared token-icon box: 32px icon + 6px clear zone (>= the USDC symbol's opening width at 32px) */
.wt-tokicon { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; }
img.wt-tokicon-usdc, img.wt-tokicon-weth { display: block; object-fit: contain; } /* issuer logos as provided: no backing, border or recolor */
.wt-tokicon-eth { background: var(--on-check); } /* white in both themes (token), so the color diamond reads on dark */
.wt-tokicon-eth img { width: 24px; height: 24px; display: block; }
.wt-tokicon-letter { background: var(--card); border: 1px solid var(--bd); font-weight: 700; }
.wt-net { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--bd); border-radius: 999px; font-size:var(--fs-12); line-height: 16px; color: var(--mut); vertical-align: 1px; }
.wt-pick { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.wt-pick .wt-net { margin-left: 2px; }
.wt-label { display: block; font-size:var(--fs-12); color: var(--mut); margin: 12px 0 6px; }
.wt-payee { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--card); box-sizing: border-box; min-width: 0; }
.wt-payee-av { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.wt-payee-av img { width: 36px; height: 36px; object-fit: cover; display: block; }
.wt-payee-st { margin: 6px 2px 0; overflow-wrap: anywhere; }
.wt-credits { margin: 20px 4px 8px; font-size: 12px; line-height: 1.45; color: var(--text-2, var(--mut)); overflow-wrap: anywhere; }
.wt-credits p { margin: 0 0 4px; }
.wt-credits-h { font-weight: 600; }
.wt-payee-av .avatar { width: 36px; height: 36px; margin: 0; border: 0; font-size: 16px; display: grid; place-items: center; box-sizing: border-box; }
.wt-payee-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wt-payee-who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wt-payee-addr { font-size:var(--fs-12); }
.ps-nick { margin: 2px 0 0; color: var(--mut); font-size:var(--fs-14); overflow-wrap: anywhere; }
.ps-head > .ps-actions { flex-direction: column; align-items: flex-end; row-gap: 8px; }
.ps-head > .ps-actions > .ps-pill:empty { display: none; }
/* X-style profile (William, Oct 17, 4:42 PM): bold bare-label heading (+ check), grey .eth handle, Nickname, bio, meta
   row with icons, counts, then ONE full-width main pill (36px, bold 15px): own "Edit profile", other Follow / Following.
   The icon circles stay top right by the avatar. Placeholders: neutral grey banner, grey robot avatar (both themes). */
.site-view .card h1.ens-heading { font-size:var(--fs-28); font-weight: 800; line-height: 1.2; margin: 8px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-view .handle { margin: 0; color: var(--mut); font-size:var(--fs-14); line-height: 1.3; overflow-wrap: anywhere; }
.site-view .ps-nick, .site-view .card .nick { margin: 8px 0 0; color: var(--fg); font-size:var(--fs-14); }
.site-view .card .desc { margin: 10px 0 0; font-size:var(--fs-14); line-height: 1.35; }
.site-view .meta-row { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--mut); font-size:var(--fs-14); line-height: 1.3; }
.site-view .meta-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.site-view .meta-item a { color: var(--check); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.site-view .meta-item a:hover { text-decoration: underline; }
.site-view .meta-item.meta-url{min-width:0;max-width:100%;overflow:hidden}
.site-view .meta-item.meta-url a{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;white-space:nowrap;direction:rtl;text-align:left}
.site-view .meta-item.meta-url a bdi{display:contents}
.site-view .meta-ico { width: 18px; height: 18px; flex: none; }
.site-view .ps-meta { margin: 10px 0 0; }
.site-view .ps-meta .fstat, .ps-meta .fstat { font-size:var(--fs-14); }
.ps-main { display: block; margin: 14px 0 4px; }
.ps-main:empty { display: none; }
.ps-main > .btn, .ps-main > .fbtn, .ps-main-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; border: 1px solid var(--bd); background: transparent; color: var(--fg); font: inherit; font-size:var(--fs-14); font-weight: 700; text-decoration: none; position: relative; }
.ps-main > .btn::after { content: ""; position: absolute; inset: -2px 0; }
.ps-main > .fbtn.pri { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ps-main > .btn:hover, .ps-main > .btn:focus-visible { border-color: var(--fg); }
/* CTO UI batch (William, Oct 18): the full-width main action (Edit profile on your own profile, Follow on another) is
   solid, never outlined: the theme's text colour as the fill and its background as the text, so it is white with black
   text in dark mode and black with white text in light mode (both themes, the .light class and the OS setting, through
   the tokens). Following stays outlined, like X, so the state still reads. Focus keeps a visible ring. */
.ps-main > .ps-main-btn, .ps-main > .fbtn.pri { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ps-main > .ps-main-btn:hover, .ps-main > .fbtn.pri:hover, .ps-main > .ps-main-btn:focus-visible, .ps-main > .fbtn.pri:focus-visible { border-color: var(--fg); opacity: .88; }
.ps-main > .fbtn.on { background: transparent; color: var(--fg); border-color: var(--bd); }
.ps-main > .fbtn.on:hover, .ps-main > .fbtn.on:focus-visible { border-color: var(--fg); }
.ps-main > .btn:focus-visible { outline: 2px solid var(--check); outline-offset: 2px; }
.site-view .banner-empty, .site-view .banner.banner-empty { background: var(--ph-banner); border: 0; }
.site-view .avatar.avatar-empty { padding: 0; overflow: hidden; background: var(--ph-bg); display: block; }
.avatar-empty .robot-ph, .fl-avatar .robot-ph, .sr-avatar .robot-ph, .pe-avatar .robot-ph { display: block; width: 100%; height: 100%; }
.fl-avatar:not(.has-img) { background: var(--ph-bg); border-color: transparent; }
.fl-avatar.has-img > svg { display: none; }
.sr-avatar[data-placeholder="robot"] { background: var(--ph-bg); overflow: hidden; padding: 0; }
/* X-style Edit profile (William, Oct 17): header row Cancel | Edit profile | Save; banner with the avatar overlapping
   it, each a tap target with a camera overlay opening a small sheet (Upload photo / Paste link); label + value rows
   with thin dividers. */
.rec-editor .sheet { padding-top: 6px; }
.pe-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 52px; margin: 0 -4px; }
.pe-top .sheet-title { font-size:var(--fs-16); font-weight: 800; margin: 0; text-align: center; }
.pe-top-cancel { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--fg); text-decoration: none; font-size:var(--fs-14); }
.pe-top-save { justify-self: end; height: 32px; min-height: 32px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; position: relative; }
.pe-top-save::after { content: ""; position: absolute; inset: -6px 0; }
.pe-top-save[disabled] { opacity: .45; }
.pe-hero { position: relative; margin: 0 -16px 52px; }
.pe-hero .rec-media { display: block; gap: 0; }
.pe-header { position: relative; }
.pe-header .rec-preview-header { width: 100%; height: 128px; border: 0; border-radius: 0; background: var(--ph-banner); }
.pe-avatar { position: absolute; left: 16px; bottom: -44px; width: 84px; height: 84px; }
.pe-avatar .rec-preview-avatar { width: 84px; height: 84px; border: 3px solid var(--card); box-sizing: border-box; background: var(--ph-bg); }
.pe-cam { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, black 60%, transparent); color: white; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pe-cam:hover, .pe-cam:focus-visible { background: color-mix(in srgb, black 80%, transparent); outline: 2px solid white; outline-offset: 2px; }
.pe-cam .ico { width: 22px; height: 22px; }
.pe-link-input[hidden] { display: none !important; }
.pe-scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.pe-sheet { width: 100%; max-width: 420px; box-sizing: border-box; background: var(--bg); color: var(--fg); border-radius: 16px 16px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 4px; }
.pe-sheet-title { margin: 0 0 4px; font-size:var(--fs-16); font-weight: 800; text-align: center; }
.pe-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font: inherit; font-size:var(--fs-14); font-weight: 700; text-align: left; cursor: pointer; }
.pe-sheet-item:hover, .pe-sheet-item:focus-visible { background: var(--card); }
.pe-sheet-item.pe-danger { color: var(--err); }
.pe-sheet-cancel { justify-content: center; border: 1px solid var(--bd); border-radius: 999px; margin-top: 8px; min-height: 44px; }
.pe-sheet-hint { margin: 0 8px 4px; font-size:var(--fs-12); }
.pe-sheet-label { font-size:var(--fs-12); color: var(--mut); margin: 4px 0 0; }
.pe-sheet input.pe-link-input { min-height: 44px; border: 1px solid var(--bd); border-radius: 8px; padding: 8px 10px; background: transparent; color: var(--fg); font: inherit; }
/* Issue 476: re-accept modal (same sheet as the photo sheets; the checkbox starts unticked) */
.terms-sheet { gap: 10px; }
.terms-sheet .terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-size:var(--fs-14); font-weight: 600; line-height: 1.4; }
.terms-sheet .terms-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fg); }
.terms-sheet .terms-check a { color: inherit; text-decoration: underline; }
.terms-sheet .terms-disclaimer { margin: 4px 0 0 30px; font-size:var(--fs-12); }
.terms-sheet .err { margin: 0; }
/* QA 489 m4: the disabled primary button keeps readable text (muted on card, about 6:1 in both themes), like .pe-fab-save */
.terms-sheet .btn.pri[disabled] { opacity: 1; background: var(--card); color: var(--mut); border: 1px solid var(--bd); cursor: not-allowed; }
.terms-sheet .terms-version { margin: 0; font-size:var(--fs-12); }
.pe-sheet-done { min-height: 44px; border-radius: 999px; margin-top: 6px; justify-content: center; }
@media (min-width: 640px) { .pe-scrim { align-items: center; } .pe-sheet { border-radius: 16px; } }
/* Label + value rows with thin dividers (X); the records section layout itself is unchanged. */
.rec-editor .rec-rows { gap: 0; padding-top: 0; border-top: 1px solid var(--bd); }
.rec-editor .rec-row { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; align-items: center; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--bd); }
.rec-editor .rec-row > .rec-row-head { display: grid; gap: 0; align-content: center; }
.rec-editor .rec-row .rec-label { font-size:var(--fs-14); font-weight: 700; }
.rec-editor .rec-row .rec-keytag { font-size:var(--fs-12); }
.rec-editor .rec-row > .rec-line { border: 0; border-radius: 0; padding: 0; min-width: 0; }
.rec-editor .rec-row > .rec-line .ico { display: none; }
.rec-editor .rec-row > .rec-line input, .rec-editor .rec-row > .rec-line textarea { font-size:var(--fs-14); font-family: inherit; color: var(--check); padding: 8px 0; }
.rec-editor .rec-row > .rec-line input::placeholder, .rec-editor .rec-row > .rec-line textarea::placeholder { color: var(--mut); }
.rec-editor .rec-row > .hint, .rec-editor .rec-row > .err { grid-column: 1 / -1; margin: 0; }
.rec-editor .rec-row > .rec-readonly .rec-addr { font-size: 14px; color: var(--mut); }
.rec-editor .rec-row:focus-within .rec-label { color: var(--check); }
/* CTO UI batch (William, Oct 18): floating "+" and Save live inside the edit sheet (not fixed over the bottom nav). */
html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.rec-editor .sheet { position: relative; }
@media (max-width: 860px) {
  .rec-editor .sheet[data-step="review"] { scroll-margin-top: calc(60px + env(safe-area-inset-top)); }
}
.pe-fab { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; }
.pe-fab .btn { height: 52px; min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; }
.pe-fab-add { width: 52px; min-width: 52px; padding: 0; background: var(--card); color: var(--fg); border: 1px solid var(--bd); font-size: 28px; line-height: 1; }
.pe-fab-add > span[aria-hidden] { font-size: 28px; line-height: 1; margin-top: -2px; }
.pe-fab-save { padding: 0 26px; }
.pe-fab-save[disabled] { opacity: 1; background: var(--card); color: var(--mut); border: 1px solid var(--bd); cursor: not-allowed; }
.pe-fab .btn:focus-visible { outline: 2px solid var(--check); outline-offset: 3px; }
.pe-form[data-step="edit"] { padding-bottom: 96px; }
.pe-top-end { justify-self: end; width: 44px; }
/* Reorder handle on custom rows (drag with mouse / touch / pen, or Arrow keys). */
.rec-editor [data-section-editing] .rec-drag { touch-action: none; }
.rec-drag { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0 2px 0 -10px; border: 0; background: transparent; color: var(--mut); cursor: grab; display: inline-grid; place-items: center; border-radius: 10px; }
.rec-drag .rec-drag-ico path { stroke-width: 3.4; }
.rec-editor .rec-row > .rec-line .rec-drag .ico { display: block; }
.rec-drag:hover:not(:disabled), .rec-drag:focus-visible { color: var(--fg); background: var(--card); }
.rec-drag:focus-visible { outline: 2px solid var(--check); outline-offset: 0; }
.rec-drag:disabled { opacity: .35; cursor: default; }
.rec-editor { --surface-2: var(--card); --border-strong: var(--bd-strong); }
.rec-editor .rec-row { min-height: 52px; }
.rec-editor .rec-keytag { display: none; }
.rec-editor .rec-row:focus-within .rec-keytag { display: inline; font-family: var(--font-mono), ui-monospace, monospace; }
.rec-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.rec-sec-title { margin: 16px 0 4px; font-size: var(--fs-16); }
.rec-sec-edit, .rec-move, .custom-undo button { box-sizing: border-box; min-width: 44px; min-height: 44px; }
.rec-move { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-16); }
.rec-theme-btn { box-sizing: border-box; min-height: 44px; min-width: 44px; }
.rec-theme { display: flex; gap: 8px; }
.rec-theme-btn { flex: 1 1 0; border: 1px solid var(--bd); background: transparent; color: var(--fg); border-radius: 999px; font: inherit; font-weight: 700; }
.rec-theme-btn.on { background: var(--fg); color: var(--bg); }
html:root.geocities .rec-theme-btn.on { background: var(--gc-nav); color: var(--on-check); }
.rec-price { display: flex; align-items: center; gap: 8px; }
.rec-suffix { flex: none; }
.rec-endpoint { display: flex; gap: 8px; align-items: center; }
.rec-endpoint select, .rec-endpoint input { min-height: 44px; }
.rec-unsaved .rec-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.rec-dragging { background: var(--surface-2); outline: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px color-mix(in srgb, var(--fg) 28%, transparent); transform: translateY(-2px); }
.rec-editor [data-section-editing] .rec-sum, .rec-dragging { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rec-dragging :is(input, textarea) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.rec-insert { box-shadow: inset 0 2px 0 var(--accent); }
.rec-dragging .rec-drag { cursor: grabbing; color: var(--fg); }
.pe-top { position: sticky; top: 0; z-index: 5; background: var(--card); }
.rec-editor input::placeholder { color: var(--mut); }
.rec-sum { display: none; min-width: 0; }
.rec-sum b, .rec-sum span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-tools { display: contents; }
.rec-sw { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 48px; min-height: 44px; }
.rec-sw input { position: absolute; inset: 0; margin: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.rec-sw i { width: 48px; height: 28px; border-radius: 999px; background: var(--card); border: 1px solid var(--bd); position: relative; }
.rec-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mut); }
.rec-sw input:checked + i { background: var(--fg); border-color: var(--fg); }
.rec-sw input:checked + i::after { left: 23px; background: var(--card); }
html:root.geocities .rec-sw input:checked + i { background: var(--gc-nav); border-color: var(--gc-nav); }
html:root.geocities .rec-sw input:checked + i::after { background: var(--on-check); }
.rec-sw input:focus-visible + i { outline: 2px solid var(--check); outline-offset: 2px; }
.rec-editor .rec-row.rec-mail-row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .rec-editor { overflow-x: clip; max-width: 100%; }
  .rec-editor [data-section-editing] .rec-reorder { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rec-editor [data-section-editing] .rec-reorder:has(.rec-x) { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .rec-editor [data-section-editing] .rec-reorder > .rec-row-head,
  .rec-editor [data-section-editing] .rec-reorder .rec-line input,
  .rec-editor [data-section-editing] .rec-reorder .rec-kv { display: none; }
  .rec-editor [data-section-editing] .rec-reorder > .rec-sum { display: block; grid-row: 1; grid-column: 1; }
  .rec-editor [data-section-editing] .rec-reorder:has(.rec-x) > .rec-sum { grid-column: 2; }
  .rec-editor [data-section-editing] .rec-reorder > .rec-line { display: contents; }
  .rec-editor [data-section-editing] .rec-reorder .rec-tools { display: flex; flex: none; grid-row: 1; grid-column: 2; }
  .rec-editor [data-section-editing] .rec-reorder:has(.rec-x) .rec-tools { grid-column: 3; }
  .rec-editor [data-section-editing] .rec-reorder .rec-x { grid-row: 1; grid-column: 1; }
  .rec-editor [data-section-editing] .rec-reorder .rec-drag { margin: 0; }
  .rec-editor [data-section-editing] > .rec-sec-edit { display: none; }
}
.pe-top-save { height: 44px; min-height: 44px; }
.pe-preview { display: none; min-width: 0; }
.pe-preview-banner { height: 112px; background: var(--ph-banner); }
.pe-preview-banner img { width: 100%; height: 112px; object-fit: cover; display: block; }
@media (min-width: 1100px) {
  .rec-editor { grid-template-columns: minmax(0, 1fr) 460px; align-items: start; }
  .rec-editor .sheet { grid-column: 2; grid-row: 1; width: 460px; max-width: 100%; }
  .pe-preview { display: block; grid-column: 1; grid-row: 1; }
  .rec-editor .rec-mysite { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dragging { transform: none; transition: none; animation: none; }
}
/* /terms.html (published #69 testnet draft, scripts/terms/build-terms.mjs): readable long text in the app card. */
.terms-doc { max-width: 72ch; line-height: 1.55; }
.terms-doc h2 { font-size:var(--fs-20); margin: 24px 0 8px; }
.terms-doc ul { padding-left: 20px; margin: 8px 0; }
.terms-doc li { margin: 4px 0; }
.terms-doc code { font-size: .92em; overflow-wrap: anywhere; }
.terms-banner { color: var(--warn); border: 1px solid currentColor; border-radius: 8px; padding: 10px 14px; margin: 12px 0 16px; }
.terms-banner p { margin: 4px 0; }
/* PR-10d: one records list on the public profile (and the app Profile tab, which uses the same render). */
.site-view dl.rec{margin:16px 0 0}
.site-view dl.rec .rec-row{display:grid;grid-template-columns:168px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--bd)}
.site-view dl.rec dt{margin:0;font-size:var(--fs-14,14px);color:var(--mut)}
.site-view dl.rec dd{margin:0;font-size:var(--fs-16,16px);color:var(--fg);overflow-wrap:anywhere}
.site-view dl.rec .rec-long dd{white-space:pre-wrap}
.site-view .rec-status{margin:20px 0 0}
.site-view .status-pill{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;border:1px solid var(--bd);color:var(--fg);font-size:14px}
.site-view .rec-motto{margin:8px 0 0;font-size:20px;line-height:1.3;color:var(--fg)}
.site-view .live{display:flex;align-items:center;gap:8px}
.site-view .live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
@media (max-width:600px){
  .site-view dl.rec .rec-row{grid-template-columns:1fr;gap:4px}
}
/* PR-09c: GeoCities Email card under Follow, before the records list. */
.site-view .mail{margin-top:20px;border-radius:16px;padding:20px;border:1px solid var(--bd-strong);background:linear-gradient(180deg,var(--mail-wash) 0%,var(--card) 100%)}
:root.light .site-view .mail{background:var(--card)}
.site-view .mail-top{display:grid;grid-template-columns:1fr auto;gap:16px 20px;align-items:center}
.site-view .mail-h{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-12);font-weight:700;letter-spacing:0;text-transform:none;color:var(--check)}
:root.light .site-view .mail-h{color:var(--mail-eyebrow)}
.site-view .mail-h .mail-ico{width:16px;height:16px;flex:none}
.site-view .mail .svc-soon{display:inline-flex;align-items:center;min-height:20px;padding:1px 10px;border:1px solid var(--bd);border-radius:999px;color:var(--warn);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.site-view .mail .svc-soon::first-letter{text-transform:uppercase}
.site-view .mail-addr{display:flex;align-items:center;gap:2px;margin-top:8px;min-width:0}
.site-view .mail-addr-text{font-weight:500;font-size:16px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--fg);min-width:0}
.site-view .mail-copy{position:relative;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.site-view .mail-copy:hover{color:var(--fg);background:var(--card)}
.site-view .mail-copy .mail-ico{width:16px;height:16px}
.site-view .mail-copy .mail-ico-check{display:none}
.site-view .mail-copy[data-state="copied"] .mail-ico-copy{display:none}
.site-view .mail-copy[data-state="copied"] .mail-ico-check{display:block}
.site-view .mail-price{margin:8px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.site-view .mail-amt{font-size:28px;font-weight:700;letter-spacing:-0.02em;color:var(--fg)}
.site-view .mail-unit{font-size:14px;color:var(--mut)}
.site-view .mail-free{font-size:16px;font-weight:600;color:var(--fg)}
.site-view .mail-unavail{font-size:16px;color:var(--mut)}
.site-view a.mail-send{box-sizing:border-box;height:48px;min-height:48px;min-width:168px;padding:0 18px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:inherit;font-size:var(--fs-14);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.site-view a.mail-send:hover{background:color-mix(in srgb,var(--fg) 88%,var(--bg))}
.site-view a.mail-send:active{opacity:.85}
.site-view .mail-fine{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd-strong)}
.site-view .mail-note,.site-view .mail-postage,.site-view .mail-toast{margin:0;font-size:12px;line-height:1.45;color:var(--mut)}
.site-view .mail-toast{margin-top:8px;color:var(--fg)}
.site-view .mail-toast:empty{margin:0;height:0;overflow:hidden}
.site-view .mail-postage{margin-top:4px}
@media (max-width:600px){
  .site-view .mail{padding:16px}
  .site-view .mail-top{grid-template-columns:1fr}
  .site-view .mail-addr-text{font-size:14px;overflow-wrap:anywhere}
  .site-view a.mail-send{width:100%;min-width:0}
}
@media (prefers-color-scheme:light){
  :root:not(.dark) .site-view .mail{background:var(--card)}
  :root:not(.dark) .site-view .mail-h{color:var(--mail-eyebrow)}
}
@media (prefers-reduced-motion:reduce){.site-view a.mail-send{transition:none}}
/* App rail: labelled 3-tab bottom bar at ≤860px, 240px sticky rail at ≥861px. */
.app-top { z-index: 20; }
.app-nav {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; transform: none;
  z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--bd); border-right: 0; box-shadow: none;
}
.app-nav .rail-brand { display: none; }
.app-nav a {
  min-width: 44px; min-height: 64px; height: 64px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 2px; text-decoration: none; color: var(--mut); opacity: 1;
  font-size: 12px; font-weight: 500; line-height: 1.1; box-shadow: none;
}
.app-nav a.cur { color: var(--fg); font-weight: 500; background: transparent; }
.app-nav .nav-ico { display: block; width: 24px; height: 24px; }
.app-nav .nav-label { font-size: 12px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
@media (min-width: 861px) {
  body.app { padding-bottom: 0; }
  #shell { display: flex; align-items: flex-start; min-height: 100vh; }
  .app-col { flex: 1; min-width: 0; }
  body.app nav.app-rail {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto; transform: none;
    flex: none; width: 240px; height: 100vh; max-width: none; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 16px 12px; z-index: 10;
    background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: 0; border-right: 1px solid var(--bd); border-radius: 0;
  }
  body.app nav.app-rail .rail-brand {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
    height: auto; min-height: 44px; margin: 0 0 8px; padding: 0 8px;
    color: var(--fg); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    text-decoration: none; background: transparent; border-radius: 8px;
  }
  body.app nav.app-rail .rail-brand::before {
    content: ""; width: 28px; height: 28px; flex: none;
    background: transparent var(--mark) center / 100% no-repeat;
  }
  body.app nav.app-rail a {
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px;
    height: 44px; min-height: 44px; padding: 0 10px; border-radius: 8px;
    font-size: 16px; font-weight: 500; color: var(--mut);
  }
  body.app nav.app-rail a.cur { background: var(--card); color: var(--fg); font-weight: 500; }
  body.app nav.app-rail .nav-ico { width: 24px; height: 24px; flex: none; }
  body.app nav.app-rail .nav-label { font-size: 16px; font-weight: 600; line-height: 1.2; }
  .app-col .app-top { max-width: none; width: 100%; margin: 0; justify-content: flex-end; box-sizing: border-box; }
  .app-col .app-top .logo { display: none; }
  .app-col .app-banner { max-width: none; width: 100%; margin: 0; box-sizing: border-box; }
  .app-col .app-main { max-width: 680px; width: 100%; margin: 0; box-sizing: border-box; padding-bottom: 24px; }
  body.app[data-tab="settings"] .app-col .app-main { max-width: 640px; }
  body.app > footer.gc-footer { margin-left: 240px; width: calc(100% - 240px); box-sizing: border-box; }
  body.app > #app-status { margin-left: 240px; }
}
/* fix/profile-density (William, iPhone): compact cards, small icon chips that wrap in rows, X-style banner/avatar. */
.site-view .banner{height: 112px;}
.site-view .card{padding: 0 0 4px;}
.site-view .card .avatar{width: 76px; height: 76px; border: 3px solid var(--bg); box-sizing: border-box;}
.site-view .card.has-banner .avatar{margin-top: -38px; position: relative;}
.site-view .card h1{font-size:var(--fs-20); margin: 6px 0 0;}
.site-view .card h1 + .muted{margin: 0; font-size: 14px;}
.site-view .box{padding: 10px 0 0; margin: 10px 0 0;}
.site-view .box h2{font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px;}
.site-view .kv.chips{display: flex; flex-wrap: wrap; gap: 6px; margin: 0;}
.site-view .chip{min-height: 32px; padding: 4px 12px; gap: 6px; font-size:var(--fs-12); border-radius: 999px; background: var(--card); align-items: center;}
.site-view .chip dt{font-size: 12px;}
.site-view .chip dd{margin: 0; min-width: 0; overflow-wrap: anywhere;}
.site-view .chip a{position: relative;}
.site-view .chip a::after{content: ""; position: absolute; inset: -3px;} /* Security m1: hit-area overhang 3px max; the 44px target is the link box itself */
.site-view .chip[data-key]::before{content: "\2022"; content: "\2022" / ""; font-size:var(--fs-12); line-height: 1; width: 14px; text-align: center; color: var(--mut);}
.site-view .chip[data-key="url"]::before{content: "\2197"; content: "\2197" / "";}
.site-view .chip[data-key="name"]::before{content: "@"; content: "@" / "";}
.site-view .chip[data-key="location"]::before{content: "\2316"; content: "\2316" / "";}
.site-view .chip[data-key="timezone"]::before{content: "\25F7"; content: "\25F7" / "";}
.site-view .chip[data-key="com.twitter"]::before{content: "\1D54F"; content: "\1D54F" / "";}
.site-view .chip[data-key="com.github"]::before{content: "</>"; content: "</>" / "";}
.site-view .chip[data-key="org.telegram"]::before{content: "\27A4"; content: "\27A4" / "";}
.site-view .chip[data-key="email"]::before{content: "\2709"; content: "\2709" / "";}
.site-view .chip[data-key="description"]::before{content: "\2261"; content: "\2261" / "";}
.site-view .chip[data-key="url"] dt, .site-view .chip[data-key="location"] dt, .site-view .chip[data-key="timezone"] dt{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.site-view .chip a{display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; padding: 0 2px;} /* QA: ~44px tap target, chip stays 32px */
/* Issue 349 PR 2: every chip, field and button on Profile is a pill. */
.site-view .btn, .site-view button, .site-view input, .site-view select, .site-view textarea{border-radius: 999px;}
.site-view textarea{border-radius: 20px;}
.site-view .pi-btn{border-radius: 50%;}
/* Issue 422: long record values as wrapped text blocks (not stretched pills); namespaced groups use the same chips. */
.site-view .chip.chip-long { display: block; flex-basis: 100%; width: 100%; border-radius: 12px; padding: 8px 12px; white-space: pre-wrap; }
.site-view .chip.chip-long::before { display: none; }
.site-view .chip.chip-long dt { display: block; margin: 0 0 2px; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } /* a block shows its label (its icon is off) */
.site-view .chip.chip-long dd { display: block; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }
/* CTO Oct 17 (item 2): Follow on the right side of the followers/following counts row. */
.site-view .ps-meta .follow.follow-row { justify-content: space-between; flex-wrap: nowrap; }
.site-view .ps-meta .follow.follow-row > .fbtn { margin-left: auto; flex: none; }
.site-view .ens-heading { overflow-wrap: anywhere; }
/* Security m1 (PR 454 review): the Nickname value is isolated from the heading direction. */
.site-view .ps-nick bdi { unicode-bidi: isolate; }
/* #7 (CTO, Oct 22): llms.txt + agent.json under the website row; Webring / Works as plain links; long lists behind Show more. */
.site-view [hidden] { display: none !important; } /* hidden chips (Show more) beat .chip's display:flex */
.site-view .agent-links { margin-top: 4px; font-size: 14px; }
.site-view .agent-links .meta-item a { color: var(--fg); text-decoration: underline; }
.site-view .agent-home { margin: 8px 0 0; display: grid; gap: 4px; }
.site-view .agent-home-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; min-width: 0; }
.site-view .agent-home dt { margin: 0; color: var(--mut); }
.site-view .agent-home dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.site-view .agent-home a { color: var(--fg); text-decoration: underline; }
.site-view .agent-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--bd); border-radius: 999px; font-size:var(--fs-12); }
.site-view .plain-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-view .plain-link { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.site-view .plain-link .pl-label { color: var(--mut); }
.site-view .plain-link a { color: var(--fg); text-decoration: underline; display: inline-flex; align-items: center; min-height: 32px; }
.site-view .show-more { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 0; padding: 0 14px; border: 1px solid var(--bd); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.site-view .show-more:focus-visible { outline: 2px solid var(--check); outline-offset: 2px; }
/* Public history (todo #23) and the records version line (todo #19), same rules as the shared template. */
.site-view .gc-version { margin: 16px 0 0; font-size:var(--fs-12); color: var(--text-2, var(--mut)); }
.site-view .gc-version[hidden] { display: none !important; }
.site-view .gc-history { margin: 8px 0 0; font-size: 14px; }
.site-view .gc-history h2 { font-size:var(--fs-16); margin: 0 0 4px; }
.site-view .gc-history .hint { margin: 0 0 8px; }
.site-view .gc-history ul { list-style: none; margin: 0; padding: 0; }
.site-view .gc-history li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--bd); min-width: 0; }
.site-view .gc-history li > span { min-width: 0; overflow-wrap: anywhere; }
.site-view .gc-history time { color: var(--mut); flex: none; }
.site-view .gc-history [hidden] { display: none; }
.site-view .chip[data-key="mail.price"]{align-items:baseline;flex-wrap:wrap;max-width:100%}
.site-view .chip[data-key="mail.price"] .mail-price{color:var(--fg);font-weight:400}
.site-view .chip[data-key="mail.price"] .mail-price-amt{font-weight:600;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.site-view .chip[data-key="mail.price"] .mail-price-unit{font-weight:400}
.site-view .chip[data-key="mail.price"] .mail-price-free{color:var(--fg);font-weight:400}
.site-view .chip[data-key="mail.price"] .mail-price-unavail{color:var(--mut);font-weight:400}
/* PR-14c: Home, Email, Wallet, Agent. Same bar as apps/site-template/src/style.css. That sheet sticks the bar at 56px (64px from 861px) under the public header. This page only loads app.css, and .app-top is 60px at both widths, so the bar clears that plus the safe area. .page a.site-tab wins over html:root.geocities a (blue underlined links). --link is the template token; the app paints it with --accent. */
.site-view .site-tabs{display:flex;position:sticky;top:calc(60px + env(safe-area-inset-top));z-index:2;background:var(--bg);margin:8px -12px 0;border-bottom:1px solid var(--bd)}
.site-view .site-tab,.site-view .page a.site-tab{flex:1 1 0;min-width:0;height:52px;min-height:52px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--mut);font-size:15px;font-weight:700;position:relative}
.site-view .site-tab:focus-visible,.site-view .page a.site-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-view .site-tab[aria-selected="true"],.site-view .page a.site-tab[aria-selected="true"]{color:var(--fg)}
.site-view .site-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--link,var(--accent))}
html:root.geocities .site-view .site-tabs{top:calc(var(--gc-marquee-h) + 60px)}
@media (prefers-reduced-motion:reduce){.site-view .site-tab{transition:none}}