/* =============================================================================
   RAYASA — Components
   Reusable pieces: buttons, badges, cards, header, drawer, dialog, terminal,
   tabs, forms, toast. Page-specific composition lives in sections.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;
  --btn-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--btn-shadow);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

.btn--primary {
  --btn-bg: var(--brand-500);
  --btn-fg: #fff;
  --btn-border: var(--brand-400);
  --btn-shadow: var(--glow-brand);
}

.btn--primary:hover {
  --btn-bg: var(--brand-400);
  --btn-shadow: 0 0 42px -6px rgb(30 133 230 / 62%);
}

.btn--ghost {
  --btn-bg: rgb(255 255 255 / 4%);
  --btn-fg: var(--text-soft);
  --btn-border: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: rgb(255 255 255 / 8%);
  --btn-fg: var(--text);
  --btn-border: var(--line-brand);
}

.btn--outline {
  --btn-bg: rgb(30 133 230 / 10%);
  --btn-fg: var(--brand-300);
  --btn-border: var(--brand-600);
}

.btn--outline:hover {
  --btn-bg: var(--brand-500);
  --btn-fg: #fff;
}

.btn--sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 1.0625rem 2.25rem;
  font-size: var(--text-base);
}

.btn--block {
  inline-size: 100%;
}

/* Menu-style button: label hugs the reading edge instead of centring. */
.btn--start {
  justify-content: flex-start;
  text-align: start;
}

.btn__icon {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
}

/* The arrow points along the reading direction in either script. */
.btn__icon--lead {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__icon--lead,
.card:hover .btn__icon--lead {
  transform: translateX(0.2rem);
}

[dir='rtl'] .btn:hover .btn__icon--lead,
[dir='rtl'] .card:hover .btn__icon--lead {
  transform: translateX(-0.2rem);
}

/* -----------------------------------------------------------------------------
   Badges / pills / chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4375rem 0.875rem;
  border-radius: var(--r-full);
  background: rgb(30 133 230 / 10%);
  border: 1px solid var(--line-brand);
  color: var(--brand-300);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
}

.badge--accent {
  background: rgb(34 211 238 / 9%);
  border-color: var(--line-accent);
  color: var(--accent-300);
}

.badge--ok {
  background: rgb(52 211 153 / 9%);
  border-color: rgb(52 211 153 / 30%);
  color: var(--ok-400);
}

.badge--muted {
  background: rgb(255 255 255 / 4%);
  border-color: var(--line);
  color: var(--text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-sm);
  background: rgb(1 32 60 / 55%);
  border: 1px solid var(--line-brand);
  color: var(--brand-200);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  direction: ltr;
  unicode-bidi: isolate;
}

.chip--violet {
  background: rgb(139 92 246 / 12%);
  border-color: rgb(167 139 250 / 30%);
  color: var(--violet-400);
}

.chip--plain {
  background: rgb(255 255 255 / 4%);
  border-color: var(--line);
  color: var(--text-muted);
}

/* A pulsing dot for "live" affordances. Two elements so the halo can animate
   independently of the solid core. */
.pulse {
  position: relative;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  border-radius: var(--r-full);
  background: currentcolor;
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentcolor;
  animation: pulse-halo 2s var(--ease-out) infinite;
}

@keyframes pulse-halo {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse::after {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--line-brand);
  transform: translateY(-4px);
  box-shadow: 0 0 40px -14px rgb(30 133 230 / 40%);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin-block-end: var(--space-2);
}

.card__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-loose);
}

.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-300);
}

/* The middot-separated capability list under a card's description. */
.card__tags {
  margin-block-start: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: var(--leading-normal);
}

/* Pushed to the bottom so a row of cards lines its calls to action up, however
   much copy each one carries. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand-300);
  transition: color var(--dur-base) var(--ease-out);
}

.card:hover .card__link,
.card__link:hover {
  color: var(--accent-300);
}

/* Icon tile. Colour is set by a modifier so the tile, its border and its glow
   always move together. */
.tile {
  --tile-hue: var(--brand-400);

  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex: none;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--tile-hue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-hue) 30%, transparent);
  color: var(--tile-hue);
  transition: transform var(--dur-base) var(--ease-out);
}

.tile svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.tile--lg {
  inline-size: 3.5rem;
  block-size: 3.5rem;
}

.tile--lg svg {
  inline-size: 1.625rem;
  block-size: 1.625rem;
}

.tile--accent {
  --tile-hue: var(--accent-400);
}

.tile--violet {
  --tile-hue: var(--violet-400);
}

.tile--ok {
  --tile-hue: var(--ok-400);
}

.card:hover .tile {
  transform: scale(1.08);
}

