/* === Dashboard cockpit === */

.cockpit-greet {
  margin-bottom: var(--s-7);
}
.cockpit-greet h1 {
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
  color: var(--char-900); letter-spacing: -0.015em; margin: 0;
}
.cockpit-greet .lede {
  margin-top: var(--s-3); font-size: var(--t-md); color: var(--char-700); line-height: 1.6;
  max-width: 760px;
}
.cockpit-greet .lede .accent { color: var(--ink-800); font-weight: 500; }

/* Attention strip */
.attention {
  display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.attention .item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 10px 16px 10px 14px;
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  font-size: var(--t-sm); color: var(--char-700);
}
.attention .item:hover { border-color: var(--ink-700); transform: translateY(-1px); }
.attention .item .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-600);
}
.attention .item.urgent .dot { background: var(--bad); }
.attention .item.ok .dot     { background: var(--ok); }
.attention .item .arrow { color: var(--ink-700); margin-left: var(--s-2); }
.attention .item:hover .arrow { transform: translateX(2px); }

/* === KPI cards === */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-7);
}
.kpi-card {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none; color: inherit;
}
.kpi-card:hover {
  border-color: var(--ink-700); box-shadow: var(--shadow-card); transform: translateY(-1px);
  color: inherit;
}
.kpi-card .head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
}
.kpi-card .lbl {
  font: 600 11px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--char-500);
}
.kpi-card .icon-wrap {
  width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--ink-50); color: var(--ink-700);
  display: grid; place-items: center;
}
.kpi-card .v {
  font-weight: 600; font-size: 36px; line-height: 1; color: var(--char-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.kpi-card .sub { font-size: 13px; color: var(--char-500); line-height: 1.4; }

.kpi-card.warn { border-color: rgba(181,133,58,0.35); background: linear-gradient(180deg, var(--pastel-amber-50), var(--pearl)); }
.kpi-card.warn .icon-wrap { background: var(--pastel-amber-50); color: var(--pastel-amber-600); }
.kpi-card.warn .v { color: var(--pastel-amber-600); }

.kpi-card.urgent { border-color: rgba(156,43,43,0.30); background: linear-gradient(180deg, var(--pastel-blush-50), var(--pearl)); }
.kpi-card.urgent .icon-wrap { background: var(--pastel-blush-50); color: var(--pastel-blush-600); }
.kpi-card.urgent .v { color: var(--pastel-blush-600); }

/* Same "needs attention" weight as .warn (border + tinted value), rose instead
   of amber — .warn is already spoken for by money (Pending amount); a second
   attention tile reusing it read as a colour repeat on a 4-up row that's
   supposed to be polychrome. Unresponded uses this one instead. */
.kpi-card.notice { border-color: rgba(185,87,117,0.30); background: linear-gradient(180deg, var(--pastel-rose-50), var(--pearl)); }
.kpi-card.notice .icon-wrap { background: var(--pastel-rose-50); color: var(--pastel-rose-600); }
.kpi-card.notice .v { color: var(--pastel-rose-600); }

/* Pastel-tinted KPI variants — use these to give each card on a row a different
   accent so the cockpit doesn't read as one monochrome block. */
.kpi-card.tint-sky        { background: linear-gradient(180deg, var(--pastel-sky-50),        var(--pearl)); }
.kpi-card.tint-sky        .icon-wrap { background: var(--pastel-sky-50);        color: var(--pastel-sky-600); }
.kpi-card.tint-periwinkle { background: linear-gradient(180deg, var(--pastel-periwinkle-50), var(--pearl)); }
.kpi-card.tint-periwinkle .icon-wrap { background: var(--pastel-periwinkle-50); color: var(--pastel-periwinkle-600); }
.kpi-card.tint-mauve      { background: linear-gradient(180deg, var(--pastel-mauve-50),      var(--pearl)); }
.kpi-card.tint-mauve      .icon-wrap { background: var(--pastel-mauve-50);      color: var(--pastel-mauve-600); }
.kpi-card.tint-rose       { background: linear-gradient(180deg, var(--pastel-rose-50),       var(--pearl)); }
.kpi-card.tint-rose       .icon-wrap { background: var(--pastel-rose-50);       color: var(--pastel-rose-600); }
.kpi-card.tint-peach      { background: linear-gradient(180deg, var(--pastel-peach-50),      var(--pearl)); }
.kpi-card.tint-peach      .icon-wrap { background: var(--pastel-peach-50);      color: var(--pastel-peach-600); }
.kpi-card.tint-amber      { background: linear-gradient(180deg, var(--pastel-amber-50),      var(--pearl)); }
.kpi-card.tint-amber      .icon-wrap { background: var(--pastel-amber-50);      color: var(--pastel-amber-600); }

/* Section heads */
.cockpit-section { margin-bottom: var(--s-8); }
.cockpit-section .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-5); gap: var(--s-3);
}
.cockpit-section .head h2 {
  font-weight: 600; font-size: 22px; color: var(--char-900);
  letter-spacing: -0.01em; margin: 0;
}
.cockpit-section .head .subtle { color: var(--char-500); font-size: var(--t-sm); }
.cockpit-section .head .more {
  color: var(--ink-700); font-size: var(--t-sm); font-weight: 500;
}

