/* Chrome that belongs to the clone harness, not the product. Everything else
   is styled by base.css — the AFRIQ base stylesheet, built by styles/. */
.demobar {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: flex; align-items: center; gap: .5rem; font-size: .75rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 999px;
  padding: .375rem .5rem; box-shadow: 0 8px 24px hsl(0 0% 0% / .2);
}
.demobar select {
  height: 1.75rem; border-radius: 999px; border: 1px solid hsl(var(--input));
  background: hsl(var(--background)); color: inherit; padding: 0 .5rem; font-size: .75rem;
}
.demobar button { border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: .75rem; padding: .25rem .5rem; border-radius: 999px; }
.demobar button:hover { background: hsl(var(--accent)); }

/* skip link — focus utilities for it were never compiled into the real sheet */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus {
  left: .5rem; top: .5rem; padding: .5rem .75rem; border-radius: var(--radius);
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
}

/* Tailwind's preflight sets [hidden]{display:none}, but every display utility
   (.flex, .grid, .block …) is emitted AFTER it at equal specificity and wins.
   Any element carrying both `hidden` and a display class stays visible.
   This restores the attribute as authoritative. */
[hidden] { display: none !important; }

/* Home stat tiles.
   Four of the five accents pair a pale tint with an ink dark enough to read on
   it. Emerald does not: the extracted sheet's greens are --home-emerald 80%,
   --home-emerald-background 96% and --status-success 39% lightness, and green
   carries so much luminance that even 39% only reaches 2.5:1 on the pale tint.
   This defines the missing ink rather than accepting an unreadable tile. */
:root      { --tile-emerald-ink: 162 88% 24%; }
.dark      { --tile-emerald-ink: 156 72% 74%; }

/* Sidebar brand lockup — AFRIQ over a smaller descriptor, the way a product
   wordmark sits above its category line. Defined here rather than as arbitrary
   Tailwind values so css-classes.mjs can still assert every class resolves. */
.brand-lockup { display: flex; flex-direction: column; gap: 2px; line-height: 1; min-width: 0; }
.brand-name {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em;
  color: hsl(var(--sidebar-foreground));
}
.brand-sub {
  font-size: 8.5px; font-weight: 500; letter-spacing: .155em; text-transform: uppercase;
  color: hsl(var(--sidebar-foreground) / .55); white-space: nowrap;
}
/* Collapsed rail has no room for the descriptor. */
body.sidebar-collapsed .brand-sub { display: none; }

/* ============================================================================
   AFRIQ design layer — the studio's own theme.
   ----------------------------------------------------------------------------
   The base stylesheet's default tokens (styles/base.src.css) are
   black primary buttons, --link 239 84% 67%, --ui-violet 273 67% 39% for the
   Upgrade outline and the sparkle, 98% sidebar, 8px radius, DM Sans. An
   earlier layer redefined --primary / --ring / --link to an ochre gold; that
   is gone. The `.afq-*` components below keep their token names (screens.css
   and the page scripts reference them) but every former gold stop is now the
   brand colour (the Africonology olive since 2026-10-15; violet before), the
   ink canvas is the product's foreground, and emerald remains reserved for
   liveness.
   ========================================================================= */
:root {
  --afq-accent:     90 42% 28%;      /* Africonology olive (#476529); the brand colour since 2026-10-15 */
  --link:           90 42% 28%;      /* links in the brand olive, not the product stylesheet's indigo 239 */
  --link-hover:     90 42% 21%;
  --afq-gold:       90 42% 28%;      /* legacy names: all three stops are the accent */
  --afq-gold-deep:  90 42% 28%;
  --afq-gold-ink:   90 42% 28%;
  --afq-ink:        0 0% 9%;         /* legacy canvas tokens: the foreground */
  --afq-ink-1:      0 0% 13%;
  --afq-ink-2:      0 0% 18%;
  --afq-hair:       0 0% 85%;
  --afq-live:       158 82% 47%;     /* reserved: liveness, nothing else (emerald, apart from the olive brand) */
  --afq-text:       0 0% 9%;
  --afq-text-dim:   0 0% 45%;
  --afq-text-faint: 0 0% 60%;

  /* The base stylesheet's brand tokens (base.css keeps their old names):
     the AFRIQ greens instead of violet. Category colours (agent-card-violet,
     cat-memory, chart-4) stay: they tell kinds apart, they are not the brand. */
  --ui-violet:               90 42% 28%;
  --ui-violet-border:        90 40% 34%;
  --ui-violet-bg:            90 35% 95%;
  --ui-violet-bg-dark:       95 30% 16%;
  --premium-background:      90 30% 90%;
  --premium-text:            91 37% 20%;
  --status-highlight:        90 42% 36%;
  --status-highlight-bg:     90 40% 97%;
  --status-highlight-border: 90 30% 85%;
  --home-purple:             90 35% 94%;
  --home-purple-background:  90 42% 32%;
  --credit-progress-bar-3:   90 42% 28%;
  --gradient-purple:         90 40% 70%;
  --gradient-violet:         82 45% 68%;
  --gradient-indigo:         150 35% 62%;
  --gradient-purple-dark:    90 42% 30%;
  --gradient-violet-dark:    82 42% 34%;
  --gradient-indigo-dark:    150 40% 24%;

  /* Category colours that were purple or indigo (no purple anywhere, the owner's
     request of 2026-10-15). The "violet" tone (managers, voice, A2A, knowledge
     graph, learning) becomes the brand forest green, apart from lime and cyan; "blue" becomes a true blue so it
     no longer reads as indigo; memory and the fourth chart colour become teal. */
  --agent-card-violet:            152 45% 28%;
  --agent-card-violet-background: 150 35% 92%;
  --agent-card-blue:              212 72% 45%;
  --agent-card-blue-background:   212 85% 94%;
  --cat-memory:                   174 55% 34%;
  --cat-memory-light:             174 45% 92%;
  --gradient-purple-3:            90 25% 80%;
}
/* Dark mode on the Africonology palette (2026-10-15): one family of green-black surfaces from the
   brand ink (#0E1110) in place of the product stylesheet's neutral black and greys, and the light
   brand green as the primary colour (buttons, switches, active pills, rings, links), as Licensing
   and the wordmark already were. Light mode is unchanged. */
.dark {
  --background: 150 8% 5%;
  --foreground: 90 8% 84%;
  --card: 150 8% 5%;
  --card-foreground: 90 8% 84%;
  --popover: 150 7% 9%;
  --popover-foreground: 90 8% 84%;
  --primary: 86 48% 62%;
  --primary-foreground: 150 30% 7%;
  --secondary: 150 6% 14%;
  --secondary-foreground: 90 10% 88%;
  --muted: 150 6% 14%;
  --muted-foreground: 90 5% 60%;
  --accent: 150 6% 14%;
  --accent-foreground: 90 8% 86%;
  --border: 150 6% 16%;
  --input: 150 6% 19%;
  --ring: 86 48% 62%;
  --link: 86 48% 62%;
  --link-hover: 86 48% 72%;
  --sidebar-background: 150 7% 8%;
  --sidebar-foreground: 90 6% 84%;
  --sidebar-primary: 86 48% 62%;
  --sidebar-primary-foreground: 150 30% 7%;
  --sidebar-accent: 150 6% 15%;
  --sidebar-accent-foreground: 90 10% 96%;
  --sidebar-border: 150 6% 15%;
  --filter-bar-bg: 150 6% 14%;
  --filter-bar-active-bg: 150 7% 8%;
  --resource-card-bg: 150 7% 8%;
  --card-tag-bg: 150 5% 24%;
  --credit-progress-bar-1: 90 5% 60%;
  --chart-4: 174 50% 50%;
  --agent-card-blue: 212 90% 82%;   /* the blue tone's text, 4.5:1 on its tile */
  color-scheme: dark;               /* native controls (sliders, scrollbars, select lists, date pickers) draw dark too */
}
.dark {
  --afq-accent:     86 48% 62%;
  --afq-gold:       86 48% 62%;
  --afq-gold-deep:  86 48% 62%;
  --afq-gold-ink:   86 48% 62%;
  --afq-ink:        0 0% 98%;
  --afq-ink-1:      0 0% 94%;
  --afq-ink-2:      0 0% 88%;
  --afq-hair:       0 0% 22%;
  --afq-text:       0 0% 98%;
  --afq-text-dim:   0 0% 65%;
  --afq-text-faint: 0 0% 48%;
  --ui-violet:               86 48% 62%;
  --ui-violet-border:        86 40% 50%;
  --ui-violet-bg:            95 30% 14%;
  --status-highlight:        86 50% 66%;
  --status-highlight-bg:     95 30% 12%;
  --status-highlight-border: 95 25% 24%;
  --premium-background:      88 35% 40%;
  --premium-text:            90 40% 96%;
  --agent-card-violet:            150 45% 72%;
  --agent-card-violet-background: 152 38% 22%;
  --agent-card-blue:              212 80% 68%;
  --agent-card-blue-background:   212 55% 30%;
  --cat-memory-light:             174 30% 18%;
  --chart-4:                      174 55% 48%;
}

/* Liveness. Green means "live" and nothing else; it is the one colour that
   survives from the earlier design layer unchanged. */
.afq-live-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: 3px 9px 3px 7px;
  background: hsl(var(--afq-live) / .12);
  border: 1px solid hsl(var(--afq-live) / .3);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: hsl(158 82% 28%);
}
.dark .afq-live-pill { color: hsl(var(--afq-live)) }
.afq-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; position: relative; flex: none }
.afq-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 1.5px solid currentColor; opacity: .55;
  animation: afq-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes afq-ping { 0% { transform: scale(.7); opacity: .6 } 70%,100% { transform: scale(1.9); opacity: 0 } }
.afq-spark { display: block; width: 62px; height: 22px; overflow: visible; flex: none }

/* ------------------------------------------------------------- agent tiles
   The old cards could not distinguish an agent with 18,432 runs from one that
   had never been invoked. These carry liveness, throughput and reliability. */
