/* ==========================================================================
   network.css — multi-coin network UI.

   Kept in its own file on purpose: every rule here belongs to the network
   integration, so a vendor update that replaces main.css cannot silently
   delete the coin switcher or the faucet grid, and this file never has to be
   merged.

   NO JavaScript anywhere in this feature. The coin switcher is a native
   <details> element, which means it works under the faucet's strict CSP, with
   JS disabled, and for keyboard and screen-reader users for free.
   ========================================================================== */

/* ------------------------------------------------------------ coin switcher */

.coin-switch {
  position: relative;
  flex: 0 0 auto;
}

.coin-switch > summary {
  /* Above .coin-switch__scrim (z-index 40). The scrim is a plain <div> and
     cannot toggle a <details>, so if it covered this button the menu could
     never be closed. Keeps the no-JS path working on its own. */
  position: relative;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-input, 10px);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .18s ease, background .18s ease;
}

.coin-switch > summary::-webkit-details-marker { display: none; }
.coin-switch > summary::marker { content: ""; }

.coin-switch > summary:hover,
.coin-switch[open] > summary {
  border-color: var(--accent-green, #00C48C);
}

.coin-switch > summary:focus-visible {
  outline: 2px solid var(--accent-green, #00C48C);
  outline-offset: 2px;
}

.coin-switch__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: contain;
  background: var(--background);
}

.coin-switch__sym { letter-spacing: .02em; }

.coin-switch__caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
  transition: transform .18s ease;
}

.coin-switch[open] .coin-switch__caret { transform: rotate(180deg); }

/* Click shield. This is a plain <div> inside the <details>, and a click on any
   child of <details> other than its <summary> cannot close it — so this does
   NOT close the menu on its own. What it does is cover the page while the menu
   is open, so a stray tap cannot land on a claim button behind the sheet.
   Closing is handled by (a) the summary, which sits above this at z-index 60
   and stays tappable, and (b) assets/js/network.js, which adds click-outside
   and Escape. Keeping the summary above the shield is what makes the no-JS path
   work at all.

   This only actually covers the page because .topbar keeps its backdrop-filter
   on a ::before (see main.css). A filter on .topbar itself would make it the
   containing block for this fixed element and trap it inside the 72px header,
   leaving the rest of the page tappable through an "open" menu. */
.coin-switch__scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  cursor: default;
}

.coin-switch[open] .coin-switch__scrim { display: block; }

.coin-switch__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  width: 272px;
  max-height: min(66vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(8, 15, 30, .28);
}

.coin-switch__head {
  padding: 8px 10px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #7A8699);
}

.coin-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background .14s ease;
}

.coin-switch__item:hover { background: var(--background); }

.coin-switch__item[aria-current="page"] {
  background: var(--green-soft, rgba(0, 196, 140, .1));
}

.coin-switch__item--off {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.coin-switch__body { min-width: 0; flex: 1 1 auto; }

.coin-switch__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-switch__meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #7A8699);
  font-variant-numeric: tabular-nums;
}

.coin-switch__tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #7A8699);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}

@media (max-width: 560px) {
  .coin-switch__sym { display: none; }
  .coin-switch > summary { padding: 0 8px; }

  /* PHONE: a centred dialog, not a bottom sheet.
     The sheet was pinned bottom-left — the same corner the floating corner ad
     occupies (z-index 140) — so the ad collided with the list and its own
     close button fought the sheet's. Centring it also keeps the header, the
     site name and this switcher's own button visible while it is open, and
     the stack is raised above the floating ad because a modal must win. */
  .coin-switch__scrim { z-index: 150; }
  .coin-switch > summary { z-index: 170; }

  .coin-switch__panel {
    position: fixed;
    top: 50%; left: 50%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 24px));
    max-height: min(76dvh, 560px);
    z-index: 160;
    border-radius: 16px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(8, 15, 30, .34);
    padding: 6px;
    -webkit-overflow-scrolling: touch;
  }
  /* Animated in place: the translate must not be lost by the keyframes. */
  .coin-switch[open] .coin-switch__panel { animation: coin-switch-in .22s var(--ease-out) both; }
  @keyframes coin-switch-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .coin-switch__head {
    position: sticky; top: 0; z-index: 1;
    margin: 0 -6px;
    padding: 8px 12px 8px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .coin-switch__item { min-height: 52px; padding: 7px 10px; }
  .coin-switch__item .coin-switch__icon { width: 22px; height: 22px; }
  /* Enough room for the coin name AND its reward amount without truncating. */
  .coin-switch__name { font-size: 15px; }
  .coin-switch__meta { font-size: 12px; }
  /* A light dim so the dialog reads as the current surface. Kept subtle: the
     page behind stays readable, which matters for a picker you use to compare
     against the coin you are already on. */
  .coin-switch[open] .coin-switch__scrim { background: rgba(8, 15, 30, .32); }
}

/* "Network home" row at the foot of the switcher, inside the panel and
   pinned to the bottom of it so it stays reachable however long the coin list
   gets. A hairline separates it so it can never be read as another coin. */
.coin-switch__home {
  position: sticky;
  bottom: -6px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px -6px -6px;
  padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.coin-switch__home:hover { background: var(--background); }
.coin-switch__home:focus-visible {
  outline: 2px solid var(--accent-green, #00C48C);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.coin-switch__home .icon { color: var(--text-muted); flex: 0 0 auto; }
.coin-switch__home-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .coin-switch__home { min-height: 48px; }
}

/* ------------------------------------------------- available faucets (footer) */

.net-faucets {
  border-top: 1px solid var(--border);
  padding: var(--s6, 36px) 0 var(--s5, 28px);
}

.net-faucets__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.net-faucets__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.net-faucets__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted, #7A8699);
}

.net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 10px;
}

.net-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.net-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-green, #00C48C);
  box-shadow: 0 10px 26px rgba(8, 15, 30, .12);
}

.net-card--current {
  border-color: var(--accent-green, #00C48C);
  background: var(--green-soft, rgba(0, 196, 140, .08));
}

.net-card--off {
  opacity: .5;
  pointer-events: none;
}

.net-card__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: contain;
  background: var(--background);
}

.net-card__body { min-width: 0; }

.net-card__sym {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.net-card__meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #7A8699);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- daily-limit cross-sell */

.net-crosssell {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.net-crosssell__title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
}

.net-crosssell__sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, #7A8699);
}

.net-crosssell .net-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .coin-switch > summary,
  .coin-switch__caret,
  .coin-switch__item,
  .net-card { transition: none; }
  .net-card:hover { transform: none; }
}