/* User panel. Layered on app.css — shared tokens, buttons, pills and tables
   come from there; everything here is panel chrome and panel-only components. */

.panel-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  max-width: 1180px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--border);
}
.panel-header { max-width: none; }
.panel-header > * { max-width: 100%; }

.panel-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex: none;
}
.panel-brand img { width: 30px; height: 30px; display: block; }
.panel-brand span {
  font-family: var(--display);
  font-size: 21px; line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

.panel-header-right { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ---- the card control ---- */
/* One button carrying which card this is, how long it has left, and — behind
   it — everything the gear and the profile menu used to hold separately. */
.cardbar { position: relative; }
.cardbar-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  cursor: pointer; font-family: inherit;
  max-width: min(320px, 52vw);
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.cardbar-btn:hover { border-color: var(--accent); }
.cardbar.open .cardbar-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* The card's own colour, or its cover if one has been uploaded — so the
   button shows which card you are in rather than only naming it. */
.cardbar-thumb {
  width: 34px; height: 34px; flex: none;
  border-radius: 8px;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(26, 17, 20, .08);
}
.cardbar-thumb-user { background: var(--accent); }
.cardbar-initial {
  font-family: var(--display); font-size: 16px; line-height: 1;
  color: var(--on-brand);
}
.cardbar-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0; text-align: left;
}
.cardbar-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cardbar-days {
  font-size: 11.5px; color: var(--ink-faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cardbar-caret { font-size: 10px; color: var(--ink-faint); flex: none; }

/* ---- the drawer ---- */
.cardbar-drawer {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  z-index: 50;
  overflow: hidden;
}
.cardbar-drawer[hidden] { display: none; }

.cbd-card { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.cbd-cover {
  width: 54px; height: 68px; flex: none;
  border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(26, 17, 20, .1);
}
.cbd-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cbd-card-text strong { font-size: 15px; }
.cbd-slug { font-size: 12.5px; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd-slug:hover { text-decoration: underline; }
.cbd-days { font-size: 12px; color: var(--ink-faint); }
.cbd-days.is-over { color: var(--danger); }

.cbd-actions { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.cbd-actions .btn { flex: 1; text-align: center; }

.cbd-section { padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.cbd-section:last-child { border-bottom: none; }
.cbd-label {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin: 4px 10px 2px;
}
.cbd-email { font-size: 12.5px; color: var(--ink-soft); margin: 0 10px 6px; overflow: hidden; text-overflow: ellipsis; }
.cbd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; text-align: left;
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius-sm);
}
.cbd-item:hover { background: var(--bg); color: var(--ink); }
.cbd-item.current { color: var(--accent-dark); font-weight: 500; }
.cbd-check { color: var(--accent); }
.cbd-signout { color: var(--danger); }

/* Sticks to the top once the page moves, so switching screens never means
   scrolling back up first. */
.panel-tabs-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--settle) var(--ease);
}
.panel-tabs-bar.stuck { box-shadow: var(--lift-1); }

.panel-tabs {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none;
}
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs a {
  padding: 11px 16px; font-size: 14.5px; color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.panel-tabs a:hover { color: var(--ink); }
.panel-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.panel-main { max-width: 900px; margin: 0 auto; padding: 26px 24px 90px; }
.panel-main-wide { max-width: 1180px; }
.panel-head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px;
}
.panel-head-row h1 { margin: 0; }

.flash { background: var(--accent-wash); color: var(--accent-dark); padding: 11px 16px; border-radius: 8px; margin-bottom: 18px; }
.flash-error { background: var(--danger-wash); color: var(--danger); }

.panel-narrow { max-width: 520px; }
.panel-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.panel-toolbar h2 { margin: 0; }
.toolbar-actions { display: flex; gap: 8px; }

/* ---- overview ---- */
.stat-summary { font-size: 17px; margin: 0 0 16px; }
.stat-summary strong { color: var(--accent-dark); }
/* One row, however many events there are. auto-fit wrapped as soon as six
   tiles could not fit at 140px each; these scroll sideways instead, which keeps
   the row readable as a single set of figures. */

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel-grid .panel:last-child { grid-column: 1 / -1; }



.quick-links { list-style: none; margin: 8px 0 0; padding: 0; }
.quick-links li { padding: 6px 0; }
.quick-links a { font-size: 15px; text-decoration: none; }
.quick-links a:hover { text-decoration: underline; }

/* ---- guests ---- */
.side-tabs { display: flex; gap: 6px; margin: 16px 0 4px; flex-wrap: wrap; }
.side-tabs a {
  padding: 7px 16px; border-radius: 20px; border: 1px solid var(--border);
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
}
.side-tabs a:hover { border-color: var(--accent); color: var(--accent-dark); }
.side-tabs a.active { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--surface); }

.search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 4px; }
.search-input { flex: 1; min-width: 180px; margin-top: 0; }
.filter-select { margin-top: 0; width: auto; }
.clear-link { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.count-hint { margin: 6px 0 10px; }

.td-name { font-weight: 600; }
.share-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-xs { padding: 4px 10px; font-size: 12.5px; border-radius: 16px; }
.btn-wa { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.btn-wa:hover { background: var(--ok); border-color: var(--ok); color: var(--surface); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.page-btn { font-size: 14px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; text-decoration: none; }
.page-btn.disabled { pointer-events: none; opacity: .35; }
.page-info { font-size: 13px; color: var(--ink-soft); }

/* floating calculator */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 25;
  background: var(--accent); color: var(--surface); border: none; border-radius: 30px;
  padding: 13px 22px; font: inherit; font-size: 15px; cursor: pointer;
  box-shadow: 0 10px 26px rgba(14, 107, 92, .4);
}
.fab:hover { background: var(--accent-dark); }

.budget-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 14px 0 0; }
.budget-form label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.budget-form input { width: 120px; }
.budget-results { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.budget-line { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 15px; }
.budget-label { color: var(--ink-soft); }
.budget-value { font-family: 'Instrument Serif', Georgia, serif; color: var(--accent-dark); }
.budget-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; font-size: 17px; }
.budget-total .budget-value { color: var(--gold, var(--warn)); font-weight: 600; }

.link-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-label { width: 120px; flex-shrink: 0; font-size: 14px; }
.link-row code {
  flex: 1; min-width: 160px; background: var(--bg); padding: 6px 10px;
  border-radius: 6px; font-size: 12.5px; word-break: break-all;
}

/* ---- details + preview ---- */
.details-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.detail-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 20px; }
.detail-tab {
  padding: 9px 15px; font-size: 14px; color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.detail-tab:hover { color: var(--ink); }
.detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.settings-form { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.settings-form .btn { align-self: flex-start; }
.repeater { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.repeater-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.repeater-row input[type=text] { flex: 1; min-width: 130px; margin-top: 0; }
.prominent-toggle { color: var(--accent-dark); white-space: nowrap; }

/* Editor on the left, preview pinned on the right. The class was used in the
   markup and never defined, so the preview stacked underneath and every change
   meant scrolling down to check it. */
.panel-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 20px;
  align-items: start;
}

/* A split screen needs more room than a single column, or the editor ends up
   narrower than the preview beside it. */
.panel-main-wide { max-width: 1360px; }

.preview-col {
  position: sticky;
  top: 14px;
  padding: 16px;
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.preview-head h3 { margin: 0; font-size: 16px; }
.preview-phone {
  display: flex; justify-content: center;
  margin-top: 12px;
  flex: 1; min-height: 0;
}
/* A phone, not a tablet: this is how every guest will open the card, so it is
   what the editor should show. Held to a real handset ratio rather than
   stretching to whatever height the column happens to be. */
.preview-phone iframe {
  width: 100%; max-width: 300px;
  aspect-ratio: 9 / 19.5;
  height: auto; max-height: 100%;
  border: 9px solid var(--ink);
  border-radius: 34px;
  background: var(--surface);
  box-shadow: var(--lift-2);
}
.preview-tools { display: flex; align-items: center; gap: 6px; }

/* Marks the section the editor is currently on, so the eye lands in the right
   place when the preview scrolls itself. */
.preview-phone.is-seeking iframe { box-shadow: 0 0 0 3px var(--accent-wash); }

/* ---- faqs ---- */
.faq-admin-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.faq-admin-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.faq-admin-item { flex: 1; }
.faq-admin-item label { margin-bottom: 8px; }
.faq-admin-actions { margin-top: 10px; }
.faq-delete-form { flex-shrink: 0; padding-top: 22px; }
.faq-add-form { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin-top: 12px; }
.faq-add-form .btn { align-self: flex-start; margin-top: 10px; }

/* ---- drawer ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16, 26, 22, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: var(--surface); box-shadow: -10px 0 34px rgba(16, 26, 22, .16);
  transform: translateX(100%); transition: transform .24s ease; z-index: 41;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { margin: 0; }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.drawer-body .btn { width: 100%; }
.drawer-delete { margin-top: 10px; }
.drawer-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer-link code {
  flex: 1; min-width: 150px; background: var(--bg); padding: 6px 9px;
  border-radius: 6px; font-size: 12px; word-break: break-all;
}
.modal-close { border: none; background: none; font-size: 25px; line-height: 1; color: var(--ink-soft); cursor: pointer; }

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(.97);
  width: 560px; max-width: 92vw; background: var(--surface); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 26, 22, .25); padding: 22px 26px 26px;
  z-index: 41; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-height: 86vh; overflow-y: auto;
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modal-head h3 { margin: 0; }

.invite-groups { display: flex; flex-direction: column; gap: 10px; }
.invite-group { display: flex; align-items: center; gap: 10px; background: var(--bg); padding: 9px 12px; border-radius: 8px; flex-wrap: wrap; }
.invite-group .count { width: 78px; margin-top: 0; }

@media (max-width: 900px) {
  .details-layout { grid-template-columns: 1fr; }
  .preview-col { position: static; max-height: none; }
  .panel-split { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
}

/* ---- colour picker ---- */
.colour-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
.colour-field label { font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.colour-field .hint { margin-bottom: 8px; }
.colour-input { display: flex; align-items: center; gap: 10px; }
.colour-input input[type=color] {
  width: 54px; height: 40px; padding: 3px; margin: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.colour-hex {
  width: 108px; margin: 0 !important; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px; text-transform: lowercase;
}

.swatch-row { margin-top: 22px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.swatch {
  display: flex; width: 62px; height: 34px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: none;
}
.swatch span { flex: 1; display: block; }
.swatch:hover { border-color: var(--accent); }
.swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }

.colour-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.colour-actions .btn { align-self: auto; }

@media (max-width: 640px) {
  .colour-row { grid-template-columns: 1fr; }
}

/* ---- header: gear + profile dropdown ---- */
/* The gear and the profile dropdown were replaced by .cardbar above. */

/* ---- settings screen ---- */
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.settings-nav-title {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 8px 12px;
}
.settings-nav a {
  padding: 9px 12px; border-radius: 8px; font-size: 14.5px;
  color: var(--ink-soft); text-decoration: none;
}
.settings-nav a:hover { background: var(--surface); color: var(--ink); }
.settings-nav a.active { background: var(--accent-wash); color: var(--accent-dark); font-weight: 500; }
.settings-nav-sep { height: 1px; background: var(--border); margin: 10px 12px; }

.plan-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px;
  background: var(--accent-wash); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.plan-status.is-expired { background: var(--danger-wash); }
.plan-label { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.plan-value { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 20px; color: var(--accent-dark); margin-top: 2px; }
.plan-status.is-expired .plan-value { color: var(--danger); }

.renew-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-top: 6px; }
.renew-box h3 { margin: 0 0 4px; font-size: 16.5px; }
.renew-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.total-paid { margin-top: 12px; }

.request-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.request-list li { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.request-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.request-msg { margin: 0; font-size: 14.5px; color: var(--ink-soft); white-space: pre-wrap; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.contact-card {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.contact-card:hover { border-color: var(--accent); color: inherit; }
.contact-card strong { display: block; }
.contact-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-dark); font-size: 17px;
}
.contact-icon.wa { background: var(--ok-wash); color: var(--ok); }

/* ---- floating support button ---- */
.support-fab { position: fixed; left: 24px; bottom: 24px; z-index: 30; }
.support-fab-btn {
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-dark); color: var(--surface); font-size: 20px; font-family: inherit;
  box-shadow: var(--lift-2);
}
.support-fab-btn:hover { background: var(--accent); }
.support-fab-menu {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 244px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--lift-3); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.support-fab.open .support-fab-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.support-fab-title {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin: 6px 10px 6px;
}
.support-fab-item {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 10px;
  border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14.5px;
}
.support-fab-item:hover { background: var(--bg); color: var(--ink); }

@media (max-width: 800px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-nav-title { width: 100%; }
  .settings-nav-sep { display: none; }
  .profile-name { display: none; }
}

/* ---- custom domain ---- */
.domain-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
  background: var(--accent-wash); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.domain-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---- photos tab ---- */
.photo-upload {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px;
}
.photo-upload h3 { margin: 0 0 4px; font-size: 16px; }
.upload-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.upload-form input[type=file] { flex: 1; min-width: 200px; margin: 0; font-size: 14px; }
.photo-empty { padding: 20px 0; }

.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.slot-field { display: flex; flex-direction: column; }
.slot-label { font-size: 14px; color: var(--ink); font-weight: 500; }
.slot-field select { margin-top: 6px; }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; margin: 6px 0 4px;
}
.photo-item { display: flex; flex-direction: column; gap: 7px; }
.photo-thumb {
  aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item input { margin-top: 0; font-size: 13.5px; padding: 7px 10px; }
.photo-used { margin: 0; font-size: 12px; color: var(--accent-dark); }

.photo-remove-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.photo-remove-row form { margin: 0; }
.photo-remove {
  position: relative; width: 62px; height: 62px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: none;
}
.photo-remove img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(163,58,48,.72); color: var(--surface); font-size: 22px; opacity: 0; transition: opacity .15s;
}
.photo-remove:hover span { opacity: 1; }

@media (max-width: 640px) {
  .slot-grid { grid-template-columns: 1fr; }
}
.upload-status { margin: 10px 0 0; font-size: 13.5px; color: var(--accent-dark); }

/* ------------------------------------------------------------- sections */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sec-count {
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  background: var(--cream-deep); padding: 5px 11px; border-radius: 100px;
}

.preset-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--cream-deep); border-radius: 9px; padding: 12px 15px; margin: 16px 0 4px;
}
.preset-bar label { font-size: 13.5px; font-weight: 600; }
.preset-bar select { padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); font-size: 14px; }
.preset-bar .hint { margin: 0; font-size: 12.5px; flex: 1 1 240px; }

.sec-list { margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }

.sec-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sec-tile.is-off .sec-name,
.sec-tile.is-off .sec-hint { opacity: .55; }
.sec-tile.is-dragging { opacity: .4; border-style: dashed; }
.sec-tile[draggable="true"] .sec-grip { cursor: grab; }

.sec-tile-head {
  display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center;
  gap: 10px; padding: 11px 14px;
}
.sec-grip { color: var(--ink-faint); font-size: 13px; line-height: 1; user-select: none; }

/* The whole name block is the expand control, so the target is large. */
.sec-open {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: none; border: none; padding: 0; margin: 0; text-align: left;
  cursor: pointer; min-width: 0; font: inherit; color: inherit;
}
.sec-open:disabled { cursor: default; }
.sec-open:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 4px; }
.sec-name { font-weight: 600; font-size: 15px; }
.sec-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

.sec-chev { color: var(--ink-faint); font-size: 12px; transition: transform .15s; }
.sec-tile.is-open .sec-chev { transform: rotate(180deg); }

.sec-lock { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

.sec-tile-body { display: none; padding: 4px 16px 18px; border-top: 1px solid var(--line-soft); }
.sec-tile.is-open .sec-tile-body { display: block; }
.sec-tile-body .field-grid { margin-top: 14px; }

/* A button, so the switch works without JavaScript. */
.sec-switch {
  width: 38px; height: 21px; border-radius: 100px; border: none; padding: 0;
  background: var(--line); position: relative; cursor: pointer; flex: none;
  transition: background .15s;
}
.sec-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--surface); transition: left .15s;
}
.sec-switch.on { background: var(--maroon); }
.sec-switch.on::after { left: 19px; }
.sec-switch:disabled { cursor: not-allowed; opacity: .5; }
.sec-switch:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.alert-quiet {
  background: var(--cream-deep); border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 8px; padding: 10px 13px; font-size: 13.5px; margin-top: 14px;
}

