/* Dominia — the secure-channel monitor.
   Owner piece: access.html + js/monitor.js.

   The terminal half of the early-access page; css/access.css carries the other half, the pitch
   column beside it. It shares every primitive with the rest of the site — the .panel's chamfer
   and outline, the paper chip, the mono label ladder, the ruled rail off the corporates page,
   the live mark off the hero's claim HUD — and adds exactly two things of its own: a screen, and
   a print head.

   WHY IT IS ALLOWED TO TYPE. The brand rule is that numbers may count and glyphs never slide or
   fade (see js/corporates.js). Nothing here slides and nothing fades: characters arrive, one
   after another, at full opacity and final position. That is a teletype, not an animation of
   type, and it is the one motion a monitor is actually for. The rule it must still answer to is
   the reader's — so the print is skippable on any click or keypress, and under
   prefers-reduced-motion js/monitor.js sets every node instantly and the caret stops blinking.

   THE RED BUDGET. Two Claim elements, which is exactly what the hero spends: the live mark on
   the bar and the register shadow under the chip. Same pairing, same screen. Nothing else here
   reaches for the accent — the locked-city line takes the dossier stamp's pressed-once #B0523A,
   and the one green is --alliance on a Realm that is open, which is the same rule the dossier
   footer follows for `Intake: Open`. */


/* ---------------------------------------------------------------- the section */

/* THE SECTION IS THE FRAME. It was a band of content floating in the middle of the viewport with
   ~100px of unclaimed ground under it and no bottom edge; the bar's compositions always resolve
   against an edge — the /origin hero's headline sits ON the bottom of the frame, its footer grid
   runs hairlines out to the viewport's own sides. So this section now takes the height it is
   standing in and closes on a full-bleed rule.

   `min-height`, not `height`: at 700px tall the content is taller than the frame and must be
   allowed to push past it rather than be squashed. 100svh rather than 100vh because the phone's
   collapsing toolbar otherwise makes the first paint 60-90px too tall.

   ROUND 4: THE COMPOSITION OWNS THE WHOLE FRAME AND THE FOOTER IS UNDER IT. Round 2 subtracted
   the footer's 82px as well, so the entire document — nav, composition, sign-off — resolved in
   one 900px screen. The instinct was right and the result was not: a blind critic read the
   visible footer as the page having ended before the fold, which is exactly what it looks like.
   The reference does the opposite and it is the reason its hero holds — the /origin hero is the
   viewport, edge to edge, and the footer is somewhere below it, reached by scrolling. A hero that
   fits inside the fold with room to spare is a hero that has stopped being a hero.

   So only the nav is subtracted now. The section is the frame, its own bottom hairline lands on
   the fold, and the 82px this bought back go where they are worth the most: into the height of
   the panel, and therefore into the board. */
.monitor {
  position: relative;
  /* Nav (52 + its rule) subtracted, and nothing else: the composition is the screen. */
  min-height: calc(100svh - 53px);
  display: flex;
  flex-direction: column;
  padding-block: var(--s-16) var(--s-16);
}

/* The floor. One hairline out to both edges of the viewport — the same device the bar's footer
   uses, and the thing the composition had no version of before. */
.monitor::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--hairline);
}

.monitor__inner {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* THREE ROWS, and the middle one is the whole composition.
       1  the pitch column          the terminal spans 1 and 2
       2  the action bar            645px wide against a 425px column, so it crosses onto the
                                    terminal's lower-left corner
       3  the floor rail            all twelve columns, under everything
     Rows rather than absolute positioning because the bar has to be BELOW the grants in flow —
     first attempt put it in row 1 on `align-self: end` and it landed on top of them — while its
     floor still has to be the terminal's floor. Spanning the panel over rows 1 and 2 buys both
     with no reserved height and no magic number. */
  grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  /* Both columns run to a common baseline. Stretched rather than start-aligned because the two
     used to end 44px apart on nothing — a terminal and a column of copy that agree at the top and
     disagree at the bottom read as two blocks that happened to land near each other. */
  align-items: stretch;
  position: relative;
}

/* THE COLUMN RULE IS GONE, and the reasoning that put it there was the mistake.
   It was a full-height hairline down the middle of the gutter with a tick crossing it at each
   end, measured off ref-home-d-05, where the bar divides its footer into three with exactly that
   device. What that reading missed is what the bar's rule is FOR: it separates three unrelated
   footer columns — Contact, Connect, Subscribe — that would otherwise run together. Here it stood
   between a headline and the instrument answering it, which are one statement, and it gave the
   reader's eye a vertical line to land on exactly halfway between the two things worth looking at.
   A blind critic called it pointless and said the eye lands in the gutter; it was right. Two
   columns of a twelve-column grid, with five clear tracks of air between them, are already
   obviously two columns. */

