/* ==========================================================================
   GLOW · base — reset, page, typography defaults, utilities, the #view frame.
   Owner: "tokens". Everything visual comes from tokens.css; no colour literals here.
   Component classes live in components.css, screen styles in css/screens/*.
   ========================================================================== */

/* ---------- 1. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6,
p, ol, ul, dl, dd, figure, blockquote, pre,
fieldset, legend { margin: 0; padding: 0; border: 0; }
fieldset { min-width: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { height: 0; margin: 0; border: 0; border-top: var(--hair) solid var(--rule-2); color: inherit; }

button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
input, select, textarea { min-width: 0; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
textarea { resize: vertical; }

button, label, select, summary, [role="button"], [role="tab"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }
button, a, label, input, select, textarea, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
button, [role="button"], [role="tab"] { -webkit-user-select: none; user-select: none; }

a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }
b, strong { font-weight: var(--fw-semibold); }
small { font-size: max(var(--fs-micro), .8em); }
sub, sup { line-height: 0; }

img, picture, video, canvas, svg { vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

/* The hidden attribute always wins over a component's display value. */
[hidden] { display: none !important; }

/* ---------- 2. Page ------------------------------------------------------ */

html {
  background-color: var(--bg);
  color: var(--ink);
  /* Fixed header and tab bar: keep focused / scrolled-to elements out from under them. */
  scroll-padding-top: calc(var(--view-top) + var(--sp-2));
  scroll-padding-bottom: calc(var(--view-bottom) + var(--fade-h));
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  /* Figures: lining everywhere; Geist digits are proportional by default, Noto Serif
     Display digits are tabular by default — proportional reads better in big serif
     numerals, .tnum restores columns. NB: a `font:` shorthand on a class resets this. */
  font-variant-numeric: lining-nums proportional-nums;
  font-kerning: normal;
  font-synthesis: style;      /* never a smeared faux bold; Geist has no italic, an <em> in sans may slant */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;  /* a long word may break rather than overflow at 360 px */
  hanging-punctuation: first; /* WebKit (Telegram iOS): an opening « hangs outside the text edge, as in print */
}

/* ---------- 3. Typography defaults (classes in components.css override) -- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: var(--fw-serif-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}
h1 { font-size: var(--fs-title-xl); font-weight: var(--fw-serif-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-title-l); }
h3 { font-size: var(--fs-title-m); }
h4 { font-size: var(--fs-item); font-weight: var(--fw-serif-text); line-height: var(--lh-item); letter-spacing: var(--tr-item); }
h5, h6 { font-size: var(--fs-body); font-weight: var(--fw-serif-text); line-height: var(--lh-ui); letter-spacing: 0; }

p, li, dd, figcaption, blockquote { text-wrap: pretty; }

::placeholder { color: var(--ink-3); opacity: 1; }

/* Native bits that would otherwise draw in a system hue. */
input, textarea, select, progress, meter { accent-color: var(--ink); caret-color: var(--ink); }
[contenteditable] { caret-color: var(--ink); }

/* Autofill paints a blue / yellow field: keep the field transparent and the ink ours. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 100000s 0s !important;
}
input:autofill { filter: none; }

/* ---------- 4. Selection, focus ----------------------------------------- */

::selection { background-color: var(--ink); color: var(--bg); }

/* 2 px solid ink, offset 2 px, keyboard focus only (amendment 4). Inside .sheet--invert
   --ink is remapped, so the ring inverts with the surface. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
#view:focus, [tabindex="-1"]:focus { outline: none; }

/* ---------- 5. Scrollbars (desktop only; phones keep native overlay bars) - */

@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: var(--ink-4); border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
}

/* ---------- 6. Utilities ------------------------------------------------- */

.tnum { font-variant-numeric: lining-nums tabular-nums; }
.pnum { font-variant-numeric: lining-nums proportional-nums; }

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ---------- 7. The view: one column between the fixed header and tab bar - */
/* No side padding: components apply var(--gutter) themselves, so the scan photo,
   list hairlines and the scrolling chip row can run edge to edge (Atelier).
   Bottom: tab bar + safe area + the 36 px dissolve + air, so the last row is never faded.
   No position: fixed inside #view — on desktop it carries a filter (section 9). */

#view {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--view-max);
  margin-inline: auto;
  isolation: isolate;          /* same stacking on phones and desktop (where a filter adds one) */
  padding-top: var(--view-top);
  padding-bottom: calc(var(--view-bottom) + var(--fade-h) + var(--sp-3));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ---------- 8. Reduced motion: a global kill switch --------------------- */
/* Animations: 1 ms (not 0) so animationend still fires for code that waits on it.
   Transitions: 0 s. transition-property defaults to `all`, so a forced 1 ms turned every
   property change of every element into a transition — about 780 on Tips per theme flip,
   an 80–110 ms long task before the new paper painted. Nothing waits for transitionend:
   core.js transitionDone() resolves at once under reduced motion (and when no duration is set). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
/* Separate rule: an engine without View Transitions drops only this one. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 9. Desktop Telegram (Windows ClearType) protection ---------- */
/* Amendment 11: greyscale text antialiasing on fine pointers. The filter goes on each
   fixed root and on the view individually — never on an ancestor of position: fixed
   elements (a filter makes a containing block). Phones get no filter. */

@media (pointer: fine) {
  .hdr, #view, .tabbar, .sheet, .toast { filter: grayscale(1); }
}