.ev-list { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.ev-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; background: var(--surface);
}
.ev-top { display: flex; align-items: center; gap: 12px; }
.ev-name {
  flex: 1; font-size: 15.5px; font-weight: 600; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 7px; background: var(--cream-deep);
}
.ev-name:focus { border-color: var(--maroon); outline: none; background: var(--surface); }
.btn-danger { background: var(--danger-deep); color: var(--surface); border: none; }
.btn-danger:hover { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .sec-switch, .sec-switch::after, .sec-chev { transition: none; }
}

/* ==========================================================================
   Entries
   Every list in the panel — cards, recent guests, photos, quick links — sits
   in the same box so the app reads as one thing. Rows divided only by a
   hairline gave no sense of where one entry ended and the next began.
   ========================================================================== */

.entry,
.card-list .site-row,
.recent-list li,
.quick-links li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Lists become a stack of boxes rather than a bordered column. */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.recent-list,
.quick-links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recent-list li,
.quick-links li { border-bottom: 1px solid var(--border); }

/* Only the ones that go somewhere respond to a pointer. */
.card-list .site-row,
.quick-links li:hover,
.entry-link:hover {
  cursor: pointer;
}
.card-list .site-row:hover,
.quick-links li:hover,
.entry-link:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 28px -22px rgba(29, 20, 23, .55);
  transform: translateY(-2px);
}
.card-list .site-row:focus-visible,
.entry-link:focus-visible { border-color: var(--accent); }

