/* Shared header allocation. Navigation never shrinks beneath its own labels;
   the breakpoint matches the existing mobile navigation controller. */
.shell .topbar > .top-spacer { min-width: 0; flex: 1 1 0; }
.shell .topbar > .brand { min-width: 44px; min-height: 44px; }
.shell .topbar > :is(.top-wallet-button, .top-chat-button, .avatar-button, .top-signin, .gold-button) { flex-shrink: 0; }
.shell .topbar .topnav { flex: 0 0 auto; }
.shell .topbar .topnav-menu { background: var(--pf-surface, #111213); }
.shell .topbar .top-rewards-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--pf-text, #cfceca);
  font: 500 12px var(--pf-sans, sans-serif);
  cursor: pointer;
}
.shell .topbar .top-rewards-button:hover { border-color: var(--pf-line-strong, #353535); color: var(--pf-gold, #d9b55c); }
.shell .topbar .top-rewards-button:focus-visible { outline: 2px solid var(--pf-gold, #d9b55c); outline-offset: 3px; }
@media (min-width: 1081px) {
  .shell .topbar > .mobile-menu { display: none; }
  .shell .topbar .topnav { display: flex; margin-left: 12px; }
  .shell .topbar .topnav > .nav-link,
  .shell .topbar .topnav-more > summary { padding-inline: 10px; }
}
@media (min-width: 1081px) and (max-width: 1380px) {
  .shell .topbar .brand-name { display: none; }
  .shell .topbar > .brand { min-width: 44px; }
  .shell .topbar .top-rewards-button > span,
  .shell .topbar .top-chat-button > span { display: none; }
  .shell .topbar .top-rewards-button,
  .shell .topbar .top-chat-button { width: 44px; padding-inline: 8px; }
}
@media (max-width: 1080px) {
  .shell .topbar > .mobile-menu { display: grid; flex: 0 0 44px; }
  .shell .topbar .topnav,
  .shell .topbar .top-rewards-button { display: none; }
}

@layer pv.components {
  .top-wallet-button {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(212, 183, 95, .24);
    border-radius: 10px;
    background: rgba(16, 18, 15, .78);
    padding: 0 12px;
    color: var(--pv-text-strong, #f3f0e7);
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
  }

  .top-wallet-button:hover,
  .top-wallet-button:focus-visible {
    border-color: rgba(226, 202, 123, .52);
    background: rgba(212, 183, 95, .1);
    color: var(--pv-brass-hover, #e2ca7b);
  }

  .top-wallet-button:disabled { cursor: wait; opacity: .7; }

  .top-wallet-button > b {
    overflow: hidden;
    max-width: 112px;
    font-size: 12px;
    font-weight: 620;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-wallet-button__mark {
    position: relative;
    display: block;
    width: 20px;
    height: 16px;
    flex: 0 0 20px;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: #d9c579;
    opacity: .9;
  }

  .top-wallet-button__mark::before {
    position: absolute;
    top: 3px;
    right: -3px;
    width: 7px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: #10120f;
    content: "";
  }

  .top-wallet-button__mark::after {
    position: absolute;
    top: 6px;
    right: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .top-wallet-button[data-wallet-status="linked"]::after,
  .top-wallet-button[data-wallet-status="detected"]::after {
    position: absolute;
    top: 8px;
    left: 27px;
    width: 6px;
    height: 6px;
    border: 2px solid #10120f;
    border-radius: 50%;
    background: var(--pv-success, #67c99a);
    content: "";
  }

  /* The surrounding .modal is the only viewport-width owner. Giving this
     nested panel its own viewport width made the panel wider than the
     modal's padded content box and pushed wallet copy off screen. */
  .top-wallet-dialog {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .top-wallet-dialog .modal-head,
  .modal:has(> .auth-tabs) > .modal-head,
  .modal:has(> .wallet-challenge-preview) > .modal-head {
    min-inline-size: 0;
    align-items: flex-start;
  }

  .top-wallet-dialog .modal-head > :first-child,
  .modal:has(> .auth-tabs) > .modal-head > :first-child,
  .modal:has(> .wallet-challenge-preview) > .modal-head > :first-child {
    min-inline-size: 0;
  }

  .top-wallet-dialog .modal-head h2,
  .modal:has(> .auth-tabs) > .modal-head h2,
  .modal:has(> .wallet-challenge-preview) > .modal-head h2 {
    overflow-wrap: anywhere;
  }

  .top-wallet-dialog__intro {
    min-width: 0;
    max-width: 46ch;
    margin: -2px 0 18px;
    color: var(--pv-text-muted, #92958c);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .top-wallet-dialog__networks {
    display: grid;
    gap: 6px;
  }

  .top-wallet-dialog__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    border-top: 1px solid var(--pv-line, #2b2e27);
    padding: 10px 0;
  }

  .top-wallet-dialog__row > span {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(212, 183, 95, .25);
    border-radius: 10px;
    background: rgba(212, 183, 95, .07);
    color: var(--pv-brass-hover, #e2ca7b);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: .05em;
    place-items: center;
  }

  .top-wallet-dialog__row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .top-wallet-dialog__row strong {
    min-width: 0;
    font-size: 14px;
    font-weight: 620;
    overflow-wrap: anywhere;
  }

  .top-wallet-dialog__row small {
    min-width: 0;
    color: var(--pv-text-muted, #92958c);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .top-wallet-dialog__action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 183, 95, .26);
    border-radius: 8px;
    background: rgba(212, 183, 95, .08);
    padding: 0 11px;
    color: #e1cf8d;
    font: inherit;
    font-size: 11px;
    font-weight: 620;
    cursor: pointer;
    white-space: nowrap;
  }

  .top-wallet-dialog__action:hover,
  .top-wallet-dialog__action:focus-visible { border-color: rgba(226, 202, 123, .55); background: rgba(212, 183, 95, .13); }

  .top-wallet-dialog__safety {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
    border-block: 1px solid color-mix(in srgb, var(--pv-success, #67c99a) 24%, var(--pv-line, #2b2e27));
    padding: 13px 0;
  }

  .top-wallet-dialog__safety > span {
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(103, 201, 154, .12);
    color: var(--pv-success, #67c99a);
    place-items: center;
  }

  .top-wallet-dialog__safety p { min-width: 0; margin: 0; color: var(--pv-text-muted, #92958c); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .top-wallet-dialog__safety strong { color: var(--pv-text-strong, #f3f0e7); }
  .top-wallet-dialog__settings { width: 100%; min-width: 0; margin-top: 8px; justify-content: space-between; overflow-wrap: anywhere; white-space: normal; }

  .top-wallet-dialog__account {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding-top: 10px;
    color: var(--pv-text-muted, #92958c);
    font-size: 11px;
  }

  .top-wallet-dialog__account > span { min-width: 0; overflow-wrap: anywhere; }
  .top-wallet-dialog__account .button-text { flex: 0 0 auto; padding-inline: 0; }

  /* Authentication offers wallet sign-in from every route, so its provider
     tiles belong with the globally loaded wallet component rather than the
     ledger-only route bundle. */
  .auth-wallet-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin: 6px 0;
    color: var(--pv-text-muted, #92958c);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }

  .auth-wallet-divider > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .auth-wallet-divider::before,
  .auth-wallet-divider::after {
    height: 1px;
    background: var(--pv-line, #2b2e27);
    content: "";
  }

  .auth-wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  .auth-wallet-grid :is(button, a) {
    display: grid;
    grid-template-rows: auto auto auto;
    min-width: 0;
    max-width: 100%;
    min-height: 58px;
    align-content: center;
    justify-items: center;
    gap: 3px;
    border: 0;
    border-radius: var(--pv-radius-control, 10px);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 0 0 1px var(--pv-line, #2b2e27);
    padding: 9px;
    color: var(--pv-text, #c9c6bc);
    font: 620 11px/1.25 var(--pv-ui, system-ui, sans-serif);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .auth-wallet-grid :is(button, a) > span,
  .auth-wallet-grid :is(button, a) > strong,
  .auth-wallet-grid :is(button, a) > small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .auth-wallet-grid :is(button, a) > span {
    color: var(--pv-brass, #d4b75f);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .08em;
  }

  .auth-wallet-grid :is(button, a) > strong {
    color: var(--pv-text-strong, #f3f0e7);
    font-size: 11px;
    font-weight: 690;
  }

  .auth-wallet-grid :is(button, a) > small {
    color: var(--pv-text-muted, #92958c);
    font-size: 9px;
    line-height: 1.35;
    white-space: normal;
  }

  .auth-wallet-note {
    min-width: 0;
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .auth-fast-options {
    display: grid;
    min-width: 0;
    gap: 10px;
  }

  .auth-fast-heading {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .auth-fast-heading strong {
    color: var(--pv-text-strong, #f3f0e7);
    font-size: 14px;
    font-weight: 660;
  }

  .auth-fast-heading small {
    color: var(--pv-text-muted, #92958c);
    font-size: 11px;
    line-height: 1.45;
  }

  .auth-provider-shell,
  .auth-google-button {
    width: 100%;
    min-width: 0;
  }

  .auth-provider-shell {
    min-height: 44px;
    transition: opacity .16s ease;
  }

  .auth-provider-shell[aria-busy="true"] { opacity: .55; pointer-events: none; }
  /* GIS overdraws its iframe by 10px on each side to paint a full-width
     button. Capping the iframe itself clipped the left and right borders. */
  .auth-google-button > div { max-width: 100% !important; }

  .auth-phantom-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(171, 126, 255, .35);
    border-radius: var(--pv-radius-control, 10px);
    background: linear-gradient(180deg, rgba(128, 86, 210, .17), rgba(83, 55, 143, .11));
    padding: 7px 12px;
    color: var(--pv-text-strong, #f3f0e7);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
  }

  .auth-provider-mark {
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #ab7eff;
    color: #17111f;
    font-size: 15px;
    font-weight: 820;
    place-items: center;
  }

  .auth-phantom-button > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .auth-phantom-button strong { font-size: 13px; font-weight: 680; }
  .auth-phantom-button small { color: #aaa4b4; font-size: 10px; line-height: 1.3; }

  .auth-other-wallets,
  .auth-email-panel {
    min-width: 0;
  }

  .auth-other-wallets > summary,
  .auth-email-panel > summary {
    color: var(--pv-text, #c9c6bc);
    font-size: 12px;
    font-weight: 620;
    cursor: pointer;
  }

  .auth-other-wallets[open] > summary,
  .auth-email-panel[open] > summary { margin-bottom: 11px; color: var(--pv-text-strong, #f3f0e7); }
  .auth-email-panel > .form { margin-top: 0; }

  .auth-fast-options .auth-wallet-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--pv-text-muted, #92958c);
    font-size: 10px;
    text-align: left;
  }

  .auth-fast-options .auth-wallet-note > span { color: var(--pv-success, #67c99a); }

  .wallet-challenge-preview {
    display: grid;
    min-width: 0;
    max-width: 100%;
    gap: 13px;
  }

  .wallet-challenge-preview p {
    min-width: 0;
    margin: 0;
    color: var(--pv-text, #c9c6bc);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .wallet-challenge-preview pre {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    max-block-size: min(280px, 42dvh);
    overflow: auto;
    border: 1px solid var(--pv-line, #2b2e27);
    border-radius: var(--pv-radius-control, 10px);
    background: #080a09;
    padding: 12px;
    color: #9fbcad;
    font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
}

@media (max-width: 620px) {
  .top-wallet-button[data-wallet-account="signed-in"] {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .top-wallet-button[data-wallet-account="signed-in"] > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top-wallet-button[data-wallet-account="guest"] {
    width: auto;
    min-width: 0;
    max-width: 170px;
    padding: 0 12px;
    justify-content: center;
  }

  .top-wallet-button[data-wallet-account="guest"] > b {
    position: static;
    width: auto;
    height: auto;
    max-width: 112px;
    clip-path: none;
  }

  /* The wallet button is now the primary sign-in method on a phone. Account
     creation remains available from its email fallback, avoiding four equal
     header actions fighting for one row. */
  .topbar > [data-action="auth-register"] { display: none; }
  .top-wallet-button[data-wallet-status="linked"]::after,
  .top-wallet-button[data-wallet-status="detected"]::after { left: 25px; }

  .auth-wallet-grid { grid-template-columns: 1fr; }

  .auth-wallet-grid :is(button, a) {
    min-height: 62px;
    padding-inline: 12px;
  }
}

@media (max-width: 430px) {
  .top-wallet-dialog__row { grid-template-columns: 38px minmax(0, 1fr); }
  .top-wallet-dialog__row > span { width: 36px; height: 36px; }
  .top-wallet-dialog__action { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .top-wallet-dialog__account { align-items: stretch; flex-direction: column; }
  .top-wallet-dialog__account .button-text { width: 100%; justify-content: space-between; }
}

@media (max-height: 700px) {
  .top-wallet-dialog > .modal-head,
  .modal:has(> .auth-tabs) > .modal-head,
  .modal:has(> .wallet-challenge-preview) > .modal-head {
    position: sticky;
    z-index: 5;
    top: 0;
    background: var(--pv-surface-2, #161914);
    box-shadow: 0 1px 0 var(--pv-line, #2b2e27);
  }
}

@media (hover: hover) and (pointer: fine) {
  .auth-wallet-grid :is(button, a):not(:disabled):hover {
    background: rgba(212, 183, 95, .065);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .28);
    transform: translateY(-1px);
  }

  .auth-phantom-button:hover {
    border-color: rgba(188, 155, 255, .65);
    background: linear-gradient(180deg, rgba(128, 86, 210, .23), rgba(83, 55, 143, .15));
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-wallet-button,
  .auth-wallet-grid :is(button, a),
  .auth-provider-shell,
  .auth-phantom-button { transition: none; }
}