/* ============================================================================
   Seating Planner — tool-specific component layer.
   Reuses design tokens (--ink, --terracotta, --serif, --sans, --s*, etc.) from
   ../assets/css/style.css — no :root redeclaration here. Mobile-first, BEM.
   ========================================================================== */

/* Semantic status colors — never gray for actionable states (RSVP / capacity) */
:root {
  --status-yes-bg: #e3f1e4;
  --status-yes-fg: #1f5c2a;      /* on --status-yes-bg: 6.2:1 */
  --status-no-bg: #fbe6e4;
  --status-no-fg: #a3261c;       /* on --status-no-bg: 6.1:1 */
  --status-pending-bg: #fdf1d9;
  --status-pending-fg: #7a5305;  /* on --status-pending-bg: 6.4:1 */
  --status-warn-bg: #fbe6e4;
  --status-warn-fg: #a3261c;
}

/* ---------- App shell: two-panel grid, mobile-first (stacks from 375px) ---------- */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
@media (min-width: 61.25rem) {   /* 980px */
  .app-shell { grid-template-columns: 1fr 1fr; align-items: start; }
}

.panel {
  position: relative;
  background: var(--linen);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
@media (min-width: 40rem) { .panel { padding: var(--s6); } }

.panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.panel__title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 600;
  margin: 0;
  color: var(--heading);
}
.panel__title--sub { font-size: 1.05rem; margin-top: var(--s6); }
.panel__subtitle {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--s5);
}

/* ---------- Summary chips ---------- */
.summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}
.summary__chip {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--champagne);
  border-radius: 999px;
  padding: var(--s2) var(--s4);
  font-size: 0.9rem;
  color: var(--ink);
}
.summary__chip strong { font-size: 1rem; }
.summary__chip--yes { background: var(--status-yes-bg); color: var(--status-yes-fg); }
.summary__chip--no { background: var(--status-no-bg); color: var(--status-no-fg); }
.summary__chip--pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }

/* ---------- Forms ---------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s4);
}
.form-field__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.input, .select, .textarea {
  font-family: var(--sans);
  font-size: 1rem;
  min-height: 44px;
  padding: var(--s3);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.textarea { min-height: 96px; resize: vertical; }

.guest-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px dashed var(--border-strong);
}
@media (min-width: 35rem) {
  .guest-form { grid-template-columns: 1fr 1fr; }
  .guest-form__full { grid-column: 1 / -1; }
}

.bulk-add { margin: 0 0 var(--s6); }
.bulk-add > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.bulk-add__row {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--s3);
}
.bulk-add__row .textarea { flex: 1 1 220px; }

.toolbar {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.toolbar__search { flex: 1 1 200px; margin-bottom: 0; }
.toolbar__sort { flex: 0 0 auto; min-width: 150px; margin-bottom: 0; }

/* ---------- Guest list ---------- */
.guest-list {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.guest-list__group-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: var(--s3) 0 0;
}
.guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s3) var(--s4);
}
.guest__main { flex: 1 1 160px; min-width: 0; }
.guest__name {
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}
.guest__meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.guest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.status-toggle {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
}
.status-toggle__btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: #fff;
  color: var(--ink-muted);
  padding: var(--s2) var(--s3);
  min-height: 44px;
  cursor: pointer;
}
.status-toggle__btn + .status-toggle__btn { border-left: 1px solid var(--border-strong); }
.status-toggle__btn[aria-pressed="true"][data-status="yes"] { background: var(--status-yes-bg); color: var(--status-yes-fg); }
.status-toggle__btn[aria-pressed="true"][data-status="no"] { background: var(--status-no-bg); color: var(--status-no-fg); }
.status-toggle__btn[aria-pressed="true"][data-status="pending"] { background: var(--status-pending-bg); color: var(--status-pending-fg); }

.icon-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.95rem;
  padding: var(--s2);
}
.icon-btn:hover { background: var(--champagne); }

.guest__seat-select { min-height: 44px; font-size: 0.85rem; padding: var(--s2); }