.afq-tile {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  border-radius: 12px; padding: 14px;
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  transition: box-shadow .18s ease, border-color .18s ease;
}
.afq-tile:hover {
  border-color: hsl(var(--foreground) / .2);
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12);
}
.afq-tile-head { display: flex; align-items: center; gap: .625rem }
.afq-mono {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.afq-tile-name { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.afq-tile-model { font-size: .6875rem; color: hsl(var(--muted-foreground)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.afq-tile-desc {
  margin-top: 10px; font-size: .8125rem; line-height: 1.45;
  color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-tile-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid hsl(var(--border));
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.afq-stat { font-size: .6875rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums }
.afq-stat b { font-weight: 650; color: hsl(var(--foreground)) }
.afq-state {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em; text-transform: capitalize;
}
.afq-state-live   { color: hsl(var(--afq-live)) }
.afq-state-draft  { color: hsl(var(--muted-foreground)) }
.afq-state-paused { color: hsl(var(--afq-gold-ink)) }
.afq-state-error  { color: hsl(var(--destructive)) }
.afq-state-draft .afq-dot::after, .afq-state-paused .afq-dot::after { animation: none; opacity: .3 }
.afq-state-error .afq-dot::after { animation-duration: 1.1s }

/* ----------------------------------------------------------------- activity */
.afq-feed { position: relative; padding-left: 18px }
.afq-feed::before {
  content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, hsl(var(--border)), transparent);
}
.afq-feed-item { position: relative; padding: 7px 0 }
.afq-feed-item::before {
  content: ''; position: absolute; left: -18px; top: 13px;
  width: 9px; height: 9px; border-radius: 999px;
  background: hsl(var(--card)); border: 2px solid hsl(var(--afq-text-faint));
}
.afq-feed-item.ok::before   { border-color: hsl(var(--afq-live)) }
.afq-feed-item.warn::before { border-color: hsl(var(--afq-gold-deep)) }
.afq-feed-item.err::before  { border-color: hsl(var(--destructive)) }

/* -------------------------------------------------------------- next steps */
.afq-step {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
  border-radius: 10px; padding: 7px 10px;
  border: 1px solid transparent; transition: background .16s ease, border-color .16s ease;
}
.afq-step:hover { background: hsl(var(--afq-gold) / .07); border-color: hsl(var(--afq-gold) / .3) }
.afq-step-n {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border-radius: 999px; font-size: .6875rem; font-weight: 700;
  background: hsl(var(--afq-gold) / .14); color: hsl(var(--afq-gold-ink));
  border: 1px solid hsl(var(--afq-gold) / .3);
}
.afq-step-t { font-size: .8125rem; font-weight: 500 }

/* ------------------------------------------------------------- section head */
.afq-eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
}

/* Someone who has asked the OS to stop animating things means it. */
@media (prefers-reduced-motion: reduce) {
  .afq-dot::after, .afq-flow-link::after { animation: none }
  .afq-tile, .afq-flow-node { transition: none }
  .afq-tile:hover, .afq-flow-node:hover { transform: none }
}

/* ============================================================================
   Sign-in — the live product's neutral style: a grey-white canvas, a white
   card with the form, a black "Sign in" button. The AFRIQ lockup stays, in
   the foreground colour. Nothing here is tinted.
   ========================================================================= */
.afq-auth {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100svh; padding: 32px 16px;
  background:
    linear-gradient(hsl(var(--foreground) / .035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / .035) 1px, transparent 1px),
    hsl(var(--sidebar));
  background-size: 40px 40px, 40px 40px, auto;
}
.afq-auth-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; margin-bottom: 22px }
.afq-auth-name { font-size: 1.75rem; font-weight: 700; letter-spacing: .05em; color: hsl(var(--foreground)) }
.afq-auth-name > span { color: hsl(var(--afq-accent)) }
.afq-auth-sub {
  font-size: .625rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.afq-auth-form {
  width: 100%; max-width: 400px;
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px hsl(0 0% 0% / .04), 0 8px 24px -12px hsl(0 0% 0% / .12);
}
.afq-auth-h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: hsl(var(--foreground)) }
.afq-auth-lede { margin-top: 4px; font-size: .875rem; color: hsl(var(--muted-foreground)) }

.afq-field { display: block; margin-top: 16px }
.afq-label { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; font-weight: 500; margin-bottom: 6px }
.afq-input {
  width: 100%; height: 38px; border-radius: var(--radius); padding: 0 12px;
  font-size: .875rem; color: hsl(var(--foreground));
  background: hsl(var(--background)); border: 1px solid hsl(var(--input));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.afq-input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)) }
.afq-submit {
  width: 100%; height: 38px; margin-top: 20px; border: 0; cursor: pointer;
  border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  color: hsl(var(--primary-foreground)); background: hsl(var(--primary));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .06);
  transition: opacity .16s ease;
}
.afq-submit:hover:not(:disabled) { opacity: .9 }
.afq-submit:disabled { opacity: .6; cursor: default }

.afq-demo {
  margin-top: 18px; border-radius: var(--radius); padding: 10px 12px;
  background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border));
  font-size: .75rem; color: hsl(var(--muted-foreground));
}
.afq-demo b { color: hsl(var(--foreground)); font-weight: 600 }
.afq-demo code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .75rem; color: hsl(var(--foreground)) }
.afq-alert {
  margin-top: 14px; border-radius: var(--radius); padding: 9px 11px; font-size: .75rem;
  background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .3);
  color: hsl(var(--destructive));
}
.afq-note { margin-top: 18px; font-size: .6875rem; line-height: 1.5; color: hsl(var(--muted-foreground)); text-align: center }
.afq-auth-foot { margin-top: 22px; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground) / .7) }
.afq-link { color: hsl(var(--link)); font-size: .75rem; font-weight: 500; text-decoration: none }
.afq-link:hover { text-decoration: underline }

/* The wordmark reads AFR + IQ: the IQ carries the accent, a heavier cut, tighter
   tracking and a baseline bar, so it stands out as a unit in both the sidebar
   lockup and the sign-in mark. The same object in both places. */
.brand-q, .brand-iq { color: hsl(var(--afq-accent)) }
.brand-iq {
  position: relative; display: inline-block; font-weight: 800; letter-spacing: -.01em;
  padding-bottom: 2px;
}
.brand-iq::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: hsl(var(--afq-accent));
}
.afq-auth-name .brand-iq { padding-bottom: 3px }
.afq-auth-name .brand-iq::after { height: 3px; bottom: -2px }

/* ------------------------------------------------------------- grid cards
   `entity.js`, `catalogue.js` and the Agents page all emit the same card class
   string. Observed: the live cards only change border and shadow on hover,
   with no lift and no accent edge. */
.afq-grid-card { position: relative; transition: box-shadow .18s ease, border-color .18s ease }
.afq-grid-card:hover {
  border-color: hsl(var(--foreground) / .2);
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12);
}
.afq-row { transition: background-color .15s ease }
.afq-row:hover { background: hsl(var(--muted) / .5) }


/* The tile subtitle is monospace because it usually carries a model id. Where
   it carries a kind ("Manager", "Folder") monospace is wrong. */
.afq-tile-kind {
  font-size: .6875rem; font-weight: 500; letter-spacing: .02em;
  color: hsl(var(--muted-foreground));
}

/* Trailing tile. A grid whose last row is one card and a void looks unfinished;
   this closes the row and puts the primary action where the eye already is. */
.afq-new-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 8rem; border-radius: .5rem; cursor: pointer;
  border: 1px dashed hsl(var(--border)); background: transparent;
  color: hsl(var(--muted-foreground)); font-size: .8125rem; font-weight: 500;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.afq-new-tile:hover {
  border-color: hsl(var(--afq-gold) / .6);
  background: hsl(var(--afq-gold) / .06);
  color: hsl(var(--afq-gold-ink));
}
.afq-new-tile span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: hsl(var(--afq-gold) / .14); color: hsl(var(--afq-gold-ink));
  border: 1px solid hsl(var(--afq-gold) / .3); font-size: 1rem; line-height: 1;
}

/* ============================================================================
   Scaffolded pages.

   A handful of routes share one template. It says what the screen is for and
   offers the built screens beside it, which is the difference between a
   placeholder and a page. Neutral, like the rest of the product: a muted
   panel on the card, violet only on the flag and the arrows.
   ========================================================================= */
.afq-stub { max-width: 46rem; margin-top: .25rem }
.afq-stub-panel {
  position: relative; overflow: hidden;
  border-radius: 12px; padding: 26px 28px;
  background: hsl(var(--muted) / .5);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.afq-stub-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: 3px 10px;
  background: hsl(var(--afq-accent) / .1); border: 1px solid hsl(var(--afq-accent) / .25);
  color: hsl(var(--afq-accent));
  font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.afq-stub-title {
  margin-top: 14px; font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15;
}
.afq-stub-desc {
  margin-top: 9px; max-width: 46ch; font-size: .9375rem; line-height: 1.55;
  color: hsl(var(--muted-foreground));
}
.afq-stub-where {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid hsl(var(--border));
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--muted-foreground) / .7);
}
.afq-stub-where b { color: hsl(var(--muted-foreground)); font-weight: 600 }

.afq-stub-next { margin-top: 18px }
.afq-stub-next-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.afq-stub-links { margin-top: 9px; display: flex; flex-wrap: wrap; gap: .5rem }
.afq-stub-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  border-radius: 8px; padding: 7px 12px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--foreground)); font-size: .8125rem; font-weight: 500;
  transition: border-color .16s ease, background .16s ease;
}
.afq-stub-link:hover { border-color: hsl(var(--foreground) / .25); background: hsl(var(--accent)) }
.afq-stub-link em { font-style: normal; color: hsl(var(--afq-accent)) }

/* ============================================================================
   Sidebar density.

   Measured against the live app: rows sit on a ~30px pitch throughout, and the
   three nav sections are separated by hairline rules, not by whitespace. Ours
   wrapped every collapsible group in its own `py-2` container inside a `gap-2`
   column, which put 24px of air between consecutive rows — a 52px pitch, nearly
   double. Sections now butt together and a rule does the separating.
   ========================================================================= */
.afq-nav-rule {
  height: 1px; flex: none; margin: 6px 8px;
  background: hsl(var(--sidebar-foreground) / .12);
}
/* The divider after the Agents group (nav `dividerAfter`): front of house above
   (Home, Create agent, Workspace, Agents), the platform below. Same spacing as
   the hairline, in the sidebar's border token; a short centred rule on the rail. */
.afq-nav-divider { background: hsl(var(--sidebar-border)); }
html.sidebar-collapsed .afq-sidebar .afq-nav-divider { width: 20px; margin: 6px auto; }

