/* Dominia — the early-access page: the pitch column, and the form controls.
   Owner piece: access.html. css/monitor.css carries the terminal that sits beside this.

   Loaded before monitor.css so the terminal's own rules land on top. Two things live here and
   nowhere else:

     1. the FORM CONTROLS. The site had none before this page — index.html and corporates.html
        are read-only documents — so `.field` is a new vocabulary rather than a variation on an
        existing one. It is built out of the same parts as everything else: a mono label on the
        --slate-2 rung, a --hairline-hi edge that goes --bone on focus, and a chamfered corner
        from the .edge geometry in surface.css. The monitor prints them into its screen on node
        03 and overrides only their ground; everything else about them is here.

     2. a LOCAL COPY of the founders dossier's counter, grants and file-footer, under access__
        names. css/story.css owns the originals (.dossier__num / .perk / .dossier__meta) and is
        35KB of scroll-sequence rules this page has no use for, so it is not loaded. The
        duplication is deliberate and one-directional: if the dossier's look changes, this page
        does not have to follow.

   THE RED BUDGET. One Claim element per screen is the standing rule, and on this page the
   monitor already spends it twice — the live mark on its bar and the register under its chip.
   So nothing in this file reaches for the accent at all: error text takes the dossier stamp's
   pressed-once #B0523A, and the one green is --alliance on `Intake: Open`, which is the rule the
   dossier footer already follows. */


/* ---------------------------------------------------------------- the pitch column

   FOUR of twelve now, not five, and the monitor answers it at 5 / span 8 from css/monitor.css.
   Round 2 set both at five, which measured out as two blocks of exactly 535px with 235px of
   gutter between them — the page cut into halves of identical weight. The blind verdict on that
   round: "splits the frame into two equal-weight halves, headline left and terminal panel right,
   so nothing dominates and the eye has no reason to prefer either." Two equal columns is the
   defect, not a symptom of it.

   380px against 865px is 2.3 to 1. The equipment is the subject and this is its caption, which
   is also the shape of the reference: one lit plate holding the frame, type beside and in front
   of it. */

/* A COLUMN, NOT A STACK. It was a plain block ending wherever its last child ended — at 1440x900
   that was y=796 against a section floor at 892, so the composition simply stopped with a hundred
   pixels of nothing under it and no bottom edge to read. Now it is a flex column stretched to the
   full height of the row (css/monitor.css sets `align-items: stretch` on the grid). */
.access__pitch {
  grid-column: 1 / span 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* THE AIR IS ABOVE THE HEADLINE, NOT BELOW IT — and this one `auto` is the whole composition.
   The column used to set from the top and stack downward: eyebrow, headline, lede, a ruled list,
   a 72px number, a status strip. Six blocks in a row, which is a spec sheet.

   `ref-orig-d-00` is the shape to answer, and it does the opposite: a small mono mark alone at the
   top-left, a large amount of nothing, and the four-line display headline sitting ON the bottom of
   the frame beside the media panel. Everything below is one group at the floor. So the eyebrow
   keeps the top of the column, `auto` collects every remaining pixel above the headline, and the
   headline / lede / grants / file footer close the column as one block on the floor — opposite the
   instrument, which stands the full height beside them.

   On the phone the two columns stack and each takes its own height, so an auto margin has no free
   space to claim and this collapses to zero on its own. Nothing to unset. */
/* ROUND 3: the hole under the eyebrow was ~200px and a critic noted it. It is a consequence of
   this `auto`, which is right in principle — the reference does hold a large amount of nothing
   above its headline — but 200px of it in a column that then has to fit five blocks is a hole
   rather than air. The column is narrower now, so the lede and the grants take more height and
   the auto margin collects less; measured after the change it is ~70px, which reads as a
   breathing space above the headline instead of a gap the page forgot to fill. */
.access__title { margin-block: auto var(--s-6); }
.access__lede  { max-width: 24em; }


/* ---------------------------------------------------------------- grants

   The dossier's perk list, rebuilt locally: a 6px square beside a line of body type, in the same
   claim / ally / rival tints as the dossier's own perks on index.html (css/story.css), so the one
   list reads the same on both pages. The squares replaced stock star, clock and map icons.

   THE RULES ARE GONE. Each row carried a hairline under it and the block above carried one over
   it, which turned three short facts into four ruled bands stacked in a column that already had a
   ruled eyebrow at the top and a ruled file footer at the bottom. Counted from outside, the left
   side read as six blocks divided by five rules — a spec sheet, not a composition. A rule is for
   separating things that would otherwise be confused with each other, and nothing here is: three
   lines under one mono label are already obviously one list. The only rules left on this column
   are the two that mark its top and its floor. */

.access__grantlabel { margin: var(--s-8) 0 0; color: var(--slate); }

.access__grants {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: 24em;
}

.access__grant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
}