/* -----------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--space-10);
}

@media (min-width: 56rem) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
  }

  .section-head--split > p {
    max-inline-size: 30rem;
    text-align: start;
  }
}

/* Flex children stretch by default, which would blow a pill out to the full
   column width. */
.section-head > .badge {
  align-self: flex-start;
}

.section-head__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand-300);
  letter-spacing: var(--tracking-wide);
}

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
}

.site-header.is-stuck {
  background: var(--surface-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-block-end-color: var(--line);
}

.site-header__inner {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand__mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  color: var(--brand-500);
  transition:
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.brand:hover .brand__mark {
  color: var(--brand-400);
  transform: scale(1.05);
}

.brand__name {
  display: block;
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}

.brand__tag {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--brand-300);
  line-height: 1.4;
}

.nav {
  display: none;
  gap: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
}

/*
  A strip appears only once it fits. Shown too early it does not overflow —
  flex shrinks the links instead, and every label splits down the middle into
  two stacked lines, which reads as broken rather than as tight.

  Six entries fit here. The landing page carries ten, because it also lists its
  own sections, and those need about 1090px beside the brand and the header
  actions — so that one strip waits, and it is the only page with a drawer to
  wait behind. Raising this width for every page would leave the other four
  with no navigation at all between the two, since none of them has a menu
  button to fall back to.
*/
@media (min-width: 62rem) {
  .nav:not(.nav--long) {
    display: flex;
  }
}

@media (min-width: 68rem) {
  .nav--long {
    display: flex;
  }
}

@media (min-width: 80rem) {
  .nav {
    gap: var(--space-7);
  }
}

.nav__link {
  position: relative;
  padding-block: var(--space-2);
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out);

  /* A navigation label is one line. Without this it is the first thing flex
     gives up when the strip is a few pixels short. */
  flex: none;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-400), var(--accent-400));
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current='true'] {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
  transform-origin: inline-start;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__cta {
  display: none;
}

@media (min-width: 40rem) {
  .header__cta {
    display: inline-flex;
  }
}

.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.icon-btn:hover {
  background: rgb(255 255 255 / 10%);
  color: var(--text);
}

.icon-btn svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/*
  Paired with `.nav--long`: the landing page is the only page carrying this
  button, and it must stay until the strip that replaces it is ready.
*/
@media (min-width: 68rem) {
  .icon-btn--menu {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--shell-pad) var(--space-10);
  background: rgb(4 6 10 / 96%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-soft);
}

.drawer__nav a {
  transition: color var(--dur-base) var(--ease-out);
}

.drawer__nav a:hover {
  color: var(--accent-300);
}

/* -----------------------------------------------------------------------------
   Terminal
   -------------------------------------------------------------------------- */
.terminal {
  background: rgb(7 11 19 / 92%);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--glow-brand);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-inline-size: 0;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-3);
  border-block-end: 1px solid var(--line);
}

/* LTR so the lights read red, amber, green — the order their colours have
   meant for decades — regardless of the page direction around them. */
.terminal__lights {
  display: flex;
  gap: var(--space-2);
  direction: ltr;
}

.terminal__light {
  position: relative;
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* A 11px dot is a poor target for a finger; the hit area is widened without
   changing what is drawn. */
.terminal__light::after {
  content: '';
  position: absolute;
  inset: -0.5rem;
}

.terminal__light:hover,
.terminal__light:focus-visible {
  transform: scale(1.2);
  box-shadow: 0 0 8px currentcolor;
}

.terminal__light--close {
  background: #ff5f57;
  color: #ff5f57;
}

.terminal__light--minimize {
  background: #febc2e;
  color: #febc2e;
}

.terminal__light--maximize {
  background: #28c840;
  color: #28c840;
}

.terminal__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  direction: ltr;
  unicode-bidi: isolate;
}

.terminal__body {
  padding: var(--space-6);
  min-block-size: 21rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.95;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

/* Once the shell is live the panel has to hold a growing transcript without
   pushing the hero around, so it becomes its own scroll region. */
.terminal__body.is-interactive {
  max-block-size: min(26rem, 60svh);
  overflow-y: auto;
  scroll-behavior: smooth;
  cursor: text;
}

@media (prefers-reduced-motion: reduce) {
  .terminal__body.is-interactive {
    scroll-behavior: auto;
  }
}

@media (min-width: 40rem) {
  .terminal__body {
    font-size: var(--text-sm);
  }
}

.terminal__line + .terminal__line {
  margin-block-start: var(--space-2);
}

.terminal__comment {
  color: var(--text-dim);
}

.terminal__prompt {
  color: var(--brand-300);
}

.terminal__cmd {
  color: var(--ok-400);
  font-weight: 700;
}

.terminal__log {
  margin-block: var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--line-brand);
  color: var(--text-muted);
}

