/* ═══════════════════════════════════════════════════════════
   FinancialDS — Shared Component Utilities
   Shared across all preview pages. Requires tokens.css.
   ═══════════════════════════════════════════════════════════ */

@import url('css/grid.css');
@import url('css/spec-tables.css');

/* ── Status tag (Tag SM / Solid) ───────────────────────────── */
.stag {
  display: inline-flex; align-items: center; gap: var(--ds-tag-sm-gap);
  height: var(--ds-tag-sm-h); padding: 0 var(--ds-tag-sm-px);
  border-radius: var(--ds-tag-sm-r); font-family: var(--ds-font);
  font-size: var(--ds-tag-sm-fs); font-weight: 500;
  letter-spacing: var(--ds-tag-sm-ls); line-height: var(--ds-tag-sm-lh);
  white-space: nowrap; flex-shrink: 0;
}
.stag [data-lucide] {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
  width: var(--ds-icon-sm); height: var(--ds-icon-sm);
  stroke-width: var(--ds-icon-stroke);
  stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.stag-stable   { background: var(--ds-pos-50);  color: var(--ds-pos-default); }
.stag-progress { background: var(--ds-info-50); color: var(--ds-info-700); }
.stag-planned  { background: var(--ds-nb-100);  color: var(--ds-nb-500); }

/* ── Link Text component (shared) ──────────────────────────── */
.lnk {
  display: inline-flex; align-items: center;
  cursor: pointer; text-decoration: underline;
  text-decoration-thickness: var(--ds-link-underline-thickness);
  text-underline-offset: var(--ds-link-underline-offset);
  font-family: var(--ds-font); font-weight: 500;
  border-radius: 2px; transition: color .12s;
}
.lnk-sm { font-size: var(--ds-lnk-sm-fs); line-height: var(--ds-lnk-sm-lh); gap: var(--ds-lnk-sm-gap); }
.lnk-md { font-size: var(--ds-lnk-md-fs); line-height: var(--ds-lnk-md-lh); gap: var(--ds-lnk-md-gap); }
.lnk-lg { font-size: var(--ds-lnk-lg-fs); line-height: var(--ds-lnk-lg-lh); gap: var(--ds-lnk-lg-gap); }
.lnk [data-lucide] {
  display: inline-block; flex-shrink: 0;
  stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.lnk-sm [data-lucide] { width: var(--ds-lnk-sm-icon); height: var(--ds-lnk-sm-icon); stroke-width: var(--ds-lnk-sm-stroke); }
.lnk-md [data-lucide] { width: var(--ds-lnk-md-icon); height: var(--ds-lnk-md-icon); stroke-width: var(--ds-lnk-md-stroke); }
.lnk-lg [data-lucide] { width: var(--ds-lnk-lg-icon); height: var(--ds-lnk-lg-icon); stroke-width: var(--ds-lnk-lg-stroke); }
.lnk-brand   { color: var(--ds-brand-500); }
.lnk-brand:hover { color: var(--ds-brand-700); }
.lnk-info    { color: var(--ds-info-500); }
.lnk-info:hover  { color: var(--ds-info-700); }
.lnk-ul-hover { text-decoration: none; }
.lnk-ul-hover:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--ds-link-underline-thickness);
  text-underline-offset: var(--ds-link-underline-offset);
}

/* ── Prop chip (Tag SM / Outline / Neutral, metadata label) ── */
.prop {
  display: inline-flex; align-items: center; gap: var(--ds-tag-sm-gap);
  height: var(--ds-tag-sm-h); padding: 0 var(--ds-tag-sm-px);
  background: var(--ds-nba-30); border: none;
  border-radius: var(--ds-tag-sm-r); font-family: var(--ds-font);
  font-size: var(--ds-tag-sm-fs); font-weight: 500;
  letter-spacing: var(--ds-tag-sm-ls); line-height: var(--ds-tag-sm-lh);
  color: var(--ds-neutral-fill); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   DOCUMENTATION SECTIONS (shared — path B, 2026-06-10)
   Извлечено из inline <style> богатых превью (radio/tabs/input) в общий
   источник, чтобы доковые секции работали на ЛЮБОЙ странице компонента.
   Значения verbatim из radio.html. Требует tokens.css + css/grid.css (.ds-grid*).
   Цвета через theme-адаптивные токены → dark работает автоматически.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section label row (h2 + meta) ── */
.label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); }
.label-row h2 { font-size: var(--ds-text-2xl); font-weight: 700; letter-spacing: -0.012em; }
.label-row .meta { font-size: var(--ds-text-xs); color: var(--ds-text-tertiary); font-weight: 500; }

