/* ─────────────────────────────────────────────────────────────────────────────
   mk-env.css — shared conventions for the prototype environments.

   CONSUMED BY EXACTLY SIX PAGES: artifact-atlas, tinai, keeladi, the-ledger,
   manuscript-custody, the-lost-harp. It is a new file; no other page links it,
   so nothing here can reach the rest of the site.

   What belongs here is what should be the SAME across environments — evidence
   conventions, source treatment, spacing discipline, accessibility, responsive
   tables. What makes each page feel different belongs in that page's own
   <style id="mk-proto"> block, which loads after this file.

   Environment palettes are already defined in mk-tokens.css. This file consumes
   --env-* and adds the climate controls each page's own sheet reads.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Prototype frame ───────────────────────────────────────────────────── */

body[data-environment]{
  background:var(--env-bg);
  color:var(--env-fg);
  font:300 var(--mk-step)/1.62 var(--mk-font-body);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
body[data-environment] .wrap{
  width:min(var(--env-measure,1060px),92vw);
  margin:0 auto;
  padding:clamp(30px,5vh,56px) 0 clamp(70px,12vh,120px);
}

/* Tamil resolves to the approved Tamil face wherever it is marked as Tamil —
   the lang attribute, not a class, is what carries this. */
body[data-environment] [lang="ta"]{font-family:var(--mk-font-tamil)}

/* Rules, surfaces and quiet inks are declared explicitly per environment rather
   than derived, for two reasons: a light surface wants warm greys where a dark
   one wants tinted ink, and an explicit value cannot become invalid on an engine
   without color-mix() — which for a custom property would silently take the
   rules that consume it down with it. */

body[data-environment]{
  --env-label:#9aa0a6;
  --env-rule:rgba(140,140,140,.30);
  --env-rule-soft:rgba(140,140,140,.16);
  --env-dim:rgba(140,140,140,.86);
  --env-quiet:rgba(140,140,140,.62);
  --env-surface:rgba(140,140,140,.07);
  --env-surface-2:rgba(140,140,140,.12);
}

/* B · Living Signal Field — instrument dark, cyan carries live data */
body[data-environment="signal-field"]{
  --env-label:#a8c47a;
  --env-rule:rgba(201,214,224,.17);      --env-rule-soft:rgba(201,214,224,.09);
  --env-dim:rgba(238,243,247,.80);       --env-quiet:rgba(238,243,247,.55);
  --env-surface:#141d33;                 --env-surface-2:#1a2540;
}
/* C · Living Tiṇai — ground dark, warm, never black; sage carries the living */
body[data-environment="living-tinai"]{
  --env-label:#b6cf8c;
  --env-rule:rgba(226,224,208,.18);      --env-rule-soft:rgba(226,224,208,.10);
  --env-dim:rgba(238,239,231,.82);       --env-quiet:rgba(238,239,231,.56);
  --env-surface:#16211e;                 --env-surface-2:#1c2a26;
}
/* D · Reading Room — paper, ink, and rules light enough to read through */
body[data-environment="reading-room"]{
  --env-label:#6f5210;
  --env-rule:rgba(40,44,48,.26);         --env-rule-soft:rgba(40,44,48,.13);
  --env-dim:rgba(24,33,38,.88);          --env-quiet:rgba(24,33,38,.72);
  --env-surface:rgba(24,33,38,.045);     --env-surface-2:rgba(24,33,38,.085);
}
/* E · Extraction / Collection — institutional card stock, colder than paper */
body[data-environment="extraction"]{
  --env-label:#7a3f2c;
  --env-rule:rgba(37,39,41,.30);         --env-rule-soft:rgba(37,39,41,.15);
  --env-dim:rgba(37,39,41,.88);          --env-quiet:rgba(37,39,41,.58);
  --env-surface:rgba(37,39,41,.05);      --env-surface-2:rgba(37,39,41,.10);
}
/* F · Retro Tamil Futurism — ink is warm bone on aubergine, rules are signal */
body[data-environment="tamil-retrofuture"]{
  --env-label:#f0a05a;
  --env-rule:rgba(240,222,236,.20);      --env-rule-soft:rgba(240,222,236,.11);
  --env-dim:rgba(245,236,242,.82);       --env-quiet:rgba(245,236,242,.56);
  --env-surface:#2c1839;                 --env-surface-2:#371f47;
}

/* ── 2. Typography discipline, shared ─────────────────────────────────────── */

body[data-environment] p{color:var(--env-dim);max-width:var(--mk-measure);margin:0 0 15px}
body[data-environment] p strong,
body[data-environment] li strong,
body[data-environment] td strong{color:var(--env-fg);font-weight:600}
body[data-environment] ul,body[data-environment] ol{color:var(--env-dim);max-width:var(--mk-measure)}
body[data-environment] li{margin:0 0 9px}
body[data-environment] .lede{color:var(--env-fg);max-width:58ch}
body[data-environment] .mono{font-family:var(--mk-font-technical)}

/* The small technical label used for eyebrows, keys and field names. */
body[data-environment] .eyebrow,
body[data-environment] .h2sub,
body[data-environment] th{
  font-family:var(--mk-font-technical);
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* A caption is prose about the thing above it, not a label on it, so it is set
   in the body face and at a readable size rather than in the technical one. */
body[data-environment] .cap{
  font:300 12.5px/1.65 var(--mk-font-body);
  letter-spacing:.005em;text-transform:none;color:var(--env-quiet);max-width:74ch;
}

/* ── 3. Evidence conventions, shared across every environment ─────────────── */
/* These are the platform's discipline, so they must read the same everywhere:
   a source is a source and a limit is a limit whatever the page's climate.
   Only the accent colour changes with the environment. */

body[data-environment] .src{
  font:400 11.5px/1.6 var(--mk-font-technical);
  color:var(--env-quiet);
  border-left:2px solid var(--env-rule);
  padding-left:14px;margin:8px 0 22px;max-width:76ch;
}
body[data-environment] .src b{color:var(--env-secondary);font-weight:700}
body[data-environment] .src a{color:var(--env-secondary);text-decoration:none;
  border-bottom:1px solid var(--env-rule)}
body[data-environment] .src a:hover{border-bottom-color:var(--env-secondary)}

/* Claim-level confidence chips. Never colour alone — each carries its word. */
body[data-environment] .status{
  display:inline-block;font:700 8.5px/1 var(--mk-font-technical);
  letter-spacing:.13em;text-transform:uppercase;padding:4px 7px;
  border:1px solid var(--env-rule);border-radius:2px;margin-left:4px;
  color:var(--env-quiet);background:none;vertical-align:.12em;
}
body[data-environment] .st-cite{color:var(--env-primary)}

/* The documented / not-documented distinction this platform runs on. */
body[data-environment] .box{
  background:var(--env-surface);
  border:1px solid var(--env-rule-soft);
  border-left:3px solid var(--env-primary);
  padding:20px 24px;margin:24px 0;max-width:80ch;
}
body[data-environment] .box b{
  display:block;font:700 9.5px/1 var(--mk-font-technical);
  letter-spacing:.15em;text-transform:uppercase;color:var(--env-primary);margin-bottom:11px;
}
body[data-environment] .box.g{border-left-color:var(--env-secondary)}
body[data-environment] .box.g b{color:var(--env-secondary)}
body[data-environment] .box.b{border-left-color:var(--mk-river)}
body[data-environment] .box.b b{color:var(--mk-river)}

/* ── 4. Tables: responsive without hiding a single value ──────────────────── */
/* Below the breakpoint each row becomes its own labelled block. The header text
   is carried by generated content from a data-th attribute where a page sets
   one, and the table still reads in source order for a screen reader. Nothing
   is removed and nothing is collapsed behind an interaction. */

body[data-environment] table{
  border-collapse:collapse;width:100%;margin:20px 0;font-size:13.5px;
}
body[data-environment] th,body[data-environment] td{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--env-rule-soft);
  color:var(--env-dim);vertical-align:top;
}
body[data-environment] th{
  font-size:8.5px;line-height:1.3;font-weight:700;color:var(--env-label);
  border-bottom-color:var(--env-rule);
}
body[data-environment] td.n{font-family:var(--mk-font-technical);color:var(--env-fg);white-space:nowrap}

body[data-environment] .mk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:640px){
  body[data-environment] .mk-stack thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-environment] .mk-stack tr{display:block;padding:12px 0;
    border-bottom:1px solid var(--env-rule)}
  body[data-environment] .mk-stack td{display:block;border:0;padding:3px 0}
  body[data-environment] .mk-stack td::before{
    content:attr(data-th);display:block;
    font:700 8.5px/1.4 var(--mk-font-technical);letter-spacing:.14em;
    text-transform:uppercase;color:var(--env-secondary);margin-bottom:2px}
  body[data-environment] .mk-stack td:empty::after{content:"—";color:var(--env-quiet)}
}

