/* Homepage wallet controls share the site's connection controller. */
.header{position:relative;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:20px;direction:ltr}.header-actions{display:contents}.header>.brand{grid-column:1;white-space:nowrap}.header-actions>.network{grid-column:2;justify-self:center;white-space:nowrap}.home-preferences{grid-column:4}.site-wallet-control{grid-column:3;min-width:0}
#site-wallet{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;min-height:38px;padding:9px 15px;border:1px solid #38413b;font:11px var(--mono);color:var(--ink);white-space:nowrap;transition:border-color .2s,background .2s}
#site-wallet:hover{border-color:#748278;background:#d5d9d008}#site-wallet[aria-busy="true"]{opacity:.65;cursor:progress}
.veil{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:#000b;backdrop-filter:blur(8px)}.veil.on{display:flex}.veil-alert{z-index:110}
.sheet{width:100%;max-width:400px;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;background:#0b0e0c;border:1px solid #38413b;box-shadow:0 20px 80px #0008}
.sheet h2{margin:0;padding:18px 20px;border-bottom:1px solid var(--line);font:11px var(--mono);font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pick{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;text-align:left;border:0;border-top:1px solid var(--line);font:16px Titillium,sans-serif;background:none;color:var(--ink)}.pick:first-child{border-top:0}.pick:hover{background:#ffffff05}.pick span{margin-left:auto;font:10px var(--mono);color:var(--muted);white-space:nowrap}.pick:focus-visible{outline-offset:-4px}.pick-hint{margin:0;padding:16px 20px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--muted)}.pick-hint:empty{display:none}
.alert-msg{margin:0;padding:24px 20px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}.pick-ok{justify-content:center}

/* Shared preferences use one disclosure and labelled native selects. */
.hctl{display:flex;align-items:center;gap:8px}.hdd{position:relative}
.hdd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:38px;padding:9px 12px;border:1px solid #38413b;font:11px var(--mono);color:var(--ink);letter-spacing:.04em;white-space:nowrap;direction:ltr}.hdd-btn:hover,.hdd-btn[aria-expanded="true"]{border-color:#748278;background:#d5d9d008}
.hdd-caret{width:6px;height:6px;flex:none;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.hdd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:16px;width:min(320px,calc(100vw - 24px));max-height:min(65vh,440px);overflow:auto;overscroll-behavior:contain;background:#0b0e0c;border:1px solid #38413b;box-shadow:0 14px 44px #0009}
.hdd-menu[hidden]{display:none}.hdd-field+.hdd-field{margin-top:16px}
.hdd-label{display:block;margin-bottom:7px;font:12px/1.4 Titillium,sans-serif;color:var(--muted);letter-spacing:.02em;text-align:start}
.hdd-select{display:block;width:100%;min-width:0;min-height:42px;padding:8px 10px;border:1px solid #38413b;border-radius:0;background:#101512;color:var(--ink);font:14px/1.4 Titillium,sans-serif;letter-spacing:0;text-transform:none;text-overflow:ellipsis;color-scheme:dark;cursor:pointer}
.hdd-btn:focus-visible,.hdd-select:focus-visible{outline:1px solid #aabeb1;outline-offset:3px}
/* Keep the brand, network, wallet and combined preferences on one row. */
@media(max-width:900px){
  .header{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:12px;height:76px;min-height:76px}
  .header>.brand{font-size:12px;letter-spacing:.08em;gap:6px}
  .header>.brand img{width:22px;height:22px}
  .header-actions>.network{font-size:9px;letter-spacing:0;gap:5px}
  .header .status-dot{width:4px;height:4px}
  .site-wallet-control{justify-self:end;max-width:116px}
  #site-wallet{max-width:116px;min-height:36px;padding:8px 10px;font-size:10px}
  .home-preferences{justify-self:end}
  .hctl{gap:5px}.hdd-btn{min-height:36px;padding:8px;font-size:10px;gap:6px}
  .veil{padding:18px}.sheet{max-height:calc(100dvh - 36px)}
}
@media(max-width:600px){
  .header{margin-inline:-12px;column-gap:5px;height:72px;min-height:72px}
  .header>.brand{font-size:clamp(9.5px,2.6vw,12px);letter-spacing:.04em;gap:4px}
  .header>.brand img{width:clamp(16px,4.6vw,22px);height:clamp(16px,4.6vw,22px)}
  .header-actions>.network{font-size:clamp(7.5px,2vw,9px);gap:4px}
  .header .status-dot{width:3px;height:3px}
  .site-wallet-control{max-width:66px}
  #site-wallet{max-width:66px;min-height:36px;padding:8px 5px;font-size:clamp(8px,2.1vw,10px)}
  .hctl{gap:3px}.hdd-btn{min-height:36px;padding:8px 4px;font-size:clamp(8px,2.1vw,10px);letter-spacing:0;gap:4px}
  .hdd-caret{width:4px;height:4px}
  .hdd-menu{position:fixed;top:62px;right:12px;max-width:calc(100vw - 24px)}
}
@media(min-width:381px) and (max-width:600px){
  #site-wallet,.hdd-btn{font-size:clamp(9.5px,2.4vw,10px)}
}
@media(max-width:380px){
  .header{margin-inline:-6px;column-gap:4px}
  .site-wallet-control,#site-wallet{max-width:50px}
}