/* =====================================================================
   Anaking — design system
   ---------------------------------------------------------------------
   One place for the platform's visual language. Loaded last on every
   page so it settles the whole UI: tokens first, then the small set of
   base rules and shared chrome every app uses.

   Two themes, one system
     default            team tools  (workspace, studio, monitor, home)
     .theme-instrument  respondent survey (the clinical blue instrument)

   Both themes share the neutral ramp, type, spacing, radii, elevation,
   motion and the focus treatment. Only the accent and the paper warmth
   change, so a respondent never mistakes the instrument for team chrome.

   Rules for new work
     - use var(--an-*) tokens, never raw hex values
     - use the radius / shadow / motion scales below, not one-off numbers
     - interactive elements get :focus-visible for free - don't remove it
   ===================================================================== */

/* ------------------------------------------------------------------ 1. tokens */
:root {
  color-scheme: light;

  /* ink + neutrals (deep warm green-grey) */
  --an-ink: #16241f;
  --an-ink-soft: #3d514a;
  --an-muted: #56685f;          /* 5.1:1 on paper - safe for body copy */
  --an-faint: #7c8d86;
  --an-line: #e1e7e1;
  --an-line-soft: #eef2ed;
  --an-line-strong: #cfd9d2;
  --an-paper: #f6f7f4;
  --an-panel: #ffffff;
  --an-panel-2: #fbfcfa;

  /* accent - deep research green */
  --an-accent: #14614f;
  --an-accent-strong: #0d4638;
  --an-accent-bright: #1d8a6f;
  --an-accent-soft: #e8f1ec;
  --an-accent-tint: #f3f8f5;
  --an-accent-ink: #ffffff;

  /* status */
  --an-good: #1c6b47;
  --an-good-soft: #e8f4ec;
  --an-warn: #8a5a12;
  --an-warn-soft: #fbf3e3;
  --an-bad: #a33228;
  --an-bad-soft: #fbecea;
  --an-violet: #5b4a91;
  --an-violet-soft: #efecf8;

  /* shape */
  --an-radius-xs: 6px;
  --an-radius-sm: 8px;
  --an-radius: 10px;
  --an-radius-lg: 14px;
  --an-radius-pill: 999px;

  /* elevation */
  --an-shadow-1: 0 1px 2px rgba(18, 42, 32, .06);
  --an-shadow-2: 0 6px 18px rgba(18, 42, 32, .08);
  --an-shadow-3: 0 18px 48px rgba(15, 32, 26, .16);

  /* type */
  --an-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --an-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --an-text: 14px;
  --an-leading: 1.55;

  /* controls + focus */
  --an-control-h: 38px;
  --an-ring: 2px solid var(--an-accent);
  --an-ring-offset: 2px;

  /* motion */
  --an-ease: cubic-bezier(.2, .7, .3, 1);
  --an-fast: 140ms;
  --an-mid: 240ms;

  /* layering - keep chrome below overlays below modals below toasts */
  --an-z-base: 1;
  --an-z-nav: 30;
  --an-z-overlay: 60;
  --an-z-modal: 70;
  --an-z-toast: 90;
}

/* The respondent instrument keeps its own, quieter clinical palette.
   `.survey-skin` is the Studio's question-test view: the very same skin, so it gets
   the very same palette and a preview can never drift from the real thing. */
.theme-instrument,
.survey-skin {
  --an-ink: #16232e;
  --an-ink-soft: #33465a;
  --an-muted: #55697a;
  --an-faint: #7c8f9f;
  --an-line: #dde5ec;
  --an-line-soft: #eef2f6;
  --an-line-strong: #c9d7e1;
  --an-paper: #f4f7f9;
  --an-panel: #ffffff;
  --an-panel-2: #fbfdfe;

  --an-accent: #0b4f6c;
  --an-accent-strong: #08405a;
  --an-accent-bright: #12789e;
  --an-accent-soft: #e8f2f7;
  --an-accent-tint: #f4f9fb;
}

/* Legacy names must be re-declared *inside* a theme scope: a custom property's
   var() references are substituted where it is declared, so an alias frozen on
   :root would keep the team accent inside the instrument. Declared here, it
   follows whichever palette the scope set. */
