/* ==========================================================================
   ARCHITECTURE DIAGRAM (How AdPilot works — both homepages)
   --------------------------------------------------------------------------
   Reference (29 Sep, second pass): neon.com "Lakebase architecture". Read as
   an architecture drawing, not a card:
     · a hatched backdrop field behind everything, closed by a baseline;
     · the input ("Ticket or request") as an outside box with an icon;
     · the product frame (AdPilot) on a plain ground;
     · dashed groups headed by an icon + title (Modules, Release);
     · components as filled sage boxes with mono sub-lines, some with a
       header strip ("Humans approve");
     · thin connectors with mono labels.
   Annotations: each module has a square accent marker on its box edge.
   The selected module's note is a card OUTSIDE the frame (bottom-left, as
   on Neon), joined to its marker by a leader line that grows from the
   marker; the card appears as the line arrives (assets/js/arch.js).
   Switching notes only redraws the leader — the diagram's own connectors
   draw once, when it first scrolls into view (.arch--play), and never
   replay.

   Colours are the section's vars plus the palette's sage/jade, so it sits
   light on v1's paper and dark on v2's night-2. The note card inverts the
   section (heading-colour card, ground-colour text). Copy: every word is
   already on the page.
   ========================================================================== */

.arch {
  --arch-line: color-mix(in srgb, var(--heading) 45%, var(--ground));
  --arch-dash: color-mix(in srgb, var(--heading) 30%, var(--ground));
  --arch-fill: color-mix(in srgb, var(--ill-sage) 20%, var(--ground));
  --arch-fill-2: color-mix(in srgb, var(--ill-sage) 9%, var(--ground));
  --arch-edge: color-mix(in srgb, var(--ill-jade) 50%, var(--ground));
  --note-bg: color-mix(in srgb, var(--heading) 94%, var(--ground));
  --note-ink: var(--ground);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 244px) 56px minmax(0, 1fr);
  align-items: center;
  --pad-t: 290px;                           /* room for the notes above the frame */
  --pad-b: 180px;                           /* and below it */
  padding: var(--pad-t) 0 var(--pad-b);
  font-family: var(--font-nav, var(--font-body));
}

/* Backdrop field: a faint vertical hatch from behind the input box to the
   right edge, closed by a baseline — Neon's drafting-table ground. */
.arch::before {
  content: '';
  position: absolute;
  top: 170px; bottom: calc(var(--pad-b) - 32px); left: 132px; right: 0;
  z-index: -1;
  border-bottom: var(--border-w) solid var(--arch-line);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--heading) 7%, transparent) 0 1px, transparent 1px 6px),
    color-mix(in srgb, var(--heading) 4%, var(--ground));
}

/* The input, outside the product frame. */
/* Input and its connector sit level with the Spec row (≈190px into the
   frame), so the flow reads Ticket → Spec and the note slot below is clear. */
.arch__app {
  --spec-row: 190px;
  align-self: start;
  margin-top: calc(var(--spec-row) - 30px);
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border: var(--border-w) solid var(--arch-line);
  background: var(--ground);
  font-size: 16px;
  white-space: nowrap;
  color: var(--heading);
  --icon-size: 20px;
  --icon-stroke: 1.5;
}
.arch__app b { font-weight: 500; }
.arch__app .icon { color: var(--ink-muted); }

/* Connector lines. Each is a transparent track: ::before is the stroke
   (so it can draw in), ::after the arrowhead. */
.arch__join { position: relative; align-self: start; margin-top: 190px; height: var(--border-w); }
.arch__join::before { content: ''; position: absolute; inset: 0; background: var(--arch-line); transform-origin: left center; }
.arch__join::after {
  content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  border: 5px solid transparent; border-right-width: 0; border-left: 6px solid var(--arch-line);
}

/* Product frame. */
.arch__panel {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  border: var(--border-w) solid var(--arch-line);
  background: var(--ground);
}
.arch__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-5);
  font-size: 18px;
  font-weight: 500;
  color: var(--heading);
}
.arch__logo {
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat;
          mask: url(../img/brand/mark.svg) center / contain no-repeat;
}
.arch__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

/* Dashed groups, headed by an icon + title. */
.arch__group {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-w) dashed var(--arch-dash);
  background: color-mix(in srgb, var(--heading) 2%, var(--ground));
}
.arch__ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 16px;
  color: var(--heading);
  --icon-size: 17px;
  --icon-stroke: 1.5;
}
.arch__ghead .icon { color: var(--ink-muted); }

