/* ==========================================================================
   The Next Coin Club — refinements

   Loads LAST, after every other stylesheet. system.css defines the system and
   can be overridden by anything; this file corrects specific measured defects
   and therefore has to win.

   Scope is deliberately narrow. Each rule below fixes something that was
   measured, not something that was felt. Broad restyling from this position
   would start a specificity war with 6,000 lines of existing CSS, and that
   war is how a codebase acquires 89 !important declarations — which this one
   already has.

   Selectors here match the specificity of what they override (`body .tabs a`
   is 0,1,1, so `body .tabs a` is what appears here). Raising specificity
   further, or reaching for !important, would make the eventual consolidation
   harder rather than easier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Touch targets

   Measured: bottom tab bar links 40px, theme switcher buttons 38px, view
   toggle 40px, FAB icon 22-26px. Apple's documented minimum is 44px and
   Google's is 48px.

   These are the primary navigation on a phone. A user who mis-taps their way
   around a bottom tab bar experiences the product as cheap well before they
   could tell you the targets were four pixels short.

   The visual size of each control is left alone. Only the touchable area
   grows — via min-height and padding rather than height — so nothing shifts
   in the layout while the tap area reaches the standard.
   -------------------------------------------------------------------------- */

body .tabs a {
  min-height: var(--tap-min);
  padding-top: 6px;
  padding-bottom: 6px;
  /* Kills the grey flash iOS paints over a tapped link. The flash is a
     mobile-web tell — native apps do not do it — and removing it is one of
     the cheapest ways to stop a site feeling like a website in a wrapper. */
  -webkit-tap-highlight-color: transparent;
}

body .seg button {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
body .seg button:not(.on) { display: none; }
body .seg button.on { display: inline-flex; }

body .viewtoggle .btn {
  min-height: var(--tap-min);
  -webkit-tap-highlight-color: transparent;
}

/* The FAB is the most prominent control on the phone layout and had a 22px
   icon inside it. The icon stays visually modest; the button around it is
   what has to be reachable. */
body .tabs .center .fab {
  min-width: var(--tap-cozy);
  min-height: var(--tap-cozy);
  -webkit-tap-highlight-color: transparent;
}

/* Any remaining inline control small enough to be a mis-tap risk. :where()
   keeps specificity at zero so this never fights a deliberate override. */
:where(.rail button, .chip, .pill, .btn.sm) {
  min-height: var(--tap-min);
}

/* --------------------------------------------------------------------------
   2. Safe areas

   On phones with a home indicator, a fixed bottom bar sits underneath it.
   The bar is reachable but the bottom row of pixels is not, and on some
   devices the indicator visually crosses the labels.
   -------------------------------------------------------------------------- */

body .tabs {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   3. Horizontal overflow

   The single most common cause of a phone layout looking broken is one
   element wider than the viewport — the whole page then scrolls sideways and
   every section appears misaligned. Mint addresses, wallet addresses and long
   unbroken tokens are the usual culprits, and this site is full of them.
   -------------------------------------------------------------------------- */

html, body { overflow-x: hidden; }

/* Media should never exceed its container regardless of intrinsic size. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   4. Typographic polish

   Small, cumulative, and the difference between "clean" and "considered".
   -------------------------------------------------------------------------- */

/* Large type needs negative tracking. At display sizes the default spacing
   reads as loose and unconsidered — this is among the clearest tells between
   a designed interface and a default one. */
:where(h1, .lede, .u-title) { letter-spacing: var(--ls-tight); }
:where(h2) { letter-spacing: var(--ls-snug); }

/* Numbers in any column that gets scanned vertically. Proportional digits
   make live prices jitter as they tick and misalign down a column, which is
   the most obvious tell of an amateur financial interface. */
:where(.cell, .stack .p, .num, .u-num, td) { font-variant-numeric: tabular-nums; }

/* Headings should not be left alone at the bottom of a scroll. */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   5. Scroll behaviour

   Horizontal rails on a phone should feel like the native carousels users
   already know — momentum, and a snap that lands cleanly rather than
   halfway through a chip.
   -------------------------------------------------------------------------- */

.rail {
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
}
.rail > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   6. Loading states

   An empty container during a fetch reads as broken. This gives anything
   marked as loading a quiet pulse instead of blank space, without needing a
   skeleton component per surface.
   -------------------------------------------------------------------------- */

@keyframes u-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

[data-loading="true"], .is-loading {
  animation: u-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Print

   Nobody designs for print until a member tries to print a lesson and gets
   navigation chrome across four wasted pages.
   -------------------------------------------------------------------------- */

@media print {
  nav, .tabs, .side, .seg, .fab, footer { display: none !important; }
  body { padding: 0; }
  main { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}