:root,
.theme-instrument,
.survey-skin {
  /* ---- legacy aliases -------------------------------------------------
     The app stylesheets predate the token layer. They keep working (and
     follow both themes) because every legacy name resolves to a token. */
  --ink: var(--an-ink);
  --muted: var(--an-muted);
  --faint: var(--an-faint);
  --line: var(--an-line);
  --line2: var(--an-line-soft);
  --bg: var(--an-paper);
  --paper: var(--an-paper);
  --panel: var(--an-panel);
  --accent: var(--an-accent);
  --accent-2: var(--an-accent-bright);
  --accent2: var(--an-accent-bright);
  --accent-soft: var(--an-accent-soft);
  --soft: var(--an-accent-soft);
  --soft2: var(--an-accent-tint);
  --teal: var(--an-accent);
  --teal-dark: var(--an-accent-strong);
  --mint: var(--an-accent-soft);
  --violet: var(--an-violet);
  --lavender: var(--an-violet-soft);
  --good: var(--an-good);
  --good-soft: var(--an-good-soft);
  --warn: var(--an-warn);
  --warn-soft: var(--an-warn-soft);
  --bad: var(--an-bad);
  --bad-soft: var(--an-bad-soft);
  --danger: var(--an-bad);
  --studio: var(--an-violet);
  --studio-soft: var(--an-violet-soft);
  --amber: #fff3a3;
  --radius: var(--an-radius);
  --shadow: var(--an-shadow-2);
}

/* ------------------------------------------------------------------ 2. base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--an-font);
  font-size: var(--an-text);
  line-height: var(--an-leading);
  color: var(--an-ink);
  background: var(--an-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--an-accent-soft); color: var(--an-ink); }

/* One focus treatment for the whole platform. */
:focus-visible {
  outline: var(--an-ring);
  outline-offset: var(--an-ring-offset);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--an-ring);
  outline-offset: var(--an-ring-offset);
}

/* Data reads better aligned. */
.metric b, .card .v, .bar-val, .st-stat-bar, td.num, .num {
  font-variant-numeric: tabular-nums;
}

[hidden] { display: none !important; }

/* Quiet, consistent scrollbars on the surfaces that scroll a lot. */
.tablewrap, .st-outline, .st-panel { scrollbar-width: thin; }

/* ------------------------------------------------------------------ 3. utilities */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: var(--an-z-toast);
  padding: 10px 16px;
  border-radius: var(--an-radius-sm);
  background: var(--an-panel);
  color: var(--an-ink);
  font-weight: 650;
  font-size: 13px;
  text-decoration: none;
  box-shadow: var(--an-shadow-2);
  transition: top var(--an-fast) var(--an-ease);
}
.skip-link:focus { top: 12px; }

.an-eyebrow {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--an-muted);
}