/* Credits and the organisation row are boxed panels in the live shell, not
   loose text — they read as account chrome rather than more navigation. */
.afq-credits {
  /* Sits away from the menu rows above it — it is a panel, not another row. */
  margin: 10px 0 4px; border-radius: 8px; padding: 9px 10px 10px;
  background: hsl(var(--sidebar-foreground) / .05);
}
.afq-credits-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; color: hsl(var(--sidebar-foreground) / .85);
}
.afq-credits-top b { font-weight: 600; font-variant-numeric: tabular-nums }
.afq-credits-bar {
  margin-top: 8px; height: 4px; border-radius: 999px; overflow: hidden;
  background: hsl(var(--sidebar-foreground) / .14);
}
.afq-credits-bar i { display: block; height: 100%; background: hsl(var(--credit-progress-bar-1, var(--ui-violet))) }
.afq-credits-note {
  margin-top: 7px; font-size: 10px; line-height: 1.35;
  color: hsl(var(--sidebar-foreground) / .5);
}

.afq-orgrow {
  display: flex; width: 100%; align-items: center; gap: .5rem;
  border-radius: 8px; padding: 6px 8px; text-align: left;
  border: 1px solid hsl(var(--sidebar-foreground) / .12);
  background: transparent; color: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.afq-orgrow:hover {
  background: hsl(var(--sidebar-accent));
}
.afq-orgrow-icon {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border-radius: 6px; background: hsl(var(--sidebar-foreground) / .07);
}

/* The account row and the Upgrade button are distinct blocks, not more list
   items — they need a beat of separation from what precedes them. */
.afq-account { margin-top: 5px }
.afq-upgrade-btn { margin-top: 7px }

/* ============================================================================
   Agent detail — Build / Playground / Deploy
   Observed from a screen recording of the live studio (2026-09-02). The clone
   had Edit / Chat and no Deploy screen at all; Deploy is where an agent stops
   being a draft and becomes something you can call, so its absence removed the
   end of the core flow.
   ========================================================================= */

/* The segmented control that carries the three modes. */
.afq-seg {
  display: inline-flex; align-items: center; gap: 2px;
  border-radius: 9px; padding: 3px;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.afq-seg button {
  display: inline-flex; align-items: center; gap: .375rem;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 7px; padding: 4px 10px;
  font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground));
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.afq-seg button:hover { color: hsl(var(--foreground)) }
.afq-seg button[aria-pressed="true"], .afq-seg button[aria-selected="true"] {
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font-weight: 600; box-shadow: 0 1px 2px hsl(0 0% 0% / .08);
}

/* Breadcrumb in the header row, replacing a bare title. */
.afq-crumb { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .875rem }
.afq-crumb a { color: hsl(var(--muted-foreground)); text-decoration: none }
.afq-crumb a:hover { color: hsl(var(--foreground)) }
.afq-crumb span { color: hsl(var(--muted-foreground)) }
.afq-crumb b { font-weight: 500; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---- Build: the right rail ------------------------------------------------
   A stack of compact rows, not the tall cards the clone had. Each row is a
   place to attach something, so the whole configuration reads at a glance. */
.afq-rail-panel { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); overflow: hidden }
.afq-rrow {
  display: flex; align-items: center; gap: .5rem;
  padding: 11px 13px; border-top: 1px solid hsl(var(--border));
  font-size: .8125rem; font-weight: 500;
}
.afq-rrow:first-child { border-top: 0 }
.afq-rrow-title { flex: 1 1 auto; min-width: 0 }
.afq-rrow-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  color: hsl(var(--muted-foreground)); font-size: 15px; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.afq-rrow-add:hover {
  background: hsl(var(--afq-gold) / .12); color: hsl(var(--afq-gold-ink));
  border-color: hsl(var(--afq-gold) / .35);
}
.afq-rrow-link {
  font-size: .75rem; font-weight: 500; text-decoration: none;
  color: hsl(var(--muted-foreground)); cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.afq-rrow-link:hover { color: hsl(var(--afq-gold-ink)) }
.afq-model-row {
  display: flex; align-items: center; gap: .5rem; margin: 0 13px 12px;
  border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 7px 10px;
  font-size: .8125rem;
}
.afq-model-row b { font-weight: 600 }
.afq-model-row span { color: hsl(var(--muted-foreground)) }

/* Attached items and the feature chips underneath their row. */
.afq-chiplist { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 13px 12px }
.afq-chip-item {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 7px; padding: 4px 8px; font-size: .75rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5);
}
.afq-chip-item.is-on { border-color: hsl(var(--afq-gold) / .5); background: hsl(var(--afq-gold) / .08) }
.afq-chip-item button { border: 0; background: transparent; cursor: pointer; color: hsl(var(--muted-foreground)); line-height: 1 }
.afq-chip-item button:hover { color: hsl(var(--destructive)) }

/* ---- Deploy ---------------------------------------------------------------- */
.afq-deployed {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; color: hsl(158 82% 28%);
}
.dark .afq-deployed { color: hsl(var(--afq-live)) }
.afq-steps { display: grid; gap: 12px; margin-top: 16px }
@media (min-width: 860px) { .afq-steps { grid-template-columns: repeat(3, minmax(0,1fr)) } }
.afq-stepcard {
  position: relative; border: 1px solid hsl(var(--border)); border-radius: 11px;
  padding: 14px 15px; background: hsl(var(--card));
}
.afq-stepcard-n {
  position: absolute; top: 12px; right: 14px;
  font-size: .6875rem; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground) / .7);
}
.afq-stepcard-t { margin-top: 8px; font-size: .875rem; font-weight: 600 }
.afq-stepcard-d { margin-top: 5px; font-size: .8125rem; line-height: 1.45; color: hsl(var(--muted-foreground)) }

.afq-nocode {
  display: flex; align-items: center; gap: .625rem; margin-top: 14px;
  border: 1px dashed hsl(var(--afq-gold) / .45); border-radius: 11px;
  padding: 11px 14px; background: hsl(var(--afq-gold) / .06);
  font-size: .8125rem;
}
.afq-nocode a { color: hsl(var(--afq-gold-ink)); font-weight: 500; text-decoration: none }
.afq-nocode a:hover { text-decoration: underline }
.dark .afq-nocode a { color: hsl(var(--afq-gold)) }

.afq-subtabs { display: flex; gap: 0; margin-top: 18px; border-bottom: 1px solid hsl(var(--border)) }
.afq-subtabs button {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: .8125rem; color: hsl(var(--muted-foreground));
  transition: color .15s ease, border-color .15s ease;
}
.afq-subtabs button:hover { color: hsl(var(--foreground)) }
.afq-subtabs button[aria-selected="true"] {
  color: hsl(var(--foreground)); font-weight: 600;
  border-bottom-color: hsl(var(--afq-gold-deep));
}
.dark .afq-subtabs button[aria-selected="true"] { border-bottom-color: hsl(var(--afq-gold)) }

.afq-code {
  position: relative; margin-top: 12px; border-radius: 11px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .45);
  padding: 14px 15px; overflow-x: auto;
}
.afq-code pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; line-height: 1.6; color: hsl(var(--foreground));
  white-space: pre;
}
.afq-code-copy {
  position: absolute; top: 9px; right: 10px;
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid hsl(var(--border)); border-radius: 7px;
  background: hsl(var(--background)); cursor: pointer;
  padding: 4px 9px; font-size: .6875rem; font-weight: 500; color: hsl(var(--muted-foreground));
}
.afq-code-copy:hover { border-color: hsl(var(--afq-gold) / .5); color: hsl(var(--afq-gold-ink)) }

/* ============================================================================
   Home sections observed in the live studio that the clone did not have:
   the four agent-type entry points, a blueprint gallery, and a Learn row.
   ========================================================================= */
.afq-kinds { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (min-width: 980px) { .afq-kinds { grid-template-columns: repeat(4, minmax(0,1fr)) } }
/* Kind tiles: 16px padding, icon tile left, title 16px/600, 2-line muted copy. */
.afq-kind {
  display: flex; gap: .75rem; text-decoration: none; align-items: flex-start;
  border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 16px;
  background: hsl(var(--card)); color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.afq-kind:hover {
  border-color: hsl(var(--foreground) / .2);
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12);
}
.afq-kind-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 9px; font-size: 16px; line-height: 1;
}
.afq-kind-icon svg { width: 18px; height: 18px }
.afq-kind-t { font-size: 1rem; font-weight: 600; line-height: 1.3 }
.afq-kind-d { margin-top: 3px; font-size: .8125rem; line-height: 1.45; color: hsl(var(--muted-foreground)) }

/* Blueprint list on Home: stacked bordered mini-cards, icon tile + name only. */
.afq-bp {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
  border-radius: 10px; padding: 11px 12px; color: inherit;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  transition: border-color .16s ease, box-shadow .16s ease;
}
.afq-bp:hover { border-color: hsl(var(--foreground) / .2); box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12) }
.afq-bp-icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 8px; font-size: 14px; line-height: 1;
}
.afq-bp-t { font-size: .875rem; font-weight: 500 }
.afq-bp-d { font-size: .6875rem; color: hsl(var(--muted-foreground)) }

