/* Каталог инструментов (/gear). Файл РУЧНОЙ: scripts/extract-prototype.php его
   не генерирует и не трогает. Язык тот же, что у каталогов уроков и кабинета:
   рамка в пиксель, чёрные акценты, жёлтая тень у главного. Ритм внутри блоков
   задают контейнеры (gap), текстовый поток <main> — на отступах (CLAUDE.md). */

/* ---- секции ---- */
.gr-sec{display:flex;flex-direction:column;gap:14px;margin:2.2rem 0 0}
.gr-sec>*{margin:0}
.gr-sec>h2{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.gr-note{color:var(--muted);font-size:.9rem;max-width:62ch}

/* ---- чипы-ссылки и поиск ---- */
a.cat-chip{text-decoration:none}
a.cat-chip[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
a.cat-chip[aria-current] span{color:inherit;opacity:.7}
.gr-controls{margin:0}
.gr-search{display:flex;gap:8px;max-width:40rem}
.gr-search .cat-search{max-width:none;flex:1;min-width:0}
.gr-search .btn{flex:none;min-height:46px}

/* ---- бренды ---- */
.gr-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:8px}
.gr-brand{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;min-width:0}
.gr-brand b{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.gr-brand span{font-size:.88rem;font-weight:600}
.gr-brand small{font-size:.78rem;color:var(--muted)}
.gr-brand:hover{border-color:var(--ink);box-shadow:4px 4px 0 var(--brand)}

/* ---- полоса над списком ---- */
.gr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.gr-count{margin:0;font-weight:700}
.gr-sort{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem}
.gr-sort a{color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;padding:2px 0}
.gr-sort a:hover{color:var(--ink)}
.gr-sort a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}

/* ---- карточки моделей ---- */
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:10px}
.gr-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;min-width:0}
.gr-card:hover{border-color:var(--ink);box-shadow:4px 4px 0 var(--brand)}
.gr-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gr-card>.gr-px{height:132px;border-bottom:1px solid var(--line)}
.gr-card-b{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;min-width:0;flex:1}
.gr-card-m{font-size:.76rem;color:var(--muted)}
.gr-card-t{font-weight:800;font-size:1rem;line-height:1.25;overflow-wrap:break-word}
.gr-card-f{font-size:.82rem;color:var(--muted)}
.gr-card-p{font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:-.01em;padding-top:4px}
/* цена прижата к низу: растягивается строка перед ней, а не margin у цены */
.gr-card-b>:nth-last-child(2):not(:first-child){flex:1}
.gr-card-p small{font-family:var(--font);font-weight:500;font-size:.74rem;color:var(--muted);letter-spacing:0}

/* ---- пиксельное превью ----
   16 пикселей фото производителя, растянутых без сглаживания: видно цвет и
   силуэт, но не само фото. Своя иллюстрация модели заменит его позже. */
.gr-px{display:flex;align-items:center;justify-content:center;background:var(--sunk);overflow:hidden;padding:12px}
.gr-px img{height:100%;width:auto;max-width:100%;aspect-ratio:var(--ar,1);object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.gr-px-none svg{width:56px;height:56px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6}

/* ---- пустой список, страницы ---- */
.gr-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:1.2rem;border:1px dashed var(--line)}
.gr-empty>*{margin:0}
.gr-pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gr-pager a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.gr-pager a:hover{border-color:var(--ink)}
.gr-pager a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gr-gap{color:var(--muted);padding:0 2px}

