/* EZTAX entry gate: copied 1:1 from the MBZ audience app (public/styles.css, v7q gate block), title "EzTax".
   Only difference: the code is checked by the server (POST /api/auth/login), see gate.js. */
/* =====================================================================
   v7q (Michael, 8.10.2026): entry gate = approved login sketch, variant B
   (phone: wave top edge on the turquoise panel; desktop: side-by-side split, curved join).
   Logo centred (phone, and within the artwork side on desktop). Everything is namespaced
   under #gate / .gt-* so it can't touch the app and the app's styles can't touch it.
   ===================================================================== */
html.gate-on #app { visibility: hidden; }          /* app still lays out underneath, but is hidden from eyes, focus and AT */
html.gate-on, html.gate-on body { overflow: hidden; }
html:not(.gate-on) #gate { display: none; }
#gate { --gt-tq: #1ED6D0; --gt-ink: #0b0b0d; --gt-red: #b3001b;
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--gt-ink); color: var(--gt-ink); color-scheme: only light; direction: rtl; text-align: right;
  font-family: 'Heebo', -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
#gate *, #gate *::before, #gate *::after { box-sizing: border-box; }
html.gate-leaving #gate { opacity: 0; transition: opacity .2s ease; }

#gate .gt-stage { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 58svh 1fr; }
#gate .gt-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 50% 0%, #1a1c22 0%, var(--gt-ink) 60%); }
#gate .gt-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
#gate .gt-brand { position: absolute; inset-inline: 0; top: max(56px, env(safe-area-inset-top)); display: flex; justify-content: center; }
#gate .gt-brand::before { content: ""; position: absolute; width: 340px; height: 220px; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(11,11,13,.92), rgba(11,11,13,0)); z-index: -1; }
#gate .gt-logo { display: block; width: 168px; height: auto; transform: translateX(2.9%); } /* optical centre: MBZ + tagline (dot hangs right) */
#gate .gt-logo-d { display: none; }

#gate .gt-panel { position: relative; z-index: 2; background: var(--gt-tq); padding: 36px 24px calc(32px + env(safe-area-inset-bottom)); }
#gate .gt-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 44px; background: var(--gt-tq);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V30C70 6 150 2 210 16S330 40 390 10V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V30C70 6 150 2 210 16S330 40 390 10V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
#gate .gt-panel-in { max-width: 420px; margin: 0 auto; }
#gate h1 { margin: 0 0 28px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--gt-ink); }
#gate form { margin: 0; }
#gate label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 8px; color: var(--gt-ink); }
#gate .gt-field { position: relative; }
#gate input { display: block; width: 100%; height: 56px; margin: 0; border: 0; border-radius: 18px; background: #fff; color: var(--gt-ink);
  font: 500 20px/1 'Heebo', sans-serif; letter-spacing: .32em; padding: 0 18px 0 56px; text-align: right; -webkit-appearance: none; appearance: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(11,11,13,.08); transition: box-shadow .15s; }
#gate input:focus { outline: none; box-shadow: 0 0 0 3px var(--gt-ink); }
#gate input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--gt-red); }
#gate input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--gt-red); }
#gate .gt-peek { position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent;
  display: grid; place-items: center; color: #5b6168; cursor: pointer; }
#gate .gt-peek:hover { color: var(--gt-ink); background: rgba(11,11,13,.05); }
#gate .gt-peek[aria-pressed="true"] { color: var(--gt-ink); }
#gate .gt-peek:focus-visible { outline: 3px solid var(--gt-ink); outline-offset: -3px; border-radius: 10px; }
#gate .gt-go { margin: 14px 0 0; width: 100%; height: 56px; border: 0; border-radius: 18px; background: var(--gt-ink); color: #fff;
  font: 600 17px/1 'Heebo', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  transition: background .15s, transform .1s; }
#gate .gt-go:hover { background: #24262c; }
#gate .gt-go:active { transform: scale(.985); }
#gate .gt-go:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 18px; }
#gate .gt-err { min-height: 22px; margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--gt-ink); }

@media (prefers-reduced-motion: no-preference) {
  #gate .gt-drift-a { animation: gt-drift 22s ease-in-out infinite alternate; }
  #gate .gt-drift-b { animation: gt-drift 28s ease-in-out infinite alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) { html.gate-leaving #gate { transition: none; } #gate input, #gate .gt-go { transition: none; } }
@keyframes gt-drift { from { transform: translate3d(-24px, 6px, 0); } to { transform: translate3d(24px, -6px, 0); } }

/* desktop: artwork full height on the right (RTL start), turquoise form panel on the left, curved join */
@media (min-width: 900px) {
  #gate .gt-stage { grid-template-rows: none; grid-template-columns: 1fr minmax(440px, 40%); min-height: 100vh; }
  #gate .gt-hero { min-height: 100vh; }
  #gate .gt-brand { top: 64px; justify-content: center; }
  #gate .gt-brand::before { width: 520px; height: 320px; }
  #gate .gt-logo-m { display: none; }
  #gate .gt-logo-d { display: block; width: 224px; }   /* desktop logo: "Growth Strategy" line drawn 1.5x larger */
  #gate .gt-panel { order: 2; display: flex; align-items: center; padding: 0 72px; }
  #gate .gt-panel::before { right: auto; left: calc(100% - 1px); top: 0; bottom: 0; width: 56px; height: auto;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 900' preserveAspectRatio='none'%3E%3Cpath d='M0 0H26C52 140 54 300 34 450S2 760 38 900H0Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 900' preserveAspectRatio='none'%3E%3Cpath d='M0 0H26C52 140 54 300 34 450S2 760 38 900H0Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  #gate .gt-panel-in { width: 100%; max-width: 400px; margin: 0; }
  #gate h1 { font-size: 34px; margin: 0 0 32px; }
}

/* v7q: logout item at the bottom of the hamburger menu */
.dl.dl-logout { width: 100%; margin: 12px 0 0; background: none; border: 0; border-inline-start: 3px solid transparent; border-top: 1px solid var(--ink-3);
  font: inherit; font-size: 15px; font-weight: 500; color: #b3b7bf; text-align: start; cursor: pointer; justify-content: flex-start; gap: 10px; }
.dl.dl-logout:hover { color: #fff; }
/* legal links on the gate (public pages, reachable before login) */
#gate .gt-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 18px 0 0; font-size: 14px; color: var(--gt-ink); }
#gate .gt-legal a { color: var(--gt-ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
/* keep the legal links clear of the fixed accessibility button (bottom-left = inline-end in RTL, 52px + 16px) */
#gate .gt-legal { padding-inline-end: 68px; }
/* the drawer is light: the logout item needs dark text (was #b3b7bf on #f5f5f7, ~1.9:1) */
.dl.dl-logout { color: #3f444b; border-top-color: #e5e5ea; }
.dl.dl-logout:hover { color: #0b0b0d; background: #eceef0; }
/* after an automatic logout (idle / 12 h): a short reason above the field (gate.js) */
#gate .gt-note { margin: -12px 0 20px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.72); color: var(--gt-ink); font-size: 15px; font-weight: 600; line-height: 1.45; }
#gate .gt-note:not(.on) { margin: 0; padding: 0; background: none; } /* stays in the tree (empty) so role=status announces it */
/* phone/tablet: room under the legal links for the accessibility button (bottom-right, 52px + 16px), so nothing ends up under it */
@media (max-width: 899px) { #gate .gt-panel { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }