/* base.css — tokens, reset, typography. iOS Notes palette. */

:root {
  /* GUIDE §3.1 — THE ONLY env() READS IN THIS PROJECT. Machine-checked at exactly 4.
     env() is a read-only UA value with no setter and no media-query equivalent, so a
     rule that reads it directly can only ever be exercised on hardware — and the
     installed-with-insets case is precisely the one that overflows. Reading each once
     into a custom property turns an unwritable input into an ordinary style input, so
     a test can drive it. All FOUR, not two: left/right are non-zero in landscape,
     which is exactly where a horizontal layout clips. */
  --sa-top:    env(safe-area-inset-top,    0px);
  --sa-right:  env(safe-area-inset-right,  0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left,   0px);

  /* GUIDE §3.5 — published from JS off visualViewport. The keyboard shrinks the
     VISUAL viewport, not the layout one, so a position:fixed bar stays pinned to the
     bottom of the layout viewport i.e. behind the keyboard. */
  --kb: 0px;
  /* GUIDE §3.6 — measured height of the pinned shell. 100dvh is the first-paint
     fallback only; the measured value is the single source of truth. */
  --app-h: 100dvh;

  --paper:      #fffdf7;
  --paper-2:    #f7f4ec;
  --ink:        #1c1c1e;
  --ink-2:      #6b6b70;
  --ink-3:      #a9a9ae;
  --rule:       #e6e2d7;
  --accent:     #e0a33c;
  --accent-ink: #8a6215;
  --sel:        rgba(224,163,60,.28);
  --chrome:     #f2efe6;
  --danger:     #d0453b;
  --on-accent:  #fff;          /* text and strokes drawn on --accent */
  --hl:         rgba(255, 214, 10, .38);   /* the Highlight mark */
  --red:        #c8372d;      /* the Red mark */

  --r:      10px;
  --tap:    34px;
  --gutter: 18px;

  --fs:   17px;
  --lh:   1.47;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1c1c1e;
    --paper-2:    #252528;
    --ink:        #f2f2f7;
    --ink-2:      #9a9aa0;
    --ink-3:      #6a6a70;
    --rule:       #3a3a3d;
    --accent:     #ffd60a;
    --accent-ink: #ffd60a;
    --sel:        rgba(255,214,10,.26);
    --chrome:     #2c2c2e;
    --danger:     #ff453a;
    --on-accent:  #1c1c1e;      /* white on the dark-mode yellow is 1.4:1 */
    --hl:         rgba(255, 214, 10, .30);
    --red:        #ff6b5e;
  }
}
:root[data-theme="dark"] {
  --paper:#1c1c1e; --paper-2:#252528; --ink:#f2f2f7; --ink-2:#9a9aa0;
  --ink-3:#6a6a70; --rule:#3a3a3d; --accent:#ffd60a; --accent-ink:#ffd60a;
  --sel:rgba(255,214,10,.26); --chrome:#2c2c2e; --danger:#ff453a; --on-accent:#1c1c1e; --hl:rgba(255,214,10,.30); --red:#ff6b5e;
}

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

/* GUIDE §2.3 — the layout viewport is both the containing block AND the clip
   rectangle for fixed boxes. Growing this chain to the frame height changes the
   document, not the clip: a fixed box positioned into the extra region is laid out
   BELOW the clip and never composited. It does not extend — it vanishes. So html and
   body are taken out of the sizing chain entirely and carry no band-covering
   background. FORBIDDEN anywhere in this project: height:var(--frame-h) on the root
   chain. Machine-checked. */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs)/var(--lh) var(--font);
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--sel); }

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

/* GUIDE §4.1 — iOS zooms the viewport whenever a focused field's COMPUTED font-size
   is under 16px, and leaves it zoomed. max() rather than a flat 16px so a user's
   larger default text setting is not clamped down. */
input, textarea, select { font-size: max(16px, 1rem); }

input {
  font: inherit; color: inherit;
  font-size: max(16px, 1rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 10px 12px;
  width: 100%;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}