/* ============================================================================
   13 · GIVEAWAYS & ATMOSPHERE

   The giveaway page layout, the living background atmosphere, 3D tilt +
   spotlight, the giveaway logs drawer and touch optimisation.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* =========================================================
   GIVEAWAY PAGE — reference layout (stats / two-column /
   inline create panel + accordions / live embed preview /
   view-all card grid). Reuses the global crimson/pistachio tokens.
========================================================= */
/* Column count comes from statsRow() (--ga-stat-cols), which balances the rows for
   the number of stats given. The 3 fallback is the old hardcoded value, kept so any
   .ga-stats written by hand without the variable renders exactly as it used to. */
.ga-stats { display:grid; grid-template-columns:repeat(var(--ga-stat-cols,3),1fr); gap:1rem; margin-bottom:1.5rem; }
/* Keep stat cards dense on small screens: 2-up on phones/tablets (not a tall
   single stack), only dropping to 1-up on the narrowest devices. */
@media(max-width:680px){
  .ga-stats{ grid-template-columns:repeat(2,1fr); gap:0.75rem; }
  .ga-stat{ padding:1rem 1rem 0.9rem; border-radius:14px; }
  .ga-stat-top{ margin-bottom:0.6rem; }
  .ga-stat-icon{ width:36px; height:36px; border-radius:11px; font-size:1.05rem; }
  .ga-stat-value{ font-size:1.6rem; }
  .ga-stat-label{ font-size:0.78rem; }
}
@media(max-width:340px){ .ga-stats{ grid-template-columns:1fr; } }
.ga-stat {
  position:relative; background:var(--glass); border:1px solid var(--border);
  border-radius:18px; padding:1.25rem 1.25rem 1.1rem; overflow:hidden;
  backdrop-filter:blur(14px);
  transition:box-shadow .35s var(--ease), border-color .35s, transform .15s var(--ease);
}
.ga-stat::before { content:""; position:absolute; top:0; left:20px; right:20px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ga-accent,var(--crimson)),transparent); opacity:.85; }
.ga-stat:hover { transform:translateY(-3px); border-color:var(--ga-accent,var(--border-strong));
  box-shadow:0 22px 50px -18px rgba(0,0,0,.55); }
.ga-stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.9rem; }
.ga-stat-icon { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; background:var(--ga-accent-bg,rgba(220,38,38,.14));
  color:var(--ga-accent,var(--crimson)); box-shadow:inset 0 0 0 1px var(--ga-accent-bd,rgba(220,38,38,.3)); }
.ga-stat-value { font-family:var(--font-display); font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.ga-stat-label { color:var(--text-secondary); font-size:.85rem; margin-top:.45rem; font-weight:600; }

.ga-layout { display:grid; grid-template-columns:1.7fr 1fr; gap:1.5rem; align-items:start; }
@media(max-width:1100px){ .ga-layout{ grid-template-columns:1fr; } }
.ga-col-right { display:flex; flex-direction:column; gap:1.25rem; }
/* Space stacked panels in the left column (e.g. Logging page). No-op when the
   left column has a single panel or leads with a .ga-stats grid (giveaways). */
.ga-col-left > .ga-panel + .ga-panel { margin-top:1.25rem; }

.ga-panel { position:relative; background:var(--glass); border:1px solid var(--border); border-radius:20px;
  padding:1.5rem; backdrop-filter:blur(14px); }
.ga-panel::after { content:""; position:absolute; top:0; left:1px; right:1px; height:1px; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); pointer-events:none; }
.ga-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.ga-panel-title { font-family:var(--font-display); font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:.55rem; }
.ga-panel-title ion-icon { color:var(--crimson-glow); font-size:1.2rem; }
.ga-panel-sub { color:var(--text-secondary); font-size:.85rem; margin-top:.35rem; }

.ga-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px){ .ga-form-grid{ grid-template-columns:1fr; } }
.ga-form-grid .ga-full { grid-column:1/-1; }

/* Schedule-start compound field: the mode <select> and the date/delay control sit
   on one line (mode fixed-width, control flexible), with the live hint underneath.
   Only the active control's wrapper is visible — the other is display:none and drops
   out of the grid, so the visible one always fills the second column. */
.ga-schedule { display:flex; flex-direction:column; gap:0.6rem; }
.ga-schedule-row { display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:0.6rem; align-items:center; }
.ga-schedule-row > * { min-width:0; }
.ga-sched-ctl > .input, .ga-sched-ctl > .select { width:100%; margin:0; }
@media(max-width:560px){ .ga-schedule-row { grid-template-columns:1fr; } }
.ga-schedule-hint { display:flex; align-items:center; gap:0.4rem; min-height:1.15em;
  font-size:0.75rem; line-height:1.45; color:var(--text-muted); }

