/* text.css — the no-script surface at text.knocklet.com, on top of knocklet.css.
   The palette, the faces, the pill, the field and the column all come from there; this file is
   layout and nothing else, and it is the smallest of the three screen stylesheets on purpose.

   The document is rendered by lib/http/text-html.js and arrives finished: no state attribute, no
   script, nothing to toggle. So there is no rule here that hides anything — what is on the page
   is what the server decided to draw, and the element vocabulary is deliberately the one
   presser.css uses (.state-word, .state-sub, .notice, .said, .history) so the two surfaces read
   as one product with one set of names. */

.page--text {
  --flow: var(--sp-5);
  text-align: center;
}

/* The blocks that are somebody's own words, held to a measure. 42ch is presser.css's, and the
   sentence under the state is the same sentence there. */
.text-lead, .state-sub, .notice, .said {
  max-inline-size: 42ch;
  margin-inline: auto;
}

.text-lead { margin-block: var(--sp-2) 0; font: var(--t-callout)/1.5 var(--face); color: var(--ink2); }

/* The room, as a label over the state rather than a headline: the state is the headline and the
   room is what it is about. No swatch — the hue is a paint job, and this page is the one that
   works when paint does not arrive. */
.room-label {
  margin: 0;
  font: 500 var(--t-caption)/1.3 var(--face);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.room-window { margin: 0; font: var(--t-footnote)/1.4 var(--face); color: var(--ink3); }

.state-word {
  margin: var(--sp-2) 0 0;
  font: 400 var(--t-title1)/1.2 var(--face);
  letter-spacing: -.015em;
  color: var(--ink);
}
.state-sub { margin-block: var(--sp-2) 0; font: var(--t-callout)/1.5 var(--face); color: var(--ink2);
             text-wrap: pretty; }

/* How long this has been going on, in the mono face and never in smaller units than the figure
   states.js phrased. */
.elapsed { margin: 0; font: var(--t-footnote)/1.3 var(--face); color: var(--ink2); }

/* The sentence that composes onto a screen rather than replacing it: the hold, a note over the
   cap, a code that did not work. */
.notice { margin-block: var(--sp-2) 0; font: var(--t-subheadline)/1.45 var(--face); color: var(--ink2); }

/* What this browser sent with the press it is waiting on. */
.said { margin-block: var(--sp-2) 0; font: var(--t-callout)/1.5 var(--face); color: var(--ink2);
        text-wrap: pretty; }

/* ── The forms ──────────────────────────────────────────────────────────── */

/* Every action on this page is a form, so the form is the layout unit: a column, its button
   centred, and no margin of its own — the page's own rhythm sets the distance between them. */
.text-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  text-align: start;

  & .btn { align-self: center; }
  & .eyebrow { margin-block-end: 0; }
}

.text-form .join-code {
  margin: 0;
  font-size: var(--t-large-title);
  text-align: center;
}

/* ── The presses behind you ─────────────────────────────────────────────── */

/* A time and a word, no badge, no dot, no count — the same row the scripted page draws. */
.history {
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-inline: auto;
  text-align: start;

  & ul { list-style: none; margin: 0; padding: 0; }
  & li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    border-block-start: var(--hair) solid var(--hairline);
    font: var(--t-subheadline)/1.4 var(--face);
  }
  & .when { font-family: var(--face-mono); font-variant-numeric: tabular-nums; color: var(--ink2); }
  & .note { flex: 1 1 auto; color: var(--ink2); overflow-wrap: anywhere; }
  & .verb { margin-inline-start: auto; font-weight: 500; color: var(--ink2); }
  & .verb--waiting { color: var(--accent); }
  & .verb--acknowledged { color: var(--ack); }
}

/* The last line of the document, and the only block on it that keeps its left edge: the sentence
   the product is bounded by reads as a term rather than as a caption. */
.page--text .guard { text-align: start; }