/* Только размещение и подписи образцов. Компоненты берутся из общих CSS приложения. */
body.catalog { background: var(--paper-2); }
.catalog [hidden] { display: none !important; }
.catalog-wrap { max-inline-size: 1440px; margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); }
.catalog-head { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.catalog-head h1 { margin-block: var(--sp-2); }
.catalog-site-nav { margin-block-end: var(--sp-5); }
.catalog-head p { max-inline-size: 64ch; }
.catalog-theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.catalog-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-block: var(--sp-5) var(--sp-7); }
.catalog-toc a { color: var(--ink); font-size: var(--fs-meta); text-underline-offset: 4px; padding-block: var(--sp-1); }
.catalog-shortcut { display: none; }
.catalog-section { margin-block: var(--sp-7); scroll-margin-block-start: var(--sp-5); }
.catalog-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-5); }
.catalog-section-head h2 { font-size: var(--fs-card); font-weight: 700; letter-spacing: var(--ls-tight); }
.catalog-section-head .stamp { color: var(--accent); }
.catalog-section-head p { flex-basis: 100%; max-inline-size: 74ch; color: var(--ink-2); font-size: var(--fs-meta); margin: 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-5); align-items: start; }
.catalog-grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.catalog-frame { min-inline-size: 0; }
.catalog-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-2); font-size: var(--fs-meta); font-weight: 700; }
.catalog-label code { color: var(--ink-2); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.catalog-sample { min-inline-size: 0; padding: var(--sp-5); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); background: var(--paper); }
.catalog-sample > :first-child { margin-block-start: 0; }
.catalog-sample > :last-child { margin-block-end: 0; }
.catalog-rule { margin: var(--sp-3) 0 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.catalog-rule strong { color: var(--ink); font-weight: 600; }
.catalog-stack { display: grid; gap: var(--sp-4); }
.catalog-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.catalog-mini-label { color: var(--ink-2); font-size: var(--fs-meta); font-weight: 500; margin-block-end: var(--sp-2); }
.catalog-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.catalog-color { display: grid; gap: var(--sp-1); font-size: var(--fs-meta); }
.catalog-color i { display: block; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-slip); background: var(--swatch); }
.catalog-color code { font-size: 12px; color: var(--ink-2); }
.catalog-type { display: grid; gap: var(--sp-4); }
.catalog-type > div { display: grid; gap: var(--sp-1); }
.catalog-space { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--sp-3); font-size: var(--fs-meta); }
.catalog-space i { display: block; width: var(--size); height: 8px; background: var(--accent); }
.catalog-rhythm { display: grid; gap: var(--sp-4); }
.catalog-measure { border-inline-start: 2px solid var(--line-strong); padding-inline-start: var(--sp-3); }
.catalog-measure > span { display: block; color: var(--ink-2); font-size: var(--fs-meta); }
.catalog-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: var(--sp-2); padding-block: var(--sp-2); border-block-end: 1px solid var(--line); font-size: var(--fs-small); }
.catalog-step:last-child { border: 0; }
.catalog-step b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.catalog-step small { display: block; color: var(--ink-2); font-size: var(--fs-meta); }
.catalog-sample fieldset { min-inline-size: 0; }
.catalog-sample .sheet { max-inline-size: none; margin: 0; }
.catalog-sample .tabbar { position: static; display: block; margin-inline: calc(-1 * var(--sp-5)); margin-block-end: calc(-1 * var(--sp-5)); padding: 0; }
.catalog-sample .nav { flex-wrap: wrap; overflow: visible; }
.catalog-sample .capture.static { position: static; inline-size: auto; max-inline-size: none; margin: 0; }
.catalog-sample .dlg.static { position: static; inline-size: 100%; max-inline-size: none; margin: 0; max-block-size: none; box-shadow: none; }
.catalog-sample .toast.static { margin: 0; inline-size: 100%; }
.catalog-sample .file-pick--image .image-preview-photo { max-block-size: 160px; }
.catalog-sample .board-col { flex-basis: min(78vw, 230px); }
.catalog-status { margin-block-start: var(--sp-3); color: var(--ink-2); font-size: var(--fs-meta); min-block-size: 1.4em; }
.catalog-status:empty { display: none; }
.catalog-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.catalog-table th, .catalog-table td { text-align: start; padding: var(--sp-2); border-block-end: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.catalog-table th { font-weight: 600; color: var(--ink-2); }
.catalog-table td:first-child { font-weight: 600; }
.catalog-state { display: grid; gap: var(--sp-2); padding-block: var(--sp-3); border-block-end: 1px solid var(--line); }
.catalog-state:last-child { border: 0; }
.catalog-state > b { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.catalog-state p { margin: 0; }
.catalog-foot { border-block-start: 1px solid var(--line-strong); padding-block-start: var(--sp-5); font-size: var(--fs-meta); color: var(--ink-2); }
.catalog-foot a { color: var(--ink); }
@media (max-width: 699px) {
  .catalog-shortcut { display: flex; justify-content: end; position: sticky; top: 0; z-index: var(--z-bar); background: var(--paper-2); border-block-end: 1px solid var(--line); }
  .catalog-section { scroll-margin-block-start: calc(var(--tap) + var(--sp-3)); }
  .catalog-wrap { padding-block-start: var(--sp-5); }
  .catalog-sample { padding: var(--sp-4); }
  .catalog-sample .tabbar { margin-inline: calc(-1 * var(--sp-4)); margin-block-end: calc(-1 * var(--sp-4)); }
  .catalog-section { margin-block: var(--sp-6); }
}
@media print {
  .catalog-theme, .catalog-toc, .catalog-shortcut, [data-catalog-interaction] { display: none; }
  .catalog-frame { break-inside: avoid; }
  .catalog-wrap { max-inline-size: none; padding: 0; }
}