.afq-learn { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (min-width: 980px) { .afq-learn { grid-template-columns: repeat(4, minmax(0,1fr)) } }
.afq-learn a {
  display: flex; align-items: center; gap: .5rem; text-decoration: none;
  border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 10px 12px;
  background: hsl(var(--card)); color: inherit; font-size: .8125rem; font-weight: 500;
  transition: border-color .16s ease, background .16s ease;
}
.afq-learn a:hover { border-color: hsl(var(--afq-gold) / .5); background: hsl(var(--afq-gold) / .06) }
.afq-learn span { color: hsl(var(--muted-foreground)) }

@media (prefers-reduced-motion: reduce) {
  .afq-kind { transition: none } .afq-kind:hover { transform: none }
}

/* Template gallery in the New workflow dialog. The live modal leads with
   templates and treats "empty" as the fallback, so the cards carry enough
   detail — what it does, what it uses, how long it takes — to choose from. */
.afq-tpl {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid hsl(var(--border)); border-radius: 11px; padding: 12px 13px;
  background: hsl(var(--card)); color: inherit;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.afq-tpl:hover { border-color: hsl(var(--afq-gold) / .55) }
.afq-tpl.is-picked {
  border-color: hsl(var(--afq-gold) / .8);
  background: hsl(var(--afq-gold) / .07);
  box-shadow: 0 0 0 3px hsl(var(--afq-gold) / .15);
}
.afq-tpl-featured {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--afq-gold-ink));
}
.dark .afq-tpl-featured { color: hsl(var(--afq-gold)) }
.afq-tpl-head { display: flex; align-items: center; gap: .5rem }
.afq-tpl-icon {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 7px; font-size: 13px; line-height: 1;
  background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.afq-tpl-name { font-size: .8125rem; font-weight: 600 }
.afq-tpl-desc { font-size: .75rem; line-height: 1.45; color: hsl(var(--muted-foreground)) }
.afq-tpl-foot { display: flex; align-items: center; gap: 5px; margin-top: 2px }
.afq-tpl-tag {
  border-radius: 5px; padding: 1px 6px; font-size: .625rem; font-weight: 600;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.afq-tpl-cost { margin-left: auto; font-size: .625rem; color: hsl(var(--muted-foreground)) }

/* ============================================================================
   Attachment pickers.

   Observed 2026-09-02: every "+" on the Build rail opens a popover anchored to
   the row — search at the top, optional facet chips, optional AI Suggest, then
   rows, then an escape hatch to the full page. The Model row uses the same
   shape with providers instead of items. These were dialogs-or-nothing here.
   ========================================================================= */
.afq-pop {
  position: absolute; z-index: 60; width: 280px;
  border-radius: 11px; border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 32px -12px hsl(224 44% 8% / .35), 0 2px 6px hsl(224 44% 8% / .08);
  overflow: hidden;
}
.afq-pop-search {
  display: flex; align-items: center; gap: .5rem;
  padding: 8px 10px; border-bottom: 1px solid hsl(var(--border));
}
.afq-pop-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: .8125rem; color: hsl(var(--foreground));
}
.afq-pop-search input::placeholder { color: hsl(var(--muted-foreground)) }
.afq-pop-chips { display: flex; gap: 4px; padding: 8px 10px 0 }
.afq-pop-chip {
  border: 0; cursor: pointer; border-radius: 6px; padding: 3px 8px;
  font-size: .6875rem; font-weight: 500;
  background: transparent; color: hsl(var(--muted-foreground));
}
.afq-pop-chip[aria-selected="true"] {
  background: hsl(var(--afq-gold) / .14); color: hsl(var(--afq-gold-ink));
  font-weight: 600;
}
.dark .afq-pop-chip[aria-selected="true"] { color: hsl(var(--afq-gold)) }
.afq-pop-list { max-height: 264px; overflow-y: auto; padding: 6px }
.afq-pop-row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: 7px; padding: 7px 8px; color: inherit;
}
.afq-pop-row:hover { background: hsl(var(--accent)) }
.afq-pop-row-t { font-size: .8125rem; font-weight: 500 }
.afq-pop-row-d { font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-pop-row-tick { margin-left: auto; color: hsl(var(--afq-gold-ink)); font-size: .8125rem }
.dark .afq-pop-row-tick { color: hsl(var(--afq-gold)) }
.afq-pop-row-chev { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: .75rem }
.afq-pop-suggest {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  border: 0; cursor: pointer; text-align: left;
  border-radius: 7px; padding: 7px 8px; margin-bottom: 2px;
  background: hsl(var(--afq-gold) / .1); color: hsl(var(--afq-gold-ink));
  font-size: .8125rem; font-weight: 500;
}
.dark .afq-pop-suggest { color: hsl(var(--afq-gold)) }
.afq-pop-suggest:hover { background: hsl(var(--afq-gold) / .18) }
.afq-pop-foot {
  border-top: 1px solid hsl(var(--border)); padding: 7px 10px;
  font-size: .75rem;
}
.afq-pop-foot a { color: hsl(var(--muted-foreground)); text-decoration: none }
.afq-pop-foot a:hover { color: hsl(var(--afq-gold-ink)) }
.afq-pop-empty { padding: 14px 10px; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)) }

/* Feature cards under the Features row — the live app shows a card per feature
   with "+ Add" when it is off, not a bare chip list. */
.afq-feats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 0 13px 12px }
.afq-feat {
  border: 1px dashed hsl(var(--border)); border-radius: 9px; padding: 8px 9px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.afq-feat.is-on { border-style: solid; border-color: hsl(var(--afq-gold) / .55); background: hsl(var(--afq-gold) / .07) }
.afq-feat-t { font-size: .6875rem; font-weight: 600; display: flex; align-items: center; gap: .25rem }
.afq-feat-d {
  font-size: .625rem; line-height: 1.35; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-feat-add {
  margin-top: auto; align-self: flex-start; border: 0; background: transparent;
  cursor: pointer; padding: 2px 0 0; font-size: .625rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.afq-feat-add:hover { color: hsl(var(--afq-gold-ink)) }

/* ============================================================================
   Playground.

   NOT observed — the recording goes Deploy -> Build and never opens this tab.
   Designed from what the rest of the product implies: a playground differs from
   a chat by showing WHY an answer came out the way it did, so every agent turn
   can be unfolded into the tools it called, the knowledge it retrieved, the
   guardrails it passed, and what it cost.
   ========================================================================= */
.afq-pg { display: grid; gap: 14px; grid-template-columns: 1fr }
@media (min-width: 1100px) { .afq-pg { grid-template-columns: 1fr 260px; align-items: start } }

.afq-pg-chat {
  display: flex; flex-direction: column; min-height: 480px;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card));
  overflow: hidden;
}
.afq-pg-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px }
.afq-pg-turn { display: flex; flex-direction: column; gap: 6px; max-width: 82% }
.afq-pg-turn.mine { align-self: flex-end; align-items: flex-end }
.afq-pg-bubble {
  border-radius: 12px; padding: 9px 12px; font-size: .875rem; line-height: 1.5;
  background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.afq-pg-turn.mine .afq-pg-bubble {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
.afq-pg-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .6875rem; color: hsl(var(--muted-foreground));
}
.afq-pg-why {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: .6875rem; font-weight: 600; color: hsl(var(--afq-gold-ink));
}
.dark .afq-pg-why { color: hsl(var(--afq-gold)) }
.afq-pg-why:hover { text-decoration: underline }

.afq-pg-trace {
  margin-top: 2px; border-radius: 9px; border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .4); padding: 9px 10px;
  font-size: .6875rem; color: hsl(var(--muted-foreground));
}
.afq-pg-trace dl { display: grid; grid-template-columns: auto 1fr; gap: 3px .625rem; margin: 0 }
.afq-pg-trace dt { font-weight: 600; color: hsl(var(--foreground)) }
.afq-pg-trace dd { margin: 0 }
.afq-pg-step {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0 4px 3px 0;
  border-radius: 5px; padding: 1px 6px; font-size: .625rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
}

.afq-pg-form { display: flex; gap: .5rem; border-top: 1px solid hsl(var(--border)); padding: 10px }
.afq-pg-input {
  flex: 1 1 auto; min-width: 0; height: 38px; border-radius: 9px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  padding: 0 12px; font-size: .875rem; color: hsl(var(--foreground));
}
.afq-pg-input:focus { outline: none; border-color: hsl(var(--afq-gold) / .7); box-shadow: 0 0 0 3px hsl(var(--afq-gold) / .15) }

