/* =====================================================================
   TasteIowa design system. Shared by the public site and the admin.
   White and bright, one accent (sweet corn), rounded, mobile first.
   No hex values below :root.
   ===================================================================== */

:root {
    /* Brand (from the TasteIowa Fieldmark kit) */
    --color-brand-green:    #10261A;
    --color-brand-orange:   #D5571F;
    --color-brand-cream:    #F6EFE4;

    /* Primary actions: buttons, links, selected states. Deep green, reads everywhere. */
    --color-primary:        #10261A;
    --color-primary-hover:  #1F4030;
    --color-on-primary:     #ffffff;

    /* Accent. The brand orange is used for big type, icons, and decoration.
       Small orange text and orange fills with small white text use the deeper
       shade, because the brand orange sits just under the contrast minimum there. */
    --color-accent-bright:  #D5571F;
    --color-accent:         #B34617;
    --color-accent-hover:   #9E3D13;
    --color-accent-ink:     #ffffff;
    --color-accent-soft:    #FCEBE1;
    --color-accent-line:    #F0C3A8;

    /* Surfaces */
    --color-bg:             #ffffff;
    --color-surface:        #ffffff;
    --color-surface-soft:   #F6EFE4;
    --color-surface-raised: #EFE5D5;
    --color-border:         #E9DFCF;
    --color-border-strong:  #D8C9B2;

    /* Text */
    --color-text:           #10261A;
    --color-text-muted:     #56655C;
    --color-text-faint:     #7A877F;
    --color-on-dark:        #ffffff;

    /* Status */
    --color-success:        #15803d;
    --color-warning:        #b45309;
    --color-danger:         #dc2626;
    --color-info:           #2563eb;
    --color-success-soft:   #e7f6ec;
    --color-warning-soft:   #fdf1e1;
    --color-danger-soft:    #fdecec;
    --color-info-soft:      #e8effd;

    --color-overlay:        rgba(16, 38, 26, 0.45);
    --color-glass:          rgba(255, 255, 255, 0.88);
    --shadow-card:          0 1px 2px rgba(26, 25, 23, 0.04), 0 6px 20px rgba(26, 25, 23, 0.06);
    --shadow-lift:          0 2px 4px rgba(26, 25, 23, 0.05), 0 12px 32px rgba(26, 25, 23, 0.10);
    --shadow-pop:           0 20px 50px rgba(26, 25, 23, 0.20);
    --shadow-bar:           0 -1px 0 rgba(26, 25, 23, 0.06), 0 -8px 24px rgba(26, 25, 23, 0.06);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 56px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Type */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.625rem;
    --text-2xl:  2.25rem;
    --text-3xl:  3rem;

    /* App chrome */
    --nav-width: 248px;
    --tap: 44px;
    --tabbar-h: 64px;
    --actionbar-h: 72px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
}

body.has-modal { overflow: hidden; }

[hidden] { display: none !important; }
.is-hidden { display: none !important; }

a { color: inherit; }

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.12; margin: 0; letter-spacing: -0.02em; }

:focus-visible { outline: 3px solid var(--color-accent-bright); outline-offset: 2px; border-radius: var(--radius-sm); }

.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;
}

.material-symbols-rounded {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    /* Icon names are ligatures. Until the font loads, or if it never does,
       the raw name would spill across the layout. This keeps it one icon wide. */
    width: 1em;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    font-variation-settings: "FILL" 0, "wght" 500;
}

.is-active .material-symbols-rounded,
.icon-filled { font-variation-settings: "FILL" 1, "wght" 500; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   Brand mark
   --------------------------------------------------------------------- */

.brand-logo { display: block; height: 30px; width: auto; }
.brand-logo--lg { height: 40px; }
.brand-icon { display: block; width: 32px; height: 32px; }

/* ---------------------------------------------------------------------
   Admin shell: bottom tabs on phones, sidebar on desktop
   --------------------------------------------------------------------- */

.admin-shell { min-height: 100vh; }

.admin-nav { display: none; }

.admin-main {
    min-width: 0;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

.has-actionbar .admin-main { padding-bottom: calc(var(--tabbar-h) + var(--actionbar-h) + var(--safe-bottom)); }

.admin-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: calc(var(--space-3) + var(--safe-top)) var(--space-4) var(--space-3);
    background: var(--color-glass);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.admin-topbar__titles { flex: 1; min-width: 0; }
.admin-topbar__actions { display: flex; gap: var(--space-2); flex-wrap: nowrap; }
.admin-topbar__signout { display: flex; }

.page-title {
    font-size: var(--text-lg);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-lead { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }

.admin-content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 1200px;
}

/* Bottom tab bar */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--color-glass);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--shadow-bar);
}

.tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-text-faint);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.tabbar__item .material-symbols-rounded { font-size: 26px; }
.tabbar__item.is-active { color: var(--color-text); }
.tabbar__item.is-active .tabbar__icon { background: var(--color-accent-soft); }
.tabbar__icon { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--radius-pill); transition: background 0.2s ease; }
.tabbar__item:active .tabbar__icon { transform: scale(0.92); }