/* ---- a card in the list ---- */
.card-list .site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.card-list .site-row h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; }
.card-list .site-row .muted { margin: 0; }

/* ---- recent guests, quick links ---- */
.quick-links li { padding: 0; }
.quick-links a {
  display: block; padding: 13px 16px;
  font-size: 15px; text-decoration: none; color: var(--ink);
}
.quick-links a:hover { text-decoration: none; color: var(--accent); }

/* ---- the guest table ---- */
/* Kept a table on purpose: at two hundred guests, boxes are unscannable and
   unsortable. It gets the same frame as everything else instead. */
.table-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.table-frame table { margin: 0; border-radius: 0; }
.table-frame thead th { background: var(--bg); }
.table-frame tbody tr { transition: background .12s ease; }
.table-frame tbody tr:hover { background: var(--accent-wash); }

/* ---- an empty list ---- */
.empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 34px 24px;
  text-align: center;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .entry, .card-list .site-row, .recent-list li, .quick-links li { transition: none; }
  .card-list .site-row:hover, .quick-links li:hover, .entry-link:hover { transform: none; }
}

/* ---- reordering ---- */
.sec-grip { cursor: grab; touch-action: none; user-select: none; }
.sec-grip:active { cursor: grabbing; }

.sec-tile.is-dragging {
  position: fixed;
  z-index: 60;
  margin: 0;
  box-shadow: 0 22px 44px -20px rgba(29, 20, 23, .5);
  border-color: var(--accent);
  pointer-events: none;
  opacity: .96;
}
/* Holds the gap the moving tile left, so nothing jumps as it travels. */
.sec-placeholder {
  border: 1.5px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-wash);
  opacity: .5;
}



/* ==========================================================================
   The header on a narrow screen
   ========================================================================== */
@media (max-width: 620px) {
  .panel-header { padding: 9px 12px; gap: 10px; }
  /* The mark alone. The wordmark and a card's name cannot share 375px, and
     between the two it is the card's name that tells you where you are. */
  .panel-brand span { display: none; }
  .panel-brand img { width: 28px; height: 28px; }

  .cardbar-btn { max-width: calc(100vw - 76px); padding: 5px 10px 5px 5px; }
  .cardbar-thumb { width: 30px; height: 30px; }
  .cardbar-name { font-size: 13.5px; }
  .cardbar-days { font-size: 11px; }

  /* Pinned to the screen rather than hung off the button: the button sits at
     the very edge, and a drawer anchored to its right edge hangs off the side
     of the phone. */
  .cardbar-drawer {
    position: fixed;
    top: 56px; left: 10px; right: 10px;
    width: auto; max-width: none;
  }
  .cbd-actions { flex-direction: column; }
}


/* ---- one event, folded ---- */
/* Five events open at once is a screen of forty fields with the one you came
   to change somewhere in the middle. Each folds, and its closed state carries
   the date and venue so the list is readable without opening anything. */
.ev-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.ev-fold + .ev-fold { margin-top: 8px; }

.ev-fold-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chev" "meta chev";
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  padding: 12px 14px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.ev-fold-head:hover { background: var(--surface-sunk); }
.ev-fold-name { grid-area: name; font-size: 15px; font-weight: 600; color: var(--ink); }
.ev-fold-meta { grid-area: meta; font-size: 12.5px; color: var(--ink-faint); }
.ev-fold-chev {
  grid-area: chev; font-size: 11px; color: var(--ink-faint);
  transition: transform var(--quick) var(--ease);
}
.ev-fold.is-open .ev-fold-chev { transform: rotate(180deg); }

/* The form and its picture live behind the head. */
.ev-fold > .ev-card,
.ev-fold > .media-box { display: none; }
.ev-fold.is-open > .ev-card,
.ev-fold.is-open > .media-box { display: block; }
.ev-fold > .ev-card { border: none; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; }
.ev-fold > .media-box { border: none; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) { .ev-fold-chev { transition: none; } }

/* What kind of section this is, beside what it is headed. Quiet: the heading
   is what matches the card, and this is only here so a customer can tell the
   Hero from the Welcome when both are headed in their own words. */
.sec-kind {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 8px;
  font-weight: 400;
  white-space: nowrap;
}

/* ---- see this section, full ---- */
.sec-eg {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--pill); padding: 4px 11px;
  font-family: inherit; font-size: 12px; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap; flex: none;
  /* Shown on the tile you are pointing at. Eighteen of these at once would be
     eighteen invitations to look at something other than your own card. */
  opacity: 0;
  transition: opacity var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.sec-tile:hover .sec-eg,
.sec-tile.is-open .sec-eg,
.sec-eg:focus-visible { opacity: 1; }
@media (hover: none) { .sec-eg { opacity: 1; } }
.sec-eg:hover { border-color: var(--accent); color: var(--accent-dark); }

.eg-back { position: fixed; inset: 0; background: rgba(26, 17, 20, .45); z-index: 60; }
.eg-back[hidden], .eg[hidden] { display: none !important; }
.eg {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px));
  height: min(86vh, 860px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.eg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.eg-head h3 { font-family: var(--display); font-size: 20px; margin: 0 0 3px; }
.eg-head .hint { margin: 0; }
.eg-frame { flex: 1 1 auto; min-height: 0; background: var(--surface-sunk); }
.eg-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 620px) {
  .eg { width: calc(100vw - 16px); height: 92vh; }
  .sec-eg { font-size: 11.5px; padding: 4px 9px; }
}

/* ==========================================================================
   Offers
   Shown only where the thing being offered is actually felt: the guest limit
   when the list is near full, the setup service when nobody bought it. Quiet
   enough to ignore, close enough to the problem to be an answer to it.
   ========================================================================== */
.offer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* When the list is nearly full it stops being a suggestion. */
.offer.is-pressing { border-color: var(--warn); background: var(--warn-wash); }

.offer-body { min-width: 0; flex: 1 1 320px; }
.offer-title { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.offer-text { margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 62ch; line-height: 1.5; }
.offer-text strong { color: var(--accent-dark); }
.offer-action { flex: none; }

@media (max-width: 620px) {
  .offer { padding: 13px 14px; }
  .offer-action, .offer-action .btn { width: 100%; }
}

/* ==========================================================================
   Choosing the events
   Opened from the countdown, because that is where a wrong list of events
   shows itself. One screen: every tradition, a search, and a date against
   each as you pick it.
   ========================================================================== */
.ep-back { position: fixed; inset: 0; background: rgba(26, 17, 20, .45); z-index: 60; }
.ep-back[hidden], .ep[hidden] { display: none !important; }
body.ep-locked { overflow: hidden; }

.ep {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 24px));
  max-height: min(86vh, 780px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.ep form { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }

.ep-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 14px;
}
.ep-head h3 { font-family: var(--display); font-size: 23px; margin: 0 0 4px; }
.ep-head .hint { margin: 0; max-width: 52ch; }

