/* ============================================================
   Training Design System v1
   Industrial візуальна мова. Префікс: .ts-*
   Ізольовано від css/style.css (CRM).
   ============================================================ */

:root {
  --ts-brand-yellow:   #FFC107;
  --ts-brand-orange:   #FF6B1A;
  --ts-brand-ink:      #1A1A1A;
  --ts-bg:             #FFFFFF;
  --ts-surface:        #FAFAF8;
  --ts-surface-2:      #F1F1ED;
  --ts-border:         #E5E4DF;
  --ts-border-strong:  #1A1A1A;
  --ts-text:           #1A1A1A;
  --ts-text-muted:     #6B6B68;
  --ts-text-faint:     #9B9B96;
  --ts-info:           #2563EB;
  --ts-success:        #16A34A;
  --ts-warn:           #F59E0B;
  --ts-danger:         #DC2626;
  --ts-tip:            #9333EA;
  --ts-code-bg:        #1A1A1A;
  --ts-code-text:      #FFC107;
}

/* Dark theme. NOTE: brand-yellow/orange/ink intentionally inherit from :root
   (brand identity stays constant across themes). border-strong flips to yellow
   in dark — це навмисно, бо чорний на чорному не читається. */
[data-theme="dark"] {
  --ts-bg:             #0F0F0E;
  --ts-surface:        #1A1A18;
  --ts-surface-2:      #242421;
  --ts-border:         #38362F;
  --ts-border-strong:  #FFC107;
  --ts-text:           #F5F5F0;
  --ts-text-muted:     #A8A8A0;
  --ts-text-faint:     #6B6B68;
  --ts-info:           #60A5FA;
  --ts-success:        #4ADE80;
  --ts-warn:           #FBBF24;
  --ts-danger:         #F87171;
  --ts-tip:            #C084FC;
  --ts-code-bg:        #FFC107;
  --ts-code-text:      #1A1A1A;
}
/* System-fallback dark — для користувачів без manual override.
   ⚠ KEEP IN SYNC з [data-theme="dark"] вище. Якщо змінюєш одне — зміни обидва. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ts-bg: #0F0F0E; --ts-surface: #1A1A18; --ts-surface-2: #242421;
    --ts-border: #38362F; --ts-border-strong: #FFC107;
    --ts-text: #F5F5F0; --ts-text-muted: #A8A8A0; --ts-text-faint: #6B6B68;
    --ts-info: #60A5FA; --ts-success: #4ADE80; --ts-warn: #FBBF24;
    --ts-danger: #F87171; --ts-tip: #C084FC;
    --ts-code-bg: #FFC107; --ts-code-text: #1A1A1A;
  }
}

:root {
  --ts-font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --ts-font-mono: 'JetBrains Mono', 'Menlo', monospace;
  --ts-text-xs: 12px;   --ts-text-sm: 14px;  --ts-text-base: 16px;
  --ts-text-lg: 18px;   --ts-text-xl: 20px;  --ts-text-2xl: 24px;
  --ts-text-3xl: 32px;  --ts-text-4xl: 42px;
  --ts-w-regular: 400;  --ts-w-medium: 500;
  --ts-w-bold: 700;     --ts-w-black: 900;
  --ts-s-1: 4px; --ts-s-2: 8px; --ts-s-3: 12px;
  --ts-s-4: 16px; --ts-s-6: 24px; --ts-s-8: 32px;
  --ts-s-12: 48px; --ts-s-16: 64px; --ts-s-24: 96px;
  --ts-r-none: 0; --ts-r-sm: 2px; --ts-r-md: 4px; --ts-r-lg: 8px;
  --ts-shadow-sm: 0 1px 0 var(--ts-border);
  --ts-shadow-md: 0 0 0 1px var(--ts-border);
  --ts-shadow-lg: 0 0 0 2px var(--ts-border-strong);
  --ts-reader-max-width: 720px;
  --ts-reader-side-pad: 32px;
  --ts-transition: 150ms ease-out;
}

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src: url('/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src: url('/fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap;
  src: url('/fonts/Inter-Black.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }

.ts-reader { font-family: var(--ts-font-body); font-size: var(--ts-text-base);
  line-height: 1.7; color: var(--ts-text); background: var(--ts-bg); }
.ts-h1 { font-size: var(--ts-text-4xl); line-height: 1.15; font-weight: var(--ts-w-black);
  color: var(--ts-brand-ink); letter-spacing: -0.02em;
  margin: 0 0 var(--ts-s-3) 0; text-transform: uppercase; }
.ts-h2 { font-size: var(--ts-text-3xl); line-height: 1.25; font-weight: var(--ts-w-bold);
  color: var(--ts-brand-ink); margin: var(--ts-s-12) 0 var(--ts-s-4) 0;
  padding-bottom: var(--ts-s-2); border-bottom: 2px solid var(--ts-brand-yellow); }
.ts-h3 { font-size: var(--ts-text-2xl); line-height: 1.35; font-weight: var(--ts-w-bold);
  margin: var(--ts-s-8) 0 var(--ts-s-3) 0; }
.ts-h4 { font-size: var(--ts-text-xl); line-height: 1.4; font-weight: var(--ts-w-bold);
  margin: var(--ts-s-6) 0 var(--ts-s-2) 0; }
.ts-body p { margin: 0 0 var(--ts-s-4) 0; }
.ts-lead { font-size: var(--ts-text-lg); line-height: 1.6; font-style: italic;
  color: var(--ts-text-muted); margin: 0 0 var(--ts-s-6) 0; }
.ts-meta { font-size: var(--ts-text-xs); color: var(--ts-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; }
.ts-code { font-family: var(--ts-font-mono); font-size: 0.92em;
  background: var(--ts-code-bg); color: var(--ts-code-text);
  padding: 2px 6px; border-radius: var(--ts-r-sm); font-weight: var(--ts-w-medium); }

.ts-hero { padding-bottom: var(--ts-s-6); margin-bottom: var(--ts-s-8);
  border-bottom: 2px solid var(--ts-brand-yellow); }
.ts-breadcrumbs { font-size: var(--ts-text-xs); color: var(--ts-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--ts-s-3); }
.ts-breadcrumbs a { color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--ts-text-faint); }
.ts-breadcrumbs a:hover { color: var(--ts-text); }
.ts-breadcrumbs .ts-bc-sep { margin: 0 var(--ts-s-2); color: var(--ts-text-faint); }
.ts-hero-subtitle { font-size: var(--ts-text-xl); color: var(--ts-text-muted);
  font-weight: var(--ts-w-regular); margin: 0 0 var(--ts-s-4) 0; line-height: 1.4; }
.ts-hero-meta { display: flex; flex-wrap: wrap; gap: var(--ts-s-4);
  font-size: var(--ts-text-sm); color: var(--ts-text-muted); }
.ts-hero-meta > span { display: inline-flex; align-items: center; gap: 6px; }

.ts-callout { display: grid; grid-template-columns: 4px 28px 1fr; gap: var(--ts-s-3);
  background: var(--ts-surface); border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-md); padding: var(--ts-s-4); margin: var(--ts-s-6) 0;
  position: relative; overflow: hidden; }
.ts-callout::before { content: ''; grid-row: 1 / -1;
  background: var(--ts-callout-accent, var(--ts-info)); border-radius: var(--ts-r-sm); }
.ts-callout-icon { font-size: 22px; line-height: 1; align-self: start;
  color: var(--ts-callout-accent, var(--ts-info)); }
.ts-callout-body { font-size: var(--ts-text-base); line-height: 1.6; }
.ts-callout-body > :first-child { margin-top: 0; }
.ts-callout-body > :last-child { margin-bottom: 0; }
.ts-callout-title { font-weight: var(--ts-w-bold);
  margin-bottom: var(--ts-s-2); color: var(--ts-text); }
.ts-callout--info    { --ts-callout-accent: var(--ts-info); }
.ts-callout--tip     { --ts-callout-accent: var(--ts-tip); }
.ts-callout--warn    { --ts-callout-accent: var(--ts-warn); }
.ts-callout--danger  { --ts-callout-accent: var(--ts-danger); }
.ts-callout--success { --ts-callout-accent: var(--ts-success); }

.ts-tldr { background: var(--ts-brand-yellow); color: var(--ts-brand-ink);
  border: 2px solid var(--ts-brand-ink); border-radius: var(--ts-r-md);
  padding: var(--ts-s-6); margin: var(--ts-s-8) 0; }
.ts-tldr-header { font-size: var(--ts-text-xs); font-weight: var(--ts-w-black);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--ts-s-4); }
.ts-tldr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ts-s-3); margin-bottom: var(--ts-s-4); }
.ts-tldr-grid:last-child { margin-bottom: 0; }
.ts-tldr p { margin: 0 0 var(--ts-s-2) 0; font-size: var(--ts-text-base); }
.ts-tldr p:last-child { margin-bottom: 0; }
[data-theme="dark"] .ts-tldr { color: var(--ts-brand-ink); border-color: var(--ts-brand-ink); }

.ts-kpi { background: var(--ts-bg); border: 2px solid var(--ts-brand-ink);
  border-radius: var(--ts-r-md); padding: var(--ts-s-3) var(--ts-s-4); text-align: left; }
.ts-kpi-value { font-family: var(--ts-font-mono); font-size: var(--ts-text-3xl);
  font-weight: var(--ts-w-black); line-height: 1; color: var(--ts-brand-ink);
  margin-bottom: var(--ts-s-1); }
.ts-kpi-label { font-size: var(--ts-text-xs); font-weight: var(--ts-w-bold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ts-text-muted); }
.ts-kpi--accent { background: var(--ts-brand-yellow); }
.ts-kpi--accent .ts-kpi-label { color: var(--ts-brand-ink); }

.ts-badge { display: inline-flex; align-items: center; padding: 2px 8px;
  font-size: var(--ts-text-xs); font-weight: var(--ts-w-bold);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--ts-surface-2); color: var(--ts-text);
  border-radius: var(--ts-r-sm); border: 1px solid var(--ts-border); }
.ts-badge--success { background: var(--ts-success); color: #fff; border-color: transparent; }
.ts-badge--warn    { background: var(--ts-warn);    color: #fff; border-color: transparent; }
.ts-badge--danger  { background: var(--ts-danger);  color: #fff; border-color: transparent; }
.ts-badge--info    { background: var(--ts-info);    color: #fff; border-color: transparent; }
.ts-badge--accent  { background: var(--ts-brand-yellow); color: var(--ts-brand-ink); border-color: transparent; }

.ts-tabs { margin: var(--ts-s-6) 0; }
.ts-tabs-list { display: flex; gap: 0;
  border-bottom: 2px solid var(--ts-border); margin-bottom: var(--ts-s-4); }
.ts-tab { padding: var(--ts-s-2) var(--ts-s-4); background: transparent;
  border: 0; border-bottom: 3px solid transparent;
  font-family: var(--ts-font-body); font-size: var(--ts-text-sm);
  font-weight: var(--ts-w-medium); color: var(--ts-text-muted);
  cursor: pointer; margin-bottom: -2px; transition: var(--ts-transition); }
.ts-tab:hover { color: var(--ts-text); }
.ts-tab[aria-selected="true"] { color: var(--ts-text);
  border-bottom-color: var(--ts-brand-yellow); font-weight: var(--ts-w-bold); }
.ts-tab-panel { display: none; }
.ts-tab-panel[data-active="true"] { display: block; }

.ts-faq { border: 1px solid var(--ts-border); border-radius: var(--ts-r-md);
  background: var(--ts-surface); margin-bottom: var(--ts-s-2); }
.ts-faq summary { list-style: none; cursor: pointer;
  padding: var(--ts-s-3) var(--ts-s-4); font-weight: var(--ts-w-bold);
  display: flex; justify-content: space-between; align-items: center; gap: var(--ts-s-3); }
.ts-faq summary::-webkit-details-marker { display: none; }
.ts-faq summary::after { content: '+'; font-family: var(--ts-font-mono);
  font-size: var(--ts-text-xl); font-weight: var(--ts-w-black);
  color: var(--ts-brand-orange); transition: var(--ts-transition); }
.ts-faq[open] summary::after { content: '−'; }
.ts-faq-body { padding: 0 var(--ts-s-4) var(--ts-s-4) var(--ts-s-4);
  font-size: var(--ts-text-base); line-height: 1.6; }

.ts-table-wrap { overflow-x: auto; margin: var(--ts-s-4) 0;
  border: 2px solid var(--ts-border-strong); border-radius: var(--ts-r-md); }
.ts-table { width: 100%; border-collapse: collapse; font-size: var(--ts-text-sm); }
.ts-table thead { background: var(--ts-brand-ink); color: var(--ts-brand-yellow); }
[data-theme="dark"] .ts-table thead { background: var(--ts-brand-yellow); color: var(--ts-brand-ink); }
.ts-table th { text-align: left; padding: var(--ts-s-3) var(--ts-s-4);
  font-weight: var(--ts-w-bold); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: var(--ts-text-xs); }
.ts-table td { padding: var(--ts-s-3) var(--ts-s-4);
  border-top: 1px solid var(--ts-border); vertical-align: top; }
.ts-table tbody tr:hover { background: var(--ts-surface); }
.ts-table code { font-family: var(--ts-font-mono); font-size: 0.92em;
  background: var(--ts-code-bg); color: var(--ts-code-text);
  padding: 1px 5px; border-radius: var(--ts-r-sm); }

.ts-table--decision td:first-child { background: var(--ts-surface-2);
  font-weight: var(--ts-w-bold); border-right: 2px solid var(--ts-border-strong); }
.ts-table--decision td:last-child { background: var(--ts-bg);
  border-left: 4px solid var(--ts-brand-yellow); }

.ts-sources { margin-top: var(--ts-s-12); padding: var(--ts-s-4) var(--ts-s-6);
  background: var(--ts-surface-2); border-top: 4px solid var(--ts-brand-ink);
  border-radius: 0 0 var(--ts-r-md) var(--ts-r-md); }
.ts-sources-title { font-size: var(--ts-text-xs); font-weight: var(--ts-w-black);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ts-text-muted); margin-bottom: var(--ts-s-2); }
.ts-sources ul { font-size: var(--ts-text-sm); color: var(--ts-text-muted);
  margin: 0; padding-left: var(--ts-s-6); }
.ts-sources li { margin-bottom: var(--ts-s-1); }

.ts-hero-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ts-s-3); margin: var(--ts-s-4) 0 var(--ts-s-8) 0; }
.ts-hero-gallery img { width: 100%; height: 140px; object-fit: contain;
  background: var(--ts-surface); border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-md); padding: var(--ts-s-2); }

.ts-figure { margin: var(--ts-s-6) 0; text-align: center; }
.ts-figure img { max-width: 100%; border-radius: var(--ts-r-md);
  border: 1px solid var(--ts-border); }
.ts-figure figcaption { font-size: var(--ts-text-sm); color: var(--ts-text-muted);
  font-style: italic; margin-top: var(--ts-s-2); }

.ts-toc { position: sticky; top: var(--ts-s-6); align-self: start;
  font-size: var(--ts-text-sm); max-height: calc(100vh - 100px); overflow-y: auto; }
.ts-toc-title { font-size: var(--ts-text-xs); font-weight: var(--ts-w-black);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ts-text-muted); margin-bottom: var(--ts-s-3);
  padding-bottom: var(--ts-s-2); border-bottom: 1px solid var(--ts-border); }
.ts-toc ul { list-style: none; padding: 0; margin: 0; }
.ts-toc li { margin-bottom: var(--ts-s-1); }
.ts-toc li.ts-toc-h3 { padding-left: var(--ts-s-4); font-size: var(--ts-text-xs); }
.ts-toc a { display: block; padding: var(--ts-s-1) var(--ts-s-2);
  color: var(--ts-text-muted); text-decoration: none;
  border-left: 2px solid transparent; line-height: 1.4;
  transition: var(--ts-transition); }
.ts-toc a:hover { color: var(--ts-text); }
.ts-toc a.ts-active { color: var(--ts-brand-ink);
  border-left-color: var(--ts-brand-yellow); background: var(--ts-surface);
  font-weight: var(--ts-w-bold); }
[data-theme="dark"] .ts-toc a.ts-active { color: var(--ts-brand-yellow); }
.ts-toc-divider { border-top: 1px solid var(--ts-border); margin: var(--ts-s-4) 0; }
.ts-toc-actions { display: flex; flex-direction: column; gap: var(--ts-s-2); }
.ts-toc-action { display: flex; align-items: center; gap: var(--ts-s-2);
  padding: var(--ts-s-2); background: transparent;
  border: 1px solid var(--ts-border); border-radius: var(--ts-r-sm);
  color: var(--ts-text); font-family: var(--ts-font-body); font-size: var(--ts-text-sm);
  cursor: pointer; width: 100%; text-align: left; transition: var(--ts-transition); }
.ts-toc-action:hover { background: var(--ts-surface); border-color: var(--ts-border-strong); }

.ts-reading-progress { position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: transparent; z-index: 9999; pointer-events: none; }
.ts-reading-progress-fill { height: 100%; width: 0%;
  background: var(--ts-brand-yellow); transition: width 60ms linear; }

.ts-quick-facts { position: sticky; top: var(--ts-s-6); align-self: start;
  font-size: var(--ts-text-sm); }
.ts-quick-facts-title { font-size: var(--ts-text-xs); font-weight: var(--ts-w-black);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ts-text-muted); margin-bottom: var(--ts-s-3); }
.ts-quick-facts .ts-kpi { margin-bottom: var(--ts-s-2); }

.ts-rating-widget { position: fixed; bottom: var(--ts-s-6); right: var(--ts-s-6);
  background: var(--ts-bg); border: 2px solid var(--ts-brand-ink);
  border-radius: var(--ts-r-md); padding: var(--ts-s-3) var(--ts-s-4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: var(--ts-s-3);
  font-size: var(--ts-text-sm); z-index: 100;
  opacity: 0; transform: translateY(20px);
  transition: opacity 200ms ease, transform 200ms ease; }
.ts-rating-widget.ts-visible { opacity: 1; transform: translateY(0); }
.ts-rating-btn { background: transparent; border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-sm); padding: 4px 10px;
  font-size: var(--ts-text-base); cursor: pointer; transition: var(--ts-transition); }
.ts-rating-btn:hover { background: var(--ts-surface); }
.ts-rating-btn--up.ts-active   { background: var(--ts-success); color: #fff; border-color: transparent; }
.ts-rating-btn--down.ts-active { background: var(--ts-danger);  color: #fff; border-color: transparent; }

.ts-reader-page { background: var(--ts-bg); color: var(--ts-text); min-height: 100vh; }
.ts-reader-grid { display: grid;
  grid-template-columns: 220px minmax(0, var(--ts-reader-max-width)) 240px;
  gap: var(--ts-s-8); max-width: 1280px; margin: 0 auto;
  padding: var(--ts-s-8) var(--ts-s-6); align-items: start; }
.ts-reader-grid.ts-reader-grid--no-quick {
  grid-template-columns: 220px minmax(0, calc(var(--ts-reader-max-width) + 80px)); }
.ts-reader-content { min-width: 0; }

@media (max-width: 1199px) {
  .ts-reader-grid { grid-template-columns: 200px minmax(0, 1fr); max-width: 1000px; }
  .ts-quick-facts { display: none; }
}
@media (max-width: 767px) {
  .ts-reader-grid { grid-template-columns: 1fr; gap: var(--ts-s-4); padding: var(--ts-s-4); }
  .ts-toc { display: none; }
  .ts-h1 { font-size: 28px; line-height: 1.2; }
  .ts-h2 { font-size: 22px; }
  .ts-tldr-grid { grid-template-columns: 1fr; }
  .ts-toc-fab { position: fixed; bottom: var(--ts-s-6); left: var(--ts-s-6);
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ts-brand-yellow); color: var(--ts-brand-ink);
    border: 2px solid var(--ts-brand-ink); cursor: pointer;
    font-size: 20px; display: flex; align-items: center;
    justify-content: center; z-index: 50; }
  .ts-toc-mobile-open { display: block !important; position: fixed;
    bottom: 0; left: 0; right: 0; background: var(--ts-bg);
    border-top: 2px solid var(--ts-brand-ink); padding: var(--ts-s-6);
    max-height: 70vh; overflow-y: auto; z-index: 60;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
}
@media (min-width: 768px) { .ts-toc-fab { display: none; } }

@media print {
  .ts-toc, .ts-quick-facts, .ts-reading-progress,
  .ts-rating-widget, .ts-toc-fab, header, nav { display: none !important; }
  .ts-reader-grid { grid-template-columns: 1fr; padding: 0; max-width: none; }
  .ts-reader-content { max-width: 100%; }
  .ts-reader-page { background: #fff !important; color: #000 !important; }
  .ts-tldr { background: #f5f5f5 !important; color: #000 !important; border-color: #000 !important; }
  .ts-h2 { border-bottom-color: #000 !important; }
  .ts-callout { break-inside: avoid; }
  .ts-reader-content::after { content: 'Джерело: ' attr(data-canonical-url);
    display: block; margin-top: 30px; padding-top: 10px;
    border-top: 1px solid #000; font-size: 11px; color: #666; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}