/* 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'); }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .skp *, .skp *::before, .skp *::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(--skp-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(--skp-hl-light) 75%,transparent)); } }
@keyframes tgSweep { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes hqPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--skp-hl) 60%,transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb,var(--skp-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); } }