.ep-controls {
  padding: 0 22px 12px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.ep-search { position: relative; display: block; }
.ep-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 14px; pointer-events: none;
}
.ep-search input {
  width: 100%; padding-left: 32px;
}

/* One scrolling row rather than a wrapped block: eleven traditions would take
   three lines and push the list itself off the screen. */
.ep-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ep-tabs::-webkit-scrollbar { display: none; }
.ep-tab {
  flex: none;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--pill); padding: 6px 13px;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
.ep-tab:hover { border-color: var(--accent); color: var(--accent-dark); }
.ep-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-brand); font-weight: 500; }

.ep-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 10px 22px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ep-item[hidden] { display: none !important; }

.ep-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 150px;
  align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.ep-item:hover { background: var(--surface-sunk); }
.ep-item.is-on { background: var(--accent-wash); border-color: var(--maroon-line); }
.ep-item input[type=checkbox] { width: 17px; height: 17px; margin: 0; }
.ep-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ep-item-name { font-size: 15px; font-weight: 500; }
.ep-item-hint { font-size: 12.5px; color: var(--ink-faint); }
.ep-item-date input {
  width: 100%; padding: 6px 9px; font-size: 13px;
  /* Not an input until it is wanted, so fifty of them do not read as fifty
     things left to fill in. */
  border-color: transparent; background: transparent; color: var(--ink-faint);
}
.ep-item.is-on .ep-item-date input {
  border-color: var(--border); background: var(--surface); color: var(--ink);
}
.ep-item-date input:focus { border-color: var(--accent); background: var(--surface); }

.ep-empty { padding: 22px 12px; color: var(--ink-faint); font-size: 14px; text-align: center; }

.ep-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.ep-foot .hint { margin: 0; }
.ep-foot-actions { display: flex; align-items: center; gap: 16px; flex: none; }

@media (max-width: 620px) {
  .ep { width: calc(100vw - 16px); max-height: 92vh; }
  .ep-head { padding: 16px 16px 12px; }
  .ep-head h3 { font-size: 20px; }
  .ep-controls { padding: 0 16px 10px; }
  .ep-list { padding: 8px 12px 14px; }
  /* The date drops under the name: a 150px column and a readable name cannot
     both fit across a phone. */
  .ep-item {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-areas: "check body" ".     date";
    row-gap: 8px;
  }
  .ep-item input[type=checkbox] { grid-area: check; }
  .ep-item-body { grid-area: body; }
  .ep-item-date { grid-area: date; }
  .ep-item-date input { font-size: 16px; }
  /* A date field on its own row for every one of fifty events is fifty rows
     of nothing to fill in. It appears when the event is chosen. */
  .ep-item:not(.is-on) .ep-item-date { display: none; }
  .ep-item:not(.is-on) { row-gap: 0; }
  .ep-foot { padding: 12px 16px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .ep-foot-actions { justify-content: space-between; }
}

/* ==========================================================================
   Still our words
   A card arrives written, so it can be shared written. This is the one place
   that is said — amber rather than red, because keeping our wording is a
   perfectly reasonable choice and this is not an error.
   ========================================================================== */
.ex-check {
  border: 1px solid var(--warn);
  background: var(--warn-wash);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.ex-check > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px;
  cursor: pointer; list-style: none;
  font-size: 14.5px; color: var(--ink);
}
.ex-check > summary::-webkit-details-marker { display: none; }
.ex-check > summary strong { color: var(--warn); font-variant-numeric: tabular-nums; }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.ex-more {
  margin-left: auto; flex: none;
  font-size: 13px; color: var(--warn); text-decoration: underline;
}
.ex-check[open] .ex-more::after { content: " \2014 hide"; text-decoration: none; }

.ex-list { padding: 0 15px 14px; }
.ex-list .hint { margin: 0 0 10px; }
.ex-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ex-list li { background: var(--surface); border-radius: var(--radius-sm); }
.ex-list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px; text-decoration: none; color: var(--ink);
  border-radius: var(--radius-sm);
}
.ex-list a:hover { background: var(--accent-wash); }
.ex-label { font-size: 13.5px; flex: none; }
.ex-value {
  font-size: 12.5px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  margin-left: auto; text-align: right;
}

@media (max-width: 860px) {
  .ex-check > summary { flex-wrap: wrap; font-size: 14px; }
  .ex-more { margin-left: 18px; }
  .ex-list a { flex-direction: column; gap: 2px; }
  .ex-value { margin-left: 0; text-align: left; max-width: 100%; }
}

/* ==========================================================================
   Groups and pictures inside a section
   A section may be several boxes, each saving on its own — two families, say
   — and each box may carry the picture that belongs to it. Everything about
   a part of the card is set in one place.
   ========================================================================== */

.sec-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  padding: 16px;
  margin-top: 14px;
}
.sec-group-head { margin-bottom: 12px; }
.sec-group-head h4 {
  font-family: var(--display);
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}
.sec-group-head .hint { margin: 2px 0 0; }
.sec-group .settings-form { margin-top: 12px; }

/* ---- the picture control ---- */
.media-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  margin-top: 12px;
}
.sec-group .media-box { background: var(--surface); }
.media-head h5 {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
  color: var(--ink);
}
.media-head .hint { margin: 2px 0 0; }

.media-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
}

/* What the card is showing for this slot right now. Sized to the shape the
   artwork is drawn in, so a drawing and a photograph swap without the box
   changing height. */
.media-preview {
  flex: none;
  width: 74px; height: 116px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface-sunk);
  display: grid; place-items: center;
  overflow: hidden;
}
.media-preview svg,
.media-preview .media-art { width: 54px; height: 96px; }
.media-preview img.media-art { object-fit: contain; }
.media-preview.is-photo { padding: 0; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty {
  font-size: 11px; line-height: 1.35; text-align: center;
  color: var(--ink-faint); padding: 0 8px;
}

.media-actions { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.media-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The file input itself is unusable as drawn by the browser and different in
   every one of them. The label is the control; the input sits inside it. */
.media-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--pill);
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 100%;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.media-file:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-dark); }
.media-file input[type=file] {
  font-size: 12px;
  max-width: 150px;
  border: none; padding: 0; background: none;
}

