/*
 * GRITT Perimeter
 *
 * A quiet, confidence-gated semantic projection inside the conversation
 * surface. The top is the current conversational centre; the lower field is
 * deliberately irregular because a possible continuation is not a forecast
 * or a hierarchy.
 */

html[data-page="index"] .gritt-perimeter {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: min(660px, 76%);
  height: clamp(340px, 46vh, 560px);
  height: clamp(340px, 46dvh, 560px);
  min-width: 0;
  min-height: 0;
  margin: 18px auto 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: rgba(47, 52, 61, .74);
  background:
    radial-gradient(ellipse 48% 86% at 48% 100%, rgba(104, 96, 224, .068), rgba(104, 96, 224, .025) 58%, transparent 100%),
    radial-gradient(ellipse 42% 78% at 29% 94%, rgba(64, 168, 143, .058), rgba(64, 168, 143, .018) 62%, transparent 100%);
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 420ms ease,
    transform 500ms cubic-bezier(.2, .72, .2, 1);
}

html[data-page="index"].gritt-perimeter-visible .gritt-perimeter {
  opacity: 1;
  transform: translateY(0);
}

/*
 * The background-input layout normally reserves a large empty tail below the
 * draft. Perimeter itself now supplies that final visual field, so retaining
 * the spacer would visibly cut the projection off before the viewport edge.
 */
html[data-page="index"].gritt-perimeter-visible.gritt-hide-input-box #msgs.chat {
  scroll-padding-bottom: 12px !important;
}

html[data-page="index"].gritt-perimeter-visible.gritt-hide-input-box #msgs.chat::after {
  flex-basis: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}

html[data-page="index"][data-theme="carbon-steel"] .gritt-perimeter,
html[data-page="index"].cs-carbon-steel .gritt-perimeter,
html[data-page="index"][data-skin="carbon-steel"] .gritt-perimeter {
  color: rgba(213, 220, 229, .68);
  background:
    radial-gradient(ellipse 48% 86% at 48% 100%, rgba(121, 111, 236, .085), rgba(121, 111, 236, .03) 58%, transparent 100%),
    radial-gradient(ellipse 42% 78% at 29% 94%, rgba(70, 184, 153, .065), rgba(70, 184, 153, .022) 62%, transparent 100%);
}

html[data-page="index"] .gritt-perimeter__stage,
html[data-page="index"] .gritt-perimeter__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

html[data-page="index"] .gritt-perimeter__svg {
  overflow: visible;
}

html[data-page="index"] .gritt-perimeter__edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: .13;
  vector-effect: non-scaling-stroke;
  transition: opacity 220ms ease, stroke-width 220ms ease;
}

html[data-page="index"] .gritt-perimeter__edge.is-deep {
  stroke-dasharray: 2.4 5.8;
  opacity: .09;
}

html[data-page="index"] .gritt-perimeter__edge.is-near {
  opacity: .34;
  stroke-width: 1.55;
}

html[data-page="index"] .gritt-perimeter__edge.is-muted {
  opacity: .025;
}

html[data-page="index"] .gritt-perimeter__node {
  cursor: default;
  outline: none;
  opacity: .82;
  transition: opacity 220ms ease;
}

html[data-page="index"] .gritt-perimeter__node.is-depth-2 {
  opacity: .72;
}

html[data-page="index"] .gritt-perimeter__node.is-depth-3 {
  opacity: .62;
}

html[data-page="index"] .gritt-perimeter__node.is-loose {
  opacity: .58;
}

html[data-page="index"] .gritt-perimeter__node.is-muted {
  opacity: .15;
}

html[data-page="index"] .gritt-perimeter__halo {
  fill: var(--perimeter-node, #6864e8);
  opacity: .055;
  transform-box: fill-box;
  transform-origin: center;
  animation: gritt-perimeter-breathe 8.5s ease-in-out infinite;
}

html[data-page="index"] .gritt-perimeter__node.is-loose .gritt-perimeter__halo {
  opacity: .04;
  animation-duration: 11s;
}

html[data-page="index"] .gritt-perimeter__dot {
  fill: color-mix(in srgb, var(--perimeter-node, #6864e8) 72%, #8b9098);
  stroke: color-mix(in srgb, white 66%, var(--perimeter-node, #6864e8));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 7px rgba(45, 44, 91, .09));
  transition: r 220ms ease, filter 220ms ease;
}

html[data-page="index"] .gritt-perimeter__node:is(:hover, :focus-visible) {
  opacity: 1;
}

html[data-page="index"] .gritt-perimeter__node:is(:hover, :focus-visible) .gritt-perimeter__dot {
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--perimeter-node, #6864e8) 25%, transparent));
}

html[data-page="index"] .gritt-perimeter__label {
  fill: currentColor;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.2px;
  font-weight: 400;
  letter-spacing: -.018em;
  paint-order: stroke;
  stroke: rgba(244, 246, 249, .84);
  stroke-width: 4px;
  stroke-linejoin: round;
}

html[data-page="index"] .gritt-perimeter__node.is-loose .gritt-perimeter__label {
  font-size: 10.8px;
}

html[data-page="index"][data-theme="carbon-steel"] .gritt-perimeter__label,
html[data-page="index"].cs-carbon-steel .gritt-perimeter__label,
html[data-page="index"][data-skin="carbon-steel"] .gritt-perimeter__label {
  stroke: rgba(15, 20, 29, .76);
}

@keyframes gritt-perimeter-breathe {
  0%, 100% { transform: scale(.84); opacity: .038; }
  51% { transform: scale(1.14); opacity: .085; }
}

/*
 * Mobile/app layout is intentionally left for a separate design pass. The
 * semantic projection does not claim screen space there yet.
 */
@media (max-width: 800px) {
  html[data-page="index"] .gritt-perimeter {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="index"] .gritt-perimeter,
  html[data-page="index"] .gritt-perimeter__edge,
  html[data-page="index"] .gritt-perimeter__node,
  html[data-page="index"] .gritt-perimeter__dot {
    transition: none !important;
  }

  html[data-page="index"] .gritt-perimeter__halo {
    animation: none !important;
  }
}