/* ------------------------------------------------------------------ 4. app chrome */
/* Team pages share one bar: brand on the left, sections on the right. */
.an-appbar {
  position: sticky;
  top: 0;
  z-index: var(--an-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 22px;
  color: #fff;
  background: linear-gradient(180deg, #16241f 0%, #101b17 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(10, 24, 19, .18);
}
.an-appbar a { text-decoration: none; }

/* The brand lockup is white-on-dark in the bar, ink-on-paper everywhere else. */
/* On the dark bars (ink app bar, navy/violet survey bar) the lockup flips to
   white-on-dark; everywhere else it is ink-on-paper from the base rules. */
.an-appbar .brand-anaking,
.topbar .brand-anaking { color: #fff; }
.an-appbar .anaking-tagline,
.topbar .anaking-tagline { color: rgba(255, 255, 255, .74); }
.an-appbar .tagline-spark,
.topbar .tagline-spark { color: #9fe6c8; }
.an-appbar .brand-sub-badge,
.an-appbar .brand-studio-badge,
.topbar .brand-sub-badge {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .13);
  color: #d3efe2;
}
.an-appbar .live-pulse-dot,
.topbar .live-pulse-dot { background: #9fe6c8; box-shadow: none; }

/* Secondary link-style 3D button used in bars and toolbars. */
.linkbtn,
.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--an-radius-sm);
  border: 1px solid rgba(255, 255, 255, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .10) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
              0 3px 0 rgba(7, 15, 12, .55),
              0 6px 12px rgba(7, 15, 12, .22);
  transform: translateY(0);
  transition: transform var(--an-fast) var(--an-ease),
              box-shadow var(--an-fast) var(--an-ease),
              background var(--an-fast) var(--an-ease);
}
.linkbtn:hover,
.btn-3d:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .16) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42),
              0 4px 0 rgba(7, 15, 12, .58),
              0 8px 16px rgba(7, 15, 12, .26);
}
.linkbtn:active,
.btn-3d:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20),
              0 1px 0 rgba(7, 15, 12, .55),
              0 2px 5px rgba(7, 15, 12, .18);
}
.linkbtn.accent,
.btn-3d.accent {
  border-color: #2aa384;
  background: linear-gradient(180deg, #1d8a6f 0%, #14614f 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36),
              0 3px 0 #0a352a,
              0 6px 14px rgba(13, 70, 56, .28);
}
.linkbtn.gold,
.btn-3d.gold {
  border-color: #d8b23b;
  background: linear-gradient(180deg, #f6e29c 0%, #dec05c 100%);
  color: #2a2109;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
              0 3px 0 #967717,
              0 6px 14px rgba(150, 119, 23, .22);
}

/* The marketing landing & admin portal wear the bar in warm linen instead of ink:
   flip all bar buttons and lockup to crisp high-contrast ink-on-paper 3D buttons. */
body.landing .an-appbar {
  color: var(--an-ink);
  background: linear-gradient(180deg, #faf6ee 0%, #f3ecdd 100%);
  border-bottom: 1px solid #dfd3bc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 12px 30px rgba(122, 96, 40, .10);
}
body.landing .an-appbar .brand-anaking { color: var(--an-ink); }
body.landing .an-appbar .anaking-tagline { color: var(--an-muted); }
body.landing .an-appbar .tagline-spark { color: #c9a227; }
body.landing .an-appbar .brand-sub-badge,
body.landing .an-appbar .brand-studio-badge {
  border-color: #dfd3bc;
  background: #efe7d6;
  color: #7a6a43;
}
body.landing .an-appbar .live-pulse-dot { background: #c9a227; box-shadow: none; }
body.landing .an-appbar .linkbtn {
  border-color: #d4c6aa;
  background: linear-gradient(180deg, #ffffff 0%, #f2ead9 100%);
  color: var(--an-ink);
  box-shadow: inset 0 1px 0 #ffffff,
              0 3px 0 #c6b697,
              0 6px 12px rgba(92, 74, 34, .12);
}
body.landing .an-appbar .linkbtn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8f2e4 100%);
  color: var(--an-accent);
  box-shadow: inset 0 1px 0 #ffffff,
              0 4px 0 #b8a684,
              0 8px 16px rgba(92, 74, 34, .16);
}
body.landing .an-appbar .linkbtn.accent {
  border-color: #14614f;
  background: linear-gradient(180deg, #1d8a6f 0%, #14614f 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
              0 3px 0 #0b392e,
              0 6px 14px rgba(20, 97, 79, .24);
}


/* ---- SurveyKart 3D brand button lockup ------------------------------
   Markup lives in templates/_brand.html: acts as a tactile 3D button with
   an animated 3D GIF logo + vector crest, redirecting to the main/landing page. */
.anaking-brand-lockup,
.st-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 5px 12px 5px 7px;
  border-radius: 14px;
  border: 1px solid rgba(209, 219, 212, .75);
  background: linear-gradient(180deg, #ffffff 0%, #f2f5f1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92),
              0 3px 0 #c5d1c9,
              0 7px 16px rgba(18, 42, 32, .10);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(.34, 1.4, .64, 1),
              box-shadow 220ms var(--an-ease),
              background 220ms var(--an-ease);
}
.an-appbar .anaking-brand-lockup,
.topbar .anaking-brand-lockup {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 3px 0 rgba(6, 14, 11, .62),
              0 7px 16px rgba(6, 14, 11, .26);
}
body.landing .an-appbar .anaking-brand-lockup {
  border-color: #d8cbb0;
  background: linear-gradient(180deg, #fffdf8 0%, #f2ead8 100%);
  box-shadow: inset 0 1px 0 #ffffff,
              0 3px 0 #c7b798,
              0 7px 16px rgba(102, 80, 32, .12);
}
.anaking-brand-lockup:hover,
.st-brand-link:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
              0 5px 0 #b7c6bd,
              0 11px 22px rgba(18, 42, 32, .15);
}
.an-appbar .anaking-brand-lockup:hover,
.topbar .anaking-brand-lockup:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .11) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36),
              0 5px 0 rgba(6, 14, 11, .68),
              0 11px 22px rgba(6, 14, 11, .32);
}
body.landing .an-appbar .anaking-brand-lockup:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f6efe0 100%);
  box-shadow: inset 0 1px 0 #ffffff,
              0 5px 0 #baa885,
              0 11px 22px rgba(102, 80, 32, .18);
}
.anaking-brand-lockup:active,
.st-brand-link:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
              0 1px 0 rgba(18, 42, 32, .35),
              0 3px 6px rgba(18, 42, 32, .12);
}