.empty-state {
  color: var(--ink-muted);
  font-style: italic;
  padding: var(--s4) 0;
}
.table-card__seats-empty { padding-block: var(--s1); }

/* ---------- Buttons (tool-scoped; distinct from .hero__btn) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn--solid { background: var(--terracotta); color: #fff; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--terracotta-dk); }
.btn--ghost { background: transparent; color: var(--terracotta-dk); border-color: var(--border-strong); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--champagne); }
.btn--danger { background: transparent; color: var(--status-no-fg); border-color: #e3b3ad; }
.btn--danger:hover, .btn--danger:focus-visible { background: var(--status-no-bg); }
.btn--small { min-height: 44px; padding: var(--s2) var(--s3); font-size: 0.9rem; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Replaces source's two inline style="display:flex; gap:0.75rem; flex-wrap:wrap;" */
.app-controls {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ---------- Seating panel ---------- */
.table-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px dashed var(--border-strong);
}
@media (min-width: 35rem) {
  .table-form { grid-template-columns: repeat(4, 1fr); align-items: end; }
}

.tables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
@media (min-width: 40rem) { .tables-grid { grid-template-columns: 1fr 1fr; } }

.table-card {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  background: #fff;
  position: relative;
}
.table-card--over {
  border-color: var(--status-warn-fg);
  background: var(--status-warn-bg);
}
.table-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.table-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--heading);
}
.table-card__count {
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: var(--champagne);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  white-space: nowrap;
}
.table-card--over .table-card__count {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  font-weight: 700;
}
.table-card__warn {
  font-size: 0.85rem;
  color: var(--status-warn-fg);
  font-weight: 600;
  margin-bottom: var(--s3);
}
.table-card__seats {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.seat-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  background: var(--linen-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  font-size: 0.95rem;
  min-height: 44px;
}
.seat-chip__btn {
  all: unset;
  cursor: pointer;
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.seat-chip__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table-card__actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.unseated-pool { margin-bottom: var(--s6); }
.unseated-pool__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.pool-guest {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--s3) var(--s4);
  min-height: 44px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  color: var(--ink);
}
.pool-guest:hover { background: var(--champagne); }
.pool-guest:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pool-guest[aria-pressed="true"] {
  background: var(--status-pending-bg);
  border-color: var(--status-pending-fg);
  outline: 2px solid var(--status-pending-fg);
  outline-offset: -2px;
}
.pool-guest__party { font-size: 0.85rem; color: var(--ink-muted); }

.assign-hint {
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  margin-bottom: var(--s4);
  font-size: 0.95rem;
}
.assign-hint[hidden] { display: none; }

/* ---------- Content sections (comparison / how-to / contrast lists) ---------- */
.contrast-list, .steps-list {
  padding-left: 1.3em;
  color: var(--ink);
}
.contrast-list li, .steps-list li { margin-bottom: var(--s3); }
.contrast-list__ours {
  background: var(--status-yes-bg);
  color: #16401e;
  border-radius: var(--radius);
  padding: var(--s4);
  list-style: none;
  margin: var(--s4) 0 0;
}

/* ---------- FAQ (mirrors root site's unstyled .faq/.faq__item pattern) ---------- */
.faq__item {
  border-bottom: 1px solid var(--border);
  padding: var(--s4) 0;
}
.faq__item:last-child { border-bottom: none; }
.faq__question {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
  margin: 0 0 var(--s2);
  color: var(--heading);
}
.faq__answer {
  margin: 0;
  color: var(--ink-muted);
}

/* ---------- Print view ---------- */
@media print {
  .site-header, .hero, .app-shell .app-controls, .guest-panel,
  .site-footer, .no-print, .assign-hint, .margin-art { display: none !important; }
  body { background: #fff; color: #000; }
  .print-sheet { display: block !important; }
  .print-sheet__table { break-inside: avoid; margin-bottom: 1.5em; }
  .print-sheet__table h3 { margin-bottom: 0.3em; }
  .print-sheet__table ul { margin: 0; padding-left: 1.2em; }
}
.print-sheet { display: none; }