/* Customer portal — styles shared by every portal funnel page, for every
   workspace. Every colour and font is a custom property: the defaults below are
   a neutral look derived from four core colours; the workspace's brand.theme
   (from /api/portal/brand, written by portal.js as a <style> inside the mount)
   overrides any of them. Fonts here are self-hosted (the funnel CSP allows
   font-src 'self'); they load only when a theme names them. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/open-sans.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/merriweather.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/montserrat.woff2) format('woff2'); }
@font-face { font-family: 'Saira Stencil One'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/saira-stencil-one.woff2) format('woff2'); }

#tgp-portal, .tgpp {
  /* core (MULTITENANT-CONTRACT brand.theme) */
  --tgpp-accent: #334155; --tgpp-ink: #1E2328; --tgpp-bg: #F8F8F6; --tgpp-surface: #FFFFFF;
  --tgpp-body-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tgpp-heading-font: var(--tgpp-body-font); --tgpp-display-font: var(--tgpp-heading-font); --tgpp-rank-font: var(--tgpp-heading-font);
  /* derived: a theme may set any of these too */
  --tgpp-on-accent: #fff; --tgpp-logo-filter: none;
  --tgpp-bg-alt: color-mix(in srgb, var(--tgpp-bg) 94%, var(--tgpp-ink));
  --tgpp-surface-alt: color-mix(in srgb, var(--tgpp-surface) 93%, var(--tgpp-ink));
  --tgpp-text-2: color-mix(in srgb, var(--tgpp-ink) 85%, var(--tgpp-surface));
  --tgpp-muted: color-mix(in srgb, var(--tgpp-ink) 70%, var(--tgpp-surface));
  --tgpp-subtle: color-mix(in srgb, var(--tgpp-ink) 52%, var(--tgpp-surface));
  --tgpp-faint: color-mix(in srgb, var(--tgpp-ink) 38%, var(--tgpp-surface));
  --tgpp-strike: color-mix(in srgb, var(--tgpp-ink) 42%, var(--tgpp-surface));
  --tgpp-line: color-mix(in srgb, var(--tgpp-ink) 12%, var(--tgpp-surface));
  --tgpp-line-soft: color-mix(in srgb, var(--tgpp-ink) 14%, var(--tgpp-bg));
  --tgpp-line-strong: color-mix(in srgb, var(--tgpp-ink) 24%, var(--tgpp-surface));
  --tgpp-divider: color-mix(in srgb, var(--tgpp-ink) 7%, var(--tgpp-surface));
  --tgpp-accent-soft: color-mix(in srgb, var(--tgpp-accent) 10%, var(--tgpp-surface));
  --tgpp-accent-tint: color-mix(in srgb, var(--tgpp-accent) 6%, var(--tgpp-surface));
  --tgpp-accent-line: color-mix(in srgb, var(--tgpp-accent) 18%, var(--tgpp-surface));
  --tgpp-accent-border: color-mix(in srgb, var(--tgpp-accent) 22%, var(--tgpp-surface));
  --tgpp-hl: color-mix(in srgb, var(--tgpp-accent) 62%, #fff);
  --tgpp-hl-light: color-mix(in srgb, var(--tgpp-hl) 72%, #fff);
  --tgpp-hl-pale: color-mix(in srgb, var(--tgpp-hl) 48%, #fff);
  --tgpp-hl-glow: color-mix(in srgb, var(--tgpp-hl) 25%, #fff);
  --tgpp-hl-dark: color-mix(in srgb, var(--tgpp-hl) 55%, var(--tgpp-ink));
  --tgpp-hl-deep: color-mix(in srgb, var(--tgpp-hl) 80%, var(--tgpp-ink));
  --tgpp-hl-shade: color-mix(in srgb, var(--tgpp-hl) 45%, var(--tgpp-ink));
  --tgpp-hl-bg: color-mix(in srgb, var(--tgpp-hl) 18%, var(--tgpp-surface));
  --tgpp-hl-ink: color-mix(in srgb, var(--tgpp-hl) 30%, var(--tgpp-ink));
  --tgpp-hl-ribbon: color-mix(in srgb, var(--tgpp-hl) 75%, #fff);
  --tgpp-on-ink: color-mix(in srgb, var(--tgpp-surface) 94%, var(--tgpp-ink));
  --tgpp-on-ink-muted: color-mix(in srgb, var(--tgpp-surface) 76%, var(--tgpp-ink));
  --tgpp-on-ink-soft: color-mix(in srgb, var(--tgpp-surface) 84%, var(--tgpp-ink));
  --tgpp-on-ink-faint: color-mix(in srgb, var(--tgpp-surface) 56%, var(--tgpp-ink));
  --tgpp-on-ink-dim: color-mix(in srgb, var(--tgpp-surface) 60%, var(--tgpp-ink));
  --tgpp-ink-2: color-mix(in srgb, var(--tgpp-ink) 84%, var(--tgpp-surface));
  --tgpp-ink-3: color-mix(in srgb, var(--tgpp-ink) 88%, var(--tgpp-surface));
  --tgpp-ink-4: color-mix(in srgb, var(--tgpp-ink) 94%, var(--tgpp-surface));
  --tgpp-ink-5: color-mix(in srgb, var(--tgpp-ink) 84%, var(--tgpp-accent));
  --tgpp-ink-deep: color-mix(in srgb, var(--tgpp-ink) 80%, #000);
  --tgpp-ink-shadow: color-mix(in srgb, var(--tgpp-ink) 60%, #000);
  --tgpp-scrim: color-mix(in srgb, var(--tgpp-ink) 55%, transparent);
  /* the top bar: light by default, so any logo reads on it */
  --tgpp-chrome-bg: var(--tgpp-surface); --tgpp-chrome-fg: var(--tgpp-ink);
  --tgpp-chrome-muted: color-mix(in srgb, var(--tgpp-chrome-fg) 65%, var(--tgpp-chrome-bg));
  --tgpp-chrome-line: color-mix(in srgb, var(--tgpp-chrome-fg) 10%, var(--tgpp-chrome-bg));
  /* status colours (not brand colours) */
  --tgpp-ok-bg: #E4EFE7; --tgpp-ok: #2E6B45; --tgpp-bad-bg: #FFF1EE; --tgpp-bad: #B03A2E;
  --tgpp-err-bg: #FFF7F5; --tgpp-err-line: #F1D3CF; --tgpp-err-ink: #7A2A20; --tgpp-danger: #A33A2C;
  --tgpp-ended-bg: #F1ECE3; --tgpp-ended: #7A6F60;
}
.tgpp { --tgpp-chrome-h: 46px; margin: 0; background: var(--tgpp-bg); color: var(--tgpp-ink); font-family: var(--tgpp-body-font); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; line-height: normal; text-align: left; letter-spacing: var(--tgpp-body-ls, normal); }
.tgpp *, .tgpp *::before, .tgpp *::after { box-sizing: border-box; }
.tgpp a { color: var(--tgpp-accent); }
.tgpp a:hover { color: var(--tgpp-ink); }
.tgpp button, .tgpp input { font-family: inherit; }
.tgpp b { font-weight: 700; }
.tgpp img { max-width: none; }
.tgpp button[disabled] { opacity: .55; cursor: progress !important; }
.tgpp button:focus-visible, .tgpp a:focus-visible, .tgpp input:focus-visible { outline: 3px solid var(--tgpp-hl); outline-offset: 2px; }
.tgpp input:focus { border-color: var(--tgpp-accent) !important; outline: none; }
.tgpp-chrome { position: sticky; top: 0; z-index: 900; }
.tgpp-screen { flex: 1; min-height: calc(100vh - var(--tgpp-chrome-h)); }
.tgpp-wrap { width: 100%; max-width: 1080px; margin: 0 auto; }

.tgpp-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--tgpp-line-soft); border-top-color: var(--tgpp-accent); animation: tgSpin .8s linear infinite; }

@media (max-width: 560px) {
  .tgpp-sup { display: none; }
}

/* Too narrow for a third chrome button: home links to orders instead. */
@media (max-width: 379px) {
  .tgpp-orders-top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tgpp *, .tgpp *::before, .tgpp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes tgSpin { to { transform: rotate(360deg); } }
@keyframes tgBadge { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 0 color-mix(in srgb,var(--tgpp-hl-light) 0%,transparent)); } 50% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 14px color-mix(in srgb,var(--tgpp-hl-light) 75%,transparent)); } }
@keyframes tgSweep { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes tgPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--tgpp-hl) 60%,transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb,var(--tgpp-hl) 0%,transparent); } }
@keyframes tgShine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes tgFill { from { width: 0; } }
@keyframes tgRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes tgIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tgWob { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg) scaleY(.95); } 40% { transform: rotate(7deg) scaleY(.95); } 60% { transform: rotate(-7deg) scaleY(.95); } 80% { transform: rotate(7deg); } }
@keyframes tgLid { to { transform: translate(-30px,-220px) rotate(-26deg); opacity: 0; } }
@keyframes tgSpark { 0% { opacity: 1; transform: translate(0,0) scale(.3); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1); } }
@keyframes tgFlash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes tgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }