/* ═══════════════════════════════════════════════════════════════
   LaikaSuite — Base layer
   Reset, document typography, focus policy, accessibility primitives.
   Loaded by every application immediately after tokens.css.
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* The suite is a set of application shells, not scrolling documents:
     the page itself never scrolls, individual panes do. */
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--field);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Chrome fires this on <html data-theme> changes, so the frost↔obsidian
     switch cross-fades instead of snapping. */
  transition: background-color var(--duration-slow) var(--ease-out);
}

/* The launcher is the one surface that scrolls like a page.
   The marker has to sit on <html>, not on <body>: the root element owns the
   viewport's scrollbar, so leaving `overflow: hidden` there clips the
   document however the body is styled. It is written directly into the
   markup rather than set by script, so scrolling never depends on JS. */
html[data-scroll="page"] {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-scroll="page"] body {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

/* ── Typography ──────────────────────────────────────────────
   astralaika.com sets h1, h2 and h3 in Anton, uppercase, at 1.02 leading
   and 0.01em tracking, and leaves everything below h3 in the body face.
   That rule is copied here verbatim, so a heading written by any of the
   fourteen applications comes out in the company's poster voice without
   the application having to ask for it. The scripts Anton cannot set are
   handled where the display recipe lives, in components.css. */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  color: var(--text);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-synthesis: none;
}
h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.94em; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.15em 0.42em;
  font-size: var(--text-2xs);
  line-height: 1.45;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
}

hr {
  height: 1px;
  border: 0;
  background: var(--border);
}

ul, ol { padding-inline-start: 1.35em; }

/* ── Form controls inherit the system, never the platform ───── */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  border-radius: 0;
}
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
textarea { resize: vertical; }
select { cursor: pointer; }

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

/* ── Focus policy ────────────────────────────────────────────
   Focus is never removed — only rendered as a ring that matches the
   product accent. :focus-visible keeps it off mouse interactions. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Inside editable canvases the ring would follow the caret around; those
   surfaces opt out explicitly and show selection instead. */
[data-focus-ring="none"]:focus-visible { outline: none; }

/* astralaika.com: `::selection { background: var(--red); color: var(--paper) }`.
   Solid, not a wash — the company marks a selection the way a printer
   marks a correction. */
::selection {
  /* The colour of the service, not the company's: we highlight inside
     Write, not on astralaika.com. The gesture stays the site's — a
     solid flat fill, the way a printer marks a correction — but it is
     blue in Write, turquoise in Whiteboard, coral in Vault. */
  background: var(--accent);
  color: var(--accent-contrast, var(--ls-sand-0));
}

/* ── Scrollbars — the company's, tinted poster red ───────────
   astralaika.com sets `scrollbar-color: var(--red) var(--paper-2)` and
   leaves the track at the OS's own width. Same here.

   Two lines, where there used to be seven. A ::-webkit-scrollbar block sat
   under these — eleven pixels, a three-pixel transparent border, a hover
   tint — and none of it ran. A browser that understands `scrollbar-width`
   or `scrollbar-color` drops the WebKit pseudo-elements entirely, and the
   rule above sets both on `*`, so every element on every page opted out of
   the block written for it. Measured before it was believed: a forced
   horizontal overflow reported a 4px bar in rgb(200,50,30) — the standard
   properties' thin, not the eleven pixels the dead rules asked for.

   Both axes are covered, which is the question that led here: neither
   property knows about direction, so the horizontal bar is tinted by the
   same line as the vertical one.

   What this costs: Safari before 18.2 supports neither standard property
   and only ever obeyed the block now removed. Those readers get the
   system's own scrollbar — a colour, not a capability. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* ── Accessibility primitives ───────────────────────────────── */

/* Visually hidden but announced.

   `!important`, like every canonical variant of sr-only: the class
   lands on elements that already carry their own geometry — the
   `<select class="ls-select">` hidden by select.js otherwise keeps its
   `width: 100%` and its 44 px of `min-height`, since components.css
   loads after this file. A "hidden" select as wide as the whole dialog
   overflowed its edge and offered narrow dialogs a phantom horizontal
   scroll. Hiding is a contract, not a suggestion to the cascade. */
.ls-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — first tab stop of every application. */
.ls-skip-link {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -180%);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.ls-skip-link:focus-visible {
  transform: translate(-50%, 0);
  text-decoration: none;
  color: var(--accent-contrast);
}

/* ── Print — documents print, chrome does not ───────────────── */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  body { color: #000; }
  [data-print="hide"], .ls-topbar, .ls-toolbar, .ls-statusbar,
  .ls-rail, .ls-toast-region, .ls-skip-link { display: none !important; }
  [data-print="expose"] {
    position: static !important;
    overflow: visible !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}