/* Zarfika owner app: wizard + panel (task 267-B).
   Only tokens from tokens.css are used for colour, type, spacing, radius, shadow and motion.
   No ID selectors on purpose (keeps the hex-literal grep clean).
   Invitation previews use --inv-* (set by themes.css or inline from design records). */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 50;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- Header ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-family: var(--font-brand);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}
.brand-logo { display: block; height: 28px; width: auto; flex: none; } /* görev 658 Mühür yatay logo: 28 px yükseklik ≈ 155 px genişlik */
/* Görev 561, E-04 + görev 658: tanıtım sayfalarındaki marka logosuyla aynı bileşen (partials/brand-logo). */
.brand--site { font-weight: var(--weight-medium); color: var(--color-text); }
.header-spacer { flex: 1; }

/* ---------- Icons ---------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 32px; height: 32px; stroke-width: 1.5; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed; }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); color: var(--color-on-primary); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary-hover); }

.btn--ghost { color: var(--color-primary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-primary-soft); }

.btn--danger { background: var(--color-danger); color: var(--color-on-primary); }
.btn--danger:hover:not(:disabled) { background: var(--color-text); color: var(--color-on-primary); }

.btn--danger-outline {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn--danger-outline:hover:not(:disabled) { background: var(--color-danger-soft); }

.btn--whatsapp { background: var(--color-success); color: var(--color-on-primary); }
.btn--whatsapp:hover:not(:disabled) { background: var(--color-text); color: var(--color-on-primary); }

.btn--primary:disabled,
.btn--danger:disabled,
.btn--whatsapp:disabled,
.btn--soon {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn--sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  background: var(--color-surface-alt);
  color: var(--color-text);
  white-space: nowrap;
}
.badge .icon { width: 16px; height: 16px; }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); }
.badge--plan { background: var(--color-primary-soft); color: var(--color-primary); white-space: normal; }
.badge--soon { background: var(--color-warning-soft); color: var(--color-warning); }

.save-badge { transition: background-color var(--duration-fast) var(--ease-standard); }
.save-badge-short { display: none; }
@media (max-width: 479px) {
  .save-badge-long { display: none; }
  .save-badge-short { display: inline; }
}

/* ---------- Notices / bands ---------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.notice .icon { margin-top: 1px; }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.notice--info { background: var(--color-info-soft); border-color: var(--color-info-soft); }
.notice--info .icon { color: var(--color-info); }
.notice--warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft); }
.notice--warning .icon, .notice--warning .notice-title { color: var(--color-warning); }
.notice--danger { background: var(--color-danger-soft); border-color: var(--color-danger); }
.notice--danger .icon, .notice--danger .notice-title { color: var(--color-danger); }
.notice--success { background: var(--color-success-soft); border-color: var(--color-success-soft); }
.notice--success .icon, .notice--success .notice-title { color: var(--color-success); }

.error-band {
  margin-top: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.error-band .notice-body { flex: 1 1 200px; }
.error-band .btn { flex: none; margin-left: auto; }
.notice .btn .icon { color: inherit; }

/* ---------- Stepper ---------- */