.afq-pg-side { display: flex; flex-direction: column; gap: 10px }
.afq-pg-card { border: 1px solid hsl(var(--border)); border-radius: 11px; background: hsl(var(--card)); padding: 12px 13px }
.afq-pg-card h4 {
  margin: 0 0 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.afq-pg-kv { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; padding: 3px 0 }
.afq-pg-kv span:first-child { color: hsl(var(--muted-foreground)) }
.afq-pg-kv span:last-child { font-variant-numeric: tabular-nums }
.afq-pg-starter {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid hsl(var(--border)); border-radius: 8px;
  background: transparent; color: inherit; padding: 7px 9px; margin-bottom: 6px;
  font-size: .75rem; line-height: 1.35;
  transition: border-color .16s ease, background .16s ease;
}
.afq-pg-starter:hover { border-color: hsl(var(--afq-gold) / .5); background: hsl(var(--afq-gold) / .07) }
.afq-pg-typing span {
  display: inline-block; width: 5px; height: 5px; margin-right: 3px;
  border-radius: 999px; background: hsl(var(--muted-foreground));
  animation: afq-blink 1.2s infinite;
}
.afq-pg-typing span:nth-child(2) { animation-delay: .18s }
.afq-pg-typing span:nth-child(3) { animation-delay: .36s }
@keyframes afq-blink { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .afq-pg-typing span { animation: none } }

/* ============================================================================
   Monitoring — Analytics.

   Four summary cards over a 2x2 grid of time-series charts. Charts are inline
   SVG drawn by the page: this build has no runtime dependencies, and a chart
   library would be the first.
   ========================================================================= */
.afq-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (min-width: 1024px) { .afq-stats { grid-template-columns: repeat(4, minmax(0,1fr)) } }
.afq-statcard { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 14px 15px }
.afq-statcard-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground));
}
.afq-statcard-h svg { color: hsl(var(--muted-foreground)) }
.afq-statcard-v {
  margin-top: 8px; font-size: 1.75rem; font-weight: 650; line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.afq-statcard-s { margin-top: 7px; font-size: .75rem; color: hsl(var(--muted-foreground)) }

.afq-charts { display: grid; gap: 14px; grid-template-columns: 1fr }
@media (min-width: 1024px) { .afq-charts { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.afq-chart { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 16px 17px }
.afq-chart-t { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em }
.afq-chart-d { margin-top: 3px; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-chart-svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible }
.afq-chart-grid { stroke: hsl(var(--border)); stroke-width: 1; stroke-dasharray: 3 4 }
.afq-chart-axis { fill: hsl(var(--muted-foreground)); font-size: 11px; font-variant-numeric: tabular-nums }
.afq-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.afq-chart-legend { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 10px; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-chart-key { display: inline-flex; align-items: center; gap: .35rem }
.afq-chart-swatch { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block }

/* ============================================================================
   Tools gallery.

   The live Tools screen is a catalogue of installable integrations, four across
   — logo, name, a two-line description, and a source chip — with connected
   entries dimmed and carrying a status dot. The clone rendered a six-row CRUD
   table, which is a different screen entirely.

   Monograms stand in for brand logos: shipping third-party marks into this
   repository is neither needed for the study nor ours to redistribute.
   ========================================================================= */
.afq-tool {
  position: relative; display: flex; flex-direction: column; min-height: 11rem;
  border: 1px solid hsl(var(--border)); border-radius: 11px; padding: 14px 15px;
  background: hsl(var(--card)); color: inherit; text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.afq-tool:hover {
  border-color: hsl(var(--foreground) / .2);
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12);
}
.afq-tool-head { display: flex; align-items: center; gap: .5rem }
.afq-tool-logo {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 9px; font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
}
.afq-tool-name {
  margin-top: 14px; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.afq-tool-desc {
  margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-tool-foot { margin-top: auto; padding-top: 14px }
.afq-tool-src {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px;
  font-size: .75rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
/* Connected entries are already in use, so the live app quietens them and marks
   them with a dot rather than promoting them. */
.afq-tool.is-connected .afq-tool-name,
.afq-tool.is-connected .afq-tool-src { opacity: .55 }
.afq-tool-dot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: hsl(var(--afq-live)); box-shadow: 0 0 0 3px hsl(var(--afq-live) / .18);
}
@media (prefers-reduced-motion: reduce) {
  .afq-tool { transition: none } .afq-tool:hover { transform: none }
}

/* Provider marks. See src/assets/js/brand.js — these are original glyphs, not
   the providers' trademarks. */
/* A real mark sits on the card, unboxed, the way the live app shows them; only
   the initials fallback needs a tile behind it. */
.afq-brand {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
}
.afq-brand:not(.afq-brand-fallback) .afq-brand-svg { width: 100%; height: 100% }
.afq-brand-sm { width: 26px; height: 26px; border-radius: 7px }
/* Catalogue cards: a mark takes the same box as a monogram so rows stay level. */
.afq-tool-mark, .afq-tool-head .afq-brand-sm { width: 34px; height: 34px; border-radius: 9px; background: hsl(var(--muted) / .6) }
.afq-tool-mark .afq-brand-svg, .afq-tool-head .afq-brand-sm .afq-brand-svg { width: 62%; height: 62% }
.afq-brand-svg { width: 60%; height: 60%; display: block }
.afq-brand-fallback {
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
  font-size: .75rem; font-weight: 700;
}
.afq-brand-inline { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px }
.afq-brand-inline .afq-brand-svg { width: 100%; height: 100% }
.afq-brand-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 999px;
  background: hsl(var(--muted-foreground) / .4);
}

/* Wordmarks are wider than they are tall; a square tile shrinks them to
   illegibility. */
.afq-brand-wide { width: 52px; border-radius: 6px }
.afq-brand-inline-wide { width: 34px }

/* ============================================================================
   Blueprints.

   Observed 2026-09-03. A blueprint is a whole agent system, not an agent, so
   both screens lead with its ARCHITECTURE: a manager delegating to sub-agents.
   The same graph renders twice — as a thumbnail on a card and full size on the
   detail page — from one function, because two drawings of the same thing drift.
   ========================================================================= */
.afq-bp-hero { padding: 26px 0 6px; text-align: center }
.afq-bp-hero h2 { margin: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -.02em }
.afq-bp-search {
  display: flex; align-items: center; gap: .5rem;
  margin: 14px auto 0; max-width: 34rem;
  border: 1px solid hsl(var(--border)); border-radius: 11px;
  background: hsl(var(--card)); padding: 6px 6px 6px 12px;
}
.afq-bp-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: .875rem; color: hsl(var(--foreground));
}
.afq-bp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px }
.afq-bp-pill {
  border: 1px solid hsl(var(--border)); border-radius: 999px; cursor: pointer;
  background: transparent; color: hsl(var(--muted-foreground));
  padding: 5px 12px; font-size: .75rem; font-weight: 500;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.afq-bp-pill:hover { border-color: hsl(var(--afq-gold) / .5); color: hsl(var(--foreground)) }
.afq-bp-pill[aria-pressed="true"] {
  border-color: hsl(var(--afq-gold) / .7); background: hsl(var(--afq-gold) / .1);
  color: hsl(var(--afq-gold-ink)); font-weight: 600;
}
.dark .afq-bp-pill[aria-pressed="true"] { color: hsl(var(--afq-gold)) }

.afq-bp-sec { margin-top: 28px }
.afq-bp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem }
.afq-bp-sec-t { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em }
.afq-bp-sec-d { margin-top: 2px; font-size: .8125rem; color: hsl(var(--muted-foreground)) }

/* --- cards ---------------------------------------------------------------- */
.afq-bp-grid { display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0,1fr)); margin-top: 14px }
@media (min-width: 700px) { .afq-bp-grid { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1180px) { .afq-bp-grid { grid-template-columns: repeat(4, minmax(0,1fr)) } }

.afq-bp-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card));
  padding: 14px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.afq-bp-card:hover {
  border-color: hsl(var(--foreground) / .2);
  box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12);
}
.afq-bp-card-t { font-size: .875rem; font-weight: 600; line-height: 1.35 }
.afq-bp-card-d {
  margin-top: 6px; font-size: .75rem; line-height: 1.5; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-bp-card-foot { margin-top: auto; padding-top: 12px }
/* Featured cards lead with the architecture; use-case cards put it beside the
   text, which is how the live app distinguishes the two rows. */
.afq-bp-card-top .afq-bp-thumb { margin-bottom: 12px }
/* The inner split, deliberately NOT named afq-bp-card-side: that is also the
   card's own layout modifier, and sharing the name turned the whole card into a
   two-column grid, collapsing titles to one word per line.
   A fixed track for the thumbnail, too — `auto` lets the SVG's 320-unit viewBox
   claim the row and starve the text. */
.afq-bp-split { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 10px; align-items: start }

.afq-bp-cat {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 6px; padding: 3px 8px; font-size: .6875rem; font-weight: 500;
}
.afq-bp-cat-general   { background: hsl(220 14% 94%); color: hsl(220 9% 40%) }
.afq-bp-cat-itops     { background: hsl(28 92% 94%);  color: hsl(24 78% 38%) }
.afq-bp-cat-support   { background: hsl(212 96% 94%); color: hsl(214 78% 40%) }
.afq-bp-cat-sales     { background: hsl(200 85% 94%); color: hsl(200 70% 32%) }
.afq-bp-cat-banking   { background: hsl(162 60% 92%); color: hsl(164 62% 26%) }
.afq-bp-cat-hr        { background: hsl(340 84% 95%); color: hsl(340 58% 42%) }
.afq-bp-cat-proc      { background: hsl(190 70% 92%); color: hsl(193 66% 28%) }
.afq-bp-cat-others    { background: hsl(220 14% 94%); color: hsl(220 9% 40%) }
.dark .afq-bp-cat-general, .dark .afq-bp-cat-others { background: hsl(220 14% 20%); color: hsl(220 12% 74%) }
.dark .afq-bp-cat-itops   { background: hsl(24 60% 20%); color: hsl(28 88% 72%) }
.dark .afq-bp-cat-support { background: hsl(214 60% 21%); color: hsl(212 90% 76%) }
.dark .afq-bp-cat-sales   { background: hsl(200 50% 20%); color: hsl(200 80% 78%) }
.dark .afq-bp-cat-banking { background: hsl(164 46% 18%); color: hsl(162 70% 68%) }
.dark .afq-bp-cat-hr      { background: hsl(340 44% 23%); color: hsl(340 82% 78%) }
.dark .afq-bp-cat-proc    { background: hsl(193 50% 19%); color: hsl(190 74% 70%) }

/* --- the architecture graph ----------------------------------------------- */
.afq-bp-thumb {
  border: 1px solid hsl(var(--border)); border-radius: 9px;
  background: hsl(var(--muted) / .35); padding: 6px; overflow: hidden;
}
.afq-bp-thumb svg { display: block; width: 100%; height: auto }
.afq-bp-split .afq-bp-thumb { width: 92px; padding: 4px }

.afq-bp-arch {
  position: relative; border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--card));
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 18px;
}
.afq-bp-arch svg { display: block; width: 100%; height: auto }
.afq-bp-arch-expand {
  position: absolute; top: 12px; right: 12px;
  border: 1px solid hsl(var(--border)); border-radius: 8px; cursor: pointer;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  padding: 5px 10px; font-size: .75rem; font-weight: 500;
}
.afq-bp-arch-expand:hover { border-color: hsl(var(--afq-gold) / .5) }
.afq-bp-node-box { fill: hsl(var(--card)); stroke: hsl(214 90% 74%); stroke-width: 1 }
.afq-bp-node-mgr { fill: hsl(214 96% 97%); stroke: hsl(214 90% 68%) }
.dark .afq-bp-node-box { fill: hsl(224 30% 14%); stroke: hsl(214 50% 40%) }
.dark .afq-bp-node-mgr { fill: hsl(214 44% 20%); stroke: hsl(214 60% 52%) }
.afq-bp-node-name { fill: hsl(var(--foreground)); font-size: 7px; font-weight: 600 }
.afq-bp-node-desc { fill: hsl(var(--muted-foreground)); font-size: 5.4px }
.afq-bp-node-prov { fill: hsl(var(--muted-foreground)); font-size: 5px }
.afq-bp-edge { stroke: hsl(var(--muted-foreground) / .55); stroke-width: .8; fill: none; stroke-dasharray: 3 2 }
.afq-bp-edge-label { fill: hsl(var(--muted-foreground)); font-size: 4.6px }
.afq-bp-badge-mgr { fill: hsl(214 90% 90%); stroke: none }
.afq-bp-badge-sub { fill: hsl(214 60% 94%); stroke: none }
.dark .afq-bp-badge-mgr { fill: hsl(214 60% 32%) }
.dark .afq-bp-badge-sub { fill: hsl(214 40% 26%) }
.afq-bp-badge-t { fill: hsl(214 70% 30%); font-size: 4.6px; font-weight: 600 }
.dark .afq-bp-badge-t { fill: hsl(214 90% 84%) }

/* --- detail --------------------------------------------------------------- */
.afq-bp-detail { display: grid; gap: 20px; grid-template-columns: 1fr }
@media (min-width: 1100px) { .afq-bp-detail { grid-template-columns: minmax(0,1fr) 340px; align-items: start } }
.afq-bp-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15 }
.afq-bp-lede { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)) }
.afq-bp-h3 { margin-top: 26px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em }
.afq-bp-body { margin-top: 8px; font-size: .875rem; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 62ch }