/* Event tile */
.event-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4);
}
.event-tile {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
}
.event-tile .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }
.event-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--gold-600); }
.event-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--gold-600), var(--gold-500));
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.event-tile:hover::before { opacity: 1; }
.event-tile.urgent::before { opacity: 1; background: linear-gradient(to bottom, var(--bad), var(--warn)); }

/* Pastel-toned event tiles — coloured left edge always visible (not just on hover),
   matching the events list card view so the same event is recognisable across pages. */
.event-tile[class*="tone-"]::before { opacity: 1; }
.event-tile.tone-sky::before        { background: linear-gradient(to bottom, var(--pastel-sky-600), var(--pastel-sky-50)); }
.event-tile.tone-periwinkle::before { background: linear-gradient(to bottom, var(--pastel-periwinkle-600), var(--pastel-periwinkle-50)); }
.event-tile.tone-mauve::before      { background: linear-gradient(to bottom, var(--pastel-mauve-600), var(--pastel-mauve-50)); }
.event-tile.tone-rose::before       { background: linear-gradient(to bottom, var(--pastel-rose-600), var(--pastel-rose-50)); }
.event-tile.tone-peach::before      { background: linear-gradient(to bottom, var(--pastel-peach-600), var(--pastel-peach-50)); }
.event-tile.tone-amber::before      { background: linear-gradient(to bottom, var(--pastel-amber-600), var(--pastel-amber-50)); }
.event-tile.tone-blush::before      { background: linear-gradient(to bottom, var(--pastel-blush-600), var(--pastel-blush-50)); }
.event-tile.tone-sky        .ring-fg { stroke: var(--pastel-sky-600); }
.event-tile.tone-periwinkle .ring-fg { stroke: var(--pastel-periwinkle-600); }
.event-tile.tone-mauve      .ring-fg { stroke: var(--pastel-mauve-600); }
.event-tile.tone-rose       .ring-fg { stroke: var(--pastel-rose-600); }
.event-tile.tone-peach      .ring-fg { stroke: var(--pastel-peach-600); }
.event-tile.tone-amber      .ring-fg { stroke: var(--pastel-amber-600); }
.event-tile.tone-blush      .ring-fg { stroke: var(--pastel-blush-600); }

