/* Museum exhibit mechanisms.
   Every one is progressive enhancement over content that is already on the page:
   with JavaScript off, the page is a complete static exhibit and nothing below
   is needed to read it. Nothing here animates for decoration. */

:root{
  --ex-panel:#151b20;
  --ex-edge:rgba(243,239,229,.15);
  --ex-ink:#eceae4;
  --ex-dim:#a8a49a;
  --ex-obs:#7fb8c9;      /* observation */
  --ex-mod:#9abd63;      /* model */
  --ex-inf:#c9a447;      /* inference */
  --ex-hyp:#b79ec9;      /* hypothesis */
  --ex-int:#e08b7a;      /* interpretation */
  --ex-gap:#c98f5a;      /* what is missing */
}

/* ── shared shell ─────────────────────────────────────────────────────── */
.mk-ex{margin:44px 0;border:1px solid var(--ex-edge);border-radius:2px;background:var(--ex-panel)}
.mk-ex__head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  padding:16px 18px 12px;border-bottom:1px solid var(--ex-edge)}
.mk-ex__k{font:700 9.5px/1 "Space Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mk-gold,#c9a447)}
.mk-ex__t{font:500 17px/1.3 "Petrona",Georgia,serif;color:var(--ex-ink);margin:0}
.mk-ex__d{font:400 13px/1.5 "Noto Sans",sans-serif;color:var(--ex-dim);margin:2px 0 0;flex:1 1 100%}
.mk-ex__body{padding:14px 18px 18px}
.mk-ex__note{font:400 12px/1.5 "Noto Sans",sans-serif;color:var(--ex-dim);
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--ex-edge)}

