/* ==========================================================================
   /studio — page-local styles. Owner: ISS-203.

   Same standing as /css/demo.css is to the landing: this file owns one page's
   instrument and declares no token of its own. Every colour, space, size and
   face below resolves against /css/app.css, which is loaded first and is not
   edited from here. The `studio-` prefix is this file's; app.css defines none
   of it.

   The one idea the page inherits from docs/DESIGN.md: the canvas is warm
   light and unconditional, and the instruments on it are dark. Here the
   instruments are the three things that came off the wire — the console you
   type into, the composed spec, and the refusal — so the page reads as paper
   with a terminal set into it.

   There is no prefers-color-scheme block, deliberately. app.css declares
   `color-scheme: only light` and the page follows it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Frame. The measure is wider than --page: a result document is a set of
      dense tables, and 68rem puts four of their columns on top of each other.
   -------------------------------------------------------------------------- */

.studio {
  --studio-page: 78rem;

  display: block;
  flex: 1;
  padding-bottom: var(--s12);
}

.studio-wrap {
  width: 100%;
  max-width: var(--studio-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   2. Head. Title on the left, the account readout pinned to the right edge —
      an asymmetric row rather than a centred column, and the readout is the
      first real data on the page.
   -------------------------------------------------------------------------- */

.studio-head {
  display: grid;
  align-items: end;
  padding-block: var(--s8) var(--s6);
  gap: var(--s5) var(--s9);
  grid-template-columns: minmax(0, 1fr);
}

.studio-head h1 {
  max-width: 26ch;
  margin: 0 0 var(--s2);
  font-size: var(--t-hero);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.studio-head .lead {
  max-width: 54ch;
  margin: 0;
}

/* The account readout: email, plan, run budget, and what the corpus window
   is. Every cell is filled from /v1/me or from the run that just answered,
   and an unfilled cell reads em dash rather than a guess. */
.studio-who {
  display: grid;
  min-width: 0;
  /* ISS-211 moved this out of the head and under the console: on a phone the
     box has to be the first thing a thumb reaches, and an account readout above
     it is the definition of chrome in the way. */
  margin: var(--s5) 0 0;
  border-top: 2px solid var(--rule-2);
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-who > div {
  min-width: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s2) var(--s4) var(--s2) 0;
}

.studio-who dt {
  margin: 0 0 2px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-who dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   3. The console. The one dark surface that runs edge to edge: this is where
      the sentence is typed and it is the loudest thing on the page.
   -------------------------------------------------------------------------- */

.studio-ask {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-top: 1px solid var(--i-rule);
  border-bottom: 1px solid var(--i-rule);
  background: var(--i-canvas);
  color: var(--i-ink);
}

.studio-ask-in {
  width: 100%;
  max-width: var(--studio-page);
  margin-inline: auto;
  padding: var(--s6) var(--gutter) var(--s5);
}

.studio-ask label,
.studio-ask .studio-cap {
  display: block;
  margin: 0 0 var(--s2);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The prompt box. A leading amber prompt mark sits in the padding, the way a
   shell writes one, and the caret is amber for the same reason. */
.studio-prompt {
  position: relative;
}

.studio-prompt::before {
  position: absolute;
  top: 0.62rem;
  left: var(--s3);
  color: var(--i-amber);
  content: "$";
  font-family: var(--mono);
  font-size: var(--t-ui);
  line-height: 1.5;
  pointer-events: none;
}

.studio-ask textarea {
  min-height: 4.5rem;
  border: 1px solid var(--i-rule-2);
  border-radius: 0;
  background: var(--i-surface);
  padding: var(--s2) var(--s3) var(--s2) var(--s7);
  color: var(--i-ink);
  caret-color: var(--i-amber);
  font-family: var(--mono);
  font-size: var(--t-ui);
  line-height: 1.5;
  resize: vertical;
}

.studio-ask textarea::placeholder {
  color: var(--i-dim);
  opacity: 1;
}

.studio-ask textarea:focus {
  border-color: var(--i-amber);
  outline: none;
}

.studio-ask textarea:disabled {
  border-color: var(--i-rule);
  background: var(--i-inset);
  color: var(--i-ink-2);
  cursor: not-allowed;
}

.studio-ask textarea:disabled + .studio-prompt-mark,
.studio-prompt:has(textarea:disabled)::before {
  color: var(--i-dim);
}

/* Example sentences. They are buttons, not links: pressing one fills the box
   and nothing else happens until the customer says so. */
.studio-eg {
  display: flex;
  flex-wrap: wrap;
  margin: var(--s3) 0 0;
  padding: 0;
  gap: var(--s2);
  list-style: none;
}

.studio-eg button {
  border: 1px solid var(--i-rule-2);
  border-radius: 0;
  background: var(--i-inset);
  padding: var(--s1) var(--s2);
  color: var(--i-ink-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.4;
  text-align: left;
}

.studio-eg button:hover {
  border-color: var(--i-amber);
  color: var(--i-ink);
}

.studio-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--s5) 0 0;
  gap: var(--s3);
}

.studio-ask .btn-ghost {
  border-color: var(--i-rule-2);
  background: transparent;
  color: var(--i-ink);
}

.studio-ask .btn-ghost:hover {
  border-color: var(--i-ink-2);
  background: var(--i-inset);
  color: var(--i-ink);
}

.studio-ask .btn:disabled,
.studio-ask .btn-ghost:disabled {
  border-color: var(--i-rule);
  background: var(--i-inset);
  color: var(--i-dim);
  cursor: not-allowed;
}

/* The bring-your-own-key drawer. Shut by default, because the default path
   never needs it. */
.studio-byok {
  margin: var(--s4) 0 0;
  border: 1px solid var(--i-rule);
  background: var(--i-surface);
}

.studio-byok > summary {
  padding: var(--s2) var(--s3);
  color: var(--i-ink-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--t-xs);
  list-style: none;
}

.studio-byok > summary::-webkit-details-marker {
  display: none;
}

.studio-byok > summary::before {
  display: inline-block;
  width: 1.1em;
  color: var(--i-amber);
  content: "+";
}

.studio-byok[open] > summary::before {
  content: "\2212";
}

.studio-byok > summary:hover {
  color: var(--i-ink);
}

.studio-byok-body {
  border-top: 1px solid var(--i-rule);
  padding: var(--s3);
}

.studio-byok input {
  border: 1px solid var(--i-rule-2);
  border-radius: 0;
  background: var(--i-inset);
  color: var(--i-ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
}

.studio-byok input:focus {
  border-color: var(--i-amber);
  outline: none;
}

.studio-byok p {
  margin: var(--s2) 0 0;
  color: var(--i-ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.studio-byok code,
.studio-ask code {
  border-radius: 0;
  background: var(--i-inset);
  color: var(--i-cyan);
  font-size: 0.92em;
}

/* The sign-in line. Never a dead end: the box above is readable and disabled,
   and this says exactly what unlocks it. */
/* A sentence with links in it, so it flows inline. It was a flex container
   once, which made every run of text its own item and pushed the commas away
   from the words in front of them. */
.studio-gate {
  max-width: 62ch;
  margin: var(--s4) 0 0;
  border-left: 2px solid var(--i-amber);
  padding: var(--s2) 0 var(--s2) var(--s3);
  color: var(--i-ink-2);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.studio-gate a {
  color: var(--i-ink);
  text-decoration-color: var(--i-rule-2);
}

.studio-gate a:hover {
  color: var(--i-amber);
}

/* --------------------------------------------------------------------------
   4. The wire log. Every call the page made, with the status it got and how
      long it took. It is the page's own receipt: nothing here is a spinner
      standing in for work, and a request in flight says which one it is.
   -------------------------------------------------------------------------- */

.studio-wire {
  display: flex;
  overflow-x: auto;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--i-rule);
  background: var(--i-inset);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  gap: var(--s1) var(--s4);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.studio-wire-in {
  display: flex;
  width: 100%;
  max-width: var(--studio-page);
  flex-wrap: wrap;
  margin-inline: auto;
  padding: var(--s2) var(--gutter);
  gap: var(--s1) var(--s4);
}

.studio-wire span {
  white-space: nowrap;
}

.studio-wire b {
  color: var(--i-ink);
  font-weight: 500;
}

.studio-wire .studio-w-ok {
  color: var(--i-green);
}

.studio-wire .studio-w-err {
  color: var(--i-red);
}

.studio-wire .studio-w-wait {
  color: var(--i-amber);
}

/* --------------------------------------------------------------------------
   5. Stage. Where the spec, the refusal and the result land.
   -------------------------------------------------------------------------- */

.studio-stage {
  padding-top: var(--s8);
}

/* One column on a phone: the lede beside a heading at 390px is a word per
   line. The two-column form is in the wide-viewport block. */
.studio-step {
  display: grid;
  margin: 0 0 var(--s4);
  border-bottom: 2px solid var(--rule-2);
  padding-bottom: var(--s2);
  gap: var(--s1);
  grid-template-columns: minmax(0, 1fr);
}

.studio-step-n {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.1em;
}

.studio-step h2 {
  margin: 0;
  font-size: var(--t-lg);
}

.studio-step p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.studio-block {
  margin: 0 0 var(--s10);
}

/* Spec: the readout beside the JSON. The readout is narrow and the document
   is wide, so the two columns are not the same width. */
.studio-spec {
  display: grid;
  align-items: start;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
}

/* The four fields the journey requires on screen before a run: clock,
   universe, hold, exit. Read out of the spec, never typed here. */
.studio-read {
  display: grid;
  margin: 0;
  border-top: 2px solid var(--rule-2);
  gap: 0;
}

.studio-read > div {
  border-bottom: 1px solid var(--rule);
  padding: var(--s2) 0;
}

.studio-read dt {
  margin: 0 0 2px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-read dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.studio-read .studio-read-note {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0;
  line-height: 1.4;
}

/* The clock cell is the one that decides whether the answer means anything,
   so it is the one that carries colour. */
.studio-read .studio-clock {
  color: var(--key);
}

/* The spec editor. It is the artifact and it is the input: what is on screen
   is what is posted. */
.studio-doc {
  min-width: 0;
  border: 1px solid var(--i-rule);
  background: var(--i-canvas);
}

.studio-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  border-bottom: 1px solid var(--i-rule);
  background: var(--i-inset);
  padding: var(--s2) var(--s3);
  gap: var(--s1) var(--s3);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.studio-doc-bar b {
  color: var(--i-ink);
  font-weight: 500;
}

.studio-doc-bar .studio-doc-tag {
  margin-left: auto;
  color: var(--i-cyan);
}

.studio-doc textarea {
  display: block;
  min-height: 24rem;
  border: 0;
  border-radius: 0;
  background: var(--i-canvas);
  padding: var(--s3);
  color: var(--i-ink);
  caret-color: var(--i-amber);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.55;
  resize: vertical;
  tab-size: 2;
}

.studio-doc textarea:focus {
  outline: 1px solid var(--i-rule-2);
  outline-offset: -1px;
}

.studio-doc pre {
  overflow-x: auto;
  margin: 0;
  border: 0;
  padding: var(--s3);
  font-size: var(--t-xs);
  line-height: 1.55;
}

.studio-doc-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--i-rule);
  background: var(--i-inset);
  padding: var(--s3);
  gap: var(--s3);
}

.studio-doc-act .btn-ghost {
  border-color: var(--i-rule-2);
  background: transparent;
  color: var(--i-ink);
}

.studio-doc-act .btn-ghost:hover {
  border-color: var(--i-ink-2);
  background: var(--i-canvas);
  color: var(--i-ink);
}

.studio-doc-act .btn:disabled,
.studio-doc-act .btn-ghost:disabled {
  border-color: var(--i-rule);
  background: var(--i-canvas);
  color: var(--i-dim);
  cursor: not-allowed;
}

.studio-doc-act .studio-doc-hint {
  margin: 0;
  color: var(--i-ink-2);
  font-size: var(--t-sm);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   6. The card. J7: the result and the refusal are both objects a person
      screenshots and posts, so both are one self-contained element — its own
      ground, its own frame, its own host line — that reads with no page
      chrome around it. Nothing inside it inherits a value from the layout it
      happens to be sitting in, so the shared-run lane can lift it verbatim.

      It is dark because it came off the wire, which is the same rule every
      other instrument on this site follows.
   -------------------------------------------------------------------------- */

.studio-card {
  display: block;
  overflow: hidden;
  max-width: 46rem;
  margin: 0 0 var(--s4);
  border: 1px solid var(--i-rule);
  background: var(--i-canvas);
  color: var(--i-ink);
}

.studio-card-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  border-bottom: 1px solid var(--i-rule);
  background: var(--i-inset);
  padding: var(--s2) var(--s4);
  gap: var(--s1) var(--s3);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.studio-card-bar b {
  min-width: 0;
  color: var(--i-ink);
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-transform: none;
}

.studio-card-host {
  margin-left: auto;
  color: var(--i-amber);
  letter-spacing: 0.1em;
}

.studio-card-body {
  padding: var(--s5) var(--s4) var(--s4);
}

/* The verdict. One sentence, written from the run's own counts, and the
   largest type on the card so it survives being shrunk to feed size. */
.studio-verdict {
  max-width: 40ch;
  margin: 0 0 var(--s5);
  color: var(--i-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.32;
}

.studio-card .studio-gap {
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--i-rule);
  border-bottom: 1px solid var(--i-rule);
}

.studio-card .studio-gap > div {
  border-bottom: 1px solid var(--i-rule);
  padding: var(--s3) var(--s4) var(--s3) 0;
}

.studio-card .studio-gap > div:last-child {
  border-bottom: 0;
}

.studio-card .studio-gap dt {
  color: var(--i-dim);
}

.studio-card .studio-gap dd {
  color: var(--i-ink);
}

.studio-card .studio-gap .studio-unit {
  color: var(--i-ink-2);
}

.studio-card .studio-gap .studio-gap-note {
  color: var(--i-ink-2);
}

/* The column rule between the three figures is drawn in the wide-viewport
   block against the page hairline. On the card's ground it takes the
   instrument's. */
.studio-card .studio-gap > div {
  border-right-color: var(--i-rule);
}

.studio-card .studio-gap .studio-leak {
  color: var(--i-red);
}

.studio-card .studio-gap .studio-null {
  color: var(--i-yellow);
}

/* The three-clock spread, compact. The unreachable clock is red and says so
   in words as well as in colour. */
.studio-spread {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.35;
}

.studio-spread caption {
  padding-bottom: var(--s2);
  color: var(--i-dim);
  font-size: var(--t-tele);
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

.studio-spread th,
.studio-spread td {
  border-bottom: 1px solid var(--i-rule);
  padding: var(--s2) var(--s2) var(--s2) 0;
  text-align: left;
  vertical-align: top;
}

.studio-spread thead th {
  border-bottom: 1px solid var(--i-rule-2);
  background: none;
  color: var(--i-dim);
  font-family: var(--mono);
  font-size: var(--t-tele);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-spread tbody th {
  color: var(--i-ink);
  font-weight: 500;
}

.studio-spread td.studio-n,
.studio-spread th.studio-n {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

.studio-spread tbody tr:last-child th,
.studio-spread tbody tr:last-child td {
  border-bottom: 0;
}

/* app.css paints every second table row with the page wash, which is a light
   band across a dark card. On this ground the rows are separated by their
   hairline and nothing else. */
.studio-spread tbody tr:nth-child(even) th,
.studio-spread tbody tr:nth-child(even) td {
  background: none;
}

.studio-spread .studio-unreachable th,
.studio-spread .studio-unreachable td {
  color: var(--i-red);
}

.studio-spread .studio-declared th,
.studio-spread .studio-declared td {
  color: var(--i-green);
}

.studio-spread .studio-mark {
  color: var(--i-dim);
  font-size: var(--t-tele);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: 1px solid var(--i-rule);
  background: var(--i-inset);
  padding: var(--s2) var(--s4);
  gap: var(--s1) var(--s4);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.studio-card-hash {
  min-width: 0;
  color: var(--i-cyan);
  overflow-wrap: anywhere;
}

/* The claim that makes the card worth screenshotting. It is the last line of
   the object, so it stays on the card wherever the card goes. */
#card-check {
  flex-basis: 100%;
  color: var(--i-green);
}

/* --------------------------------------------------------------------------
   7. The refusal card. Same object, one field different: the engine read the
      spec and said what it would not do with it. Red edge, the field named,
      the message quoted rather than paraphrased.
   -------------------------------------------------------------------------- */

.studio-card--refused {
  border-left: 3px solid var(--i-red);
}

.studio-card--refused .studio-card-bar,
.studio-card--refused .studio-card-bar b {
  color: var(--i-red);
}

.studio-card--refused .studio-card-host {
  color: var(--i-amber);
}

.studio-card-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 var(--s3);
  border-top: 1px solid var(--i-rule);
  border-bottom: 1px solid var(--i-rule);
  padding: var(--s2) 0;
  gap: var(--s1) var(--s3);
  font-family: var(--mono);
  font-size: var(--t-sm);
}

.studio-card-field span {
  color: var(--i-dim);
  font-size: var(--t-tele);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-card-field b {
  color: var(--i-red);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.studio-card-reason {
  max-width: 62ch;
  margin: 0;
  color: var(--i-ink-2);
  font-size: var(--t-ui);
  line-height: 1.55;
}

/* The refusal in the language the rest of the page speaks. The engine's exact
   words stay underneath it, unedited and clearly labelled as the quote: this
   paragraph is what a person reads, that one is what they can check. */
#refusal-plain {
  margin: 0 0 var(--s3);
  color: var(--i-ink);
  font-size: var(--t-base);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. The rest of the result document: the full tables the card summarises.
   -------------------------------------------------------------------------- */

/* The three figures. They sit inside the card on this page and are written
   as a metric the way docs/DESIGN.md sets one: the number carries alone and
   the unit drops to .42em beside it. A value the run did not measure reads
   null, in the caveat colour, and never as a zero. */
.studio-gap {
  display: grid;
  margin: 0 0 var(--s8);
  border-top: 2px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.studio-gap > div {
  min-width: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) var(--s4) var(--s4) 0;
}

.studio-gap > div:last-child {
  border-bottom: 0;
}

.studio-gap dt {
  margin: 0 0 var(--s2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-gap dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.studio-gap .studio-unit {
  color: var(--ink-2);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
}

.studio-gap .studio-gap-note {
  display: block;
  min-height: 3.2rem;
  margin-top: var(--s3);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.42;
}

.studio-gap .studio-leak {
  color: var(--err);
}

.studio-gap .studio-null {
  color: var(--warn);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

/* A run's own tables. Numbers right, labels left, the unreachable clock
   marked in the deletion colour because nobody could have traded it. */
.studio-t td.studio-n,
.studio-t th.studio-n {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
}

.studio-t td.studio-mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
}

.studio-t tr.studio-unreachable th,
.studio-t tr.studio-unreachable td {
  color: var(--err);
}

.studio-t tr.studio-declared th,
.studio-t tr.studio-declared td {
  font-weight: 600;
}

.studio-t tr.studio-declared th[scope="row"]::after {
  color: var(--act-deep);
  content: " ← declared";
  font-family: var(--mono);
  font-size: var(--t-tele);
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.studio-sub {
  margin: 0 0 var(--s3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-tele);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.studio-cols {
  display: grid;
  align-items: start;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
}

.studio-notes {
  margin: 0;
  padding-left: var(--s5);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.studio-notes li {
  margin: 0 0 var(--s2);
}

.studio-notes li::marker {
  color: var(--ink-3);
}

/* The receipt block closes the document on one structural rule, the way
   .receipt does elsewhere in the system. */
.studio-receipt {
  margin: var(--s6) 0 0;
  border-top: 2px solid var(--rule-2);
  padding-top: var(--s4);
}

.studio-receipt .hash {
  font-size: var(--t-sm);
}

.studio-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--s3) 0 var(--s6);
  gap: var(--s3);
}

/* ISS-215. The line a run carries when it changed one thing about an earlier
   one. It reads as a record rather than as a heading: the mono face and the
   quiet ink are the same pair the receipt and the corpus version already use,
   because that is what it is — provenance, printed. The id wraps rather than
   pushing the page sideways on a phone. */
.studio-lineage {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

.studio-lineage a {
  color: inherit;
}

.studio-copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   9. Wider viewports. The page is a single column on a phone and splits into
      its asymmetric grids from 760px up.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .studio-head {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
  }

  .studio-who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-who > div {
    padding-right: var(--s5);
  }

  .studio-step {
    align-items: baseline;
    gap: var(--s1) var(--s5);
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Both paragraphs — the marker and the lede — sit in the second column, so
     the marker reads as a label over the sentence and the heading keeps the
     first. */
  .studio-step p {
    grid-column: 2;
  }

  .studio-spec {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.15fr);
  }

  .studio-gap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-gap > div {
    border-right: 1px solid var(--rule);
    border-bottom: 0;
    padding-right: var(--s5);
  }

  .studio-gap > div:last-child {
    border-right: 0;
  }

  .studio-cols {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .studio-refusal-body dl {
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  }

  .studio-refusal-body dt {
    margin: 0;
  }
}

/* Vertical padding stays on the longhands here: a shorthand `padding` in a
   max-width query lands later in source at the same specificity and wipes the
   block padding off every section above. docs/DESIGN.md records what that
   cost the first time. */
@media (max-width: 47.99rem) {
  .studio-ask-in {
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }

  .studio-head h1 {
    max-width: none;
  }

  .studio-gap dd {
    font-size: 1.5rem;
  }

  .studio-gap .studio-gap-note {
    min-height: 0;
  }
}

/* A label a screen reader reads and the layout does not. app.css has no such
   class and its contract is frozen, so this one carries the page's prefix
   rather than claiming a site-wide name. */
.studio [hidden] {
  display: none !important;
}

.studio-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}