/* Валіза, капсули, «На сезон» (фаза 7): trip.js, capsule.js, season.js, set-parts.js.
   Подключается после styles.css: порядок пластов уже задан там, здесь те же пласты.
   Сырые значения только в tokens; screens только раскладывает (сетка, колонки, порядок). */

/* ========================================================================== tokens */
@layer tokens {
  :root {
    --tr-tick: 26px;            /* кружок-галочка «річ у валізі» (m-trip) */
    --tr-tick-s: 20px;          /* та же галочка в подписи */
    --tr-dash: 1.5px;           /* пунктир пустого места */
    --tr-day-ph: 72px;          /* коллаж дня поездки (m-trip-days) */
    --tr-cap-ph: 64px;          /* коллаж капсулы в списке */
    --tr-store-th: 48px;        /* вещь на сезон (m-season) */
    --tr-store-room: 132px;     /* место под «Дістати все» справа от миниатюр */
    --tr-sheen: rgb(var(--shadow-rgb) / .06);   /* блик скелета */
    --tr-skel-h: 180px;         /* скелет карточки образа, пока стилист думает */
    --tr-fill-max: 220px;       /* полоса «Заповнено 6 з 9» */
    --tr-seg-desk: 300px;       /* «Речі | Дні поїздки» справа сверху на компьютере */
    --tr-cols-trip: 4;
    --tr-cols-capsule: 3;
    --tr-cols-pick: 3;
    --tr-cols-trip-wide: 6;
    --tr-cols-capsule-wide: 5;
    --tr-cols-pick-wide: 4;
    --tr-desk-top: 130px;       /* плавающая панель на компьютере (d3-trip, d3-newtrip) */
    --tr-desk-gap: 80px;        /* от правого края окна */
    --tr-desk-left: 480px;      /* широкая панель начинается справа от сцены */
    --tr-desk-narrow: 527px;    /* узкая панель: «Нова валіза», «На сезон», выбор */
    --tr-desk-bottom: 128px; /* фаза 9: низ панели над меню (d3-trip кончается на 772) */
    --tr-desk-btn: 280px;       /* кнопка внизу широкой панели справа (d3-trip) */
  }
}

