/* ═══ Support tabs ═════════════════════════════════════════════════════════
   The ticket form used to be the fourth section on this page, under the whole
   FAQ and an empty "your tickets" block. Someone who came to ask a question
   scrolled past everything before reaching the thing they came for.

   Which tab opens is decided in PHP, so the first paint is already correct and
   a link can point at one. */
.tabstrip{ background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:var(--nav-h,69px); z-index:20;   /* 69 = trap strip + nav */
  /* Full width like the bands above and below it, so it reads as part of the
     page frame rather than a control floating inside the content column. */
  margin:0; }
.tabstrip .wrap.in{ padding-top:0; padding-bottom:0; }
.tabstrip .in{ display:flex; align-items:stretch; gap:2px; }
.tb{ appearance:none; background:none; border:0; border-bottom:3px solid transparent;
  cursor:pointer; font:600 15px var(--body); color:var(--mut); padding:16px 18px;
  display:flex; align-items:center; gap:9px; white-space:nowrap; }
.tb:hover{ color:var(--ink); background:var(--paper); }
.tb.on{ color:var(--green); border-bottom-color:var(--green); }
.tb svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.tb .n{ font:500 12px var(--mono); background:var(--paper); border-radius:20px;
  padding:2px 8px; color:var(--mut); }
.tb.on .n{ background:rgba(14,91,65,.1); color:var(--green); }
/* The action keeps its accent even when the tab is not the open one. */
.tb.act{ color:var(--green); }
.tb .n.hot{ background:var(--orange); color:#fff; }
.tstrip-cta{ margin-left:auto; display:flex; align-items:center; }
.tstrip-cta .btn{ margin:9px 0; padding:9px 17px; font-size:14px; }

/* Panes. display:none rather than moving anything, so an in-page anchor and the
   browser's find-in-page still behave for whatever is open. */
.sup .pane{ display:none; }
.sup .pane.on{ display:block; }

.deadend{ margin:26px 0 0; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:22px 24px; display:flex; gap:20px; align-items:center;
  flex-wrap:wrap; }
.deadend h3{ margin:0 0 4px; font:700 20px/1.1 var(--disp); text-transform:uppercase; }
.deadend p{ margin:0; color:var(--mut); font-size:14.5px; }
.deadend .go{ margin-left:auto; }

@media (max-width:860px){
  .tabstrip .in{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tstrip-cta{ display:none; }          /* the tab itself is the button here */
  .tb{ padding:14px 13px; font-size:14px; }
  .deadend .go{ margin-left:0; width:100%; }
  .deadend .go .btn{ width:100%; }
}

/* ── The signed-out gate on the ticket form ───────────────────────────────
   The form is still rendered and still readable behind this — the point is to
   stop someone writing a careful description and only THEN being asked to
   authenticate, not to hide what they are being asked for. */
.tsplit{ position:relative; }
.tcard.is-gated{ filter:blur(2.5px) saturate(.6); opacity:.5; pointer-events:none;
  user-select:none; }

.tgate{ position:absolute; inset:0; z-index:5; display:flex; align-items:flex-start;
  justify-content:center; padding:34px 18px; }
.tgate::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(247,246,242,.55), rgba(247,246,242,.9) 55%); }
.tgate-in{ position:relative; max-width:430px; text-align:center; background:var(--white);
  border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px;
  box-shadow:0 2px 4px rgba(23,32,27,.06), 0 18px 40px -14px rgba(23,32,27,.22); }
.tgate-in h3{ margin:0 0 8px; font:700 22px/1.1 var(--disp); text-transform:uppercase; }
.tgate-in p{ margin:0 0 18px; color:var(--mut); font-size:14.5px; }
.tgate-in .btn{ width:100%; }

/* Empty / signed-out state for My tickets. */
.tk-empty{ background:var(--white); border:1px dashed var(--line); border-radius:16px;
  padding:40px 26px; text-align:center; max-width:560px; margin:0 auto; }
.tk-empty h3{ margin:0 0 8px; font:700 24px/1.1 var(--disp); text-transform:uppercase; }
.tk-empty p{ margin:0 0 20px; color:var(--mut); }
.tk-empty-act{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

@media (max-width:860px){
  .tgate{ padding:18px 10px; }
  .tk-empty{ padding:30px 18px; }
  .tk-empty-act .btn{ width:100%; }
}