.access__grant[data-kind="claim"] { --kind: var(--claim-lit); }
.access__grant[data-kind="ally"]  { --kind: var(--alliance-lit); }
.access__grant[data-kind="rival"] { --kind: var(--enemy-lit); }

.access__grant-mark {
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--kind, var(--slate-2));
}

.access__grant-text { color: var(--bone-2); line-height: 1.35; }


/* ---------------------------------------------------------------- the action bar
 *
 * THE THING THE PAGE EXISTS FOR, and until this round it was not on the reading path at all.
 * The blind verdict: "the primary action is orphaned … the reading path must terminate on the
 * button, not on a row of metadata." That is a conversion defect before it is a taste one — a
 * reader who has read the offer and cannot find the way in does not sign up.
 *
 * So: immediately under the three grants, at the foot of the column, and a grid child of the row
 * rather than a child of the column, because it has a second job.
 *
 * IT IS SIX COLUMNS WIDE AGAINST A FOUR-COLUMN PITCH. That overhang is the composition: it runs
 * from the page margin to 205px past the terminal's left edge, so it crosses the gutter and lands
 * on the panel's lower-left corner. The reference crosses its own /origin media plate by 145px of
 * 715; this is 205 of 865, the same fraction. Locking the two largest elements together is what
 * the corporates lead won its round with, and what the premise section won its round with by
 * floating a block across the gutter onto the feed. This page had lost twice without one.
 *
 * The terminal spans both composition rows, so its floor is this bar's floor; its own stepper is
 * right-aligned inside its action row (css/monitor.css), so the corner the bar lands on carries
 * nothing at any node.
 *
 * IT IS A BAR, NOT A CHIP, and that is a consequence rather than a preference: a control cannot
 * cross a 60px gutter and 143px of panel unless it is wide. So it is set the way the reference
 * sets its own wide action — label hard left, arrow hard right, the two ends of one rule — which
 * is exactly what its subscribe row does (ref-home-d-05). A centred label in a 583px box would
 * read as a stretched button; these two do not.
 */

.access__act {
  /* SIX COLUMNS AGAINST A FOUR-COLUMN PITCH, in row 2 of three. Six is 645px at 1440, running
     from the page margin to 205px past the terminal's left edge — the overlap, and the reason the
     bar is a bar. The reference crosses its own media plate by 145px of 715; this is 205 of 865,
     the same fraction.

     Row 2 rather than `align-self: end` in row 1: the first build did that and the bar landed on
     top of the three grants, because a column that stretches to the row's floor already has its
     content there. In its own row it sits under them in flow, and the terminal — which spans rows
     1 and 2 — still ends on the same line it does. */
  grid-column: 1 / span 6;
  grid-row: 2;
  /* Over the panel. */
  position: relative;
  z-index: 3;
}

.access__chip {
  width: 100%;
  align-items: stretch;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-6);
  text-align: left;
}

/* Label left, arrow right. `auto` on the arrow rather than `space-between` on the row, so the
   two lines of the button (kicker over label) keep their own left edge and only the glyph
   travels. */
.access__chip .btn__action { display: flex; align-items: center; }
.access__chip-arrow { margin-left: auto; }

/* THE SPENT STATE IS GONE, and so is the second control it existed to make room for.
 *
 * Round 3 ran two chips: this one on nodes 01 and 02, and the terminal's own on 03 and 04, with
 * the paper treatment traded between them so only one was ever filled. A blind critic read the
 * pair as the deciding fault — "the primary act (JOIN THE WAITLIST, the brightest object in the
 * frame) and a secondary act sit ~200px apart at the same eye-level, and neither one wins."
 *
 * So there is one chip now and it is this one, at full width, crossing the panel at every node.
 * It is the terminal's real submit (`form="mon-form"` in access.html), and its label is whatever
 * the current node's act is: Join the waitlist, Transmit, Call in your allies. What it never does
 * is change shape or place — the reader's eye learns one terminus on the first frame and it is
 * still there on the last. Walking the transmission is an instrument mark inside the display now;
 * see .monitor__step in css/monitor.css.
 */

/* In flight only. The chip is otherwise live at every node, which is the point: the primary act
   is one click away from the first frame, without sitting through two screens of prose. */
.access__chip[disabled] { opacity: 0.55; cursor: progress; }


/* ---------------------------------------------------------------- the floor rail
 *
 * The old file footer, moved out from under the pitch column and set across all twelve. Two
 * reasons, and the first is the one that matters: as the last block in the left column it was
 * the place the page's only reading path ended, and a blind critic called it dead there. It is
 * instrument chrome. Chrome goes on the floor, under the composition, the way the reference sets
 * `· ORIGIN` on the bottom-left of its own hero.
 *
 * The second is arithmetic. Four label/value pairs in a 380px column set as three ragged lines;
 * across twelve columns they are one strip that does not wrap until the phone. */