.event-tile .top { display: flex; gap: var(--s-3); align-items: flex-start; }
.event-tile .name {
  font-weight: 600; font-size: 16px; color: var(--char-900); line-height: 1.3;
  flex: 1; min-width: 0; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.6em;
}
.event-tile .date {
  font-size: var(--t-sm); color: var(--char-500); margin-top: 4px;
  display: flex; align-items: center; gap: var(--s-2);
  white-space: nowrap; overflow: hidden;
}
.event-tile .date .countdown {
  font-weight: 600; font-size: 14px; color: var(--ink-800);
  font-variant-numeric: tabular-nums;
}

.event-tile .ring-wrap {
  width: 64px; height: 64px; flex-shrink: 0; position: relative;
}
.event-tile .ring-wrap svg { transform: rotate(-90deg); }
.event-tile .ring-bg { fill: none; stroke: var(--line-200); stroke-width: 4; }
.event-tile .ring-fg { fill: none; stroke: var(--ink-800); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease); }
.event-tile .ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 600; font-size: 14px; color: var(--char-900);
  font-variant-numeric: tabular-nums;
}

.event-tile .meta-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--line-100);
}
.event-tile .meta-row .cell { display: flex; flex-direction: column; gap: 2px; }
.event-tile .meta-row .lbl { font: 600 10px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--char-500); }
.event-tile .meta-row .v { font-weight: 600; font-size: 16px; color: var(--char-900); font-variant-numeric: tabular-nums; line-height: 1; }

/* Card footer — distinct visual block: subtle top border + ivory tint, sits at the
   bottom of the card, holds template name + Open CTA. Same on dashboard and the
   events list Card view. */
.event-tile .footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px var(--s-5);
  border-top: 1px solid var(--line-100);
  background: var(--ivory);
}
.event-tile .footer .meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--char-700);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-tile .footer .meta .lbl {
  font: 600 9.5px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--char-500); flex-shrink: 0;
}
/* The template's type (media + reply shape) stands in for the old "TPL" word —
   one quiet glyph, no colour of its own (inherits the meta row's muted char-500),
   full detail on hover via its title. Shared by the card footer here and the
   events table row (.ev-line .tpl-badge, layout.css). */
.tpl-badge { display: inline-flex; flex-shrink: 0; color: var(--char-500); }
.tpl-badge svg { display: block; }
.event-tile .footer .meta .val {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.event-tile .footer .cta {
  font-size: 12.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap;
  flex-shrink: 0;
}
.event-tile .footer .cta::after { content: ' →'; transition: margin-left var(--dur-fast) var(--ease); display: inline-block; margin-left: 2px; }
.event-tile:hover .footer .cta::after { margin-left: 6px; }

/* Workspace tabs (used by event detail) */
.workspace-tabs {
  display: flex; gap: var(--s-1); margin: 0 0 var(--s-5);
  border-bottom: 1px solid var(--line-200);
  overflow-x: auto;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/legacy Edge */
}
.workspace-tabs::-webkit-scrollbar { display: none; }  /* Chromium/Safari */
.workspace-tabs a {
  padding: 12px 18px; color: var(--char-500); font: 500 14px var(--font-ui);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.workspace-tabs a:hover { color: var(--char-900); }
.workspace-tabs a.active { color: var(--ink-800); border-bottom-color: var(--ink-800); font-weight: 600; }
.workspace-tabs a .count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--ink-100); color: var(--ink-800); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
}
.workspace-tabs a.active .count { background: var(--ink-800); color: var(--pearl); }

/* === View toggle (List / Cards / Calendar) === */
.view-toggle {
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--ink-50); border-radius: var(--r-pill);
}
.view-toggle .vt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font: 500 12.5px var(--font-ui); color: var(--char-500);
  text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.view-toggle .vt-btn:hover { color: var(--char-900); }
.view-toggle .vt-btn.active {
  background: var(--pearl); color: var(--ink-800); font-weight: 600;
  box-shadow: 0 1px 2px rgba(14,31,58,0.06);
}

/* === Truncated event-name cells in list view === */
.ev-name-cell {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--char-900); font-weight: 500;
  line-height: 1.3; max-height: 2.6em;
}
.ev-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ev-truncate {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}