/* ---- the drawings ---- */
.art-picker { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.art-picker .hint { margin: 0 0 8px; }
/* A photograph wins while one is set, so the row says so rather than
   pretending a choice here changes what is on the card today. */
.art-picker.is-behind-photo .art-row { opacity: .62; }

.art-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.art-swatch {
  flex: none;
  width: 68px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--body);
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.art-swatch svg,
.art-swatch img { width: 34px; height: 60px; }
/* A painting is a picture in a box the drawings fill exactly; contain keeps
   its proportions rather than stretching a bride into a square. */
.art-swatch img { object-fit: contain; }
.art-swatch span {
  font-size: 10px; line-height: 1.2; text-align: center;
  color: var(--ink-faint);
}
.art-swatch:hover { border-color: var(--accent); transform: translateY(-1px); }
.art-swatch.is-on { border-color: var(--accent); background: var(--accent-wash); }
.art-swatch.is-on span { color: var(--accent-dark); font-weight: 500; }

/* ---- the gallery's own photographs ---- */
.gallery-edit { margin-top: 14px; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.gthumb { position: relative; }
.gthumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  display: block;
}
.gthumb input { margin-top: 6px; font-size: 12.5px; padding: 7px 9px; }
.gthumb-remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(26, 17, 20, .62);
  color: #fff; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.gthumb-remove:hover { background: var(--danger); }

/* ==========================================================================
   Mobile
   Most people will open this on a phone, so the panel is treated as a phone
   layout that widens, not a desktop layout that shrinks.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---- chrome ---- */
  .panel-main { padding: 16px 16px 96px; }

  /* The tab bar scrolls sideways; a fade at the edge says so, rather than
     leaving a word sliced in half with no explanation. */
  .panel-tabs-bar { position: sticky; top: 0; }
  .panel-tabs {
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .panel-tabs a { padding: 13px 14px; scroll-snap-align: start; }

  /* ---- the editor and its preview ---- */
  /* Side by side does not fit. The preview becomes a drawer opened from a
     button, so the editor keeps the whole screen while writing. */
  /* minmax(0, 1fr), not 1fr: a grid track sizes to its widest content unless
     it is told it may shrink, so the row of drawings — which scrolls sideways
     on its own — was widening the whole column and scrolling the page with
     it. Same reason the children need min-width: 0. */
  .panel-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .panel-split > * { min-width: 0; }
  .sec-tile, .sec-tile-body, .sec-group, .media-box { min-width: 0; }

  .preview-col {
    position: fixed;
    /* top has to be unset explicitly: the desktop rule sticks this column to
       14px, and top + bottom + height is over-constrained — top wins, and the
       drawer hangs from the top of the screen instead of the bottom. */
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    /* A fixed height, so the closed position is predictable: translating by
       100% of an auto-height element left most of the phone on screen. */
    height: 78vh;
    margin: 0;
    padding: 10px 14px 14px;
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -18px 40px -24px rgba(26, 17, 20, .5);
    transform: translateY(calc(78vh - 58px));
    transition: transform var(--settle) var(--ease);
    overflow: hidden;
  }
  .preview-col.open { transform: translateY(0); }

  /* The handle stays visible while the rest is tucked away. */
  .preview-head {
    margin: 0; padding: 4px 2px 12px;
    cursor: pointer;
    min-height: 44px;
  }
  .preview-head h3::after { content: " ▲"; font-size: 11px; color: var(--ink-faint); }
  .preview-col.open .preview-head h3::after { content: " ▼"; }
  .preview-col .hint { display: none; }
  .preview-col.open .hint { display: block; }

  /* ---- section tiles ---- */
  .sec-tile-head { grid-template-columns: 22px 1fr auto; gap: 10px; padding: 12px; }
  /* The chevron doubles up with the toggle on a narrow row; the tile still
     opens by tapping its name. */
  .sec-chev { display: none; }
  .sec-name { font-size: 15.5px; }
  .sec-hint { font-size: 12px; }
  .sec-tile-body { padding: 2px 12px 16px; }
  /* A comfortable target, and big enough not to be hit by accident. */
  .sec-switch { width: 46px; height: 27px; }
  .sec-switch::after { width: 21px; height: 21px; }
  .sec-switch.on::after { left: 22px; }
  .sec-grip { padding: 6px 2px; font-size: 15px; }

  /* ---- pictures ---- */
  .sec-group { padding: 12px; }
  .media-box { padding: 12px; }

  /* Stacked, not side by side. The preview and the upload control cannot both
     have a usable width in 375px: the label ran out of room and printed
     itself across the picture beside it. The preview becomes a strip and
     everything else gets the full width underneath. */
  .media-body { flex-direction: column; align-items: stretch; gap: 10px; }
  .media-preview { width: 100%; height: 132px; }
  .media-preview svg,
  .media-preview .media-art { width: 46px; height: 82px; }
  .media-preview img { object-position: center; }

  .media-upload { width: 100%; flex-direction: column; align-items: stretch; }
  .media-file { justify-content: flex-start; min-width: 0; }
  .media-file > span { flex: none; }
  .media-file input[type=file] { min-width: 0; flex: 1; }
  .media-upload .btn { width: 100%; }

  .art-swatch { width: 62px; }
  .gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  /* ---- forms ---- */
  .field-grid { grid-template-columns: 1fr; gap: 12px; }
  .field-grid .half { grid-column: auto; }
  /* 16px keeps iOS from zooming the page when a field is focused. */
  input[type=text], input[type=email], input[type=password], input[type=url],
  input[type=number], input[type=date], select, textarea { font-size: 16px; padding: 12px 14px; }
  .repeater-row { grid-template-columns: 1fr; gap: 8px; }
  .settings-form .btn, .ev-card .btn { width: 100%; }

  /* ---- lists ---- */
  /* Stays a row: the state belongs beside the name, not stacked under it. */
  .card-list .site-row { align-items: center; gap: 12px; padding: 14px; }
  .card-list .site-row > div:first-child { min-width: 0; }
  .card-list .site-row h3 { font-size: 16.5px; }
  .stat-grid .stat-card { min-width: 104px; padding: 14px 10px; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 10px; }

  /* ---- guests ---- */
  /* The table becomes one box per guest. A six-column table on a 375px screen
     is either unreadable or scrolled sideways, and sideways scrolling hides
     the columns that say who is invited to what — the whole point of the
     screen. Same markup: each cell carries its own heading in data-label. */
  /* Both the min-width and the sideways scroll come from app.css; neither has
     any meaning once the rows are boxes. */
  .table-wrap { overflow-x: visible; border: none; background: none; }
  .table-frame { overflow-x: visible; border: none; background: none; border-radius: 0; }
  .data-table { min-width: 0; width: 100%; }
  .data-table td.tight { width: auto; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: auto; }
  .data-table thead { display: none; }

  .data-table tr.guest-row {
    position: relative;
    padding: 14px 14px 14px 44px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .data-table td {
    border: none;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    flex: none;
  }
  .data-table td.td-name {
    display: block;
    font-size: 16.5px;
    font-weight: 600;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  /* The tick sits in the gutter the row leaves for it, so it reads as
     selecting the whole box rather than as a first field. */
  .data-table td.tight {
    position: absolute;
    left: 12px; top: 14px;
    padding: 0;
  }
  .data-table td.tight input { width: 18px; height: 18px; }
  .data-table .share-cell { display: flex; gap: 8px; width: 100%; }
  .data-table .share-cell .btn { flex: 1; text-align: center; }
  .data-table td:last-child { padding-top: 10px; }
  .data-table td.empty-cell { padding: 20px 4px; text-align: center; }

  .side-tabs { overflow-x: auto; padding-bottom: 4px; }

  /* ---- settings ---- */
  /* One scrolling row of pills rather than links wrapping into three ragged
     rows, which read as loose text rather than as a control. */
  .settings-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  .settings-nav-title { display: none; }
  .settings-nav-sep { display: none; }
  .settings-nav a {
    flex: none;
    padding: 9px 15px;
    border-radius: var(--pill);
    border: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
  }
  .settings-nav a.active { border-color: transparent; }
  .plan-status { grid-template-columns: 1fr 1fr; padding: 14px 16px; }

  /* Sat on top of the filter row before. */
  .fab { bottom: 16px; right: 16px; font-size: 14px; padding: 11px 16px; }
  /* Room under the last line for the two floating buttons. */
  .app-foot { padding-bottom: 84px; }

  /* ---- preset bar ---- */
  .preset-bar { flex-direction: column; align-items: stretch; }
  .preset-bar .btn { width: 100%; }
  .preset-bar .hint { flex: none; }

  /* ---- the card's title block ---- */
  /* This used to eat 350px before a single word of the screen itself showed.
     The title, the link and the button share one compact block. */

  /* Only the screens carrying the preview drawer need the button lifted; on
     the rest it sits where a floating button normally does. */
  body:has(.preview-col) .support-fab { bottom: 74px; }

  /* ---- dashboard ---- */
  .panel-grid { grid-template-columns: 1fr; gap: 14px; }
  .panel-grid .panel:last-child { grid-column: auto; }
  .panel { padding: 16px; }
  .panel h2 { font-size: 19px; }
  .stat-summary { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }

  /* Two to a row with even spacing, instead of a wide flex gap that left the
     dates stranded in the middle of the box. */
  .countdown-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .cm-date { font-size: 14px; }
  .cm-days { font-size: 17px; }

  .recent-list li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .recent-events { text-align: left; }

  .support-fab { left: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-col { transition: none; }
}

/* The setup offer, and the expert button that is its permanent home --------- */
.offer-setup { position: relative; padding-right: 44px; }
.offer-setup[hidden] { display: none; }
.offer-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-faint);
  display: grid; place-items: center;
}
.offer-x:hover { background: var(--surface-sunk); color: var(--maroon); }


}
@media (prefers-reduced-motion: reduce) {
  .expert-btn.is-nudging { animation: none; }
}

@media (max-width: 620px) {
  /* Anchored to the button, the drawer hangs off the left of the screen:
     the button sits near the middle of the header, and 340px to the left of
     it is past the edge. On a phone it belongs to the viewport instead. */
  .expert-drawer {
    position: fixed;
    top: auto; right: 12px; left: 12px;
    width: auto;
    margin-top: 0;
  }
  .expert.open .expert-drawer { top: 64px; }
}

/* The guest-limit warning ------------------------------------------------- */
.lim-back { position: fixed; inset: 0; z-index: 90; background: rgba(26,17,20,.5); }
.lim-back[hidden] { display: none; }

.lim {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 28px));
  max-height: min(86vh, 86svh); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 40px 90px -40px rgba(26,17,20,.6);
  padding: 26px 24px 20px;
  text-align: center;
}
.lim[hidden] { display: none; }

