/*
 * vy-components.css: the V6 display recipes (spec 060, slice S02). Cards, the answer card,
 * quotes, source rows, prose, tags and chips, icon boxes, eyebrow and page head, accordion,
 * steps, meter, tier, notes, table, modal shell, glass bar, empty state and skeleton. The auth
 * start card joins with its adopter in S14; the avatar sits by kbd in vy-controls.css. Linked after
 * vy-controls.css and before every surface sheet.
 *
 * One rule per look: the canonical .vy-* class first, then the existing classes that adopt it
 * under an "app" comment; public ones (S12a) are written :where(.vy-site) .x, V6's own
 * specificity. Values come from tokens.css; the knobs are --card-*, --doc-*, --chip-*, --modal-*.
 *
 * Owner edits: «картки» -> the card rules, «мітки/статуси» -> the chip rules, colours -> tokens.css.
 * Rules: R9 paint only (no position, inset, z-index, transform, overflow on anything JS shows
 * and hides; a static card never lifts, only .vy-card-link does, and only for a real pointer);
 * C8 no copy in content: (only glyphs such as + and −); edges are inset rings, so forced colours
 * get an outline instead (C13, the block at the end).
 */

/* ======================= Cards ======================= */

.vy-card,
:where(.vy-site) .card,
/* public: the news cards of the server pages (S12b) */
:where(.vy-site) .ln-item,
/* app: the answer's source cards */
.answer-court-list li.court-card,
.answer-source-list li.legal-basis-card,
/* app: a document list row (S06) */
.document-list-row,
/* app: the team offer under the plans; the team page's status card, figures, panels, roles (S08) */
.plan-team-band,
.team-plan-status-card,
.team-metric-grid article,
.team-panel,
.team-role-card,
.team-plan-denied,
/* app: the canvas cards, on the open stage only (S07) */
.canvas-stage :is(.canvas-chat-card, .canvas-map-card),
/* app: the coverage cards (S10) */
.trust-card {
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--edge);
  color: var(--text);
}

.vy-card-link {
  display: block;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--edge);
  color: var(--text);
  text-decoration: none;
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.vy-card-link:hover,
/* app: a row that holds a menu takes the edge, never the lift (C5) */
.document-list-row:hover { box-shadow: var(--shadow-2), var(--edge-2); }

@media (hover: hover) {
  .vy-card-link:hover { transform: translateY(var(--lift)); }
}

/* A sunken well: example requests, inline asides (V6 .who .q). */
.vy-well,
:where(.vy-site) .who .q,
/* app: the home's example requests (S04); the editor's storage notice, a text file's preview (S06) */
.ws-suggest,
.working-copy-notice,
.file-preview-text {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--panel-sunken);
  color: var(--ink);
}

/* ======================= Answer (document) card, V6 .doc ======================= */

.vy-doc,
:where(.vy-site) .doc,
/* app: the answer card (keeps the 1px edge of .band) */
.band.structured-answer {
  padding: 22px 24px;
  border-radius: var(--doc-radius);
  background: var(--panel);
  box-shadow: var(--doc-shadow);
  color: var(--text);
}

@media (max-width: 900px) { .vy-doc, .band.structured-answer { padding: 22px 20px; } }

.vy-doc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* A verbatim quote: a 2px accent rule, Onest (D2). */
.vy-quote,
/* app: the court quote of record and the statute excerpt */
.exact-quote pre,
.legal-basis-card blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.vy-src-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vy-src-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--panel-sunken);
  color: var(--ink);
  font-size: var(--text-ui);
  overflow-wrap: anywhere;
}

/* ======================= Prose (policies, guide, what's new) ======================= */

.vy-prose,
/* app: the policy documents (S10); the consent intro and a what's new post (S09) */
.policy-document,
.policy-consent-intro,
.news-launch-body {
  max-width: var(--measure);
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

.vy-prose h2,
.vy-prose h3 {
  margin: 1.6em 0 0.5em;
  line-height: var(--leading-snug);
}

.vy-prose ul,
.vy-prose ol {
  padding-left: 20px;
}

.vy-prose li + li { margin-top: 6px; }

/* ======================= Tags, chips, badges, counts (V6 .tag, .chip-ok) ======================= */

/* The chip keeps a transparent 1px edge so adopters that had a border keep their box (R5). */
.vy-tag,
.vy-chip-ok,
.vy-chip-warn,
.vy-chip-danger,
.vy-chip-info,
.vy-chip-meta,
.vy-chip-accent,
.vy-badge,
.vy-count,
/* app */
.account-chip,
.plan-price-chip,
.team-pill,
.u-status,
.status-pill,
.answer-format-pill,
/* app: the running request's auto-refresh banner (S15); the runtime's context counts (S05b) */
.auto-refresh-note,
.chat-runtime-context span,
/* app: a canvas summary item's link to its map node (S07) */
.canvas-summary-anchor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--chip-h);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--chip-radius);
  background: var(--panel-sunken);
  color: var(--text);
  font: var(--weight-strong) var(--text-sm)/1.2 var(--font-sans);
}

.vy-chip-ok,
/* app: the account's status chips, the current plan's flag, the team pills (S08) */
.account-chip-success,
.plan-card-flag.plan-card-flag-current,
.team-pill.tone-ok,
.u-status.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.vy-chip-warn,
/* app */
.account-chip-warning,
.team-pill.tone-warn,
.u-status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.vy-chip-danger,
/* app */
.u-status.blocked {
  background: var(--danger-soft);
  color: var(--danger);
}

.vy-chip-info,
/* app */
.u-status.info,
.auto-refresh-note {
  background: var(--info-soft);
  color: var(--info);
}

.vy-chip-meta,
/* app */
.status-pill.neutral,
.status-pill.route {
  background: var(--meta-soft);
  color: var(--meta);
}

.vy-chip-accent,
.vy-tag-preview,
/* app: «Превʼю» and «За місяць» on the plan cards (S08) */
.plan-price-chip {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.vy-chip-ok svg.icon,
.vy-chip-warn svg.icon,
.vy-chip-danger svg.icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.vy-badge {
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
}

.vy-count {
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ======================= Icon box (V6 .icon-box) ======================= */

.vy-icon-box,
:where(.vy-site) .icon-box,
/* app: the mark of the cabinet's error and its 404 (S15); the access gate's pictogram (S09) */
.error-box::before,
.access-gate-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-icon);
  background: var(--panel-sunken);
  color: var(--ink);
}

.vy-icon-box svg.icon { width: 22px; height: 22px; stroke: currentColor; }
.vy-icon-box-sm,
:where(.vy-site) .icon-box.sm { width: 36px; height: 36px; border-radius: var(--radius-md); }
.vy-icon-box-tint { background: var(--accent-soft); color: var(--accent); }
.vy-icon-box-danger, .error-box::before { background: var(--danger-soft); color: var(--danger); }

/* Pictograms are ink drawings, so their plate stays light in both themes (critic C12). */
.vy-icon-box-pic,
.vy-icon-box-pic-sm,
.vy-icon-box-pic-lg,
/* app */
.access-gate-icon {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--pic-plate);
}

.vy-icon-box-pic img,
.vy-icon-box-pic-sm img,
.vy-icon-box-pic-lg img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.vy-icon-box-pic-sm { width: 52px; height: 52px; border-radius: var(--radius-icon); }

.vy-icon-box-pic-lg {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: var(--pic-plate-accent);
}

/* ======================= Eyebrow and page head ======================= */

/* Sentence case, 14px, muted, with an optional accent dot (<i>): V6 .eyebrow. */
.vy-eyebrow,
:where(.vy-site) .eyebrow,
/* app */
.ws-hero-eyebrow,
.thread-workspace .section-kicker,
.structured-answer .section-kicker,
/* app: the kickers of the account, plans and team pages (S08) */
:is(.account-heading, .account-section, .team-plan-page) .section-kicker,
/* app: the info pages' kicker and the FAQ group labels (S10) */
.trust-heading-centered .section-kicker,
.faq-group-label,
/* app: what's new and the incognito band (S09) */
.news-launch .section-kicker,
.incognito-eyebrow,
/* app: a running request's kickers and the how-verified label (S05b) */
.detail-stack .section-kicker,
.how-verified-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
  letter-spacing: normal;
  text-transform: none;
}

.vy-eyebrow > i,
:where(.vy-site) .eyebrow > i,
/* app */
.ws-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.vy-page-head { display: grid; gap: 8px; margin-bottom: var(--space-6); }

.vy-page-head h1,
/* app: the document pages (S06) */
:is(.document-list, .band:has(> [data-document-open]), .band:has(> h1 + p[role="status"]:last-child)) > h1,
/* app: the account and team page heads (S08) */
.account-heading h1,
.team-plan-hero h1,
/* app: the info pages (S10) */
.trust-heading-centered h1 {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  /* D26: at a larger browser font one long word («відповідальності») is wider than a 320 px phone. «anywhere»,
     not «break-word»: the phone head is a 1fr grid column, which would otherwise grow to the word. */
  overflow-wrap: anywhere;
}