/* Copy left, equipment right. .access__pitch takes its own 1 / span 4 from css/access.css, which
   this page loads first; the monitor answers it at 5 / span 8.

   EIGHT COLUMNS, AND THE PREVIOUS NOTE HERE WAS THE MISTAKE. It argued for five on the grounds
   that a terminal is a portrait object and should stand beside the copy rather than lie across
   the page. Measured, five-and-five produced two blocks of exactly 535px separated by 235px of
   gutter, and the blind verdict on that round named it: nothing dominates, the eye has no reason
   to prefer either half, and the reading path never reaches the control. The reference is not two
   columns — its /origin hero is a single 715x420 landscape plate with a headline crossing its
   corner, and every other composition on that site is one mass and one voice.

   865px against 380px, holding the only image and the only colour on the page. The action bar
   crosses onto its lower-left corner from css/access.css, which is what makes the two one
   object. */
.monitor__col { grid-column: 5 / span 8; grid-row: 1 / span 2; display: grid; }

.monitor__col.registered {
  --register-gap: 16px;
  /* WITHOUT THIS THE OUTLINE DOES NOT EXIST. `.registered` draws it on a `z-index: -1`
     pseudo-element, and `.registered` alone only sets `position: relative` — no stacking context.
     This page's <html> carries an explicit background (css/base.css), so the body's background is
     NOT propagated to the canvas: it paints as an ordinary block box, which in the root stacking
     context comes after every negative-z descendant. The outline was rendering perfectly and
     being painted over by the page ground, on both the panel and the column, silently and with
     the computed styles all reading correct. `isolation` gives the column its own stacking
     context so the -1 lands behind the panel rather than behind the page. */
  isolation: isolate;
}

/* The weight it needs to be seen at. Its default is --hairline, tuned for a rule INSIDE a lit
   panel; standing on the page ground 16px off the equipment that measured invisible at 1440.
   --hairline-strong is the rung the panel edges themselves sit on, and 16px is the bar's own
   measured stand-off. */
.monitor__col.registered::after { border-color: var(--hairline-strong); }


/* ---------------------------------------------------------------- the set

   .panel paints its outline as its own background and floats the fill 1px inside on ::before,
   so the fill goes on --panel-fill and the children are already above it via `.panel > *`.

   THREE ROWS NOW, AND THE PANEL ENDS ON THE MAP. It had four: bar, screen, rail, and a 128px
   action row holding one chip. That row was the round-3 defect a blind critic named — "below it
   sits a 120px band of flat brown holding nothing but a stranded CONTINUE button — space nobody
   filled, inside the page's largest element" — and the instruction was as plain as the diagnosis:
   let the map bleed to the panel's bottom edge so the panel ends on the map, not on empty ground.

   So the screen is the last thing in the panel bar the rail, which is 1px, and the board (which
   is `inset: 0` inside the screen) now runs the full height of the equipment. The chip that stood
   in that row is gone entirely: the advance is an instrument mark inside the display and the act
   is the cream bar crossing the panel's lower-left corner. See css/access.css.

   `align-content: stretch` is what makes the well absorb the frame's height rather than the panel
   sitting at the height of its own contents. The inline min-height js/monitor.js locks onto the
   screen is still a floor under this and still does its job: it is what stops the panel changing
   height between nodes on a viewport too short for the stretch to reach. */


.monitor__set {
  --panel-fill: var(--ink-3);
  --edge-line: var(--hairline-hi);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}


/* ---------------------------------------------------------------- the bar */

.monitor__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-4);
  border-bottom: 1px solid var(--hairline);
  color: var(--slate-2);
}

/* Mark and title read as one statement only when they are adjacent, so the readout is pushed to
   the far edge with margin-left rather than the bar being spaced out — the same pattern the
   hero's HUD uses for its clock. */
.monitor__count { margin-left: auto; color: var(--slate); font-variant-numeric: tabular-nums; }

/* The live mark, on the 2s ambient beat this brand reserves for things that are alive. Same
   element and same keyframes as .hero__hud-live; motion.css turns it off under reduced motion,
   and js/monitor.js drops .is-live when the transmission ends. */
.monitor__live {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--claim);
  animation: live-pulse var(--dur-ambient) ease-in-out infinite;
}

/* Channel closed. The mark stops breathing and goes to the ladder, because a dot still pulsing
   under the words END TRANSMISSION is the panel contradicting itself. */
