/* ============================================================
   DORMMATE WIDGET CARDS — vendored + trimmed
   ------------------------------------------------------------
   Rules below are verbatim from the DormMate reference project (same team
   project), covering the note/appliance/calendar/inventory/
   weather/away/party/guests/event/task card system reused in this page's
   "Inside the app" section. Trimmed down from the reference's full
   dormmate_style.css to only the selectors this page actually uses (no
   screenshot gallery, no built-with grid, no nav-pill tab bar — this page
   keeps its own versions of those). Companion JS lives in
   ../dormmate-widgets.js (adapted, not vendored — see that file's header).
   ============================================================ */

/* ============================================================
   DORMMATE DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Verbatim from theme.json / theme.ts, adapted to CSS vars.
   Prefixed --dm- to avoid conflicts with portfolio globals.
   ============================================================ */
:root {
  --dm-primary:                   #386641;
  --dm-on-primary:                #FFFFFF;
  --dm-primary-container:         #B9ECBE;
  --dm-on-primary-container:      #002112;

  --dm-secondary:                 #536358;
  --dm-on-secondary:              #FFFFFF;
  --dm-secondary-container:       #D6E9D8;
  --dm-on-secondary-container:    #0F1F16;
  --dm-secondary-fixed-dim:       #BACDBD;

  --dm-tertiary:                  #7E562A;
  --dm-on-tertiary:               #FFFFFF;
  --dm-tertiary-container:        #FFDDB5;
  --dm-on-tertiary-container:     #2C1500;

  --dm-error:                     #BA1A1A;
  --dm-on-error:                  #FFFFFF;
  --dm-error-container:           #FFDAD6;
  --dm-on-error-container:        #410002;

  --dm-background:                #FBFFFB;
  --dm-on-background:             #1C1C1B;
  --dm-surface:                   #F7FFF7;
  --dm-on-surface:                #1C1C1B;
  --dm-on-surface-variant:        #484846;
  --dm-surface-variant:           #E3E7E1;

  --dm-surface-container-lowest:  #FFFFFF;
  --dm-surface-container-low:     #F3F3F1;
  --dm-surface-container:         #E5E5E3;
  --dm-surface-container-high:    #DCDCDA;
  --dm-surface-container-highest: #D1D1CF;

  --dm-outline:                   #787876;
  --dm-outline-variant:           #C8C8C6;

  --dm-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.08);
  --dm-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);
  --dm-shadow-float:    0 8px 24px rgba(0, 0, 0, 0.25);

  --dm-space-xs:  4px;
  --dm-space-sm:  8px;
  --dm-space-md:  12px;
  --dm-space-lg:  16px;
  --dm-space-xl:  28px;
  --dm-space-xxl: 40px;

}

@media (prefers-color-scheme: dark) {
  :root {
    --dm-primary:                   #9ED0A3;
    --dm-on-primary:                #003921;
    --dm-primary-container:         #1F5134;
    --dm-on-primary-container:      #B9ECBE;

    --dm-secondary:                 #BACDBD;
    --dm-on-secondary:              #25352B;
    --dm-secondary-container:       #3B4B41;
    --dm-on-secondary-container:    #D6E9D8;
    --dm-secondary-fixed-dim:       #BACDBD;

    --dm-tertiary:                  #F0BE8A;
    --dm-on-tertiary:               #482900;
    --dm-tertiary-container:        #F0BE8A;
    --dm-on-tertiary-container:     #482900;

    --dm-error:                     #FFB4AB;
    --dm-on-error:                  #690005;
    --dm-error-container:           #FFB4AB;
    --dm-on-error-container:        #690005;

    --dm-background:                #111111;
    --dm-on-background:             #E5E5E3;
    --dm-surface:                   #111111;
    --dm-on-surface:                #E5E5E3;
    --dm-on-surface-variant:        #C8C8C6;
    --dm-surface-variant:           #474A46;

    --dm-surface-container-lowest:  #000000;
    --dm-surface-container-low:     #1C1C1B;
    --dm-surface-container:         #262625;
    --dm-surface-container-high:    #313130;
    --dm-surface-container-highest: #3C3C3B;

    --dm-outline:                   #929290;
    --dm-outline-variant:           #484846;

    --dm-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.24);
    --dm-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.32);
    --dm-shadow-float:    0 8px 24px rgba(0, 0, 0, 0.50);
  }
}

/* ── Popup shell ─────────────────────────────────────────── */

.flip-popup {
  background: var(--dm-surface-container-low);
  border: 1px solid var(--dm-outline-variant);
}

/* ── 3D flip wrapper ──────────────────────────────────────── */

.flip-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Flip animation lives on the popup shell so the card shape (border-radius,
   shadow) rotates — not just the content inside. */
/* Use linear at the top level — easing is defined per keyframe segment below. */
.flip-popup.flip-animating,
.flip-popup.flip-closing {
  animation: doFlip 420ms linear forwards;
}

.flip-popup.flip-animating::after,
.flip-popup.flip-closing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 10;
  animation: blurPulse 420ms linear forwards;
}

/* ── Real 180° card flip — Calendar & Events + event-row popups ──────────
   Away/Guests (and intermittently the others) hit a Chromium compositing
   bug with the animation above: the shell's left/top/width/height are
   transitioned inline by morph-card.js (main-thread layout animation), and
   giving that same element a compositor-driven 3D transform animation makes
   the browser occasionally paint the popup as a giant stretched quad for
   1-2 frames. Verified by frame-by-frame screencast capture: flip on the
   shell → artifact in ~half the runs; flip on the UNPAINTED wrapper → never.
   The rotating element must not paint anything while its size animates —
   even constant background/shadow values on it bring the artifact back, so
   the wrapper stays visibility:hidden (it still carries the computed themed
   background for its children to inherit) and the FACES dress up as the
   card: background via the inherit chain (shell → wrapper → face), rounded
   corners, clipping, backface culling.

   These popups therefore run the same flip choreography (rotate toward
   edge-on, swap faces under the blur mask, rotate back) but with the 3D
   animation on the unpainted flat wrapper and the card visuals on the faces,
   so the whole card silhouette still rotates. NOTE: a "true" 180° flip with
   preserve-3d + backface-visibility was tried and rejected — faces with
   their own 3D transforms become separately composited layers and re-trigger
   the same stretched-frame artifact. The wrapper must stay FLAT so the faces
   rasterize into it. */

:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-animating,
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-closing {
  animation: none;          /* shell: no 3D — that's the bug trigger */
  visibility: hidden;       /* faces impersonate the card below */
  overflow: visible;        /* don't clip the rotating faces */
}

/* The shell's own blur mask can't show while the shell is hidden; a copy
   rides on the wrapper instead (see below). */
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-animating::after,
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-closing::after {
  content: none;
}

/* The rotor: unpainted (hidden), flat, transform animation only. It still
   carries the computed themed background for its children to inherit. */
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-animating .flip-wrapper,
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-closing .flip-wrapper {
  background: inherit;
  animation: doFlip 420ms linear forwards;
}

/* Faces dress up as the card while it spins: themed background via the
   inherit chain (shell → wrapper → face), rounded corners, clipping. Their
   original frontAnim/backAnim opacity swap keeps running unchanged. */
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-animating .flip-wrapper > .flip-face,
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-closing .flip-wrapper > .flip-face {
  visibility: visible;
  background: inherit;
  border-radius: 22px;
  overflow: hidden;
}

/* Blur mask covering the face swap — glued to the rotating wrapper. */
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-animating .flip-wrapper::after,
:is(.away-popup, .party-popup, .guests-popup, .ev-popup).flip-closing .flip-wrapper::after {
  content: '';
  visibility: visible;
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 10;
  animation: blurPulse 420ms linear forwards;
}

