/* ── Insieme — shared wishlist ──────────────────────────────────────────────
   Tokens from global.css are reused. These are needed by Insieme but absent
   from the live theme :root, so they're defined here (do not redefine theme
   tokens). --ink-ghost uses the live theme value (not the prototype's). */
:root {
  --bg-paper:   oklch(97.5% 0.014 80);
  --yar-border: oklch(78% 0.07 240);
  --mar-border: oklch(78% 0.08 42);
  --shared:     oklch(38% 0.025 55);
}

/* ── Keyframes ── */
@keyframes ins-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ins-settleIntoSeam {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.92) rotate(var(--tilt-from, 0deg)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); }
}
@keyframes ins-liftAndDrift {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(var(--drift, 40px)) scale(0.96); }
}
@keyframes ins-modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ins-scrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header ── */
.ins-page { background: var(--bg); }

/* Header is the shared .site-header (template-parts/site-header.php + header.css) */

/* ── Main + layout ── */
.ins-main {
  min-height: 100vh; padding-top: 64px;
  max-width: 1320px; margin: 0 auto;
  padding-left: 36px; padding-right: 36px;
  display: flex; flex-direction: column;
}

/* Header offset is handled by header.css (.admin-bar .site-header top:32/46) +
   WP's html margin-top, so content only clears the 64px header — no admin-bar
   override here (mirrors the homepage). */

/* Version tag — discreet, in the page body (not the header) */
.insieme-version {
  position: static;
  display: block;
  text-align: right;
  margin-top: 28px;
  padding-bottom: 24px;
}

/* ── Filter pills ── */
.ins-pills {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  align-items: center; margin-bottom: 28px;
}
.ins-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--ink-ghost);
  border-radius: 100px; padding: 6px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 400;
  color: var(--ink-mid); letter-spacing: 0.01em;
  transition: all 0.18s ease;
}
.ins-pill.is-active {
  background: var(--ink); border-color: var(--ink);
  color: var(--bg); font-weight: 500;
}
.ins-pill__count {
  font-variant-numeric: tabular-nums; opacity: 0.6; font-size: 11.5px;
}
.ins-pill--add { color: var(--ink-faint); border-style: dashed; }
.ins-pill__input {
  background: transparent; border: none; outline: none;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink); width: 110px;
}
.ins-pill.is-active .ins-pill__input { color: var(--bg); }
.ins-counters {
  margin-left: auto; display: flex; gap: 18px; align-items: baseline;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.ins-counter { display: inline-flex; align-items: baseline; gap: 6px; }
.ins-counter__value {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-transform: none;
}
.ins-counter--open .ins-counter__value  { color: var(--ink-mid); }
.ins-counter--lived .ins-counter__value { color: var(--shared); }

/* ── Grid ── */
.ins-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px) 1fr;
  align-items: stretch;
}
.ins-col { display: flex; flex-direction: column; }
.ins-col--yar { padding-right: 32px; }
.ins-col--mar { padding-left: 32px; }

.ins-col__head {
  height: 56px; box-sizing: border-box;
  padding: 0 4px 14px; margin-bottom: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ins-col--yar .ins-col__head { border-bottom: 1.5px solid var(--yar); text-align: left; }
.ins-col--mar .ins-col__head { border-bottom: 1.5px solid var(--mar); text-align: right; }
.ins-col__name {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 4px; font-weight: 500;
}
.ins-col--yar .ins-col__name { color: var(--yar); }
.ins-col--mar .ins-col__name { color: var(--mar); }
.ins-col__sub {
  font-family: var(--sans); font-size: 12.5px; font-weight: 300;
  letter-spacing: 0.01em; color: var(--ink-faint);
}
.ins-col__sub b {
  font-variant-numeric: tabular-nums; color: var(--ink-mid); font-weight: 400;
}

/* ── Add bar ── */
.ins-addbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 16px;
  background: var(--bg-card); border: 1px solid var(--ink-ghost);
  border-radius: 2px; margin-bottom: 18px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ins-col--yar .ins-addbar.is-focused { background: var(--yar-bg); border-color: var(--yar-border); }
.ins-col--mar .ins-addbar.is-focused { background: var(--mar-bg); border-color: var(--mar-border); }
.ins-addbar__orn {
  display: inline-block; width: 6px; height: 6px;
  transform: rotate(45deg); opacity: 0.55; flex-shrink: 0;
}
.ins-col--yar .ins-addbar__orn { background: var(--yar); }
.ins-col--mar .ins-addbar__orn { background: var(--mar); }
.ins-addbar__input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  color: var(--ink); letter-spacing: 0.005em; padding: 4px 0; min-width: 0;
}
.ins-addbar__submit {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500; padding: 4px 6px;
}
.ins-col--yar .ins-addbar__submit { color: var(--yar); }
.ins-col--mar .ins-addbar__submit { color: var(--mar); }
.ins-addbar--locked {
  background: transparent; border: 1px dashed var(--ink-ghost);
  font-style: italic; color: var(--ink-faint); font-size: 12.5px;
  padding: 12px 16px;
}