.monitor__set[data-state="closed"] .monitor__live {
  animation: none;
  background: var(--slate);
}


/* ---------------------------------------------------------------- the screen

   A well inside the sheet: --ink-0 is the darkest rung the palette has, and putting it inside a
   panel filled at --ink-3 is what makes this read as a display set into a device rather than a
   dark div. min-height is load-bearing — see the note on .monitor__screen below. */

.monitor__screen {
  position: relative;
  overflow: hidden;
  /* A FLOOR, not the mechanism. js/monitor.js measures all four nodes at boot and locks the
     screen to the tallest with an inline min-height, so the button underneath never moves
     between clicks. This value is only what the panel is before that runs, and what it is if the
     module never runs at all.
     It was the mechanism first, in em, and it could not hold: the tallest node is the one
     carrying the fields, its height depends on how the copy above them wraps, and the figure
     that fitted at 1280 was 190px short at 900. Anything declared here is a guess at one
     viewport. Leave it as a floor and let the measurement do the work. */
  min-height: 21em;
  /* The bottom padding clears the caption strip standing on the floor of the display. */
  padding: var(--s-8) var(--s-6) calc(var(--s-8) + 1.4rem);
  background: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: default;
}

/* ---- the board ----
 *
 * THE SUBJECT, and round 2 got this half right and half wrong. Right: this page had no image on
 * it at all, and every composition on the bar is built on one, so a locked-height black well with
 * four lines of type at the top of it was never going to hold a screen. Wrong: what went in was
 * the Esri satellite crop, and the blind verdict was flat — "the satellite plate under the
 * terminal text is 500px of grey noise with no legible feature in it". A stock aerial of anywhere
 * is a texture, not a picture of this product.
 *
 * What is in the well now is the board itself: the same OpenStreetMap snapshot index.html and
 * corporates.html draw, cropped to one district, with real road-bounded territories held in the
 * game's three colours. Same two-layer construction as .corp__view — the satellite plate as
 * terrain underneath, the vector network and the cells drawn over it, registered to the SVG's
 * viewBox by three custom properties js/monitor.js writes. `.on-plate` in css/carto.css is what
 * makes the vector layer legible over imagery (casings off, cores up, cell hairlines light).
 *
 * It answers a second charge at the same time. Every accent on this screen was chrome — a live
 * dot, a register shadow, a rail — so the page spent its whole colour budget on furniture. The
 * board puts Claim red, alliance green and rival blue on the page doing the job they do in the
 * game, with a key on the floor of the display saying which is which.
 *
 * The plate is still assets/img/board-satellite.jpg and README still lists it as NOT cleared for
 * production; it now swaps out with the hero's and the corporates board's rather than separately.
 *
 * THE GRADE is the corporates board's, one stop down. That panel is the lit subject of its page
 * and carries no scrim; this one is a display inside a device and has 18px mono printing over the
 * top of it, so the terrain sits lower and lets the network be the bright thing.
 */
.monitor__board {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink-0);

  /* A SUBSTRATE, NOT A PICTURE. The board went into the well to give the page a subject and it
     did — a blind critic called it "the product rather than a mood". At full strength it was
     also a picture with four saturated territory blocks sitting directly behind the type, and
     the transmission is the thing this panel exists to deliver. Damped here rather than by
     re-colouring the cells, because the cells are drawn by js/cartography.js from the same
     palette the hero and corporates boards use and they must not diverge; a filter on the
     container leaves the source colours alone and pushes the whole layer behind the glass. */
  filter: saturate(0.85) brightness(0.52) contrast(0.94);
}

.monitor__board .cartography { position: relative; z-index: 1; }

.monitor__board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/board-satellite.jpg");
  background-repeat: no-repeat;
  background-size: var(--plate-size, 400%) auto;
  background-position: var(--plate-x, 50%) var(--plate-y, 50%);
  filter: saturate(0.30) contrast(1.18) brightness(0.40) sepia(0.20);
}

/* THE SCRIM, and it is what makes this a display rather than a picture with text on it.
 * Near-solid at the top so the transmission prints on its own ground at full contrast, then
 * released downward so the board only resolves under the copy. The bar's own hero does exactly
 * this and does not call it a scrim: its photograph is black water at the bottom and the headline
 * sits in it.
 *
 * A LAYER OF ITS OWN, not a gradient on .monitor__board, because that element's ::before carries
 * a filter and a filter applies to the whole painted result — grading the scrim along with the
 * image would lift its black end and the top of the well would stop being solid. It also has to
 * sit ABOVE the vector layer, which the plate's own pseudo-element cannot.
 */
