/*
 * vy-controls.css: the V6 interactive recipes (spec 060, slice S02). Buttons, fields, choices,
 * tabs, menus, nav rows, links, kbd and the avatar (S03). Linked after vy-base.css and before every
 * surface sheet.
 *
 * One rule per look. Each selector list starts with the canonical .vy-* class; the existing
 * classes that must look the same follow under an "app" (or later "admin", "public") comment,
 * and their old declarations for the same properties are gone from the legacy sheets (R3).
 * Sizes, radius and weight are the knobs in tokens.css (--btn-*, --field-*, --nav-row-*).
 *
 * Owner edits: «кнопки» -> the button rules below, «поля» -> the field rules, values -> tokens.css.
 * "Default buttons should be outlined": move the :where(button…) line into the outline list.
 *
 * Public pages (<body class="vy-site">, S12a) join a recipe as ":where(.vy-site) .x" under a
 * "public" comment, which keeps V6's own specificity. The app's element adopters (the bare
 * button, button[type="submit"]) stop at .vy-site: V6 has its own button reset there, and the
 * quiet 40px floor or the oxblood submit would repaint the landing's text buttons and composer.
 *
 * Rules (05 §1.4 and §7.1): R1 canonical names are .vy-*; R4 bare elements join only through
 * :where() and only with properties their legacy element rule already set; R9 recipes are paint
 * only (no position, inset, z-index, overflow; transform only for the .vy-btn* hover lift);
 * C7 no fill or stroke on a descendant svg except svg.icon (the Google mark keeps its colours).
 */

/* ======================= Buttons ======================= */

/* Shape, size and type: every button look starts here. The quiet look (surface and a soft ring)
   is the default, so a bare <button> renders quiet (D10). */
:where(button:not(.vy-site *)),
.vy-btn,
.vy-btn-primary,
.vy-btn-quiet,
.vy-btn-ghost,
.vy-btn-danger,
.vy-btn-icon,
.vy-btn-on-dark,
/* app */
.button,
.auth-submit,
:where(button, a).ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-height: var(--btn-h);
  border: 1px solid var(--ring-2);
  border-radius: var(--btn-radius);
  padding: 0 var(--btn-pad-x-sm);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* Long Ukrainian labels wrap inside the pill instead of overflowing at 390 px (critic C6).
   V6's nowrap stays on the public alias only. */