/* ========================================================================== components */
@layer components {
  /* ---------- шапка валізи: даты и погода, «Вибрано 9 з 12» ---------- */
  .tr-meta { display: flex; flex-direction: column; gap: 2px; }
  .tr-meta__line {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 0;
    font: 400 var(--fs-body-s)/var(--lh-hint) var(--font-ui);
    color: var(--ink-2);
  }
  .tr-meta__line > .k-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--acc); }
  .tr-meta__note {
    margin: 0;
    padding-left: 28px;
    font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui);
    color: var(--ink-2);
  }
  .tr-count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
  .tr-count__n { font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--ink); }
  .tr-legend {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font: 400 var(--fs-hint)/1.3 var(--font-ui);
    color: var(--ink-2);
  }

  /* ---------- галочка «річ у валізі»: 26 нарисовано, 44 касание ---------- */
  .tr-tick {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: start end;
    width: var(--target);
    height: var(--target);
    padding: 5px;
    border: 0;
    background: none;
    color: var(--acc-ink);
  }
  .tr-tick__c {
    display: grid;
    place-items: center;
    width: var(--tr-tick);
    height: var(--tr-tick);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-thumb);
    transition: background-color var(--dur-state) var(--ease-fade), box-shadow var(--dur-state) var(--ease-fade);
  }
  .tr-tick__c > svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset var(--dur-check) var(--ease-enter) 80ms;
  }
  .tr-tick[aria-pressed="true"] .tr-tick__c { background: var(--acc); box-shadow: none; }
  .tr-tick[aria-pressed="true"] .tr-tick__c > svg { stroke-dashoffset: 0; }
  .tr-tick:disabled { opacity: .45; }
  /* «Менше руху»: галочка появляется сразу, остаётся только смена цвета */
  :root[data-motion="reduce"] .tr-tick__c > svg { transition: none; }
  @media (prefers-reduced-motion: reduce) {
    .tr-tick__c > svg { transition: none; }
  }
  .tr-tick--mark { position: static; display: inline-grid; place-items: center; width: auto; height: auto; padding: 0; }
  .tr-legend .tr-tick__c { width: var(--tr-tick-s); height: var(--tr-tick-s); }
  .tr-legend .tr-tick__c > svg { width: 13px; height: 13px; }

  /* ---------- место: вещь целиком или пунктир с «+» ---------- */
  .tr-place { position: relative; min-width: 0; }
  .tr-place__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--r-photo-s);
    background: none;
    color: var(--ink);
    text-align: left;
  }
  .tr-place__ph {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    overflow: hidden;
  }
  .tr-place__ph > img {
    position: absolute;
    left: 9%;
    top: 8%;
    width: 82%;
    height: 84%;
    object-fit: contain;
    -webkit-user-drag: none;
  }
  .tr-place--empty .tr-place__ph {
    background: transparent;
    border: var(--tr-dash) dashed var(--line-2);
    color: var(--ink-3);
  }
  .tr-place--empty .tr-place__ph > .k-icon { width: 26px; height: 26px; }
  .tr-place__l {
    display: -webkit-box;
    margin: 6px 2px 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font: 500 var(--fs-hint)/1.3 var(--font-ui);
    overflow-wrap: anywhere;
  }
  .tr-place--empty .tr-place__l { color: var(--ink-2); }
  .tr-place__s { display: block; margin: 2px 2px 0; font: 500 var(--fs-label)/1.3 var(--font-ui); color: var(--ink-2); }
  .tr-place--away .tr-place__ph > img { opacity: .5; }

  /* ---------- «Взуття: 2 пари · у шафі взуття ще немає» ---------- */
  .tr-none {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 56px;
    padding: 0 var(--sp-4) 0 var(--sp-1);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .tr-none > .tr-tick { position: static; flex: none; place-items: center; padding: 0; }
  .tr-none__t { font: 500 var(--fs-body-s)/1.35 var(--font-ui); color: var(--ink); }

  /* ---------- пояснения под сеткой ---------- */
  .tr-notes { display: flex; flex-direction: column; gap: 6px; }
  .tr-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 0;
    font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui);
    color: var(--ink-2);
  }
  .tr-note > .k-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-2); }

  /* ---------- «Дні поїздки» ---------- */
  .tr-day {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    font: inherit;
    text-align: left;
  }
  .tr-day__ph {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--tr-day-ph);
    height: var(--tr-day-ph);
    padding: 0;
    border: 0;
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    overflow: hidden;
    color: var(--ink-3);
  }
  .tr-day__ph--empty { background: transparent; border: var(--tr-dash) dashed var(--line-2); }
  .tr-day__ph--empty > .k-icon { width: 24px; height: 24px; }
  .tr-day__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .tr-day__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .tr-day__t { font: 600 var(--fs-body)/1.3 var(--font-ui); }
  .tr-day__w {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font: 400 var(--fs-hint)/1.3 var(--font-ui);
    color: var(--ink-2);
  }
  .tr-day__w > .k-icon { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
  .tr-day__look { font: 500 var(--fs-body-s)/1.3 var(--font-ui); color: var(--olive-ink); }
  .tr-day__act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: 4px; }
  .tr-day__hint { font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink-2); }
  .tr-day__chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); }

  /* маленький коллаж дня: до трёх вещей целиком */
  .tr-mini { display: flex; width: 100%; height: 100%; padding: 8px 4px; }
  .tr-mini__c { position: relative; flex: 1 1 0; min-width: 0; }
  .tr-mini__c > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

  /* лист образа дня */
  .tr-daylook .k-lcol { --lcol-ratio: 1.6; }

  /* ---------- «Нова валіза» ---------- */
  .tr-new > .k-caps:first-of-type { margin-top: var(--sp-4); }
  .tr-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-radius: var(--r-card);
    background: var(--olive-soft);
    color: var(--olive-ink);
    font: inherit;
    text-align: left;
  }
  .tr-banner > .k-icon { flex: none; width: 22px; height: 22px; }
  .tr-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tr-banner__t { font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
  .tr-banner__s { font: 400 var(--fs-caption)/1.3 var(--font-ui); }
  .tr-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .tr-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--input-h);
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink);
    font: 600 var(--fs-body-s)/1 var(--font-ui);
    cursor: pointer;
  }
  .tr-date:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .tr-date > .k-icon { width: 18px; height: 18px; color: var(--ink-2); }
  .tr-date__in {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: var(--fs-body);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .tr-dates__arrow { font: 400 var(--fs-body)/1 var(--font-ui); color: var(--ink-2); }
  .tr-dates__n { font: 400 var(--fs-body-s)/1 var(--font-ui); color: var(--ink-2); }
  .tr-wx {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-card);
    background: var(--surface-2);
  }
  .tr-wx > .k-icon { flex: none; width: 22px; height: 22px; color: var(--acc); }
  .tr-wx__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tr-wx__t { margin: 0; font: 500 var(--fs-body-s)/1.35 var(--font-ui); color: var(--ink); }
  .tr-wx__s { margin: 0; font: 400 var(--fs-caption)/1.35 var(--font-ui); color: var(--ink-2); }
  .tr-new__fill { margin-top: var(--sp-3); }
  .tr-new__fill > .k-row { padding-inline: var(--sp-1); }

  /* ---------- капсула ---------- */
  .tr-capsub { margin: 0; font: 400 var(--fs-body-s)/var(--lh-hint) var(--font-ui); color: var(--ink-2); }
  .tr-fill { display: flex; align-items: center; gap: var(--sp-4); }
  .tr-fill > .k-progress { flex: 1 1 auto; max-width: var(--tr-fill-max); }
  .tr-caprow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 10px var(--sp-4) 10px 10px;
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    font: inherit;
    text-align: left;
  }
  .tr-caprow__ph {
    flex: none;
    width: var(--tr-cap-ph);
    height: var(--tr-cap-ph);
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    overflow: hidden;
  }
  .tr-caprow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tr-caprow__t { font: 600 var(--fs-body)/1.3 var(--font-ui); }
  .tr-caprow__s { font: 400 var(--fs-caption)/1.3 var(--font-ui); color: var(--ink-2); }
  .tr-caprow__chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); }

  /* ---------- «На сезон» ---------- */
  .tr-store {
    position: relative;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .tr-store__open {
    display: block;
    width: 100%;
    padding: var(--sp-4);
    border: 0;
    border-radius: var(--r-card);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
  }
  .tr-store__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .tr-store__head > .k-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--acc); }
  .tr-store__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tr-store__t { font: 600 var(--fs-body)/1.3 var(--font-ui); }
  .tr-store__s { font: 400 var(--fs-caption)/1.35 var(--font-ui); color: var(--ink-2); }
  .tr-store__ths { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding-right: var(--tr-store-room); }
  .tr-store__th {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--tr-store-th);
    height: var(--tr-store-th);
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    overflow: hidden;
  }
  .tr-store__th > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
  .tr-store__th--more { font: 600 var(--fs-hint)/1 var(--font-ui); color: var(--ink-2); }
  .tr-store__out { position: absolute; right: var(--sp-4); bottom: calc(var(--sp-4) + (var(--tr-store-th) - var(--btn-h-compact)) / 2); }
  .tr-expl { font-size: var(--fs-body-s); }

  /* ---------- выбор нескольких вещей («Прибрати літнє») и вещи места ---------- */
  .tr-seltile {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-tile);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
  }
  .tr-seltile__ph {
    position: relative;
    display: block;
    aspect-ratio: 7 / 8;
    border-radius: var(--r-photo-s);
    background: var(--surface-2);
    overflow: hidden;
    transition: box-shadow var(--dur-state) var(--ease-fade);
  }
  .tr-seltile__ph > img { position: absolute; left: 9%; top: 8%; width: 82%; height: 84%; object-fit: contain; }
  .tr-seltile__t {
    display: -webkit-box;
    margin: 6px 2px 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font: 500 var(--fs-hint)/1.3 var(--font-ui);
  }
  .tr-seltile > .tr-tick { position: absolute; top: 0; right: 0; place-items: start end; width: var(--target); height: var(--target); padding: 5px; }
  .tr-seltile[aria-pressed="true"] .tr-seltile__ph { box-shadow: inset 0 0 0 2px var(--acc); }

  /* ---------- образы из вещей набора: ожидание ---------- */
  .tr-wait { display: flex; flex-direction: column; gap: 10px; }
  .tr-skel {
    position: relative;
    padding: var(--sp-4);
    border-radius: var(--r-card-l);
    background: var(--surface-2);
    overflow: hidden;
  }
  .tr-skel__col { height: var(--tr-skel-h); border-radius: var(--r-tile); background: var(--surface-3); }
  .tr-skel__l { width: 70%; height: 14px; margin-top: var(--sp-3); border-radius: 7px; background: var(--surface-3); }
  .tr-skel__l--s { width: 45%; }
  .tr-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, var(--tr-sheen) 50%, transparent 80%);
    translate: -100% 0;
    animation: tr-sweep var(--dur-shimmer) linear infinite;
  }
  @keyframes tr-sweep { to { translate: 100% 0; } }
  @keyframes tr-pulse { 50% { opacity: .55; } }
  :root[data-motion="reduce"] .tr-skel::after { translate: 0 0; animation: tr-pulse var(--dur-shimmer) var(--ease-fade) infinite; }
  @media (prefers-reduced-motion: reduce) {
    .tr-skel::after { translate: 0 0; animation: tr-pulse var(--dur-shimmer) var(--ease-fade) infinite; }
  }
  .tr-wait__t { margin: 0; font: 500 var(--fs-body-s)/1.35 var(--font-ui); color: var(--ink); }
  .tr-wait__long { display: flex; align-items: center; gap: var(--sp-2); font: 400 var(--fs-hint)/1.3 var(--font-ui); color: var(--ink-2); }
  .tr-poolnote .k-title { font-size: var(--fs-section); }
  .tr-reply {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-card) var(--r-card) var(--r-card) var(--r-badge);
    background: var(--surface-2);
    font: 400 var(--fs-body-s)/var(--lh-body) var(--font-ui);
    color: var(--ink);
  }
  .tr-empty { padding: var(--sp-4) 0; }
  /* черта над кнопкой внизу листа (m-trip, d3-trip) */
  .k-sheet.tr-sheet .k-sheet__foot { border-top: 1px solid var(--line); }
  .tr-offer { margin-bottom: var(--sp-2); }
}

/* ========================================================================== layouts: плавающая панель на компьютере */
@layer layouts {
  /* На компьютере листы наборов открываются панелью справа от сцены, сцена видна (d3-trip). */
  @media (min-width: 1100px) {
    .k-sheet.tr-sheet {
      inset: var(--tr-desk-top) var(--tr-desk-gap) auto auto;
      max-height: calc(100dvh - var(--tr-desk-top) - var(--tr-desk-bottom));
      margin: 0;
      border-radius: var(--r-sheet);
    }
    .k-sheet.tr-sheet.k-sheet--full { height: auto; }
    .k-sheet.tr-sheet--wide { width: calc(100% - var(--tr-desk-left) - var(--tr-desk-gap)); }
    .k-sheet.tr-sheet--narrow { width: min(var(--tr-desk-narrow), calc(100% - 2 * var(--tr-desk-gap))); }
    .k-sheet.tr-sheet::backdrop { background: transparent; }
    .k-sheet.tr-sheet .k-sheet__grab { display: none; }
    .k-sheet.tr-sheet .k-sheet__head { padding-top: var(--sp-5); }
    .k-sheet.tr-sheet--wide .k-sheet__foot { justify-content: flex-end; }
    .k-sheet.tr-sheet--wide .k-sheet__foot > .k-btn { flex: 0 1 var(--tr-desk-btn); }
    /* узкая панель: кнопка во всю ширину панели (d3-newtrip) */
    .k-sheet.tr-sheet--narrow .k-sheet__foot > .k-btn { max-width: none; }
  }
}