/* Sticky action bar above the tabs (edit screens) */

.actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    z-index: 45;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-glass);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--color-border);
}

.actionbar .btn { flex: 1; }

@media (min-width: 1024px) {
    .admin-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--nav-width);
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        padding: var(--space-5) var(--space-4);
        z-index: 40;
    }
    .admin-main { margin-left: var(--nav-width); padding-bottom: 0; }
    .has-actionbar .admin-main { padding-bottom: 0; }
    .tabbar, .actionbar, .admin-topbar__signout { display: none; }
    .admin-topbar { padding: var(--space-6) var(--space-8) var(--space-5); background: var(--color-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .admin-content { padding: var(--space-6) var(--space-8) var(--space-12); gap: var(--space-6); }
    .page-title { font-size: var(--text-xl); }
    .page-lead { font-size: var(--text-sm); }
}

.admin-nav__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-8); }

.admin-nav__links { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }

.admin-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
}

.admin-nav__link:hover { background: var(--color-surface-soft); color: var(--color-text); }
.admin-nav__link.is-active { background: var(--color-accent-soft); color: var(--color-text); }

.admin-nav__footer { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.admin-nav__user { font-size: var(--text-sm); color: var(--color-text-muted); padding: 0 var(--space-3); }

/* ---------------------------------------------------------------------
   Bare layout (login, error)
   --------------------------------------------------------------------- */

.layout-bare { min-height: 100vh; background: var(--color-surface-soft); }

.bare-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: calc(var(--space-6) + var(--safe-top)) var(--space-4) calc(var(--space-6) + var(--safe-bottom));
}

.bare-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-6) auto;
}

.bare-card__title { font-size: var(--text-xl); }
.bare-card__text { margin: 0; color: var(--color-text-muted); }

.error-detail {
    background: var(--color-surface-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--text-xs);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-danger);
    margin: 0;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    user-select: none;
}

.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

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

.btn-secondary { background: var(--color-surface-soft); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-raised); }

.btn-dark { background: var(--color-primary); color: var(--color-on-primary); }

.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-soft); color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: var(--color-on-dark); }

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

.btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-base); }

.btn-icon { width: var(--tap); padding: 0; }
.btn-icon.btn-sm { width: 36px; }

.btn-block { width: 100%; }

.btn.is-loading { position: relative; color: transparent !important; }
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--color-text); border-right-color: transparent; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-on-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

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

.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; border: 0; padding: 0; margin: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); padding: 0; }
.field__hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.field--compact { gap: var(--space-1); }

.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

@media (min-width: 640px) {
    .field-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .field-row--street { grid-template-columns: 1fr 120px; }
}

.input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-soft);
    color: var(--color-text);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 16px; /* 16px stops iOS from zooming into the field */
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.input:hover { background: var(--color-surface-raised); }
.input:focus { background: var(--color-surface); border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 4px var(--color-accent-soft); }
.input:disabled { opacity: 0.55; }
.input::placeholder { color: var(--color-text-faint); }
.input--sm { min-height: 40px; font-size: 16px; padding: var(--space-1) var(--space-3); }

.textarea { resize: vertical; line-height: 1.5; padding-top: var(--space-3); }

select.input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-10);
}

.check { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; font-size: var(--text-sm); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--color-primary); }