.monitor__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
/* ROUND 4 STRETCHED THE FALLOFF, because the same critic that named the dead band named this in
 * the same sentence: "the map starts at a hard horizontal seam mid-panel". It did. The old ramp
 * held solid to 22% and was down to 34% by 58%, so the whole transition happened across a third
 * of the well and read as an edge — one material above it, another below. That was survivable
 * when the display was 500px tall and the transmission filled the top of it; the well is 660px
 * now and the copy occupies the first fifth, so a boundary at a third of the way down is a line
 * drawn across open ground for no reason.
 *
 * Six stops instead of five, opening earlier and releasing later: solid only under the type, then
 * a continuous falloff all the way to the floor with no interval steeper than 33 points. The last
 * line of the longest node ends at about 24% of the well and the scrim is still 82% opaque there,
 * so the transmission has lost nothing — measured, the type's ground is darker than it was.
 */
  background: linear-gradient(
    180deg,
    var(--ink-0) 0%,
    var(--ink-0) 12%,
    color-mix(in srgb, var(--ink-0) 82%, transparent) 28%,
    color-mix(in srgb, var(--ink-0) 52%, transparent) 44%,
    color-mix(in srgb, var(--ink-0) 62%, transparent) 62%,
    color-mix(in srgb, var(--ink-0) 52%, transparent) 82%,

    /* A FLOOR, NOT A FADE TO NOTHING. The tail used to reach fully transparent, so the
       bottom third of the well was bare board — and at node 03 the fields and the key
       sit exactly there. 46% is the point where the held cells still read as red, green
       and blue against the caption key that names them, and nothing behind the type is
       brighter than the panel fill. */
    color-mix(in srgb, var(--ink-0) 46%, transparent) 100%
  );
}

/* Node 03 puts three controls into the well and they sit low in it, over the open half of the
   board. The fields are opaque so they are legible either way, but a form floating over a map
   reads as a screenshot of two things; one extra stop of scrim puts the board back behind the
   controls where it belongs without removing it. js/monitor.js sets the flag. */
.monitor__set[data-node="03"] .monitor__scrim {
  background: linear-gradient(
    180deg,
    var(--ink-0) 0%,
    var(--ink-0) 70%,
    color-mix(in srgb, var(--ink-0) 76%, transparent) 80%,
    color-mix(in srgb, var(--ink-0) 40%, transparent) 90%,
    color-mix(in srgb, var(--ink-0) 16%, transparent) 100%
  );
}

/* THE CORNER SCRIM THAT USED TO BE HERE IS GONE, and the note is worth keeping. The action bar
   crossing this panel from the left lands on the ACTIONS row, not on the screen — the panel spans
   both composition rows, so its floor and the bar's floor are the same line and the bar's 84px sit
   inside the action row's 128. There is nothing under it to darken, and darkening the board's
   bottom-left for a control that is not over it is a hole made on purpose. */
/* Scanlines. One repeating gradient at 2.8% bone — under the 4% where a texture starts competing
   with the type sitting on it, and enough to catch the light on a good panel. Pointer-events
   none so the click-to-skip below still reaches the screen. Over the plate as well as the well,
   which is the half of this that ties the image into the instrument. */
.monitor__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(239, 235, 225, 0.028) 0 1px,
    transparent 1px 3px
  );
}

/* The caption's own ground. A mono label at 10.8px cannot stand on open terrain — first shot of
   this, "REALM 01 · BENGALURU" was sitting on mid-grey rooftops and had effectively vanished. So
   the bottom of the display darkens back down under it. It is a pseudo-element of the screen
   rather than a fourth layer, which puts it last in paint order and therefore over the scanlines
   as well; the caption itself is z-index 4 and stays on top of everything.

   THE LAYER STACK IN THE WELL, top to bottom, since it now has five floors:
     4  .monitor__caption          the board's name and key
     3  .monitor__out / __form     the transmission and the fields
     2  .monitor__scan, ::after    scanlines, and this caption ground
     1  .monitor__scrim, ::before  the top scrim, and the corner the action bar lands on
     0  .monitor__board            the satellite plate and the vector board over it */
.monitor__screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5.5rem;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--ink-0) 62%, transparent) 46%,
    color-mix(in srgb, var(--ink-0) 94%, transparent) 100%
  );
}

/* The plate's caption, on the floor of the display. Same device the bar puts under every piece of
   media it shows — a small mono line naming what is in the frame. It is also what stops an aerial
   photograph behind a signup form from being decoration: labelled, it is a readout of the Realm
   this page keeps naming. */
