/* ============================================================
   SitDown.Web — full design system.
   Theme variables come from /themes/themes.css; everything
   below consumes them via var(--th-*).
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--th-bg, #1B1F28);
    color: var(--th-text, #F2F4F8);
    font-family: var(--th-font-body, 'Segoe UI', system-ui, sans-serif);
    height: 100%;
    overflow: hidden; /* the .app-shell column owns scrolling */
    overscroll-behavior: contain;
}

body {
    /* Avoid pull-to-refresh fighting horizontal scroll on the pager. */
    touch-action: pan-y;
}

#app {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-shell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--th-bg);
    overflow: hidden;
}

button {
    font-family: inherit;
    color: inherit;
}

/* ---------------- Boot splash (kept simple) ---------------- */
.boot-splash { text-align: center; padding: 48px; }
.boot-progress { width: 80px; height: 80px; animation: spin 1.4s linear infinite; }
.boot-progress circle { fill: none; stroke-width: 6; }
.boot-progress circle:first-child { stroke: rgba(255, 255, 255, 0.12); }
.boot-progress circle:last-child { stroke: var(--th-accent, #5B8DEF); stroke-dasharray: 60 200; stroke-linecap: round; }
.boot-text { margin-top: 14px; font-size: 14px; color: var(--th-text-muted, #A6AFBF); letter-spacing: 0.04em; }
.loading-shell { text-align: center; padding: 32px; }
.loading-shell h1 { margin: 0 0 6px; font-size: 28px; }
.loading-shell p { margin: 0; color: var(--th-text-muted, #A6AFBF); }

#blazor-error-ui {
    background: #ee6868;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
@keyframes pop-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ============================================================
   App header
   ============================================================ */
.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px env(safe-area-inset-bottom);
    padding-top: max(10px, env(safe-area-inset-top));
    background: linear-gradient(180deg, var(--th-panel) 0%, transparent 100%);
    color: var(--th-text);
    border-bottom: 1px solid var(--th-panel-border);
    flex: 0 0 auto;
}
.app-header__brand {
    font-family: var(--th-font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    flex: 1;
}
.app-header__sub {
    color: var(--th-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* ============================================================
   Tab pager (mobile)
   ============================================================ */
.tab-pager {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tab-pager__indicator {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    overflow-x: auto;
    background: var(--th-panel);
    border-bottom: 1px solid var(--th-panel-border);
    position: sticky;
    top: 0;
    z-index: 5;
    scrollbar-width: none;
}
.tab-pager__indicator::-webkit-scrollbar { display: none; }

.tab-pager__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--th-panel-border);
    border-radius: 999px;
    background: transparent;
    color: var(--th-text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    transition: background 160ms, color 160ms, border-color 160ms;
    white-space: nowrap;
}
.tab-pager__pill:hover { background: var(--th-accent-soft); }
.tab-pager__pill--active {
    color: var(--th-text);
    border-color: var(--th-accent);
    background: var(--th-accent-soft);
    box-shadow: 0 0 0 1px var(--th-accent) inset;
}
.tab-pager__icon { font-size: 13px; }

.tab-pager__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    flex: 1;
    min-height: 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.tab-pager__track::-webkit-scrollbar { display: none; }

.tab-panel {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    padding: 12px 14px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Progress HUD
   ============================================================ */
.hud {
    background: var(--th-panel);
    border: 1px solid var(--th-panel-border);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: var(--th-shadow);
}
.hud--placeholder { text-align: center; }
.hud__hint { margin: 0; color: var(--th-text-muted); }
.hud__row {
    display: flex;
    gap: 16px;
    align-items: baseline;
}
.hud__metric { display: flex; flex-direction: column; }
.hud__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--th-text-muted);
}
.hud__value {
    font-family: var(--th-font-display);
    font-size: 22px;
    color: var(--th-text);
    font-variant-numeric: tabular-nums;
}
.hud__bar {
    margin-top: 8px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.hud__bar-fill {
    display: block;
    height: 100%;
    background: var(--th-accent);
    transition: width 240ms ease-out;
}
.hud__chip {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--th-accent-soft);
    color: var(--th-accent-strong);
    font-size: 12px;
    border: 1px solid var(--th-accent);
}

/* ============================================================
   Table scene
   ============================================================ */
.table-scene {
    position: relative;
    width: min(100%, 600px);
    /* Fit the whole square table within the stage on both axes so it never
       needs scrolling. cq units fall back to the width line above when the
       container query context is unavailable. */
    width: min(100cqw, 100cqh);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--th-shadow);
    border: 1px solid var(--th-panel-border);
}

.table-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.plate__food {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
.plate__food svg { width: 100%; height: 100%; display: block; }

.seats {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.seat {
    position: absolute;
    width: clamp(40px, 10%, 56px);
    height: clamp(40px, 10%, 56px);
    margin-left: calc(clamp(40px, 10%, 56px) / -2);
    margin-top:  calc(clamp(40px, 10%, 56px) / -2);
    transition: transform 160ms ease-out, filter 160ms;
}

.seat__hit {
    appearance: none;
    background: var(--th-chair);
    border: 2px solid var(--th-chair-dark);
    border-radius: 50%;
    color: var(--th-text);
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.seat__hit:hover { transform: translateZ(0) scale(1.06); }
.seat__hit:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }

/* Pre-placed (fixed) guests get a blue ring instead of a padlock badge. */
.seat--locked .seat__hit {
    border-color: var(--seat-locked, #4FC0FF);
    box-shadow: 0 0 0 2px var(--seat-locked, #4FC0FF), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.seat--filled.seat--locked .seat__hit {
    /* keep the blue ring even when "filled" highlight would otherwise win */
    box-shadow: 0 0 0 2px var(--seat-locked, #4FC0FF), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.seat--filled:not(.seat--locked) .seat__hit {
    box-shadow: 0 0 0 2px var(--th-accent), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.seat--target .seat__hit {
    box-shadow: 0 0 0 3px var(--th-accent-strong), 0 4px 10px rgba(0, 0, 0, 0.35);
    animation: pop-in 220ms ease-out;
}
.seat--drop-bad .seat__hit {
    box-shadow: 0 0 0 3px var(--th-violation), 0 4px 10px rgba(0, 0, 0, 0.35);
    background-color: var(--th-violation-soft);
}

.seat__avatar {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    display: block;
}
.seat__avatar svg { width: 100%; height: 100%; display: block; }

/* Name sits just below the seat circle without shrinking it. */
.seat__name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    color: var(--th-text);
    font-family: var(--th-font-display);
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

.seat__placeholder {
    color: var(--th-text-muted);
    font-size: 12px;
    align-self: center;
}

.seat__pencil {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: 100%;
    padding: 6px;
}

.pencil-mark {
    font-size: 9px;
    text-align: center;
    color: var(--th-text-muted);
    line-height: 1;
}

/* ---------- Per-seat pencil-mark popover ---------- */
.pencil-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    z-index: 30;
    width: 220px;
    max-height: 300px;
    background: var(--th-panel);
    color: var(--th-text);
    border: 1px solid var(--th-panel-border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--th-shadow);
    display: flex;
    flex-direction: column;
    animation: pop-in 160ms ease-out;
}
.pencil-menu__title {
    font-size: 12px;
    color: var(--th-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}
.pencil-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.pencil-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
}
.pencil-menu__item:hover { background: var(--th-accent-soft); }
.pencil-menu__item--on {
    background: var(--th-accent-soft);
    border-color: var(--th-accent);
}
.pencil-menu__avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.pencil-menu__avatar svg { width: 100%; height: 100%; display: block; }
.pencil-menu__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    gap: 6px;
}
.pencil-menu__empty { font-size: 13px; color: var(--th-text-muted); margin: 4px 0 8px; }

/* ============================================================
   Guest pool
   ============================================================ */
.guest-pool { padding: 4px 0 8px; }
.guest-pool__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.guest-pool__title { margin: 0; font-family: var(--th-font-display); font-size: 18px; }
.guest-pool__count { color: var(--th-text-muted); font-size: 13px; }
.guest-pool__empty { color: var(--th-text-muted); font-size: 14px; }
.guest-pool__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guest-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    background: var(--th-clue-bg);
    border: 1px solid var(--th-clue-border);
    color: var(--th-text);
    border-radius: 999px;
    cursor: grab;
    transition: transform 140ms, box-shadow 140ms, background 140ms;
    user-select: none;
}
.guest-chip:hover { transform: translateY(-1px); }
.guest-chip:active { cursor: grabbing; }
.guest-chip--selected {
    background: var(--th-accent-soft);
    border-color: var(--th-accent);
    box-shadow: 0 0 0 2px var(--th-accent-strong) inset;
}
.guest-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.guest-chip__avatar svg { width: 100%; height: 100%; display: block; }
.guest-chip__name { font-size: 14px; }

/* ============================================================
   Clue list / clue card
   ============================================================ */
.clue-list { padding: 4px 0 8px; }
.clue-list__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.clue-list__title { margin: 0; font-family: var(--th-font-display); font-size: 18px; }
.clue-list__count {
    background: var(--th-accent-soft);
    color: var(--th-accent-strong);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid var(--th-accent);
}
.clue-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.clue-list__hint { color: var(--th-text-muted); font-size: 12px; margin-top: 8px; }

.clue-card {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    background: var(--th-clue-bg);
    border: 1px solid var(--th-clue-border);
    color: var(--th-text);
    border-radius: 10px;
    padding: 8px 10px;
    transition: opacity 200ms, background 200ms, border-color 200ms;
}
.clue-card__marker {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--th-accent-soft);
    color: var(--th-accent-strong);
    font-weight: 600;
}
.clue-card__text { font-size: 14px; line-height: 1.35; }
.clue-card__badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.clue-card__badge--decoy { background: rgba(255,255,255,0.08); color: var(--th-text-muted); }

.clue-card--ok {
    opacity: 0.6;
}
.clue-card--ok .clue-card__text { text-decoration: line-through; }
.clue-card--ok .clue-card__marker { background: rgba(0,0,0,0.18); color: var(--th-success); }

.clue-card--bad {
    border-color: var(--th-violation);
    background: var(--th-violation-soft);
    animation: shake 320ms ease-in-out;
}
.clue-card--bad .clue-card__marker { background: var(--th-violation); color: #fff; }

.clue-card--decoy {
    opacity: 0.55;
    border-style: dashed;
}
.clue-card--decoy .clue-card__text { text-decoration: line-through; font-style: italic; }

/* ============================================================
   Action bar
   ============================================================ */
.action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px env(safe-area-inset-bottom);
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    background: var(--th-panel);
    border-top: 1px solid var(--th-panel-border);
    flex: 0 0 auto;
    z-index: 6;
}
.action-bar__spacer { flex: 1; }

.btn {
    appearance: none;
    border: 1px solid var(--th-panel-border);
    background: transparent;
    color: var(--th-text);
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms, border-color 140ms, transform 80ms;
    min-height: 32px;
    font-family: inherit;
}
.btn:hover { background: var(--th-accent-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }
.btn--primary {
    background: var(--th-accent);
    border-color: var(--th-accent);
    color: var(--th-bg-deep, #111);
    font-weight: 700;
}
.btn--primary:hover { background: var(--th-accent-strong); }
.btn--ghost { border-color: transparent; }
.btn--small { padding: 4px 8px; min-height: 26px; font-size: 12px; }
/* Icon-only buttons (e.g. Undo / Redo) — square, glyph centred. */
.btn--icon {
    padding: 5px;
    width: 32px;
    display: inline-grid;
    place-items: center;
    font-size: 16px;
    line-height: 1;
}

/* Overflow menu (uses native <details>) */
.more { position: relative; }
.more > summary {
    list-style: none;
    cursor: pointer;
}
.more > summary::-webkit-details-marker { display: none; }
.more__menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--th-panel);
    border: 1px solid var(--th-panel-border);
    border-radius: 12px;
    box-shadow: var(--th-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}
.btn--menu {
    text-align: left;
    border-color: transparent;
    border-radius: 8px;
    padding: 9px 10px;
    width: 100%;
}
.more__sep { border: none; border-top: 1px solid var(--th-panel-border); margin: 4px 0; }

/* ============================================================
   Config panel (settings tab)
   ============================================================ */
.config { display: flex; flex-direction: column; gap: 14px; }
.config__title {
    margin: 0;
    font-family: var(--th-font-display);
    font-size: 22px;
}
.config__group {
    border: 1px solid var(--th-panel-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0;
    background: var(--th-panel);
}
.config__group legend {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--th-text-muted);
    padding: 0 6px;
}
.config__chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.config__chips--compact {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.config__hint { color: var(--th-text-muted); font-size: 13px; margin: 4px 2px 0; }
.config__hint--small { font-size: 12px; line-height: 1.35; }

.chip {
    border: 1px solid var(--th-panel-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: transparent;
    color: var(--th-text);
    cursor: pointer;
    text-align: left;
    transition: background 140ms, border-color 140ms;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chip:hover { background: var(--th-accent-soft); }
.chip__title { font-size: 14px; font-weight: 600; }
.chip__sub { font-size: 12px; color: var(--th-text-muted); }
.chip--active {
    background: var(--th-accent-soft);
    border-color: var(--th-accent);
    box-shadow: 0 0 0 1px var(--th-accent) inset;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    background: var(--th-panel);
    color: var(--th-text);
    border: 1px solid var(--th-panel-border);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    box-shadow: var(--th-shadow);
    z-index: 50;
    animation: pop-in 160ms ease-out;
    max-width: calc(100% - 32px);
    text-align: center;
}
.toast--success { border-color: var(--th-success); }
.toast--error { border-color: var(--th-violation); }

/* ============================================================
   Success overlay
   ============================================================ */
.success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 18, 0.55);
    display: grid;
    place-items: center;
    z-index: 80;
    animation: pop-in 200ms ease-out;
}
.success-overlay__card {
    background: var(--th-panel);
    color: var(--th-text);
    border: 1px solid var(--th-accent);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    box-shadow: var(--th-shadow);
    width: min(360px, calc(100% - 32px));
    animation: pop-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.success-overlay__sparkle {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 10px;
    animation: spin 6s linear infinite;
    display: inline-block;
}
.success-overlay__title {
    font-family: var(--th-font-display);
    margin: 0 0 6px;
    font-size: 28px;
    color: var(--th-accent-strong);
}
.success-overlay__time {
    margin: 0 0 6px;
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-family: var(--th-font-display);
}
.success-overlay__best {
    color: var(--th-success);
    margin: 0 0 14px;
    font-weight: 600;
}
.success-overlay__buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

/* ============================================================
   Modal dialog (NewPuzzleDialog and friends)
   ============================================================ */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 18, 0.55);
    display: grid;
    place-items: center;
    z-index: 70;
    padding: 16px;
    animation: pop-in 200ms ease-out;
}
.dialog {
    background: var(--th-panel);
    border: 1px solid var(--th-panel-border);
    border-radius: 18px;
    width: min(520px, 100%);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    box-shadow: var(--th-shadow);
    padding: 16px;
    animation: pop-in 240ms ease-out;
}
.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dialog__title {
    margin: 0;
    font-family: var(--th-font-display);
    font-size: 22px;
}
.dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ============================================================
   Desktop layout — the table keeps the main stage while the
   Clues & Guests drawer rests open on the right by default.
   ============================================================ */
@media (min-width: 1024px) {
    .table-scene { width: min(100cqw, 100cqh, 720px); }
    .hud { margin-bottom: 14px; }

    /* A taller grab handle is easier to hit with a mouse. */
    .side-drawer__handle { min-height: 168px; }
    .side-drawer--bottom .side-drawer__handle { min-height: 34px; }
}

/* ============================================================
   Play area — the table is the always-visible base layer and a
   Clues & Guests drawer can slide in over it from either edge.
   --drawer-w-left / --drawer-w-right are how many px each drawer
   is currently pulled out; JS updates them live while dragging.
   Only one drawer may be open at a time.
   ============================================================ */
.play-area {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    --drawer-w-left: 0px;
    --drawer-w-right: 0px;
    --drawer-w-bottom: 0px;
}

.table-stage {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px 14px;
    container-type: size;
}

/* ---- Slide-out Clues & Guests drawer (either edge) ---- */
.side-drawer {
    --panel-w: min(88vw, 360px);
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--panel-w);
    z-index: 6;
    transition: transform 200ms ease;
    will-change: transform;
}
.side-drawer--right {
    right: 0;
    transform: translateX(calc(var(--panel-w) - var(--drawer-w-right)));
}
.side-drawer--left {
    left: 0;
    transform: translateX(calc(var(--drawer-w-left) - var(--panel-w)));
}
.side-drawer--bottom {
    --panel-h: min(70vh, 420px);
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: var(--panel-h);
    transform: translateY(calc(var(--panel-h) - var(--drawer-w-bottom)));
}
.side-drawer.is-dragging { transition: none; }

.side-drawer__panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px;
    background: var(--th-bg);
}
.side-drawer--right .side-drawer__panel {
    border-left: 1px solid var(--th-panel-border);
    box-shadow: -12px 0 26px rgba(0, 0, 0, 0.4);
}
.side-drawer--left .side-drawer__panel {
    border-right: 1px solid var(--th-panel-border);
    box-shadow: 12px 0 26px rgba(0, 0, 0, 0.4);
}
.side-drawer--bottom .side-drawer__panel {
    border-top: 1px solid var(--th-panel-border);
    box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.4);
}
.side-drawer__panel .guest-pool {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--th-panel-border);
}

/* Grab tab that always peeks out past the panel edge, even when closed. */
.side-drawer__handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 4px;
    background: var(--th-panel);
    color: var(--th-text);
    border: 1px solid var(--th-panel-border);
    cursor: grab;
    touch-action: none;
}
.side-drawer--right .side-drawer__handle {
    left: -32px;
    border-right: none;
    border-radius: 14px 0 0 14px;
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.32);
}
.side-drawer--left .side-drawer__handle {
    right: -32px;
    border-left: none;
    border-radius: 0 14px 14px 0;
    box-shadow: 6px 0 16px rgba(0, 0, 0, 0.32);
}
/* The bottom drawer's handle peeks above its top edge and runs horizontally. */
.side-drawer--bottom .side-drawer__handle {
    flex-direction: row;
    top: -34px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    min-width: 168px;
    min-height: 0;
    height: 34px;
    padding: 4px 16px;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.32);
}
.side-drawer--bottom .side-drawer__handle-grip {
    width: 36px;
    height: 4px;
    box-shadow: 0 6px 0 -1px var(--th-accent), 0 -6px 0 -1px var(--th-accent);
}
.side-drawer--bottom .side-drawer__handle-label {
    writing-mode: horizontal-tb;
    text-orientation: initial;
}
.side-drawer__handle:active { cursor: grabbing; }
.side-drawer__handle:focus-visible {
    outline: 2px solid var(--th-accent);
    outline-offset: 2px;
}
.side-drawer__handle-grip {
    width: 4px;
    height: 36px;
    border-radius: 999px;
    background: var(--th-accent);
    opacity: 0.85;
    box-shadow: 6px 0 0 -1px var(--th-accent), -6px 0 0 -1px var(--th-accent);
}
.side-drawer__handle-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--th-text-muted);
}