.segmented { display: inline-flex; background: var(--color-surface-soft); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.segmented__option { position: relative; }
.segmented__option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented__option span {
    display: grid;
    place-items: center;
    min-width: 56px;
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    font-weight: 700;
    color: var(--color-text-muted);
    transition: background 0.15s ease;
}
.segmented__option input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.segmented__option input:focus-visible + span { outline: 3px solid var(--color-accent); }

/* ---------------------------------------------------------------------
   Panels, stats, lists
   --------------------------------------------------------------------- */

.panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.panel__header { display: flex; flex-direction: column; gap: var(--space-1); }
.panel__title { font-size: var(--text-lg); font-weight: 700; }
.panel__sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (min-width: 768px) { .panel { padding: var(--space-6); } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

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

.stat {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat--feature { grid-column: 1 / -1; background: var(--color-accent-soft); box-shadow: none; gap: var(--space-2); }
@media (min-width: 900px) { .stat--feature { grid-column: auto; } }

.stat__label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.stat__value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat__of { font-size: var(--text-base); color: var(--color-text-muted); font-weight: 600; }
.stat__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.meter { width: 100%; height: 10px; appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.meter::-webkit-progress-bar { background: var(--color-surface); border-radius: var(--radius-pill); }
.meter::-webkit-progress-value { background: var(--color-accent-bright); border-radius: var(--radius-pill); }
.meter::-moz-progress-bar { background: var(--color-accent-bright); border-radius: var(--radius-pill); }

.row-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row-list__item + .row-list__item { border-top: 1px solid var(--color-border); }

.row-list__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-3);
    padding: var(--space-3) 0;
    min-height: 52px;
    text-decoration: none;
}

.row-list__link:active { opacity: 0.6; }
.row-list__title { font-weight: 600; flex: 1 1 auto; }
.row-list__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.row-list__meta--ok { color: var(--color-success); font-weight: 600; }

.empty-state {
    align-items: center;
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-10) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}
.empty-state p { margin: 0; max-width: 36ch; }

/* ---------------------------------------------------------------------
   Chips and badges
   --------------------------------------------------------------------- */

.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-cloud--tight { gap: var(--space-1); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface-soft);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.chip--muted { color: var(--color-text-muted); }
.chip--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.chip--warn { background: var(--color-warning-soft); color: var(--color-warning); }
.chip--success { background: var(--color-success-soft); color: var(--color-success); }

.chip-toggle { position: relative; cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-toggle span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-surface-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.chip-toggle input:checked + span { background: var(--color-primary); color: var(--color-on-primary); }
.chip-toggle input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}
.badge--draft { background: var(--color-surface-soft); color: var(--color-text-muted); }
.badge--published { background: var(--color-success-soft); color: var(--color-success); }
.badge--temporarily_closed { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--permanently_closed { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------------------------------------------------------------------
   Alerts, toasts, modal sheets
   --------------------------------------------------------------------- */

.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); margin: 0; }
.alert-danger { background: var(--color-danger-soft); color: var(--color-danger); font-weight: 600; }

.toast-container {
    position: fixed;
    z-index: 100;
    left: var(--space-4);
    right: var(--space-4);
    top: calc(var(--space-3) + var(--safe-top));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}
@media (min-width: 640px) { .toast-container { top: auto; bottom: var(--space-6); left: auto; right: var(--space-6); align-items: flex-end; } }

.toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 420px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-pop);
    font-size: var(--text-sm);
    font-weight: 600;
    animation: toast-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-info); }
.toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.98); }
.toast-success::before { background: var(--color-success); }
.toast-error::before { background: var(--color-danger); }
.toast-warning::before { background: var(--color-accent-bright); }

@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: none; } }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; }
@media (min-width: 640px) { .modal { place-items: center; } }

.modal__backdrop { position: absolute; inset: 0; background: var(--color-overlay); animation: fade-in 0.2s ease; }

.modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-3) var(--space-5) calc(var(--space-6) + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-pop);
    animation: sheet-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Grab handle, so it reads as a sheet on phones. */
.modal__panel::before {
    content: "";
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .modal__panel { border-radius: var(--radius-xl); padding: var(--space-8); animation: pop-in 0.2s ease; }
    .modal__panel::before { display: none; }
}

.modal__panel--wide { max-width: 620px; }
.modal__title { font-size: var(--text-lg); font-weight: 700; }
.modal__body { margin: 0; color: var(--color-text-muted); }
.modal__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); }
.modal__actions .btn { flex: 1; }
@media (min-width: 640px) { .modal__actions { justify-content: flex-end; } .modal__actions .btn { flex: 0 0 auto; } }

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   Tabs, filters, table, pager
   --------------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-surface-soft);
    border-radius: var(--radius-pill);
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    align-self: flex-start;
    max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.tabs__tab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }

.filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
.filter-bar .field--grow { grid-column: 1 / -1; }
.filter-bar__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
@media (min-width: 768px) {
    .filter-bar { grid-template-columns: 2fr 1fr 1fr auto; }
    .filter-bar .field--grow, .filter-bar__actions { grid-column: auto; }
}

.listing-table { display: flex; flex-direction: column; gap: var(--space-3); }
.listing-table__head { display: none; }

.listing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: transform 0.1s ease;
}
.listing-row:active { transform: scale(0.99); }

.listing-row__spot { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.listing-row__thumb { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-soft); flex-shrink: 0; }
.listing-row__name { display: block; font-weight: 700; }
.listing-row__place { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.listing-row__counts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.listing-row__counts .is-missing { color: var(--color-warning); font-weight: 600; }
.listing-row__updated { display: none; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (min-width: 900px) {
    .listing-table { gap: 0; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
    .listing-table__head,
    .listing-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 160px minmax(0, 1.4fr) 90px; align-items: center; gap: var(--space-4); }
    .listing-table__head { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; border-bottom: 1px solid var(--color-border); }
    .listing-row { border-radius: 0; box-shadow: none; padding: var(--space-3) var(--space-5); background: transparent; }
    .listing-row + .listing-row { border-top: 1px solid var(--color-border); }
    .listing-row:hover { background: var(--color-surface-soft); }
    .listing-row__counts { grid-column: auto; }
    .listing-row__updated { display: block; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.pager__info { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------
   Skeletons
   --------------------------------------------------------------------- */

.skeleton {
    display: block;
    background: linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-surface-raised) 50%, var(--color-surface-soft) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Dashboard queue banner */
.queue-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; font-weight: 700; }
.queue-banner.is-clear { background: var(--color-success-soft); color: var(--color-success); }
.queue-banner__go { margin-left: auto; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-sm); }