.monitor__caption {
  position: absolute;
  left: var(--s-6);
  right: var(--s-6);
  bottom: var(--s-4);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-6);
  margin: 0;
  color: var(--slate-2);
  pointer-events: none;
}

/* Both halves are pushed right: the action bar crosses this panel's lower-left corner, so the
   display's bottom-left is spoken for. */
.monitor__caption-at { color: var(--slate-2); }

/* The key. Not decoration — it is the only thing on the page that says what the three colours on
   the board mean, and a critic had already named the coordinate readout that used to sit here as
   "detail doing decoration's job". Same 7px swatch the corporates board's key uses. */
.monitor__key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--slate); }
.monitor__key-item { display: flex; align-items: center; gap: var(--s-2); }

.monitor__swatch { flex: none; width: 7px; height: 7px; }
.monitor__swatch--a { background: var(--claim); }
.monitor__swatch--b { background: var(--alliance); }
.monitor__swatch--c { background: var(--enemy); }

/* The node index that used to stand in this well — two digits at 180px in a hairline outline,
   cut by the screen's bottom edge — is gone, and the plate above replaced it. It existed to fill
   a hole, which is the wrong reason for any element to exist, and a blind critic named it as
   exactly that: "300px of dead middle that someone tried to plug with a ghost '01' watermark".
   The node number is still on the bar readout and still counted by the rail, which is where a
   reader looks for it. Its markup and its two lines in js/monitor.js went with it. */

/* Everything in flow inside the well, in one box: the transmission, the advance mark, the fields,
   the status line and the privacy note. It exists so js/monitor.js can lock the screen's height
   from ONE rect per node instead of summing five boxes and the margins between them.

   `display: grid` with `align-content: start` rather than a block, for two reasons: a grid item's
   margins do not collapse into its parent (a block would have handed the screen the first child's
   margin-top through its own padding), and a `display: none` child creates no gap, which is what
   lets the stepper and the form swap places without either leaving a hole. */
.monitor__flow {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: start;
}

.monitor__out {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--bone-2);
}


/* ---------------------------------------------------------------- the advance
 *
 * WHAT REPLACED THE PANEL'S SECOND CHIP. The transmission is four nodes and something has to walk
 * it; what must not happen is that the something is a button standing at the same eye level as
 * the page's primary act, 200px away from it, so that neither wins. A blind critic named that
 * pair as the deciding fault of round 3.
 *
 * So the advance is set as an instrument mark and printed where the reader is already looking —
 * in the flow of the display, immediately under the last line that arrived, one rung below the
 * transmission in both size and brightness. It is a real <button>, so it is in the tab order and
 * Enter presses it; it just does not wear a chip. The affordance is the hairline under the label
 * and the mark in front of it, which is the vocabulary the rest of the site already uses for
 * links inside instruments.
 *
 * It carries the `hidden` attribute until its node has finished printing (js/monitor.js), and on
 * nodes 03 and 04 it is not rendered at all — from there the act is the cream bar's.
 */
/* ---------------------------------------------------------------- the act
 *
 * ONE CONTROL, INSIDE THE DISPLAY, AT EVERY NODE. It replaces a split — an underlined mark in
 * the screen for advancing, a large paper chip below the panel for acting — which meant a
 * reader clicked inside the box for nodes 01 and 02 and outside it for 03 and 04. The chip was
 * the better-looking object and a blind critic said so; it was still two experiences on one
 * page, and the terminal is the experience.
 *
 * It sits on the floor of the screen in its own row, so its position does not move when the
 * form appears on 03 or when node 04 prints a longer verdict. Right-aligned, because the
 * display prints from the left and a control that starts where the text starts reads as another
 * line of the transmission rather than as the thing that ends it.
 */
.monitor__act {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  /* LEFT, ON THE TEXT COLUMN, not right and not full width. The display prints from the left,
     and js/monitor.js locks the screen to the tallest node so this never moves between clicks —
     so the chip sits where the next line of the transmission would be, and reads as the prompt
     the message has arrived at. Right-aligned it floated over the middle of the board; full
     width it read as a drawer bolted to the bottom of the panel. */
  justify-content: flex-start;
  margin-top: var(--s-8);
  position: relative;
  z-index: 3;
}

/* Paper, on a screen made of light — the same inversion .btn--primary carries everywhere else on
   the site, so the one object a reader is meant to press is the one object that is not part of
   the instrument. Sized to its label rather than to the well: a full-width chip inside the
   display reads as a drawer, not a button. */
.monitor__chip {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  min-height: 0;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 1px solid var(--hairline-hi);
  color: var(--bone);
  text-align: left;
}

/* The same 6px live square the channel bar and the hero HUD use, so the control is visibly part
   of the same instrument rather than a widget dropped into it. Claim red because pressing this
   is the one thing on the page that takes ground. */
.monitor__chip-mark {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--claim);
}

.monitor__chip .btn__action {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-data);
}

/* A key that lights rather than a sheet that presses. */
.monitor__chip:hover,
.monitor__chip:focus-visible {
  background: color-mix(in srgb, var(--bone) 8%, transparent);
  border-color: var(--bone);
}

/* The legend beside the key, not inside it. */
.monitor__act-note {
  margin: 0;
  color: var(--slate-2);
}

.monitor__chip[hidden] { display: none; }
.monitor__chip[disabled] { opacity: 0.55; cursor: progress; }

/* Label left, arrow right, so only the glyph travels when the label changes length between
   "Continue the transmission" and "Transmit". */
.monitor__chip .btn__action { display: flex; align-items: center; gap: var(--s-4); }
.monitor__chip .access__chip-arrow { color: var(--slate-2); }

/* The old in-flow stepper. Kept because the phone rule at the foot of this file still names it
   and because nothing else claims the class; it has no element any more. */
.monitor__step {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  justify-self: start;
  margin-top: var(--s-6);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-data);
  line-height: 1.4;
  /* ONE RUNG UNDER THE TRANSMISSION, not two. It was --slate-2 and that held on the desktop,
     where every node's copy ends in the top half of the well and the mark stands on the scrim's
     solid ground. On the phone the well is the same height and node 02 runs seven lines, so the
     mark lands at 58% of the display — out on the released part of the scrim, over rooftops — and
     a 10.8-rung label there is not a control anybody can see. --bone-2 is the transmission's own
     colour, which is the honest reading anyway: this is the last thing the node prints. The
     hairline under it and the 14.4px against the copy's 18 are what keep it a mark and not a
     fifth line of the message. */
  color: var(--bone-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease);
}

/* The `hidden` attribute has to beat `display: inline-flex` above, the same way .monitor__form's
   does — without this the advance is on screen before its node has finished arriving. */
.monitor__step[hidden] { display: none; }

.monitor__step-mark { color: var(--slate-2); }

/* The affordance. A hairline under the words rather than a box around them: this is a mark on an
   instrument, and a second outlined rectangle inside a panel that already has three of them is
   how the round-3 version ended up with two competing controls. */
.monitor__step-label {
  border-bottom: 1px solid var(--hairline-hi);
  padding-bottom: 2px;
}

.monitor__step:hover,
.monitor__step:focus-visible { color: var(--bone); }

.monitor__step:hover .monitor__step-mark,
.monitor__step:focus-visible .monitor__step-mark { color: var(--claim); }

.monitor__step:hover .monitor__step-label,
.monitor__step:focus-visible .monitor__step-label { border-bottom-color: var(--bone); }

/* One line of transmission. Empty lines are spacing, and they need a height of their own or the
   blank rows between blocks collapse and the whole message sets as one paragraph. */
.monitor__line { min-height: 1.55em; }

/* THE LEAD LINE IS BACK AT INSTRUMENT SCALE, and this reverses round 1's own change.
 *
 * It was raised to 57.6px in the grotesk on the argument that the bar's display-to-body ratio is
 * four to one and that a frame with copy in it needs a big element. What that argument did not
 * account for is that this frame is not the page. "HELLO, COMMANDER." then sat at the same cap
 * height as "First in, best ground." on the other side of the gutter, and a blind critic put it
 * plainly: the page had two subjects and neither won it. The bar spends its display size on ONE
 * sentence per screen — everything else on /origin, including every readout inside its media
 * panels, is 18px or smaller.
 *
 * So the headline keeps the display size and the terminal goes back to being an instrument. The
 * lead line is the transmission's own body size, in the transmission's own face, one rung brighter
 * than the lines under it. That is all the emphasis a first line needs when it is the first thing
 * that prints and the caret is sitting on it.
 *
 * AND THE MONO COMES BACK WITH IT. The switch to the grotesk was made to fix a real defect — at
 * 57.6px mono sets every glyph on one advance, so "HELLO, COMMANDER." reads "HELLO ,  COMMANDER ."
 * with the punctuation stranded mid-slot. That defect is a function of the size and it does not
 * exist at 18px, where a monospaced advance is what a teletype is supposed to look like. Removing
 * the size removed the reason for the exception, so the exception goes too and the whole
 * transmission is one face at one size again.
 */