/* ========================================================================== screens: только раскладка */
@layer screens {
  .tr-trip, .tr-capsule, .tr-season, .tr-pool, .tr-caplist { display: flex; flex-direction: column; gap: var(--sp-4); }
  .tr-top { display: flex; flex-direction: column; gap: var(--sp-3); }
  .tr-view { display: flex; flex-direction: column; gap: var(--sp-4); }
  .tr-places { display: grid; grid-template-columns: repeat(var(--tr-cols, 4), minmax(0, 1fr)); gap: var(--sp-4) 10px; }
  .tr-places--trip { --tr-cols: var(--tr-cols-trip); }
  .tr-places--capsule { --tr-cols: var(--tr-cols-capsule); gap: var(--sp-4) var(--sp-3); }
  .tr-days { display: flex; flex-direction: column; gap: var(--sp-3); }
  .tr-caplist { gap: 10px; }
  .tr-season { gap: var(--sp-3); }
  .tr-season__act { display: flex; justify-content: center; margin-top: var(--sp-2); }
  .tr-new { display: flex; flex-direction: column; }
  .tr-pickhead { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .tr-pickgrid { grid-template-columns: repeat(var(--tr-cols-pick), minmax(0, 1fr)); gap: var(--sp-4) 10px; }
  .tr-where { display: flex; flex-direction: column; gap: var(--sp-4); }
  .tr-poolnote { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  @media (min-width: 760px) {
    .tr-places--trip { --tr-cols: var(--tr-cols-trip-wide); }
    .tr-places--capsule { --tr-cols: var(--tr-cols-capsule-wide); }
    .tr-pickgrid { grid-template-columns: repeat(var(--tr-cols-pick-wide), minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    /* d3-trip: даты и погода слева, «Речі | Дні поїздки» справа, счётчик под ними */
    .tr-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--tr-seg-desk); grid-template-areas: "meta seg" "count seg"; align-items: start; column-gap: var(--sp-6); }
    .tr-top > .tr-meta { grid-area: meta; }
    .tr-top > .tr-count { grid-area: count; }
    .tr-top > .tr-segwrap { grid-area: seg; }
    .tr-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}