/* controls */
.mk-ex__ctl{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.mk-ex__b{min-height:44px;min-width:44px;padding:9px 13px;cursor:pointer;
  font:600 12px/1.2 "Noto Sans",sans-serif;color:var(--ex-ink);
  background:transparent;border:1px solid var(--ex-edge);border-radius:2px}
.mk-ex__b:hover{border-color:var(--ex-ink)}
.mk-ex__b[aria-pressed="true"]{background:rgba(201,164,71,.16);border-color:var(--mk-gold,#c9a447)}
.mk-ex__b:focus-visible,.mk-ex a:focus-visible,.mk-ex input:focus-visible,
.mk-ex [tabindex]:focus-visible{outline:2px solid var(--mk-gold,#c9a447);outline-offset:2px}
.mk-ex__in{min-height:44px;padding:9px 12px;font:400 13px/1.2 "Noto Sans",sans-serif;
  color:var(--ex-ink);background:#0f1417;border:1px solid var(--ex-edge);border-radius:2px;
  min-width:min(260px,100%)}
.mk-ex__count{font:400 12px/1.4 "Space Mono",monospace;color:var(--ex-dim);align-self:center}

/* ── A · claim & source inspector ─────────────────────────────────────── */
.mk-ex__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mk-ex__item{border-left:3px solid var(--ex-edge);padding:9px 0 9px 12px}
.mk-ex__item[data-type="observation"]{border-left-color:var(--ex-obs)}
.mk-ex__item[data-type="model"]{border-left-color:var(--ex-mod)}
.mk-ex__item[data-type="inference"]{border-left-color:var(--ex-inf)}
.mk-ex__item[data-type="hypothesis"]{border-left-color:var(--ex-hyp)}
.mk-ex__item[data-type="interpretation"]{border-left-color:var(--ex-int)}
.mk-ex__tag{display:inline-block;font:700 9px/1.5 "Space Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;border-radius:2px;
  margin:0 7px 5px 0;white-space:nowrap}
.mk-ex__tag--observation{color:var(--ex-obs)}.mk-ex__tag--model{color:var(--ex-mod)}
.mk-ex__tag--inference{color:var(--ex-inf)}.mk-ex__tag--hypothesis{color:var(--ex-hyp)}
.mk-ex__tag--interpretation{color:var(--ex-int)}
.mk-ex__tag--gap{color:var(--ex-gap)}
.mk-ex__q{font:400 14.5px/1.55 "Noto Sans",sans-serif;color:var(--ex-ink);margin:0 0 6px}
.mk-ex__m{font:400 12px/1.5 "Space Mono",monospace;color:var(--ex-dim);margin:0}
.mk-ex__m a{color:var(--ex-dim)}
.mk-ex__acc{font:700 9px/1.5 "Space Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 5px;border:1px dashed var(--ex-edge);border-radius:2px;margin-left:6px;
  white-space:nowrap;color:var(--ex-dim)}
.mk-ex__acc[data-a="full text reviewed"]{color:var(--ex-mod);border-style:solid}
.mk-ex__acc[data-a="source listed, not accessed"],
.mk-ex__acc[data-a="snippet only"]{color:var(--ex-gap)}
.mk-ex__acc[data-a="restricted"]{color:var(--ex-hyp)}

/* ── B · chronology ───────────────────────────────────────────────────── */
.mk-tl{position:relative;padding-left:26px}
.mk-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;
  background:var(--ex-edge)}
.mk-tl__s{position:relative;padding:0 0 20px}
.mk-tl__s::before{content:"";position:absolute;left:-23px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--ex-panel);border:2px solid var(--ex-dim)}
.mk-tl__s[aria-current="step"]::before{background:var(--mk-gold,#c9a447);
  border-color:var(--mk-gold,#c9a447)}
.mk-tl__s[aria-current="step"] .mk-tl__w{color:var(--ex-ink)}
.mk-tl__d{font:700 10px/1.4 "Space Mono",monospace;letter-spacing:.1em;color:var(--mk-gold,#c9a447);
  margin:0 0 3px}
.mk-tl__w{font:400 14.5px/1.55 "Noto Sans",sans-serif;color:var(--ex-dim);margin:0}
.mk-tl__s[aria-current="step"]{outline:none}

/* ── C · evidence / interpretation split ──────────────────────────────── */
.mk-split{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.mk-split{grid-template-columns:1fr 1fr}}
.mk-split__c{border:1px solid var(--ex-edge);border-radius:2px;padding:13px}
.mk-split__h{font:700 9.5px/1 "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 9px}
.mk-split__c--e .mk-split__h{color:var(--ex-obs)}
.mk-split__c--i .mk-split__h{color:var(--ex-int)}

/* ── D · what is missing ──────────────────────────────────────────────── */
.mk-gap__bar{display:flex;height:22px;border:1px solid var(--ex-edge);border-radius:2px;
  overflow:hidden;margin:0 0 9px}
.mk-gap__seg{height:100%}
.mk-gap__key{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 11.5px/1.5 "Space Mono",monospace;
  color:var(--ex-dim);margin:0 0 12px}
.mk-gap__sw{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}

/* ── tables the mechanisms enhance ────────────────────────────────────── */
.mk-ex table{width:100%;border-collapse:collapse;font:400 13.5px/1.5 "Noto Sans",sans-serif}
.mk-ex th{text-align:left;font:700 10px/1.4 "Space Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ex-dim);border-bottom:1px solid var(--ex-edge);
  padding:7px 9px 7px 0}
.mk-ex td{padding:7px 9px 7px 0;border-bottom:1px solid rgba(243,239,229,.07);
  color:var(--ex-ink);vertical-align:top}
.mk-ex__srt{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;
  min-height:44px;text-align:left}
.mk-ex__srt::after{content:" ↕";opacity:.5}
.mk-ex__srt[aria-sort="ascending"]::after{content:" ↑";opacity:1}
.mk-ex__srt[aria-sort="descending"]::after{content:" ↓";opacity:1}
.mk-ex tr[hidden]{display:none}

/* wide content scrolls inside its own container, never the page */
.mk-ex__scroll{overflow-x:auto}

/* JS-off: controls are never shown, so nothing offers an action that does nothing */
.mk-ex__ctl,.mk-ex__count{display:none}
.js .mk-ex__ctl{display:flex}.js .mk-ex__count{display:block}

@media (prefers-reduced-motion: reduce){
  .mk-ex *,.mk-tl *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Experimental AI control — disabled, and it looks disabled.
   It is never hidden: a visitor should be able to see that the museum has
   considered this and decided against switching it on. */
.mk-ex__b--ai{border-style:dashed;color:var(--ex-dim);cursor:not-allowed}
.mk-ex__b--ai[aria-disabled="true"]:hover{border-color:var(--ex-edge)}
.mk-ai__why{color:var(--ex-dim);font-style:italic}

/* ── The exhibit opening ──────────────────────────────────────────────────────
   One block under the standfirst naming the instrument this page holds, showing
   the page's own labels for it, and linking to it. Every word in it is read out
   of the page or that page's evidence record, so no two pages carry the same
   block; nothing in it is decorative and nothing moves. */
.mk-open{display:flex;flex-wrap:wrap;gap:18px 34px;margin:26px 0 34px;padding:16px 0 4px;
  border-top:1px solid var(--mk-shell-edge,rgba(243,239,229,.16));
  border-bottom:1px solid var(--mk-shell-edge,rgba(243,239,229,.16))}
.mk-open__i{flex:1 1 22ch;min-width:0;display:flex;flex-direction:column;gap:7px}
.mk-open__k{margin:0;font:700 10px/1.4 var(--mk-font-technical,"Space Mono",monospace);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mk-gold,#c9a447)}
.mk-open__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 7px}
/* The labels wrap rather than truncate: a chip reading "editorial note…" tells
   a reader less than no chip at all. */
.mk-open__row li{font:400 11px/1.5 var(--mk-font-technical,"Space Mono",monospace);
  letter-spacing:.04em;padding:2px 8px;border:1px solid currentColor;border-radius:2px;
  opacity:.78}
/* The ink is the page's own, not a link colour: these pages set thirty-odd
   different grounds between them, and a browser-default blue on near-black is
   both wrong and unreadable. The affordance is the rule under the words. */
.mk-open__go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  min-height:24px;font:400 12px/1.4 var(--mk-font-body,"Noto Sans",sans-serif);
  color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:1px}
.mk-open__go:hover,.mk-open__go:focus-visible{border-bottom-color:var(--mk-gold,#c9a447)}
@media(max-width:600px){
  .mk-open{gap:16px;margin:22px 0 28px}
  .mk-open__i{flex:1 1 100%}
  .mk-open__row li{font-size:10.5px}
}