.sk-logo-3d-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
}
.sk-logo-3d-gif {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px;
  filter: drop-shadow(0 2px 5px rgba(13, 42, 32, .20));
  animation: skLogoBob 3.8s ease-in-out infinite alternate;
}
@keyframes skLogoBob {
  from { transform: translateY(0) rotate(-0.8deg) scale(1); }
  to   { transform: translateY(-1.5px) rotate(1.2deg) scale(1.03); }
}

.anaking-svg-logo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
  border-radius: 11px;
  transition: box-shadow var(--an-mid) var(--an-ease), filter var(--an-mid) var(--an-ease);
}
.anaking-brand-lockup:hover .anaking-svg-logo,
.st-brand-link:hover .anaking-svg-logo {
  box-shadow: 0 2px 6px rgba(25, 32, 26, .28);
}

/* ---- the living gem --------------------------------------------------
   Three ambient motions give the mark its "live" feel without neon:
   a light sweep across the tile (like light on a cut stone), a slow float
   of the gem, and a gold spark orbiting it.  Hover makes the stone catch
   the light faster.  All of it collapses under prefers-reduced-motion
   (the base layer already disables animations globally). */
.ak-gem,
.ak-sheen,
.ak-particle {
  transform-box: view-box;
  transform-origin: 22px 22px;
}
.ak-gem {
  animation: akFloat 5.5s ease-in-out infinite alternate;
  transition: filter var(--an-mid) var(--an-ease);
}
.ak-sheen {
  transform: rotate(20deg) translateX(0);
  animation: akSheen 7s cubic-bezier(.4, 0, .2, 1) infinite;
}
.ak-particle {
  animation: akOrbit 11s linear infinite;
}
.anaking-brand-lockup:hover .ak-gem,
.st-brand-link:hover .ak-gem { filter: brightness(1.06) saturate(1.04); }
.anaking-brand-lockup:hover .ak-sheen,
.st-brand-link:hover .ak-sheen { animation-duration: 2.4s; }

@keyframes akFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-1.3px) scale(1.018); }
}
@keyframes akSheen {
  0%   { transform: rotate(20deg) translateX(0); opacity: 0; }
  5%   { opacity: 1; }
  18%  { transform: rotate(20deg) translateX(74px); opacity: 1; }
  26%  { transform: rotate(20deg) translateX(74px); opacity: 0; }
  100% { transform: rotate(20deg) translateX(74px); opacity: 0; }
}
@keyframes akOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.anaking-brand-text { display: flex; flex-direction: column; justify-content: center; }
.anaking-brand-title { display: flex; align-items: center; gap: 7px; }
.brand-anaking {
  font-family: var(--an-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--an-ink);
}
.brand-sub-badge,
.brand-studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--an-line-strong);
  border-radius: var(--an-radius-pill);
  background: var(--an-accent-soft);
  color: var(--an-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.live-pulse-dot {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--an-accent-bright);
  animation: liveDotPulse 2.6s ease-in-out infinite;
}
.live-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: liveDotRing 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes liveDotPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.35); opacity: 1; }
}
@keyframes liveDotRing {
  0% { transform: scale(.6); opacity: .7; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}
.anaking-tagline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--an-muted);
  font-size: 10.5px;
  font-weight: 550;
  white-space: nowrap;
}
.tagline-spark {
  color: var(--an-accent-bright);
  font-size: 9px;
  display: inline-block;
  animation: sparkTwinkle 3.4s ease-in-out infinite alternate;
}
@keyframes sparkTwinkle {
  0%   { transform: scale(1) rotate(0deg); opacity: .7; }
  100% { transform: scale(1.3) rotate(24deg); opacity: 1; }
}