/* === Event cards (Card view on Events list) — quiet luxury, not crayon === */
.event-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
}
.event-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14,31,58,0.06), 0 12px 32px rgba(14,31,58,0.08);
  border-color: var(--gold-500);
}
/* Hue indicator: a small dot at top-right, not a loud left bar. */
.event-card .ec-accent {
  position: absolute; top: 18px; right: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  opacity: 0.85;
}
.event-card.tone-sky        .ec-accent { background: var(--pastel-sky-600); }
.event-card.tone-periwinkle .ec-accent { background: var(--pastel-periwinkle-600); }
.event-card.tone-mauve      .ec-accent { background: var(--pastel-mauve-600); }
.event-card.tone-rose       .ec-accent { background: var(--pastel-rose-600); }
.event-card.tone-peach      .ec-accent { background: var(--pastel-peach-600); }
.event-card.tone-amber      .ec-accent { background: var(--pastel-amber-600); }
.event-card.tone-blush      .ec-accent { background: var(--pastel-blush-600); }

.event-card .ec-top { display: flex; align-items: flex-start; gap: var(--s-3); padding-right: 24px; }
.event-card .ec-title-wrap { flex: 1; min-width: 0; }
.event-card .ec-group {
  font: 600 10px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--char-500); margin-bottom: 6px;
}
.event-card .ec-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.2;
  color: var(--char-900); letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.4em;
}
/* Inside the admin shell, --font-display resolves to Inter (per layout.css override) */
.app .event-card .ec-name { font-family: var(--font-ui); font-weight: 600; font-size: 18px; }

.event-card .ec-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); color: var(--char-500);
  padding-top: 2px;
}
.event-card .ec-meta .dot { color: var(--char-400); }
.event-card .ec-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.event-card .ec-venue {
  font-size: var(--t-sm); color: var(--char-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: -4px;
}
.event-card .ec-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  padding-top: var(--s-3); margin-top: auto; border-top: 1px solid var(--line-100);
}
.event-card .ec-stat { display: flex; flex-direction: column; gap: 4px; }
.event-card .ec-stat .lbl {
  font: 600 10px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--char-500);
}
.event-card .ec-stat .v {
  font-weight: 600; font-size: 18px; color: var(--char-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1;
}
.event-card .ec-progress {
  height: 3px; border-radius: 2px; background: var(--line-100); overflow: hidden;
}
.event-card.tone-sky        .ec-progress span { background: var(--pastel-sky-600); }
.event-card.tone-periwinkle .ec-progress span { background: var(--pastel-periwinkle-600); }
.event-card.tone-mauve      .ec-progress span { background: var(--pastel-mauve-600); }
.event-card.tone-rose       .ec-progress span { background: var(--pastel-rose-600); }
.event-card.tone-peach      .ec-progress span { background: var(--pastel-peach-600); }
.event-card.tone-amber      .ec-progress span { background: var(--pastel-amber-600); }
.event-card.tone-blush      .ec-progress span { background: var(--pastel-blush-600); }
.event-card .ec-progress span { display: block; height: 100%; transition: width var(--dur-base) var(--ease); }

/* === Calendar view — refined, generous, quiet === */
.calendar-wrap {
  background: var(--pearl); border: 1px solid var(--line-200); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: 0 1px 2px rgba(14,31,58,0.04);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-5); gap: var(--s-4);
}
.cal-head h2 {
  font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: var(--char-900);
  margin: 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-200); border-radius: var(--r-md); overflow: hidden;
}
.cal-dow {
  background: var(--ivory); padding: 10px 12px;
  font: 600 11px var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--char-500); text-align: center;
  border-bottom: 1px solid var(--line-200);
}
.cal-dow + .cal-dow,
.cal-cell + .cal-cell:not(:nth-child(7n+1)) { border-left: 1px solid var(--line-100); }
.cal-cell {
  background: var(--pearl); min-height: 110px; padding: 10px 10px 8px;
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--line-100);
  position: relative;
}
.cal-cell.empty { background: transparent; }
.cal-cell .cal-num {
  font-weight: 600; font-size: 14px; color: var(--char-700);
  font-variant-numeric: tabular-nums; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  margin-bottom: 2px;
}
.cal-cell.today .cal-num {
  background: var(--gold-600); color: var(--pearl);
}
.cal-cell .cal-pill {
  display: block; font-size: 11.5px; padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; font-weight: 500;
  transition: filter var(--dur-fast) var(--ease);
}
.cal-pill.tone-sky        { background: var(--pastel-sky-50);        color: var(--pastel-sky-600); }
.cal-pill.tone-periwinkle { background: var(--pastel-periwinkle-50); color: var(--pastel-periwinkle-600); }
.cal-pill.tone-mauve      { background: var(--pastel-mauve-50);      color: var(--pastel-mauve-600); }
.cal-pill.tone-rose       { background: var(--pastel-rose-50);       color: var(--pastel-rose-600); }
.cal-pill.tone-peach      { background: var(--pastel-peach-50);      color: var(--pastel-peach-600); }
.cal-pill.tone-amber      { background: var(--pastel-amber-50);      color: var(--pastel-amber-600); }
.cal-pill.tone-blush      { background: var(--pastel-blush-50);      color: var(--pastel-blush-600); }
.cal-pill:hover { filter: brightness(0.95); }
.cal-cell .cal-more { font-size: 10px; color: var(--char-500); padding: 0 8px; margin-top: 2px; }
@media (max-width: 880px) {
  .calendar-wrap { padding: var(--s-4); }
  .cal-cell { min-height: 70px; padding: 6px 6px 5px; }
  .cal-cell .cal-num { width: 22px; height: 22px; font-size: 12px; }
  .cal-cell .cal-pill { font-size: 10px; padding: 2px 5px; }
}

