/* Связь двух шаф (kirill-b1-04, задача 4, этап (б)): переключатель «Моя | Кирила», экраны его луков, «К» в календаре Каті, «Катині луки» у Кирила.
   Цвет «его» (значок «К», плашка его лука, баннер «тільки перегляд») это акцент темы Б Кирила (brand.css): тёмно-синий и светлая подложка.
   Подключается после calendar.css и shafa.css; правила в тех же пластах, значения только через var(--...). */

@layer tokens {
  :root {
    --his: #27415F;
    --his-soft: #E2E8F0;
    --his-ink: #F6F8FB;
  }
}

@layer components {
  /* ---------- баннер и плашка «тільки перегляд» (12.3, 12.5, 11.12) ---------- */
  .cx-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--sp-2) 0 var(--sp-3);
    padding: 10px 14px;
    border-radius: var(--r-pill);
    background: var(--his-soft);
    color: var(--his);
    font: 600 var(--fs-hint)/1.2 var(--font-ui);
  }
  .cx-banner > .k-icon { width: 16px; height: 16px; flex: none; }
  .cx-banner--line { padding: 0 2px; background: none; color: var(--ink-2); font-weight: 500; }
  .cx-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: var(--his-soft);
    color: var(--his);
    font: 600 var(--fs-caption)/1 var(--font-ui);
    white-space: nowrap;
  }
  .cx-pill > .k-icon { width: 14px; height: 14px; }
  .cx-k {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--his);
    color: var(--his-ink);
    font: 700 10px/1 var(--font-ui);
  }

  /* ---------- карточка его вещи и его лука (12.4, 12.6, 11.13) ---------- */
  .cx-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-card-l);
    background: var(--surface-2);
    color: var(--ink-3);
    overflow: hidden;
  }
  .cx-photo > img { width: 100%; height: 100%; object-fit: contain; }
  .cx-card {
    padding: var(--sp-2);
    border-radius: var(--r-card-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .cx-card > .k-lg { width: 100%; }
  .cx-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; }
  .cx-sub { margin: 4px 0 0; font: 500 var(--fs-body-s)/1.3 var(--font-ui); color: var(--ink-2); }
  .cx-meta, .cx-owner, .cx-who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font: 500 var(--fs-body-s)/1.3 var(--font-ui);
    color: var(--ink-2);
  }
  .cx-note { margin: var(--sp-2) 2px var(--sp-3); }
  .cx-card ~ .k-btn { margin-top: var(--sp-4); }
  .cx-list { border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .cx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
  }
  .cx-row + .cx-row { border-top: 1px solid var(--line); }
  .cx-chev { flex: none; display: grid; color: var(--ink-3); }
  .cx-chev > .k-icon { width: 16px; height: 16px; }

  /* ---------- сетка луков и пустое состояние (12.5, 11.12, 11.18, 12.12) ---------- */
  .cx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  /* плитка в рамке, как на досках 12.5 и 11.12 */
  .cx-grid .k-looktile > .k-lg { padding: 6px; border-radius: var(--r-card-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  /* «Катині луки» у Кирила (доска 11.9): плашка цвета темы, без пунктира подсказки */
  .sh-hint--katia .sh-hint__pill { border: 0; background: var(--his-soft); color: var(--his); }
  .cx-wait { margin: var(--sp-3) 2px; }
  .cx-empty__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--sp-3); }
  .cx-empty__box { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--line-2); border-radius: var(--r-card-l); background: var(--surface-2); color: var(--ink-3); }
  .cx-empty__box > .k-icon { width: 32px; height: 32px; }
  .cx-empty__t { margin: var(--sp-2) 0 0; font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-2); }

  /* ---------- «Поставити на дату» (12.7) ---------- */
  .cx-who { margin: 0 0 var(--sp-3); }
  .cx-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
  .cx-month__t { margin: 0; font: 600 var(--fs-title)/1.2 var(--font-display); color: var(--ink); }
  .cx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; justify-items: center; }
  .cx-wk { padding: 4px 0 6px; font: 500 var(--fs-caption)/1 var(--font-ui); color: var(--ink-2); }
  .cx-day {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    font: 500 var(--fs-body-s)/1 var(--font-ui);
  }
  .cx-day:disabled { color: var(--ink-3); }
  .cx-day.is-today { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .cx-day.is-sel { background: var(--acc); color: var(--acc-ink); font-weight: 600; }
  .cx-dot { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); }
  .cx-day.is-sel .cx-dot { background: var(--acc-ink); }
  .cx-info { margin: var(--sp-3) 2px 0; font: 400 var(--fs-caption)/1.4 var(--font-ui); color: var(--ink-2); }

  /* ---------- «Лук Кирила» в дне (12.10) ---------- */
  .cx-pick { display: flex; flex-direction: column; }
  .cx-pick__hint { margin: 0 2px var(--sp-2); }
  .cx-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 6px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
  }
  .cx-opt[aria-checked="true"] { background: var(--his-soft); border-radius: var(--r-card); border-bottom-color: transparent; }
  .cx-opt__pic { flex: none; width: 64px; }
  .cx-opt__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cx-opt__t { font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
  .cx-opt__s { font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .cx-radio { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 50%; color: transparent; }
  .cx-radio > .k-icon { width: 14px; height: 14px; }
  .cx-opt[aria-checked="true"] .cx-radio { background: var(--his); border-color: var(--his); color: var(--his-ink); }

  /* ---------- лист дня: его запись и вход «Лук Кирила» (12.9) ---------- */
  .day-look--his { background: var(--his-soft); box-shadow: none; }
  .day-look__who { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-caption)/1 var(--font-ui); color: var(--his); }
  .day-his {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: var(--sp-2);
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--his-soft);
    color: var(--ink);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
    text-align: left;
  }
  .day-his > .cx-chev { margin-left: auto; }

  /* ---------- клетка месяца: два образа рядом, три и больше: два и «+N», «К» на его образе (12.8, 12.11) ---------- */
  .cal-pics {
    position: absolute;
    left: var(--cal-grid-x);
    right: var(--cal-grid-x);
    bottom: var(--cal-grid-b);
    display: flex;
    gap: 2px;
    pointer-events: none;
  }
  .cal-pics > .cal-pic { position: relative; inset: auto; flex: 1 1 0; min-width: 0; }
  .cal-pics .k-lg { width: 100%; }
  .cal-k {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--his);
    color: var(--his-ink);
    font: 700 7px/12px var(--font-ui);
    text-align: center;
  }
  .cal-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 13px;
    background: var(--ink);
    color: var(--bg);
    font: 700 9px/13px var(--font-ui);
    text-align: center;
  }
  .cal-legend-his { display: flex; align-items: center; gap: 6px; margin: 4px 2px 0; font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .cal-legend-his > .cx-k { width: 14px; height: 14px; font-size: 8px; }
  @media (min-width: 1100px) {
    .cal--desk .cal-pics { left: var(--sp-2); right: var(--sp-2); top: var(--cal-grid-desk-top); bottom: var(--sp-2); }
    .cal--desk .cal-pics > .cal-pic { aspect-ratio: auto; height: 100%; translate: none; left: auto; right: auto; top: auto; }
    .cal--desk .cal-pics .k-lg { height: 100%; width: 100%; }
    .cal--desk .cal-k { width: 16px; height: 16px; font-size: 9px; line-height: 16px; }
    .cal--desk .cal-more { height: 16px; font-size: 10px; line-height: 16px; }
  }
}