/* Footer shared by the public surfaces. */
.an-foot {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: min(1680px, 96vw);
  margin: 28px auto 0;
  padding: 34px clamp(20px, 3.6vw, 56px) 38px;
  color: var(--an-muted);
  font-size: 12.5px;
  border-top: 1.5px solid var(--an-line);
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.72) 0%, rgba(244, 236, 218, 0.88) 100%);
  border-radius: 22px 22px 0 0;
}
.an-foot b { color: var(--an-ink); font-weight: 700; letter-spacing: -.01em; }
.an-foot-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 26px;
  width: 100%;
}
.an-foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.an-foot-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--an-ink) !important;
  border-bottom: none !important;
}
.an-foot-gem {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #d97706;
  font-size: 14px;
}
.an-foot-desc {
  margin: 2px 0 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 42ch;
}
.an-foot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.an-foot-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  color: #78350f;
  background: #fef3c7;
  border: 1px solid rgba(217, 119, 6, 0.32);
}
.an-foot-heading {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--an-ink);
}
.an-foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.an-foot-list li {
  line-height: 1.35;
}
.an-foot-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--an-line);
  width: 100%;
}
.an-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.an-foot-seo-aliases {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--an-muted);
}
.an-foot a {
  color: var(--an-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.an-foot a:hover {
  color: var(--an-accent);
  border-bottom-color: currentColor;
}
@media (max-width: 960px) {
  .an-foot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .an-foot-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ------------------------------------------------------------------ 5. status pills */
/* One pill, every app: same size, weight, radius and semantic colours. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--an-radius-pill);
  background: var(--an-line-soft);
  color: var(--an-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill.live, .pill.approved, .pill.complete, .pill.good, .pill.human,
.pill-live, .pill-complete {
  background: var(--an-good-soft);
  color: var(--an-good);
}
.pill.draft, .pill.in_progress, .pill.warn, .pill.possible_ai,
.pill-draft, .pill-in_progress {
  background: var(--an-warn-soft);
  color: var(--an-warn);
}
.pill.closed, .pill.screened_out, .pill.neutral,
.pill-closed, .pill-screened_out {
  background: var(--an-line-soft);
  color: var(--an-muted);
}
.pill.test, .pill.bad,
.pill-test {
  background: var(--an-violet-soft);
  color: var(--an-violet);
}
.pill.likely_ai { background: var(--an-bad-soft); color: var(--an-bad); }

/* ---- audited support view ------------------------------------------- */
/* An admin inside someone else's account. It must be impossible to miss and
   impossible to get stuck in: one strip, one way out, on every team page. */
.support-strip {
  position: relative;
  z-index: var(--an-z-nav);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--an-warn-soft);
  border-bottom: 1px solid var(--an-line-strong);
  color: var(--an-ink);
}
.support-strip p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--an-ink-soft);
}
.support-strip b {
  color: var(--an-warn);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-right: 4px;
}
.support-strip code {
  font-family: var(--an-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--an-radius-xs);
  background: var(--an-panel);
  border: 1px solid var(--an-line);
}
.support-strip-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--an-warn);
  box-shadow: 0 0 0 4px var(--an-warn-soft), 0 0 0 5px var(--an-line-strong);
  animation: supportPulse 2.4s var(--an-ease) infinite;
}
.support-strip-exit { margin: 0; }
.support-strip-exit button {
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  padding: 7px 14px;
  border-radius: var(--an-radius-pill);
  border: 1px solid var(--an-warn);
  background: var(--an-panel);
  color: var(--an-warn);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--an-panel), 0 2.5px 0 var(--an-line-strong);
  transition: transform var(--an-fast) var(--an-ease),
              box-shadow var(--an-fast) var(--an-ease);
}
.support-strip-exit button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--an-panel), 0 3.5px 0 var(--an-line-strong);
}
.support-strip-exit button:active { transform: translateY(1px); box-shadow: none; }
@keyframes supportPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--an-warn-soft), 0 0 0 5px var(--an-line-strong); }
  50% { box-shadow: 0 0 0 6px var(--an-warn-soft), 0 0 0 7px var(--an-line-strong); }
}

/* ------------------------------------------------------------------ 6. responsive chrome, motion & print */
html { overflow-x: clip; }
body { overflow-x: clip; min-width: 0; }
img, video, canvas { max-width: 100%; }