.stepper {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.stepper-list {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}
.stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.stepper-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.stepper-item.is-done .stepper-bar,
.stepper-item[aria-current="step"] .stepper-bar { background: var(--color-primary); }
.stepper-item[aria-current="step"] { color: var(--color-text); font-weight: var(--weight-semibold); }
.stepper-label { display: none; }
.stepper-mobile {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.stepper-mobile strong { color: var(--color-text); }

@media (min-width: 768px) {
  .stepper-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stepper-mobile { display: none; }
}

/* ---------- Wizard layout ---------- */

body[data-page="wizard"] { display: flex; flex-direction: column; min-height: 100vh; }
.wizard-main { flex: 1 0 auto; }

.wizard-main { padding: var(--space-6) 0 var(--space-12); }
.step-head { margin-bottom: var(--space-6); max-width: 720px; }
.step-title {
  font-family: var(--font-brand);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.step-lead { margin-top: var(--space-2); color: var(--color-text-muted); }

@media (min-width: 1024px) {
  .step-title { font-size: var(--text-3xl); }
}

.wizard-nav {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.wizard-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.wizard-nav-hint { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wizard-nav .btn--primary { min-width: 140px; }

/* ---------- Step 1: event type cards ---------- */

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) { .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .type-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); } }

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 132px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.choice-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.choice-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-card:has(.choice-input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.choice-card:has(.choice-input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.choice-icon { color: var(--color-primary); }
.choice-name { font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.choice-hint { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); }
.choice-check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: none;
  color: var(--color-primary);
}
.choice-card:has(.choice-input:checked) .choice-check { display: block; }
.kid-tag {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
}

/* ---------- Step 2: filters + gallery ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-6);
}
.chip-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-group legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.chip:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }

.design-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.design-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.design-card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.design-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.design-card-name { font-weight: var(--weight-semibold); }
.design-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.design-card .btn-row .btn { flex: 1 1 auto; }

.gallery-note { margin-top: var(--space-6); }

/* Mini live invitation (gallery card, theme vars) */
.mini-invite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 220px;
  padding: var(--space-4);
  overflow: hidden;
  text-align: center;
  background: var(--inv-bg);
  color: var(--inv-text);
  font-family: var(--inv-font-body);
  border-bottom: 1px solid var(--color-border);
}
.mini-frame {
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--inv-ornament);
  border-radius: var(--inv-radius);
  pointer-events: none;
}
.mini-ornament { display: block; width: 72px; height: 16px; color: var(--inv-ornament); }
.mini-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inv-text-muted);
}
.mini-names {
  font-family: var(--inv-font-display);
  font-weight: var(--inv-display-weight);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--inv-text);
}
.mini-date { font-size: var(--text-sm); color: var(--inv-text-muted); }
.mini-button {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--inv-radius);
  background: var(--inv-primary);
  color: var(--inv-on-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Intro teaser cover (plays on "Animasyonu izle") */
.mini-cover {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.mini-cover-half {
  flex: 1;
  background: var(--inv-primary);
  border: 1px solid var(--inv-accent);
}
.mini-cover-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--inv-accent);
  border: 3px solid var(--inv-on-primary);
}
.is-playing .mini-cover { visibility: visible; }
.is-playing .mini-cover-half:first-child { animation: cover-open-start calc(var(--duration-slow) * 3) var(--ease-in-out) forwards; }
.is-playing .mini-cover-half:nth-child(2) { animation: cover-open-end calc(var(--duration-slow) * 3) var(--ease-in-out) forwards; }
.is-playing .mini-cover-seal { animation: cover-seal calc(var(--duration-slow) * 3) var(--ease-spring) forwards; }
.is-playing[data-intro-kind="fade"] .mini-cover-half { animation-name: cover-fade; }

@keyframes cover-open-start { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes cover-open-end { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes cover-seal { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.2); opacity: 1; } 45%, 100% { transform: scale(0); opacity: 0; } }
@keyframes cover-fade { 0%, 20% { opacity: 1; } 30% { opacity: 0.4; } 40% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .is-playing .mini-cover-half,
  .is-playing .mini-cover-seal { animation: cover-fade var(--duration-reduced) linear forwards; }
}

/* Mini card ornament (görev 339): ornaments.css paints the design's own art with --inv-ornament */
.mini-invite .mini-ornament.ornament--divider { width: 96px; height: 16px; }
.mini-invite .mini-corner { position: absolute; top: var(--space-2); left: var(--space-2); width: 40px; height: 40px; opacity: .85; }