.vy-btn,
.vy-btn-primary,
.vy-btn-quiet,
.vy-btn-ghost,
.vy-btn-danger,
.vy-btn-on-dark,
/* app */
.button,
:where(button, a).ghost {
  max-width: 100%;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

/* The two call-to-action looks take the wider pad. */
.vy-btn,
.vy-btn-primary,
.vy-btn-danger,
.vy-btn-on-dark,
/* app */
.button,
button[type="submit"]:not(:where(.vy-site *)),
.working-copy-foot [data-working-export],
.canvas-summary-offer [data-canvas-summary-generate] {
  padding-inline: var(--btn-pad-x);
}

/* Quiet hover: a wash, a firmer ring, no lift. */
.vy-btn-quiet:hover,
:where(button:not(.vy-site *)):hover {
  border-color: var(--ring-3);
  background: var(--hover-wash);
}

/* Primary: the oxblood pill (V6 .btn-accent). In dark theme --cta inverts to cream. */
.vy-btn-primary,
/* app */
.auth-submit,
.button,
button[type="submit"]:not(:where(.vy-site *)),
.working-copy-foot [data-working-export],
/* app: the canvas summary offer (S07) */
.canvas-summary-offer [data-canvas-summary-generate] {
  border-color: var(--cta-line);
  background: var(--cta);
  color: var(--cta-contrast);
  box-shadow: var(--shadow-cta);
}

.vy-btn-primary:hover,
/* app */
.auth-submit:hover,
.button:hover,
button[type="submit"]:not(:where(.vy-site *)):hover,
.working-copy-foot [data-working-export]:hover,
.canvas-summary-offer [data-canvas-summary-generate]:hover {
  border-color: var(--cta-line-hover);
  background: var(--cta-hover);
  color: var(--cta-contrast);
}

/* Outline: the ink-outline pill (V6 .btn); every explicit secondary. */
.vy-btn,
/* app */
.button.secondary,
.button.subtle,
button.subtle {
  border-color: var(--btn-outline-line);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.vy-btn:hover,
/* app */
.button.secondary:hover,
.button.subtle:hover,
button.subtle:hover {
  border-color: var(--btn-outline-line);
  background: var(--press-wash);
  color: var(--ink);
}

/* Ghost: toolbars and quiet actions (V6 nav link look). */
.vy-btn-ghost,
.vy-btn-icon,
/* app */
:where(button, a).ghost,
/* app: the canvas tools (S07); a colour swatch keeps its fill */
.canvas-toolbar button:not(.canvas-swatch),
.drawer-toggle,
.drawer-close,
.sidebar-collapse,
.icon-btn,
.sidebar-mini,
.auth-pass-toggle,
.composer-plus,
.composer-mic,
.composer-incognito,
/* app: the shared overlay's close (S09) */
.app-overlay-close {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.vy-btn-ghost:hover,
.vy-btn-icon:hover,
/* app */
:where(button, a).ghost:hover,
.canvas-toolbar button:not(.canvas-swatch):hover,
.drawer-toggle:hover,
.drawer-close:hover,
.sidebar-collapse:hover,
.icon-btn:hover,
.sidebar-mini:hover,
.auth-pass-toggle:hover,
.composer-plus:hover,
.composer-mic:hover,
.composer-incognito:hover,
.app-overlay-close:hover {
  background: var(--hover-wash);
  color: var(--ink);
}

/* Danger: destructive confirmations. */
.vy-btn-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-status);
}

.vy-btn-danger:hover {
  border-color: var(--danger-strong);
  background: var(--danger-strong);
}

/* On an always-dark band (V6 .btn-white). */
.vy-btn-on-dark,
/* app: the incognito band's finish (S09) */
.incognito-finish {
  border-color: var(--dark-heading);
  background: var(--dark-heading);
  color: var(--dark);
}

.vy-btn-on-dark:hover,
.incognito-finish:hover {
  border-color: var(--pic-plate-accent);
  background: var(--pic-plate-accent);
}

/* Icon only: a round target the height of a button. */
.vy-btn-icon,
/* app */
.drawer-toggle {
  width: var(--btn-h);
  padding: 0;
}

.vy-btn-sm,
/* app */
.canvas-toolbar button:not(.canvas-swatch),
.drawer-close,
.answer-head-actions > .ghost,
.incognito-finish {
  min-height: var(--btn-h-sm);
  padding-inline: var(--btn-pad-x-sm);
}

.vy-btn-lg,
/* app: the full-width buttons of the sign-in card */
.auth-google,
.auth-submit {
  min-height: var(--btn-h-lg);
  padding-inline: var(--btn-pad-x-lg);
  font-size: var(--text-base);
}

.vy-btn-icon.vy-btn-sm,
/* app: the canvas zoom and pencil width buttons (S07) */
.canvas-toolbar button:is([data-canvas-zoom], [data-canvas-width]) {
  width: var(--btn-h-sm);
  padding: 0;
}

/* Line icons inside a button draw in the text colour (icons.js emits svg.icon). */
.vy-btn svg.icon,
.vy-btn-primary svg.icon,
.vy-btn-quiet svg.icon,
.vy-btn-ghost svg.icon,
.vy-btn-icon svg.icon {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Pressed toggles read as selected: accent tint, accent text. */
.vy-btn[aria-pressed="true"],
.vy-btn-quiet[aria-pressed="true"],
.vy-btn-ghost[aria-pressed="true"],
.vy-btn-icon[aria-pressed="true"],
/* app */
.button.secondary[aria-pressed="true"],
.composer-plus[aria-pressed="true"],
.composer-incognito[aria-pressed="true"],
/* app: the canvas toggle, the chosen tool and pencil width (S07) */
.canvas-toggle[aria-pressed="true"],
.canvas-toolbar button:not(.canvas-swatch)[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Busy: the control stays in place and says it is working. */
.vy-btn[aria-busy="true"],
.vy-btn-primary[aria-busy="true"],
.vy-btn-quiet[aria-busy="true"],
.vy-btn-ghost[aria-busy="true"],
.vy-btn-danger[aria-busy="true"],
/* app */
.button[aria-busy="true"],
.button.is-loading {
  cursor: progress;
  opacity: 0.72;
}

/* Disabled: half strength, no hover change. */
.vy-btn:disabled,
.vy-btn-primary:disabled,
.vy-btn-quiet:disabled,
.vy-btn-ghost:disabled,
.vy-btn-danger:disabled,
.vy-btn-icon:disabled,
.vy-btn[aria-disabled="true"],
.vy-btn-primary[aria-disabled="true"],
/* app */
button[disabled],
.button[disabled],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

/* V6 hover lift, on the canonical call-to-action looks only and only for a real pointer
   (R9: static cards and app adopters never lift). */
@media (hover: hover) {
  .vy-btn:not(:disabled, [aria-disabled="true"]):hover,
  .vy-btn-danger:not(:disabled, [aria-disabled="true"]):hover,
  .vy-btn-on-dark:not(:disabled, [aria-disabled="true"]):hover {
    transform: translateY(var(--lift));
    box-shadow: var(--shadow-lift);
  }

  .vy-btn-primary:not(:disabled, [aria-disabled="true"]):hover {
    transform: translateY(var(--lift));
    box-shadow: var(--shadow-lift-accent);
  }
}

/* ======================= Links ======================= */

.vy-link,
.vy-prose a,
.vy-legal a,
.vy-src-row a,
/* public: prose links, including the /what article and honest-card links V6 left unstyled (01 §7.4) */
:where(.vy-site) .sec-head .lead a,
:where(.vy-site) .faq details p a,
:where(.vy-site) .tiers-note a,
:where(.vy-site) .art p a,
:where(.vy-site) .art li a,
:where(.vy-site) .honest .card .ex a,
/* app */
.auth-link,
.auth-forgot {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.vy-link:hover,
.vy-prose a:hover,
.vy-legal a:hover,
.vy-src-row a:hover,
/* public */
:where(.vy-site) .sec-head .lead a:hover,
:where(.vy-site) .faq details p a:hover,
:where(.vy-site) .tiers-note a:hover,
:where(.vy-site) .art p a:hover,
:where(.vy-site) .art li a:hover,
:where(.vy-site) .honest .card .ex a:hover,
/* app */
.auth-link:hover,
.auth-forgot:hover {
  color: var(--link-strong);
}

/* ======================= Fields ======================= */

/* The element floor keeps the legacy scope (every input, so checkboxes keep their box) and sets
   no min-height: classed inputs that never set a height must not grow (critic C2). The edge is
   --field-ring, the 3:1 non-text floor. */
:where(textarea, input, select),
.vy-input,
.vy-select,
.vy-textarea {
  width: 100%;
  border: 1px solid var(--field-ring);
  border-radius: var(--field-radius);
  background: var(--panel);
  color: var(--ink);
  padding: 10px 11px;
}

:where(textarea),
.vy-textarea {
  min-height: 142px;
  resize: vertical;
}

.vy-input,
.vy-select,
/* app */
.auth-input {
  min-height: var(--field-h);
  padding: 0 14px;
}

.vy-textarea {
  min-height: 96px;
  padding: 10px 14px;
}

/* Firefox dims placeholders to 0.54 by default (critic H5). */
:where(input, textarea)::placeholder,
.vy-input::placeholder,
.vy-textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]),
.vy-input[aria-invalid="true"],
.vy-select[aria-invalid="true"],
.vy-textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

:where(input:disabled, select:disabled, textarea:disabled),
.vy-input:disabled,
.vy-select:disabled,
.vy-textarea:disabled {
  background: var(--panel-sunken);
  color: var(--muted);
}

/* Native choices follow the one accent. */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--accent);
}