.terminal__log > div + div {
  margin-block-start: 0.35rem;
}

.terminal__tag {
  color: var(--accent-400);
}

.terminal__ok {
  color: var(--ok-400);
}

.terminal__panel {
  margin-block: var(--space-3);
  padding: var(--space-3);
  background: rgb(0 0 0 / 40%);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--text-2xs);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Terminal — the live prompt
   -------------------------------------------------------------------------- */

/* Printed output. A blank line carries a single space so it keeps its height. */
.terminal__out {
  white-space: pre-wrap;
}

/*
   Block-drawing art. The body's leading is set for reading prose; half-block
   glyphs need to sit directly on top of one another or they render as stripes
   with daylight between the rows instead of solid shapes.
*/
.terminal__out--art {
  line-height: 1;
}

.terminal__error {
  color: var(--danger-400);
}

.terminal__entry {
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
  margin-block-start: var(--space-2);
}

/*
   A real <input>, not a contenteditable div: it brings the mobile keyboard,
   IME composition, selection and a screen-reader-addressable label for free,
   all of which a faked caret has to reimplement badly.
*/
.terminal__input {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text);
  caret-color: var(--accent-400);
}

.terminal__input:focus {
  outline: none;
}

/* The focus indicator belongs on the panel, not on a borderless input inside
   it — that is the thing the visitor perceives as "the terminal". */
.terminal:has(.terminal__input:focus-visible) {
  border-color: var(--line-accent);
  box-shadow: var(--shadow-lg), var(--glow-accent);
}

/* -----------------------------------------------------------------------------
   Terminal — window states
   -------------------------------------------------------------------------- */

/* Holds the hero's grid cell open while the panel is out of flow. */
.terminal-slot {
  min-inline-size: 0;
}

.terminal--minimized .terminal__body {
  display: none;
}

.terminal--minimized .terminal__bar {
  cursor: pointer;
  border-block-end-color: transparent;
}

.terminal--maximized {
  position: fixed;
  inset: var(--space-4);
  z-index: 130;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
}

@media (min-width: 48rem) {
  .terminal--maximized {
    inset: var(--space-8);
  }
}

.terminal--maximized .terminal__body {
  flex: 1;
  max-block-size: none;
  font-size: var(--text-sm);
}

/* Dim the page behind the overlay. On <html> rather than a JS-injected node:
   one class toggle, nothing to clean up, nothing to leak. */
.is-terminal-maximized::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 125;
  background: rgb(2 4 8 / 82%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.caret {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 1rem;
  vertical-align: text-bottom;
  background: var(--accent-400);
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caret {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
   Tabs (scenario switcher)
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}

.tab {
  padding: 0.625rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected='true'] {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 0 18px -4px rgb(30 133 230 / 70%);
}

/* -----------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */
.metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
}

.metric__label {
  color: var(--text-muted);
}

.metric__value {
  font-family: var(--font-mono);
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) linear;
}

.metric__value--ok {
  color: var(--ok-400);
}

.metric__value--accent {
  color: var(--accent-400);
}

.metric__value--brand {
  color: var(--brand-300);
}

/* -----------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(2 4 8 / 82%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.dialog.is-open {
  opacity: 1;
  visibility: visible;
}

.dialog__panel {
  position: relative;
  inline-size: min(42rem, 100%);
  max-block-size: min(85svh, 46rem);
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--surface-1);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg), var(--glow-accent);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--dur-base) var(--ease-out);
}

.dialog.is-open .dialog__panel {
  transform: none;
}

@media (min-width: 40rem) {
  .dialog__panel {
    padding: var(--space-8);
  }
}

.dialog__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--line);
}

.dialog__close {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
}

.dialog__body {
  padding-block: var(--space-6);
}

.dialog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-soft);
}

.field__label .req {
  color: var(--accent-400);
}

.input,
.textarea,
.select {
  inline-size: 100%;
  padding: 0.875rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.6;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent-400);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 14%);
}

.textarea {
  min-block-size: 8rem;
  resize: vertical;
}

/* The chevron is an inline data: URI rather than a pair of clipped gradients —
   it stays crisp at any zoom and needs one background layer instead of two.
   Its colour is baked in, so keep it in step with --text-muted. */
.select {
  appearance: none;
  padding-inline-end: 2.75rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1.5 1.75 6 6.25l4.5-4.5" stroke="%238496ad" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 12px 8px;
}

[dir='ltr'] .select {
  background-position: right 1rem center;
}