.afq-bp-side { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 16px 17px }
.afq-bp-side h4 { margin: 18px 0 8px; font-size: .875rem; font-weight: 650 }
.afq-bp-side h4:first-child { margin-top: 0 }
.afq-bp-side ul { margin: 0; padding-left: 16px; list-style: disc }
.afq-bp-side li { font-size: .8125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-bottom: 3px }
.afq-bp-clone {
  display: block; width: 100%; margin-top: 18px; cursor: pointer; border: 0;
  border-radius: 9px; padding: 11px 14px; text-align: center;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: .875rem; font-weight: 650;
}
.afq-bp-clone:hover { filter: brightness(1.05) }
.afq-bp-clone-note { margin-top: 8px; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-bp-community {
  margin-top: 14px; border: 1px solid hsl(var(--border)); border-radius: 9px;
  padding: 10px 12px; font-size: .8125rem; font-weight: 500;
}

.afq-bp-prompts { margin-top: 14px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)) }
.afq-bp-prompts-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: transparent; cursor: pointer; color: inherit;
  padding: 14px 16px; font-size: .875rem; font-weight: 600; text-align: left;
}
.afq-bp-prompt {
  margin: 0 16px 12px; border: 1px solid hsl(var(--border)); border-radius: 9px;
  background: hsl(var(--muted) / .35); padding: 11px 13px;
}
.afq-bp-prompt-k { font-size: .6875rem; font-weight: 600; color: hsl(var(--muted-foreground)) }
.afq-bp-prompt-v { margin-top: 3px; font-size: .8125rem; line-height: 1.55 }
.afq-bp-prompt-v.dim { color: hsl(var(--muted-foreground)) }

@media (prefers-reduced-motion: reduce) {
  .afq-bp-card { transition: none } .afq-bp-card:hover { transform: none }
}

/* ============================================================================
   Sidebar modes — observed 2026-10-09.

   One nav tree, two renderings, switched by a class on <html> that the head
   script sets before paint:
     .sidebar-compact  groups are rows with chevrons; clicking one opens a
                       FLYOUT to the right of the sidebar (fixed-positioned by
                       ui.js, because the nav column clips its overflow)
     .sidebar-relaxed  one flat list; each group is introduced by an UPPERCASE
                       grey label and its items sit inline
   The aside takes a z-index so the flyouts and footer popovers paint over the
   floating content card, which comes later in the DOM.
   ========================================================================= */
.afq-sidebar { z-index: 30 }
.afq-navgrp { position: relative }
.afq-navgrp-label { display: flex; height: 1.75rem; margin-top: 4px; font-size: .625rem; letter-spacing: .12em; color: hsl(var(--sidebar-foreground) / .55) }
html.sidebar-compact .afq-navgrp-label { display: none }
html.sidebar-relaxed .afq-navgrp-trigger { display: none }
html.sidebar-relaxed .afq-flyout-head { display: none }
html.sidebar-relaxed .afq-navgrp-items { display: block }

html.sidebar-compact .afq-navgrp-items { display: none }
html.sidebar-compact .afq-navgrp-items[data-open] {
  display: block; position: fixed; z-index: 60; width: 232px;
  border-radius: 10px; border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 32px -12px hsl(0 0% 0% / .25), 0 2px 6px hsl(0 0% 0% / .08);
  padding: 6px;
}
.afq-flyout-head {
  padding: 6px 8px 8px; font-size: .75rem; font-weight: 600;
  color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border)); margin-bottom: 4px;
}
/* The flyout's rows are plain menu rows, not sidebar-tinted ones. */
html.sidebar-compact .afq-navgrp-items[data-open] [data-sidebar="menu-button"] { color: hsl(var(--popover-foreground)) }
html.sidebar-compact .afq-navgrp-items[data-open] [data-sidebar="menu-button"]:hover { background: hsl(var(--accent)) }
html.sidebar-compact .afq-navgrp-items[data-open] [data-active="true"] { background: hsl(var(--accent)) }
.afq-navgrp-trigger[aria-expanded="true"] { background: hsl(var(--sidebar-accent)) }

.afq-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 6px; border: 0; cursor: pointer;
  background: transparent; color: hsl(var(--sidebar-foreground) / .7);
}
.afq-iconbtn:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-foreground)) }

/* Unpinned: the sidebar collapses to an icon rail. Text, labels, pills and the
   footer panels go; the icons stay so the rail is still navigable. */
html.sidebar-collapsed .afq-sidebar { width: 3.25rem }
html.sidebar-collapsed .afq-sidebar .brand-lockup,
html.sidebar-collapsed .afq-sidebar [data-toggle-mode],
html.sidebar-collapsed .afq-sidebar .afq-navgrp-label,
html.sidebar-collapsed .afq-sidebar .afq-credits,
html.sidebar-collapsed .afq-sidebar .afq-orgrow,
html.sidebar-collapsed .afq-sidebar .afq-upgrade-btn,
html.sidebar-collapsed .afq-sidebar [data-sidebar="menu-button"] > :not(svg),
html.sidebar-collapsed .afq-sidebar [data-group-trigger] > :not(svg),
html.sidebar-collapsed .afq-sidebar [data-palette-open] > :not(svg),
html.sidebar-collapsed .afq-sidebar [data-menu="help"] > :not(svg),
html.sidebar-collapsed .afq-sidebar [data-menu="account"] > :not(.afq-avatar) { display: none }
html.sidebar-collapsed .afq-sidebar [data-sidebar="header"] > div { padding-left: 0; justify-content: center }
html.sidebar-collapsed .afq-sidebar [data-sidebar="header"] .flex-1 { display: none }
html.sidebar-collapsed .afq-sidebar .afq-navgrp-items:not([data-open]) { display: none }
html.sidebar-collapsed .afq-sidebar .afq-navgrp-trigger { display: flex }

/* ---- footer popovers --------------------------------------------------- */
.afq-menu { padding: 4px }
.afq-menu-right { position: absolute; left: calc(100% + 8px); bottom: 0 }
.afq-menu-create { position: fixed; z-index: 60 }
.afq-menu-label {
  padding: 6px 8px 4px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .02em; color: hsl(var(--muted-foreground));
}
.afq-menu-sep { height: 1px; margin: 4px -4px; background: hsl(var(--border)) }
.afq-menu-row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; text-align: left;
  background: transparent; color: hsl(var(--popover-foreground));
  font-size: .8125rem; text-decoration: none;
}
.afq-menu-row:hover { background: hsl(var(--accent)) }
.afq-menu-static { cursor: default; justify-content: space-between }
.afq-menu-static:hover { background: transparent }
.afq-menu-danger { color: hsl(var(--destructive)) }
.afq-menu-danger:hover { background: hsl(var(--destructive) / .08) }
.afq-menu-chip {
  margin-left: .25rem; border-radius: 999px; padding: 1px 7px;
  font-size: .625rem; font-weight: 600; white-space: nowrap;
  background: hsl(var(--status-success-bg)); color: hsl(var(--status-success));
  border: 1px solid hsl(var(--status-success-border));
}
.afq-menu-user { display: flex; align-items: center; gap: .625rem; padding: 8px 8px 6px }
.afq-avatar {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 6px;
  font-size: .6875rem; font-weight: 600;
  background: hsl(var(--agent-card-violet-background)); color: hsl(var(--agent-card-violet));
}
.afq-menu-user .afq-avatar { width: 32px; height: 32px; border-radius: 999px }
.afq-appearance {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px;
  background: hsl(var(--muted));
}
.afq-appearance button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: hsl(var(--muted-foreground));
}
.afq-appearance button:hover { color: hsl(var(--foreground)) }
.afq-appearance button[aria-pressed="true"] {
  background: hsl(var(--background)); color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / .08);
}

/* Credits: the sidebar widget is a button that opens the breakdown popover. */
.afq-credits { display: block; width: 100%; border: 0; cursor: pointer; text-align: left; color: inherit }
.afq-credits-top { display: flex }
.afq-credits-bar { display: block }
.afq-credits-note { display: flex; justify-content: space-between; gap: .5rem }
.afq-credits:hover { background: hsl(var(--sidebar-accent)) }
.afq-credits-pop { padding: 12px }
.afq-credits-pop-head { display: flex; justify-content: space-between; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-credits-pop-head a { color: hsl(var(--link)); text-decoration: none }
.afq-credits-pop-big { margin-top: 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.afq-credits-pop-big small { font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-credits-pop-plan { margin-top: 12px; padding-top: 10px; border-top: 1px solid hsl(var(--border)) }
.afq-credits-pop-row { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 500 }
.afq-credits-pop-row b { font-weight: 500; font-variant-numeric: tabular-nums }
.afq-credits-pop-sub { display: flex; justify-content: space-between; margin-top: 2px; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-credits-pop-sub a { color: hsl(var(--ui-violet)); font-weight: 500; text-decoration: none }
.afq-credits-pop .afq-credits-bar { margin-top: 8px }

/* ---- ⌘K palette ---------------------------------------------------------- */
.afq-palette-scrim {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px; background: hsl(0 0% 0% / .4);
}
.afq-palette {
  width: 100%; max-width: 560px; overflow: hidden;
  border-radius: 12px; border: 1px solid hsl(var(--border));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  box-shadow: 0 24px 64px -24px hsl(0 0% 0% / .5);
}
.afq-palette-search { display: flex; align-items: center; gap: .625rem; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)) }
.afq-palette-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: .9375rem; color: hsl(var(--foreground)) }
.afq-palette-search input::placeholder { color: hsl(var(--muted-foreground)) }
.afq-palette-search kbd {
  border: 1px solid hsl(var(--border)); border-radius: 5px; padding: 1px 6px;
  font-size: .625rem; font-family: inherit; color: hsl(var(--muted-foreground)); background: hsl(var(--muted));
}
.afq-palette-list { max-height: 360px; overflow-y: auto; padding: 6px }
.afq-palette-row {
  display: flex; align-items: center; gap: .625rem;
  border-radius: 7px; padding: 8px 10px; font-size: .8125rem;
  color: hsl(var(--popover-foreground)); text-decoration: none;
}
.afq-palette-row.is-active { background: hsl(var(--accent)) }
.afq-palette-tick { visibility: hidden; color: hsl(var(--muted-foreground)) }
.afq-palette-row.is-current .afq-palette-tick { visibility: visible }
.afq-palette-empty { padding: 18px 10px; text-align: center; font-size: .8125rem; color: hsl(var(--muted-foreground)) }

/* ============================================================================
   Home — observed 2026-10-09, re-measured in review iteration 2.
   No title bar on this page: the hero is the first thing in the content card
   (48px padding, h1 40px/700, lavender grid wash). Then four kind tiles; then
   the "See it in action" card OR the 7-day stats strip; then Continue working
   beside Start from a blueprint at 2:1, each a card with its header inside.
   ========================================================================= */
/* The shell's title bar is the card's first child in both layers (static
   shell.html and the app's Layout). Home alone hides it; the gutter the bar
   used to give the hero is put back on #main. */
body[data-page="home"] main > div > div > .shrink-0:first-child { display: none }
body[data-page="home"] #main { padding-top: 6px }
.afq-hero {
  position: relative; overflow: hidden; border-radius: 12px;
  padding: 48px 48px 44px; border: 1px solid hsl(var(--border));
  background:
    radial-gradient(640px 260px at 18% 0%, hsl(var(--afq-accent) / .12), transparent 70%),
    linear-gradient(hsl(var(--foreground) / .045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / .045) 1px, transparent 1px),
    hsl(var(--card));
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.afq-hero h1 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em }
.afq-hero p { margin: 10px 0 0; font-size: 1rem; color: hsl(var(--muted-foreground)) }
.afq-hero-actions { margin-top: 22px; display: flex; align-items: center; gap: .5rem }
/* App only: the offline-model note, one muted line under the actions. */
.afq-hero p.afq-hero-note { margin: 12px 0 0; font-size: .75rem; color: hsl(var(--muted-foreground)) }

.afq-video {
  display: grid; gap: 20px; align-items: center;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 20px 22px;
}
@media (min-width: 900px) { .afq-video { grid-template-columns: minmax(0,1fr) 300px } }
.afq-video h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em }
.afq-video p { margin: 6px 0 0; font-size: .875rem; color: hsl(var(--muted-foreground)) }
.afq-video a { display: inline-flex; align-items: center; gap: .25rem; margin-top: 12px; font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)); text-decoration: none }
.afq-video a:hover { text-decoration: underline }
.afq-video-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--afq-accent) / .18));
  border: 1px solid hsl(var(--border));
  display: grid; place-items: center;
}
.afq-video-thumb span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}