/* ── Open item ── */
.ins-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0 0 60px; margin: 0; }
.ins-item {
  list-style: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--bg-card);
  border: 1px solid var(--ink-ghost); border-radius: 2px;
  cursor: pointer; animation: ins-fadeIn 0.3s ease;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ins-col--yar .ins-item { text-align: left; flex-direction: row; }
.ins-col--mar .ins-item { text-align: right; flex-direction: row-reverse; }
.ins-col--yar .ins-item:hover { background: var(--yar-bg); border-color: var(--yar-border); }
.ins-col--mar .ins-item:hover { background: var(--mar-bg); border-color: var(--mar-border); }
.ins-item.is-leaving {
  animation: ins-liftAndDrift 0.55s cubic-bezier(.55,.05,.55,.95) forwards;
  pointer-events: none;
}
.ins-col--yar .ins-item { --drift: 40px; }
.ins-col--mar .ins-item { --drift: -40px; }

.ins-check {
  margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--ink-ghost);
  border-radius: 3px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.ins-col--yar .ins-item:hover .ins-check { border-color: var(--yar); }
.ins-col--mar .ins-item:hover .ins-check { border-color: var(--mar); }
.ins-check.is-checked { transform: scale(1.05); }
.ins-col--yar .ins-check.is-checked { background: var(--yar); border-color: var(--yar); }
.ins-col--mar .ins-check.is-checked { background: var(--mar); border-color: var(--mar); }
.ins-check svg { display: none; }
.ins-check.is-checked svg { display: block; }

.ins-item__body { flex: 1; min-width: 0; }
.ins-item__title {
  font-family: var(--sans); font-size: 14.5px; font-weight: 400;
  color: var(--ink); line-height: 1.45; text-wrap: pretty;
}
.ins-item__desc {
  margin-top: 4px; font-family: var(--sans); font-size: 12.5px; font-weight: 300;
  color: var(--ink-mid); line-height: 1.55; font-style: italic; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ins-item__meta {
  margin-top: 6px; display: flex; align-items: center; gap: 10px;
}
.ins-col--yar .ins-item__meta { justify-content: flex-start; }
.ins-col--mar .ins-item__meta { justify-content: flex-end; }
.ins-item__date {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.ins-chip {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink-mid); letter-spacing: 0.01em;
}
.ins-chip--muted { color: var(--ink-faint); }

.ins-empty {
  list-style: none; padding: 24px 12px;
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-faint); text-align: center;
  border: 1px dashed var(--ink-ghost); border-radius: 2px;
}

/* ── Crease (center fold) — mirrors template-parts/divider.php + homepage.css ── */
.ins-crease { position: relative; display: flex; justify-content: center; }
.ins-crease__layers {
  position: absolute; top: 56px; left: 0; right: 0; bottom: 0;
  z-index: 0; pointer-events: none;
}
.ins-crease__shadow { position: absolute; top: 0; bottom: 0; width: 50%; }
.ins-crease__shadow--left  { left: 0;  background: linear-gradient(to right, transparent, oklch(60% 0.012 230 / 0.13)); }
.ins-crease__shadow--right { right: 0; background: linear-gradient(to left,  transparent, oklch(60% 0.012 230 / 0.13)); }
.ins-crease__line {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 1px; background: oklch(58% 0.010 230 / 0.45);
}
.ins-crease__highlight {
  position: absolute; top: 0; bottom: 0; left: calc(50% + 1px);
  width: 1px; background: oklch(99% 0.005 230 / 0.8);
}

