/*
 * vy-base.css: the V6 element floor (spec 060, slice S02). Linked right after tokens.css on every
 * surface that uses the shared layer: /app and the auth doors today, admin from S11a and the
 * public pages from S12a. Every value comes from tokens.css; this file holds the element
 * defaults, the one focus rule, the [hidden] guarantee and the app print floor (S18).
 *
 * Deliberately not here (05 §1.3, critic C1): V6's hard resets (p margin, link underline, the bare
 * button reset, block svg) and scroll-padding-top. App and admin CSS rely on the UA defaults, and
 * /app scrolls the document with its own anchor offsets, so those live in vy-site.css (public).
 * Rule R9 (paint only): nothing here sets position, inset, z-index, transform or overflow on an
 * element that JS shows and hides.
 */

/* Elements only, as V6 and the app always had it: pseudo-element glyphs drawn with borders keep
   their content-box size. */
* {
  box-sizing: border-box;
}

/* Body copy in --text, headings and labels in --ink (D1); Onest only (D2). The size stays the
   15px/1.6 the app already reads, so S02 moves no text; a size change is one token here. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* Emphasis is 500 everywhere (D4, critic C3): the UA makes these bold. */
h5,
h6,
th,
dt,
legend,
strong,
b {
  font-weight: var(--weight-strong);
}

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

a {
  color: inherit;
}

:where(button, input, textarea, select) {
  font: inherit;
}

/* Unclassed labels stack their text over the control; 16 app forms rely on this grid (C2). */
label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: var(--weight-strong);
}

/* ---------- Focus: one recipe, an outline (not a box-shadow) ----------
   It follows border-radius, survives forced colours and never fights a component's own shadow.
   --focus-color is the accent (9.16:1 on paper); always-dark bands switch it (the band recipe,
   .vy-on-dark in vy-components.css). */
:focus-visible,
/* public: the /pricing audience switch hands its hidden radio's ring to the visible tab (S13) */
#ld-aud-self:focus-visible ~ .ld-aud [for="ld-aud-self"],
#ld-aud-biz:focus-visible ~ .ld-aud [for="ld-aud-biz"] {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Inside a scroller the ring is drawn inside the control, where the scroller cannot clip it
   (critic C14): one pixel in from the edge, because a scroller brings a focused row into view
   only to the nearest whole pixel. One list of the app's scrolling containers. */
:where(
  .workspace-drawer,
  .account-nav,
  .app-overlay-panel,
  .answer-table-wrap,
  .turn-integrity,
  .source-parameter-panel,
  .request-composer-example-list,
  .sp-dict-results,
  .canvas-viewport,
  .vy-table-wrap,
  .vy-menu,
  .vy-tabs
) :focus-visible {
  outline-offset: calc(-1 * var(--focus-width) - 1px);
}

/* The hidden attribute always wins, whatever display a later rule gives the element. */
[hidden] {
  display: none !important;
}

/* ---------- Utilities ---------- */
.vy-sr,
.sr-only,
/* public: the words behind the /pricing table's marks, and its caption (S13) */
.ld-sr-only,
/* app: the mobile menu button is an icon; its word stays for screen readers (S03) */
.drawer-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* V6 .skip: a quiet surface chip that slides in on focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--edge-2);
  text-decoration: none;
}

.skip-link:focus {
  left: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Print floor (D22, S18) ----------
   Paper is always light (the dark tokens are screen-only). On paper /app keeps the reading
   surface: no navigation, composers, canvas tools, answer buttons, feedback, run log or
   overlays; the answer card is flat and full width; a source link that shows a name instead of
   its address prints the address after it, so a printed answer still carries its official
   sources (AGENTS.md §1.2). The editor has its own print sheet (user-document-print.css): while
   its dialog is open this floor steps aside. Closed drawers (<details>) stay closed on paper:
   open «Джерела» before printing to include them. */
@media print {
  body:not(:has(> .working-copy-dialog[open])) :is(
    .drawer-backdrop,
    .workspace-drawer,
    .user-topbar,
    .ws-composer,
    [data-thread-composer],
    .canvas-toggle,
    .canvas-toolbar,
    .answer-head-actions :is(button, a),
    .court-copy-button,
    [data-run-comparison],
    [data-answer-feedback],
    .chat-runtime-timeline,
    .auto-refresh-note,
    .app-overlay
  ) {
    display: none !important;
  }

  body:not(:has(> .working-copy-dialog[open])) .user-view {
    width: auto;
    margin: 0;
  }

  body:not(:has(> .working-copy-dialog[open])) .band.structured-answer {
    box-shadow: none;
  }

  body:not(:has(> .working-copy-dialog[open])) .source-link.labeled {
    display: inline;
    white-space: normal;
  }

  body:not(:has(> .working-copy-dialog[open])) :is(
    .vy-src-row a,
    .source-link.labeled,
    .answer-attribution a,
    .answer-table-wrap a,
    .answer-source-title a
  )::after {
    content: " " attr(href);
    overflow-wrap: anywhere;
  }
}