/* "Ping when it starts" sub-control inside the schedule + edit blocks. */
.ga-schedule-ping { display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:0.6rem 0.6rem;
  align-items:center; margin-top:0.2rem; }
.ga-schedule-ping > .ga-sched-ctl { grid-column:2; }
.ga-schedule-ping-label { font-size:0.78rem; font-weight:600; color:var(--text-secondary); }
.ga-schedule-ping-hint { grid-column:1 / -1; font-size:0.72rem; line-height:1.4; color:var(--text-muted); }
@media(max-width:560px){ .ga-schedule-ping { grid-template-columns:1fr; }
  .ga-schedule-ping > .ga-sched-ctl { grid-column:1; } }

/* Ghost-ping message live preview — a compact Discord message mock. */
.ga-gp-preview-label { font-size:0.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:700; margin:0.6rem 0 0.3rem; }
.ga-gp-preview { display:flex; align-items:flex-start; gap:0.55rem; padding:0.6rem 0.7rem;
  background:#0F1623; border:1px solid var(--border); border-radius:10px;
  font-size:0.8rem; line-height:1.5; color:var(--text-secondary); word-break:break-word; }
.ga-gp-preview::before { content:""; flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#5865F2,#7d3bd6); margin-top:1px; }
.ga-gp-preview .ga-gp-text strong { color:#fff; font-weight:700; }

/* Theme the native date/time picker glyph so it reads on the dark glass fields. */
input[type="datetime-local"], input[type="date"] { color-scheme:dark; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  filter:invert(0.7); opacity:0.6; cursor:pointer; transition:opacity 0.15s var(--ease); }
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; }

/* Accordions */
.ga-accordion { position:relative; border:1px solid var(--border); border-radius:16px; margin-top:1.1rem; overflow:hidden;
  background:rgba(255,255,255,.016); transition:border-color .2s, box-shadow .2s; }
/* When fully open (JS sets overflow:visible) keep the rounded top corners clipping
   the header while still letting nested dropdown menus overflow the bottom. */
.ga-accordion.open { overflow:visible; }
.ga-accordion:hover { border-color:var(--border-strong); }
.ga-accordion.open { box-shadow:0 10px 28px -10px rgba(0,0,0,.4); }
.ga-acc-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem;
  cursor:pointer; user-select:none; transition:background .2s; }
.ga-acc-head:hover { background:rgba(255,255,255,.025); }
.ga-acc-head-left { display:flex; align-items:center; gap:.8rem; min-width:0; }
.ga-acc-badge { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(220,38,38,.12); color:var(--crimson-glow); flex-shrink:0; transition:transform .3s var(--spring); }
.ga-acc-badge ion-icon { font-size:1.05rem; }
.ga-acc-head:hover .ga-acc-badge { transform:scale(1.08) rotate(-5deg); }
.ga-acc-title { font-weight:700; font-size:.92rem; }
.ga-acc-desc { font-size:.76rem; color:var(--text-muted); margin-top:2px; }
.ga-acc-chevron { color:var(--text-muted); transition:transform .3s var(--ease); flex-shrink:0; font-size:1.1rem; display:flex; }
.ga-accordion.open .ga-acc-chevron { transform:rotate(180deg); }
.ga-acc-body { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.ga-acc-body-inner { padding:1.25rem 1.15rem; border-top:1px solid var(--border); }

.ga-panel-footer { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--border); flex-wrap:wrap; }