.vy-page-head p,
/* app */
:is(.document-list, .band:has(> [data-document-open])) > h1 + p,
/* app */
.account-heading h1 + p,
.team-plan-hero-copy > h1 + p,
.trust-heading-centered h1 + p {
  max-width: 62ch;
  margin: 0;
  color: var(--text);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}

/* ======================= Accordion (V6 FAQ, native <details>) ======================= */

.vy-accordion,
/* public: the /pricing FAQ, bare <details> that pricing-page.test.mjs counts (S13) */
:where(.vy-site) .ld-faq > details,
/* app: the plan rules and a plan card's full capabilities (S08) */
.plan-rules,
.plan-capabilities,
/* app: the FAQ (S10); the consent modal's documents (S09) */
.faq-item,
.policy-consent-document,
/* app: the answer's drawers and the evidence sheet (S05b; how-verified closes on its drawer's line) */
:is(.answer-drawer, .evidence-sheet) { border-bottom: 1px solid var(--ring-2); }

.vy-accordion:first-child,
:not(.vy-accordion) + .vy-accordion,
:where(.vy-site) .ld-faq > details:first-child,
/* app */
.plan-rules,
.plan-capabilities,
.faq-item:first-child,
:not(.answer-drawer) + .answer-drawer,
:is(.how-verified, .evidence-sheet) {
  border-top: 1px solid var(--ring-2);
}

.vy-accordion > summary,
:where(.vy-site) .ld-faq > details > summary,
/* app */
.plan-rules > summary,
.plan-capabilities > summary,
.faq-item > summary,
.policy-consent-document > summary,
:is(.answer-drawer, .how-verified, .evidence-sheet) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 2px;
  color: var(--ink);
  font-size: var(--text-lead);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.vy-accordion > summary::-webkit-details-marker,
:where(.vy-site) .ld-faq > details > summary::-webkit-details-marker,
/* app */
.plan-rules > summary::-webkit-details-marker,
.plan-capabilities > summary::-webkit-details-marker,
.faq-item > summary::-webkit-details-marker,
.policy-consent-document > summary::-webkit-details-marker,
:is(.answer-drawer, .how-verified, .evidence-sheet, .chat-runtime-disclosure) > summary::-webkit-details-marker { display: none; }

.vy-accordion > summary::after,
:where(.vy-site) .ld-faq > details > summary::after,
/* app */
.plan-rules > summary::after,
.plan-capabilities > summary::after,
.faq-item > summary::after,
.policy-consent-document > summary::after,
:is(.answer-drawer, .how-verified, .evidence-sheet, .chat-runtime-disclosure) > summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 20px;
  font-weight: var(--weight-regular);
  line-height: 1;
}

.vy-accordion[open] > summary::after,
:where(.vy-site) .ld-faq > details[open] > summary::after,
/* app */
.plan-rules[open] > summary::after,
.plan-capabilities[open] > summary::after,
.faq-item[open] > summary::after,
.policy-consent-document[open] > summary::after,
:is(.answer-drawer, .how-verified, .evidence-sheet, .chat-runtime-disclosure)[open] > summary::after { content: "−"; }

.vy-accordion > summary:hover,
:where(.vy-site) .ld-faq > details > summary:hover,
/* app */
.plan-rules > summary:hover,
.plan-capabilities > summary:hover,
.faq-item > summary:hover,
.policy-consent-document > summary:hover,
:is(.answer-drawer, .how-verified, .evidence-sheet) > summary:hover { color: var(--accent); }

.vy-accordion > :not(summary),
:where(.vy-site) .ld-faq > details > :not(summary),
/* app */
.plan-rules > :not(summary),
.plan-capabilities > :not(summary),
.faq-item > :not(summary),
.policy-consent-document > :not(summary),
:is(.answer-drawer, .how-verified) > :not(summary) { margin: 0 0 16px; padding: 0 2px; color: var(--text); }

/* ======================= Steps (a progress rail with square nodes, V6 .step) =======================
   A node is the logo's square: an ink ring while pending, filled in its tone (--step-node) once
   the step has a state; --step-ring quiets a pending ring. The connector is painted, not
   positioned (R9): each step draws the hairline above and below its node. */