/* Full-screen live preview (görev 339): real theme + intro in an iframe loaded only when open */
.has-dialog { overflow: hidden; }
.design-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--color-surface);
}
.design-dialog[hidden] { display: none; }
.design-dialog-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border);
}
.design-dialog-heading { flex: 1; min-width: 0; }
.design-dialog-title { font-size: var(--text-base); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-dialog-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.dialog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.dialog-btn:hover { background: var(--color-primary-soft); }
.dialog-btn:disabled { opacity: .4; cursor: default; }
.dialog-btn:focus-visible, .design-dialog-iframe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.design-dialog-stage { display: flex; justify-content: center; min-height: 0; background: var(--color-bg); }
.design-dialog-phone { width: 100%; height: 100%; }
.design-dialog-iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--color-surface); }
.design-dialog-foot {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}
.design-dialog-foot .btn { width: min(100%, 420px); }
@media (min-width: 720px) {
  .design-dialog-stage { padding: var(--space-5) 0; }
  .design-dialog-phone {
    width: 390px;
    border: 8px solid var(--color-text);
    border-radius: 36px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
}

/* ---------- Step 3: form ---------- */

.form-layout { display: grid; gap: var(--space-4); max-width: 760px; }

.type-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.type-summary-text { flex: 1; min-width: 0; }

.form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.form-section > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary:hover { background: var(--color-surface-alt); }
.section-title { flex: 1; min-width: 0; font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.section-sub { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.section-chevron { transition: transform var(--duration-fast) var(--ease-standard); color: var(--color-text-muted); }
.form-section[open] > summary .section-chevron { transform: rotate(180deg); }
.section-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}
.section-body > :first-child { margin-top: var(--space-3); }

.field-row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: grid; gap: var(--space-1); min-width: 0; }
.field-label { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.field-optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.field-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.field-error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-danger);
}
.field-error .icon { width: 18px; height: 18px; margin-top: 1px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-relaxed); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--color-focus); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.input:disabled { background: var(--color-surface-alt); color: var(--color-text-muted); }
.input--mono { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.input-group { display: flex; gap: var(--space-2); }
.input-group .input { flex: 1; min-width: 0; }

/* Checkbox with a 44 px hit area over a 24 px visual box */
.check {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--touch-min);
  padding-left: calc(var(--touch-min) + var(--space-1));
  cursor: pointer;
}
.check-input {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check-box {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-primary);
}
.check-box .icon { width: 16px; height: 16px; stroke-width: 3; visibility: hidden; }
.check-input:checked + .check-box { background: var(--color-primary); border-color: var(--color-primary); }
.check-input:checked + .check-box .icon { visibility: visible; }
.check-input:focus-visible + .check-box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check-input[aria-invalid="true"] + .check-box { border-color: var(--color-danger); }
.check-text { padding-top: var(--space-2); font-size: var(--text-base); }
.check-text ul { margin-top: var(--space-2); padding-left: var(--space-5); list-style: disc; display: grid; gap: var(--space-1); font-size: var(--text-sm); }

.consent-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.consent-lead { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Program / locations */
.list-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.list-card-head { display: flex; align-items: center; gap: var(--space-2); }
.list-card-title { flex: 1; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.program-list, .location-list { display: grid; gap: var(--space-3); }
.program-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 112px minmax(0, 1fr) var(--touch-min);
  align-items: end;
}
.program-row .field--location { grid-column: 1 / -1; }
.program-row .icon-btn { grid-column: 3; grid-row: 1; }
@media (min-width: 768px) {
  .program-row { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) var(--touch-min); }
  .program-row .field--location { grid-column: auto; }
  .program-row .icon-btn { grid-column: 4; grid-row: 1; }
}
.icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.search-results { display: grid; gap: var(--space-1); }
.search-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
}
.search-result:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }

.map-pin-area {
  position: relative;
  height: 180px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface-alt);
  overflow: hidden;
  cursor: crosshair;
}
.map-pin-area svg.map-grid { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-border); }
.map-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -32px 0 0 -16px;
  color: var(--color-primary);
  pointer-events: none;
}
.map-pin .icon { width: 32px; height: 32px; fill: var(--color-primary-soft); }
.map-caption { font-size: var(--text-sm); color: var(--color-text-muted); }
.location-found {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-sm);
}
.location-found strong { color: var(--color-text); display: block; }
.location-found span { color: var(--color-text); }

