/* SIMARC interior pages — apparatus, fleet, data, ledger, about, agents.
 *
 * Loaded on top of landing.css, so the palette, the type, the header and the
 * footer come from one place and cannot drift. What lives here is only the
 * dense content the landing page never has to carry: instrument lists, tables,
 * endpoint rows, certificates and chips.
 *
 * The rule for this layer: the field is the only place colour is loud. Below
 * it everything is paper, hairlines and one accent, so that a table of numbers
 * is readable rather than atmospheric.
 */

/* ---------- the hero: shorter than the institute's, and no figure ----------
   These pages are read, not looked at. The lattice stays as a ground — the
   canvas carries data-mode="lattice", so dimensions.js draws the tiling and
   the currents and skips the tesseract entirely. */
.field.instpage {
  min-height: 46vh; padding: 132px 0 76px;
  background:
    radial-gradient(880px 560px at 78% 8%, #8A34D6 0%, transparent 58%),
    radial-gradient(680px 520px at 96% 88%, #1B6BA8 0%, transparent 60%),
    linear-gradient(112deg, #160540 0%, #340D8C 34%, #5320C0 72%, #6E2BD8 100%);
}
.field.instpage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(22,6,60,0.88) 0%, rgba(22,6,60,0.62) 42%, rgba(22,6,60,0.20) 72%, transparent 92%);
}
.field.instpage .mast { max-width: 760px; }
.field.instpage .mast h1 {
  font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 22px;
}
.field.instpage .mast p.sub { max-width: 660px; font-size: 17px; }
.field.instpage .mast p.sub strong { color: #fff; font-weight: 500; }
.field.instpage .code {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 16px;
}

/* ---------- body copy ---------- */
section.band { padding: 84px 0; }
section.band.tint { background: var(--surface); }
.kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
section.band h2 {
  margin: 0 0 22px; max-width: 780px; color: var(--ink);
  font-size: clamp(26px, 3vw, 38px); font-weight: 500;
  line-height: 1.12; letter-spacing: -0.015em;
}
section.band p {
  max-width: 760px; margin: 0 0 18px;
  font-size: 17px; line-height: 1.62; color: var(--ink-2);
}
section.band p:last-child { margin-bottom: 0; }
section.band strong { color: var(--ink); font-weight: 500; }
section.band em { font-style: italic; }
section.band a { color: var(--signal); text-decoration: none; }
section.band a:hover { text-decoration: underline; }
p.small { font-size: 15px; line-height: 1.58; }
.dim { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.narrow { max-width: 760px; }

/* the hero lede is the only .lede on these pages and it sits on the field */
.field.instpage p.lede { color: rgba(255,255,255,0.86); max-width: 660px; }

/* ---------- buttons on paper ----------
   landing.css draws .btn for the dark field: white rule, white type. On a
   light band it has to invert or it disappears. */
section.band .btn {
  border-color: var(--line); color: var(--signal); background: var(--paper);
}
section.band .btn:hover { border-color: var(--signal); background: var(--surface); }
section.band .btn.ghost { background: var(--paper); }
/* .solid marks the primary action. Without this it inherited the outline rule
   above and was indistinguishable from the secondary button beside it. */
section.band .btn.solid {
  border-color: var(--signal); background: var(--signal); color: #fff;
}
section.band .btn.solid:hover { background: #6a25c6; border-color: #6a25c6; }

/* ---------- chips: the rung, the verdict, the status ----------
   The colours are load-bearing, not decorative — a chip says what kind of
   claim this is, so the categories must stay separable at a glance. */
.chip {
  display: inline-block; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  white-space: nowrap;
}
.chip.proof, .chip.null   { color: #1C7A57; border-color: #B9E2CE; background: #EAF7F1; }
.chip.exact               { color: var(--signal); border-color: #DDCBF6; background: #F4EEFD; }
.chip.stat, .chip.anomaly { color: #9A5B12; border-color: #EBD3AC; background: #FBF3E6; }
.chip.refuted             { color: #A32F3E; border-color: #F0C6CC; background: #FCEDEF; }
.chip.open, .chip.rung    { color: var(--muted); border-color: var(--line); background: var(--surface); }

/* ---------- instrument / claim list ---------- */
.claims {
  margin-top: 36px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); overflow: hidden;
}
.claim {
  display: flex; gap: 24px; padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.claim:last-child { border-bottom: none; }
.claim .chips { display: flex; flex-direction: column; gap: 6px; min-width: 112px; flex: 0 0 auto; }
.claim .body { min-width: 0; }
.claim .body b {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em;
}
/* direct child only: a descendant selector here forced every nested <span>
   (inline .mono paths, inline .chip status pills) onto its own line. */
.claim .body > span { display: block; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.claim .body a { color: var(--signal); text-decoration: none; }

/* ---------- tables ---------- */
.tablewrap {
  margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px;
  /* same scroll-shadow as the certificates: a wide table on a phone has to
     announce that there is more of it off the right edge */
  background:
    linear-gradient(to right, var(--paper) 40%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--paper) 40%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,   rgba(12,19,48,0.13), rgba(12,19,48,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(12,19,48,0.13), rgba(12,19,48,0));
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}
.tablewrap.narrow { max-width: 860px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left; font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface); white-space: nowrap;
}
td {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); vertical-align: top; line-height: 1.5;
}
tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: var(--font-mono); font-size: 13px; }
td strong { color: var(--ink); font-weight: 500; }
table a { color: var(--signal); text-decoration: none; }

/* a bare table with no .tablewrap around it still needs the frame */
section.band > .shell > table {
  margin-top: 32px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}

/* ---------- API endpoints ---------- */
.endpoints {
  margin-top: 32px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); overflow: hidden;
}
.endpoint {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.endpoint:last-child { border-bottom: none; }
.endpoint:hover { background: var(--surface); }
.endpoint .verb {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; color: var(--signal);
  border: 1px solid #DDCBF6; background: #F4EEFD;
  padding: 3px 8px; border-radius: 3px;
}
.endpoint .path { font-family: var(--font-mono); font-size: 14px; }
.endpoint .path a { color: var(--ink); text-decoration: none; }
.endpoint .path a:hover { color: var(--signal); }
.endpoint .desc { font-size: 14.5px; color: var(--muted); margin-left: auto; }

/* ---------- the certificate block: the one place type goes dark ---------- */
.cert {
  margin-top: 30px; padding: 22px 24px; border-radius: 10px;
  background: #0C1330; color: rgba(255,255,255,0.80);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.85;
  /* These blocks are laid out in columns with dot leaders, so they must not
     re-wrap: on a phone `pre-wrap` broke every line in half and left the
     leaders pointing at nothing. They scroll instead, like any code block. */
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* a shadow on whichever edge still has content past it — pure CSS, via
     background-attachment: the `local` layers scroll with the content and
     uncover the `scroll` ones only when there is more to see */
  background-image:
    linear-gradient(to right, #0C1330 40%, rgba(12,19,48,0)),
    linear-gradient(to left,  #0C1330 40%, rgba(12,19,48,0)),
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,0.55), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.55), rgba(0,0,0,0));
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}
.cert .c { color: rgba(255,255,255,0.38); }
.cert .b { color: #fff; }
.cert .g { color: #6FD9A6; font-weight: 500; }
.cert .y { color: #F0B860; font-weight: 500; }
.cert a { color: #C9A6F5; text-decoration: none; }

/* ---------- an empty ledger, stated rather than hidden ---------- */
.empty-ledger {
  margin-top: 14px; padding: 16px 20px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: var(--paper); font-size: 15px; color: var(--ink-2);
}
.empty-ledger b { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }

/* ---------- figures ----------
   These are drawn at a fixed width with type sized for it. Scaled down to a
   phone the labels fall to four pixels, so the image keeps a legible width and
   the reader pans it instead. The caption stays outside the scroller. */
.figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* the figure itself */
figure.fig { margin: 32px 0 0; }
figure.fig img, figure.fig svg { max-width: 100%; height: auto; display: block; }
figure.fig figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55;
}
figure.fig .src {
  display: block; margin-top: 4px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .field.instpage { min-height: auto; padding: 112px 0 64px; }
  .field.instpage::after {
    background: linear-gradient(180deg,
      rgba(22,6,60,0.30) 0%, rgba(22,6,60,0.62) 48%, rgba(22,6,60,0.88) 100%);
  }
  section.band { padding: 64px 0; }
  /* a phone has a third of the width, so the table gets its padding back as
     columns: the same rows fit in far less horizontal scrolling */
  th { padding: 11px 12px; font-size: 10px; letter-spacing: 0.1em; }
  td { padding: 11px 12px; }
  table { font-size: 14px; }
  td.mono, th.mono { font-size: 12px; }
  .cert { font-size: 12px; padding: 18px 18px; line-height: 1.75; }
  .figscroll img { min-width: 560px; }
  .claim { flex-direction: column; gap: 12px; }
  .claim .chips { flex-direction: row; flex-wrap: wrap; }
  .endpoint .desc { margin-left: 0; width: 100%; }
}


/* ---------- the contact form ----------
   The only place on the site that takes input, so it is the only place these
   controls exist. Sized for prose: a message is paragraphs, not a tweet. */
form.msg { margin-top: 34px; max-width: 720px; }
form.msg label {
  display: block; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
form.msg .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form.msg input[type="text"], form.msg input[type="email"], form.msg textarea {
  display: block; width: 100%; margin-top: 8px;
  font-family: var(--font-text); font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; letter-spacing: normal; text-transform: none;
}
form.msg textarea { resize: vertical; min-height: 150px; }
form.msg input[type="file"] {
  display: block; width: 100%; margin-top: 8px;
  font-family: var(--font-text); font-size: 14.5px; color: var(--ink-2);
  background: var(--paper); border: 1px dashed var(--line);
  border-radius: 8px; padding: 11px 13px;
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
form.msg input[type="file"]::file-selector-button {
  font-family: var(--font-mono); font-size: 12px; margin-right: 12px;
  padding: 7px 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
form.msg .hint {
  display: block; margin-top: 7px;
  font-family: var(--font-text); font-size: 13px; line-height: 1.5;
  color: var(--muted); letter-spacing: normal; text-transform: none;
}
form.msg input:focus, form.msg textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(123,47,224,0.12);
}
form.msg ::placeholder { color: var(--muted); opacity: 0.75; }
/* the trap: off-screen rather than display:none, which some fillers skip */
form.msg .trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
form.msg .send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
form.msg button[type="submit"] {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  padding: 13px 26px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--signal); background: var(--signal); color: #fff;
}
form.msg button[type="submit"]:hover { background: #6a25c6; border-color: #6a25c6; }
form.msg button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
form.msg .note { font-size: 14.5px; color: var(--muted); }
form.msg .note[data-kind="good"] { color: #1C7A57; }
form.msg .note[data-kind="bad"]  { color: #A32F3E; }

/* The contact form moved onto the hero gradient, and its palette was written
   for paper: labels, hints and the status line all landed at 4.1:1 against the
   violet, under the 4.5:1 AA floor, and the good/bad colours are dark ink on a
   dark ground. Scoped to .field so the form is unchanged anywhere else. */
.field .msg label            { color: rgba(255,255,255,0.74); }
.field .msg .hint            { color: rgba(255,255,255,0.62); }
.field .msg .note            { color: rgba(255,255,255,0.74); }
.field .msg .note[data-kind="good"] { color: #6EE7B7; }
.field .msg .note[data-kind="bad"]  { color: #FCA5A5; }

@media (max-width: 640px) {
  form.msg .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- the instrument marks ----------
   Each gate is drawn rather than numbered. The mark carries what that gate
   refuses; the number stays underneath because the gates are referred to by
   it. Generated by brand/make_gates.py. */
.claim .chips .gate {
  display: block; width: 46px; height: 46px;
}
.claim .chips .gnum {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--muted); white-space: nowrap;
}
.claim .chips:has(.gate) { align-items: flex-start; gap: 0; min-width: 92px; }

@media (max-width: 980px) {
  /* the claim stacks on a phone, so the mark and its number sit side by side */
  .claim .chips:has(.gate) { flex-direction: row; align-items: center; gap: 12px; }
  .claim .chips .gnum { margin-top: 0; }
}

/* ---------- publications ----------
   Native <details> so preview and collapse work with no JavaScript. The iframe
   is lazy so opening the page does not fetch two PDFs nobody asked for, and it
   is hidden below 720px because embedded PDF viewers on phones either render a
   blank frame or hijack the page into a download. */
.paper {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); margin-top: 14px; overflow: hidden;
}
.paper[open] { border-color: var(--muted); }
.paper > summary {
  display: flex; gap: 16px; align-items: baseline;
  padding: 18px 20px; cursor: pointer; list-style: none;
}
.paper > summary::-webkit-details-marker { display: none; }
.paper > summary::after {
  content: "+"; margin-left: auto; font-family: var(--font-mono);
  font-size: 17px; color: var(--muted); line-height: 1; flex: 0 0 auto;
}
.paper[open] > summary::after { content: "\2212"; }
.paper > summary:hover { background: var(--surface); }
.paper > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.paper .pnum {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  flex: 0 0 auto; padding-top: 2px;
}
.paper .phead { min-width: 0; }
.paper .ptitle {
  display: block; font-size: 16px; font-weight: 500; color: var(--ink);
  line-height: 1.4; letter-spacing: -0.01em;
}
.paper .pmeta {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
}
.paper .pbody { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.paper .pabs {
  margin-top: 16px; font-size: 15px; line-height: 1.62; color: var(--ink-2);
  max-width: 760px;
}
.paper .pacts { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
/* Hidden by default and shown only where a desktop-class PDF viewer actually
   exists. Width alone was the wrong signal: an iPhone in landscape is 932px
   and would have been served a preview taller than the screen. A hidden
   <object> is never fetched, so this also costs nothing on a phone. */
.paper .pview {
  /* Full card width. The page-shaped cap this replaced was there to make
     fit-width show a whole page, but with #view=FitH gone the viewer fits the
     page on its own, so the constraint only wasted horizontal space.
     Height is viewport-relative so the preview never outgrows the screen. */
  display: none; width: 100%; margin-top: 18px;
  height: min(84vh, 1040px);
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
@media (min-width: 900px) and (min-height: 640px) and (hover: hover) and (pointer: fine) {
  .paper .pview { display: block; }
}
.paper .pfall { margin: 0; padding: 22px; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .paper > summary { padding: 15px 16px; }
  .paper .pbody { padding: 0 16px 16px; }
}
.paper .pdoi {
  margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted);
}
.paper .pdoi .mono { font-size: 12px; }