.vy-steps,
/* app: a turn's runtime timeline (S05b) */
.chat-runtime-events-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vy-step,
/* app: the runtime events; the legacy source-check stages (S05b) */
.chat-runtime-event,
.progress-steps li {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  color: var(--text);
}

.vy-step::before,
/* app */
.chat-runtime-event::before,
.progress-steps li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--step-node, transparent);
  box-shadow: inset 0 0 0 1.5px var(--step-node, var(--step-ring, var(--ink)));
}

.vy-steps > .vy-step,
.chat-runtime-events-list > .chat-runtime-event {
  padding-bottom: 12px;
  background:
    linear-gradient(var(--ring-2), var(--ring-2)) 5px 0 / 1px 5px no-repeat,
    linear-gradient(var(--ring-2), var(--ring-2)) 5px 16px / 1px calc(100% - 16px) no-repeat;
}

.vy-steps > .vy-step:first-child,
.chat-runtime-events-list > .chat-runtime-event:first-child { background-size: 0 0, 1px calc(100% - 16px); }

.vy-steps > .vy-step:last-child,
.chat-runtime-events-list > .chat-runtime-event:last-child { padding-bottom: 0; background-size: 1px 5px, 0 0; }

.vy-steps > .vy-step:only-child,
.chat-runtime-events-list > .chat-runtime-event:only-child { background: none; }

.vy-step[aria-current="step"],
.vy-step.is-done { --step-node: var(--accent); }

/* The running step breathes; under reduced motion it holds still. */
@media (prefers-reduced-motion: no-preference) {
  .vy-step[aria-current="step"]::before,
  /* app */
  .chat-runtime-event.active::before,
  .progress-steps li.active::before { animation: vy-step-pulse 1.6s var(--ease) infinite; }
}

@keyframes vy-step-pulse { 50% { opacity: 0.4; } }

/* ======================= Meter ======================= */

/* Continuous: the fill width is a custom property set through CSSOM (R8), never an inline style attribute. */
.vy-meter,
/* app: the usage windows and the team usage bars are native <meter>s, the element is the track (S08) */
.usage-window-meter,
.team-usage-meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--panel-deep);
}

/* The fill is the chart colour (D23 item 8), so meters and charts change together; until the chart
   tokens exist it falls back to the accent. */
.vy-meter > span {
  display: block;
  width: var(--vy-meter-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--chart-1, var(--accent));
}

/* A native <meter> draws the exact value/max share itself: no inline style, no rounding into steps. With no
   low/high/optimum attributes the value is always in the optimum region; a tone sets --vy-meter-fill. */
:is(.usage-window-meter, .team-usage-meter) { width: 100%; border: 0; overflow: hidden; appearance: none; }
:is(.usage-window-meter, .team-usage-meter)::-webkit-meter-bar { height: 6px; border: 0; background: var(--panel-deep); }
:is(.usage-window-meter, .team-usage-meter)::-webkit-meter-optimum-value { border-radius: 3px; background: var(--vy-meter-fill, var(--chart-1, var(--accent))); }
:is(.usage-window-meter, .team-usage-meter)::-moz-meter-bar { border-radius: 3px; background: var(--vy-meter-fill, var(--chart-1, var(--accent))); }

/* Depth: segments, lit ones in the accent (V6 .tier .depth). */
.vy-meter-depth { display: flex; gap: 4px; }

.vy-meter-depth > i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--panel-deep);
}

.vy-meter-depth > i.on { background: var(--accent); }

/* ======================= Tier (plan card, V6 .tier) ======================= */

.vy-tier,
/* app: the plan cards (S08) */
.plan-tier-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: var(--edge);
  color: var(--text);
}

/* The recommended tier: a lifted edge and a 2px accent bar drawn as an inset shadow. */
.vy-tier-rec,
/* app */
.plan-card-featured { box-shadow: var(--shadow-2), var(--edge-2), inset 0 2px 0 var(--accent); }

.vy-tier-badge,
/* app */
.plan-card-flag {
  justify-self: start;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}

/* ======================= Notes (limits, warnings, degraded states) ======================= */

.vy-note,
/* app: the plans' checkout notices and payment-return banners, a team role's caution (S08) */
.plan-checkout-notice,
.plan-checkout-refusal,
.plan-return,
.team-role-warning,
/* app: the canvas summary's paid-call offer (S07) */
.canvas-summary-offer,
/* app */
.auth-form-notice,
.answer-draft-review-note,
/* app: the note that part of the cabinet's data did not refresh (S15); what changed in the rules (S09) */
.band.degraded-note,
.policy-consent-delta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--edge);
  color: var(--text);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}