@media (max-width: 1024px) {
  .an-foot { max-width: 98vw; padding: 28px 20px 32px; }
  .an-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 960px) {
  .an-appbar { padding: 10px 16px; gap: 10px 14px; }
}
@media (max-width: 768px) {
  .an-appbar {
    position: relative;
    padding: 10px 14px;
    gap: 8px 10px;
  }
  .anaking-brand-lockup,
  .st-brand-link {
    padding: 4px 10px 4px 6px;
    gap: 8px;
    border-radius: 12px;
  }
  .an-foot-brand {
    grid-column: 1 / -1;
  }
  .an-foot-desc {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .an-appbar { padding: 9px 12px; gap: 8px; }
  .sk-brand-3d-btn { padding: 4px 9px 4px 6px; gap: 7px; }
  .brand-anaking { font-size: 16px; }
  .anaking-tagline { font-size: 9.5px; }
  .topbar .anaking-tagline { display: none; }
  .linkbtn, .btn-3d { padding: 6px 10px; font-size: 11.5px; }
  .an-foot {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 22px 14px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .an-foot-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .an-foot-list a {
    display: inline-block;
    padding: 2px 0;
  }
  .an-foot-links { flex-wrap: wrap; gap: 8px 12px; }
}
@media (max-width: 440px) {
  .an-appbar .anaking-tagline,
  .topbar .brand-sub-badge { display: none; }
  .brand-anaking { font-size: 15px; }
  .brand-sub-badge,
  .brand-studio-badge { padding: 2px 6px; font-size: 8.5px; }
}

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

@media print {
  .an-appbar, .appnav, .skip-link, .an-foot, .lnf, .teambar,
  .builder-view-controls, .test-console, .st-ai-fab { display: none !important; }
  body { background: #fff; }
  a[href]::after { content: ""; }
}

/* Shared mobile containment. Keep overflow on the component that needs it,
   rather than letting intrinsic grid/form widths stretch the entire page.
   This stylesheet is loaded last by every full-page template. */
@media (max-width: 860px) {
  :where(main, section, article, aside, header, footer, form, fieldset) {
    min-width: 0;
  }
  :where(.ln-gate-card, .st-panel, .st-editor, .st-preview, .panel,
         .ptl-card, .adk-pane, .adk-pane-grid, .project-card, .card) > * {
    min-width: 0;
  }
  :where(input, select, textarea) { max-width: 100%; }
  :where(p, h1, h2, h3, label, .notice, .ln-gate-out) {
    overflow-wrap: anywhere;
  }
  .an-appbar, .st-top, .workspace-top { flex-wrap: wrap; height: auto; }
  .an-appbar > *, .st-top > *, .workspace-top > * { min-width: 0; }
  .an-appbar .meta { flex-wrap: wrap; max-width: 100%; }
  .appnav { min-width: 0; max-width: 100%; }
  .st-outline, .st-editor, .st-preview { min-width: 0; max-width: 100%; }
  .st-tabs, .detail-tabs { max-width: 100%; overflow-x: auto; }
  .ptl-charts { grid-template-columns: minmax(0, 1fr); }
  .ptl-card h2 { flex-wrap: wrap; }
  .scope, .seg, .toolbar { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* Stable side gutters, even on 320px screens and in landscape. */
  .auth-gate .ln-gate {
    width: calc(100% - 32px);
    max-width: 560px;
    padding: 24px 0 32px;
    margin-inline: auto;
    min-height: 0;
  }
  .auth-gate .ln-gate-card {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 18px;
    border-radius: 16px;
  }
  .ln-gate-form, .ln-gate-form label { min-width: 0; width: 100%; }
  .ln-gate-form input { box-sizing: border-box; width: 100%; min-width: 0; }
  .ln-gate-form button, .ln-gate-card > .ln-btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    justify-content: center;
    overflow-wrap: anywhere;
  }
  .ln-gicon { flex-shrink: 0; }
  .sk-auth-divider { width: 100%; min-width: 0; }
  .sk-auth-divider span { text-align: center; }
  /* Avoid iOS focus zoom moving forms outside the viewport. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    font-size: 16px;
  }
  .workspace-top { padding-block: 12px; gap: 12px; }
  .sidebar { flex-wrap: wrap; }
  .side-nav { flex-wrap: wrap; }
  .workspace-top .header-actions { flex-wrap: wrap; }
  .welcome-banner { grid-template-columns: minmax(0, 1fr); }
  .heading-actions > *, .st-top-actions > * { max-width: 100%; }
  .st-bar, .st-top-actions { flex-wrap: wrap; }
  #f-title { width: 100%; min-width: 0; }
  .st-kart-shop-grid { grid-template-columns: minmax(0, 1fr); }
  .st-share-row, .st-kart-proj { flex-wrap: wrap; overflow-wrap: anywhere; }
  .ptl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptl-card { padding: 16px 14px; }
  .ptl-hero { padding-inline: 16px; }
  .ptl-charts, .ptl-kpis { padding-inline: 16px; }
  .ptl-users { width: calc(100% - 32px); }
  .ptl-hero-note { max-width: 100%; }
  .adk-passport, .adk-passport-actions { flex-wrap: wrap; }
  dialog, .st-modal-box {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}