/* ── Grid tables (keyboard / spec rows) ── */
.grid-table { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; }
.gt-head { display: grid; padding: 10px 24px; background: var(--ds-page-bg); border-bottom: 1px solid var(--ds-border); }
.gt-row  { display: grid; padding: 14px 24px; border-bottom: 1px solid var(--ds-border); align-items: center; }
.gt-row:last-child { border-bottom: none; }
.gt-head div, .gt-label { font-size: var(--ds-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-text-tertiary); }
.gt-cell { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; align-items: center; }

/* ── Rule cards (Когда / Чего избегать) ── */
.rc { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 24px; }
.rc h3 { font-size: var(--ds-text-md); font-weight: 700; margin-bottom: 10px; }
.rc ul { font-size: var(--ds-text-sm); color: var(--ds-text-tertiary); line-height: 1.6; padding-left: 18px; margin-top: 8px; }
.rc ul li { margin-bottom: var(--ds-space-1); }
.rtag { display: inline-flex; padding: 2px var(--ds-space-2); border-radius: var(--ds-radius-xs); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--ds-space-3); }
.rt-ok   { background: var(--ds-pos-50);  color: var(--ds-pos-500); }
.rt-warn { background: var(--ds-neg-50);  color: var(--ds-neg-500); }

/* ── API / Docs tables (hidden in presentation mode via .section-api) ── */
.api-block { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; margin-bottom: var(--ds-space-4); }
.api-block-title { font-size: var(--ds-text-base); font-weight: 700; padding: 14px 24px; background: var(--ds-page-bg); border-bottom: 1px solid var(--ds-border); }
.api-row { display: grid; grid-template-columns: 180px 140px 100px 1fr; padding: 10px 24px; border-bottom: 1px solid var(--ds-border); align-items: baseline; gap: 8px; }
.api-row:last-child { border-bottom: none; }
.api-head { background: var(--ds-page-bg); font-size: var(--ds-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-text-tertiary); }
.api-prop { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-brand-500); font-weight: 600; }
.api-type { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-info-600); }
.api-def  { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-text-tertiary); }
.api-desc { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); line-height: 1.45; }
.req-badge { display: inline-flex; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ds-warn-100); color: var(--ds-warn-700); margin-left: 4px; vertical-align: middle; }

/* ── A11y cards ── */
.a11y-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 20px 24px; }
.a11y-card h3 { font-size: var(--ds-text-base); font-weight: 700; margin-bottom: 10px; }
.a11y-card p, .a11y-card li { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); line-height: 1.55; }
.a11y-card ul { padding-left: 18px; }
.a11y-card ul li { margin-bottom: 4px; }
.a11y-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 2px 6px; border-radius: 3px; margin-bottom: 10px; display: inline-block; }
.a11y-wcag  { background: var(--ds-surface-pos-low);  color: var(--ds-pos-soft-text); }
.a11y-aria  { background: var(--ds-surface-info-low);  color: var(--ds-info-soft-text); }
.a11y-kb    { background: var(--ds-surface-brand-low); color: var(--ds-brand-soft-text); }
.a11y-focus { background: var(--ds-surface-warn-low);  color: var(--ds-warn-soft-text); }