.access__rail {
  grid-column: 1 / span 12;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.access__rail-field { display: flex; align-items: baseline; gap: var(--s-2); }
.access__rail-field .label { color: var(--slate); }

.access__value {
  font-size: var(--t-label);
  text-transform: uppercase;
  color: var(--bone-2);
}

/* Intake being open is good news, and state fields carry the colour — same rule the hero
   readout follows in css/surface.css. */
.access__value--open { color: var(--alliance); }

/* The waitlist figure. One rung brighter than the other three readings and set on tabular
   figures, because it is the only one of them that is a number and the only one that changes.
   That is the whole of the emphasis it gets now — see the note in access.html. */
.access__num { color: var(--bone); font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------- fields */

.field { display: grid; gap: var(--s-2); }

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

/* One control style for text inputs and the select alike, so the three rows read as one stack.
   The chamfer is the bottom-right cut every other surface on the site carries; it is drawn with
   clip-path rather than border-radius because this page's vocabulary has no round corners in it.
   A clipped element cannot show a border across the cut (see the .panel note in surface.css),
   so the edge is an inset box-shadow — which the clip keeps. */
.field__input {
  --chamfer: 0.5rem;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--t-data);
  color: var(--bone);
  background: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--hairline-hi);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%
  );
  transition: box-shadow var(--dur-micro) var(--ease);
}

.field__input::placeholder { color: var(--slate); }

/* The edge IS the focus ring. :focus-visible in base.css draws a --bone outline 2px off the
   element, which on a clipped control gets sliced across the corner and reads as a broken
   rectangle — so the outline is dropped and the control's own hairline steps up to --bone
   instead. Same information, drawn in the page's own vocabulary. */
.field__input:focus,
.field__input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--bone);
}

.field__input:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--bone-2); }

/* A field the user has been told about. The red is the dossier stamp's pressed-once #B0523A
   rather than --claim, for the reason in the header note: full-strength Claim on this page is
   spent on the submit chip's register. */
.field__input[aria-invalid="true"],
.field__input[aria-invalid="true"]:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #B0523A;
}

/* The select needs its own arrow: appearance:none removes the native one. It is drawn as two
   half-filled 6px gradient squares butted together — a solid triangle, no asset — rather than an
   SVG background, because a background *image* would be sliced by this control's clip-path the
   same way a border is. Gradients are painted into the same box, so they survive the cut. */
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate-2) 50%),
    linear-gradient(-45deg, transparent 50%, var(--slate-2) 50%);
  background-size: 6px 6px, 6px 6px;
  background-position:
    calc(100% - var(--s-4) - 6px) calc(50% - 1px),
    calc(100% - var(--s-4)) calc(50% - 1px);
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The option list is drawn by the OS, not by us — these two are the only properties it honours
   consistently, and without them a dark-page select opens as a white sheet. */
.field__input--select option { background: var(--ink-2); color: var(--bone); }
.field__input--select:invalid { color: var(--slate); }

.field__error {
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label-wide);
  color: #C4644B;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields and
   this one is meant to be filled. Not reachable by keyboard (tabindex=-1 in the markup) and not
   announced (aria-hidden on the wrapper). */
.field--honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


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

@media (max-width: 900px) {
  /* The phone bar here is the wordmark, two links and BACK TO SITE, and between 381 and ~530 it
     did not fit: HOW IT WORKS and FOR CORPORATES both broke onto two lines, and at 381-400 the
     row overflowed. HOW IT WORKS is the link that goes: it points at index.html#how, and BACK TO
     SITE already goes to index.html, so on a phone the bar carried two routes to the same page.
     It is the same call index.html makes for its own #how anchor (css/site.css), for the same
     reason — the cross-page link is the one that cannot be reached any other way. */
  .nav__links a[href="index.html#how"] { display: none; }

  /* Full width, and the monitor takes the row above it — css/monitor.css puts the terminal first
     when the two columns stack, so the hook is not buried under the pitch on a phone.

     grid-row goes back to auto on all three. The desktop rules pin the pitch and the action to
     row 1 and the floor rail to row 2 so the bar can be `align-self: end` against the panel's
     full height; stacked there is no second column to be end-aligned against, and pinned rows
     would put the action bar on top of the pitch. */
  .access__pitch,
  .access__act,
  .access__rail { grid-column: 1 / span 12; grid-row: auto; }

  /* No overhang and no floor to sit on: it is simply the last thing before the rail, full width,
     which is where a phone reader's thumb wants it anyway. `order` keeps it after the pitch —
     css/monitor.css pulls the monitor to the front of the stack with the same mechanism. */
  .access__act { width: 100%; order: 1; }
  .access__rail { order: 2; }

  .access__lede,
  .access__grants { max-width: none; }
}