/* Option lists (music, intro) */
.option-grid { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .option-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .option-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.option-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 1px var(--color-primary); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.option-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option-text { flex: 1; min-width: 0; line-height: var(--leading-snug); }
.option-sub { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.option-card .btn { position: relative; z-index: 1; }
.option-radio {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
}
.option-card:has(input:checked) .option-radio { border: 6px solid var(--color-primary); }

.suggestion-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.char-count { justify-self: end; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Step 4: preview ---------- */

.preview-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.preview-side { display: grid; gap: var(--space-4); align-content: start; }
.preview-stage { order: -1; display: grid; gap: var(--space-3); justify-items: center; }

@media (min-width: 1024px) {
  .preview-layout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: var(--space-10); }
  .preview-stage { order: 0; position: sticky; top: calc(var(--header-height) + var(--space-16)); }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.card-title--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }

.summary-list { display: grid; gap: var(--space-2); }
.summary-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}
.summary-list div:last-child { border-bottom: 0; }
.summary-list dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.summary-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.summary-list dt, .summary-list dd:not(:last-child) { grid-column: 1; }
.summary-list dd:last-child { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 768px) {
  .summary-list div { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .summary-list dt, .summary-list dd:not(:last-child), .summary-list dd:last-child { grid-column: auto; grid-row: auto; }
}

.check-list { display: grid; gap: var(--space-2); }

/* Preview device (task 620): shared <x-device-phone> (device.css) holds the real invitation iframe.
   From 1024 px the page only sets --device-screen-w from the viewport height (phone stays whole in the first screen);
   below that the device is bare (full-bleed) and needs an explicit height. */
/* From 1024 px the phone sits beside the heading too (row 1-2 of the step grid), so it starts right under the stepper.
   250px = page chrome above the phone (~148) + bezel + fixed step nav (~70) + air; keeps the whole phone above the nav. */
@media (min-width: 1024px) {
  .step-panel[data-step="4"]:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--space-10); grid-template-rows: auto 1fr; align-items: start; }
  .step-panel[data-step="4"] .step-head { grid-column: 1; grid-row: 1; }
  .step-panel[data-step="4"] .preview-layout { display: contents; }
  .step-panel[data-step="4"] .preview-side { grid-column: 1; grid-row: 2; }
  .step-panel[data-step="4"] .preview-stage { grid-column: 2; grid-row: 1 / span 2; }
}
.device.edit-device {
  --device-screen-w: min(340px, calc((100svh - 250px) * 390 / 891));
}
@media (max-width: 1023px) {
  .preview-stage { margin: 0 calc(-1 * var(--space-4)); justify-items: stretch; }
  .preview-stage > .small { padding-inline: var(--space-4); }
  .preview-stage > .btn { justify-self: center; }
  .device.edit-device { height: 80svh; min-height: 480px; }
}
.edit-device__frame { background: var(--color-surface); }
.edit-device__state {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6); text-align: center; background: var(--color-surface);
}
.edit-device__state[hidden] { display: none; }
.edit-device__state-title { font-weight: var(--weight-semibold); }
.edit-device__skeleton { width: 70%; height: var(--space-3); border-radius: var(--radius-sm); background: var(--color-border); }
.edit-device__skeleton--title { height: var(--space-6); width: 50%; }

/* Email gate (first publish, §C4) */
.auth-box { display: grid; gap: var(--space-3); }
.legal-text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Step 5: share ---------- */

.share-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .share-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