/* Discord-style live embed preview */
.ga-embed { background:#0F1623; border-radius:14px; border-left:4px solid var(--ga-embed-accent,var(--crimson));
  padding:1rem 1rem 1rem .9rem; position:relative; overflow:hidden; box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
.ga-embed-title { font-family:var(--font-display); font-weight:800; font-size:1.04rem; color:#fff; word-break:break-word; }
.ga-embed-desc { font-size:.8rem; color:var(--text-secondary); margin-top:.5rem; line-height:1.55; word-break:break-word; }
.ga-embed-desc strong { color:#fff; font-weight:700; }
.gap-mention { color:#C9CDFB; background:rgba(88,101,242,.22); border-radius:4px; padding:0 3px; font-weight:600; white-space:nowrap; }
.gap-mention.gap-role { color:#A8C7FA; background:rgba(59,130,246,.18); }
.ga-embed-extra { margin-top:.85rem; }
.ga-embed-flabel { font-size:.7rem; letter-spacing:.01em; color:#fff; font-weight:700; }
.ga-embed-extra-val { font-size:.78rem; color:var(--text-secondary); margin-top:3px; line-height:1.5; }
.ga-embed-extra-val strong { color:#fff; }
.ga-embed-foot { margin-top:.85rem; font-size:.68rem; color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:.4rem; }
.ga-embed-foot-icon { width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.ga-embed-cta { margin-top:.9rem; display:inline-flex; align-items:center; gap:.45rem; background:rgba(220,38,38,.16);
  border:1px solid rgba(220,38,38,.38); color:#FCE4E4; padding:.5rem .9rem; border-radius:10px; font-size:.78rem; font-weight:700; }
.ga-embed-cta[hidden], .ga-embed-extra[hidden] { display:none; }
/* Embed builder preview extras (author / thumbnail / image / custom fields) */
.ga-embed-author { display:flex; align-items:center; gap:.45rem; margin-bottom:.5rem; font-size:.78rem; font-weight:700; color:#fff; word-break:break-word; }
.ga-embed-author[hidden] { display:none; }
.ga-embed-author-icon { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.ga-embed-author-icon[hidden] { display:none; }
.ga-embed-main { display:flex; gap:.85rem; align-items:flex-start; }
.ga-embed-body { flex:1; min-width:0; }
.ga-embed-thumb { width:72px; height:72px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.ga-embed-thumb[hidden] { display:none; }
.ga-embed-image { display:block; width:100%; max-height:200px; object-fit:cover; border-radius:8px; margin-top:.75rem; }
.ga-embed-image[hidden] { display:none; }
.ga-embed-fields { display:flex; flex-direction:column; gap:.6rem; margin-top:.85rem; }
.ga-embed-field .ga-embed-flabel { margin-bottom:2px; }
/* https-URL input paired with an upload button */
.ga-img-input { display:flex; gap:.4rem; align-items:center; }

/* Summary rows (right-column defaults) */
.ga-summary-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.75rem .9rem;
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:13px; cursor:pointer; width:100%; text-align:left;
  transition:border-color .2s, background .2s, transform .2s var(--spring); }
.ga-summary-row:hover { border-color:var(--crimson); background:rgba(220,38,38,.06); transform:translateX(3px); }
.ga-summary-row strong { font-size:.82rem; font-weight:700; display:block; }
.ga-summary-row span { font-size:.72rem; color:var(--text-muted); }
.ga-summary-row ion-icon { color:var(--text-muted); flex-shrink:0; }

/* View-all giveaway cards */
.gw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); gap:1rem; }
.gw-card { background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:1.1rem; display:flex; flex-direction:column; gap:.8rem;
  position:relative; overflow:hidden; transition:border-color .25s, box-shadow .3s, transform .15s; }
.gw-card::after { content:""; position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .3s;
  background:linear-gradient(90deg,transparent,var(--gw-accent,var(--crimson)),transparent); }
.gw-card:hover { transform:translateY(-2px); border-color:var(--gw-accent,rgba(220,38,38,.5)); box-shadow:0 24px 56px -16px rgba(0,0,0,.55); }
.gw-card:hover::after { opacity:1; }
.gw-card[data-status=active]{ --gw-accent:rgba(147,197,114,.55); }
.gw-card[data-status=scheduled]{ --gw-accent:rgba(220,38,38,.55); }
.gw-card[data-status=paused]{ --gw-accent:rgba(245,158,11,.55); }
.gw-card[data-status=ended]{ --gw-accent:rgba(148,163,184,.4); }
.gw-card[data-status=cancelled]{ --gw-accent:rgba(153,27,27,.5); }
.gw-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.gw-status { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.28rem .65rem;
  border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; }
.gw-status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 6px 1px currentColor; }
.gw-status.s-active { background:rgba(147,197,114,.15); color:var(--pistachio-light); }
.gw-status.s-scheduled { background:rgba(220,38,38,.15); color:var(--crimson-glow); }
.gw-status.s-paused { background:rgba(245,158,11,.16); color:#F59E0B; }
.gw-status.s-ended { background:rgba(148,163,184,.18); color:var(--text-secondary); }
.gw-status.s-cancelled { background:rgba(153,27,27,.18); color:#FCA5A5; }
.gw-prize { display:flex; align-items:center; gap:.7rem; }
.gw-thumb { width:44px; height:44px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:linear-gradient(135deg,rgba(220,38,38,.22),rgba(147,197,114,.18)); border:1px solid rgba(255,255,255,.07); }
.gw-prize-name { font-weight:700; font-size:.95rem; line-height:1.3; word-break:break-word; }
.gw-prize-sub { font-size:.73rem; color:var(--text-muted); margin-top:2px; }
.gw-meta { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; padding:.7rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.gw-meta-label { font-size:.61rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.gw-meta-value { font-size:.82rem; font-weight:700; margin-top:1px; font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gw-card-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.gw-filter-pills { display:flex; gap:.45rem; flex-wrap:wrap; }
.gw-fpill { padding:.45rem .9rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.025);
  color:var(--text-secondary); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .2s var(--ease); }
.gw-fpill:hover { border-color:var(--border-strong); color:#fff; }
.gw-fpill.active { background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); color:#fff; border-color:transparent; box-shadow:0 4px 16px -3px rgba(220,38,38,.55); }

/* User pill used in the giveaway detail-view modal (host / winners / donors / participants). */
.ga-dv-chip { display:inline-flex; align-items:center; gap:.4rem; max-width:100%; padding:.2rem .6rem .2rem .25rem;
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:999px; font-size:.8125rem; }

/* =========================================================
   LIVING BACKGROUND ATMOSPHERE — cursor-reactive dual aurora,
   floating particles and a masked dot-grid (from the reference).
   Applied globally inside .app-bg-glow.
========================================================= */
.bg-dotgrid {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
}
.aurora-layer {
  position:absolute; inset:-12%;
  transform:translate(var(--auroraX,0px), var(--auroraY,0px));
  transition:transform .7s var(--ease);
}
.particle-field { position:absolute; inset:0; overflow:hidden; }
.particle { position:absolute; bottom:-12px; border-radius:50%; opacity:0; animation:floatUp linear infinite; will-change:transform, opacity; }
@keyframes floatUp {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  8%   { opacity:.5; }
  92%  { opacity:.35; }
  100% { transform:translateY(-110vh) translateX(var(--drift,30px)); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .particle { display:none; }
  .aurora-layer { transition:none; }
}

/* =========================================================
   3D TILT + SPOTLIGHT (interactive hover, JS-driven)
========================================================= */
.tilt-spot { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; border-radius:inherit; z-index:0; }
.is-tilting .tilt-spot { opacity:1; }
.ga-stat, .ga-panel, .gw-card { transform-style:preserve-3d; }
.ga-stat > *, .ga-panel > *, .gw-card > * { position:relative; z-index:1; }
/* transform-style:preserve-3d makes each panel its own stacking context, so a custom-select
   dropdown (z-index:70) is trapped inside its panel and hides behind the NEXT stacked panel.
   Lift the whole panel while its dropdown is open so the menu overlays neighbours cleanly. */
.ga-panel:has(.cs-open) { z-index:20; }

/* =========================================================
   GIVEAWAY LOGS DRAWER (real data from /giveaways/logs)
========================================================= */
/* Offset below the 56px global topbar so the drawer head isn't clipped — the
   page (and this drawer markup) renders inside .app-main, which is trapped under
   the topbar by `.app-main > * { z-index:1 }`, so a high z-index alone can't lift
   it above the topbar. Matches the guild sidebar, which also sits below the topbar. */
.ga-drawer-overlay { position:fixed; top:56px; right:0; bottom:0; left:0; background:rgba(10,10,15,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:1400; }
.ga-drawer-overlay.open { opacity:1; pointer-events:auto; }
.ga-logs-drawer { position:fixed; top:56px; right:0; bottom:0; width:560px; max-width:94vw; background:var(--bg-card);
  border-left:1px solid var(--border); z-index:1401; transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; box-shadow:-28px 0 80px rgba(0,0,0,.6); }
.ga-logs-drawer.open { transform:translateX(0); }
.ga-logs-head { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:.9rem; }
.ga-logs-title { font-family:var(--font-display); font-size:1.1rem; font-weight:800; display:flex; align-items:center; gap:.55rem; }
.ga-logs-title ion-icon { color:var(--crimson-glow); }
.ga-logs-sub { font-size:.78rem; color:var(--text-muted); margin-top:.35rem; }
.ga-logs-tabs { display:flex; gap:.25rem; padding:.85rem 1.5rem 0; overflow-x:auto; border-bottom:1px solid var(--border); scrollbar-width:none; }
.ga-logs-tabs::-webkit-scrollbar { display:none; }
.ga-logs-tab { padding:.6rem .8rem; font-size:.77rem; font-weight:700; color:var(--text-muted); background:none; border:none; cursor:pointer;
  white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s; }
.ga-logs-tab:hover { color:var(--text-secondary); }
.ga-logs-tab.active { color:var(--crimson-glow); border-bottom-color:var(--crimson-glow); }
.ga-logs-toolbar { display:flex; gap:.6rem; padding:1rem 1.5rem; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.ga-logs-toolbar .input { flex:1; min-width:160px; }
.ga-logs-body { flex:1; overflow-y:auto; padding:1.1rem 1.5rem 1.5rem; }
.ga-log-row { padding:.85rem .9rem; border-radius:14px; border:1px solid var(--border); margin-bottom:.55rem;
  transition:background .2s, border-color .2s, transform .2s; }
.ga-log-row.has-detail { cursor:pointer; }
.ga-log-row.has-detail:hover { background:rgba(255,255,255,.025); border-color:var(--border-strong); transform:translateX(3px); }
.ga-log-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.ga-log-action { display:flex; align-items:center; gap:.55rem; font-size:.84rem; font-weight:700; }
.ga-log-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px 1px currentColor; }
.ga-log-time { font-size:.71rem; color:var(--text-muted); white-space:nowrap; flex-shrink:0; font-family:var(--font-mono); }
.ga-log-summary { margin-top:.45rem; font-size:.82rem; color:var(--text-secondary); line-height:1.45; }
.ga-log-meta { display:flex; gap:1rem; margin-top:.55rem; font-size:.74rem; color:var(--text-muted); flex-wrap:wrap; align-items:center; }
.ga-log-meta span { display:flex; align-items:center; gap:.3rem; }
.ga-log-meta ion-icon { font-size:.9rem; opacity:.8; }
.ga-log-expand { margin-left:auto; color:var(--text-muted); transition:color .2s; }
.ga-log-row.has-detail:hover .ga-log-expand { color:var(--text-secondary); }
.ga-log-expand ion-icon { transition:transform .3s var(--ease); }
.ga-log-row.expanded .ga-log-expand ion-icon { transform:rotate(180deg); }
.ga-log-detail { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.ga-log-row.expanded .ga-log-detail { max-height:260px; overflow:auto; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--border); }
.ga-log-detail pre { margin:0; font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); white-space:pre-wrap; word-break:break-word; }
.ga-log-empty { text-align:center; padding:3rem 1rem; color:var(--text-muted); font-size:.85rem; }

/* View-all modal search */
.gw-modal-toolbar { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem 0; flex-wrap:wrap; }
.gw-modal-toolbar .input { flex:1; min-width:180px; }

/* ════════════════════════════════════════════════════════════════════════════
   TOUCH OPTIMIZATION
   Scoped to coarse pointers (phones + tablets) so desktop mouse density is
   never touched. Three goals: (1) stop iOS Safari's zoom-on-focus jump for
   sub-16px inputs, (2) give buttons/links finger-friendly tap targets, and
   (3) remove the grey tap-highlight flash. Appended last so source order wins
   over equal-specificity base rules (e.g. the .modal input font-size).
   ════════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* (1) Pin every text-entry control to 16px — the exact threshold below which
     iOS Safari auto-zooms on focus. Modal-scoped selectors are repeated so they
     beat `.modal input[type=...]` (same specificity, later in source). */
  .input, .select, .textarea,
  input[type="text"], input[type="number"], input[type="url"],
  input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="date"], select, textarea,
  .modal input[type="text"], .modal input[type="number"], .modal input[type="url"],
  .modal input[type="email"], .modal textarea, .modal select {
    font-size: 16px;
  }

  /* (2) Comfortable tap targets. min-height pads the inline-flex buttons
     vertically without disturbing their centered content; 40/36/32 keeps dense
     toolbars usable while staying tappable. */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-xs { min-height: 32px; }
  .btn-icon, .topbar-nav-toggle, .mobile-nav-toggle,
  .topbar-user-btn { min-height: 40px; min-width: 40px; }

  /* Taller rows for nav + menu items so they're easy to thumb */
  .sidebar-nav-link, .topbar-menu-item, .topbar-nav-link,
  .ga-summary-row, .search-result { min-height: 42px; }

  /* (3) No grey tap-highlight flash on interactive elements */
  a, button, .btn, .toggle-btn, .sidebar-nav-link, .topbar-nav-link,
  [role="button"], .ga-summary-row, .gw-fpill, .gw-card, .tab,
  .filter-pill, .ga-acc-head, label { -webkit-tap-highlight-color: transparent; }

  /* Momentum scrolling for the horizontal scroll containers */
  .table-wrap, .tab-bar, .filter-pills, .ga-logs-tabs,
  .gw-modal-toolbar { -webkit-overflow-scrolling: touch; }
}