/* The tones also paint notes that keep their own grid layout: the answer's verification blocks
   (S05b) take the tint and the ring here, their layout stays in user-detail.css and user-app.css. */
.vy-note-warn,
/* app */
.answer-draft-review-note,
.plan-return-pending,
.plan-return-reconciliation,
.team-role-warning,
.band.degraded-note,
.court-confidence,
.court-coverage-matrix > li,
.court-collection-next,
.quote-rules,
.source-availability-notice { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }

.vy-note-danger,
/* app */
.plan-checkout-refusal,
.plan-return-failed,
.source-availability-notice.blocked { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }

.vy-note-info,
/* app */
.plan-return-checking,
.operator-candidate-list,
.source-availability-notice.info { background: var(--info-soft); box-shadow: inset 0 0 0 1px var(--info-line); }

.vy-note-ok,
/* app */
.plan-return-active,
.court-confidence.ok,
.court-coverage-matrix > li.verified { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-line); }

/* ======================= Table ======================= */

/* The canonical wrapper scrolls wide tables inside itself (D21); adopters keep their own. */
.vy-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--card-radius);
  box-shadow: var(--edge);
}

.vy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
}

.vy-table th,
.vy-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ring);
  text-align: left;
  vertical-align: top;
}

.vy-table th { background: var(--panel-alt); color: var(--muted); font-size: var(--text-sm); }

.vy-table td { color: var(--text); }

.vy-table tbody tr:last-child td { border-bottom: 0; }

/* ======================= Modal shell (paint only; dialogs keep their own layout, C4) ======================= */

.vy-modal,
/* app: the editor <dialog>; paint only, the UA keeps its display and centring (C4) */
.working-copy-dialog,
/* app: the shared overlay's panel; its head and body carry the pad (S09) */
.app-overlay-panel {
  border-radius: var(--modal-radius);
  background: var(--panel);
  box-shadow: var(--shadow-3), var(--edge);
  color: var(--text);
}

.vy-modal,
.working-copy-dialog { padding: var(--modal-pad); }

.vy-modal-backdrop,
/* app */
.app-overlay-backdrop { background: var(--overlay); }

.vy-modal-head,
/* app */
.app-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: var(--text-lead);
  font-weight: var(--weight-strong);
}

.vy-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ======================= Glass bar (V6 header bar; public pill, canvas toolbar) ======================= */

/* backdrop-filter makes the bar a stacking context and containing block (critic C15). */
.vy-glass-bar,
/* app: the canvas toolbar (S07) */
.canvas-toolbar {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: var(--shadow-pill), var(--edge);
}

/* ======================= Always-dark band (V6 section band; D12) ======================= */

/* On the dark page a --dark band would vanish, so --dark-band lifts it in dark theme and the ring
   always draws its edge (critic C11). Focus switches to the band's light ring. */
.vy-on-dark,
/* app: the incognito conversation's head (S09) */
.incognito-head {
  --focus-color: var(--dark-focus);
  background: var(--dark-band);
  box-shadow: inset 0 0 0 1px var(--dark-ring);
  color: var(--dark-text);
}

/* ======================= Empty state and skeleton ======================= */

/* An empty list or page (S15); an empty document list offers no retry and is not loading. */
.vy-empty,
.empty-row,
.document-list > [data-document-list-status]:has(~ [data-document-list-rows]:empty):has(~ [data-document-list-more][hidden]:not(:disabled)),
.canvas-map-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 20px;
  color: var(--muted);
  font-size: var(--text-ui);
  text-align: center;
}

/* The pictogram of an empty page or panel: ink on its light plate in both themes (C12). */
.vy-empty-pic::before,
.document-list > [data-document-list-status]:has(~ [data-document-list-rows]:empty):has(~ [data-document-list-more][hidden]:not(:disabled))::before,
.canvas-map-empty::before {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--pic-plate) url("/assets/media/icon-sources.webp") center / 78% no-repeat;
}

/* A loading line: at rest the deep well, breathing to the sunken one; still under reduced motion. */
.vy-skeleton,
/* app: the boot and route skeleton (S15) */
.loading-line {
  min-height: 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-deep);
  animation: vy-skeleton-pulse 1.6s var(--ease) infinite;
}

@keyframes vy-skeleton-pulse { 50% { background-color: var(--panel-sunken); } }

@media (prefers-reduced-motion: reduce) { .vy-skeleton, .loading-line { animation: none; } }

