/* Парные луки (pairs-04, 04.10.2026; доски 13.1-13.6): карточка пары (две карточки рядом), «Пара з луком Кирила», «Зробити парою» в дне,
   список пар («Парні»), пометки в его «Катині луки», карточки пар в ответе стилиста.
   Цвет «его» (плашка, значок «К», рамка пометки) это --his и --his-soft из cross.css; всё остальное токены темы Каті.
   Подключается после cross.css; правила в том же слое components. */

@layer components {
  /* ---------- две карточки рядом (13.1) ---------- */
  .pr-plate {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-card-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .pr-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border-radius: var(--r-card); }
  .pr-side--his { background: var(--his-soft); }
  .pr-side__grid > .k-lg { width: 100%; }
  .pr-side__t { margin: 0; font: 600 var(--fs-body-s)/1.25 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
  .pr-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-caption)/1 var(--font-ui);
  }
  .pr-tag--his { padding-left: 4px; background: var(--surface); color: var(--his); box-shadow: inset 0 0 0 1px var(--line); }
  .pr-count {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink-2);
    font: 600 var(--fs-caption)/1 var(--font-ui);
  }
  .pr-title { margin: var(--sp-4) 0 0; font: 600 var(--fs-display-m)/var(--lh-display) var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
  .pr-meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 var(--sp-2); color: var(--ink-2); font: 500 var(--fs-body-s)/1.3 var(--font-ui); }
  .pr-meta > .k-icon { width: 18px; height: 18px; flex: none; color: var(--his); }
  .pr-desc {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    font: 400 var(--fs-body)/1.4 var(--font-ui);
    text-align: left;
  }
  .pr-desc:focus:not(:focus-visible) { outline: none; }
  .pr-desc__t.is-empty { color: var(--ink-3); }
  .pr-desc > .k-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-3); }
  .pr-acts { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
  .pr-hint { margin-top: var(--sp-3); }
  .pr-menu { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; color: var(--ink); font: 500 var(--fs-body)/1.2 var(--font-ui); text-align: left; }
  .pr-menu > .k-icon { width: 22px; height: 22px; flex: none; }
  .pr-menu.is-danger { color: var(--acc-deep); }

  /* ---------- «Пара з луком Кирила» на карточке образа (13.2) ---------- */
  .k-btn.lk-pair { background: var(--his-soft); color: var(--his); box-shadow: inset 0 0 0 1px var(--his); }

  /* ---------- «Зробити парою» в дне календаря (13.3) ---------- */
  .pr-day { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
  .pr-block { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-card-l); background: var(--acc-soft); }
  .pr-block__t { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--acc-deep); font: 700 var(--fs-body)/1.2 var(--font-ui); }
  .pr-block__t > .k-icon { width: 20px; height: 20px; flex: none; }
  .pr-block__s { margin: 0; color: var(--ink-2); font: 400 var(--fs-hint)/1.35 var(--font-ui); }
  .pr-block .k-btn { justify-self: start; }
  .pr-dayrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-card);
    background: var(--acc-soft);
    color: var(--acc-deep);
    font: 600 var(--fs-body-s)/1.2 var(--font-ui);
    text-align: left;
  }
  .pr-dayrow > .k-icon { width: 18px; height: 18px; flex: none; }
  .pr-dayrow__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- список пар: фильтр «Парні» (13.5) ---------- */
  .lk-grid > .pr-rows { grid-column: 1 / -1; }
  .pr-rows { display: grid; gap: var(--sp-3); }
  .pr-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border-radius: var(--r-card-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    text-align: left;
  }
  .pr-row__pics { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-card); background: var(--surface-2); }
  .pr-mini { position: relative; display: block; width: 64px; }
  .pr-mini .k-lg { width: 100%; }
  .pr-mini--his { padding: 2px; border-radius: 8px; background: var(--his-soft); }
  .pr-mini__k { position: absolute; right: 2px; bottom: 2px; }
  .pr-row__text { display: grid; gap: 4px; min-width: 0; }
  .pr-row__t { display: flex; align-items: center; gap: 6px; color: var(--ink); font: 700 var(--fs-body)/1.2 var(--font-ui); }
  .pr-row__t > .k-icon { width: 18px; height: 18px; flex: none; color: var(--his); }
  .pr-row__s { color: var(--ink-2); font: 400 var(--fs-hint)/1.3 var(--font-ui); overflow-wrap: anywhere; }
  .pr-row__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pr-row__o { color: var(--ink-3); font: 500 var(--fs-caption)/1 var(--font-ui); }
  .pr-state { white-space: nowrap; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font: 600 var(--fs-caption)/1 var(--font-ui); }
  .pr-state.is-plan { background: var(--his-soft); color: var(--his); }
  .pr-rows__hint { display: flex; align-items: flex-start; gap: 8px; }
  .pr-rows__hint > .k-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }

  /* ---------- его «Катині луки»: пометки пар (13.6) ---------- */
  .pr-key { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); color: var(--ink-2); font: 500 var(--fs-hint)/1.3 var(--font-ui); }
  .pr-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--his); color: var(--his-ink); font: 600 var(--fs-caption)/1 var(--font-ui); }
  .pr-pill > .k-icon { width: 14px; height: 14px; }
  /* рамка поверх картинок: inset-тень лежала бы под ячейками сетки */
  .cx-grid .pr-marked.k-looktile > .k-lg { position: relative; }
  .cx-grid .pr-marked.k-looktile > .k-lg::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-card-l); box-shadow: inset 0 0 0 2px var(--his); pointer-events: none; }
  .pr-marked .k-looktile__s { display: inline-flex; align-items: center; gap: 4px; color: var(--his); font-weight: 600; }
  .pr-marked .k-looktile__s > .k-icon { width: 14px; height: 14px; }

  /* ---------- карточка пары в ответе стилиста (13.4) ---------- */
  .pr-card .pr-plate { padding: 0; background: transparent; box-shadow: none; }
  .pr-card .pr-side { padding: 4px; }
  .pr-card .pr-side__t { display: none; }
  .pr-card .k-look__a { display: flex; align-items: center; gap: var(--sp-2); }
  .pr-card .pr-save { flex: 1; }
  .pr-card .pr-save.is-saved { background: var(--his-soft); color: var(--his); }
}