.vy-field {
  display: grid;
  gap: 6px;
}

.vy-label,
/* app */
.auth-kicker,
/* app: the team modals' field captions (S09) */
.team-modal-groups legend {
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
}

.vy-hint,
.vy-field-error,
/* app */
.auth-field-error {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.vy-hint {
  color: var(--muted);
}

.vy-field-error,
/* app */
.auth-field-error {
  color: var(--danger);
  font-weight: var(--weight-strong);
}

/* ======================= Tabs (text with a thin underline, D23) ======================= */

.vy-tabs,
/* public: the /pricing audience switch, its state held by hidden radios (S13) */
:where(.vy-site) .ld-aud,
/* app */
.theme-toggle,
.policy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--ring);
}

.vy-tabs [role="tab"],
:where(.vy-site) .ld-aud-opt,
/* app */
.theme-toggle button,
.policy-tabs [role="tab"] {
  min-height: var(--nav-row-h);
  margin-bottom: -1px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-ui);
}

.vy-tabs [role="tab"]:hover,
:where(.vy-site) .ld-aud-opt:hover,
/* app */
.theme-toggle button:hover,
.policy-tabs [role="tab"]:hover {
  background: transparent;
  color: var(--ink);
}

.vy-tabs [role="tab"][aria-selected="true"],
#ld-aud-self:checked ~ .ld-aud [for="ld-aud-self"],
#ld-aud-biz:checked ~ .ld-aud [for="ld-aud-biz"],
/* app */
.theme-toggle button[aria-pressed="true"],
.policy-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* ======================= Menus and popovers (V6 burger menu) ======================= */

