/* 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); }

/* ---------- 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;
}
.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;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.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;
  white-space: pre-wrap; overflow-x: auto;
}
.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 ---------- */
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; }
  .claim { flex-direction: column; gap: 12px; }
  .claim .chips { flex-direction: row; flex-wrap: wrap; }
  .endpoint .desc { margin-left: 0; width: 100%; }
}

/* ---------- which page you are on ---------- */
header.top nav a.here { color: #fff; }
header.top nav a.here::after {
  content: ""; display: block; height: 1px; margin-top: 5px;
  background: rgba(255,255,255,0.55);
}
header.top .enter.here { background: rgba(255,255,255,0.14); border-color: #fff; }