/* ── Inline code ── */
code { font-family: var(--ds-font-mono); font-size: 0.88em; background: var(--ds-page-bg); border: 1px solid var(--ds-border); padding: 1px 5px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   Handles the inversion of neutral-fill (#222629 → #FFFFFF in dark) and
   dark-appropriate semantic palette for component backgrounds/text.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Link — dark underline color ────────────────────────────────────── */
[data-theme="dark"] .lnk-ul-hover:hover { text-decoration-color: var(--ds-text-primary); }

/* ── Status tags — dark semantic backgrounds ─────────────────────────── */
[data-theme="dark"] .stag-stable   { background: var(--ds-pos-50);  color: var(--ds-pos-500); }
[data-theme="dark"] .stag-progress { background: var(--ds-info-50); color: var(--ds-info-700); }
[data-theme="dark"] .stag-planned  { background: var(--ds-nba-20);  color: var(--ds-text-tertiary); }

/* ── Neutral Solid (Button / Tag / Badge) — white fill needs dark text ── */
[data-theme="dark"] .btn-neutral-solid              { color: var(--ds-text-invert); }
[data-theme="dark"] .btn-neutral-solid.is-disabled  { color: var(--ds-disabled-text); }
[data-theme="dark"] .ts-neutral                     { color: var(--ds-text-invert); }
[data-theme="dark"] .tag-active-neutral             { color: var(--ds-text-invert); }
[data-theme="dark"] .bs-neutral                     { color: var(--ds-text-invert); }
[data-theme="dark"] .dot-neutral                    { background: var(--ds-neutral-fill); }

/* ── Chip neutral active — white fill needs dark text ────────────────── */
[data-theme="dark"] .ch-sn.active                   { color: var(--ds-text-invert); }
[data-theme="dark"] .ch-sn.active:hover             { color: var(--ds-text-invert); }

/* ── Light Invert: neutral-fill flips to #FFFFFF → text must follow ─── */
.theme-invert .btn-neutral-solid              { color: var(--ds-text-invert); }
.theme-invert .btn-neutral-solid.is-disabled  { color: var(--ds-disabled-text); }
.theme-invert .ts-neutral                     { color: var(--ds-text-invert); }
.theme-invert .tag-active-neutral             { color: var(--ds-text-invert); }
.theme-invert .bs-neutral                     { color: var(--ds-text-invert); }
.theme-invert .ch-sn.active                   { color: var(--ds-text-invert); }
.theme-invert .ch-sn.active:hover             { color: var(--ds-text-invert); }
.theme-invert .sc-active                      { background: var(--ds-neutral-fill); color: var(--ds-text-invert); }

/* ── Select Control — full dark mode ─────────────────────────────────── */
[data-theme="dark"] .sc                                      { background: var(--ds-nba-20); }
[data-theme="dark"] .sc-part                                 { color: var(--ds-text-tertiary); }
[data-theme="dark"] .sc-part:hover:not(.sc-active):not(.sc-dis) {
  background: var(--ds-nba-30); color: var(--ds-text-primary);
}
[data-theme="dark"] .sc-active {
  background: var(--ds-neutral-fill);
  color: var(--ds-text-invert);
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
[data-theme="dark"] .sc-active:hover        { background: var(--ds-neutral-fill-hover); color: var(--ds-text-invert); }
[data-theme="dark"] .sc-hc .sc-active       { background: var(--ds-neutral-fill); color: var(--ds-text-invert); }
[data-theme="dark"] .sc-hc .sc-active:hover { background: var(--ds-neutral-fill-hover); color: var(--ds-text-invert); }
[data-theme="dark"] .sc-bdg                 { background: var(--ds-nba-30); color: var(--ds-text-secondary); }

/* ── Interactive field icon button ─────────────────────────────
   Shared base for clear / eye-toggle / any right-side icon btn.
   Add this class alongside the component-specific class in HTML.
   Size (width/height) is set per-component via its own class.   */
.ds-field-icon-btn {
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  color:           var(--ds-icon-tertiary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  line-height:     1;
  border-radius:   var(--ds-field-icon-btn-radius);
  transition:      color 0.15s, background 0.15s;
}
.ds-field-icon-btn:hover  { background: var(--ds-field-icon-btn-hover-bg); }
.ds-field-icon-btn:active { color: var(--ds-field-icon-btn-active-color); background: var(--ds-field-icon-btn-active-bg); }

/* ── Presentation mode: hide developer-facing API sections ──── */
.section-api { display: none; }