/* === Event form: form on left, live preview on right === */
.event-form-grid {
  display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 360px);
  gap: var(--s-5); align-items: start;
}
@media (max-width: 1100px) {
  .event-form-grid { grid-template-columns: 1fr; }
  .event-preview-col { position: static !important; }
}
.event-preview-col { position: sticky; top: var(--s-5); }
.preview-shell .eyebrow { color: var(--pastel-periwinkle-600); }

/* === Mini WhatsApp preview (used inside event form) === */
.wa-shell {
  background: #ECE5DD;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.wa-shell .wa-header {
  background: #008069; color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
.wa-shell .wa-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.20);
}
.wa-shell .wa-info strong { display: block; font-size: 14px; font-weight: 500; }
.wa-shell .wa-info span { font-size: 11px; opacity: 0.85; }
.wa-shell .wa-body { padding: 14px 12px; min-height: 180px; }
.wa-shell .wa-day {
  text-align: center; font-size: 11px; color: #667781;
  background: rgba(225,245,254,0.92); display: inline-block;
  padding: 3px 10px; border-radius: 8px; margin: 0 auto 12px;
  display: block; width: fit-content;
}
.wa-shell .wa-bubble {
  background: #fff; border-radius: 8px; padding: 8px 10px 6px;
  max-width: 86%; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
  position: relative; word-wrap: break-word;
}
.wa-shell .wa-bubble.in {
  border-top-left-radius: 0;
}
.wa-shell .wa-header-img img {
  width: 100%; max-height: 180px; object-fit: cover;
  border-radius: 4px; display: block; margin-bottom: 6px;
}
.wa-shell .wa-header-text {
  font-weight: 600; font-size: 14px; color: #111b21; margin-bottom: 4px;
}
.wa-shell .wa-body-text {
  font-size: 13.5px; color: #111b21; line-height: 1.45;
  white-space: pre-wrap;
}
.wa-shell .wa-buttons {
  display: flex; flex-direction: column; gap: 1px;
  margin: 8px -10px -6px; border-top: 1px solid #f0f2f5;
}
.wa-shell .wa-btn {
  background: transparent; border: none; padding: 8px 10px;
  color: #027eb5; font-size: 13px; font-weight: 500; cursor: pointer;
  border-bottom: 1px solid #f0f2f5; text-align: center;
}
.wa-shell .wa-btn:last-child { border-bottom: none; }
.wa-shell .wa-time {
  font-size: 10px; color: #667781; text-align: right; margin-top: 4px;
}

