/* ============================================================
   DASHBOARD FEATURE SHOWCASE
   Apple-style alternating sections — editorial text + live widgets
   ============================================================ */

.dash-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 56px;
  padding: 48px 0;
}

.dash-section + .dash-section {
  border-top: 1px solid color-mix(in srgb, var(--dm-outline-variant) 25%, transparent);
}

.dash-section--rev {
  flex-direction: row-reverse;
}

.dash-section__text {
  flex: 0 0 38%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-section__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dm-primary);
}

.dash-section__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--dm-on-surface);
}

.dash-section__body {
  font-size: 14px;
  line-height: 1.72;
  color: var(--dm-on-surface-variant);
  margin: 4px 0 0;
}

.dash-section__widgets {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Notes — scattered Post-It cluster ─────────────────── */

.dash-notes-cluster {
  position: relative;
  width: 375px;
  height: 205px;
  flex-shrink: 0;
}

/* z-index trick: jumps to 10 immediately on hover-in,
   but waits 0.32s before resetting so the card stays on top
   through its whole lift-return animation. */
.note-tilt {
  position: absolute;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0.32s;
}

.note-tilt:hover {
  z-index: 10;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0s;
}

.note-tilt .note-card {
  width: 155px;
}

.note-tilt--a { left: 0;    top: 20px; transform: rotate(-4.5deg); z-index: 3; --base-rotation: -4.5; }
.note-tilt--b { left: 110px; top: 0;  transform: rotate(2.5deg);  z-index: 2; --base-rotation: 2.5; }
.note-tilt--c { left: 220px; top: 16px; transform: rotate(-2deg); z-index: 1; --base-rotation: -2; }

/* Lift card up while preserving its rotation angle */
.note-tilt--a:hover { transform: rotate(-4.5deg) translateY(-14px); }
.note-tilt--b:hover { transform: rotate(2.5deg)  translateY(-14px); }
.note-tilt--c:hover { transform: rotate(-2deg)   translateY(-14px); }

/* ── Appliances — staggered shelf ──────────────────────── */

.dash-appliances-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

/* Tilt wrappers let the appliance-card handle its own hover scale
   while the parent holds the vertical offset. */
.appliance-tilt {
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.appliance-tilt .appliance-card {
  width: 165px;
}

/* Dryer is Done — rises above the others. Running machines sit lower.
   On hover each card lifts 14px from its resting offset. */
.appliance-tilt--wm    { transform: translateY(18px); }
.appliance-tilt--dryer { transform: translateY(0);    }
.appliance-tilt--dw    { transform: translateY(10px); }

.appliance-tilt--wm:hover    { transform: translateY(4px);  }
.appliance-tilt--dryer:hover { transform: translateY(-14px); }
.appliance-tilt--dw:hover    { transform: translateY(-4px); }

/* ── Calendar — big card + cascading event cards ────────── */

.dash-calendar-cluster {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.dash-cal-top .calendar-card {
  width: 180px;
  flex-shrink: 0;
}

/* Three event cards in a diagonal cascade — like cards sliding
   off the edge of a desk. */
.dash-events-cluster {
  position: relative;
  width: 250px;
  height: 280px;
  flex-shrink: 0;
}

.event-tilt {
  position: absolute;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0.32s;
}

.event-tilt:hover {
  z-index: 10;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0s;
}

.event-tilt .away-card,
.event-tilt .party-card,
.event-tilt .guests-card {
  width: 140px;
}

.event-tilt--away   { top: 0;    left: 0;    transform: rotate(-5deg);   z-index: 3; --base-rotation: -5; }
.event-tilt--party  { top: 70px; left: 55px; transform: rotate(3.5deg);  z-index: 2; --base-rotation: 3.5; }
.event-tilt--guests { top: 140px; left: 110px; transform: rotate(-2.5deg); z-index: 1; --base-rotation: -2.5; }

.event-tilt--away:hover   { transform: rotate(-5deg)   translateY(-14px); }
.event-tilt--party:hover  { transform: rotate(3.5deg)  translateY(-14px); }
.event-tilt--guests:hover { transform: rotate(-2.5deg) translateY(-14px); }

/* ── Inventory — tilted clipboard ──────────────────────── */

.dash-inventory-tilt {
  --base-rotation: 3;
  transform: rotate(3deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-inventory-tilt:hover {
  transform: rotate(0deg);
}

.dash-inventory-tilt .inventory-card {
  width: 188px;
}

/* ── Weather — pinned card, straightens on hover ────────── */

.dash-weather-tilt {
  --base-rotation: -4;
  transform: rotate(-4deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-weather-tilt:hover {
  transform: rotate(0deg);
}

.dash-weather-tilt .weather-card {
  width: 200px;
}

/* ── Mobile ─────────────────────────────────────────────── */

/* ── Column layout ───────────────────────────────────────────
   Row layout clips at ~1080px (appliances = 523px + 416px
   of text+gap overhead). Switch to stacked before that.      */
@media (max-width: 1080px) {
  #pages-section {
    padding: 0 1rem;
  }

  .dash-section,
  .dash-section.dash-section--rev {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 48px 0;
  }

  .dash-section__text {
    flex: none;
    max-width: 100%;
  }

  /* Center widgets — body overflow-x:clip prevents page-level scroll */
  .dash-section__widgets {
    width: 100%;
    justify-content: center;
  }

  /* Calendar: stack vertically, both sub-elements centered */
  .dash-calendar-cluster {
    flex-direction: column;
    align-items: center;
  }
}

/* ── Appliance wrap ──────────────────────────────────────────
   In column mode the 3-wide row (523px) still clips below
   ~617px. Wrap to 2+1 before that.                           */
@media (max-width: 640px) {
  .dash-appliances-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Reset Y-stagger — meaningless once cards are on two rows */
  .appliance-tilt--wm,
  .appliance-tilt--dryer,
  .appliance-tilt--dw    { transform: translateY(0); }

  .appliance-tilt--wm:hover,
  .appliance-tilt--dryer:hover,
  .appliance-tilt--dw:hover { transform: translateY(-12px); }
}

/* ── Phone sizing ────────────────────────────────────────────
   At ≤480px give everything room to breathe on narrow phones. */
@media (max-width: 480px) {
  .dash-section__title {
    font-size: 22px;
  }

  /* Notes cluster — fit on 360px phones (292px inner width) */
  .dash-notes-cluster {
    width: 272px;
    height: 164px;
  }

  .note-tilt .note-card { width: 112px; }
  .note-tilt--a { left: 0;    top: 14px; }
  .note-tilt--b { left: 80px; top: 0;    }
  .note-tilt--c { left: 160px; top: 11px; }

  /* Appliances — 2-wide with 138px cards = 286px, fits on 360px */
  .appliance-tilt .appliance-card { width: 138px; }
  .dash-appliances-row { gap: 10px; }

  /* Calendar */
  .dash-cal-top .calendar-card { width: 160px; }

  .event-tilt .away-card,
  .event-tilt .party-card,
  .event-tilt .guests-card { width: 130px; }

  /* Inventory / Weather */
  .dash-inventory-tilt .inventory-card { width: 155px; }
  .dash-weather-tilt .weather-card     { width: 165px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard section entrance animations
   Triggered by JS adding .is-visible via IntersectionObserver.
   Uses standalone `translate` (CSS Motion Path) so it never conflicts
   with hover `transform` — they are separate CSS properties.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Initial hidden states ──────────────────────────────────────────────── */

.dash-section .dash-section__eyebrow,
.dash-section .dash-section__title,
.dash-section .dash-section__body { opacity: 0; }

/* Notes: A and C start stacked at card B's position */
.note-tilt--a { opacity: 0; translate: 110px -20px; }
.note-tilt--b { opacity: 0; translate: 0 12px; }
.note-tilt--c { opacity: 0; translate: -110px -16px; }

/* Appliances: below their shelf resting points */
.appliance-tilt { opacity: 0; translate: 0 40px; }

/* Calendar card: slightly above its slot */
.dash-cal-top { opacity: 0; translate: 0 -20px; }

/* Event cards: Away and Guests start stacked at Party's position */
.event-tilt--away   { opacity: 0; translate: 55px 70px; }
.event-tilt--party  { opacity: 0; }
.event-tilt--guests { opacity: 0; translate: -55px -70px; }

/* Inventory & Weather: below their tilted resting points */
.dash-inventory-tilt { opacity: 0; translate: 0 30px; }
.dash-weather-tilt   { opacity: 0; translate: 0 30px; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes dm-fade-up {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-fade-up-sm {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-fade-down {
  from { opacity: 0; translate: 0 -20px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dm-note-a {
  from { opacity: 0; translate: 110px -20px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-note-c {
  from { opacity: 0; translate: -110px -16px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-rise {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-rise-sm {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-event-away {
  from { opacity: 0; translate: 55px 70px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-event-guests {
  from { opacity: 0; translate: -55px -70px; }
  to   { opacity: 1; translate: none; }
}

/* ── Triggers — applied once section enters viewport ────────────────────── */

/* Text */
.dash-section.is-visible .dash-section__eyebrow {
  animation: dm-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0ms both;
}
.dash-section.is-visible .dash-section__title {
  animation: dm-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
.dash-section.is-visible .dash-section__body {
  animation: dm-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

/* Notes — all emerge from center stack simultaneously */
.dash-section.is-visible .note-tilt--a {
  animation: dm-note-a 0.70s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.dash-section.is-visible .note-tilt--b {
  animation: dm-fade-up-sm 0.12s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.dash-section.is-visible .note-tilt--c {
  animation: dm-note-c 0.70s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

/* Appliances — rise into shelf with cascade */
.dash-section.is-visible .appliance-tilt--wm {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.dash-section.is-visible .appliance-tilt--dryer {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 230ms both;
}
.dash-section.is-visible .appliance-tilt--dw {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
}

/* Calendar — card drops, then events fan diagonally */
.dash-section.is-visible .dash-cal-top {
  animation: dm-fade-down 0.55s cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}
.dash-section.is-visible .event-tilt--away {
  animation: dm-event-away 0.65s cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
}
.dash-section.is-visible .event-tilt--party {
  animation: dm-fade-in 0.40s ease 340ms both;
}
.dash-section.is-visible .event-tilt--guests {
  animation: dm-event-guests 0.65s cubic-bezier(0.22, 1, 0.36, 1) 440ms both;
}

/* Inventory */
.dash-section.is-visible .dash-inventory-tilt {
  animation: dm-rise-sm 0.60s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

/* Weather */
.dash-section.is-visible .dash-weather-tilt {
  animation: dm-rise-sm 0.60s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

/* ── Mobile note keyframes (smaller cluster = smaller offsets) ──────────── */

@keyframes dm-note-a-sm {
  from { opacity: 0; translate: 80px -14px; }
  to   { opacity: 1; translate: none; }
}

@keyframes dm-note-c-sm {
  from { opacity: 0; translate: -80px -11px; }
  to   { opacity: 1; translate: none; }
}

@media (max-width: 480px) {
  .note-tilt--a { translate: 80px -14px; }
  .note-tilt--c { translate: -80px -11px; }

  .dash-section.is-visible .note-tilt--a {
    animation-name: dm-note-a-sm;
  }
  .dash-section.is-visible .note-tilt--c {
    animation-name: dm-note-c-sm;
  }
}

/* ── Respect reduced-motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dash-section .dash-section__eyebrow,
  .dash-section .dash-section__title,
  .dash-section .dash-section__body,
  .note-tilt--a, .note-tilt--b, .note-tilt--c,
  .appliance-tilt,
  .dash-cal-top,
  .event-tilt--away, .event-tilt--party, .event-tilt--guests,
  .dash-inventory-tilt,
  .dash-weather-tilt,
  .cal-pg-tilt,
  .cal-ev-tilt--a, .cal-ev-tilt--b,
  .cal-ev-tilt--c, .cal-ev-tilt--d,
  .cal-ev-tilt--e, .cal-ev-tilt--f {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

/* ============================================================
   CALENDAR PAGE — SECTIONS
   ============================================================ */

/* ── Calendar grid tilt wrapper ─────────────────────────── */

.cal-pg-tilt {
  transform: rotate(2deg);
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.cal-pg-tilt:hover { transform: rotate(0deg); }

.cal-pg-tilt .cal-pg-wrap { width: 280px; }

/* ── Event card scatter ─────────────────────────────────── */

.cal-ev-scatter {
  position: relative;
  width: 318px;
  height: 235px;
  flex-shrink: 0;
  overflow: visible;
}

/* Section 4 (party card is taller) needs more room */
#cal-sec-social .cal-ev-scatter { height: 265px; }

.cal-ev-tilt {
  position: absolute;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0.32s;
}

.cal-ev-tilt:hover {
  z-index: 10;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              z-index 0s 0s;
}

.cal-ev-tilt .ev-row {
  width: 265px;
  margin-bottom: 0;
}

/* Events & Jobs */
.cal-ev-tilt--a { top: 0;     left: 0;    transform: rotate(-3.5deg); z-index: 2; --base-rotation: -3.5; }
.cal-ev-tilt--b { top: 104px; left: 30px; transform: rotate(2.0deg);  z-index: 1; --base-rotation:  2.0; }

.cal-ev-tilt--a:hover { transform: rotate(-3.5deg) translateY(-12px); }
.cal-ev-tilt--b:hover { transform: rotate(2.0deg)  translateY(-12px); }

/* Away & Guests */
.cal-ev-tilt--c { top: 0;    left: 0;    transform: rotate(-2.5deg); z-index: 2; --base-rotation: -2.5; }
.cal-ev-tilt--d { top: 98px; left: 24px; transform: rotate(3.5deg);  z-index: 1; --base-rotation:  3.5; }

.cal-ev-tilt--c:hover { transform: rotate(-2.5deg) translateY(-12px); }
.cal-ev-tilt--d:hover { transform: rotate(3.5deg)  translateY(-12px); }

/* Parties & Notes */
.cal-ev-tilt--e { top: 0;     left: 0;    transform: rotate(-4.0deg); z-index: 2; --base-rotation: -4.0; }
.cal-ev-tilt--f { top: 118px; left: 28px; transform: rotate(1.5deg);  z-index: 1; --base-rotation:  1.5; }

.cal-ev-tilt--e:hover { transform: rotate(-4.0deg) translateY(-12px); }
.cal-ev-tilt--f:hover { transform: rotate(1.5deg)  translateY(-12px); }

/* ── Mobile — preserve tilt, reflow as relative stack ──────
   Cards stay organic (small rotation + x-offset) but are
   positioned in-flow instead of absolute so nothing clips.  */

@media (max-width: 1080px) {
  .cal-pg-tilt .cal-pg-wrap { width: 100%; max-width: 320px; }

  .cal-ev-scatter,
  #cal-sec-social .cal-ev-scatter {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    overflow: visible;
  }

  /* Reflow to in-flow but keep subtle tilts and diagonal offset */
  .cal-ev-tilt {
    position: relative;
    top: auto; left: auto;
    display: block;
    margin-bottom: -10px; /* slight overlap between cards */
  }

  .cal-ev-tilt:last-child { margin-bottom: 0; }

  /* First of each pair: flush left, slight left-tilt */
  .cal-ev-tilt--a { transform: rotate(-1.2deg); margin-left: 0;    --base-rotation: -1.2; }
  .cal-ev-tilt--c { transform: rotate(-1.0deg); margin-left: 0;    --base-rotation: -1.0; }
  .cal-ev-tilt--e { transform: rotate(-1.5deg); margin-left: 0;    --base-rotation: -1.5; }

  /* Second of each pair: shifted right, slight right-tilt */
  .cal-ev-tilt--b { transform: rotate(1.0deg);  margin-left: 12px; --base-rotation:  1.0; }
  .cal-ev-tilt--d { transform: rotate(1.2deg);  margin-left: 10px; --base-rotation:  1.2; }
  .cal-ev-tilt--f { transform: rotate(0.8deg);  margin-left: 14px; --base-rotation:  0.8; }

  /* Hover: lift while keeping tilt */
  .cal-ev-tilt--a:hover { transform: rotate(-1.2deg) translateY(-6px); }
  .cal-ev-tilt--b:hover { transform: rotate(1.0deg)  translateY(-6px); }
  .cal-ev-tilt--c:hover { transform: rotate(-1.0deg) translateY(-6px); }
  .cal-ev-tilt--d:hover { transform: rotate(1.2deg)  translateY(-6px); }
  .cal-ev-tilt--e:hover { transform: rotate(-1.5deg) translateY(-6px); }
  .cal-ev-tilt--f:hover { transform: rotate(0.8deg)  translateY(-6px); }

  .cal-ev-tilt .ev-row { width: 100%; }
}

/* ── Entrance animations ────────────────────────────────── */

.cal-pg-tilt      { opacity: 0; translate: 0 30px; }
.cal-ev-tilt--a,
.cal-ev-tilt--c,
.cal-ev-tilt--e   { opacity: 0; translate: 0 30px; }
.cal-ev-tilt--b,
.cal-ev-tilt--d,
.cal-ev-tilt--f   { opacity: 0; translate: 0 30px; }

.dash-section.is-visible .cal-pg-tilt {
  animation: dm-rise-sm 0.60s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

.dash-section.is-visible .cal-ev-tilt--a,
.dash-section.is-visible .cal-ev-tilt--c,
.dash-section.is-visible .cal-ev-tilt--e {
  animation: dm-rise-sm 0.60s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

.dash-section.is-visible .cal-ev-tilt--b,
.dash-section.is-visible .cal-ev-tilt--d,
.dash-section.is-visible .cal-ev-tilt--f {
  animation: dm-rise-sm 0.60s cubic-bezier(0.22, 1, 0.36, 1) 270ms both;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cal-pg-tilt,
  .cal-ev-tilt--a, .cal-ev-tilt--b,
  .cal-ev-tilt--c, .cal-ev-tilt--d,
  .cal-ev-tilt--e, .cal-ev-tilt--f {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

.cal-pg-wrap {
  background: var(--dm-surface-container-low);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: var(--dm-shadow-card);
  padding: 14px 14px 8px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .cal-pg-wrap {
    background: var(--dm-surface-container);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* ── Nav row ────────────────────────────────────────────── */

/* Matches the app's centered glass pill row */
.cal-pg-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cal-pg-month-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--dm-on-primary);
  letter-spacing: -0.01em;
  background: var(--dm-primary);
  border-radius: 22px;
  padding: 9px 16px;
  min-width: 152px;
  text-align: center;
}

.cal-pg-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--dm-surface-container-high);
  color: var(--dm-on-surface);
  cursor: pointer;
  font-size: 20px;
  border-radius: 22px;
  padding: 9px 14px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cal-pg-nav-btn:hover  { background: var(--dm-secondary-container); transform: scale(1.06); }
.cal-pg-nav-btn:active { transform: scale(0.92); }

/* ── Day-of-week labels ─────────────────────────────────── */

.cal-pg-day-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.cal-pg-day-labels span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--dm-primary);
  opacity: 0.5;
  padding: 6px 0;
}

/* ── Row separator ──────────────────────────────────────── */

.cal-pg-sep {
  height: 1px;
  background: var(--dm-outline-variant);
  opacity: 0.18;
  margin: 0 6px 3px;
}

/* ── Week row ───────────────────────────────────────────── */

.cal-pg-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-pg-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cal-pg-cell--empty { cursor: default; }

.cal-pg-cell-inner {
  width: 88%;
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cal-pg-cell:not(.cal-pg-cell--empty):hover .cal-pg-cell-inner {
  background: var(--dm-surface-container-high);
  transform: scale(1.08);
}

/* Today: filled + white text (treated as "selected today" in the app) */
.cal-pg-cell--today .cal-pg-cell-inner {
  background: var(--dm-primary);
}

.cal-pg-cell-num {
  font-size: 15px;
  font-weight: 500;
  color: var(--dm-on-surface);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cal-pg-cell--today .cal-pg-cell-num {
  color: var(--dm-on-primary);
  font-weight: 800;
}

/* ── Event dots ─────────────────────────────────────────── */

.cal-pg-cell-dots {
  position: absolute;
  bottom: 4px;
  display: flex;
  gap: 2px;
}

.cal-pg-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Multi-day bar track ────────────────────────────────── */

.cal-pg-bars {
  position: relative;
  margin-bottom: 2px;
}

.cal-pg-bar {
  position: absolute;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cal-pg-bar-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* ============================================================
   CALENDAR PAGE — EVENT MOSAIC
   ============================================================ */

.cal-pg-events-hd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding-top: 4px;
}

.cal-pg-events-title {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dm-on-surface);
  margin: 0;
}

.ev-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Per-card tilt using CSS custom property so hover/active can reuse it */
.ev-mosaic .ev-row {
  --ev-tilt: 0deg;
  margin-bottom: 0;
  transform: rotate(var(--ev-tilt));
}

.ev-mosaic .ev-row:nth-child(1) { --ev-tilt: -0.7deg; }
.ev-mosaic .ev-row:nth-child(2) { --ev-tilt:  0.5deg; }
.ev-mosaic .ev-row:nth-child(3) { --ev-tilt:  0.4deg; }
.ev-mosaic .ev-row:nth-child(4) { --ev-tilt: -0.6deg; }
.ev-mosaic .ev-row:nth-child(5) { --ev-tilt: -0.3deg; }
.ev-mosaic .ev-row:nth-child(6) { --ev-tilt:  1.0deg; }

/* Compound transforms include the tilt so it's preserved on interaction */
.ev-mosaic .ev-row:hover  { transform: translateY(-2px) rotate(var(--ev-tilt)); }
.ev-mosaic .ev-row:active { transform: scale(0.985)     rotate(var(--ev-tilt)); }

/* Mobile: single column, no tilts */
@media (max-width: 640px) {
  .ev-mosaic {
    grid-template-columns: 1fr;
  }

  .ev-mosaic .ev-row,
  .ev-mosaic .ev-row:nth-child(1),
  .ev-mosaic .ev-row:nth-child(2),
  .ev-mosaic .ev-row:nth-child(3),
  .ev-mosaic .ev-row:nth-child(4),
  .ev-mosaic .ev-row:nth-child(5),
  .ev-mosaic .ev-row:nth-child(6) { --ev-tilt: 0deg; }
}

/* ============================================================
   TASKS PAGE — SECTIONS
   ============================================================ */

/* ── Screen wrapper (filter chips + card list) ──────────────── */

.tk-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
  flex-shrink: 0;
}

/* ── Section 1: Task cards stack ───────────────────────────── */

.tk-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  flex-shrink: 0;
}

/* ── Task card ──────────────────────────────────────────────── */

.tk-card {
  background: var(--dm-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 24px;
  padding: 14px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .tk-card { border-color: rgba(255, 255, 255, 0.08); }
}

/* 1px tinted top-edge highlight — mirrors tintedHighlight() in colorUtils.ts */
.tk-card__highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(175, 194, 179, 0.90);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .tk-card__highlight { background: rgba(175, 194, 179, 0.14); }
}

/* ── Card header row ────────────────────────────────────────── */

.tk-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.tk-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-on-surface);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-card__chevron {
  font-size: 16px !important;
  color: var(--dm-on-surface-variant);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tk-card--open .tk-card__chevron { transform: rotate(180deg); }

/* ── Card accordion body ────────────────────────────────────── */

.tk-card__header { cursor: pointer; user-select: none; }

/* Press feedback via transform (separate from the animation/translate entrance system) */
.tk-card { transform: scale(1); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.tk-card--pressing { transform: scale(0.97); transition: transform 0.08s ease; }

.tk-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.tk-card__body-inner { min-height: 0; overflow: hidden; }

.tk-card--open .tk-card__body { grid-template-rows: 1fr; }

/* ── Completion stepper pill ────────────────────────────────── */

.tk-stepper-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--dm-primary) 14%, transparent);
  border-radius: 999px;
  padding: 3px 6px;
  flex-shrink: 0;
}

.tk-stepper-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dm-primary);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.tk-stepper-btn ion-icon { font-size: 16px !important; display: block; }

.tk-stepper-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-primary);
  min-width: 18px;
  text-align: center;
  line-height: 26px;
}

.tk-stepper-count--zero { color: var(--dm-on-surface-variant); }

/* ── Expanded card body ─────────────────────────────────────── */

.tk-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--dm-on-surface-variant);
  margin: 12px 0 14px;
}

.tk-completions-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dm-on-surface-variant);
  margin-bottom: 10px;
}

/* ── Mini leaderboard (inside expanded card) ────────────────── */

.tk-mini-lb {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tk-mini-lb-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.tk-mini-lb-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.tk-mini-lb-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--dm-on-surface);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-mini-lb-name--you { font-weight: 800; }

.tk-mini-lb-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--dm-on-surface-variant);
  flex-shrink: 0;
  min-width: 16px;
  text-align: right;
}

.tk-mini-lb-count--active { color: var(--dm-primary); }

.tk-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--dm-primary) 14%, transparent);
}

.tk-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--dm-primary);
  width: 0;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Filter chips row ───────────────────────────────────────── */

.tk-filter-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

.tk-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--dm-surface-container);
  color: var(--dm-on-surface-variant);
  border: 1px solid var(--dm-outline-variant);
  white-space: nowrap;
}

.tk-filter-chip ion-icon { font-size: 13px !important; }

.tk-filter-chip--active {
  background: var(--dm-primary);
  color: var(--dm-on-primary);
  border-color: transparent;
}

/* ── Entrance animations ────────────────────────────────────── */

/* Initial hidden states */
.tk-filter-row { opacity: 0; translate: 0 10px; }

.tk-card--anim-1,
.tk-card--anim-2,
.tk-card--anim-3 { opacity: 0; translate: 0 28px; }

/* Collapsed-card bars are always 0 with no transition */
.tk-card:not(.tk-card--open) .tk-bar-fill { width: 0 !important; transition: none; }

/* Filter row entrance */
.dash-section.is-visible .tk-filter-row {
  animation: dm-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

/* Card stack — staggered rise */
.dash-section.is-visible .tk-card--anim-1 {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}
.dash-section.is-visible .tk-card--anim-2 {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}
.dash-section.is-visible .tk-card--anim-3 {
  animation: dm-rise 0.60s cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
}

/* Bars animate to target only when card is open and section is visible */
.dash-section.is-visible .tk-card--open .tk-bar-fill { width: var(--tk-bar-target); }

/* Stagger bar animations */
.dash-section.is-visible .tk-bar-fill--1 { transition-delay: 360ms; }
.dash-section.is-visible .tk-bar-fill--2 { transition-delay: 460ms; }
.dash-section.is-visible .tk-bar-fill--3 { transition-delay: 560ms; }

/* ── Mobile responsive ──────────────────────────────────────── */

@media (max-width: 480px) {
  .tk-screen { width: 100%; max-width: 320px; }
  .tk-cards-stack { width: 100%; }
}

/* ── Respect reduced-motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tk-filter-row,
  .tk-card--anim-1,
  .tk-card--anim-2,
  .tk-card--anim-3 {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }

  .tk-card__body { transition: none !important; }

  .tk-bar-fill { transition: none !important; }
  .tk-card:not(.tk-card--open) .tk-bar-fill { width: 0 !important; }
  .dash-section.is-visible .tk-card--open .tk-bar-fill { width: var(--tk-bar-target) !important; }
}

/* ══════════════════════════════════════════════════════════════
   INVENTORY PAGE — panel-inventory showcase
   inv-pg-*        grid screen + cards (InventoryCardSmall port)
   inv-item-*      per-item morph+flip popup
   ══════════════════════════════════════════════════════════════ */

/* ── Screen wrapper (mimics the app's SectionList container) ── */

.inv-pg-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 280px;
  max-width: 310px;
}

/* ── Category header pill — mirrors SectionHeader component ─── */

.inv-pg-cat-row {
  display: flex;
  flex-direction: row;
  padding: 6px 0 2px;
}

.inv-pg-cat-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border-radius: 100px;
  background: var(--dm-surface-container);
  border: 1px solid var(--dm-outline-variant);
}

.inv-pg-cat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dm-on-surface);
}

.inv-pg-cat-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--dm-primary-container);
  color: var(--dm-on-primary-container);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── 2-column card grid ────────────────────────────────────── */

.inv-pg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Inventory card — mirrors InventoryCardSmall ───────────── */

.inv-pg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  gap: 3px;
  min-height: 100px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.inv-pg-card--empty {
  background: var(--dm-error-container);
  color: var(--dm-on-error-container);
}
.inv-pg-card--low {
  background: var(--dm-tertiary-container);
  color: var(--dm-on-tertiary-container);
}
.inv-pg-card--ok {
  background: var(--dm-surface-container-low);
  color: var(--dm-on-surface);
}

@media (prefers-color-scheme: dark) {
  .inv-pg-card { border-color: rgba(255, 255, 255, 0.08); }
}

/* Gloss gradient overlay — mirrors LinearGradient in app */
.inv-pg-card__gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.00) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* 1px highlight rule at card top — mirrors tintedHighlight() */
.inv-pg-card__hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
.inv-pg-card__hl--empty { background: rgba(186, 26,  26,  0.20); }
.inv-pg-card__hl--low   { background: rgba(126, 86,  42,  0.20); }
.inv-pg-card__hl--ok    { background: rgba(56,  102, 65,  0.20); }

@media (prefers-color-scheme: dark) {
  .inv-pg-card__hl--empty { background: rgba(255, 180, 171, 0.14); }
  .inv-pg-card__hl--low   { background: rgba(240, 190, 138, 0.14); }
  .inv-pg-card__hl--ok    { background: rgba(158, 208, 163, 0.14); }
}

.inv-pg-card__icon {
  font-size: 26px !important;
  display: block;
  position: relative;
  z-index: 1;
}
.inv-pg-card--empty .inv-pg-card__icon { color: var(--dm-on-error-container); }
.inv-pg-card--low   .inv-pg-card__icon { color: var(--dm-on-tertiary-container); }
.inv-pg-card--ok    .inv-pg-card__icon { color: var(--dm-on-surface); }

.inv-pg-card__name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.inv-pg-card__qty {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  min-width: 24px;
  position: relative;
  z-index: 1;
}

.inv-pg-card__status {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.70;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ── Entrance animations — grid section ────────────────────── */

.inv-pg-cat-anim-1,
.inv-pg-cat-anim-2,
.inv-pg-anim-1,
.inv-pg-anim-2,
.inv-pg-anim-3,
.inv-pg-anim-4,
.inv-pg-anim-5,
.inv-pg-anim-6,
.inv-pg-anim-7 { opacity: 0; translate: 0 28px; }

.dash-section.is-visible .inv-pg-cat-anim-1 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1)  60ms both;
}
.dash-section.is-visible .inv-pg-anim-1 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.dash-section.is-visible .inv-pg-anim-2 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
.dash-section.is-visible .inv-pg-anim-3 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}
.dash-section.is-visible .inv-pg-anim-4 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
.dash-section.is-visible .inv-pg-cat-anim-2 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}
.dash-section.is-visible .inv-pg-anim-5 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 400ms both;
}
.dash-section.is-visible .inv-pg-anim-6 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 450ms both;
}
.dash-section.is-visible .inv-pg-anim-7 {
  animation: dm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .inv-pg-screen { min-width: unset; max-width: 100%; }
}

/* ── Reduced-motion overrides ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .inv-pg-cat-anim-1, .inv-pg-cat-anim-2,
  .inv-pg-anim-1, .inv-pg-anim-2, .inv-pg-anim-3, .inv-pg-anim-4,
  .inv-pg-anim-5, .inv-pg-anim-6, .inv-pg-anim-7 {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   INVENTORY ITEM POPUP — morph+flip card expansion
   Front face:  mirrors InventoryCardSmall (same gloss / hl)
   Back face:   item detail + quantity stepper (CardOverlay port)
   ══════════════════════════════════════════════════════════════ */

/* ── Popup shell background per stock status ───────────────── */

.inv-item-popup--empty { background: var(--dm-error-container)       !important; }
.inv-item-popup--low   { background: var(--dm-tertiary-container)     !important; }
.inv-item-popup--ok    { background: var(--dm-surface-container-low)  !important; }

/* ── Front face — portrait of the grid card ────────────────── */

.inv-item-front {
  /* position / display / centering inherited from .flip-face--front */
  gap: 3px;
}

.inv-item-front__icon {
  font-size: 26px !important;
  display: block;
}

.inv-item-popup--empty .inv-item-front__icon { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-front__icon { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-front__icon { color: var(--dm-on-surface); }

.inv-item-front__name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  max-width: 80%;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inv-item-popup--empty .inv-item-front__name { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-front__name { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-front__name { color: var(--dm-on-surface); }

.inv-item-front__qty {
  font-size: 18px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.inv-item-popup--empty .inv-item-front__qty { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-front__qty { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-front__qty { color: var(--dm-on-surface); }

.inv-item-front__status {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.70;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-item-popup--empty .inv-item-front__status { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-front__status { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-front__status { color: var(--dm-on-surface); }

/* ── Back face shell — surface canvas ─────────────────────── */

/* Back face — background comes from .inv-item-popup--* on the popup shell */
.inv-item-large {
  /* inherits position: absolute; inset: 0; display: flex; from .flip-face--back */
  flex-direction: column;
  overflow: hidden;
}

/* Same gradient as the small card — seamless expansion */
.inv-item-large__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.00) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Same 1px top highlight as the small card */
.inv-item-large__hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.90);
  z-index: 1;
}

/* ── Center: icon + name + stepper + status ───────────────── */

.inv-item-large__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 24px 0;
  position: relative;
  z-index: 1;
}

.inv-item-large__icon {
  font-size: 52px !important;
  display: block;
}
.inv-item-popup--empty .inv-item-large__icon { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-large__icon { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-large__icon { color: var(--dm-on-surface); }

.inv-item-large__name {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.inv-item-popup--empty .inv-item-large__name { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-large__name { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-large__name { color: var(--dm-on-surface); }

/* ── Quantity stepper row ─────────────────────────────────── */

.inv-item-large__qty-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}

.inv-item-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s;
}
.inv-item-stepper-btn:active { transform: scale(0.88); opacity: 0.6; }

.inv-item-popup--empty .inv-item-stepper-btn { background: rgba(0,0,0,0.10); }
.inv-item-popup--low   .inv-item-stepper-btn { background: rgba(0,0,0,0.08); }
.inv-item-popup--ok    .inv-item-stepper-btn { background: rgba(0,0,0,0.06); }

.inv-item-stepper-btn ion-icon { font-size: 28px !important; display: block; }
.inv-item-popup--empty .inv-item-stepper-btn ion-icon { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-stepper-btn ion-icon { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-stepper-btn ion-icon { color: var(--dm-on-surface); }

.inv-item-large__qty {
  font-size: 52px;
  font-weight: 800;
  min-width: 80px;
  text-align: center;
  letter-spacing: -2px;
  line-height: 1;
}
.inv-item-popup--empty .inv-item-large__qty { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-large__qty { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-large__qty { color: var(--dm-on-surface); }

.inv-item-large__status-text {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.65;
  text-align: center;
  letter-spacing: 0.3px;
}
.inv-item-popup--empty .inv-item-large__status-text { color: var(--dm-on-error-container); }
.inv-item-popup--low   .inv-item-large__status-text { color: var(--dm-on-tertiary-container); }
.inv-item-popup--ok    .inv-item-large__status-text { color: var(--dm-on-surface); }

/* ── Bottom: action button ────────────────────────────────── */

.inv-item-large__bottom {
  padding: 16px 20px 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.inv-item-large__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  background: var(--dm-on-surface);
  color: var(--dm-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  transition: opacity 0.15s, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.inv-item-large__action:active { opacity: 0.8; transform: scale(0.97); }