.share-hero { display: flex; gap: var(--space-4); align-items: flex-start; }
.share-hero .icon { color: var(--color-success); }
.link-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}
.link-text { flex: 1 1 200px; min-width: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.share-actions { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.qr-card { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.qr-figure {
  width: 200px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.qr-figure svg { width: 100%; height: auto; }
.qr-card .btn-row { justify-content: center; }

/* ---------- Toast ---------- */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-20) + var(--space-4));
  z-index: 60;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--duration-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton ---------- */

.skeleton {
  display: block;
  border-radius: var(--radius-md);
  background: var(--color-skeleton);
  animation: skeleton-pulse calc(var(--duration-slow) * 3) var(--ease-in-out) infinite alternate;
}
@keyframes skeleton-pulse { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton-line { height: 16px; }
.skeleton-title { height: 32px; width: 60%; }
.skeleton-card { height: 132px; border-radius: var(--radius-lg); }
.skeleton-tall { height: 320px; border-radius: var(--radius-lg); }
.skeleton-stack { display: grid; gap: var(--space-3); }

/* ---------- Empty state ---------- */

.empty-state {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-10) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.empty-state .icon--lg { color: var(--color-primary); }
.empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-text { color: var(--color-text-muted); max-width: 44ch; }

/* ---------- Panel ---------- */

.panel-main { padding: var(--space-6) 0 var(--space-16); }
.panel-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.panel-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.panel-title {
  font-family: var(--font-brand);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.panel-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 1024px) {
  .panel-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .panel-title { font-size: var(--text-3xl); }
}

.tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.tab {
  flex: 1 1 auto;
  white-space: nowrap;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
}
.tab:hover { color: var(--color-text); background: var(--color-surface-alt); }
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
@media (min-width: 768px) { .tab { flex: 0 0 auto; padding: var(--space-2) var(--space-5); } }

.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-6);
}
.stat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .stat-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
.stat-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.stat-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.stat-label .icon { width: 18px; height: 18px; }
.stat-value { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.stat-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.stat-card--success .stat-label .icon { color: var(--color-success); }
.stat-card--danger .stat-label .icon { color: var(--color-danger); }

.summary-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .summary-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.side-stack { display: grid; gap: var(--space-5); }

/* Chart */
.chart-wrap { overflow: hidden; }
.chart { width: 100%; height: auto; }
.chart-bar { fill: var(--color-primary); }
.chart-bar:hover { fill: var(--color-primary-hover); }
.chart-grid { stroke: var(--color-border); stroke-width: 1; }
.chart-axis-label { fill: var(--color-text-muted); font-size: 14px; font-family: var(--font-ui); }
.chart-value { fill: var(--color-text); font-size: 14px; font-weight: var(--weight-semibold); font-family: var(--font-ui); }
.chart-caption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.chart-table-toggle { margin-top: var(--space-3); }
.chart-table-toggle > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th,
.data-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table th { background: var(--color-surface-alt); font-weight: var(--weight-semibold); color: var(--color-text); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Plan card */
.plan-list { display: grid; gap: var(--space-2); }
.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.plan-row.is-current { border-color: var(--color-primary); background: var(--color-primary-soft); }
.plan-name { font-weight: var(--weight-semibold); }
.plan-detail { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-text-muted); }

/* RSVP list */
.list-toolbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 1024px) { .list-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.segmented {
  display: flex;
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.segmented .chip { flex: 1; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; padding: 0 var(--space-3); }
.segmented .chip:has(input:checked) { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.search-field { position: relative; }
.search-field .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search-field .input { padding-left: var(--space-10); }
.list-count { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }

.rsvp-table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.rsvp-table td { font-size: var(--text-base); }
.rsvp-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.rsvp-note { color: var(--color-text-muted); max-width: 32ch; overflow-wrap: anywhere; }
.rsvp-muted { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 1023px) {
  .rsvp-table-wrap { background: transparent; border: 0; overflow: visible; }
  .rsvp-table thead { display: none; }
  .rsvp-table, .rsvp-table tbody { display: block; }
  .rsvp-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .rsvp-table td, .rsvp-table td.num { display: block; padding: 0; border: 0; text-align: left; }
  .rsvp-table td[data-cell="name"] { grid-column: 1; }
  .rsvp-table td[data-cell="status"] { grid-column: 2; grid-row: 1; }
  .rsvp-table td[data-cell="size"],
  .rsvp-table td[data-cell="date"],
  .rsvp-table td[data-cell="phone"],
  .rsvp-table td[data-cell="note"] { grid-column: 1 / -1; font-size: var(--text-sm); }
  .rsvp-table td[data-cell="size"]::before,
  .rsvp-table td[data-cell="date"]::before,
  .rsvp-table td[data-cell="phone"]::before { content: attr(data-label) ": "; color: var(--color-text-muted); }
  .rsvp-table td[data-cell="action"] { grid-column: 1 / -1; margin-top: var(--space-2); }
  .rsvp-table td[data-cell="action"] .btn { width: 100%; }
  .rsvp-note { max-width: none; }
}

/* Album */
.quota { display: grid; gap: var(--space-2); }
.quota-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.quota-bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-alt); border: 1px solid var(--color-border); overflow: hidden; }
.quota-fill { height: 100%; background: var(--color-warning); border-radius: var(--radius-pill); }
.quota-warn { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-warning); }
.album-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .album-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.album-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.album-toolbar .selection-count { flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 768px) { .album-toolbar .selection-count { flex: 1 1 auto; } }
.photo-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
.photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.photo-tile svg { width: 100%; height: 100%; }
.photo-tile.tone-1 { background: var(--color-primary-soft); color: var(--color-primary); }
.photo-tile.tone-2 { background: var(--color-success-soft); color: var(--color-success); }
.photo-tile.tone-3 { background: var(--color-info-soft); color: var(--color-info); }
.photo-tile.tone-4 { background: var(--color-warning-soft); color: var(--color-warning); }
.photo-tile.tone-5 { background: var(--color-surface-alt); color: var(--color-text-muted); }
.photo-select {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: var(--touch-min);
}
.photo-select .check-box { box-shadow: var(--shadow-md); }
.photo-tile:has(.check-input:checked) { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  background: var(--color-surface);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-more { margin-top: var(--space-4); display: flex; justify-content: center; }

/* Dialog */
.dialog {
  width: min(92vw, 460px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: var(--color-overlay); }
.dialog-body { display: grid; gap: var(--space-3); padding: var(--space-6); }
.dialog-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.dialog-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 479px) { .dialog-actions .btn { flex: 1 1 100%; } }

.section-gap { margin-top: var(--space-6); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ==================================================================
   Laravel ekleri (görev 313): sunucuda çizilen sekme/süzgeç bağlantıları,
   davetiye listesi, fotoğraf eylemleri, konum kartı. Yalnız tokens.css.
================================================================== */
a.tab, a.chip { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.tab[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.segmented a.chip { color: var(--color-text); }
.segmented a.chip[aria-current="page"] { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.tab-panel { padding-top: var(--space-5); display: grid; gap: var(--space-5); }
.plan-badge-row { margin-top: var(--space-2); }
.link-inline { overflow-wrap: anywhere; }
.panel-actions form { display: contents; }
.share-block { margin-bottom: var(--space-2); }
.summary-empty { margin-bottom: var(--space-2); }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.event-card { display: grid; gap: var(--space-2); }
.event-card .card-title { margin: 0; overflow-wrap: anywhere; }
.event-card .card-title a { color: var(--color-text); }

.photo-tile { position: relative; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-skeleton); }
.photo-actions { position: absolute; top: var(--space-1); right: var(--space-1); display: flex; gap: var(--space-1); }
.photo-actions .icon-btn { background: var(--color-surface); box-shadow: var(--shadow-md); }
.photo-actions form { display: contents; }

.location-card { background: var(--color-surface); }
.location-card .field-hint { display: flex; align-items: center; gap: var(--space-1); }
.input--narrow { max-width: 8rem; }
.gallery-empty { grid-column: 1 / -1; }
.app-header .btn { white-space: nowrap; }
.app-header form { display: contents; }
@media (max-width: 479px) { .app-header .btn--sm { padding: var(--space-2); } }
.list-toolbar > .btn { flex: 0 0 auto; }
.photo-actions .icon { width: 20px; height: 20px; }