/* ============================================================
   FLIP-CARD GRID
   ============================================================ */

.panel-header {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
}

.panel-header__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.panel-header__icon {
  font-size: 1.75rem;
  color: var(--dm-primary);
  flex-shrink: 0;
  line-height: 1;
}

.panel-header__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dm-on-surface);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.panel-header__subtitle {
  font-size: 0.9rem;
  color: var(--dm-on-surface-variant);
  margin: 0;
  padding-left: calc(1.75rem + 0.6rem);
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.flip-card {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: var(--dm-shadow-card);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.flip-card:hover { transform: scale(1.04); box-shadow: var(--dm-shadow-elevated); }
.flip-card:active { transform: scale(0.96); }

.flip-card--primary   { background: var(--dm-primary-container);   color: var(--dm-on-primary-container); }
.flip-card--secondary { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }
.flip-card--tertiary  { background: var(--dm-tertiary-container);  color: var(--dm-on-tertiary-container); }
.flip-card--error     { background: var(--dm-error-container);     color: var(--dm-on-error-container); }

.flip-card__icon  { font-size: 1.9rem; line-height: 1; pointer-events: none; }
.flip-card__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; pointer-events: none; }

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

@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 to 90°, then ease-out glide back. */
  0% {
    transform: perspective(1200px) rotateY(0deg);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  30%    { transform: perspective(1200px) rotateY(90deg); }
  30.1%  {
    transform: perspective(1200px) rotateY(-90deg);
    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; }
}

.flip-popup--primary   .flip-face--front { background: var(--dm-primary-container);   color: var(--dm-on-primary-container); }
.flip-popup--secondary .flip-face--front { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }
.flip-popup--tertiary  .flip-face--front { background: var(--dm-tertiary-container);  color: var(--dm-on-tertiary-container); }
.flip-popup--error     .flip-face--front { background: var(--dm-error-container);     color: var(--dm-on-error-container); }

/* ── Back face content ────────────────────────────────────── */

.flip-popup-header {
  padding: 1.1rem 1.25rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 0.5rem;
}

.flip-popup-header__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dm-on-surface);
  margin: 0;
}

.flip-popup-header__icon { font-size: 1.3rem; }

.flip-popup-close-btn {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: none;
  background: var(--dm-surface-container-high);
  color: var(--dm-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.flip-popup-close-btn:hover {
  background: var(--dm-surface-container-highest);
  color: var(--dm-on-surface);
}

.flip-popup-close-btn .material-symbols-outlined { font-size: 0.95rem; }

.flip-popup-divider {
  height: 1px;
  background: var(--dm-outline-variant);
  margin: 0 1.25rem;
  flex-shrink: 0;
}

.flip-popup-body {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.flip-popup-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--dm-surface-container);
}

.flip-popup-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--dm-outline-variant);
}

.flip-popup-item--primary   .flip-popup-item__dot { background: var(--dm-primary); }
.flip-popup-item--secondary .flip-popup-item__dot { background: var(--dm-secondary); }
.flip-popup-item--tertiary  .flip-popup-item__dot { background: var(--dm-tertiary); }
.flip-popup-item--error     .flip-popup-item__dot { background: var(--dm-error); }

.flip-popup-item__text {
  font-size: 0.88rem;
  color: var(--dm-on-surface);
  font-weight: 500;
}

.flip-popup-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--dm-on-surface-variant);
  opacity: 0.45;
}

.flip-popup-empty .material-symbols-outlined { font-size: 2.2rem; }
.flip-popup-empty-label { font-size: 0.85rem; font-weight: 600; }

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

/* ── Section header ────────────────────────────────────────── */

.note-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-on-surface-variant);
  opacity: 0.6;
  margin: 1rem 0 0.5rem;
}

/* ── Note grid — column count set by JS (mirrors RN Grid.tsx) ─ */

.note-grid {
  display: grid;
  gap: 10px;
  /* grid-template-columns injected by dormmate_script.js */
}

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

.party-ticket-chip--today {
  background: #FFD700;
  border-color: #E6C200;
}

.party-ticket-chip--today .party-ticket-chip__band { background: #fff; }
.party-ticket-chip--today .party-ticket-chip__dom  { color: #1A1260; }

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

/* ── Animated confetti canvas (sits over the full popup, clipped to header height via JS) */

.party-large__confetti {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 5;
}

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

.ev-list { display: flex; flex-direction: column; }

/* ── 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--away     { color: #4A90D9; }
.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; }