/* ── 5. Links, focus and targets ──────────────────────────────────────────── */

/* Content links only. The skip link and the header nav live on the shell, which
   has its own ground — colouring every <a> with the page accent left the skip
   link accent-on-gold, which is unreadable. */
body[data-environment] main a{color:var(--env-secondary)}
body[data-environment] main a:focus-visible,
body[data-environment] a:focus-visible,
body[data-environment] button:focus-visible,
body[data-environment] input:focus-visible,
body[data-environment] select:focus-visible,
body[data-environment] [tabindex]:focus-visible{
  outline:2px solid var(--mk-focus);outline-offset:3px;border-radius:2px;
}
body[data-environment] footer{
  margin-top:clamp(48px,8vh,84px);padding-top:24px;
  border-top:1px solid var(--env-rule);font-size:13px;color:var(--env-quiet);
}
body[data-environment] footer a{color:var(--env-secondary);text-decoration:none}

/* ── 6. Motion ────────────────────────────────────────────────────────────── */
/* Nothing on a prototype may require motion to be understood. Under reduce,
   every transition and animation is stopped outright rather than shortened, so
   no element can be stranded mid-reveal. */

@media(prefers-reduced-motion:reduce){
  body[data-environment] *,
  body[data-environment] *::before,
  body[data-environment] *::after{
    animation:none!important;transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ── 7. Status disclosure placement ───────────────────────────────────────── */
/* Visible, but never the loudest thing on an exhibit page. */

body[data-environment] .mk-status{
  --mk-status-rule:var(--env-rule);
  color:var(--env-fg);
  max-width:min(var(--env-measure,1060px),92vw);
  margin:0 auto;
}


/* ── 8. Shell chrome contrast, scoped to the prototypes ───────────────────── */
/* mk-shell.css is also consumed by index, enter and research-index, which are
   approved and must not change, so the nav and skip-link contrast lift lives
   here instead of in that file. The same shortfall on those three pages is a
   pre-existing item, recorded rather than altered. */
body[data-environment] .mk-nav a{color:rgba(243,239,229,.88)}
body[data-environment] .mk-nav a:hover,
body[data-environment] .mk-nav a[aria-current="page"]{color:#fff}
/* The status sentence is disclosure, not decoration; it reads at full weight. */
body[data-environment] .mk-status__text{opacity:1;color:var(--env-dim)}
body[data-environment] .mk-status__label{color:var(--mk-status-key,var(--env-label))}