/* Each stat is a big number with its uppercase label UNDER it; 1px dividers
   between stats; sparkline; Org / Me and "View traces" on the right. */
.afq-strip {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 16px 24px;
}
.afq-strip-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 28px }
.afq-strip-stat:first-child { padding-left: 0 }
.afq-strip-stat + .afq-strip-stat { border-left: 1px solid hsl(var(--border)) }
.afq-strip-stat b { font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.afq-strip-stat span { font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)) }
.afq-strip-spark { flex: 1 1 120px; min-width: 100px; max-width: 220px; height: 28px; margin-left: 28px }
.afq-strip-spark svg { width: 100%; height: 100%; overflow: visible }
.afq-strip-right { margin-left: auto; display: flex; align-items: center; gap: 12px }
.afq-strip-right > a { font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)); text-decoration: none }
.afq-strip-right > a:hover { text-decoration: underline }

.afq-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 12px }
.afq-section-t { font-size: 1rem; font-weight: 600; letter-spacing: -.01em }
.afq-section-d { margin-top: 2px; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-section-more { font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)); text-decoration: none; white-space: nowrap }
.afq-section-more:hover { text-decoration: underline }

/* Continue working (2) beside Start from a blueprint (1). Each column is a
   bordered card whose header row sits inside it above a divider. */
.afq-home-cols { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr) }
@media (min-width: 980px) { .afq-home-cols { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start } }
.afq-panel { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 8px }
.afq-home-card { padding: 0; min-width: 0 }
.afq-home-card .afq-section-head {
  align-items: flex-start; margin-bottom: 0; padding: 18px 20px 14px;
  border-bottom: 1px solid hsl(var(--border));
}
.afq-home-card .afq-section-t { font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.3 }
.afq-home-card .afq-section-d { margin-top: 3px }
.afq-home-card .afq-section-more { margin-top: 3px }
.afq-home-card-body { padding: 8px }
.afq-home-card-body.is-list { display: flex; flex-direction: column; gap: 8px; padding: 12px }
.afq-recent {
  display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit;
  border-radius: 9px; padding: 9px 10px;
}
.afq-recent:hover { background: hsl(var(--accent)) }
.afq-recent-name { font-size: .8125rem; font-weight: 500 }
.afq-recent-model { font-size: .6875rem; color: hsl(var(--muted-foreground)); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) }
.afq-recent-when { margin-left: auto; font-size: .6875rem; color: hsl(var(--muted-foreground)); white-space: nowrap }
.afq-kind-chip {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 1px 7px;
  font-size: .6875rem; font-weight: 500; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
}
.afq-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px }
.afq-empty-disc {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: hsl(var(--afq-accent) / .1); color: hsl(var(--afq-accent)); margin-bottom: 12px;
}
.afq-empty h3 { margin: 0; font-size: .9375rem; font-weight: 600 }
.afq-empty p { margin: 6px 0 0; max-width: 34ch; font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-empty .afq-empty-cta { margin-top: 14px }
.afq-learn-icon {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 999px;
}

/* ============================================================================
   404 — compass on a violet disc, gradient "404", two buttons.
   ========================================================================= */
.afq-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100%; padding: 40px 20px }
.afq-404-disc {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 999px;
  background: hsl(var(--afq-accent) / .12); color: hsl(var(--afq-accent));
}
.afq-404-code {
  margin-top: 18px; font-size: 5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, hsl(var(--afq-accent)), hsl(var(--link)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afq-404 h2 { margin: 10px 0 0; font-size: 1.25rem; font-weight: 600 }
.afq-404 p { margin: 8px 0 0; max-width: 40ch; font-size: .875rem; color: hsl(var(--muted-foreground)) }
.afq-404-actions { margin-top: 22px; display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center }

/* ============================================================================
   Account — Profile and API Key cards.
   ========================================================================= */
.afq-profile-avatar {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px;
  font-size: 1.5rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, hsl(150 40% 24%), hsl(82 42% 40%));
}
.afq-kv { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)) }
.afq-kv dt { font-size: .6875rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-kv dd { margin: 3px 0 0; font-size: .875rem }
.afq-keyfield {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius); padding: 0 6px 0 12px; height: 36px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .8125rem;
  background: hsl(var(--muted) / .4);
}
.afq-keyfield code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-keyfield button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 5px; cursor: pointer; background: transparent; color: hsl(var(--muted-foreground)) }
.afq-keyfield button:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-warn {
  display: flex; gap: .625rem; align-items: flex-start;
  border-radius: var(--radius); padding: 10px 12px; font-size: .8125rem; line-height: 1.5;
  background: hsl(var(--status-warning-bg)); color: hsl(var(--status-warning)); border: 1px solid hsl(var(--status-warning-border));
}
.afq-secret-chip {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: 2px 8px;
  font-size: .6875rem; font-weight: 500; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}

/* ============================================================================
   Licensing — the licence tiers.
   ========================================================================= */
.afq-pricing-head { text-align: center; padding: 18px 0 6px }
.afq-pricing-head h2 { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em }
.afq-pricing-head p { margin: 8px 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)) }
.afq-pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-billing {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: hsl(var(--muted));
}
.afq-billing button {
  border: 0; border-radius: 999px; padding: 5px 14px; cursor: pointer;
  font-size: .8125rem; font-weight: 500; background: transparent; color: hsl(var(--muted-foreground));
}
.afq-billing button[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.afq-plans { display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0,1fr)); margin-top: 24px }
@media (min-width: 760px) { .afq-plans { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1200px) { .afq-plans { grid-template-columns: repeat(4, minmax(0,1fr)) } }
.afq-plan {
  display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--card)); padding: 20px;
}
.afq-plan.is-featured { border-color: hsl(var(--foreground) / .5); box-shadow: 0 8px 24px -16px hsl(0 0% 0% / .3) }
.afq-plan-name { font-size: 1rem; font-weight: 600 }
.afq-plan-desc { margin-top: 4px; font-size: .8125rem; color: hsl(var(--muted-foreground)); min-height: 2.6em }
.afq-plan-price { margin-top: 14px; display: flex; align-items: baseline; gap: .25rem }
.afq-plan-price b { font-size: 2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1 }
.afq-plan-price span { font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-plan .afq-plan-cta { margin-top: 16px; width: 100% }
.afq-plan ul { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.afq-plan li { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; line-height: 1.4 }
.afq-plan li svg { flex: none; margin-top: 2px; color: hsl(var(--afq-accent)) }
/* Licensing: three licence cards, the current-licence strip and the VAT note */
.afq-plans-3 { max-width: 1080px; margin-left: auto; margin-right: auto }
@media (min-width: 1200px) { .afq-plans.afq-plans-3 { grid-template-columns: repeat(3, minmax(0,1fr)) } }
.afq-plan-price b.afq-plan-price-text { font-size: 1.5rem; letter-spacing: -.02em }
/* "Talk to sales" in place of a price: it opens the Talk to sales sheet. */
.afq-plan-price button.afq-plan-price-text { font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; padding: 0; border: 0;
  background: none; cursor: pointer; color: hsl(var(--foreground)); text-decoration: underline; text-decoration-color: hsl(var(--afq-accent) / .5);
  text-underline-offset: 5px; text-decoration-thickness: 2px }
.afq-plan-price button.afq-plan-price-text:hover { color: hsl(var(--afq-accent)) }
.afq-plan-price button.afq-plan-price-text:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 4px }
.afq-plan-note { margin-top: 6px; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-licence-now { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px auto 0; max-width: 1080px; padding: 10px 14px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--muted) / .5); font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-licence-now b { color: hsl(var(--foreground)); font-weight: 600 }
.afq-licence-foot { max-width: 1080px; margin: 18px auto 0; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)) }

/* ============================================================================
   App Store — lavender hero band, category pills, card row.
   ========================================================================= */
