/* ─── Витрина компонентов ───────────────────────────
     Оформление самих страниц-витрин (не часть дизайн-системы продукта).
     Задача — показать компонент во всех состояниях на нейтральном фоне,
     как док-страницы в Figma: карточка-обёртка + подписи осей. ─── */
  body.showcase{background:#eef0f4;overflow:auto;min-width:0}
  .sc{max-width:1120px;margin:0 auto;padding:40px 32px 80px}
  .sc-head{margin-bottom:32px}
  .sc-head .lvl{display:inline-block;padding:2px 8px;border-radius:6px;
    font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
  .sc-head .lvl--atom{background:#cfdfff;color:#102046}
  .sc-head .lvl--molecule{background:#ede3fe;color:#280b42}
  .sc-head .lvl--organism{background:#e2f6e9;color:#1c6b3c}
  .sc-head .lvl--pattern{background:#f1f3f6;color:#667085}
  .sc-head h1{margin-top:10px;font-size:28px;line-height:34px;font-weight:600}
  .sc-head p{margin-top:6px;font-size:14px;line-height:20px;color:var(--text-secondary);max-width:70ch}
  .sc-head .figma{margin-top:8px;font-size:13px;color:var(--text-tertiary)}

  .sc-sec{margin-top:28px}
  .sc-sec > h2{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
    color:var(--text-tertiary);margin-bottom:10px}
  .sc-card{background:var(--surface-default);border:1px solid var(--border-panel);border-radius:12px;padding:20px}
  /* строка примера: подпись слева, образцы справа */
  .sc-row{display:flex;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
  .sc-row:last-child{border-bottom:0}
  .sc-row > .lbl{flex:none;width:190px;font-size:13px;line-height:18px;color:var(--text-secondary)}
  .sc-row > .lbl code{font-size:12px;color:var(--text-tertiary)}
  .sc-samples{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
  /* тёмная подложка для plate-кнопок: они живут поверх фона рабочей области */
  .sc-samples--onbg{background:linear-gradient(120deg,#93a7c9,#c3cede);border-radius:10px;padding:12px 16px}

  /* сетка иконок спрайта */
  .ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:4px}
  .ic-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;
    border-radius:10px;color:var(--text-primary);transition:background .15s}
  .ic-cell:hover{background:var(--surface-hover)}
  .ic-cell figcaption{font-size:11px;line-height:14px;color:var(--text-tertiary);
    text-align:center;word-break:break-word}

  /* карточка с живым организмом (таблица, карточка записи): компоненту нужна
     ограниченная высота и белый фон рабочей области */
  .sc-card--table{padding:16px;display:flex;flex-direction:column;max-height:620px}
  .sc-card--table .tbl{margin-top:0}
  /* справочник токенов: плашка цвета + значение */
  .tok-chip{flex:none;width:28px;height:28px;border-radius:8px;
    border:1px solid var(--border-panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .tok-val{font-size:12.5px;color:var(--text-secondary);white-space:nowrap}

  /* две панели рядом: одна и та же молекула в разных состояниях */
  .sc-card--panels{display:flex;gap:16px;padding:16px}
  .sc-panel-demo{flex:1;min-width:0;height:340px;display:flex;
    border:1px solid var(--border-panel);border-radius:10px;overflow:hidden}
  .sc-panel-demo .right-panel{width:100%;border-left:0}

  .sc-card--card{padding:16px;display:flex;flex-direction:column;max-height:720px}
  .sc-card--card .card-view{margin:0}
  .sc-card--card .card-page{padding:0}
  .sc-nav a[aria-current]{border-color:var(--accent-text);color:var(--accent-text);font-weight:500}

  /* срезы раздела на хабе */
  .sc-slice{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;
    background:var(--border-subtle);font-size:13px;color:var(--text-secondary);transition:background .15s,color .15s}
  .sc-slice:hover{background:var(--accent-surface);color:var(--accent-text)}

  .sc-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .sc-nav a{padding:6px 12px;border-radius:8px;background:var(--surface-default);
    border:1px solid var(--border-panel);font-size:13.5px;color:var(--text-primary)}
  .sc-nav a:hover{border-color:var(--accent-text);color:var(--accent-text)}
  .sc-note{margin-top:10px;font-size:13px;line-height:18px;color:var(--text-tertiary)}