.vy-menu,
/* app */
.chat-menu-pop,
.account-menu,
.power-select-menu {
  display: grid;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-3), var(--edge);
}

.vy-menu-item,
/* app */
.chat-menu-item,
.account-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: var(--nav-row-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-ui);
  text-align: left;
  text-decoration: none;
}

.vy-menu-item:hover,
/* app */
.chat-menu-item:hover,
.account-menu-item:hover {
  background: var(--hover-wash);
}

.vy-menu-sep,
/* app */
.account-menu-sep {
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: var(--ring);
}

/* ======================= Nav rows (sidebar, account nav) ======================= */

/* A chat row carries its own hover wash (workspace-sidebar.css), so .chat-link joins the shape and
   the active look only. */
.vy-nav-row,
/* app */
.sidebar-action,
.drawer-link,
.chat-link,
.sidebar-project-head,
/* app: the account page's section list and the account modal's categories (S08) */
.account-nav a,
.account-modal-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--nav-row-h);
  padding: 0 12px;
  border-radius: var(--nav-row-radius);
  color: var(--text);
  font-size: var(--text-ui);
  text-decoration: none;
}

.vy-nav-row:hover,
/* app */
.sidebar-action:hover,
.drawer-link:hover:not([disabled], .active),
.sidebar-project-head:hover,
.account-nav a:hover,
.account-modal-nav button:hover {
  background: var(--hover-wash);
  color: var(--ink);
}

/* Active: a surface pill with a hairline, so it reads on the sunken sidebar and on paper alike. */
.vy-nav-row[aria-current="page"],
.vy-nav-row[aria-current="true"],
/* app */
.drawer-link.active,
.chat-link.active,
.account-nav a[aria-current="page"],
.account-modal-nav button[aria-current="true"] {
  background: var(--panel);
  box-shadow: var(--edge);
  color: var(--ink);
  font-weight: var(--weight-strong);
}

.vy-nav-row-dense {
  min-height: var(--nav-row-h-dense);
}

/* Rows fill their container, so their ring sits inside them (critic C14). */
.vy-nav-row:focus-visible,
.vy-menu-item:focus-visible {
  outline-offset: calc(-1 * var(--focus-width) - 1px);
}

/* ======================= Keyboard hint (Onest 500, D3) ======================= */

.vy-kbd,
/* app */
.sidebar-action-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: var(--panel-sunken);
  box-shadow: var(--edge);
  color: var(--muted);
  font: var(--weight-strong) var(--text-xs)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* ======================= Avatar (initials on the accent tint) ======================= */

.vy-avatar,
/* app */
.account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: var(--weight-strong) var(--text-sm)/1 var(--font-sans);
}