/* TempoLife support.php public-shell skin — v3 design (2026-09-18).
   The public page loads the SAME helpdesk skin as the in-app Help &
   support screen (app-feel.help.css) behind its own tl-app-feel <html>
   class. That skin reads --v3s-* / --v3k-* / --v3i-* tokens, which in
   the app live in tl-dash-v3.skin.css. This authless page must not pull
   the full app skin, so the exact token subset the shared skin uses is
   mirrored here (light / dark / black / auto-dark — values copied from
   tl-dash-v3.skin.css; the --v3k-* accents are theme-constant by
   design). Legacy --bg/--surface/--t*/--brand vars come from
   app.rest.css. E5-safe: no blur backdrops. */
:root { color-scheme: light dark; }

/* ── v3 tokens (minimal mirror of tl-dash-v3.skin.css) ───────── */
html.tl-app-feel {
  --v3s-canvas: #F2F4F8;
  --v3s-card: #FFFFFF; --v3s-card-grad: none; --v3s-card-2: #F4F6FA;
  --v3s-line: rgba(15,23,42,.07); --v3s-line-2: rgba(15,23,42,.05);
  --v3s-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.22);
  --v3s-t1: #0B1220; --v3s-t2: #3F4B5F; --v3s-t3: #64748B; --v3s-t4: #94A3B8;
  --v3s-track: rgba(15,23,42,.08);
  --v3s-pos: #059669; --v3s-neg: #E11D48;
  --v3k-bmi: #0284C7; --v3k-gold: #D97706;
  --v3i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
html.tl-app-feel[data-theme="dark"] {
  --v3s-canvas: #07090F;
  --v3s-card: #0F131D; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05);
  --v3s-line: rgba(255,255,255,.075); --v3s-line-2: rgba(255,255,255,.055);
  --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85);
  --v3s-t1: #F3F6FC; --v3s-t2: #B7C1D3; --v3s-t3: #8691A7; --v3s-t4: #5D687E;
  --v3s-track: rgba(255,255,255,.08);
  --v3s-pos: #34D399; --v3s-neg: #FB7185;
}
html.tl-app-feel[data-theme="black"] {
  --v3s-canvas: #0B0C10;
  --v3s-card: #12141A; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05);
  --v3s-line: rgba(255,255,255,.08); --v3s-line-2: rgba(255,255,255,.055);
  --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85);
  --v3s-t1: #F3F4F6; --v3s-t2: #B6BCC6; --v3s-t3: #8B93A0; --v3s-t4: #5F6673;
  --v3s-track: rgba(255,255,255,.08);
  --v3s-pos: #34D399; --v3s-neg: #FB7185;
}
@media (prefers-color-scheme: dark) {
  html.tl-app-feel:not([data-theme-manual])[data-theme="light"],
  html.tl-app-feel[data-theme="auto"] {
    --v3s-canvas: #07090F;
    --v3s-card: #0F131D; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05);
    --v3s-line: rgba(255,255,255,.075); --v3s-line-2: rgba(255,255,255,.055);
    --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85);
    --v3s-t1: #F3F6FC; --v3s-t2: #B7C1D3; --v3s-t3: #8691A7; --v3s-t4: #5D687E;
    --v3s-track: rgba(255,255,255,.08);
    --v3s-pos: #34D399; --v3s-neg: #FB7185;
  }
}

/* ── Shell ── */
html.tl-app-feel body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--v3s-canvas); color: var(--v3s-t1);
}
html.tl-app-feel .sup-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--v3s-canvas);
  border-bottom: 1px solid var(--v3s-line); position: sticky; top: 0; z-index: 20;
}
/* Edge-to-edge safe area (2026-09-19 — owner screenshot: the status-bar clock
   and battery sat on the back button and the language pills). The Android app
   opens this page in its WebView (More → Support), drawn under a transparent
   status bar where env() is 0: html.is-apk (support.php — server UA test +
   window.Capacitor fallback) takes the app shell's 28px floor until
   MainActivity's inset bridge (requested via notifyPageReady) sets
   --tl-safe-top and native-insets-ready. Same pattern as index.php's .app. */
html.tl-app-feel .sup-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
html.tl-app-feel.is-apk .sup-header { padding-top: calc(8px + max(env(safe-area-inset-top, 0px), var(--tl-safe-top, 0px), 28px)); }
html.tl-app-feel.is-apk.native-insets-ready .sup-header { padding-top: calc(8px + max(env(safe-area-inset-top, 0px), var(--tl-safe-top, 0px))); }
/* Already inside the app: "Open the app" only reloaded the app's home and
   pushed the sticky header onto a second row. The back button covers it. */
html.tl-app-feel.is-apk .sup-open { display: none; }
/* Narrow phones: the wordmark would push the language pills onto a second
   sticky row; the icon alone keeps the header one row (aria-label stays). */
@media (max-width: 380px) { html.tl-app-feel .sup-logo span { display: none; } }
/* Round v3 back button — same pattern as the in-app #sc-help.hp3 header
   back (40px circle, card-grad surface, --v3i-back mask). */
