/* The frame system -- shared by the marketing site, the docs and the console.
   Loaded on its own because the landing page carries a self-contained
   stylesheet and does not load styles.css; a single small file is what lets
   both use the same values instead of two copies that drift. */
:root {
  --measure-page: 1200px;

  /* Depth is carried by DARKNESS, never by a shadow. A panel darker than its
     ground reads as cut into the surface -- an instrument, a window. A panel
     floating on a shadow reads as a card, the grammar of every template on
     the internet. Our page ground is already #08080A, so these go BELOW it. */
  --sunk-1:  #050506;
  --sunk-2:  #030304;

  /* SOLID is fixed apparatus; DASHED is the drawing -- a line that measures
     space rather than encloses it. */
  --rail-line:    rgba(233, 230, 226, 0.12);
  --rule:    rgba(233, 230, 226, 0.14);
  --edge:    rgba(233, 230, 226, 0.10);
  --edge-2:  rgba(233, 230, 226, 0.14);
  /* Interior dividers are exactly HALF the outer edge, everywhere, so
     containment always outranks subdivision. */
  --inner:   rgba(233, 230, 226, 0.07);
}

/* ===================================================================
   The frame system.

   There is no container. There is a repeated MEASURE with its edges
   marked, and the eye assembles a rectangle that is not in the DOM.

   Four lines, never on the same element:
     - two dashed verticals, inset to the 1200px measure  (.rail)
     - two dashed horizontals, full bleed edge to edge    (.rail-sec)

   Open rather than closed is the whole trick. A closed rectangle is a
   card; an open one is a frame. Same information, opposite class
   signal. Dashed rather than solid because in technical drawing a
   dashed line describes space instead of containing it -- so the page
   reads as a drawing of a system rather than a stack of panels.
   =================================================================== */

/* The section owns the border and NO padding. All vertical padding lives
   on the inner .rail, which is what lets the verticals reach the
   horizontals -- if the padding sat here, every rail would stop short of
   the divider by exactly that amount and each joint would show a gap. */
.rail-sec { padding: 0; border-top: 1px dashed var(--rule); }
.rail-sec:first-of-type { border-top: 0; }

.rail {
  position: relative;
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: 96px clamp(20px, 4vw, 48px);
}

/* top/bottom -1px is the weld. The two lines come from different
   elements, so the vertical has to be pushed INTO the horizontal;
   without the overshoot it lands 1px shy and the frame visibly
   detaches at every joint. */
.rail::before, .rail::after {
  content: ""; position: absolute; top: -1px; bottom: -1px;
  border-left: 1px dashed var(--rail-line); pointer-events: none;
}
.rail::before { left: 0; }
.rail::after  { right: 0; }

/* Air tracks importance, so the measure is constant and the padding is not. */
/* Air tracks importance, and every variant carries a bottom as well as a top:
   a section whose padding ended at 0 sat its last line directly on the
   dashed divider below it. */
.rail--hero { padding-top: 56px; padding-bottom: 72px; }
.rail--tight { padding-top: 56px; padding-bottom: 56px; }
.rail--wide { padding-top: 112px; padding-bottom: 112px; }

/* A frame repeated eight times stops registering. Dropping it once resets
   the eye and every section after it reads as framed again -- and the one
   that drops it should be the one that is an ARTIFACT rather than an
   argument. Recessed and unframed reads as "look at the thing itself". */
.rail-sec--bare { background: var(--sunk-1); border-top: 1px dashed var(--rule); }
.rail-sec--bare .rail::before, .rail-sec--bare .rail::after { border-left: 0; }

/* --- viewport: holds a figure ------------------------------------------
   8px is a MAT, not padding: it stops the content touching the frame, so
   the thing inside reads as a specimen under glass. Border is soft (.10)
   so it never competes with what it holds. */
.viewport {
  border: 1px solid var(--edge); background: var(--sunk-1);
  padding: 8px; border-radius: 0;
}
.viewport__legend {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 9px 4px 2px;
}

/* --- terminal: holds text ----------------------------------------------
   Zero outer padding, because a terminal IS the surface -- text meeting
   its own edge is correct here. Crisper border (.14) because with no
   padding the content needs a defined edge. Same family as .viewport,
   opposite padding, both right. */
.terminal {
  border: 1px solid var(--edge-2); background: var(--sunk-2);
  padding: 0; border-radius: 0;
}
.terminal__bar {
  padding: 10px 14px; border-bottom: 1px solid var(--inner);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
  display: flex; justify-content: space-between; gap: 12px;
}
.terminal__body { padding: 16px 14px; }

/* --- gap-grid ----------------------------------------------------------
   No cell owns a border. The dividers are the parent's background showing
   through 1px gaps, which is why adjacent cells can never double-border. */
.gapgrid {
  display: grid; gap: 1px; background: var(--inner);
  border: 1px solid var(--edge);
}
.gapgrid > * { background: var(--bg); }

/* Most of "flawless" is simply no reflow: a box that holds its size while
   its contents swap. */
.hold-sm { min-height: 120px; }
.hold-md { min-height: 208px; }
.hold-lg { min-height: 260px; }


/* ===================================================================
   The measure, applied site-wide.

   Containers COMPOSE .measured in their markup rather than having it
   restated for them here. The first cut of this file declared .wrap and
   .docs directly, which duplicated 1786 bytes into styles.css and meant
   the frame reached into components another file owns.

   There are no horizontals on these pages: they are one continuous
   article rather than a stack of sections, so there is nothing for the
   verticals to weld to and the overshoot is not needed.
   =================================================================== */
/* ONE definition of "a measured column with its edges drawn". Everything
   that wants the frame composes this instead of restating six declarations:
   the recipe was hand-copied into four containers across two applications,
   which meant changing the rail from dashed to dotted was a three-file edit
   -- exactly what the frame system exists to end. */
.measured {
  max-width: var(--measure-page);
  margin-inline: auto;
  position: relative;
}
.measured::before, .measured::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  border-left: 1px dashed var(--rail-line); pointer-events: none;
}
.measured::before { left: 0; }
.measured::after  { right: 0; }

/* A page whose content already draws its own frame does not need a second
   one around it -- two nested rails read as a mistake, not a system. */
.measured--bare::before, .measured--bare::after { border-left: 0; }

/* Docs get the measure AND keep the prose bounded in ch. The container
   stops the three columns stretching across a wide display; --measure
   keeps the line length readable inside it. Both, not either. */


/* The landing's own sections, now on the same measure as every other page.
   They carried max-width:1240px inline; the rail is 1200px, so the eight
   sections and the docs column line up at the same x-coordinate. That
   identical position is the entire point -- it is what stops the eye reading
   eight blocks and starts it reading one column. */