/*
 * PaperSense — Base reset & adaptive grid
 * ========================================
 * reference/lumora_source_prompt.md "Global CSS reset / base" +
 * "The rem-based adaptive grid" (verbatim), scoped per DESIGN_CONVERSION_MAP
 * C-01/C-02: the adaptive, viewport-scaled root font-size is Landing-only
 * (html.is-landing); the App (html.is-app) clamps to a legible floor.
 * RTL-readiness (ARCHITECTURE §3): CSS logical properties throughout
 * (margin-inline, padding-inline, inset-inline, text-align: start).
 */

/* ---------------------------------------------------------------------
 * Global reset (spec verbatim)
 * ------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* FONT_BASE — overridden below per surface */
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  overflow-x: hidden;
  /* `clip` never makes <body> a scroll container, so the App's sticky nav row (components.css) can't be
     broken by an engine that doesn't hand body's overflow to the viewport. `hidden` stays as the fallback. */
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------------
 * The rem-based adaptive grid (CRITICAL — bake exactly), Landing only.
 * Verbatim media queries from the spec: each = 16 * 100 / baseWidth vw.
 * The scale-UP-above-1920px runtime behaviour lives in
 * js/core/adaptive-grid.js (applyAdaptiveGrid), Landing-only too.
 * ------------------------------------------------------------------- */
/* QA-A-12: the Landing's root font-size never drops under 14px (the spec's viewport-scaled values gave 12px at
   768 and 12.2px at 1100, so every 0.75rem label rendered at 9px). Between 1441 and 1920 it stays at the 1440
   design's 16px instead of the spec's 0.833333vw (12px at 1441, a 25% drop right after 1440): the layout is then
   the approved 1440 frame, centered, all the way to 1920, where both rules give 16px. js/core/adaptive-grid.js
   still grows it above 1920. */
@media (max-width: 1440px) {
  html.is-landing { font-size: max(14px, 1.111111vw); } /* base 1440 */
}
@media (max-width: 1024px) {
  html.is-landing { font-size: max(14px, 1.5625vw); }   /* base 1024 */
}
/* 639.98px, not the spec's 640px: at exactly 640 the Landing's own `min-width: 640px` rules matched as well, giving
   the desktop-sized H1 (3.75rem) a 28px root: an 844px-wide headline in a 640px window.
   The phone scale (base 360) stops growing at 18px: the spec's 4.444vw ran on to 28px at 639, a phone layout blown up
   1.8x (a 198px header, an H1 of 71px) that then dropped to the 14px tablet scale at 640. 360 -> 16px and 375 ->
   16.7px are exactly as before; 405px and up are 18px, so the step to the tablet scale is 18 -> 14px, not 28 -> 14px. */
@media (max-width: 639.98px) {
  html.is-landing { font-size: clamp(14px, 4.444444vw, 18px); } /* base 360 */
}

/* ---------------------------------------------------------------------
 * C-01 — App views clamp the root font-size to a legible floor. The
 * adaptive grid's 1.111111vw gives ~11.4px at 1025px viewport width,
 * unreadable for dense tables; App never goes below 14px.
 * ------------------------------------------------------------------- */
html.is-app {
  font-size: clamp(14px, 1.111111vw, 16px);
}

/* ---------------------------------------------------------------------
 * Page shell
 * ------------------------------------------------------------------- */
.shell {
  /* width:100% (capped by max-width) matches the normal block-box default,
     but must be explicit here: a flex item with an auto inline margin does
     NOT stretch to fill its container (the auto margin wins over
     align-items:stretch per the flexbox spec), so without this, a `.shell`
     used as a direct child of a flex column (e.g. .nav-overlay's rows)
     silently shrinks to fit its content and gets centered instead of
     spanning full width. Reproduced at 375px: the NavMenu's top bar
     shrank to ~234px and the brand/close button ended up touching. */
  width: 100%;
  max-width: var(--container-shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) {
  .shell {
    padding-inline: 2rem;
  }
}

body {
  min-height: 100vh;
}

/* ---------------------------------------------------------------------
 * Skip link — first focusable element on every page. Hidden off-screen
 * until focused, then a fixed, visible pill (spec verbatim values;
 * left -> inset-inline-start for RTL-readiness).
 * ------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0; /* was -1px: in a right-to-left page that pushed the 1px box one pixel past the right edge, a horizontal overflow */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: var(--z-skip-link);
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: var(--radius-control);
  background: var(--ink);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--on-ink);
}

/* ---------------------------------------------------------------------
 * Screen-reader-only utility (spec verbatim)
 * ------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0; /* was -1px: see .skip-link */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
 * Focus visibility (spec verbatim, token instead of raw hex)
 * ------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Directional icons — RTL mirroring (ARCHITECTURE §3)
 * ------------------------------------------------------------------- */
[dir='rtl'] .flip-rtl {
  transform: scaleX(-1);
}
/* A plain "→" in a span (the Dashboard's "All indices" link): an inline box ignores a transform, so it becomes inline-block to be mirrored. */
span.flip-rtl {
  display: inline-block;
}

/* ---------------------------------------------------------------------
 * RTL-readiness defaults — logical text alignment
 * ------------------------------------------------------------------- */
body {
  text-align: start;
}

/* ---------------------------------------------------------------------
 * Hebrew, right to left (v4 Release B, UX_SPEC §8). The faces are set in tokens.css §12; js/core/i18n.js sets <html lang dir>.
 * Hebrew has no italics and no letter-spacing: slanted, spaced-out words read as broken, so both are switched off for every
 * element (the nameplate's Latin Fraktur is a different family and is unaffected by either).
 * ------------------------------------------------------------------- */
:lang(he) * {
  font-style: normal !important;
  letter-spacing: normal !important;
}
/* An inline left-to-right island (js/core/dom.js ltr(): tickers, ISINs, names, figures). The UA already isolates <bdi>; stated here so no reset removes it. */
bdi {
  unicode-bidi: isolate;
}
/* Figures typed into a field read left to right but start at the leading edge of a right-to-left form. */
[dir='rtl'] input:is([type='number'], [type='date'], [inputmode='decimal'], [inputmode='numeric']) {
  direction: ltr;
  text-align: end;
}

/* ---------------------------------------------------------------------
 * Reduced motion (spec verbatim)
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}