html.tl-app-feel .sup-back {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; font-size: 0; cursor: pointer; color: var(--v3s-t1);
  background: var(--v3s-card-grad), var(--v3s-card);
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
}
html.tl-app-feel .sup-back::before {
  content: ""; position: absolute; inset: 11px; background: currentColor;
  -webkit-mask: var(--v3i-back) center / contain no-repeat; mask: var(--v3i-back) center / contain no-repeat;
}
html.tl-app-feel .sup-back:active { transform: scale(.92); }
html.tl-app-feel .sup-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--v3s-t1); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
html.tl-app-feel .sup-logo .sup-logo-ico { width: 30px; height: 30px; border-radius: 9px; display: block; object-fit: cover; }
html.tl-app-feel .sup-langs { display: inline-flex; gap: 4px; margin-left: auto; }
html.tl-app-feel .sup-langs button {
  min-width: 40px; min-height: 36px; padding: 7px 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--v3s-card-grad), var(--v3s-card); color: var(--v3s-t3);
  box-shadow: 0 0 0 1px var(--v3s-line); font-size: 12px; font-weight: 700; font-family: inherit;
}
html.tl-app-feel .sup-langs button.on {
  color: var(--v3s-t1); background: var(--v3s-card-2);
  box-shadow: 0 0 0 1px var(--v3s-line-2), var(--v3s-shadow);
}
html.tl-app-feel .sup-langs button:active { transform: scale(.95); }
/* -sp3: the CTA now lives INSIDE the cover, not in the sticky header.
   Measured on live prod before the move, at 320/360/375/390 and 414px: the
   header was 115px tall and THREE rows at every one of them — back + logo +
   four language pills + this button have never fitted on a phone line, so
   ~50px of every screen was spent on a wrapped row for the whole read. On the
   cover it is a white pill on the gradient, the same shape as the in-app
   reader's .hp4-cover-cta. No color-mix here, so no @supports fallback is
   needed (the old blue shadow used one). */
html.tl-app-feel .sup-open {
  position: relative; display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: 14px; text-decoration: none; white-space: nowrap;
  background: #fff; color: #0B4A6F; border-radius: 999px; padding: 0 18px;
  font-size: 13.5px; font-weight: 750; min-height: 42px;
}
html.tl-app-feel .sup-open:active { transform: scale(.97); }
html.tl-app-feel .sup-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 18px 14px 40px; box-sizing: border-box; }
/* -sp3 (v4, 2026-09-23) — the hero becomes a COVER, the same vocabulary the
   in-app Help reader uses (eyebrow · title · blurb · meta) and the Health
   guides v4 reader before it. Class names and DOM order are unchanged; only
   .sup-hero-e and .sup-hero-m are new nodes. Single-position gradient stops
   (double-position is Chrome 72+ and invalidates the WHOLE gradient below
   that); no color-mix here, so no @supports fallback is needed. */
html.tl-app-feel .sup-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 14px; padding: 20px 20px 22px; border-radius: 28px;
  background: linear-gradient(145deg, #0EA5E9 0%, #0369A1 55%, #075985 100%);
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
}
html.tl-app-feel .sup-hero::after {
  content: ""; position: absolute; right: -58px; top: -58px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); pointer-events: none;
}
html.tl-app-feel .sup-hero-e {
  position: relative; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
html.tl-app-feel .sup-hero h1 {
  position: relative; margin: 6px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  color: #fff; text-wrap: balance;
}
html.tl-app-feel .sup-hero p {
  position: relative; margin: 9px 0 0; color: rgba(255, 255, 255, .86); font-size: 13.5px; font-weight: 500; line-height: 1.55;
}
html.tl-app-feel .sup-hero-m {
  position: relative; display: flex; flex-wrap: wrap; margin-top: 13px; font-size: 12px; font-weight: 650;
  color: rgba(255, 255, 255, .74);
}
html.tl-app-feel .sup-hero-m span + span::before { content: "\00b7"; margin: 0 7px; opacity: .7; }
html.tl-app-feel .sup-hero-m a { color: #fff; text-decoration: none; font-weight: 700; }
html.tl-app-feel .sup-hero-m a:hover { text-decoration: underline; }
html.tl-app-feel .sup-card {
  background: var(--v3s-card-grad), var(--v3s-card); border: 0; border-radius: 22px;
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
  padding: 16px 4px 16px; min-height: 320px;
}
/* The public page has ONE tab, so the segmented pill (the in-app
   #sc-help.hp3 Guide | Support pattern) only repeated the page title as a
   control that did nothing (2026-09-19). help.js still wires #help-tabs and
   boot() clicks the support tab, so it stays in the DOM, off screen. */
html.tl-app-feel .sup-card .help-tabs { display: none; }
/* 320px phones: even "Ask anything…" can outgrow the ask field — end it with
   an ellipsis instead of a hard clip. */
html.tl-app-feel .sup-card .hd-ask-input { text-overflow: ellipsis; }
html.tl-app-feel .sup-foot {
  border-top: 1px solid var(--v3s-line); background: var(--v3s-canvas);
  padding: 18px 16px; text-align: center; font-size: 12px; font-weight: 500;
  color: var(--v3s-t3); line-height: 2.1;
}
html.tl-app-feel .sup-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
html.tl-app-feel.is-apk .sup-foot { padding-bottom: calc(18px + max(env(safe-area-inset-bottom, 0px), var(--tl-safe-bottom, 0px))); }
html.tl-app-feel .sup-foot a { color: var(--v3k-bmi); text-decoration: none; font-weight: 650; }
html.tl-app-feel .sup-foot a:hover { text-decoration: underline; }
html.tl-app-feel .sup-foot .sup-legal { font-size: 12.5px; font-weight: 600; color: var(--v3s-t2); }
/* Public page = guest UX: the ticket list + notification feed need an account. */
#hd-my-tickets, #hd-feed { display: none !important; }
/* Touch targets on the public page's own controls. */
@media (pointer: coarse) { html.tl-app-feel .sup-langs button { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  html.tl-app-feel .sup-back:active, html.tl-app-feel .sup-open:active,
  html.tl-app-feel .sup-langs button:active { transform: none; }
}