/* ---- модель: шапка ---- */
.gr-hero{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:20px;margin:1.6rem 0 0;align-items:start}
.gr-hero-px{display:flex;flex-direction:column;gap:8px;margin:0}
.gr-hero-px .gr-px{height:300px;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--brand)}
.gr-hero-px figcaption{font-size:.78rem;color:var(--muted)}
.gr-hero-t{display:flex;flex-direction:column;gap:14px;min-width:0}
.gr-hero-t>*{margin:0}
.gr-hero-k{font-weight:700}
.gr-hero-k a{color:inherit}
.gr-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--card);margin:0}
.gr-kpi>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-bottom:1px solid var(--line)}
.gr-kpi>div:nth-child(odd){border-right:1px solid var(--line)}
.gr-kpi>div:nth-last-child(-n+2){border-bottom:0}
.gr-kpi dt{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gr-kpi dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:-.02em}
.gr-kpi dd small{font-family:var(--font);font-weight:500;font-size:.78rem;color:var(--muted);letter-spacing:0}
.gr-kpi .gr-soon{font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--muted)}

/* ---- пары «название — значение» ---- */
/* Подписи одной ширины во всех строках и колонках — значения начинаются с
   одной вертикали. Промежуток между колонками задаёт сетка (column-gap), а не
   отступ у ячеек: иначе ячейки левой колонки уже правой и вертикаль плывёт. */
.gr-facts{--dt:11rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));column-gap:32px;margin:0}
.gr-facts>div{display:grid;grid-template-columns:var(--dt) minmax(0,1fr);align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.gr-facts dt{color:var(--muted);font-size:.88rem;line-height:1.4;overflow-wrap:break-word}
.gr-facts dd{margin:0;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.gr-facts.sm dd{font-weight:500;font-size:.92rem}
.gr-specs{display:flex;flex-direction:column;gap:18px}
.gr-spec-g{display:flex;flex-direction:column;gap:6px}
.gr-spec-g>h3{margin:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---- цена ---- */
.gr-chart{margin:0;border:1px solid var(--line);background:var(--card);padding:10px}
.gr-chart svg{display:block;width:100%;height:auto}
.gr-chart path{fill:none;stroke:var(--ink);stroke-width:2.5}
.gr-chart circle{fill:var(--brand);stroke:var(--ink);stroke-width:1.5}
.gr-chart .gr-ax{stroke:var(--line)}
.gr-chart text{font-size:12px;fill:var(--muted);font-family:var(--mono)}
.gr-price-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.gr-price-list li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line);background:var(--card)}
.gr-price-list span,.gr-price-list small{font-size:.76rem;color:var(--muted)}

/* ---- таблица цветов ---- */
.gr-table-wrap{overflow-x:auto;border:1px solid var(--line)}
.gr-table{width:100%;border-collapse:collapse;font-size:.92rem}
.gr-table th,.gr-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.gr-table tr:last-child td{border-bottom:0}
.gr-table th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
.gr-table small{display:block;color:var(--muted)}
.gr-mono{font-family:var(--mono);font-size:.84rem}

/* ---- источники ---- */
.gr-src ul{display:flex;flex-direction:column;gap:4px;margin:0;padding-left:1.1rem;font-size:.88rem}
.gr-src a{overflow-wrap:anywhere}

@media (max-width:720px){
  .gr-hero{grid-template-columns:1fr}
  .gr-hero-px .gr-px{height:220px;box-shadow:4px 4px 0 var(--brand)}
  .gr-kpi dd{font-size:1.15rem}
  .gr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gr-card>.gr-px{height:104px}
  .gr-card-b{padding:10px 10px 12px}
  .gr-card-t{font-size:.92rem}
  .gr-facts{grid-template-columns:1fr;--dt:8.5rem}
  .cat-label{min-width:0;width:100%}
  /* Фильтры на телефоне — ряды, прокручиваемые вбок: столбиком чипы брендов
     и звукоснимателей занимали полтора экрана до первой модели. */
  .gr-controls .cat-row{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:6px}
  .gr-controls .cat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .gr-controls .cat-chips::-webkit-scrollbar{display:none}
  .gr-controls .cat-chip{flex:none}
  .gr-table td:nth-child(3){white-space:nowrap}
}
@media (max-width:380px){ .gr-grid{grid-template-columns:1fr} }
.gr-kpi dd small{display:block}
.gr-kpi .gr-today{padding-top:2px}