/* responsive-base.css
   Shared mobile/tablet baseline for public Eagle Virtual pages.
   Breakpoints: <640px phone, 640-1023px tablet, >=1024px desktop. */

:root {
  --page-pad-x: 12px;
}

@media (min-width: 640px) {
  :root { --page-pad-x: 16px; }
}

@media (min-width: 1024px) {
  :root { --page-pad-x: 24px; }
}

html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

.app-header { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); }
.app-content { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); }

/* Fluid hero typography to remove the abrupt 28->38px jump. */
.hero-tagline {
  font-size: clamp(1.5rem, 4.5vw + 0.5rem, 2.375rem);
  line-height: 1.2;
}

/* Tighter table cells on phones; keep horizontal scroll inside the card. */
.app-table { width: 100%; }

@media (max-width: 639px) {
  .app-table th, .app-table td {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Wrap long content but allow long monospace strings to break. */
  .app-table .cell-address,
  .app-table .cell-amount { font-size: 13px; }
}

/* ------------------------------------------------------------------
 * Named address (EV.NamedAddress) — certified name shown name-first as
 * enrichment, with the native address ALWAYS visible and copyable. Loaded on
 * every grid surface (this file ships on home and /events). Extends the shared
 * .cell-address / .cell-copy-btn primitives instead of inventing a new chip.
 * ------------------------------------------------------------------ */
.named-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.named-address-main {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.named-address-main:hover .named-address-name { text-decoration: underline; }
.named-address-name {
  font-weight: 600;
  color: var(--fg, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
/* Address stays monospace regardless of which grid stylesheet is present. */
.named-address-addr {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
}
/* When a name leads, the address is the secondary, muted identifier. */
.named-address.has-name .named-address-addr {
  color: var(--muted);
  font-size: 11px;
}

/* Scroll-shadow affordance on horizontally-scrollable cards. */
.data-card-body {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--card, #1e293b) 30%, rgba(30, 41, 59, 0)) left center,
    linear-gradient(to left,  var(--card, #1e293b) 30%, rgba(30, 41, 59, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

[data-theme="light"] .data-card-body {
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  #ffffff 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* :focus-visible outlines for chips, buttons and links. Tokens already exist
   for --accent and --focus-ring. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.chain-badge-unified:focus-visible,
.status-badge:focus-visible,
.token-pill:focus-visible,
.category-pill:focus-visible,
.control-pill:focus-visible,
.action-btn:focus-visible,
.pagination-page:focus-visible,
.pagination-btn:focus-visible {
  outline: 2px solid var(--accent, #63ffe2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tap-target minimum on small viewports for interactive chips/buttons. */
@media (max-width: 1023px) {
  .action-btn,
  .pagination-page,
  .pagination-btn,
  .category-pill,
  .filter-select,
  .filter-search input,
  select.filter-select {
    min-height: 36px;
  }
}

/* Filter grid used on the events page; lifted out of inline style. */
.events-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.events-filter-grid > * { min-width: 0; }
.events-filter-grid select { width: 100%; max-width: 100%; }

@media (max-width: 639px) {
  .events-filter-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Filter actions row: keep search left of buttons on wide screens, stack
   on phones so buttons can go full-width. */
.events-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}

.events-filter-actions .filter-search {
  flex: 1;
  max-width: 300px;
  min-width: 0;
}

.events-filter-actions .filter-buttons {
  display: flex;
  gap: 8px;
}

@media (max-width: 639px) {
  .events-filter-actions { flex-direction: column; align-items: stretch; }
  .events-filter-actions .filter-search { max-width: 100%; }
  .events-filter-actions .filter-buttons { flex-direction: column; gap: 8px; }
  .events-filter-actions .filter-buttons .action-btn { width: 100%; justify-content: center; }
}

/* Events page detail-grid: 4 cols desktop, 2 cols tablet, 1 col phone. */
@media (max-width: 479px) {
  .event-detail-grid { grid-template-columns: 1fr !important; }
  .event-detail-wide { grid-column: auto !important; }
}

/* Issuers grid: explicit 1/2/3 column system. */
.issuers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

.issuers-grid > * { min-width: 0; max-width: 100%; }

@media (min-width: 640px) {
  .issuers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .issuers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Inner pill rows inside an issuer card must wrap and not impose min-content. */
.issuer-card { width: 100%; max-width: 100%; min-width: 0; }
.issuer-card .issuer-chains,
.issuer-card .issuer-controls { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.issuer-card .network-pill { max-width: 100%; }
.issuer-info,
.issuer-name,
.issuer-by { min-width: 0; }
.issuer-name,
.issuer-by { overflow: hidden; text-overflow: ellipsis; }

/* Card grids globally: items must be allowed to shrink below content width. */
.chains-grid > *,
.authority-grid > * { min-width: 0; max-width: 100%; }

/* Sanctions: 2x2 stat strip on phones, single column authority grid. */
@media (max-width: 639px) {
  .stat-strip { flex-wrap: wrap !important; }
  .stat-strip .stat-strip-item {
    flex: 1 1 calc(50% - 1px) !important;
    min-width: calc(50% - 1px) !important;
    max-width: 50% !important;
  }
  .authority-grid { grid-template-columns: 1fr !important; }
  .authority-card { padding: 1rem !important; }
}

/* Chains: 1/2/3 columns at our standard breakpoints. */
.chains-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .chains-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .chains-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Forms: prevent iOS zoom-on-focus (16px minimum) on phones. Tablet/desktop
   sites may keep smaller fonts. Uses !important so page-local rules like
   `.tool-form input { font-size: 15px }` don't reintroduce zoom-on-focus. */
@media (max-width: 1023px) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 639px) {
  .tool-form { flex-direction: column !important; }
  .tool-form input,
  .tool-form button {
    width: 100% !important;
    align-self: stretch;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------------
   Phone overrides for marketing copy + site chrome.
   --------------------------------------------------------------------------- */

/* Phone header: collapse to a single ~56px row with Logo + Menu only. The
   theme toggle and usage counter live inside the slide-out menu drawer
   instead (see `.nav-menu-mobile-actions` below). */
@media (max-width: 639px) {
  /* Hide in-header chrome on phones. Use direct-child selectors so we don't
     also hide the relocated copies inside `.nav-menu-mobile-actions` (which
     is itself a descendant of `.nav-actions`). */
  .site-header .nav-actions > .theme-toggle,
  .site-header .nav-actions > .usage-counter,
  .app-header .app-header-right > .theme-toggle,
  .app-header .app-header-right > .usage-counter {
    display: none !important;
  }

  /* Slim header padding so the row is tight. */
  .site-header .header-main,
  .app-header { min-height: 52px; }
}

/* Mobile-only block that appears at the top of the slide-out menu drawer
   carrying the relocated theme toggle + usage chip. Hidden on tablet/desktop
   because those still show the controls in the header. */
.nav-menu-mobile-actions { display: none; }

@media (max-width: 639px) {
  .nav-menu-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 6px;
  }
  .nav-menu-mobile-actions .theme-toggle { display: flex !important; align-self: stretch; }
  .nav-menu-mobile-actions .theme-toggle button { flex: 1; min-height: 36px; }
  .nav-menu-mobile-actions .usage-counter { display: flex !important; }
}

/* Home hero: stop bombarding mobile visitors with a wall of text. Show only
   the headline + CTA; hide the long subtitle / stats paragraph so the search
   card is visible above the fold. */
@media (max-width: 639px) {
  .hero-tagline {
    font-size: clamp(1.4rem, 6vw, 1.85rem) !important;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  .hero-subtitle { display: none !important; }
  .hero-stats-text { display: none !important; }
  .search-features { display: none !important; }
  .search-upgrade { font-size: 12px; }
}

/* Cards / tables: make horizontal scroll explicit so columns that don't fit
   stay reachable. main.css used to clip. */
.data-card { overflow: hidden; }
.data-card-body { overflow-x: auto; overflow-y: hidden; }
.data-card-body > .app-table,
.data-card-body table { min-width: 760px; }

@media (max-width: 1023px) {
  .data-card-body > .app-table,
  .data-card-body table { min-width: 760px; }
}

/* Home page sanctions tiles + blacklist events stat bar: horizontal scroll
   on phones so users can see all tiles/stats by swiping, instead of getting
   a wrapped multi-row block that hides items below the fold. */
@media (max-width: 639px) {
  .sanctions-coverage__grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
    padding-bottom: 6px;
    gap: 8px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  .sanctions-coverage__grid > .sanctions-coverage__tile {
    flex: 0 0 auto;
    min-width: 110px;
    width: 110px;
    scroll-snap-align: start;
  }

  .blacklist-events-coverage .stats-bar,
  .stats-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
    justify-content: flex-start !important;
    padding: 14px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  .blacklist-events-coverage .stats-bar > .stat-item,
  .stats-bar > .stat-item {
    flex: 0 0 auto;
    min-width: 110px;
    scroll-snap-align: start;
  }

  .stats-bar > .stat-divider { flex: 0 0 auto; }
}

/* Sanctions cards: chain badge rows wrap cleanly at chip boundaries so every
   supported chain stays visible inside the card — no horizontal clipping or
   hidden-behind-fade chips at narrow widths (320/375px). */
.authority-card .chains-row {
  flex-wrap: wrap;
  gap: 4px;
}
.authority-card .chains-row > * { flex-shrink: 0; max-width: 100%; }

/* Events page: collapsible filters on phones. Markup adds a data-attribute
   `data-filter-collapsed` toggled by Alpine; we drive the CSS off that. */
.events-filters-toggle {
  display: none;
  width: 100%;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  margin-bottom: 12px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.events-filters-toggle svg { transition: transform 0.2s ease; }
.events-filters-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 639px) {
  .events-filters-toggle { display: inline-flex; }
  .scanner-card.events-filters-card[data-collapsed="true"] .events-filter-grid,
  .scanner-card.events-filters-card[data-collapsed="true"] .events-filter-actions {
    display: none !important;
  }
  .scanner-card.events-filters-card[data-collapsed="true"] {
    padding: 12px !important;
  }
}

/* ------------------------------------------------------------------
 * Events table (.app-table): two-sticky-column scroll + row-tier emphasis.
 * The Time column anchors the left edge and the expand chevron is pinned to
 * the right, so the row action is never scrolled off (the whole row is also
 * clickable). Row-tier left-accents mirror the home grid; the loud tiered
 * status-badge chip already carries the primary weight.
 * ------------------------------------------------------------------ */
.app-table .cell-sticky-left {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card, #1e293b);
}
.app-table .cell-sticky-right {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--card, #1e293b);
  text-align: right;
}
.app-table thead .cell-sticky-left,
.app-table thead .cell-sticky-right { z-index: 3; }

.app-table tbody tr.row-tier-sanctions > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.app-table tbody tr.row-tier-enforcement > td:first-child { box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.55); }
.app-table tbody tr.row-tier-issuer > td:first-child { box-shadow: inset 3px 0 0 rgba(217, 119, 6, 0.55); }

/* Sanctioning-authority chip in the event detail panel reuses the standard
 * source-chip styling from monitoring.css; just give it room to breathe. */
.event-authority-chip { display: inline-flex; font-weight: 700; }

/* Phone: keep the high-signal columns (Time, Event, Target, Quantity, USD) and
 * the two sticky anchors; demote Chain / Issuer / Token to shorten the scroll. */
@media (max-width: 640px) {
  .app-table thead th:nth-child(2), .app-table tbody tr > td:nth-child(2),
  .app-table thead th:nth-child(3), .app-table tbody tr > td:nth-child(3),
  .app-table thead th:nth-child(6), .app-table tbody tr > td:nth-child(6) {
    display: none;
  }
  .data-card-body > .app-table,
  .data-card-body table { min-width: 540px; }
}