/* ======================= Start card (V6 .start-card) =======================
   The sign-in card lifted over the dotted field. Its buttons are the shared ones: Google is the
   quiet button (V6 .btn-google is the same surface and ring), the submit is the primary. The app's
   auth doors left the card under D24: their column stands on the plain page background. */

.vy-start-card {
  max-width: 440px;
  padding: 28px;
  border-radius: var(--radius-2xl);
  background: var(--panel);
  box-shadow: var(--shadow-3), var(--edge);
}

/* The divider between Google and the form: a short word between two hairlines. */
.vy-or,
/* app */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.vy-or::before,
.vy-or::after,
/* app */
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ring);
}

/* The small print of a form (consent, the switch line); its links are the shared link. */
.vy-legal,
/* app */
.auth-consent-label,
.auth-switch,
.auth-legal {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* ======================= Forced colours (Windows High Contrast, critic C13) =======================
   Forced colours drop box-shadow, so containers drawn with an inset ring lose their edge.
   Focusable ones are left out, because an outline here would replace their focus ring. */
@media (forced-colors: active) {
  .vy-card,
  .answer-court-list li.court-card,
  .answer-source-list li.legal-basis-card,
  .document-list-row,
  .trust-card,
  .vy-start-card,
  .vy-card-link:not(:focus-visible),
  .vy-well,
  .plan-team-band,
  .team-plan-status-card,
  .team-metric-grid article,
  .team-panel,
  .team-role-card,
  .team-plan-denied,
  .vy-doc,
  .vy-src-row,
  .vy-note,
  .plan-checkout-notice,
  .plan-checkout-refusal,
  .plan-return,
  .team-role-warning,
  .auth-form-notice,
  .answer-draft-review-note,
  .band.degraded-note,
  .policy-consent-delta,
  .vy-tier,
  .plan-tier-card,
  .vy-table-wrap,
  .vy-modal,
  .working-copy-dialog,
  .app-overlay-panel,
  .vy-on-dark,
  .incognito-head,
  .vy-menu,
  .chat-menu-pop,
  .account-menu,
  .power-select-menu,
  .vy-glass-bar,
  .vy-icon-box,
  .vy-kbd,
  .vy-meter,
  .usage-window-meter,
  .team-usage-meter,
  .vy-tag,
  .vy-chip-ok,
  .vy-chip-warn,
  .vy-chip-danger,
  .vy-chip-info,
  .vy-chip-meta,
  .vy-chip-accent,
  .vy-badge,
  .vy-count,
  .u-status,
  .status-pill,
  .account-chip,
  .plan-price-chip,
  .team-pill,
  .auto-refresh-note,
  .chat-runtime-context span,
  /* app: the verification notes (S05b) */
  :is(.court-confidence, .court-coverage-matrix > li, .court-collection-next, .quote-rules),
  :is(.operator-candidate-list, .source-availability-notice),
  :is(.canvas-toolbar, .canvas-stage .canvas-chat-card, .canvas-stage .canvas-map-card, .canvas-summary-offer) {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  /* Step nodes: the ring is an inset box-shadow and the fill a background, and forced colours drop
     both, so the node vanished (#2022 item 3). It takes a real border; border-box keeps it 11px. */
  .vy-step::before,
  .chat-runtime-event::before,
  .progress-steps li::before {
    box-sizing: border-box;
    border: 1.5px solid CanvasText;
  }

  /* Forced colours remove the gradient rail. A real border follows the same node endpoints;
     the Canvas-backed node masks its middle without opting text out of system colours. */
  .vy-steps > .vy-step,
  .chat-runtime-events-list > .chat-runtime-event { position: relative; }

  .vy-steps > .vy-step::after,
  .chat-runtime-events-list > .chat-runtime-event::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    border-left: 1px solid CanvasText;
    pointer-events: none;
  }

  .vy-steps > .vy-step::before,
  .chat-runtime-events-list > .chat-runtime-event::before {
    position: relative;
    z-index: 1;
    background: Canvas;
    animation: none;
  }

  .vy-steps > .vy-step:first-child::after,
  .chat-runtime-events-list > .chat-runtime-event:first-child::after { top: 16px; }

  .vy-steps > .vy-step:last-child::after,
  .chat-runtime-events-list > .chat-runtime-event:last-child::after { bottom: calc(100% - 5px); }

  .vy-steps > .vy-step:only-child::after,
  .chat-runtime-events-list > .chat-runtime-event:only-child::after { display: none; }
}