@layer screens {
  /* ---------- переключатель «Моя | Кирила» на «Шафі» вместо тихой подсказки (12.1, 12.2) ---------- */
  .sh .sh-sw { grid-area: 2 / 2; justify-self: end; display: inline-flex; align-items: center; height: var(--target); }
  .sh-sw__seg { display: inline-flex; align-items: center; height: 32px; padding: 2px; border-radius: var(--r-pill); background: var(--surface-2); }
  /* кнопка 44 (зона касания), видимая плашка 28 внутри неё */
  .sh-sw__b { display: inline-flex; align-items: center; height: 44px; min-height: 44px; margin-block: -6px; padding: 0; border: 0; background: none; color: var(--ink-2); }
  .sh-sw__t { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--r-pill); font: 600 var(--fs-caption)/1 var(--font-ui); white-space: nowrap; }
  .sh-sw__b[aria-pressed="true"] .sh-sw__t { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-thumb); }
  .sh-sw__b--his[aria-pressed="true"] .sh-sw__t { background: var(--his); color: var(--his-ink); box-shadow: none; }

  /* его шафа пуста (12.12): вместо сцены пустая рамка с вешалкой, кнопки выключены */
  .sh-empty { display: none; }
  .sh--his-empty .sh-scene { display: none; }
  .sh--his-empty .sh-empty { display: block; }
  .sh--his-empty .sh-buttons .k-btn { opacity: .5; pointer-events: none; }
  .sh-empty__ph { display: grid; place-items: center; min-height: 300px; border: 1px dashed var(--line-2); border-radius: var(--r-hero); background: var(--surface-2); color: var(--ink-3); }
  .sh-empty__ph > .k-icon { width: 48px; height: 48px; }
  .sh-empty__t { margin: var(--sp-2) 0 0; font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-2); }
}