/* Components: filled sage boxes, titles centred, mono sub-lines. */
.arch__box {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 14px 16px;
  border: var(--border-w) solid var(--arch-edge);
  background: var(--arch-fill);
  text-align: center;
}
.arch__box > b { font-size: 16px; font-weight: 500; color: var(--heading); }
.arch__sub {
  font-family: var(--font-mono, var(--font-body));
  font-size: 12px;
  color: var(--ink-muted);
}
.arch__strip {
  justify-self: stretch;
  margin: -14px -16px 8px;
  padding: 6px 16px;
  border-bottom: var(--border-w) solid var(--arch-edge);
  background: var(--arch-fill-2);
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Markers: square accent buttons straddling a box edge — the left edge for
   the Modules boxes, the bottom edge for On-call. Boxy per the button
   rule. The selected one fills solid with a square core, as on Neon. */
.arch__hot {
  position: absolute;
  z-index: 3;
  left: -10px; top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  padding: 0;
  border: var(--border-w) solid color-mix(in srgb, var(--accent) 70%, var(--ground));
  border-radius: var(--radius-control, 0);
  background: color-mix(in srgb, var(--accent) 22%, var(--ground));
  color: var(--accent-text, var(--accent));
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease);
}
.arch__hot .icon { --icon-size: 12px; --icon-stroke: 2.5; }
.arch__box--hot-bottom .arch__hot { left: 50%; top: auto; bottom: -10px; translate: -50% 0; }
.arch__box--hot-top .arch__hot    { left: 50%; top: -10px; translate: -50% 0; }
.arch__box--hot-right .arch__hot  { left: auto; right: -10px; }
.arch__hot:hover,
.arch__hot:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-on, var(--ground)); }
.arch__hot[aria-expanded="true"] { background: var(--heading); border-color: var(--heading); color: var(--heading); }
.arch__hot[aria-expanded="true"] .icon { display: none; }
.arch__hot[aria-expanded="true"]::after { content: ''; width: 7px; height: 7px; background: var(--ground); }
.arch__hot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Connectors between the groups, mono label above the line. */
.arch__mid { display: grid; gap: var(--space-8); }
.arch__arrow { display: grid; justify-items: center; gap: 6px; min-width: 104px; }
.arch__arrow span,
.arch__rise span { font-family: var(--font-mono, var(--font-body)); font-size: 12px; color: var(--ink-muted); }
.arch__arrow i { position: relative; width: 100%; height: var(--border-w); }
.arch__arrow i::before { content: ''; position: absolute; inset: 0; background: var(--arch-line); transform-origin: left center; }
.arch__arrow i::after {
  content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  border: 5px solid transparent; border-right-width: 0; border-left: 6px solid var(--arch-line);
}
.arch__rise { display: flex; align-items: center; justify-content: center; gap: 10px; }
.arch__rise i { position: relative; width: var(--border-w); height: 28px; }
.arch__rise i::before { content: ''; position: absolute; inset: 0; background: var(--arch-line); transform-origin: center bottom; }
.arch__rise i::after {
  content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0;
  border: 5px solid transparent; border-top-width: 0; border-bottom: 6px solid var(--arch-line);
}

/* ------------------------------------------------------------- notes */
/* Each note has its own place outside the frame, beside its marker, as on
   Neon: Spec and Review above the frame (Review over the gap between the
   groups), Code bottom-left under the input, On-call hanging below the
   bottom-right corner. The leader (SVG overlay, arch.js) runs from the
   marker to the note's nearest corner. */
.arch__notes { display: contents; }
.arch__note {
  position: absolute;
  z-index: 4;
  width: 270px;
  padding: 14px 16px 18px;
  background: var(--note-bg);
  color: var(--note-ink);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 220ms var(--motion-ease), translate 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
}
#arch-note-spec   { left: 150px; bottom: calc(100% - var(--pad-t) + 28px); }
#arch-note-review { left: 60%;   bottom: calc(100% - var(--pad-t) + 28px); }
#arch-note-code   { left: 0;     top: calc(var(--pad-t) + 250px); }
#arch-note-oncall { right: 0;    top: calc(100% - var(--pad-b) - 40px); }
.arch__note.is-shown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 260ms var(--motion-ease) var(--note-delay, 0ms),
              translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--note-delay, 0ms), visibility 0s;
}
.arch__note-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 72px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--note-ink) 7%, var(--note-bg));
  color: var(--note-ink);
  --icon-size: 34px;
  --icon-stroke: 1.25;
}
.arch__note-art::before {                 /* corner brackets */
  content: '';
  position: absolute;
  inset: 6px;
  --b: color-mix(in srgb, var(--note-ink) 55%, transparent);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 8px 1px, linear-gradient(var(--b), var(--b)) 0 0 / 1px 8px,
    linear-gradient(var(--b), var(--b)) 100% 0 / 8px 1px, linear-gradient(var(--b), var(--b)) 100% 0 / 1px 8px,
    linear-gradient(var(--b), var(--b)) 0 100% / 8px 1px, linear-gradient(var(--b), var(--b)) 0 100% / 1px 8px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 8px 1px, linear-gradient(var(--b), var(--b)) 100% 100% / 1px 8px;
  background-repeat: no-repeat;
}
.arch__note b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-label, var(--font-mono));
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arch__note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--note-ink) 78%, var(--note-bg));
}

