/* LiquidityLevels — shared polish layer.  2026-08-25
 *
 * Every page on this site carries its own inline <style> block, so a fix made
 * in one page's markup reaches only that page. This file holds the rules that
 * must be true everywhere: phone tap targets, a type floor, and tabular
 * numerals.
 *
 * IMPORTANT: the <link> to this file is placed immediately before </head>, so
 * it loads AFTER each page's inline <style>. At equal specificity the later
 * sheet wins, which is the only reason these plain selectors take effect.
 * Inline style="" attributes still outrank it, so those are matched on the
 * declaration itself further down.
 */

/* ---------- Numerals ------------------------------------------------------
 * `tabular-nums` was absent from the entire site. Proportional digits mean a
 * "1" is narrower than a "5", so columns of prices never line up and a live
 * countdown visibly jitters as it re-renders. */
body, h1, h2, h3, table, .mono, code, kbd, samp,
[style*="IBM Plex Mono"], [style*="Plex Mono"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* ---------- Phone ---------------------------------------------------------
 * Measured at 390x844. Grow hit areas with padding so the text stays exactly
 * where it is and only the tappable box changes. Links inside a sentence are
 * exempt from WCAG 2.5.8 and are deliberately untouched. */
@media (max-width: 640px) {

  /* Footer / legal / utility rows were rendering 15-19px tall. */
  footer a,
  .ll-footer a,
  .ll-legal a,
  .ll-social-link,
  a[href*="terms"], a[href*="privacy"], a[href*="/blog"], a[href*="archive"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    line-height: 1.4;
  }

  /* Header actions: "Log in" was 23x34 next to a full-size Subscribe. */
  header a, header button,
  nav a, nav button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Standalone controls that render as bare text. */
  button.forgot,
  a[href*="signup"], a[href*="login"], a[href*="subscribe"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* The glossary cross-link row ("← All terms", "Order Block →"). These are
     navigation in a flex row, not links inside a sentence, so the SC's inline
     exemption doesn't apply. Matched on their exact inline signature so no
     prose link is caught by accident. */
  a[style*="font-size:14.5px; font-weight:600"],
  a[style*="font-size: 14.5px; font-weight: 600"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Type floor. Nothing under 12px on a phone held at arm's length. */
  .ll-section-label, .ll-legal, .ll-disclaimer, .sc-interp { font-size: 12.5px !important; }

  /* The remaining small labels are set through inline style attributes
     (specificity 1,0,0,0), unreachable by a normal selector — so match the
     declaration text itself. React re-serialises inline styles with a space
     after the colon while hand-written HTML has none, so both spellings are
     listed. Scoped to <=640px: the desktop type scale is untouched. */
  [style*="font-size:10px"],   [style*="font-size: 10px"]   { font-size: 12px !important; }
  [style*="font-size:10.4px"], [style*="font-size: 10.4px"] { font-size: 12px !important; }
  [style*="font-size:10.5px"], [style*="font-size: 10.5px"] { font-size: 12px !important; }
  [style*="font-size:11px"],   [style*="font-size: 11px"]   { font-size: 12.5px !important; }
  [style*="font-size:11.2px"], [style*="font-size: 11.2px"] { font-size: 12.5px !important; }
  [style*="font-size:11.5px"], [style*="font-size: 11.5px"] { font-size: 12.5px !important; }
  [style*="font-size:11.7px"], [style*="font-size: 11.7px"] { font-size: 12.5px !important; }

  /* Stacked CTAs at two different widths read as broken rather than stacked. */
  .ll-btn-gold, .ll-btn-outline-gold {
    display: block !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 12px;
  }

  /* Nothing may push the document sideways. */
  img, svg, video { max-width: 100%; height: auto; }
  pre, table { max-width: 100%; overflow-x: auto; }
}

/* ---------- Reduced motion ------------------------------------------------
 * Applies to the subpages too, which never had any reduced-motion handling. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Quiet motion --------------------------------------------------
 * The homepage has its own DC motion system. This shared layer gives the
 * article, Academy, archive, tools, account, and embed surfaces the same
 * sense of depth without turning every element into a floating card. */
html { scroll-behavior: smooth; }
body { isolation: isolate; }

/* A slow change in the ambient light as the reader moves through a page.
 * It sits behind the document and is deliberately low contrast: the content
 * remains the only thing asking for attention. */
body::after {
  content: '';
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  opacity: .48;
  background:
    radial-gradient(ellipse at 12% 8%, oklch(0.78 0.143 86 / .10), transparent 34%),
    radial-gradient(ellipse at 88% 78%, oklch(0.30 0.037 108 / .15), transparent 42%),
    linear-gradient(140deg, oklch(0.15 0.015 258 / 0) 28%, oklch(0.22 0.018 258 / .32) 100%);
  background-size: 130% 130%, 120% 120%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0% 0%;
  transform: scale(1.03);
  transition: opacity .6s ease;
}
body.ll-embed::after { opacity: .28; }

@keyframes ll-ambient-scroll {
  0%   { background-position: 0% 0%, 100% 100%, 0% 0%; transform: scale(1.03); }
  50%  { background-position: 34% 22%, 66% 74%, 0% 48%; transform: scale(1.07); }
  100% { background-position: 72% 58%, 18% 16%, 0% 100%; transform: scale(1.11); }
}
@supports (animation-timeline: scroll()) {
  body::after {
    animation: ll-ambient-scroll linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }
}

@keyframes ll-page-enter {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
:where(.ll-article-shell, .learn-shell, .page, .shell, .ll-embed-card) {
  animation: ll-page-enter .68s cubic-bezier(.16, 1, .3, 1) both;
}

/* Let the reader discover long-form sections as they arrive, instead of
 * making the whole page appear at once. Scroll timelines are progressive
 * enhancement; unsupported browsers simply keep the content visible. */
@keyframes ll-scroll-reveal {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  :where(.ll-article-copy > h2, .ll-article-copy > p, .ll-article-copy > ul,
         .ll-article-note, .ll-article-cta, .learn-index-group, .learn-note,
         .learn-related, .tool, .card, .level-row, .ll-embed-credit) {
    animation: ll-scroll-reveal .72s cubic-bezier(.2, .7, .2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}

/* Consistent, low-key interaction language across the supporting surfaces. */
:where(a, button, input, textarea, .btn, .learn-subscribe) {
  -webkit-tap-highlight-color: transparent;
}
:where(.ll-article-copy a, .learn-copy a, .learn-note a, .learn-related a,
       .ll-article-cta a, .lede a, .note a) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .22s ease, text-decoration-color .22s ease;
}
:where(.ll-article-copy a, .learn-copy a, .learn-note a, .learn-related a,
       .ll-article-cta a, .lede a, .note a):hover {
  text-decoration-color: currentColor;
}
:where(.learn-index-grid a, .tool, .ll-article-note, .ll-article-cta,
       .learn-note, .learn-related, .card, .ll-embed-card) {
  transition: transform .28s cubic-bezier(.2, .7, .2, 1),
              border-color .28s ease, box-shadow .28s ease,
              background-color .28s ease;
}
:where(.learn-index-grid a, .tool, .ll-article-note, .ll-article-cta,
       .learn-note, .learn-related, .card, .ll-embed-card):hover {
  transform: translateY(-3px);
  border-color: oklch(0.46 0.08 86 / .72);
  box-shadow: 0 16px 34px -22px oklch(0.05 0.012 258 / .9),
              0 0 22px -16px oklch(0.78 0.143 86 / .36);
}
:where(.btn, .learn-subscribe, .ll-btn-gold, .ll-btn-outline-gold,
       .ll-btn-olive) {
  transition: transform .22s cubic-bezier(.2, .7, .2, 1),
              box-shadow .22s ease, background-color .22s ease,
              border-color .22s ease, color .22s ease;
}
:where(.btn, .learn-subscribe, .ll-btn-gold, .ll-btn-outline-gold,
       .ll-btn-olive):hover {
  transform: translateY(-2px);
}
:where(button, input, textarea, select, .btn, .learn-subscribe):focus-visible {
  outline: 2px solid oklch(0.78 0.143 86 / .9);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none !important; transform: none !important; }
  :where(.learn-index-grid a, .tool, .ll-article-note, .ll-article-cta,
         .learn-note, .learn-related, .card, .ll-embed-card,
         .btn, .learn-subscribe, .ll-btn-gold, .ll-btn-outline-gold,
         .ll-btn-olive):hover {
    transform: none !important;
  }
}