.afq-store-hero {
  position: relative; overflow: hidden; border-radius: 12px; padding: 34px 32px;
  background:
    radial-gradient(520px 240px at 92% 20%, hsl(var(--afq-accent) / .22), transparent 70%),
    linear-gradient(135deg, hsl(var(--afq-accent) / .10), hsl(var(--afq-accent) / .04));
  border: 1px solid hsl(var(--afq-accent) / .2);
  display: grid; gap: 24px; align-items: center;
}
@media (min-width: 900px) { .afq-store-hero { grid-template-columns: minmax(0,1fr) 220px } }
.afq-store-hero h2 { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em }
.afq-store-hero p { margin: 8px 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); max-width: 48ch }
.afq-store-search {
  display: flex; align-items: center; gap: .5rem; margin-top: 18px; max-width: 520px;
  border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); padding: 0 12px; height: 42px;
}
.afq-store-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: .875rem; color: hsl(var(--foreground)) }
.afq-store-art { display: none; position: relative; height: 150px }
@media (min-width: 900px) { .afq-store-art { display: block } }
.afq-store-art i {
  position: absolute; display: block; border-radius: 18px;
  background: linear-gradient(145deg, hsl(var(--afq-accent) / .9), hsl(150 40% 26%));
  box-shadow: 0 16px 32px -16px hsl(var(--afq-accent) / .6);
}
.afq-store-art i:nth-child(1) { width: 86px; height: 86px; right: 60px; top: 10px; transform: rotate(-8deg) }
.afq-store-art i:nth-child(2) { width: 58px; height: 58px; right: 10px; top: 70px; opacity: .8; transform: rotate(12deg) }
.afq-store-art i:nth-child(3) { width: 40px; height: 40px; right: 130px; top: 100px; opacity: .6; transform: rotate(20deg) }
.afq-pills { display: flex; flex-wrap: wrap; gap: 8px }
.afq-pill {
  border: 1px solid hsl(var(--border)); border-radius: 999px; cursor: pointer;
  background: hsl(var(--card)); color: hsl(var(--foreground)); padding: 6px 14px; font-size: .8125rem; font-weight: 500;
}
.afq-pill:hover { background: hsl(var(--accent)) }
.afq-pill[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)) }
.afq-store-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 12px }
.afq-store-row-head h3 { margin: 0; font-size: 1rem; font-weight: 600 }
.afq-store-arrows { display: inline-flex; gap: 4px }
.afq-store-arrows button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); cursor: pointer; color: hsl(var(--muted-foreground)) }
.afq-store-arrows button:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-store-cards { display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0,1fr)) }
@media (min-width: 700px) { .afq-store-cards { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1180px) { .afq-store-cards { grid-template-columns: repeat(4, minmax(0,1fr)) } }
.afq-store-card { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 16px; transition: border-color .18s ease, box-shadow .18s ease }
.afq-store-card:hover { border-color: hsl(var(--foreground) / .2); box-shadow: 0 2px 8px -4px hsl(0 0% 0% / .12) }
.afq-store-orb { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, hsl(var(--afq-accent)), hsl(150 40% 26%) 60%, hsl(82 45% 62%)) }
.afq-store-card h4 { margin: 12px 0 0; font-size: .875rem; font-weight: 600 }
.afq-store-card p {
  margin: 6px 0 0; font-size: .75rem; line-height: 1.5; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================================
   Reports — four cards with Download / Coming Soon chips.
   ========================================================================= */
.afq-reports { display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0,1fr)) }
@media (min-width: 760px) { .afq-reports { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.afq-report { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 18px 20px }
.afq-report-head { display: flex; align-items: center; gap: .625rem }
.afq-report-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: hsl(var(--muted)); color: hsl(var(--foreground)) }
.afq-report h3 { margin: 0; font-size: .9375rem; font-weight: 600 }
.afq-report p { margin: 10px 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-report-foot { margin-top: 16px }
.afq-chip-brand {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: 4px 11px;
  font-size: .75rem; font-weight: 500; cursor: pointer; border: 0;
  background: hsl(var(--afq-accent) / .1); color: hsl(var(--afq-accent));
}
.afq-chip-brand:hover { background: hsl(var(--afq-accent) / .16) }
.afq-chip-muted {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 11px;
  font-size: .75rem; font-weight: 500; background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}

/* ============================================================================
   Rate limits + Global Contexts share the plain card and sheet below.
   ========================================================================= */
.afq-card { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 18px 20px }
.afq-card-label { font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-card-value { margin-top: 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.afq-card-value small { font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-tablist {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 8px; background: hsl(var(--muted));
}
.afq-tablist button {
  border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer;
  font-size: .8125rem; font-weight: 500; background: transparent; color: hsl(var(--muted-foreground));
}
.afq-tablist button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }
.afq-ctx-row {
  display: flex; align-items: center; gap: .75rem; padding: 12px 14px;
  border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card));
}
.afq-ctx-row + .afq-ctx-row { margin-top: 8px }
.afq-ctx-name { font-size: .875rem; font-weight: 500 }
.afq-ctx-body { margin-top: 2px; font-size: .75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Right sheet, as the live app opens for "New context". */
.afq-sheet-scrim { position: fixed; inset: 0; z-index: 50; background: hsl(0 0% 0% / .4) }
.afq-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border-left: 1px solid hsl(var(--border)); box-shadow: -16px 0 48px -24px hsl(0 0% 0% / .3);
}
.afq-sheet-head { display: flex; align-items: flex-start; gap: 1rem; padding: 18px 20px 14px; border-bottom: 1px solid hsl(var(--border)) }
.afq-sheet-head h2 { margin: 0; font-size: 1rem; font-weight: 600 }
.afq-sheet-head p { margin: 3px 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px }
.afq-sheet-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 14px 20px; border-top: 1px solid hsl(var(--border)) }

/* Home: "Describe the agent you need" — the hero's one action (replaces the original’s "Explore" link). */
.afq-hero-ask {
  display: flex; align-items: center; gap: 10px; width: min(640px, 100%);
  border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 6px 6px 6px 14px;
  background: hsl(var(--background)); box-shadow: 0 1px 2px hsl(0 0% 0% / .04);
}
.afq-hero-ask:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15) }
.afq-hero-ask input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: .9375rem; color: hsl(var(--foreground)) }
.afq-hero-ask input::placeholder { color: hsl(var(--muted-foreground)) }
.afq-hero-link { font-size: .8125rem; color: hsl(var(--muted-foreground)); text-decoration: none; white-space: nowrap }
.afq-hero-link:hover { color: hsl(var(--foreground)); text-decoration: underline }

/* Inline wordmark in labels and titles (frontend Wordmark / Brandify, static
   chrome's brandify()): scales with the surrounding text. */
.afq-wm { font-weight: 700; letter-spacing: .02em; white-space: nowrap }
.afq-wm .brand-iq { padding-bottom: .12em }
.afq-wm .brand-iq::after { height: .12em; bottom: -.04em }

/* Collapsed rail: labels hide on the rail itself, but a group's flyout is a
   full menu — its rows keep their labels, pills and chevrons. */
html.sidebar-collapsed .afq-sidebar .afq-navgrp-items[data-open] [data-sidebar="menu-button"] > :not(svg) { display: revert }
html.sidebar-collapsed .afq-sidebar .afq-navgrp-items[data-open] [data-sidebar="menu-button"] > .truncate { display: block }

/* Workspace's rows on the collapsed rail (frontend components/Sidebar.tsx): the count on Workspaces (access requests) and Approvals. */
.afq-sidebar .afq-rail-count { display: none }
html.sidebar-collapsed .afq-sidebar [data-sidebar="menu-button"] { position: relative }
html.sidebar-collapsed .afq-sidebar [data-sidebar="menu-button"] > .afq-rail-count { display: block; position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 9px; font-weight: 600; line-height: 15px; text-align: center }

/* The signed-in person's initial in the sidebar: the brand colour (agent avatars keep their category colour). */
.afq-avatar.afq-avatar-me { background: hsl(var(--afq-accent) / .14); color: hsl(var(--afq-accent)) }

/* ============================================================================
   Phones and narrow tablets (under 768px): the app's sidebar is a drawer.
   A menu button in the page header opens it over the page (Layout.tsx); a tap
   on the scrim, Escape or a choice closes it. Hidden, it is out of the tab order.
   ========================================================================= */
.afq-menu-btn { display: none }
@media (max-width: 767.98px) {
  .afq-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.25rem; height: 2.25rem; margin-left: -4px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: hsl(var(--foreground));
  }
  .afq-menu-btn:hover { background: hsl(var(--accent)) }
  .afq-menu-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px }
  #afq-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100svh; z-index: 60;
    width: min(18rem, 86vw); box-shadow: 0 0 40px -8px hsl(0 0% 0% / .35);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  html.afq-drawer-open #afq-sidebar { transform: none; visibility: visible; transition: transform .22s ease }
  .afq-drawer-scrim { position: fixed; inset: 0; z-index: 55; background: hsl(0 0% 0% / .45) }
  html.afq-drawer-open body { overflow: hidden }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  #afq-sidebar, html.afq-drawer-open #afq-sidebar { transition: none }
}
/* Home has no page header on a wide screen; on a phone it keeps one, for the menu button. */
@media (max-width: 767.98px) {
  body[data-page="home"] main > div > div > .shrink-0:first-child { display: block }
}
/* In the drawer, its menus (Create agent, Help and resources, the organisation and account menus)
   open inside the screen: full drawer width less a margin; the footer's menus sit above the footer. */
@media (max-width: 767.98px) {
  #afq-sidebar .afq-menu { position: fixed !important; left: 12px !important; right: 12px !important; width: auto !important;
    max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); overflow-y: auto }
  #afq-sidebar [data-sidebar="footer"] .afq-menu { top: auto !important; bottom: 12px !important }
}
/* The full-screen editors keep the sidebar (components/EditorShell.tsx): the rail beside the editor;
   their own "Toggle sidebar" button only matters on a phone, where the sidebar is the drawer. */
.afq-editor-shell { display: flex; min-height: 100svh; width: 100%; background: hsl(var(--sidebar)) }
.afq-editor-main { position: relative; flex: 1 1 auto; min-width: 0; display: flex }
.afq-editor-main > * { flex: 1 1 auto; min-width: 0 }
@media (min-width: 768px) { .afq-editor-main button[aria-label="Toggle sidebar"], .afq-editor-main button[aria-label="Toggle sidebar"] + .afq-bhead-div { display: none } }