/* Validation is only surfaced after the field has been interacted with, so an
   untouched form never greets the visitor in red. */
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  border-color: var(--danger-400);
  box-shadow: 0 0 0 3px rgb(248 113 113 / 12%);
}

.field__error {
  display: none;
  font-size: var(--text-2xs);
  color: var(--danger-400);
}

.field.is-invalid .field__error {
  display: block;
}

/* Bot trap: never shown, never announced, never tabbable. */
.honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-block-end: var(--space-6);
  /* Opposite corner from the agent launcher, so the two never stack. */
  inset-inline-start: var(--space-6);
  z-index: 120;
  max-inline-size: min(24rem, calc(100vw - 2 * var(--space-6)));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--accent-300);
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0;
  transform: translateY(0.75rem);
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.toast.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.toast--error {
  border-color: rgb(248 113 113 / 40%);
  color: var(--danger-400);
}

/* -----------------------------------------------------------------------------
   Scroll reveal. The class is added by JS only when IntersectionObserver is
   available, so a scriptless visitor sees fully rendered content.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   Brief — the stepped project form
   ========================================================================== */

.brief {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
}

@media (min-width: 40rem) {
  .brief {
    padding: var(--space-8);
  }
}

/* A fieldset that carries no visual weight of its own — the panel below is the
   surface, this is only a grouping the accessibility tree needs. */
.brief__panel {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.brief__legend {
  padding: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text);
}

/* --- progress ---------------------------------------------------------------
   Revealed by the stepper; without JavaScript every panel is on screen at once
   and a progress track would be describing something that is not happening. */
.brief__progress {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: brief-step;
}

.brief__step {
  flex: 1;
  display: flex;
}

.brief__tick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  /* Reset first, then restate the one border this actually wants. */
  appearance: none;
  background: none;
  border: 0;
  border-block-end: 2px solid var(--line-strong);
  font: inherit;
  font-size: var(--text-2xs);
  text-align: start;
  color: var(--text-dim);
  cursor: pointer;
  counter-increment: brief-step;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* It is a control now, so it has to look like one under the pointer. */
.brief__tick:hover {
  color: var(--text-soft);
  border-block-end-color: var(--text-dim);
}

.brief__tick:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.brief__tick::before {
  content: counter(brief-step);
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  flex: none;
  border-radius: var(--r-full);
  border: 1px solid currentcolor;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.brief__tick.is-done {
  color: var(--ok-400);
  border-block-end-color: rgb(52 211 153 / 40%);
}

.brief__tick.is-done::before {
  content: '✓';
}

.brief__tick.is-current {
  color: var(--accent-300);
  border-block-end-color: var(--accent-400);
}

.brief__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}

/* `hidden` on a flex child loses to `display: flex`; restate it. */
.brief__nav [hidden] {
  display: none;
}

/* --- service picker --------------------------------------------------------- */
.choices {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.choice {
  position: relative;
  display: flex;
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

/* The radio stays in the accessibility tree and keeps the label association —
   it is only removed visually, never replaced with a div pretending to be one. */
.choice input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
}

.choice:hover {
  border-color: var(--line-brand);
}

.choice:has(input:checked) {
  border-color: var(--accent-400);
  background: rgb(34 211 238 / 8%);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}

.choice__body {
  display: grid;
  gap: 0.15rem;
}

.choice__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.choice__note {
  font-size: var(--text-2xs);
  color: var(--text-dim);
  line-height: var(--leading-normal);
}

/* --- textarea footer -------------------------------------------------------- */
.field__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.field__count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  white-space: nowrap;
}

/* --- review ------------------------------------------------------------------
   Hidden in the markup and revealed only after /api/capabilities confirms a
   reviewer exists, so a deployment without one shows no dead control. */
.review {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgb(139 92 246 / 6%);
  border: 1px solid rgb(167 139 250 / 26%);
  border-radius: var(--r-xl);
}

.review__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* A grid child stretches; this button should be the width of its label. */
.review > .btn {
  justify-self: start;
}

.review__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.review__note {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.review__result {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
}

.review__summary {
  color: var(--text);
  font-weight: 700;
  line-height: var(--leading-normal);
}

.review__heading {
  color: var(--violet-400);
  font-size: var(--text-2xs);
}

/* The global `ul[class]` reset strips markers; these are a genuine list of
   discrete items and read better with them back. */
.review__questions {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  list-style: disc;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.review__questions li::marker {
  color: var(--violet-400);
}

.review__apply {
  justify-self: start;
  white-space: normal;
  text-align: start;
}

.review__error {
  color: var(--danger-400);
  line-height: var(--leading-normal);
}