/* ── On-theme message preview (assets/js/wa-preview.js) ──────────────────────
   Our own elegant invitation-message card — NOT a WhatsApp clone. Compact: no
   chat header, no "Today" pill, no beige. Ivory/navy/gold palette. Shared by the
   template editor and the event form so they're identical. */
.msg-preview {
  background: var(--pearl); border: 1px solid var(--line-200);
  border-left: 3px solid var(--gold-500, #B08B47); border-radius: 12px;
  padding: 16px 18px; font-size: 14px; line-height: 1.55; color: var(--char-900);
  box-shadow: var(--shadow-soft);
}
/* ---- Media header: rendered inline, exactly as a phone shows it ---- */
.msg-preview .wap-img,
.msg-preview .wap-vid,
.msg-preview .wap-doc,
.msg-preview .wap-media-ph { position: relative; margin-bottom: 12px; }
.msg-preview .wap-img img,
.msg-preview .wap-vid video {
  display: block; width: 100%; max-height: 260px; object-fit: cover;
  border-radius: 10px; background: var(--ink-50, #eef1f6);
}
.msg-preview .wap-vid video { object-fit: contain; max-height: 280px; }
/* Broken/expired image → collapse to a tidy dashed frame via ::after */
.msg-preview .wap-img.wap-broke { min-height: 96px; border: 1px dashed var(--line-300, #cdd3dd); border-radius: 10px; }
.msg-preview .wap-img.wap-broke::after {
  content: 'Image unavailable'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--char-400); font-size: 12px;
}
/* PDF document card — icon tile + filename, like a phone attachment */
.msg-preview .wap-doc {
  display: flex; align-items: center; gap: 11px;
  background: var(--ink-50, #eef1f6); border-radius: 10px; padding: 11px 13px;
}
.msg-preview .wap-doc-ico {
  flex: 0 0 auto; width: 38px; height: 46px; border-radius: 5px;
  background: #d3453b; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
}
.msg-preview .wap-doc-meta { display: flex; flex-direction: column; min-width: 0; }
.msg-preview .wap-doc-name { font-weight: 600; color: var(--char-900); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview .wap-doc-sub  { color: var(--char-500); font-size: 11px; margin-top: 1px; }
/* Placeholder frame — media header with nothing attached yet */
.msg-preview .wap-media-ph {
  display: flex; align-items: center; gap: 8px;
  min-height: 84px; padding: 0 16px;
  background: repeating-linear-gradient(135deg, var(--ink-50, #eef1f6) 0 10px, #e7ebf2 10px 20px);
  border: 1px dashed var(--line-300, #cdd3dd); border-radius: 10px;
  color: var(--ink-700, #33507f); font-size: 12px; font-weight: 600;
}
.msg-preview .wap-media-ph svg { flex: 0 0 auto; opacity: 0.85; }
/* Corner number badge that ties inline media back to its variable row */
.msg-preview .wap-img > .pv-badge,
.msg-preview .wap-vid > .pv-badge,
.msg-preview .wap-doc > .pv-badge,
.msg-preview .wap-media-ph > .pv-badge {
  position: absolute; top: 6px; right: 6px; margin: 0; vertical-align: baseline;
  background: rgba(20,28,46,0.72); color: #fff; opacity: 1;
  padding: 1px 6px; border-radius: 999px; font-size: 9px;
}
.msg-preview .wap-header { font-weight: 700; font-size: 15px; color: var(--char-900); margin-bottom: 7px; }
.msg-preview .wap-body   { color: var(--char-800, #333); white-space: pre-wrap; }
.msg-preview .wap-footer { color: var(--char-500); font-size: 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-100); }
.msg-preview .wap-buttons { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.msg-preview .wap-btn {
  text-align: center; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--gold-300, #d9c48a); color: var(--gold-700, #8a6d2b);
  font-size: 13px; font-weight: 500; background: rgba(176,139,71,0.04);
  cursor: pointer; user-select: none;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.msg-preview .wap-btn:hover  { background: rgba(176,139,71,0.12); box-shadow: 0 2px 8px rgba(176,139,71,0.18); }
.msg-preview .wap-btn:active { transform: translateY(1px); background: rgba(176,139,71,0.20); box-shadow: 0 1px 3px rgba(176,139,71,0.20) inset; }

/* Placeholder slots — tinted by WHERE the value comes from (see wa-preview.js
   sourceKind): gold = event field · green = guest/invitee · slate = fixed
   static · muted dashed = nothing mapped yet. Numbered + hover-linked. */
.pv-slot    { border-radius: 3px; padding: 0 3px; position: relative; transition: box-shadow .12s, background .12s; }
.pv-invitee, .pv-field { background: rgba(45,122,95,0.14);  color: #2f7d5b; }
.pv-event   { background: rgba(176,139,71,0.16); color: #8a6d2b; }
.pv-static  { background: rgba(90,103,128,0.14);  color: #46536b; }
.pv-empty   { background: transparent; color: var(--char-400, #9aa1ac); border: 1px dashed var(--line-300, #cdd3dd); font-style: italic; }
.pv-badge   { font-size: 8px; font-weight: 700; opacity: 0.5; margin-left: 1px; vertical-align: super; }
.pv-slot.pv-hi { box-shadow: 0 0 0 2px var(--gold-500, #B08B47); background: rgba(176,139,71,0.24); }
.var-row.var-row-hi { background: var(--pastel-amber-50, #FBF0DC); border-radius: 6px; }
.var-row.var-row-hi .var-key { background: var(--gold-100, #f0e2c4); }

/* Colour key under the preview so the tinting is self-explanatory. */
.pv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--char-500); }
.pv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pv-legend i { width: 9px; height: 9px; border-radius: 2px; }
.pv-legend .sw-event   { background: #b08b47; }
.pv-legend .sw-invitee { background: #2f7d5b; }
.pv-legend .sw-static  { background: #5a6780; }

/* ── Flip-card: reveals a base template's single-guest twin (or vice versa) ──
   Shared by the template editor and the event form so a template flips
   identically wherever its preview appears. Both faces stack on the same
   grid cell so the card's height always matches whichever face is taller. */
.tpl-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-pv-flip-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  border: 1px solid var(--line-200); border-radius: 999px; background: var(--pearl);
  color: var(--char-600); font: 600 11px var(--font-ui); cursor: pointer; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tpl-pv-flip-btn:hover,
.tpl-pv-flip-btn[aria-pressed="true"] { border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-100); }
.tpl-pv-flip-btn svg { flex-shrink: 0; }
.tpl-pv-stage { perspective: 1600px; margin-top: 4px; }
.tpl-pv-card { position: relative; display: grid; transition: transform 0.55s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.tpl-pv-card.is-flipped { transform: rotateY(180deg); }
.tpl-pv-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; align-self: start; }
.tpl-pv-face-back { transform: rotateY(180deg); }
.tpl-pv-stage-single .tpl-pv-face-back { display: none; }
.tpl-pv-counterpart-link { display: block; margin-top: 8px; font-size: 11.5px; color: var(--gold-700); text-decoration: none; }
.tpl-pv-counterpart-link:hover { text-decoration: underline; }