.lim-eyebrow {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--maroon);
}
.lim h3 { margin: 0 0 8px; font-size: 22px; }
.lim-text { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

.lim-tiers { display: flex; flex-direction: column; gap: 8px; }
.lim-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name btn" "blurb btn";
  align-items: center; gap: 2px 12px;
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .18s ease;
}
.lim-tier:hover { border-color: var(--maroon); }
.lim-tier-name { grid-area: name; font-size: 14.5px; font-weight: 600; }
.lim-tier-blurb { grid-area: blurb; font-size: 12.5px; color: var(--ink-soft); }
.lim-tier .btn { grid-area: btn; white-space: nowrap; }

.lim-later {
  margin-top: 14px; background: none; border: 0; cursor: pointer;
  font-size: 13.5px; color: var(--ink-faint); padding: 4px;
}
.lim-later:hover { color: var(--maroon); text-decoration: underline; }

/* .pop-x is positioned by whatever contains it; here it needs its own corner. */
.lim .pop-x { position: absolute; top: 10px; right: 12px; }
.nudge-go, .nudge-go .btn { width: 100%; }

/* The card that was bought without private invitations ---------------------- */
.lock-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px; margin-bottom: 16px;
  text-align: center;
}
.lock-panel h3 { margin: 0 0 8px; font-size: 20px; }
.lock-panel .lim-tiers { margin-top: 16px; text-align: left; }

