/* =====================================================================
   Gaslight Dispensary · on Tableau
   The menu page (filters, the lab-results panel, the sticky tray), the
   pickup times, the reservation number and the drawn street map.
   Everything else is Tableau's own kit. Prefix: gl-.
   ===================================================================== */

.gl-menu-sec { padding-top: clamp(32px, 4vw, 56px); }
.gl-menu { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 36px); align-items: start; }
.gl-side { position: sticky; top: 92px; }
@media (max-width: 980px) { .gl-menu { grid-template-columns: 1fr; } .gl-side { position: static; } }
.gl-filters { display: grid; gap: 12px; margin-bottom: 22px; }
.gl-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.gl-sort select { min-height: 44px; width: auto; }
.gl-count { font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gl-count b { color: var(--ink); }
.gl-none { padding: 22px; border: 2px dashed var(--line); border-radius: var(--r-m); color: var(--muted); }
html:not(.calm) [data-gl-list] .ticket.in { animation: gl-in 0.35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes gl-in { from { opacity: 0; transform: translateY(8px); } }

/* lab results */
.gl-coa { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--board) 80%, transparent); }
html:not(.calm) .gl-coa { animation: gl-fade 0.25s var(--ease); }
@keyframes gl-fade { from { opacity: 0; } }
.gl-coa-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 14px; padding: 26px; border-radius: var(--r-l); background: var(--card); border: 2px solid var(--ink); }
.gl-coa-card .h3 { font-size: 34px; padding-right: 48px; }
.gl-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--card); cursor: pointer; }
.gl-close svg { width: 18px; height: 18px; }
.gl-pass { font-weight: 700; }
.gl-pass::before { content: "✓ "; color: var(--brass); }

/* pickup */
.gl-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gl-times button { padding: 11px 6px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--card); font: 600 14px/1 var(--mono); cursor: pointer; color: var(--ink); }
.gl-times button:hover { border-color: var(--ink); }
.gl-times button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gl-times p { grid-column: 1 / -1; color: var(--muted); }
.gl-need { font-weight: 700; color: var(--alert); }
.gl-done { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-m); background: var(--board); color: var(--flap-ink); }
.gl-done .tag { color: var(--flap-muted); }
.gl-done b { color: var(--flap-lit); }
.gl-ref .flaps { font-size: clamp(22px, 4vw, 34px); }

/* map */
.gl-map { margin: 0; border-radius: var(--r-m); overflow: hidden; border: 2px solid var(--ink); background: var(--board); }
.gl-map svg { width: 100%; height: auto; }
.gl-map figcaption { padding: 12px 16px; background: var(--card); border-top: 2px solid var(--ink); font-size: 15px; color: var(--ink-2); }
.table tr.today th, .table tr.today td { background: var(--brass-soft); }
.table tr.today th::after { content: " · today"; font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); }