/* The shared HANS profile in IRIS (public/hans/iris-profile.js). Every rule here is for markup that script adds, or is
 * scoped under html.iris-hans-on (set only when the profile is shown), so with the release gate off nothing changes.
 *   1. The header: the wallet button and the profile button, in IRIS's own glass-pill look.
 *   2. The pop-out (<hans-profile>, HANS-branded): its layer sits above IRIS's chrome and support bubble.
 *   3. The Account tab: IRIS's account center (account.css, scoped under .account-page) laid out for the sheet's width. */

/* ── 1. Header controls ── */
/* --iris-control: the height of the header's own buttons, which the controls match (IRIS's 38 px; 44 px on touch
   screens and up to 780 px), and the compact wallet button's width. */
html.iris-hans-on { --iris-control: 38px; }
.iris-hans-controls { display: inline-flex; flex: none; align-items: center; gap: 9px; }
.iris-wallet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--iris-control, 38px);
  padding: 0 15px 0 12px;
  border: 1px solid rgba(var(--i-violet-rgb), 0.22);
  border-radius: var(--i-r-pill);
  background: var(--i-surface-2);
  color: var(--i-text);
  font: 500 13px/1 var(--i-font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease);
}
.iris-wallet-button svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--i-lilac); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iris-wallet-button:hover { background: var(--i-surface-3); border-color: rgba(var(--i-violet-rgb), 0.5); box-shadow: var(--i-halo); color: #fff; }
.iris-wallet-button:active { transform: scale(0.97); }
.iris-wallet-button:focus-visible { outline: 2px solid rgba(var(--i-violet-rgb), 0.8); outline-offset: 2px; }
.iris-wallet-compact { display: none; }
/* Connected: the address in IRIS's mono face, with the mint "live" dot (mint only ever means live or secure). */
.iris-wallet-button[data-state="connected"] { border-color: rgba(var(--i-mint-rgb), 0.28); }
.iris-wallet-live { flex: none; width: 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: var(--i-mint); box-shadow: 0 0 8px rgba(var(--i-mint-rgb), 0.9); }
.iris-wallet-address, .iris-wallet-compact { font: 500 12.5px/1 var(--i-font-mono); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

/* The network button beside the wallet (as in Luma): the current network, or "Wrong network", opening a small menu. */
.iris-network-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--iris-control, 38px); padding: 0 12px 0 13px;
  border: 1px solid rgba(var(--i-violet-rgb), 0.22); border-radius: var(--i-r-pill);
  background: var(--i-surface-2); color: var(--i-text); font: 500 13px/1 var(--i-font); white-space: nowrap; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-tap-highlight-color: transparent;
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease);
}
.iris-network-button[hidden] { display: none; }
.iris-network-button:hover, .iris-network-button[aria-expanded="true"] { background: var(--i-surface-3); border-color: rgba(var(--i-violet-rgb), 0.5); box-shadow: var(--i-halo); }
.iris-network-button:active { transform: scale(0.97); }
.iris-network-button:focus-visible { outline: 2px solid rgba(var(--i-violet-rgb), 0.8); outline-offset: 2px; }
.iris-network-button[data-state="wrong"] { border-color: rgba(255, 107, 122, 0.5); color: #ffb3bb; }
.iris-caret { width: 10px; height: 10px; fill: none; stroke: var(--i-text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--i-dur-2) var(--i-ease); }
.iris-network-button[aria-expanded="true"] .iris-caret { transform: rotate(180deg); }
.iris-chain-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--chain); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 10px color-mix(in srgb, var(--chain) 60%, transparent); }

