/* C1 «Шафа на телефоні» (LOGIC-C1.md, доски 10.1-10.18): лист в «Моє», строка состояния на две строки, заглушки без картинки
   (плитка, карточка вещи, приближение), пустая копия без сети. Значения только через var(--...). */

@layer screens {
  /* ---------- лист «Шафа на телефоні» (10.12-10.16) ---------- */
  .oc { display: grid; gap: 12px; padding-bottom: 8px; }
  .oc-plate {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: color-mix(in srgb, #d9a93b 18%, var(--surface));
    color: var(--ink);
    font: 400 var(--fs-body-s)/1.35 var(--font-ui);
  }
  .oc-plate > .k-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #a07a1c; }
  .oc-plate > p { margin: 0; }
  .oc-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 20px; background: var(--surface-2); }
  .oc-card__ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--acc); }
  .oc-card__ic > .k-icon { width: 20px; height: 20px; }
  .oc-card--bad .oc-card__ic { background: var(--danger-soft); color: var(--danger); }
  .oc-card__b { display: grid; flex: 1 1 auto; gap: 6px; min-width: 0; }
  .oc-card__t { margin: 0; font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--ink); }
  .oc-card__s { margin: 0; font: 400 var(--fs-hint)/1.35 var(--font-ui); color: var(--ink-3); }
  .oc-bar--grey .k-progress__fill { background: var(--ink-3); }
  .oc-retry { justify-self: start; margin-top: 4px; }
  .oc-rows { display: grid; gap: 8px; }
  .oc-rows > .k-row { padding-inline: 16px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .oc-note { margin: -4px 4px 0; font: 400 var(--fs-hint)/1.35 var(--font-ui); color: var(--ink-3); }
  .oc-acts { display: flex; flex-wrap: wrap; gap: 10px; }

  /* ---------- строка состояния на две строки («Не вистачає місця...», доска 10.4) ---------- */
  .k-strip--wrap .k-strip__t { white-space: normal; overflow: visible; text-overflow: clip; padding-block: 6px; }

  /* ---------- плитка без картинки (10.6): вешалка и маленький значок «нет сети» ---------- */
  .k-tile__ph--off { display: grid; place-items: center; color: var(--ink-3); }
  .k-tile__ph--off > .k-icon { width: 40px; height: 40px; opacity: .55; }
  .k-tile__off {
    position: absolute;
    left: 50%;
    top: 58%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink-3);
  }
  .k-tile__off > .k-icon { width: 14px; height: 14px; }

  /* ---------- сцена «Шафи» без картинки (10.7): нейтральный силуэт и значок «нет сети» ---------- */
  :root { --off-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%238a817a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l32 32M17 30a10 10 0 0 1 14 0M11 23a18 18 0 0 1 8-4.5M37 23a18 18 0 0 0-6-3.8M24 37h.5'/%3E%3C/svg%3E"); }
  .sc-it--off:not(.sc-photo) {
    aspect-ratio: 3 / 5;
    border-radius: 40% 40% 14% 14%;
    background: var(--off-glyph) center / 14px no-repeat, color-mix(in srgb, var(--ink-3) 18%, transparent);
  }
  .sc-photo.sc-it--off > img { background: var(--off-glyph) center / 24% no-repeat, var(--surface-2); }

  /* ---------- карточка вещи без фото (10.8) ---------- */
  .it-photo__off {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    min-height: 100%;
    padding: 24px;
    text-align: center;
    color: var(--ink-3);
  }
  .it-photo__off > p { margin: 0; max-width: 28ch; font: 400 var(--fs-body-s)/1.4 var(--font-ui); }
  .it-photo__offic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .it-photo__offic > .k-icon { width: 24px; height: 24px; }

  /* ---------- приближение фото без сети (10.9) ---------- */
  .it-zoom__note {
    position: absolute;
    inset-inline: 12px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    padding: 9px 12px;
    border-radius: 18px;
    background: rgb(36 30 28 / .86);
    color: #fff;
    font: 500 12.5px/1.3 var(--font-ui);
  }
  .it-zoom__note > .k-icon { flex: none; width: 18px; height: 18px; }

  /* ---------- пустая копия без сети (10.10) ---------- */
  .sh-nocopy { display: none; }
  .sh--no-copy .sh-scene { display: none; }
  .sh--no-copy .sh-nocopy { display: grid; justify-items: start; align-content: start; gap: 10px; min-height: 260px; padding: 22px 20px; border-radius: var(--r-hero); background: var(--surface-2); }
  .sh--no-copy .sh-buttons .k-btn { opacity: .5; pointer-events: none; }
  .sh-nocopy__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
  .sh-nocopy__ic > .k-icon { width: 24px; height: 24px; }
  .sh-nocopy__t { margin: 8px 0 0; font: 600 var(--fs-display-m)/var(--lh-display) var(--font-display); color: var(--ink); }
  .sh-nocopy__s { margin: 0; font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-2); }
}