/* =====================================================================
   Design system for the dashboard, auth and marketing shell.
   Invitation templates bring their own stylesheet.
   ===================================================================== */

:root {
    /* Surfaces */
    --paper:       #fbf9f6;
    --card:        #ffffff;
    --card-sunken: #f6f2ec;

    /* Ink */
    --ink:         #1d1a17;
    --ink-soft:    #4a433c;
    --muted:       #857a6e;
    --line:        #e9e2d8;
    --line-strong: #d9cfc1;

    /* Accents */
    --gold:        #a9854a;
    --gold-soft:   #f3ead9;
    --gold-ink:    #6d5429;
    --rose:        #b05a73;
    --rose-soft:   #fbeef1;

    /* Status */
    --ok:          #2f7d5d;
    --ok-soft:     #e6f3ec;
    --warn:        #9a6b17;
    --warn-soft:   #fcf2dd;
    --bad:         #b3453c;
    --bad-soft:    #fbeae8;

    /* Type */
    --display: "Cormorant Garamond", "Georgia", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Shape */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(29, 26, 23, .06);
    --shadow:    0 2px 8px rgba(29, 26, 23, .07), 0 1px 2px rgba(29, 26, 23, .04);
    --shadow-lg: 0 12px 32px rgba(29, 26, 23, .12);

    --nav-w: 240px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-ink); }

h1, h2, h3, h4 {
    margin: 0 0 .4em;
    line-height: 1.2;
    font-weight: 600;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

.display {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: .01em;
}

.muted  { color: var(--muted); }
.small  { font-size: .85rem; }
.tiny   { font-size: .75rem; }
.center { text-align: center; }
.mono   { font-variant-numeric: tabular-nums; }

.eyebrow {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* ---- Layout -------------------------------------------------------- */

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--nav-w);
    flex: 0 0 var(--nav-w);
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px;
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--gold), #d9bb85);
    flex: 0 0 26px;
}

/* "by WDSLab" sits under the name so the full brand fits a 240px sidebar. */
.brand-text {
    display: grid;
    line-height: 1.05;
}