/* ── Seam ── */
.ins-seam {
  position: relative; z-index: 1;
  padding: 0 18px 60px; display: flex; flex-direction: column;
  gap: 22px; max-width: 320px; margin: 0 auto; width: 100%;
}
.ins-seam__head {
  height: 56px; box-sizing: border-box;
  padding: 0 4px 14px; border-bottom: 1px solid var(--ink-ghost); text-align: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ins-seam__label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--shared); margin-bottom: 6px; font-weight: 500;
}
.ins-seam__count {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--ink-faint); letter-spacing: 0.005em;
}
.ins-seam__count b { color: var(--ink-mid); font-weight: 500; }
.ins-seam__empty {
  position: relative; z-index: 1;
  padding: 32px 18px; font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-faint); text-align: center; text-wrap: pretty;
  background: var(--bg-card); border: 1px dashed var(--ink-ghost); border-radius: 2px;
}

/* ── Shared card ── */
.ins-shared {
  position: relative; background: var(--bg-paper);
  border: 1px solid var(--ink-ghost); border-radius: 2px;
  padding: 16px 18px 14px; cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.04), 0 8px 22px -14px oklch(20% 0.02 55 / 0.22);
  animation: ins-fadeIn 0.35s ease;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ins-shared:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-2px);
  box-shadow: 0 2px 0 oklch(0% 0 0 / 0.05), 0 14px 28px -14px oklch(20% 0.02 55 / 0.28);
}
.ins-shared.just-arrived {
  animation: ins-settleIntoSeam 0.65s cubic-bezier(.2,.7,.3,1) backwards;
}
.ins-shared__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 8px;
}
.ins-shared__origin {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.ins-shared__dot { width: 5px; height: 5px; border-radius: 50%; opacity: 0.7; }
.ins-shared__dot--yar { background: var(--yar); }
.ins-shared__dot--mar { background: var(--mar); }
.ins-shared__together {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--shared); font-weight: 500;
}
.ins-shared__title {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: 19px; line-height: 1.28; color: var(--ink);
  letter-spacing: -0.005em; text-wrap: pretty; margin-bottom: 8px;
}
.ins-shared__reflection {
  font-family: var(--sans); font-size: 13px; font-weight: 300;
  line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ins-shared__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 6px; border-top: 1px solid oklch(78% 0.025 55 / 0.55); gap: 8px;
}
.ins-shared__date {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-faint); letter-spacing: 0.01em;
}