.arch__leader {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.arch__leader path {
  fill: none;
  stroke: color-mix(in srgb, var(--heading) 75%, var(--ground));
  stroke-width: 1.25;
}
.arch__leader path.is-growing { transition: stroke-dashoffset 480ms cubic-bezier(0.3, 0.7, 0.2, 1); }

/* --------------------------------------------------------------------------
   First-view draw of the diagram's own connectors: join, then the two mid
   arrows, then the alert rise. Runs once (arch.js adds .arch--play when the
   diagram first enters view); switching notes never touches it. */
@media (prefers-reduced-motion: no-preference) {
  .arch--play .arch__join::before { animation: arch-draw-x 0.45s var(--motion-ease, ease) both; }
  .arch--play .arch__join::after  { animation: arch-head 0.2s ease both 0.35s; }
  .arch--play .arch__arrow:nth-child(1) i::before { animation: arch-draw-x 0.45s var(--motion-ease, ease) both 0.35s; }
  .arch--play .arch__arrow:nth-child(1) i::after  { animation: arch-head 0.2s ease both 0.7s; }
  .arch--play .arch__arrow:nth-child(2) i::before { animation: arch-draw-x 0.45s var(--motion-ease, ease) both 0.55s; }
  .arch--play .arch__arrow:nth-child(2) i::after  { animation: arch-head 0.2s ease both 0.9s; }
  .arch--play .arch__rise i::before { animation: arch-draw-y 0.4s var(--motion-ease, ease) both 0.9s; }
  .arch--play .arch__rise i::after  { animation: arch-head 0.2s ease both 1.2s; }
}
@keyframes arch-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arch-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes arch-head   { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .arch__note, .arch__note.is-shown { transition: none; translate: 0 0; }
  .arch__leader path.is-growing { transition: none; }
}

/* ------------------------------------------------------------- phones */
@media (max-width: 900px) {
  .arch { grid-template-columns: 1fr; justify-items: start; padding: 24px 0 0; }
  .arch::before { left: 0; top: 0; bottom: auto; height: 100%; border-bottom: 0; }
  .arch__app { margin: 0 0 0 16px; }
  .arch__join { width: var(--border-w); height: 32px; margin: 0 0 0 56px; }
  .arch__join::before { transform-origin: center top; }
  .arch__join::after {
    right: auto; top: auto; left: 50%; bottom: 0; translate: -50% 0;
    border: 5px solid transparent; border-bottom-width: 0; border-top: 6px solid var(--arch-line);
  }
  .arch__panel { width: 100%; padding: var(--space-5); }
  .arch__cols { grid-template-columns: 1fr; gap: var(--space-5); }
  .arch__mid { grid-auto-flow: column; justify-content: start; gap: var(--space-8); padding-left: var(--space-5); }
  .arch__arrow { min-width: 0; }
  .arch__arrow i { width: var(--border-w); height: 26px; }
  .arch__arrow i::before { transform-origin: center top; }
  .arch__arrow i::after {
    right: auto; top: auto; left: 50%; bottom: 0; translate: -50% 0;
    border: 5px solid transparent; border-bottom-width: 0; border-top: 6px solid var(--arch-line);
  }
  @media (prefers-reduced-motion: no-preference) {
    .arch--play .arch__join::before, .arch--play .arch__arrow i::before { animation-name: arch-draw-y; }
  }
  /* Notes flow under the frame; no leader. */
  .arch__notes { display: block; width: 100%; }
  .arch__note { position: static; width: auto; display: none; margin-top: var(--space-5); }
  .arch__note.is-shown { display: block; }
  .arch__leader { display: none; }
}

/* Mobile note type (1 Oct): title 14px, description 12px. */
@media (max-width: 900px) {
  .arch__note b { font-size: 14px; }
  .arch__note p { font-size: 12px; }
}