.brand-sub {
    font-family: var(--sans);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

.auth-aside .brand-sub { color: #9a8d78; }

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-label {
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 10px 6px;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .92rem;
    transition: background .12s ease, color .12s ease;
}

.nav a:hover { background: var(--card-sunken); }

.nav a.is-active {
    background: var(--gold-soft);
    color: var(--gold-ink);
    font-weight: 600;
}

.nav-icon {
    width: 16px;
    text-align: center;
    opacity: .75;
    flex: 0 0 16px;
}

.sidebar-foot {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 32px 64px;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- Cards and grids ----------------------------------------------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.card-pad-lg { padding: 24px; }

.grid {
    display: grid;
    gap: 16px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat .stat-label {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.stat .stat-value {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover { filter: brightness(1.12); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-gold    { background: var(--gold); }
.btn-ghost   { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--card-sunken); filter: none; }
.btn-danger  { background: transparent; color: var(--bad); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--bad-soft); filter: none; }
.btn-sm      { padding: 6px 11px; font-size: .82rem; }
.btn-block   { width: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

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

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--card-sunken);
    color: var(--muted);
}

.badge-draft     { background: var(--card-sunken); color: var(--muted); }
.badge-published { background: var(--ok-soft);   color: var(--ok); }
.badge-accepted  { background: var(--ok-soft);   color: var(--ok); }
.badge-pending   { background: var(--warn-soft); color: var(--warn); }
.badge-maybe     { background: var(--warn-soft); color: var(--warn); }
.badge-declined  { background: var(--bad-soft);  color: var(--bad); }
.badge-gold      { background: var(--gold-soft); color: var(--gold-ink); }

/* ---- Forms ---------------------------------------------------------- */

.field { margin-bottom: 15px; }

.field > label {
    display: block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 5px;
}

.input, .select, .textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: .92rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(169, 133, 74, .15);
}

.textarea { min-height: 96px; resize: vertical; }

.field-error .input,
.field-error .select,
.field-error .textarea { border-color: var(--bad); }

.error-text {
    display: block;
    margin-top: 5px;
    font-size: .8rem;
    color: var(--bad);
}

.hint {
    display: block;
    margin-top: 5px;
    font-size: .8rem;
    color: var(--muted);
}

/* ---- Flash messages -------------------------------------------------- */

.flash {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 14px;
    font-size: .9rem;
    border: 1px solid transparent;
}

.flash-success { background: var(--ok-soft);   color: var(--ok);   border-color: #c6e3d4; }
.flash-error   { background: var(--bad-soft);  color: var(--bad);  border-color: #f0cdc9; }
.flash-info    { background: var(--gold-soft); color: var(--gold-ink); border-color: #e7d8ba; }

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

.empty {
    text-align: center;
    padding: 54px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    background: var(--card);
    color: var(--muted);
}

.empty h3 { color: var(--ink); }

/* ---- Progress -------------------------------------------------------- */

.progress {
    height: 7px;
    border-radius: 999px;
    background: var(--card-sunken);
    overflow: hidden;
}

.progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), #d4b075);
}

/* ---- Invitation list cards ------------------------------------------- */

.inv-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.inv-thumb {
    aspect-ratio: 9 / 16;
    border-radius: var(--r-sm);
    background: linear-gradient(160deg, #efe4cf, #f7f1e6 60%, #e9dcc4);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--gold-ink);
}

.link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-size: .82rem;
    max-width: min(420px, 100%);
}

.link-row code {
    flex: 1 1 auto;
    /* A flex item will not shrink below its content without this, so a long
       invitation URL would push the whole page wider than the screen. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink-soft);
}

/* ---- Auth + marketing ------------------------------------------------ */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-aside {
    background: linear-gradient(170deg, #241f19, #3a3026 60%, #4a3d2c);
    color: #f3ece0;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-aside .brand { color: #f3ece0; }

.auth-pitch {
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1.15;
    max-width: 12em;
}

.auth-points {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 9px;
    font-size: .92rem;
    color: #d8cdb9;
}

.auth-points li::before {
    content: "✓";
    color: #d4b075;
    margin-right: 9px;
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 40px 24px;
}

.auth-box { width: 100%; max-width: 380px; }

/* ---- Utilities -------------------------------------------------------- */

.row       { display: flex; gap: 12px; align-items: center; }
.row-wrap  { flex-wrap: wrap; }
.spread    { justify-content: space-between; }
.stack     { display: grid; gap: 12px; }
.stack-sm  { display: grid; gap: 7px; }
.mt-0  { margin-top: 0; }
.mt    { margin-top: 16px; }
.mt-lg { margin-top: 28px; }
.mb-0  { margin-bottom: 0; }

.divider {
    height: 1px;
    background: var(--line);
    margin: 18px 0;
}

/* ---- Editor ----------------------------------------------------------- */

.editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.preview-pane {
    position: sticky;
    top: 28px;
}

.phone {
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 9 / 19;
    background: #14110e;
    border-radius: 34px;
    padding: 10px;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 20px;
    border-radius: 999px;
    background: #14110e;
    z-index: 2;
}

.phone iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 26px;
    background: #fff;
    display: block;
}

.section-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.section-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.section-row:last-child { border-bottom: 0; }
.section-row:nth-child(even) { background: #fdfbf8; }

.section-name { flex: 1 1 auto; font-size: .92rem; }

.section-move {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}

.icon-btn {
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--muted);
    border-radius: 4px;
    width: 20px;
    height: 15px;
    font-size: 8px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.icon-btn:hover { background: var(--card-sunken); color: var(--ink); }
.icon-btn:disabled { opacity: .3; cursor: default; }

/* Toggle switch */
.switch { display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line-strong);
    display: inline-flex;
    align-items: center;
    padding: 2px;
    transition: background .15s ease;
}

.switch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease;
}

.switch input:checked + .switch-track { background: var(--gold); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(169, 133, 74, .25); }

/* ---- Photos in the editor ---------------------------------------------- */

.media-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 16px;
}

.media-hero img {
    width: 150px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    display: block;
}

.media-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.media-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}

.media-thumb {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
    flex: 0 0 58px;
    display: block;
}

.media-row .input { flex: 1 1 auto; }

/* ---- Workspace switcher -------------------------------------------------- */

.workspace {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 4px;
}

.workspace .nav-label { padding: 0 0 4px; }
.workspace .select { width: 100%; font-size: .85rem; }

@media (max-width: 760px) {
    .workspace {
        border-top: 0;
        padding-top: 0;
        margin: 0;
        flex: 1 1 160px;
        max-width: 220px;
    }
    .workspace .nav-label { display: none; }
}

/* ---- Plans and QR -------------------------------------------------------- */

.plan-card { display: flex; flex-direction: column; gap: 4px; }
.plan-card.is-current { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169, 133, 74, .13); }

.plan-price {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 8px 0 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.plan-card form { margin-top: auto; }

.qr-preview {
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--card-sunken);
    border-radius: var(--r);
    margin-top: 14px;
}

.qr-preview svg { width: 190px; height: 190px; display: block; }

/* ---- Sub-navigation ------------------------------------------------------ */

.subnav {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.subnav a {
    padding: 9px 14px;
    font-size: .9rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.subnav a:hover { color: var(--ink); }

.subnav a.is-active {
    color: var(--gold-ink);
    border-bottom-color: var(--gold);
    font-weight: 600;
}

/* ---- Add guests ---------------------------------------------------------- */

.guest-row-grid {
    display: grid;
    /* Auto-fit rather than a fixed track list, so adding a field (email)
       reflows instead of squeezing every column. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.guest-row-grid label { display: block; }

.field-label {
    display: block;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}

/* ---- WhatsApp template --------------------------------------------------- */

.template-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

/* A plain stand-in for the chat background, so the bubble reads as a message. */
.wa-preview {
    background: #ece5dd;
    border-radius: var(--r);
    padding: 14px 12px;
    min-height: 200px;
}

.wa-bubble {
    background: #dcf8c6;
    border-radius: 10px 10px 10px 2px;
    padding: 10px 12px;
    font-size: .82rem;
    line-height: 1.45;
    color: #10251a;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

/* ---- Guest list rows ------------------------------------------------------ */

.gl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 16px;
    align-items: start;
}

.gl-main { min-width: 0; }

.gl-actions {
    display: grid;
    gap: 6px;
    justify-items: stretch;
}

.gl-edit summary { cursor: pointer; padding: 4px 0; }

.rsvp-note {
    margin: 8px 0 0;
    padding: 8px 11px;
    background: var(--card-sunken);
    border-radius: var(--r-sm);
    font-size: .88rem;
    font-style: italic;
}

/* ---- Tables --------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.data-table th {
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.data-table tbody tr:hover { background: var(--card-sunken); }

@media (max-width: 1000px) {
    .template-grid { grid-template-columns: minmax(0, 1fr); }
    .guest-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gl-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Task checklist ------------------------------------------------------ */

.task-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
}

.task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}

.task:last-child { border-bottom: 0; }
.task.is-done .task-title { text-decoration: line-through; color: var(--muted); }

.task-check { display: flex; }

.tick {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 1.5px solid var(--line-strong);
    background: var(--card);
    color: #fff;
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    transition: background .12s ease, border-color .12s ease;
}

.tick:hover { border-color: var(--gold); }
.is-done .tick { background: var(--ok); border-color: var(--ok); }

.task-body { display: grid; gap: 4px; min-width: 0; }
.task-title { font-size: .94rem; line-height: 1.35; }

.task-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: .76rem;
}

.task-overdue { color: var(--bad); font-weight: 600; }

.task-edit summary { cursor: pointer; }
.task-edit[open] { grid-column: 1 / -1; }

/* ---- Liquor planner ------------------------------------------------------ */

.liquor-row {
    display: grid;
    grid-template-columns: 70px 92px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}

.liquor-label { font-size: .9rem; }

/* ---- Seating designer --------------------------------------------------- */

.seat-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.seat-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.seat-guests {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.guest-pool {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.guest-chip {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--card);
    padding: 8px 10px;
    cursor: grab;
    display: grid;
    gap: 2px;
    transition: border-color .12s ease, background .12s ease;
}

.guest-chip:hover { background: var(--card-sunken); }
.guest-chip:active { cursor: grabbing; }

.guest-chip.is-selected {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: 0 0 0 3px rgba(169, 133, 74, .16);
}

.guest-chip.is-dragging { opacity: .45; }

.guest-chip-name { font-size: .9rem; font-weight: 500; }

.guest-chip-meta {
    font-size: .72rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* The floor plan is a fixed logical canvas; the card scrolls around it. */
.seat-floor-wrap {
    overflow: auto;
    padding: 12px;
}

.seat-floor {
    position: relative;
    border-radius: var(--r);
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--card-sunken);
    touch-action: none;   /* pointer-drag, not scroll, when grabbing a table */
}

.seat-floor.is-placing .st:not(.st-decor) {
    outline: 2px dashed var(--gold);
    outline-offset: 3px;
}

/* A table on the floor */
.st {
    position: absolute;
    display: grid;
    place-content: center;
    gap: 2px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    user-select: none;
    padding: 6px;
}

.st:active, .st.is-dragging { cursor: grabbing; }
.st.is-dragging { box-shadow: var(--shadow-lg); z-index: 5; }

.st.is-target {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.st.is-over { border-color: var(--bad); background: var(--bad-soft); }

.st-round   { border-radius: 50%; }
.st-banquet { border-radius: 10px; }
.st-row     { border-radius: 6px; background: repeating-linear-gradient(90deg, var(--card) 0 22px, var(--card-sunken) 22px 26px); }
.st-decor   { border-style: dashed; background: transparent; color: var(--muted); }

.st-name {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
    max-width: 90%;
    margin: 0 auto;
}

.st-count {
    font-size: .74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.st.is-over .st-count { color: var(--bad); }

/* Table rosters */
.roster-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.roster-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .88rem;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}

.roster-list li:last-child { border-bottom: 0; }

.roster-edit { margin-top: 12px; }
.roster-edit summary { cursor: pointer; }

@media (max-width: 900px) {
    .seat-layout { grid-template-columns: minmax(0, 1fr); }
    .seat-guests { position: static; max-height: none; }
}

/* ---- Guest gallery moderation ------------------------------------------ */

.gg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.gg-item {
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gg-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    display: block;
}

.gg-item figcaption {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.gg-caption {
    font-size: .92rem;
    line-height: 1.3;
}

.gg-item .btn-row { gap: 6px; }

/* ---- Design gallery ---------------------------------------------------- */

.design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.design-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

/* A smaller phone frame than the editor's, sized for a grid cell. */
.phone-sm {
    width: 100%;
    max-width: 248px;
    aspect-ratio: 9 / 17;
    border-radius: 26px;
    padding: 7px;
}

.phone-sm iframe { border-radius: 20px; }

.design-body { flex: 1 1 auto; }

.swatches {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
    padding-top: 4px;
}

.swatches i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(29, 26, 23, .14);
}

.design-apply {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
    .editor-grid { grid-template-columns: minmax(0, 1fr); }
    .preview-pane { position: static; order: -1; }
}

@media (max-width: 1000px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

@media (max-width: 760px) {
    .shell { flex-direction: column; }

    .sidebar {
        position: static;
        width: 100%;
        flex: none;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;          /* wrap onto a second line rather than
                                     scrolling items off the screen */
        gap: 8px 12px;
        padding: 12px 16px;
    }

    .sidebar .nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 4px;
    }

    .sidebar .nav a { padding: 7px 10px; font-size: .86rem; }

    .nav-label { display: none; }

    /* Keep sign-out reachable on a phone; only the name and email go. */
    .sidebar-foot {
        margin: 0 0 0 auto;
        border-top: 0;
        padding-top: 0;
    }

    .sidebar-foot .small { display: none; }

    .main { padding: 20px 16px 48px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }

    .inv-card { grid-template-columns: 72px minmax(0, 1fr); }
    .inv-card > :last-child { grid-column: 1 / -1; }
}