/* nimiq.cool — shared app-shell chrome (#11).
   Styles for the header wallet/language chrome (Connect-wallet button, profile
   widget slot, flag-hex language switcher) and the deposit "connected wallet"
   pill. Split out of app.css to keep every file under the 800-line house limit.
   All PX (the @nimiq/style 8px-root rem trap); colors are Nimiq design tokens. */

/* ----------------------- header chrome row ----------------------- */

/* The brand + chrome share one top row inside the hero. The brand keeps its
   own bottom spacing from the headline; the row aligns them on a baseline. */
.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}

/* The brand carried its own 48px bottom margin before the chrome row existed;
   the row now owns that spacing, so neutralize the inner margin. */
.hero__top .hero__brand {
  margin-bottom: 0;
}

.shell-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The shell's switcher + profile inject their own styles; these just size the
   slots and keep the flag-hex row from collapsing on the dark hero. */
.shell-lang,
.shell-wallet {
  display: flex;
  align-items: center;
}

/* ----------------------- connect-wallet button ----------------------- */

/* Reuses the nimiq-ui small-button shape; on the dark hero we want a light,
   high-contrast pill rather than the navy default, so it reads against the
   radial-navy background. */
.shell-connect.nq-button-s {
  background: #fff;
  color: var(--nq-blue);
  border-radius: 500px;
  font-weight: 700;
  white-space: nowrap;
  /* The legacy .nq-button-s is 27px tall; lift it to the 36px tap-target floor
     (nq lint warns below 36px) without losing the small-button proportions. */
  min-height: 36px;
  padding: 0 16px;
}

.shell-connect.nq-button-s:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.88);
}

.shell-connect:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ----------------------- connected-wallet pill (deposit) ----------------------- */

/* PRIMARY delegate-from path once a wallet is connected: a read-only, on-brand
   pill that replaces the manual NQ input. The manual input + demo pills are
   hidden (see js/wallet.js) but stay in the DOM as the no-wallet fallback. */
.deposit__connected {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--grey-card);
  border: 1px solid var(--hairline);
}

/* Respect the `hidden` attribute over the flex display above (js/wallet.js
   toggles it): without this, `display:flex` would defeat `[hidden]`. */
.deposit__connected[hidden] {
  display: none;
}

.deposit__connected-label {
  font-size: 13px;
  color: var(--ink-60);
}

.deposit__connected-addr {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* On a narrow viewport the chrome row stacks under the brand so neither the
   Connect button nor the flag row gets cramped. */
@media (max-width: 480px) {
  .hero__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}