.monitor__line--lead {
  color: var(--bone);
  margin-bottom: var(--s-4);
}

/* The three-item roll on node 02. A rung brighter than the body around it, because it is the
   list the reader is meant to take away. */
.monitor__line--item { color: var(--bone); }

/* A field being read back — CITY: BENGALURU. */
.monitor__line--data { color: var(--bone); }

/* The verdict lines on node 04. Red is the dossier stamp's pressed-once #B0523A rather than
   --claim: full-strength Claim on this screen is already spent on the live mark and the chip's
   register, and a locked city is a state, not an alarm. */
.monitor__line--locked { color: #C4644B; }
.monitor__line--open   { color: var(--alliance); }

/* The print head. A block caret, not an underscore — an underscore on a 1.55 line-height sits
   well below the glyphs it is supposed to be following. */
.monitor__caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.14em;
  background: var(--claim);
  animation: hero-blink var(--dur-ambient) linear infinite;
}

/* While the head is actually printing the caret must hold steady: a caret blinking mid-word
   reads as a fault rather than as a cursor waiting for you. */
.monitor__out[data-printing="true"] .monitor__caret { animation: none; opacity: 1; }

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


/* ---------------------------------------------------------------- the form on node 03

   The .field vocabulary lives in css/access.css, which this page loads first. Only the things
   the terminal does differently to it are below. */

.monitor__form {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* `display: grid` above outranks the UA's `[hidden] { display: none }`, so the form's own hiding
   has to be spelled out or node 01 opens with three fields already on screen — which is the
   exact thing this version exists to avoid. */
.monitor__form[hidden] { display: none; }

/* The fields sit on the screen's well (--ink-0), one rung below the panel access.css was written
   against, so their own ground drops with it. Without this the inputs are lighter than the
   surface they are set into and read as pasted on rather than part of the display. */
.monitor__form .field__input { background: #000; }


/* ---------------------------------------------------------------- the rail

   Four nodes, filling in quarters. The graduations come from .hud-ticks, so no background-color
   is set here — the same construction the corporates page's step rail uses. */

.monitor__rail { height: 1px; }

.monitor__rail span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--claim);
  transition: width var(--dur-ui) var(--ease);
}


/* ---------------------------------------------------------------- the small print
 *
 * THE PANEL'S ACTION ROW IS GONE and these two came into the display with the fields they belong
 * to. What used to be here — a 128px row of flat panel fill under the board holding one chip, a
 * status line and a privacy note, all pushed hard right to dodge the cream bar crossing the
 * corner — is the thing round 4 deleted. See the note on .monitor__set.
 *
 * They read left now, under the three inputs, at the transmission's own left margin. The note is
 * small print about three fields rather than about a button, which is where it always belonged;
 * the status is what the transmission has to say back.
 */

.monitor__status {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label-wide);
  color: #C4644B;
}

/* The one status that is good news. */
.monitor__status[data-tone="ok"] { color: var(--alliance); }

.monitor__note {
  margin: var(--s-3) 0 0;
  color: var(--slate);
  line-height: 1.5;
}

/* BOTH HOLD THEIR SPACE WHEN THEY ARE NOT SHOWING, and that is what makes the measured screen
   lock in js/monitor.js honest. `hidden` takes a box out of flow, so a transmission that fails
   would grow the display by a line AFTER it had been locked to a height that never counted one —
   and on a viewport where the lock is the binding constraint, the well is `overflow: hidden`, so
   the line the reader most needs to read is the line that gets clipped. `visibility` keeps the
   box and still removes it from the accessibility tree. */
.monitor__status[hidden],
.monitor__note[hidden] { display: block; visibility: hidden; }