.iris-wallet-menu {
  position: fixed; z-index: 2147483000; min-width: 220px; padding: 8px;
  border: 1px solid rgba(var(--i-violet-rgb), 0.3); border-radius: var(--i-r-md, 16px);
  background: color-mix(in srgb, var(--i-bg) 92%, #2a1f45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7), var(--i-halo);
  animation: iris-wallet-pop 220ms var(--i-ease) both;
}
.iris-wallet-menu-title { margin: 4px 8px 8px; color: var(--i-text-3); font: 500 10.5px/1 var(--i-font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.iris-wallet-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--i-text); font: 500 13.5px/1 var(--i-font); text-align: left; cursor: pointer;
}
.iris-wallet-menu-item:hover, .iris-wallet-menu-item:focus-visible { background: rgba(var(--i-violet-rgb), 0.12); outline: none; }
.iris-wallet-menu-item[aria-checked="true"] { background: rgba(var(--i-violet-rgb), 0.16); }
.iris-wallet-menu-note { margin-left: auto; color: var(--i-mint); font: 500 11px/1 var(--i-font); }

/* The connected-wallet panel (a wallet-connection.css dialog). */
.iris-wallet-identity { display: grid; justify-items: center; gap: 10px; margin: 18px 0 16px; padding: 18px; border: 1px solid var(--i-line, rgba(255,255,255,0.08)); border-radius: var(--i-r-md, 16px); background: rgba(var(--i-violet-rgb), 0.06); }
.iris-wallet-connected { display: inline-flex; align-items: center; gap: 6px; color: var(--i-mint); font: 600 11px/1 var(--i-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.iris-wallet-identity .iris-wallet-connected .iris-wallet-live { display: block; position: static; margin: 0; }
.iris-wallet-full { color: var(--i-text); font: 600 20px/1 var(--i-font-mono); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.iris-wallet-chain { display: inline-flex; align-items: center; gap: 7px; color: var(--i-text-2); font: 500 12.5px/1 var(--i-font); }
.iris-wallet-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.iris-wallet-links .iris-wallet-copy { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.iris-wallet-account .iris-wallet-message:empty { display: none; }
.iris-wallet-account .iris-wallet-message { margin-top: 10px; word-break: break-all; }
.iris-wallet-choices .iris-wallet-disconnect { color: #ffb3bb; }
.iris-wallet-choices .iris-wallet-disconnect::after { content: '⏻'; }

/* The profile button is the SDK's <hans-profile-button> (it paints the Hansian or the HANS silhouette), dressed
   as an IRIS glass circle through its tokens and its `button` part. */
hans-profile-button, .iris-profile-migration {
  --hans-button-size: var(--iris-control, 38px);
  --hans-button-text: var(--i-lilac);
  --hans-button-line: rgba(var(--i-violet-rgb), 0.3);
  --hans-button-bg: var(--i-surface-2);
  --hans-button-ring: var(--i-bg);
  --hans-accent: rgba(var(--i-violet-rgb), 0.8);
  --hans-font-display: var(--i-font-display);
  flex: none;
}
hans-profile-button::part(button) {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease);
}
hans-profile-button::part(button):hover { background: var(--i-surface-3); border-color: rgba(var(--i-violet-rgb), 0.55); box-shadow: var(--i-halo); }
hans-profile-button::part(button):active { transform: scale(0.96); }
.iris-profile-migration {
  --hans-avatar-size: var(--iris-control, 38px);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--iris-control, 38px); height: var(--iris-control, 38px);
  min-width: var(--iris-control, 38px); max-width: var(--iris-control, 38px); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%; background: var(--i-surface-2); color: var(--i-lilac);
  text-decoration: none; cursor: pointer;
}
.iris-profile-migration[hidden] { display: none !important; }
.iris-profile-migration > .hans-avatar { display: flex; }
.iris-profile-migration::after { content: ''; position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: #ecca8e; border: 2px solid var(--i-bg); pointer-events: none; }
.iris-profile-migration:hover { box-shadow: var(--i-halo); }
.iris-profile-migration:focus-visible { outline: 2px solid rgba(var(--i-violet-rgb), 0.8); outline-offset: 2px; }

/* Where the controls sit: after the header's own buttons, on the right. */
html.iris-hans-on .earn-page .portal-topbar > .iris-hans-controls { margin-left: 10px; }
html.iris-hans-on .upgrade-page .upgrade-header > .back-link { margin-left: auto; }
html.iris-hans-on .account-page .account-header > .account-back { margin-right: auto; }
/* Narrower screens, where upgrade hides its wordmark and earn wraps its bar: the page's own button keeps its place,
   the controls go to the right (earn: on a row of their own under the bar's first row). */
@media (max-width: 780px) {
  html.iris-hans-on .upgrade-page .upgrade-header > .back-link { margin-left: 0; }
  html.iris-hans-on .upgrade-page .upgrade-header > .iris-hans-controls { margin-left: auto; }
}
@media (max-width: 480px) {
  html.iris-hans-on .earn-page .portal-topbar > .iris-hans-controls { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
}
/* Overview and Earn, at any width: when the header's own buttons and the controls don't fit on one row, the controls
   wrap onto a row of their own under the header's buttons, on the right. The header's own row never moves, and the
   header grows to fit instead of holding its fixed height.
   Overview: inside its account actions (Pro's auto margin, from the old header in styles.css, would push it away from
   "Log in" on a wrapped row). Earn: its bar, with HANS's mark holding the left (earn wraps the bar itself on phones). */
html.iris-hans-on .portal-topbar .header-account-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
html.iris-hans-on .portal-topbar .header-account-actions > .beta { margin-left: 0; }
html.iris-hans-on .earn-page .portal-topbar { flex-wrap: wrap; justify-content: flex-end; }
html.iris-hans-on .earn-page .portal-topbar > .hans-powered { margin-right: auto; }
/* Above 520 px IRIS gives the header a fixed height (76 px, 58 px up to 780 px, each with a 1 px bottom border) and
   centers its one row. With the profile on, the height is a minimum, and the row is placed exactly where centering put
   it (HANS's mark 44 px tall, the buttons --iris-control), so a header on one row is pixel for pixel IRIS's own, and
   Overview's first row stays put when the controls wrap under it. (Earn's bar wraps as a whole and keeps centering.) */
@media (min-width: 521px) {
  html.iris-hans-on .portal-topbar { height: auto; min-height: 76px; row-gap: 8px; }
  html.iris-hans-on .dashboard-page .portal-topbar { align-items: flex-start; padding-block: 15.5px; }
  html.iris-hans-on .dashboard-page .portal-topbar > .header-account-actions { margin-top: calc((44px - var(--iris-control, 38px)) / 2); }
}
@media (min-width: 521px) and (max-width: 780px) {
  html.iris-hans-on .portal-topbar, html.iris-hans-on .dashboard-page .portal-topbar { min-height: 58px; padding-block: 6.5px; }
}

/* Touch screens (and every screen up to 780 px): every control is 44 px, as IRIS's own buttons are there. */
@media (pointer: coarse), (max-width: 780px) {
  html.iris-hans-on { --iris-control: 44px; }
}
/* Wherever the header has no room for the wallet button's full label, it takes its compact form: a glass circle with
   the glyph (connected: the glyph and the address's last four, …abcd). Its accessible name still says "Connect
   wallet" or the address. That is up to 720 px (phones, phones in landscape, narrow windows) and from 781 to 960 px
   (tablets and narrow desktop windows, where Overview's sidebar sits beside the header). Every page takes the same
   form at a given width. */
@media (max-width: 720px), (min-width: 781px) and (max-width: 960px) {
  .iris-hans-controls { gap: 6px; }
  .iris-wallet-button { min-width: var(--iris-control, 38px); gap: 6px; padding: 0 11px 0 10px; }
  .iris-wallet-button[data-state="disconnected"] { width: var(--iris-control, 38px); padding: 0; }
  .iris-wallet-long, .iris-wallet-address, .iris-wallet-live { display: none; }
  .iris-network-name { display: none; }
  .iris-network-button { padding: 0 10px; gap: 6px; }
  .iris-wallet-compact { display: inline; }
}
/* The narrowest phones: the wallet button is the glyph alone, with the mint dot when a wallet is connected. */
@media (max-width: 380px) {
  .iris-wallet-button, .iris-wallet-button[data-state="connected"] { position: relative; width: var(--iris-control, 38px); padding: 0; }
  .iris-wallet-compact { display: none; }
  .iris-wallet-live { display: block; position: absolute; top: 8px; right: 8px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .iris-wallet-menu { animation: none; }
  .iris-network-button, .iris-wallet-button, hans-profile-button::part(button) { transition: none; }
  .iris-wallet-button:active, hans-profile-button::part(button):active { transform: none; }
}

/* ── 2. The pop-out ── */
/* Above IRIS's chrome and its support bubble (900); IRIS's wallet picker is a modal <dialog>, so it opens above. */
hans-profile { --hans-z: 1000; }
hans-profile:not(:defined) { display: none; }

/* ── 3. The Account tab: the account center at the sheet's width (one column at every screen size) ── */
/* The slot carries .account-page so account.css styles the center as on /account, minus the page's own canvas. */
.iris-account-slot.account-page { display: block; min-height: 0; overflow: visible; background: none; color: var(--i-text); }
.iris-account-slot .account-center > * { animation: none; }
.iris-account-slot.account-page .account-hero { gap: 8px 12px; margin: 2px 0 0; }
.iris-account-slot.account-page .account-title-row h1 { font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.iris-account-slot.account-page .account-title-row .iris-info { margin-left: 8px; vertical-align: 0.15em; }
.iris-account-slot.account-page .account-status { margin: 14px 0 16px; }
.iris-account-slot.account-page .account-signin-card { grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 0; padding: 24px 20px; border-radius: var(--i-r-lg); }
.iris-account-slot.account-page .account-signin-card > .account-signin-copy,
.iris-account-slot.account-page .account-signin-card > .account-auth-actions,
.iris-account-slot.account-page .account-signin-card > .account-trust-line,
.iris-account-slot.account-page .account-legal-gate > .account-signin-copy { grid-column: 1; grid-row: auto; }
.iris-account-slot.account-page .account-signin-card > .account-auth-actions { width: 100%; max-width: none; }
.iris-account-slot.account-page .account-signin-emblem { width: 52px; height: 52px; margin-bottom: 14px; padding: 13px; border-radius: 16px; }
.iris-account-slot.account-page .account-signin-copy h2 { font-size: 24px; }
.iris-account-slot.account-page .account-signin-copy p { font-size: 14px; }
.iris-account-slot.account-page .account-card { margin-top: 14px; padding: 20px; }
.iris-account-slot.account-page .account-card h2 { font-size: 18px; }
.iris-account-slot.account-page .account-section-heading { flex-wrap: wrap; gap: 10px 16px; }
.iris-account-slot.account-page .account-method-grid { grid-template-columns: 1fr; }
.iris-account-slot.account-page .account-method { grid-template-columns: 44px minmax(0, 1fr); }
.iris-account-slot.account-page .account-method .method-state { grid-column: 2; justify-self: start; }
.iris-account-slot.account-page .account-method .method-action { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
.iris-account-slot.account-page .account-checks-card { grid-template-columns: minmax(0, 1fr); }
.iris-account-slot.account-page .account-checks-card > .account-quick-actions,
.iris-account-slot.account-page .account-checks-card > #manage-billing { grid-column: 1; }
.iris-account-slot.account-page .account-checks-card > #manage-billing { justify-self: stretch; margin-top: 12px; }
.iris-account-slot.account-page .account-quick-actions a { flex: 1 1 auto; justify-content: center; }
.iris-account-slot.account-page .account-form-row { flex-direction: column; }
.iris-account-slot.account-page .linked-wallet-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.iris-account-slot.account-page .account-wallet-actions .action,
.iris-account-slot.account-page .account-wallet-actions .wallet-options { width: 100%; justify-content: center; }
.iris-account-slot.account-page .verified-email-row { flex-direction: column; align-items: stretch; }
.iris-account-slot.account-page .verified-email-actions .action { flex: 1; }
.iris-account-loading { margin: 0; padding: 14px 16px; border: 1px solid var(--i-well-line); border-radius: var(--i-r-md); background: var(--i-well); color: var(--i-text-2); font: 400 13.5px/1.55 var(--i-font); }
.iris-account-loading a { color: var(--i-lilac); text-underline-offset: 3px; }
.iris-account-notice { margin: 2px 0 0; color: var(--i-text-3); font: 400 12.5px/1.5 var(--i-font); text-align: center; }
.iris-account-notice a { display: inline-flex; align-items: center; min-height: 32px; color: var(--i-text-2); text-underline-offset: 3px; }
.iris-account-notice a:hover { color: var(--i-text); }
@media (pointer: coarse) { .iris-account-notice a { min-height: 44px; } }

/* HANS login keeps the existing Ultraviolet surfaces and spacing. */
html:not([data-login-mode=legacy]) .iris-legacy-login{display:none!important}
html[data-login-mode=legacy] .hans-login-action{display:none!important}
.iris-wallet-prompt{position:fixed;z-index:10000;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:16px 20px;background:#171020;color:#f5f1ff;border:1px solid #8659ca;border-radius:16px;box-shadow:0 12px 48px #0008}
.iris-wallet-prompt button{min-height:44px;border-radius:12px;padding:8px 16px;cursor:pointer}
#iris-hans-notices:empty{display:none}
/* Login and migration labels need more room than the avatar. Let the existing
   breadcrumb keep its row when these controls wrap on a narrow phone. */
html.iris-hans-on .upgrade-page .upgrade-header,
html.iris-hans-on .account-page .account-header { flex-wrap: wrap; }
html.iris-hans-on .upgrade-page .iris-hans-controls,
html.iris-hans-on .account-page .account-header .iris-hans-controls { margin-left: auto; }