/* ── Modal ── */
.ins-modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(22% 0.012 55 / 0.42); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 40px; overflow-y: auto;
  animation: ins-scrimIn 0.2s ease;
}
.ins-modal-scrim.is-closing { opacity: 0; transition: opacity 0.18s; }
.ins-modal {
  width: 100%; max-width: 560px;
  background: var(--bg-card); border: 1px solid var(--ink-ghost);
  border-radius: 3px; padding: 28px 32px 24px; position: relative;
  box-shadow: 0 30px 80px -30px oklch(20% 0.02 55 / 0.45), 0 2px 0 oklch(0% 0 0 / 0.04);
  animation: ins-modalIn 0.25s cubic-bezier(.2,.7,.3,1);
}
.ins-modal--shared { background: var(--bg-paper); }
.ins-modal.is-closing { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.18s, transform 0.18s; }
.ins-modal__close {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  background: transparent; border: none; cursor: pointer; color: var(--ink-faint);
  font-size: 22px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ins-modal__close:hover { color: var(--ink); }
.ins-modal__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.ins-modal__meta-dot { width: 6px; height: 6px; border-radius: 50%; opacity: 0.75; display: inline-block; margin-right: 5px; }
.ins-modal__meta-dot--yar { background: var(--yar); }
.ins-modal__meta-dot--mar { background: var(--mar); }
.ins-modal__lived { color: var(--shared); }
.ins-modal__title {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1.18; color: var(--ink);
  letter-spacing: -0.005em; margin-bottom: 16px; text-wrap: pretty;
  outline: none; cursor: text;
}
.ins-modal__title:empty::before {
  content: attr(data-placeholder); color: var(--ink-faint); font-style: italic; pointer-events: none;
}
.ins-modal__picker { position: relative; margin-bottom: 22px; }
.ins-modal__picker-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--ink-ghost);
  border-radius: 100px; padding: 5px 14px; cursor: pointer;
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--ink-mid); letter-spacing: 0.01em;
}
.ins-modal__picker-label {
  font-family: var(--sans); font-style: normal; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 500; margin-right: 2px;
}
.ins-modal__picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 31;
  background: var(--bg-card); border: 1px solid var(--ink-ghost);
  border-radius: 2px; padding: 4px; min-width: 140px;
  box-shadow: 0 8px 22px -10px oklch(20% 0.02 55 / 0.25);
}
.ins-modal__picker-opt {
  width: 100%; text-align: left; background: transparent; border: none;
  border-radius: 2px; padding: 8px 12px; cursor: pointer;
  font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink);
}
.ins-modal__picker-opt.is-current { background: oklch(94% 0.015 70); }
.ins-field { margin-bottom: 18px; }
.ins-field__label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 8px;
}
.ins-field__input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--ink-ghost); outline: none; resize: none;
  padding: 6px 0 8px; font-family: var(--sans); font-size: 14px; font-weight: 300;
  line-height: 1.55; color: var(--ink); letter-spacing: 0.005em; text-wrap: pretty; min-height: 60px;
}
.ins-field__input:focus { border-bottom-color: var(--ink-mid); }
.ins-field__input--serif { font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 400; }
.ins-modal__actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ink-ghost);
  gap: 12px; flex-wrap: wrap;
}
.ins-btn-link {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500; padding: 4px 0; color: var(--ink-faint);
}
.ins-btn-link--mid { color: var(--ink-mid); }
.ins-modal__actions-right { display: flex; align-items: center; gap: 16px; }
.ins-btn-primary {
  border: none; cursor: pointer; color: var(--bg);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; padding: 10px 18px; border-radius: 2px;
}
.ins-btn-primary--yar { background: var(--yar); }
.ins-btn-primary--mar { background: var(--mar); }

/* ── Mobile nav (user toggle + View Shared) ── */
.ins-tabs { display: none; }

@media (max-width: 820px) {
  /* Header is non-fixed on mobile (header.css) → no top padding needed */
  .ins-main { padding-left: 18px; padding-right: 18px; padding-top: 0; }
  .ins-pills { margin-bottom: 22px; }
  .ins-counters { display: none; }

  /* Nav row: toggle centered, View Shared right (same row). Not sticky. */
  .ins-tabs {
    display: block; position: static;
    background: var(--bg); order: -1;
    padding: 10px 0; margin-bottom: 8px;
    border-bottom: 1px solid var(--ink-ghost);
  }
  .ins-utoggle-wrap { display: flex; justify-content: center; }
  .ins-view-shared {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 500; color: var(--ink-faint);
    padding: 4px 2px; transition: color 0.18s ease;
  }
  .ins-view-shared.is-active { color: var(--shared); }

  .ins-utoggle {
    display: inline-flex;
    background: var(--bg-card); border: 1px solid var(--ink-ghost);
    border-radius: 100px; padding: 2px;
  }
  .ins-utoggle__btn {
    background: transparent; border: 1px solid transparent; border-radius: 100px;
    font-family: var(--sans); font-size: 12px; font-weight: 400;
    color: var(--ink-faint); padding: 4px 18px; cursor: pointer;
    letter-spacing: 0.02em; transition: all 0.18s ease;
  }
  .ins-utoggle__btn.is-active.ins-utoggle__btn--yar { background: var(--yar-bg); border-color: var(--yar-border); color: var(--yar); font-weight: 500; }
  .ins-utoggle__btn.is-active.ins-utoggle__btn--mar { background: var(--mar-bg); border-color: var(--mar-border); color: var(--mar); font-weight: 500; }

  /* Single-column on mobile; JS toggles which panel shows via .is-hidden */
  .ins-grid { display: block; }
  .ins-col--yar, .ins-col--mar { padding: 0; }
  .ins-col__head, .ins-seam__head { height: auto; }
  .ins-crease { display: block; }
  .ins-crease__layers { display: none; }
  .ins-seam { max-width: none; padding: 0 0 60px; }
  .is-hidden { display: none !important; }
}