@keyframes doFlip {
  /* Peak at 30% — matches where Easing.bezier(0.2,0.8,0.2,1) reaches its
     midpoint, so the flip feels in-sync with the card expansion.
     Per-segment easing: snappy snap toward edge-on, then ease-out glide back.

     Peaks at 70deg, not a full 90deg edge-on. WHY: with perspective(1200px),
     as rotateY approaches 90deg the projection matrix becomes near-singular
     (its scale factor ~1/cos θ diverges). On this portfolio's page — unlike
     the standalone reference component — that near-singular frame is rendered
     by some GPUs as a full-width sheared "smear" of the card across the whole
     viewport for one frame (verified by frame-by-frame screen capture on real
     hardware: at a 90deg peak the smear reproduced 4/4; capping the peak at
     70deg it disappeared 6/6, and the same held for the blue Away card). The
     ±70deg peak still foreshortens the face to ~34% width — plenty to read as
     a flip once the blurPulse mask covers the swap — but keeps the matrix well
     clear of the singularity so the smear can't occur. The +peak→-peak jump at
     30%/30.1% is the front→back face swap, hidden under the mask. */
  0% {
    transform: perspective(1200px) rotateY(0deg);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  30%    { transform: perspective(1200px) rotateY(70deg); }
  30.1%  {
    transform: perspective(1200px) rotateY(-70deg);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100%   { transform: perspective(1200px) rotateY(0deg); }
}

@keyframes blurPulse {
  /* Fully opaque at the 90° edge-on moment (30%) so page content never bleeds through. */
  0%   { opacity: 0; }
  29%  { opacity: 0; }
  30%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Front / back faces ───────────────────────────────────── */

.flip-face {
  position: absolute;
  inset: 0;
}

.flip-face--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  opacity: 1;
}

.flip-face--back {
  display: flex;
  flex-direction: column;
  opacity: 0;
  overflow: hidden;
}

/* Opening: front hides → back reveals */
.flip-animating .flip-face--front { animation: frontAnim 420ms linear forwards; }
.flip-animating .flip-face--back  { animation: backAnim  420ms linear forwards; }

/* Closing: back hides → front reveals (reuses same keyframes, swapped) */
.flip-closing .flip-face--front { animation: backAnim  420ms linear forwards; }
.flip-closing .flip-face--back  { animation: frontAnim 420ms linear forwards; }

@keyframes frontAnim {
  0%, 29%   { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes backAnim {
  0%, 29%   { opacity: 0; }
  30%, 100% { opacity: 1; }
}

/* ============================================================
   NOTE WIDGET
   Small card: square clickable tile (3 color variants).
   Large card: full overlay content (back face of flip popup).
   Mirrors NotesCardData.tsx from the React Native app.
   ============================================================ */

/* ── Color tokens ──────────────────────────────────────────── */

.note-green  { --note-bg: #6DBF7E; --note-shadow-rgb: 45, 122, 62;   --note-tag-bg: rgba(45,122,62,0.14);   --note-tag-border: rgba(45,122,62,0.28);   --note-tag-color: rgba(45,122,62,0.9); }
.note-yellow { --note-bg: #EAB85B; --note-shadow-rgb: 132, 91, 13;  --note-tag-bg: rgba(132,91,13,0.14);  --note-tag-border: rgba(132,91,13,0.28);  --note-tag-color: rgba(132,91,13,0.9); }
.note-red    { --note-bg: #E06B5A; --note-shadow-rgb: 140, 42, 28;  --note-tag-bg: rgba(140,42,28,0.14);  --note-tag-border: rgba(140,42,28,0.28);  --note-tag-color: rgba(140,42,28,0.9); }

/* ── Shared surface styles (gradient wash + top highlight) ─── */

.note-card::before,
.note-face::before,
.note-large::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.note-card::after,
.note-face::after,
.note-large::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  z-index: 0;
}

.note-card.note-green::after, .note-green .note-face::after, .note-green .note-large::after  { background: rgba(197, 229, 203, 0.75); }
.note-card.note-yellow::after, .note-yellow .note-face::after, .note-yellow .note-large::after { background: rgba(247, 227, 189, 0.75); }
.note-card.note-red::after, .note-red .note-face::after, .note-red .note-large::after        { background: rgba(243, 196, 189, 0.75); }

/* ── Small note card (clickable tile) ─────────────────────── */

.note-card {
  background: var(--note-bg);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(var(--note-shadow-rgb), 0.28);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  aspect-ratio: 1 / 1;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.note-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(var(--note-shadow-rgb), 0.38); }
.note-card:active { transform: scale(0.96); }

/* ── "NOTE" tag pill ───────────────────────────────────────── */

.note-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid var(--note-tag-border);
  background: var(--note-tag-bg);
  color: var(--note-tag-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 1;
}

/* ── Avatar placeholder ────────────────────────────────────── */

.note-avatar {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  display: block;
}

.note-avatar--sm { width: 26px; height: 26px; }
.note-avatar--lg { width: 50px; height: 50px; flex-shrink: 0; position: static; }

/* ── Watermark icon ────────────────────────────────────────── */

.note-watermark {
  position: absolute;
  bottom: -8px;
  right: -8px;
  font-size: 96px !important;
  color: rgba(0, 0, 0, 0.07);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}

/* ── Note title (small) ────────────────────────────────────── */

.note-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  font-family: 'Shantell Sans', cursive;
  position: relative;
  z-index: 1;
  padding: 0 8px;
  line-height: 1.3;
}

/* ── Due date badge ────────────────────────────────────────── */

.note-due {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.08);
  padding: 4px 8px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
}

.note-due__icon { font-size: 11px !important; color: rgba(0,0,0,0.50); line-height: 1; }
.note-due__text { font-size: 11px; font-family: 'Shantell Sans', cursive; color: rgba(0,0,0,0.55); }

/* ── Dog-eared folded corner ───────────────────────────────── */

.note-fold {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.note-fold__shadow,
.note-fold__face {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
}

.note-fold__shadow { bottom: -17px; right: -17px; background: rgba(0,0,0,0.18); }
.note-fold__face   { bottom: -20px; right: -20px; background: rgba(255,255,255,0.55); }

/* ── Note popup shell ──────────────────────────────────────── */

.note-popup {
  border-color: rgba(255,255,255,0.30) !important;
}

.note-popup.note-green  { background: #6DBF7E !important; }
.note-popup.note-yellow { background: #EAB85B !important; }
.note-popup.note-red    { background: #E06B5A !important; }

/* ── Front face (mirrors small card inside popup) ──────────── */

.note-face {
  background: var(--note-bg);
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Large note card (back face) ───────────────────────────── */

.note-large {
  /* Fixed at the popup's target dimensions so text is always laid out at its
     final size. The popup's overflow:hidden clips the excess during morphing
     and progressively reveals the content — text never reflows mid-animation. */
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(400px, 80vw);
  height: min(540px, 80vh);
  background: var(--note-bg);
  border: 1px solid rgba(255,255,255,0.30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.note-large__author {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 22px 22px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}

.note-large__meta { flex: 1; text-align: left; }

.note-large__username {
  font-size: 20px;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  line-height: 1.2;
  margin: 0;
}

.note-large__date {
  font-size: 12px;
  font-family: 'Shantell Sans', cursive;
  color: rgba(0,0,0,0.45);
  margin: 0;
}

.note-large__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  padding: 0 24px;
}

.note-large__icon {
  font-size: 64px !important;
  color: rgba(0,0,0,0.35);
  margin-bottom: 10px;
  line-height: 1;
}

.note-large__title {
  font-size: 30px;
  color: rgba(0,0,0,0.85);
  text-align: center;
  font-family: 'Shantell Sans', cursive;
  font-weight: 500;
  transform: rotate(-4deg);
  line-height: 1.2;
  display: block;
}

.note-large__desc {
  margin-top: 18px;
  color: rgba(0,0,0,0.50);
  text-align: center;
  font-family: 'Shantell Sans', cursive;
  font-size: 0.88rem;
  line-height: 1.55;
  display: block;
}

/* ── Note close button ─────────────────────────────────────── */

.note-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}

.note-close-btn:hover { background: rgba(0,0,0,0.20); color: rgba(0,0,0,0.80); }
.note-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   APPLIANCE WIDGETS
   Small cards + large popups for Washing Machine, Dryer,
   Dishwasher — mirrors WashingMachineCardData.tsx,
   DryerCardData.tsx, DishwasherCardData.tsx.
   ============================================================ */

/* ── Color bases ───────────────────────────────────────────── */

.appliance-wm         { background: #373D62; }
.appliance-dryer      { background: #2B4F54; }
.appliance-dishwasher { background: #4A3820; }

/* ── Small card ────────────────────────────────────────────── */

.appliance-card {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.2s ease;
}

.appliance-card:hover  { transform: scale(1.04); }
.appliance-card:active { transform: scale(0.96); }

.appliance-wm.appliance-card         { box-shadow: 0 4px 12px rgba(13,29,48,0.45); }
.appliance-dryer.appliance-card      { box-shadow: 0 4px 12px rgba(13,42,46,0.45); }
.appliance-dishwasher.appliance-card { box-shadow: 0 4px 12px rgba(42,26,13,0.45); }

/* Glass overlay — shared by small card and popup front face */
.appliance-card::before,
.appliance-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.appliance-card::after,
.appliance-face::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 0;
}

.appliance-wm.appliance-card::after,
.appliance-wm.appliance-face::after         { background: rgba(175, 177, 192, 0.55); }
.appliance-dryer.appliance-card::after,
.appliance-dryer.appliance-face::after      { background: rgba(170, 185, 187, 0.55); }
.appliance-dishwasher.appliance-card::after,
.appliance-dishwasher.appliance-face::after { background: rgba(183, 175, 166, 0.55); }

/* ── Avatar ────────────────────────────────────────────────── */

.appliance-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  position: absolute;
  z-index: 2;
}

.appliance-avatar--tl { top: 14px; left: 14px; }
.appliance-avatar--tr { top: 14px; right: 14px; }

/* ── Timer block ───────────────────────────────────────────── */

.appliance-timer {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  min-height: 32px; /* prevents vbar overlapping avatar when "Done!" has no status label */
}

.appliance-timer--tr { align-items: flex-end; align-self: flex-end; }
.appliance-timer--tl { align-items: flex-start; align-self: flex-start; }

.appliance-time {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.appliance-wm .appliance-time         { color: #E8E4FF; }
.appliance-dryer .appliance-time      { color: #C8F0EE; }
.appliance-dishwasher .appliance-time { color: #F5DEB0; }

.appliance-time--done { font-size: 15px; }

.appliance-wm .appliance-time--done         { color: #a5aee9; }
.appliance-dryer .appliance-time--done      { color: #7ECDC5; }
.appliance-dishwasher .appliance-time--done { color: #F0C070; }

.appliance-status-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}

/* ── Bottom row: machine icon + vbar ──────────────────────── */

.appliance-bottom {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.appliance-bottom--rev { flex-direction: row-reverse; }

.appliance-machine-img {
  width: 65%;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
  align-self: flex-end;
}

/* ── Vertical progress bar ─────────────────────────────────── */

.appliance-vbar-container {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding-bottom: 14px;
  z-index: 2;
}

.appliance-vbar-track {
  width: 18px;
  height: 100%;
  max-height: 110px;
  min-height: 20px;
  border-radius: 9px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}

.appliance-vbar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 9px;
  transition: height 0.5s ease;
}

.appliance-wm .appliance-vbar-fill         { background: linear-gradient(to top, #7B6FC4, #C4BBF0); }
.appliance-dryer .appliance-vbar-fill      { background: linear-gradient(to top, #3D9E9E, #7ECDC5); }
.appliance-dishwasher .appliance-vbar-fill { background: linear-gradient(to top, #C87D3D, #F0C070); }

/* ── Popup shell overrides ─────────────────────────────────── */

.appliance-popup {
  border-color: rgba(255,255,255,0.15) !important;
}

.appliance-popup.appliance-wm         { background: #373D62 !important; }
.appliance-popup.appliance-dryer      { background: #2B4F54 !important; }
.appliance-popup.appliance-dishwasher { background: #4A3820 !important; }

/* ── Front face inside popup (mirrors small card) ──────────── */

.appliance-face {
  overflow: hidden;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ── Large back face ───────────────────────────────────────── */

.appliance-large {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(380px, 80vw);
  height: min(500px, 80vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15);
}

.appliance-large--wm         { background: #373D62; }
.appliance-large--dryer      { background: #2B4F54; }
.appliance-large--dishwasher { background: #4A3820; }

.appliance-large__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.appliance-large__glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.55);
}

.appliance-large--wm .appliance-large__glass::after         { background: rgba(175, 177, 192, 0.55); }
.appliance-large--dryer .appliance-large__glass::after      { background: rgba(170, 185, 187, 0.55); }
.appliance-large--dishwasher .appliance-large__glass::after { background: rgba(183, 175, 166, 0.55); }

.appliance-large > *:not(.appliance-large__glass):not(.appliance-close-btn) { position: relative; z-index: 1; }

.appliance-large__user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  margin-bottom: 14px;
}

.appliance-large__avatar {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.appliance-large__username {
  font-size: 24px;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  color: #ddd;
  opacity: 0.5;
  line-height: 1.2;
}

.appliance-large__timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.appliance-large__time {
  font-size: 50px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  line-height: 1;
}

.appliance-large--wm .appliance-large__time         { color: #E8E4FF; }
.appliance-large--dryer .appliance-large__time      { color: #C8F0EE; }
.appliance-large--dishwasher .appliance-large__time { color: #F5DEB0; }

.appliance-large__time--done { font-size: 44px; letter-spacing: 0; }

.appliance-large--wm .appliance-large__time--done         { color: #a5aee9; }
.appliance-large--dryer .appliance-large__time--done      { color: #7ECDC5; }
.appliance-large--dishwasher .appliance-large__time--done { color: #F0C070; }

.appliance-large__status {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* ── Horizontal progress bar ───────────────────────────────── */

.appliance-hbar-track {
  width: 100%;
  height: 26px;
  border-radius: 13px;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
  flex-shrink: 0;
}

.appliance-hbar-fill {
  height: 100%;
  border-radius: 13px;
  transition: width 0.5s ease;
}

.appliance-hbar-fill--wm         { background: linear-gradient(to right, #5BB8EF, #8870C8); }
.appliance-hbar-fill--dryer      { background: linear-gradient(to right, #4EC4B8, #3D9E9E); }
.appliance-hbar-fill--dishwasher { background: linear-gradient(to right, #F0C070, #C87D3D); }

/* ── Machine icon at bottom of large view ──────────────────── */

.appliance-large__image {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-top: 20px;
  padding-bottom: 0;
}

.appliance-large__img {
  width: 80%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* ── Close button ──────────────────────────────────────────── */

.appliance-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.appliance-close-btn:hover { background: rgba(255,255,255,0.25); }
.appliance-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   INVENTORY WIDGET
   Clipboard-style card with ruled paper — mirrors
   InventoryCardData.tsx from the React Native app.
   ============================================================ */

/* ── Small card ────────────────────────────────────────────── */

.inventory-card {
  aspect-ratio: 1 / 1;
  background-color: #F2EDE3;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 21px,
    rgba(221, 213, 196, 0.80) 21px,
    rgba(221, 213, 196, 0.80) 22px
  );
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(22, 50, 30, 0.40);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.inventory-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(22, 50, 30, 0.50); }
.inventory-card:active { transform: scale(0.96); }

/* Glass gradient + top highlight line */
.inventory-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.inventory-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(177, 196, 185, 0.65);
  pointer-events: none;
  z-index: 3;
}

.inventory-card > * { position: relative; z-index: 2; }

/* ── Clipboard clip (small) ────────────────────────────────── */

.inv-clip {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}

.inv-clip-bar {
  width: 32px;
  height: 9px;
  background: #27472F;
  border-radius: 3px;
}

.inv-clip-ring {
  width: 12px;
  height: 18px;
  border-radius: 6px;
  border: 2.5px solid #27472F;
  background: #3D6B4F;
  margin-top: -10px;
}

/* ── Green header ──────────────────────────────────────────── */

.inv-header {
  background: #3D6B4F;
  padding: 20px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.inv-header-label {
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.inv-header-badge {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 1px 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.inv-divider {
  height: 1px;
  background: rgba(39, 71, 47, 0.60);
  flex-shrink: 0;
}

/* ── Item list (small) ─────────────────────────────────────── */

.inv-body {
  flex: 1;
  padding: 9px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}

.inv-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.inv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inv-dot--out { background: #B53333; }
.inv-dot--low { background: #B86820; }

.inv-icon {
  font-size: 11px;
  flex-shrink: 0;
}

.inv-icon--out { color: #B53333; }
.inv-icon--low { color: #B86820; }

.inv-item-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #1A1710;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  text-align: start;
}

.inv-pill {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid;
  flex-shrink: 0;
}

.inv-pill--out { background: rgba(181, 51, 51, 0.16); border-color: rgba(181, 51, 51, 0.50); color: #B53333; }
.inv-pill--low { background: rgba(184, 104, 32, 0.16); border-color: rgba(184, 104, 32, 0.50); color: #B86820; }

.inv-pill span {
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.inv-overflow {
  font-size: 10px;
  color: #7A6E5A;
  font-style: italic;
  margin-top: 1px;
  text-align: start;
}

/* ── Popup shell ───────────────────────────────────────────── */

.inventory-popup {
  background-color: #F2EDE3 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 21px,
    rgba(221, 213, 196, 0.80) 21px,
    rgba(221, 213, 196, 0.80) 22px
  ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Front face (mirrors small card during morph) ──────────── */

.inventory-front.flip-face--front {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  padding: 0;
}

/* ── Large back face ───────────────────────────────────────── */

/* Top highlight — separate from inv-large-glass so it paints above the green header */
.inventory-large::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(177, 196, 185, 0.65);
  pointer-events: none;
  z-index: 2;
}

.inventory-large {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(400px, 80vw);
  height: min(520px, 80vh);
  overflow: hidden;
  background-color: #F2EDE3;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 21px,
    rgba(221, 213, 196, 0.80) 21px,
    rgba(221, 213, 196, 0.80) 22px
  );
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-direction: column;
}

/* Glass overlay */
.inv-large-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.inv-large-glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(177, 196, 185, 0.65);
}

.inventory-large > *:not(.inv-large-glass):not(.inv-close-btn) {
  position: relative;
  z-index: 1;
}

/* Large header */
.inv-large-header {
  position: relative;
  background: #3D6B4F;
  padding: 26px 24px 16px;
  flex-shrink: 0;
}

.inv-large-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.inv-large-header-title {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
}

.inv-large-header-pill {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 3px 10px;
}

.inv-large-header-pill span {
  color: rgba(255, 255, 255, 0.90);
  font-size: 11px;
  font-weight: 600;
}

/* Large clip (inside .inv-large-header) */
.inv-clip--large {
  z-index: 5;
}

.inv-clip-bar--large {
  width: 44px;
  height: 12px;
  background: #27472F;
  border-radius: 3px;
}

.inv-clip-ring--large {
  width: 16px;
  height: 24px;
  border-radius: 8px;
  border: 3.5px solid #27472F;
  background: #3D6B4F;
  margin-top: -14px;
}

/* Section label row */
.inv-large-section-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 18px 8px;
  flex-shrink: 0;
}

.inv-large-warning-icon { font-size: 11px; color: #B86820; }

.inv-large-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #B86820;
}

/* Item list (large) */
.inv-large-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 10px;
}

.inv-large-cat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7A6E5A;
  margin-bottom: 6px;
  margin-top: 2px;
}

.inv-large-cat-divider {
  height: 1px;
  background: #DDD5C4;
  margin: 10px 0;
}

.inv-large-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #DDD5C4;
}

.inv-large-row--last { border-bottom: none; }

.inv-large-accent {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}

.inv-large-accent--out { background: #B53333; }
.inv-large-accent--low { background: #B86820; }

.inv-large-icon { font-size: 16px; flex-shrink: 0; }
.inv-large-icon--out { color: #B53333; }
.inv-large-icon--low { color: #B86820; }

.inv-large-item-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #1A1710;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.inv-pill-lg {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid;
  flex-shrink: 0;
}

.inv-pill-lg--out { background: rgba(181, 51, 51, 0.16); border-color: rgba(181, 51, 51, 0.50); color: #B53333; }
.inv-pill-lg--low { background: rgba(184, 104, 32, 0.16); border-color: rgba(184, 104, 32, 0.50); color: #B86820; }

.inv-pill-lg span {
  font-size: 12px;
  font-weight: 800;
  display: block;
}

/* Footer */
.inv-large-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-top: 1px solid #DDD5C4;
  background: #F2EDE3;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.inv-large-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 999px;
  border: none;
  background: #3D6B4F;
  cursor: pointer;
  transition: opacity 0.15s;
}

.inv-large-nav-btn:hover { opacity: 0.85; }

.inv-large-nav-btn-text {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.inv-large-nav-btn-arrow {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Close button */
.inv-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.inv-close-btn:hover { background: rgba(255, 255, 255, 0.35); }
.inv-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   WEATHER WIDGET
   Full-width strip card + large popup detail view.
   Mirrors WeatherCardData.tsx from the React Native app.
   ============================================================ */

/* ── Small card (spans all grid columns) ───────────────────── */

.weather-card {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 14px 16px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #48b0f7, #1565c0);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.38);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.weather-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(21, 101, 192, 0.50); }
.weather-card:active { transform: scale(0.96); }

/* Glass gradient overlay */
.weather-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Top highlight line */
.weather-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wx-highlight, rgba(255, 255, 255, 0.65));
  pointer-events: none;
  z-index: 1;
}

.weather-card > * { position: relative; z-index: 1; }

.weather-card__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.weather-card__city {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--wx-text-mid, rgba(255, 255, 255, 0.80));
}

.weather-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}

.weather-card__temp {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-top: 2px;
  color: var(--wx-text, #ffffff);
  text-align: left;
}

.weather-card__condition {
  font-size: 12px;
  margin-top: 1px;
  color: var(--wx-text-mid, rgba(255, 255, 255, 0.70));
  text-align: left;
}

.weather-card__hl {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--wx-text-low, rgba(255, 255, 255, 0.55));
  text-align: left;
}

/* ── Popup shell ────────────────────────────────────────────── */

.weather-popup {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Front face (mirrors small card during morph) ──────────── */

.weather-front.flip-face--front {
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 14px 16px 12px;
  background: transparent;
}

.weather-front .weather-card__temp,
.weather-front .weather-card__condition,
.weather-front .weather-card__hl {
  text-align: left;
}

/* ── Large back face ───────────────────────────────────────── */

.weather-large {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(400px, 80vw);
  height: min(520px, 80vh);
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  padding: 26px 28px 22px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
}

/* Glass overlay */
.weather-large__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.weather-large__glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wx-highlight, rgba(255, 255, 255, 0.65));
}

.weather-large > *:not(.weather-large__glass):not(.weather-close-btn) {
  position: relative;
  z-index: 1;
}

/* Location header */
.weather-large__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.weather-large__city {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--wx-text, #ffffff);
}

.weather-large__country {
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--wx-text-low, rgba(255, 255, 255, 0.60));
}

/* Main block */
.weather-large__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.weather-large__icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
}

.weather-large__temp {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  margin-top: 2px;
  color: var(--wx-text, #ffffff);
}

.weather-large__condition {
  font-size: 20px;
  text-align: center;
  color: var(--wx-text-mid, rgba(255, 255, 255, 0.80));
}

.weather-large__feels {
  font-size: 14px;
  margin-top: 2px;
  color: var(--wx-text-low, rgba(255, 255, 255, 0.60));
}

/* Info pills */
.weather-large__pills {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.weather-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 12px 6px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.weather-pill__icon {
  font-size: 22px !important;
  line-height: 1;
  color: var(--wx-text-mid, rgba(255, 255, 255, 0.73));
}

.weather-pill__value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--wx-text, #ffffff);
}

.weather-pill__label {
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--wx-text-mid, rgba(255, 255, 255, 0.70));
}

/* Max/Min */
.weather-large__hl {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--wx-text-low, rgba(255, 255, 255, 0.60));
}

/* Close button */
.weather-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.weather-close-btn:hover { background: rgba(255, 255, 255, 0.25); }
.weather-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   CALENDAR CARD (CalendarCardData port)
   Warm-cream desk-calendar widget — red header, agenda body.
   ============================================================ */

/* ── Small card ─────────────────────────────────────────────── */

.calendar-card {
  aspect-ratio: 1 / 1;
  background: #FDF8F0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(122, 30, 20, 0.40);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.calendar-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(122, 30, 20, 0.50); }
.calendar-card:active { transform: scale(0.96); }

.calendar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.calendar-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(230, 176, 170, 0.65);
  pointer-events: none;
  z-index: 3;
}

.calendar-card > * { position: relative; z-index: 2; }

/* ── Shared: ring holes ──────────────────────────────────────── */

.cal-ring-holes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 6px 20px 0;
}

.cal-hole {
  width: 11px;
  height: 11px;
  border-radius: 6px;
  background: #96231A;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
}

/* ── Shared: red header ──────────────────────────────────────── */

.cal-header {
  background: #C0392B;
  padding-bottom: 8px;
  flex-shrink: 0;
}

.cal-date-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  margin-top: 4px;
}

.cal-date-num {
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 30px;
}

.cal-date-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}

.cal-date-sub {
  display: block;
  color: rgba(255, 255, 255, 0.80);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 12px;
}

/* ── Small card body ─────────────────────────────────────────── */

.cal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  gap: 6px;
}

.cal-event-title {
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cal-temporal-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.cal-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  flex-shrink: 0;
  background: #C0392B;
}

.cal-temporal {
  color: #A89880;
  font-size: 10px;
  font-weight: 500;
}

.cal-more-badge {
  color: #A89880;
  font-size: 9px;
  font-weight: 600;
}

/* ── Popup shell ─────────────────────────────────────────────── */

.calendar-popup {
  background: #FDF8F0 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Front face (mirrors small card during morph) ────────────── */

.calendar-front.flip-face--front {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  padding: 0;
}

/* ── Large back face ─────────────────────────────────────────── */

.calendar-large {
  background: #FDF8F0;
}

/* Top highlight — separate from cal-glass so it paints above the red header */
.calendar-large::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(230, 176, 170, 0.65);
  pointer-events: none;
  z-index: 2;
}

.cal-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.cal-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(230, 176, 170, 0.65);
}

.calendar-large > *:not(.cal-glass):not(.cal-close-btn) {
  position: relative;
  z-index: 1;
}

/* Large header */
.cal-large-header {
  background: #C0392B;
  padding-bottom: 14px;
  flex-shrink: 0;
}

.cal-large-header-content {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 4px 20px 0;
  gap: 10px;
}

.cal-large-date-num {
  color: #fff;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}

.cal-large-header-meta {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-large-day-name {
  color: rgba(255, 255, 255, 0.60);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.cal-large-month-year {
  color: rgba(255, 255, 255, 0.90);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Tear line */
.cal-tear-line {
  height: 3px;
  background: linear-gradient(to right, transparent, rgba(150, 35, 26, 0.45), transparent);
  flex-shrink: 0;
}

/* Agenda */
.cal-agenda {
  flex: 1;
  overflow: hidden;
  padding: 14px 18px 8px;
  display: flex;
  flex-direction: column;
}

.cal-section-label {
  color: #C0392B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
  opacity: 0.8;
  flex-shrink: 0;
}

.cal-day-group + .cal-day-group {
  margin-top: 16px;
}

.cal-day-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cal-day-label-accent {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #C0392B;
  flex-shrink: 0;
}

.cal-day-label {
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cal-rule {
  height: 1px;
  background: #E8DDD0;
  margin-bottom: 8px;
}

.cal-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 11px;
  margin-bottom: 8px;
}

.cal-event-time {
  color: #A89880;
  font-size: 12px;
  width: 50px;
  flex-shrink: 0;
  font-weight: 500;
}

.cal-event-bar {
  width: 3px;
  height: 30px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cal-event-name {
  color: #3D3028;
  font-size: 14px;
  flex: 1;
  line-height: 18px;
}

/* Footer */
.cal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid #E8DDD0;
  background: #FDF8F0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.cal-open-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  background: #C0392B;
  border: 1px solid rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: opacity 0.15s;
}

.cal-open-btn:hover { opacity: 0.85; }

.cal-open-btn-text {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.cal-open-btn-arrow {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* Close button */
.cal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.90);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.cal-close-btn:hover { background: rgba(255, 255, 255, 0.35); }
.cal-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   AWAY WIDGET
   Blue-accent card with avatar cluster — mirrors AwayCardData.tsx
   Accent: #4A90D9 = rgba(74, 144, 217)
   ============================================================ */

/* ── Small card ────────────────────────────────────────────── */

.away-card {
  aspect-ratio: 1 / 1;
  background-color: var(--dm-surface-container-low);
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.28);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.away-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(74, 144, 217, 0.38); }
.away-card:active { transform: scale(0.96); }

/* Blue accent gradient wash */
.away-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(74, 144, 217, 0.32) 0%,
    rgba(74, 144, 217, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* 1px top highlight */
.away-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(183, 211, 240, 0.90);
  pointer-events: none;
  z-index: 0;
}

.away-card > * { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
  .away-card {
    background-color: var(--dm-surface-container);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .away-card::after {
    background: rgba(183, 211, 240, 0.14);
  }
}

/* ── AWAY tag pill ─────────────────────────────────────────── */

.away-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(74, 144, 217, 0.16);
  border: 1px solid rgba(74, 144, 217, 0.26);
  color: #4A90D9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 2;
}

/* ── Airplane watermark ────────────────────────────────────── */

.away-watermark {
  position: absolute;
  bottom: -8px;
  right: -8px;
  font-size: 96px;
  color: rgba(74, 144, 217, 0.14);
  pointer-events: none;
  transform: rotate(22deg);
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .away-watermark { color: rgba(74, 144, 217, 0.10); }
}

/* ── Avatar cluster ────────────────────────────────────────── */

.away-cluster {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 22px;
}

.away-avatar-wrap {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--dm-surface-container-low);
  background: rgba(74, 144, 217, 0.16);
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .away-avatar-wrap {
    border-color: var(--dm-surface-container);
  }
}

.away-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bottom label ──────────────────────────────────────────── */

.away-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 12px 13px;
  color: rgba(0, 0, 0, 0.55);
  display: block;
}

@media (prefers-color-scheme: dark) {
  .away-label { color: rgba(255, 255, 255, 0.68); }
}

/* ── Popup shell ───────────────────────────────────────────── */

.away-popup {
  background: var(--dm-surface-container-low) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

@media (prefers-color-scheme: dark) {
  .away-popup {
    background: var(--dm-surface-container) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ── Front face (mirrors small card during morph) ──────────── */

.away-front.flip-face--front {
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

/* Pin cluster and label absolutely so they stay stable as the popup
   morphs from card-sized to popup-sized (avoids flex: 1 reflow). */
.away-front .away-cluster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 34px;
  flex: unset;
  padding-top: 22px;
}

.away-front .away-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 13px;
}

.away-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(74, 144, 217, 0.32) 0%,
    rgba(74, 144, 217, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.away-front::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(183, 211, 240, 0.90);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .away-front::after { background: rgba(183, 211, 240, 0.14); }
}

/* ── Large back face ───────────────────────────────────────── */

.away-large {
  background: var(--dm-surface-container-low);
}

@media (prefers-color-scheme: dark) {
  .away-large { background: var(--dm-surface-container); }
}

/* Subtle blue tint on the surface below the header */
.away-large__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(74, 144, 217, 0.08) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

.away-large > *:not(.away-large__glass):not(.away-close-btn) {
  position: relative;
  z-index: 1;
}

/* Header: blue gradient, matches EventDetailView / AwayLargeCard */
.away-large__header {
  background: linear-gradient(to bottom right, #4A90D9, #4A90D9BB);
  padding: 22px 22px 24px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.away-large__highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(183, 211, 240, 0.35);
  pointer-events: none;
}

.away-large__header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.away-large__icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.away-large__icon-circle-icon {
  font-size: 22px;
  color: #4A90D9;
}

.away-large__badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.away-large__cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.away-avatar-wrap--header {
  width: 90px;
  height: 90px;
  border-color: rgba(74, 144, 217, 0.80);
  background: rgba(255, 255, 255, 0.15);
}

.away-large__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  display: block;
}

/* People list */
.away-large__list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.away-person-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.away-person__avatar-wrap {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  overflow: hidden;
  border: 1.5px solid rgba(74, 144, 217, 0.35);
  background: rgba(74, 144, 217, 0.12);
  flex-shrink: 0;
}

.away-person__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.away-person__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.away-person__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-on-surface);
  text-align: start;
}

.away-person__date-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.away-person__date-icon {
  font-size: 12px;
  color: rgba(74, 144, 217, 0.72);
}

.away-person__date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(74, 144, 217, 0.80);
}

@media (prefers-color-scheme: dark) {
  .away-person__date { color: rgba(74, 144, 217, 0.90); }
}

/* Footer */
.away-large__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid var(--dm-outline-variant);
  background: var(--dm-surface-container-low);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  .away-large__footer { background: var(--dm-surface-container); }
}

.away-large__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  background: #4A90D9;
  cursor: pointer;
  transition: opacity 0.15s;
}

.away-large__btn:hover { opacity: 0.85; }

.away-large__btn-text {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.away-large__btn-arrow {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* Close button */
.away-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.away-close-btn:hover { background: rgba(255, 255, 255, 0.25); }
.away-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   GUESTS WIDGET
   Coral-accent card with silhouette cluster — mirrors GuestsCardData.tsx
   Accent: #FF6B6B = rgba(255, 107, 107)
   ============================================================ */

/* ── Small card ────────────────────────────────────────────── */

.guests-card {
  aspect-ratio: 1 / 1;
  background-color: var(--dm-surface-container-low);
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.28);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.guests-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(255, 107, 107, 0.38); }
.guests-card:active { transform: scale(0.96); }

.guests-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.32) 0%,
    rgba(255, 107, 107, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.guests-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 196, 196, 0.90);
  pointer-events: none;
  z-index: 0;
}

.guests-card > * { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
  .guests-card {
    background-color: var(--dm-surface-container);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .guests-card::after { background: rgba(255, 196, 196, 0.14); }
}

/* ── GUESTS tag pill ───────────────────────────────────────── */

.guests-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255, 107, 107, 0.16);
  border: 1px solid rgba(255, 107, 107, 0.26);
  color: #FF6B6B;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 2;
}

/* ── People watermark ──────────────────────────────────────── */

.guests-watermark {
  position: absolute;
  bottom: -8px;
  right: -8px;
  font-size: 96px;
  color: rgba(255, 107, 107, 0.14);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .guests-watermark { color: rgba(255, 107, 107, 0.10); }
}

/* ── Silhouette cluster ────────────────────────────────────── */

.guests-cluster-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 22px;
}

.guests-cluster {
  width: 90px;
  height: 90px;
  position: relative;
  flex-shrink: 0;
}

.guests-cluster--lg {
  width: 112px;
  height: 112px;
}

.guests-sil {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pre-blend 16% coral against the card surface so it looks solid, matching
     how #FF6B6B28 renders on a solid background in React Native. */
  background: color-mix(in srgb, #FF6B6B 16%, var(--dm-surface-container-low));
  border: 2.5px solid var(--dm-surface-container-low);
}

@media (prefers-color-scheme: dark) {
  .guests-sil {
    background: color-mix(in srgb, #FF6B6B 16%, var(--dm-surface-container));
    border-color: var(--dm-surface-container);
  }
}

.guests-sil__icon { color: rgba(255, 107, 107, 0.60); }

/* Small cluster — lead */
.guests-cluster .guests-sil--a {
  width: 52px; height: 52px;
  left: 8px; top: 10px;
  z-index: 2;
}
.guests-cluster .guests-sil--a .guests-sil__icon { font-size: 24px; }

/* Small cluster — secondary */
.guests-cluster .guests-sil--b {
  width: 43px; height: 43px;
  left: 37px; top: 35px;
  z-index: 1;
}
.guests-cluster .guests-sil--b .guests-sil__icon { font-size: 20px; }

/* Large header cluster — lead */
.guests-cluster--lg .guests-sil--a {
  width: 65px; height: 65px;
  left: 10px; top: 12px;
  z-index: 2;
}
.guests-cluster--lg .guests-sil--a .guests-sil__icon { font-size: 30px; }

/* Large header cluster — secondary */
.guests-cluster--lg .guests-sil--b {
  width: 54px; height: 54px;
  left: 46px; top: 44px;
  z-index: 1;
}
.guests-cluster--lg .guests-sil--b .guests-sil__icon { font-size: 25px; }

/* Inside header: pre-blend white/15 against the header accent so circles
   look solid, matching how rgba(255,255,255,0.15) renders on the red
   gradient background in React Native. */
.guests-large__header .guests-sil {
  border-color: rgba(255, 107, 107, 0.80);
  background: color-mix(in srgb, white 15%, #FF6B6B);
}
.guests-large__header .guests-sil__icon { color: rgba(255, 255, 255, 0.70); }

/* ── Label ─────────────────────────────────────────────────── */

.guests-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 12px 13px;
  color: rgba(0, 0, 0, 0.55);
  display: block;
}

@media (prefers-color-scheme: dark) {
  .guests-label { color: rgba(255, 255, 255, 0.68); }
}

/* ── Popup shell ───────────────────────────────────────────── */

.guests-popup {
  background: var(--dm-surface-container-low) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

@media (prefers-color-scheme: dark) {
  .guests-popup {
    background: var(--dm-surface-container) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ── Front face ────────────────────────────────────────────── */

.guests-front.flip-face--front {
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.guests-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.32) 0%,
    rgba(255, 107, 107, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.guests-front::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 196, 196, 0.90);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .guests-front::after { background: rgba(255, 196, 196, 0.14); }
}

/* Pin cluster-area and label for stable morph animation */
.guests-front .guests-cluster-area {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 34px;
  flex: unset;
  padding-top: 22px;
}

.guests-front .guests-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding-bottom: 13px;
}

/* Front face: separator and background match the popup surface */
.guests-front .guests-sil {
  background: color-mix(in srgb, #FF6B6B 16%, var(--dm-surface-container-low));
  border-color: var(--dm-surface-container-low);
}

@media (prefers-color-scheme: dark) {
  .guests-front .guests-sil {
    background: color-mix(in srgb, #FF6B6B 16%, var(--dm-surface-container));
    border-color: var(--dm-surface-container);
  }
}

/* ── Large back face ───────────────────────────────────────── */

.guests-large { background: var(--dm-surface-container-low); }

@media (prefers-color-scheme: dark) {
  .guests-large { background: var(--dm-surface-container); }
}

.guests-large__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.guests-large > *:not(.guests-large__glass):not(.guests-close-btn) {
  position: relative;
  z-index: 1;
}

/* Header */
.guests-large__header {
  background: linear-gradient(to bottom right, #FF6B6B, #FF6B6BBB);
  padding: 22px 22px 24px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.guests-large__highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 196, 196, 0.35);
  pointer-events: none;
}

.guests-large__header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.guests-large__icon-circle {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guests-large__icon-circle-icon { font-size: 22px; color: #FF6B6B; }

.guests-large__badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.guests-large__cluster-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.guests-large__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  display: block;
}

/* Visit list */
.guests-large__list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.guests-visit-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.guests-host__avatar-wrap {
  width: 42px; height: 42px;
  border-radius: 21px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.12);
  flex-shrink: 0;
}

.guests-host__avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.guests-visit__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guests-visit__host-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-on-surface);
  text-align: start;
}

.guests-visit__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.guests-count-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.28);
}

.guests-count-pill__icon { font-size: 11px; color: #FF6B6B; }
.guests-count-pill__text { font-size: 11px; font-weight: 700; color: #FF6B6B; }

.guests-visit__date-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.guests-visit__date-icon { font-size: 12px; color: rgba(255, 107, 107, 0.72); }

.guests-visit__date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 107, 107, 0.80);
}

@media (prefers-color-scheme: dark) {
  .guests-visit__date { color: rgba(255, 107, 107, 0.90); }
}

/* Footer */
.guests-large__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid var(--dm-outline-variant);
  background: var(--dm-surface-container-low);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  .guests-large__footer { background: var(--dm-surface-container); }
}

.guests-large__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  background: #FF6B6B;
  cursor: pointer;
  transition: opacity 0.15s;
}

.guests-large__btn:hover { opacity: 0.85; }
.guests-large__btn-text { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; }
.guests-large__btn-arrow { color: rgba(255, 255, 255, 0.85); font-size: 17px; font-weight: 700; line-height: 1; }

/* Close button */
.guests-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.guests-close-btn:hover { background: rgba(255, 255, 255, 0.25); }
.guests-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   PARTY WIDGET
   Dark purple/indigo card with animated confetti — mirrors
   PartyCardData.tsx from the React Native app.
   Accent palette: DEEP=#080618  PURPLE=#1A1260  GOLD=#FFD700
   ============================================================ */

/* ── Small card ────────────────────────────────────────────── */

.party-card {
  aspect-ratio: 1 / 1;
  background-color: var(--dm-surface-container-low);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(8, 6, 24, 0.20);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

.party-card:hover  { transform: scale(1.04); box-shadow: 0 6px 18px rgba(8, 6, 24, 0.30); }
.party-card:active { transform: scale(0.96); }

/* Violet accent gradient wash — Party's identity color, same role blue
   plays for Away and red for Guests */
.party-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(80, 64, 224, 0.31) 0%,
    rgba(80, 64, 224, 0.125) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* 1px top-edge highlight */
.party-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(198, 190, 250, 0.90);
  pointer-events: none;
  z-index: 0;
}

.party-card > * { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
  .party-card {
    background-color: var(--dm-surface-container);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(8, 6, 24, 0.65);
  }
  .party-card:hover { box-shadow: 0 6px 18px rgba(8, 6, 24, 0.80); }
  .party-card::after { background: rgba(198, 190, 250, 0.30); }
}

/* ── Corner confetti container (top-right burst, decorative texture) ── */

.party-confetti-corner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Watermark glyph (bottom-right, tucked behind the chip) ──── */

.party-watermark {
  position: absolute;
  bottom: -14px;
  right: -12px;
  font-size: 90px !important;
  line-height: 1;
  color: #5040E0;
  opacity: 0.18;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .party-watermark { opacity: 0.22; }
}

/* ── "PARTY" tag pill ──────────────────────────────────────── */

.party-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(80, 64, 224, 0.16);
  border: 1px solid rgba(80, 64, 224, 0.28);
  color: #5040E0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 2;
}

/* ── Ticket-chip hero ──────────────────────────────────────────
   Reused at two scales: the small/front card hero, and the large
   card's header hero. Shows real data (weekday + day-of-month). */

.party-chip-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 22px;
}

.party-ticket-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1A1260;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

.party-ticket-chip--sm   { width: 58px; height: 64px; }
.party-ticket-chip--hero { width: 62px; height: 68px; border-radius: 15px; flex-shrink: 0; }

.party-ticket-chip__band {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  background: #FFD700;
  transition: background 0.2s;
}

.party-ticket-chip__dow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #1A1260;
  transition: color 0.2s;
}

.party-ticket-chip--hero .party-ticket-chip__dow { font-size: 10px; }

.party-ticket-chip__dom {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-top: 4px;
  transition: color 0.2s;
}

.party-ticket-chip--hero .party-ticket-chip__dom { font-size: 24px; }

/* ── Text ──────────────────────────────────────────────────── */

.party-title {
  color: var(--dm-on-surface);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.2px;
  padding: 0 12px;
  margin-top: 8px;
  margin-bottom: 4px;
  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;
}

.party-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 0 12px;
  letter-spacing: 0.1px;
  position: relative;
  z-index: 1;
  color: var(--dm-on-surface-variant);
}

/* ── Popup shell ───────────────────────────────────────────── */

.party-popup {
  background: var(--dm-surface-container-low) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
  .party-popup {
    background: var(--dm-surface-container) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* ── Front face (mirrors small card during morph) ──────────── */

.party-front.flip-face--front {
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background-color: var(--dm-surface-container-low);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(169, 166, 217, 0.14);
}

@media (prefers-color-scheme: dark) {
  .party-front.flip-face--front { background-color: var(--dm-surface-container); }
}

/* Violet accent gradient wash, same as the small card */
.party-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(80, 64, 224, 0.31) 0%,
    rgba(80, 64, 224, 0.125) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* 1px top-edge highlight, same as the small card */
.party-front::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(198, 190, 250, 0.90);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .party-front::after { background: rgba(198, 190, 250, 0.30); }
}

/* Pin elements absolutely so the morph is visually stable */
.party-front .party-chip-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 44px;
  flex: unset;
  padding-top: 22px;
}

.party-front .party-title {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  margin: 0;
}

.party-front .party-label {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
}

/* ── Large back face ───────────────────────────────────────── */

.party-large {
  background: var(--dm-surface-container-low);
  overflow: hidden;
  flex-direction: column;
}

@media (prefers-color-scheme: dark) {
  .party-large { background: var(--dm-surface-container); }
}

/* ── Header ────────────────────────────────────────────────── */

.party-large__header {
  height: 220px;
  background: linear-gradient(135deg, #2820A0 0%, #1A1260 55%, #080618 100%);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Glass wash over header gradient */
.party-large__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 1px top highlight in header */
.party-large__header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(169, 166, 217, 0.30);
  pointer-events: none;
  z-index: 1;
}

.party-large__header > * { position: relative; z-index: 2; }

/* Spotlight orbs */
.party-large__spotlight-r {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 140px;
  background: rgba(80, 64, 224, 0.22);
  top: -100px; right: -80px;
  pointer-events: none;
  z-index: 0;
}

.party-large__spotlight-l {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 70px;
  background: rgba(80, 64, 224, 0.10);
  top: 70px; left: -40px;
  pointer-events: none;
  z-index: 0;
}

.party-large__header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.party-large__icon-circle {
  width: 38px; height: 38px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.party-large__icon-circle .material-symbols-outlined {
  font-size: 20px !important;
  line-height: 1;
  color: #2820A0;
}

.party-large__badge {
  background: rgba(255, 215, 0, 0.16);
  border: 1px solid rgba(255, 215, 0, 0.35);
  padding: 4px 10px;
  border-radius: 10px;
  color: #FFD700;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Hero row: ticket chip + title/countdown, side by side like a ticket stub */
.party-large__hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.party-large__hero-text {
  flex: 1;
  min-width: 0;
}

.party-large__title {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  text-align: left;
}

.party-large__countdown-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  max-width: 100%;
  transition: background 0.2s, border-color 0.2s;
}

.party-large__countdown-pill-text {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

/* ── Body ──────────────────────────────────────────────────── */

.party-large__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px 0;
  gap: 12px;
}

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

.party-large__detail-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(80, 64, 224, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.party-large__detail-icon {
  font-size: 14px;
  color: rgba(80, 64, 224, 0.75);
}

.party-large__detail-text {
  font-size: 13.5px;
  color: var(--dm-on-surface-variant);
  font-weight: 500;
}

.party-large__creator-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Footer ────────────────────────────────────────────────── */

.party-large__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid var(--dm-outline-variant);
  background: var(--dm-surface-container-low);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  .party-large__footer { background: var(--dm-surface-container); }
}

.party-large__open-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  background: #5040E0;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.party-large__open-btn:hover  { opacity: 0.88; }
.party-large__open-btn:active { transform: scale(0.96); }

.party-large__open-btn-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
}

.party-large__open-btn-arrow {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* ── Close button ──────────────────────────────────────────── */

.party-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s;
}

.party-close-btn:hover { background: rgba(255, 255, 255, 0.20); }
.party-close-btn .material-symbols-outlined { font-size: 16px; }

/* ============================================================
   CALENDAR EVENT CARDS — row-list layout (matches CalendarScreen)
   6 variants: event, job, away, party, guests-ev, note-ev
   ============================================================ */

/* ── Row card — shared base ───────────────────────────────── */

.ev-row {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--dm-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 10px;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}

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

.ev-row:hover  { transform: translateY(-2px); }
.ev-row:active { transform: scale(0.985); }

/* ── Per-type accent shadows ──────────────────────────────── */

.ev-row--event    { box-shadow: 0 3px 8px rgba(56,102,65,.22); }
.ev-row--job      { box-shadow: 0 3px 8px rgba(192,123,26,.22); }
.ev-row--away     { box-shadow: 0 3px 8px rgba(74,144,217,.22); }
.ev-row--party    { box-shadow: 0 3px 8px rgba(124,58,237,.22); }
.ev-row--guests-ev{ box-shadow: 0 3px 8px rgba(224,90,90,.22); }
.ev-row--note-ev  { box-shadow: 0 3px 8px rgba(234,184,91,.28); }

.ev-row--event:hover    { box-shadow: 0 4px 14px rgba(56,102,65,.36); }
.ev-row--job:hover      { box-shadow: 0 4px 14px rgba(192,123,26,.36); }
.ev-row--away:hover     { box-shadow: 0 4px 14px rgba(74,144,217,.36); }
.ev-row--party:hover    { box-shadow: 0 4px 14px rgba(124,58,237,.36); }
.ev-row--guests-ev:hover{ box-shadow: 0 4px 14px rgba(224,90,90,.36); }
.ev-row--note-ev:hover  { box-shadow: 0 4px 14px rgba(234,184,91,.44); }

/* ── Accent diagonal gradient overlay ────────────────────── */

.ev-row::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ev-row--event::before    { background: linear-gradient(135deg, rgba(56,102,65,.31) 0%, rgba(56,102,65,.13) 43%, transparent 70%); }
.ev-row--job::before      { background: linear-gradient(135deg, rgba(192,123,26,.31) 0%, rgba(192,123,26,.13) 43%, transparent 70%); }
.ev-row--away::before     { background: linear-gradient(135deg, rgba(74,144,217,.31) 0%, rgba(74,144,217,.13) 43%, transparent 70%); }
.ev-row--party::before    { background: linear-gradient(135deg, rgba(124,58,237,.31) 0%, rgba(124,58,237,.13) 43%, transparent 70%); }
.ev-row--guests-ev::before{ background: linear-gradient(135deg, rgba(224,90,90,.31) 0%, rgba(224,90,90,.13) 43%, transparent 70%); }
.ev-row--note-ev::before  { background: linear-gradient(135deg, rgba(234,184,91,.31) 0%, rgba(234,184,91,.13) 43%, transparent 70%); }

/* ── 1px top accent highlight ────────────────────────────── */

.ev-row::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}

.ev-row--event::after    { background: rgba(185,236,190,.90); }
.ev-row--job::after      { background: rgba(255,220,160,.90); }
.ev-row--away::after     { background: rgba(183,211,240,.90); }
.ev-row--party::after    { background: rgba(210,180,255,.90); }
.ev-row--guests-ev::after{ background: rgba(255,196,196,.90); }
.ev-row--note-ev::after  { background: rgba(247,227,189,.90); }

@media (prefers-color-scheme: dark) {
  .ev-row--event::after    { background: rgba(185,236,190,.14); }
  .ev-row--job::after      { background: rgba(255,220,160,.14); }
  .ev-row--away::after     { background: rgba(183,211,240,.14); }
  .ev-row--party::after    { background: rgba(210,180,255,.14); }
  .ev-row--guests-ev::after{ background: rgba(255,196,196,.14); }
  .ev-row--note-ev::after  { background: rgba(247,227,189,.14); }
}

/* ── Row body ─────────────────────────────────────────────── */

.ev-row__body {
  position: relative;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-row__body--person {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.ev-row__body--party { gap: 10px; }

/* ── Title line ───────────────────────────────────────────── */

.ev-row__title-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.ev-row__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-on-surface);
  flex: 1;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.ev-row__chevron {
  font-size: 14px;
  color: var(--dm-on-surface-variant);
  flex-shrink: 0;
  opacity: 0.55;
}

/* ── Meta rows ────────────────────────────────────────────── */

.ev-row__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.ev-row__meta.ev-row__meta--inline { margin-top: 0; }

.ev-row__meta-icon { font-size: 11px; flex-shrink: 0; }

.ev-row__meta-icon--event    { color: #386641; }
.ev-row__meta-icon--job      { color: #C07B1A; }
.ev-row__meta-icon--party    { color: #7C3AED; }
.ev-row__meta-icon--guests-ev{ color: #E05A5A; }
.ev-row__meta-icon--note-ev  { color: #C07B1A; }

.ev-row__meta-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--dm-on-surface-variant);
}

.ev-row__meta-avatar-sm {
  width: 14px; height: 14px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Assignee avatar stack (job) ──────────────────────────── */

.ev-row__assignee-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ev-row__assignee-img {
  width: 18px; height: 18px;
  border-radius: 9px;
  object-fit: cover;
}

.ev-row__assignee-img + .ev-row__assignee-img { margin-left: -6px; }

.ev-row__assignee-img--job { border: 1.5px solid #C07B1A; }

/* ── Person layout (away, guests-ev) ─────────────────────── */

.ev-row__person-avatar {
  width: 48px; height: 48px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.ev-row__person-avatar--away      { border-color: #4A90D9; box-shadow: 0 2px 6px rgba(74,144,217,.40); }
.ev-row__person-avatar--guests-ev { border-color: #E05A5A; box-shadow: 0 2px 6px rgba(224,90,90,.40); }

.ev-row__person-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ev-row__person-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* ── Party layout ─────────────────────────────────────────── */

.ev-row__party-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.ev-row__party-icon {
  width: 38px; height: 38px;
  border-radius: 19px;
  background: rgba(124,58,237,.13);
  border: 1.5px solid rgba(124,58,237,.33);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-row__party-symbol { font-size: 18px !important; color: #7C3AED; line-height: 1; }

.ev-row__party-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ev-row__party-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ev-row__party-badge {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(124,58,237,.09);
  border: 1px solid rgba(124,58,237,.21);
  font-size: 9px;
  font-weight: 800;
  color: #7C3AED;
  letter-spacing: 1.2px;
}

/* ── Popup shell ──────────────────────────────────────────── */

.ev-popup {
  background: var(--dm-surface-container-low) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

@media (prefers-color-scheme: dark) {
  .ev-popup {
    background: var(--dm-surface-container) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ── Front face (mirrors row card during morph) ───────────── */

.ev-front.flip-face--front {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  text-align: left;
}

.ev-front .ev-row__body { width: 100%; }

/* Accent gradient overlay on front face */
.ev-front--event::before    { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,102,65,.31) 0%, rgba(56,102,65,.13) 43%, transparent 70%); pointer-events: none; }
.ev-front--job::before      { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(192,123,26,.31) 0%, rgba(192,123,26,.13) 43%, transparent 70%); pointer-events: none; }
.ev-front--away::before     { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(74,144,217,.31) 0%, rgba(74,144,217,.13) 43%, transparent 70%); pointer-events: none; }
.ev-front--party::before    { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124,58,237,.31) 0%, rgba(124,58,237,.13) 43%, transparent 70%); pointer-events: none; }
.ev-front--guests-ev::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(224,90,90,.31) 0%, rgba(224,90,90,.13) 43%, transparent 70%); pointer-events: none; }
.ev-front--note-ev::before  { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(234,184,91,.31) 0%, rgba(234,184,91,.13) 43%, transparent 70%); pointer-events: none; }

/* 1px top highlight on front face */
.ev-front--event::after    { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(185,236,190,.90); pointer-events: none; }
.ev-front--job::after      { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,220,160,.90); pointer-events: none; }
.ev-front--away::after     { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(183,211,240,.90); pointer-events: none; }
.ev-front--party::after    { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(210,180,255,.90); pointer-events: none; }
.ev-front--guests-ev::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,196,196,.90); pointer-events: none; }
.ev-front--note-ev::after  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(247,227,189,.90); pointer-events: none; }

@media (prefers-color-scheme: dark) {
  .ev-front--event::after    { background: rgba(185,236,190,.14); }
  .ev-front--job::after      { background: rgba(255,220,160,.14); }
  .ev-front--away::after     { background: rgba(183,211,240,.14); }
  .ev-front--party::after    { background: rgba(210,180,255,.14); }
  .ev-front--guests-ev::after{ background: rgba(255,196,196,.14); }
  .ev-front--note-ev::after  { background: rgba(247,227,189,.14); }
}

/* ── Large back face — EventDetailView layout ─────────────── */

.ev-detail {
  /* position: absolute; inset: 0 — inherited from .flip-face, fills the popup */
  background: var(--dm-surface-container-low);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dm-outline-variant);
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .ev-detail { background: var(--dm-surface-container); }
}

/* Subtle accent wash below the header */
.ev-detail__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ev-detail--event .ev-detail__glass    { background: linear-gradient(135deg, rgba(56,102,65,.06) 0%, transparent 50%); }
.ev-detail--job .ev-detail__glass      { background: linear-gradient(135deg, rgba(192,123,26,.06) 0%, transparent 50%); }
.ev-detail--away .ev-detail__glass     { background: linear-gradient(135deg, rgba(74,144,217,.06) 0%, transparent 50%); }
.ev-detail--party .ev-detail__glass    { background: linear-gradient(135deg, rgba(124,58,237,.06) 0%, transparent 50%); }
.ev-detail--guests-ev .ev-detail__glass{ background: linear-gradient(135deg, rgba(224,90,90,.06) 0%, transparent 50%); }
.ev-detail--note-ev .ev-detail__glass  { background: linear-gradient(135deg, rgba(234,184,91,.06) 0%, transparent 50%); }

.ev-detail > *:not(.ev-detail__glass):not(.ev-close-btn) {
  position: relative;
  z-index: 1;
}

/* ── Header (gradient, like EventDetailView) ──────────────── */

.ev-detail__header {
  padding: 22px 22px 24px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ev-detail--event .ev-detail__header    { background: linear-gradient(to bottom right, #386641, rgba(56,102,65,.73)); }
.ev-detail--job .ev-detail__header      { background: linear-gradient(to bottom right, #C07B1A, rgba(192,123,26,.73)); }
.ev-detail--away .ev-detail__header     { background: linear-gradient(to bottom right, #4A90D9, rgba(74,144,217,.73)); }
.ev-detail--party .ev-detail__header    { background: linear-gradient(to bottom right, #7C3AED, rgba(124,58,237,.73)); }
.ev-detail--guests-ev .ev-detail__header{ background: linear-gradient(to bottom right, #E05A5A, rgba(224,90,90,.73)); }
.ev-detail--note-ev .ev-detail__header  { background: linear-gradient(to bottom right, #EAB85B, rgba(234,184,91,.73)); }

.ev-detail__header-highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}

.ev-detail--event .ev-detail__header-highlight    { background: rgba(185,236,190,.35); }
.ev-detail--job .ev-detail__header-highlight      { background: rgba(255,220,160,.35); }
.ev-detail--away .ev-detail__header-highlight     { background: rgba(183,211,240,.35); }
.ev-detail--party .ev-detail__header-highlight    { background: rgba(210,180,255,.35); }
.ev-detail--guests-ev .ev-detail__header-highlight{ background: rgba(255,196,196,.35); }
.ev-detail--note-ev .ev-detail__header-highlight  { background: rgba(247,227,189,.35); }

.ev-detail__header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ev-detail__icon-circle {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-detail__icon-circle ion-icon { font-size: 20px; line-height: 1; }
.ev-detail__icon-circle .material-symbols-outlined { font-size: 20px !important; line-height: 1; }

.ev-detail--event .ev-detail__type-icon    { color: #386641; }
.ev-detail--job .ev-detail__type-icon      { color: #C07B1A; }
.ev-detail--away .ev-detail__type-icon     { color: #4A90D9; }
.ev-detail--party .ev-detail__type-icon    { color: #7C3AED; }
.ev-detail--guests-ev .ev-detail__type-icon{ color: #E05A5A; }
.ev-detail--note-ev .ev-detail__type-icon  { color: #C07B1A; }

.ev-detail__badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ev-detail__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  display: block;
  line-height: 1.2;
}

/* ── Body ─────────────────────────────────────────────────── */

.ev-detail__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.ev-info-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}

.ev-info-icon-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ev-detail--event .ev-info-icon-badge    { background: rgba(56,102,65,.13); }
.ev-detail--job .ev-info-icon-badge      { background: rgba(192,123,26,.13); }
.ev-detail--away .ev-info-icon-badge     { background: rgba(74,144,217,.13); }
.ev-detail--party .ev-info-icon-badge    { background: rgba(124,58,237,.13); }
.ev-detail--guests-ev .ev-info-icon-badge{ background: rgba(224,90,90,.13); }
.ev-detail--note-ev .ev-info-icon-badge  { background: rgba(234,184,91,.18); }

.ev-info-icon-badge ion-icon { font-size: 16px; line-height: 1; }

.ev-detail--event .ev-info-icon-badge ion-icon    { color: #386641; }
.ev-detail--job .ev-info-icon-badge ion-icon      { color: #C07B1A; }
.ev-detail--away .ev-info-icon-badge ion-icon     { color: #4A90D9; }
.ev-detail--party .ev-info-icon-badge ion-icon    { color: #7C3AED; }
.ev-detail--guests-ev .ev-info-icon-badge ion-icon{ color: #E05A5A; }
.ev-detail--note-ev .ev-info-icon-badge ion-icon  { color: #C07B1A; }

.ev-info-content { flex: 1; }

.ev-info-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--dm-on-surface);
  opacity: 0.5;
}

.ev-info-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dm-on-surface);
}

.ev-detail__sep {
  height: 1px;
  background: var(--dm-outline-variant);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Creator row */
.ev-creator-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ev-creator-avatar {
  width: 28px; height: 28px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Assignees */
.ev-assignees-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.ev-assignee-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 50px;
  margin-top: -4px;
}

.ev-assignee-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid;
}

.ev-assignee-chip--job {
  border-color: rgba(192, 123, 26, 0.28);
  background: rgba(192, 123, 26, 0.08);
}

.ev-assignee-avatar {
  width: 28px; height: 28px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.ev-assignee-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dm-on-surface);
}

/* Note link */
.ev-note-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid;
  cursor: pointer;
  transition: opacity 0.15s;
  background: rgba(234, 184, 91, 0.12);
  border-color: rgba(234, 184, 91, 0.36);
}

.ev-note-link:hover { opacity: 0.78; }

.ev-note-link ion-icon { color: #C07B1A; flex-shrink: 0; }

.ev-note-link-text {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: #C07B1A;
}

/* ── Actions (edit button) ────────────────────────────────── */

.ev-detail__actions {
  padding: 16px;
  border-top: 1px solid var(--dm-outline-variant);
  flex-shrink: 0;
}

.ev-edit-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: opacity 0.15s;
  background: none;
}

.ev-edit-btn:hover { opacity: 0.72; }

.ev-detail--event .ev-edit-btn     { border-color: rgba(56,102,65,.28);   background: rgba(56,102,65,.09);   color: #386641; }
.ev-detail--job .ev-edit-btn       { border-color: rgba(192,123,26,.28);  background: rgba(192,123,26,.09);  color: #C07B1A; }
.ev-detail--away .ev-edit-btn      { border-color: rgba(74,144,217,.28);  background: rgba(74,144,217,.09);  color: #4A90D9; }
.ev-detail--party .ev-edit-btn     { border-color: rgba(124,58,237,.28);  background: rgba(124,58,237,.09);  color: #7C3AED; }
.ev-detail--guests-ev .ev-edit-btn { border-color: rgba(224,90,90,.28);   background: rgba(224,90,90,.09);   color: #E05A5A; }

/* ── Close button ─────────────────────────────────────────── */

.ev-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
}

.ev-close-btn:hover { background: rgba(255, 255, 255, 0.28); }
.ev-close-btn .material-symbols-outlined { font-size: 16px; }

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

.dash-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 56px;
  padding: 64px 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__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); }

/* Anti-flicker: transforming the wrapper on hover moves its hit area with
   it, so a cursor resting on the trailing edge falls out of :hover, the
   card snaps back under it, and the two states oscillate. This invisible
   ::after counter-transforms in sync with the hover lift so it keeps
   covering the card's RESTING footprint — the hover hit area never moves.
   z-index: -1 keeps it behind the card so clicks still land on the card.
   Same pattern on every tilt wrapper below. */
.note-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.note-tilt:hover::after { transform: 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); }

/* Anti-flicker hit-area keeper (see .note-tilt::after). All three lift
   exactly 14px from their resting offset. */
.appliance-tilt { position: relative; }
.appliance-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.appliance-tilt:hover::after { transform: translateY(14px); }

/* ── 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); }

/* Anti-flicker hit-area keeper (see .note-tilt::after) */
.event-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-tilt:hover::after { transform: 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);
}

/* Anti-flicker hit-area keeper (see .note-tilt::after) — here the hover
   change is a rotation, so the pseudo counter-rotates back to the resting
   angle (same box, same center → exact cancel). */
.dash-inventory-tilt { position: relative; }
.dash-inventory-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-inventory-tilt:hover::after { transform: rotate(3deg); }

.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);
}

/* Anti-flicker hit-area keeper (see .note-tilt::after) */
.dash-weather-tilt { position: relative; }
.dash-weather-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-weather-tilt:hover::after { transform: rotate(-4deg); }

.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;
  }

  /* 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); }

  .appliance-tilt:hover::after { transform: translateY(12px); }
}

/* ── Phone sizing ────────────────────────────────────────────
   At ≤480px give everything room to breathe on narrow phones. */
@media (max-width: 480px) {
  /* 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 ──────────────────────────────────────────────── */

/* 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 ────────────────────── */


/* 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) {
  .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); }

/* Anti-flicker hit-area keeper (see .note-tilt::after) */
.cal-pg-tilt { position: relative; }
.cal-pg-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}
.cal-pg-tilt:hover::after { transform: rotate(2deg); }

.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); }

/* Anti-flicker hit-area keeper (see .note-tilt::after) */
.cal-ev-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cal-ev-tilt:hover::after { transform: 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:hover::after { transform: 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;
}

/* ============================================================
   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; }

/* 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;
}

/* 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 {
    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;
}

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

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

/* ══════════════════════════════════════════════════════════════
   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); }