/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .monitor { padding-block: var(--s-12) var(--s-16); }

  /* Stacked — and the MONITOR GOES FIRST. Side by side the two columns are read together and
     their source order does not matter; stacked, source order put roughly 800px of pitch above
     "HELLO, COMMANDER." and buried the hook on the device where this concept does its best work.
     The transmission is the offer here; the counter and the grants are what back it up, and
     backing goes underneath.

     `order` and not a DOM move, for two reasons. The pitch owns the <h1>, so reordering the
     source would put the page's heading after a terminal — wrong for the document outline and
     for anything reading it as a document. And `order` is visual only, so the reading and tab
     orders stay as authored; that is normally the thing to be careful about, and it costs
     nothing here because the pitch column contains no focusable element at all. Every control on
     this page lives inside the monitor.

     If the pitch ever gains a link, this needs revisiting — a tab that jumps from the nav past a
     visible link to the form and back up again is exactly the trap `order` sets. */
  .monitor__col { grid-column: 1 / span 12; order: -1; }

  /* The gap between the two blocks does more work stacked than it does side by side: it is now
     the only thing separating a piece of equipment from the copy about it. */
  .monitor__inner { row-gap: var(--s-12); }

  /* The bottom padding is what the caption strip stands in, and on the phone the board runs to
     the panel's floor behind it exactly as it does on the desktop.

     2.8rem RATHER THAN THE DESKTOP'S 1.4, because the caption is two rows here and was never
     given room for the second one. At 390pt "REALM 01 · BENGALURU" and the three-swatch key wrap
     onto separate lines — about 40px of caption standing in 22px of reserved padding — so the
     bottom of the form has been landing within a few pixels of it since the caption gained its
     key. Round 4 made that a collision rather than a near miss by printing the privacy note
     inside the display, which is the right place for it; the reserve is what was wrong. */
  .monitor__screen { min-height: 24em; padding: var(--s-6) var(--s-4) calc(var(--s-6) + 2.8rem); }
  .monitor__caption { left: var(--s-4); right: var(--s-4); bottom: var(--s-3); }

  /* The hand-tuned phone crop that used to be here is gone with the plate it belonged to.
     js/monitor.js now solves the window from the well's MEASURED aspect and writes the three
     plate ratios itself, at every width, so a phone needs no special case: the same 430 board
     units are across the frame and the satellite under the streets stays in register. */
}

/* A LAPTOP LID, not a phone. The section's own breathing room is the first thing to give up when
   the frame gets short — 64px of padding top and bottom is a luxury a 700px screen cannot afford,
   and losing it costs nothing a reader can name.

   ROUND 4 MOVED THE TARGET AND THE THRESHOLD WITH IT. The section is now 100svh less the nav
   alone rather than less the nav AND the footer, so the frame it has to fit inside grew by 82px
   and the composition that used to need every one of them fits at 900 with room. Everything below
   is therefore about SHORT lids, not about 900: the padding cut starts at 860 rather than 950,
   and the 900px case gets its full --s-12 back, which is what stops the pitch column's auto
   margin swallowing the whole 82 as a hole above the headline.

   What must never fall under the fold is the cream bar — round 3 exists because a blind critic
   could not find the way to join, and a control below the fold is that defect by another route. */
@media (min-width: 901px) and (max-height: 900px) {
  .monitor { padding-block: var(--s-12); }
}

@media (min-width: 901px) and (max-height: 820px) {
  .monitor { padding-block: var(--s-8); }
}

/* A SHORT LID. Below about 780 the composition is taller than the frame whatever the section's
   own padding does, so the terminal gives up its internal breathing room rather than the page
   giving up the bar. Every value here is padding or gap inside the panel; nothing loses a line of
   copy, a field or a grant. */
@media (min-width: 901px) and (max-height: 780px) {
  .monitor { padding-block: var(--s-6); }
  .monitor__screen { padding: var(--s-6) var(--s-6) calc(var(--s-6) + 1.4rem); }
  .monitor__form { gap: var(--s-3); margin-top: var(--s-4); }
  .monitor__form .field__input { min-height: 44px; }
  .monitor__step { margin-top: var(--s-4); }
  .access__grantlabel { margin-top: var(--s-6); }

  /* THE SMALL PRINT GETS OUT OF THE CREAM BAR'S WAY, and only here. The bar crosses the panel's
     lower-left corner by two columns and a gutter at every width, and it is opaque; anything in
     the display's flow that reaches that band is simply covered by it. On a 900px lid the flow
     ends ~90px above the bar's top edge and the question never arises — but at 700 the display is
     500px tall, the fields fill it, and the note landed under the chip reading "…NOTHING ELSE. NO
     NEWSLETTER, NO THIRD PARTIES." with its first four words hidden.

     So in the short band the note and the status set right, in a narrower column. Both halves are
     needed: right-alignment alone still crosses the bar at 1024, where the panel is 615px wide and
     a 480px sentence set flush right starts 35px inside the overlap. At 44ch the sentence is two
     lines of about 285px, which clears the widest overhang the grid can produce at any desktop
     width, and it costs 17px of display height — 3px of panel at 1440x700, nothing anywhere else.
     Right is also where the caption already stands, for the same reason. */
  .monitor__status,
  .monitor__note {
    max-width: 44ch;
    justify-self: end;
    text-align: right;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .access__grantlabel { margin-top: var(--s-4); }
  .access__grants { gap: var(--s-2); }
}