/* Our offers ---------------------------------------------------------------
   Everything this card could have and does not. The old drawer held a single
   offer laid out as a full-width banner, which left a tall empty column
   between the words and the button — the offer body was stretching to fill a
   flex row that had nothing else in it. Each offer is its own row now.
   -------------------------------------------------------------------------- */
.offers { position: relative; flex: none; }

.offers-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.offers-btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
}
.offers-btn:hover { border-color: var(--accent); }
.offers-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--on-brand);
  font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}

/* Pulses once when the setup banner is dismissed, so it is obvious where it
   went. Kept under the old class name, which panel.js still toggles. */
.expert-btn.is-nudging, .offers-btn.is-nudging {
  border-color: var(--accent);
  animation: expert-nudge 1.1s ease 2;
}
@keyframes expert-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 26, 38, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(122, 26, 38, .16); }
}

.offers-drawer {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(400px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift-2, 0 24px 60px -30px rgba(26,17,20,.5));
  padding: 8px;
}
.offers-drawer[hidden] { display: none; }

.offers-head {
  margin: 4px 8px 8px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

.offer-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-sm, 10px);
}
.offer-row + .offer-row { border-top: 1px solid var(--line-soft, var(--border)); }
.offer-row:hover { background: var(--surface-sunk); }

.offer-row-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash, var(--surface-sunk));
}
.offer-row-icon .icon { width: 18px; height: 18px; color: var(--accent); }

.offer-row-title { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.offer-row-text { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.offer-row-go { flex: none; }
.offer-row-go .btn { white-space: nowrap; }

@media (max-width: 620px) {
  /* The word costs more room than it earns next to the card button. */
  .offers-label { display: none; }
  .offers-btn { padding: 7px 9px; }
  .offers-drawer {
    position: fixed; top: 64px; right: 12px; left: 12px; width: auto;
  }
  .offer-row { grid-template-columns: 30px minmax(0, 1fr); }
  .offer-row-go { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* The setup brief ---------------------------------------------------------- */
.brief { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.brief-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.brief-step h3 { margin: 0 0 14px; font-size: 16px; }
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.brief-grid > label, .brief-step > label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.brief-span { grid-column: 1 / -1; }
.brief-step textarea { resize: vertical; }
.brief-foot { display: flex; gap: 10px; justify-content: flex-end; }
.brief-note { text-align: right; margin: 0; }

@media (max-width: 620px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
  .brief-foot { flex-direction: column-reverse; }
  .brief-foot .btn { width: 100%; justify-content: center; }
  .brief-note { text-align: center; }
}

/* Staff working on a customer's card. Deliberately loud. */
.admin-bar {
  background: var(--warn-wash, #f8f0dd);
  border-bottom: 1px solid var(--warn, #8a5a12);
  color: var(--ink);
  font-size: 13.5px; text-align: center; padding: 9px 16px;
}
.admin-bar a { color: var(--maroon); margin-left: 10px; }

/* ==========================================================================
   The dashboard.

   The tiles were one row that grew by one every time an event was added, so a
   card with five functions had its last two tiles sliced off the right edge
   with nothing to say they were there. And the countdown — the one thing this
   page shows that no other screen does — shared its row with a list of
   recently added guests, which the Guests screen already shows in full.
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.stat-icon { width: 18px; height: 18px; color: var(--accent); margin-bottom: 4px; }
.stat-num {
  font-family: var(--display); font-size: 30px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
  /* An event's own name can be long; it wraps rather than widening the tile. */
  overflow-wrap: anywhere;
}
.stat-card.is-total { background: var(--accent-wash, var(--surface-sunk)); border-color: var(--accent); }
.stat-card.is-total .stat-num { color: var(--accent-dark, var(--accent)); }

/* ---- the countdown ---- */
.cd-panel { margin-bottom: 18px; }
.cd-panel .sec-head { align-items: flex-start; }
.cd-panel .sec-head .hint { margin: 2px 0 0; }
.cd-empty { margin: 8px 0 0; }

.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.cd-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.cd-icon { width: 20px; height: 20px; color: var(--accent); margin-bottom: 6px; }

.cd-name {
  margin: 0; font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.cd-date { margin: 0; font-size: 15.5px; color: var(--ink); }
.cd-days {
  margin: 6px 0 0; font-family: var(--display); font-size: 20px; color: var(--accent);
}
.cd-days strong { font-weight: inherit; }

/* Which one is next, marked. On five functions that is the only question. */
.cd-card.is-next { border-color: var(--accent); box-shadow: var(--lift-1, 0 10px 30px -22px rgba(26,17,20,.45)); }
.cd-next {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--on-brand);
  padding: 3px 8px; border-radius: 999px;
}

/* Done, and not worth the same weight as what is still coming. */
.cd-card.is-passed { background: var(--surface-sunk); }
.cd-card.is-passed .cd-icon,
.cd-card.is-passed .cd-days { color: var(--ink-faint); }
.cd-card.is-passed .cd-date { color: var(--ink-soft); }

.cd-card.is-today .cd-days { color: var(--ok, #1d6b4a); }
.cd-card.is-undated .cd-days { font-family: var(--body); font-size: 14px; color: var(--ink-faint); }

@media (max-width: 620px) {
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .stat-card { padding: 13px 13px 11px; }
  .stat-num { font-size: 25px; }
  .cd-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* Pasting a guest list ------------------------------------------------------
   Wider than the other dialogs because the thing being pasted is a list, and a
   narrow box makes three hundred names look like a wall. */
.paste-dlg { width: min(640px, calc(100vw - 28px)); }
.paste-body { display: flex; flex-direction: column; gap: 16px; }

.paste-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.paste-field textarea {
  width: 100%; resize: vertical; min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7;
}
.paste-hint { margin: -6px 0 0; line-height: 1.55; }

.paste-events { border: 0; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft, var(--border)); }
.paste-events legend { padding: 0; font-size: 13px; font-weight: 600; }
.paste-event-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.paste-event {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; cursor: pointer;
}
.paste-event:has(input:checked) {
  border-color: var(--accent); background: var(--accent-wash, var(--surface-sunk)); color: var(--accent-dark, var(--accent));
}
.paste-event input { accent-color: var(--accent); }