/* ================================================================================================================
   Research page style sheet, annieburke.com/research (25 October 2026)

   One place for how the page looks. Each value is set once as a token in :root; the components below use the tokens.
   To change a colour, size or spacing, change its token here and it changes everywhere it is used.

   Rules that hold across the page (Annie's rulings, 25 October 2026)
   - Approved and fixed: the ball (shaders.com LiquidMetal, its settings in the page script), the ybouane Dark Glass
     (brightness -0.3, blur 0.25, corner radius 50, in the page script), the type sizes, the colour scale, the menu
     numbering, and the map's own V13 glass (in full-page-live.css). Change only what Annie names.
   - Anything that opens uses one arrow: the question cards' arrow (9 px, the section's title colour). It sits where the
     text continues: the first lines show, fade out, and the arrow is right under the fade, pointing right. Open, the
     text shows in full and the arrow at its end turns to point up; it closes from there or from the title.
   - The dissertation title is solid white for now.
   - The first ball stays as approved. The other chrome pieces use its material and settings exactly, in the shader's
     own formula shapes (never a drawn outline, which loses quality); some sit whole on the page, some are cut by
     the page's edge, and they answer the pointer: livelier and turning toward it as it comes near.
   - The menu is grouped into parts (small grey labels), its rows close together, its text semi-bold in look: Arial
     Narrow has no semi-bold, so the text carries a 0.45 px outline in its own colour (the answers carry 0.3 px).
   - Text taken from the live page keeps its words; only where it sits and how it opens change.

   Files: full-page-live.css (the live page's earlier styles, each rule limited to the .live blocks that still need
   them: the map, Previous versions, the timeline, the gallery, the reading list and sources) loads first; this file
   loads after it. Its @layer fp-first rules outrank the live styles' own !important rules (the layer order is set at
   the top of full-page-live.css).
   ================================================================================================================ */

:root{
  /* colour */
  --ground:#09090c;                         /* the page's black */
  --white:#f5f6f8;
  --title-white:#ffffff;                    /* the dissertation title */
  --text:#dedee3;                           /* answers and body text */
  --peek:#c3c7ce;
  --note:#a7acb5;                           /* the object of study sentence */
  --label:rgba(242,244,246,.55);            /* small grey capitals: labels, menu parts, item names */
  --logo:#eeeef2;
  --nav:rgba(222,222,227,.72);              /* site navigation at the top */
  --nav-line:#0075ff;
  --menu-text:rgba(242,244,246,.86);
  --menu-text-hover:rgba(242,244,246,.96);
  --menu-number:#a6e3ff;
  --current:#dcff00;                        /* where you are: menu text, an open item's name */
  --current-line:#009dff;
  --wash:rgba(255,255,255,.035);            /* hover and current-place background in the menu */
  --link-line:rgba(166,227,255,.45);
  --pill-line:rgba(229,242,255,.28);
  --pill-line-hover:rgba(229,242,255,.6);
  --equation:#a6e3ff;
  /* the colour scale: each title carries --c1 to --c2 (its slice of the scale), set on its block in the page */

  /* type */
  --font:"Arial Narrow","Aptos Narrow","Roboto Condensed",Arial,sans-serif;
  --size-title:clamp(28px,2.7vw,40px);      /* dissertation title */
  --size-rq:clamp(21px,2.3vw,30px);         /* research question */
  --size-question:21px;                     /* card questions and section titles */
  --size-subtitle:17px;
  --size-text:15px;
  --size-note:15.5px;
  --size-menu:15px;
  --size-label:13px;
  --line-text:1.32;
  --gap-paragraph:9px;
  --stroke-text:0.3px;                      /* answers: slightly bolder */
  --stroke-menu:0.45px;                     /* menu: semi-bold look */

  /* layout */
  --card:460px; --gap:56px; --rowgap:clamp(96px,14vh,150px); --menu:clamp(210px,16vw,240px);
  --radius:36px;                            /* every glass surface, the glass script included ("a little less round") */

  /* spacing by relationship (Annie, 25 October: "within each block, not a lot of spacing", more before each block):
     three distances, from closest to furthest. Parts of one block sit --space-inside apart; blocks inside a section sit
     --space-between apart; sections sit --rowgap apart. Each grows with the window within its floor and cap. */
  --space-inside:clamp(6px,0.8vw,12px);
  --space-between:clamp(40px,5vw,72px);
  --pad-glass:clamp(20px,2.4vw,32px) clamp(22px,3vw,40px);   /* inside a glass section */

  /* the arrow and the fade */
  --arrow:9px;
  --arrow-turn:transform .35s cubic-bezier(.2,.7,.2,1);
  --fade:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.35) 72%,transparent 100%);
  --preview:calc(2 * var(--size-text) * var(--line-text));   /* two lines of text */
}

/* ---------------------------------------------------------------------------------------------------------- page */
*{box-sizing:border-box}
/* the chrome pieces' squares can pass the window's sides (only their transparent corners); clipping them there keeps
   the page from scrolling sideways */
html{background:var(--ground);overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* the glass library needs its glass (the menu and the cards) to be direct children of its root; the chrome sits in the
   root too. Columns: the menu, then the two card columns. */
#root{position:relative;min-height:100vh;display:grid;align-content:start;
  grid-template-columns:minmax(16px,1fr) var(--menu) 40px minmax(0,var(--card)) var(--gap) minmax(0,var(--card)) minmax(16px,1fr);
  grid-template-rows:auto auto auto auto auto;padding-bottom:24vh}
/* the page's black as a picture under everything, the full height of the page (the glass reads it under every card) */
#ground{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:0}
/* the chrome: one window high, placed under the intro (its top set by the script), so it scrolls with the cards */
#metal,#chrome{position:absolute;left:0;top:0;width:100%;height:100vh;display:block;z-index:0}
#metal{opacity:0}   /* the shader draws here; the page shows the feathered copy (#chrome) */

/* -------------------------------------------------------------------------------------------- site navigation */
.site-header{grid-column:1 / -1;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;min-height:60px;padding:0 clamp(16px,3.7vw,56px)}
.logo{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--logo);text-decoration:none}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.site-nav a{font-size:14px;color:var(--nav);text-decoration:none;padding:4px 0}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current]{color:#fff;box-shadow:inset 0 -1px 0 var(--nav-line)}

/* ------------------------------------------------------------------------------------------------------- intro */
/* on black above the chrome: one small light grey line, the dissertation title, the research question with its small
   grey label at its top left, and the object of study in light grey */
.intro{grid-column:4 / 7;grid-row:2;position:relative;z-index:2;margin-top:clamp(28px,7vh,80px)}
.small-caps{margin:0;font-size:var(--size-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--label)}
/* the dissertation title: solid white for now (Annie, 25 October) */
h1{position:relative;margin:14px 0 0;font-size:var(--size-title);font-weight:700;line-height:1.12;letter-spacing:-.005em;color:var(--title-white)}
.rq{margin-top:clamp(24px,4vh,40px)}
.rq .small-caps{margin-bottom:9px}
/* the research question as approved in v11 (bold, same size and spacing); its colours are the first slice of the one
   colour scale that the titles below continue */
.rq .q{margin:0;font-size:var(--size-rq);font-weight:700;line-height:1.25;letter-spacing:-.005em;
  background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rq .note{margin:10px 0 0;font-size:var(--size-note);line-height:1.36;color:var(--note);-webkit-text-stroke:var(--stroke-text) currentColor}

/* -------------------------------------------------------------------------------------------------------- menu */
/* in the same glass as the cards; sizes, colours and the current-place marker from the live side panel. It stays
   beside every section, down to the end of the page. */
nav.menu{grid-column:2;grid-row:2 / 40;align-self:start;position:sticky;top:24px;z-index:2;margin-top:clamp(28px,7vh,80px);border-radius:var(--radius)}
nav.menu ul{list-style:none;margin:0;padding:24px 12px;
  max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(242,244,246,.22) transparent}
nav.menu a{display:flex;align-items:baseline;padding:5px 14px;font-size:var(--size-menu);line-height:1.35;color:var(--menu-text);text-decoration:none;border-radius:2px;
  -webkit-text-stroke:var(--stroke-menu) currentColor}
nav.menu a:hover{background:var(--wash);color:var(--menu-text-hover)}
nav.menu a .n{flex:none;width:24px;font-size:var(--size-label);font-weight:700;color:var(--menu-number);font-variant-numeric:tabular-nums}
nav.menu a[aria-current="location"]{color:var(--current);background:var(--wash);box-shadow:inset 2px 0 0 var(--current-line)}
nav.menu a:focus-visible{outline:1px solid var(--menu-number);outline-offset:-3px}
nav.menu .part{padding:14px 14px 3px;font-size:var(--size-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.25;color:var(--label)}

/* ------------------------------------------------------------------------------------------------------- cards */
/* see-through elements; the glass library draws the glass under their text. The first row starts a quarter of a window
   below the intro (the chrome's top edge clears the text by a black band); the second row sits a wider gap below. */
.card{position:relative;z-index:2;border-radius:var(--radius);align-self:start}
.card:nth-of-type(1){grid-column:4;grid-row:3;margin-top:25.3vh}
.card:nth-of-type(2){grid-column:6;grid-row:3;margin-top:25.3vh}
.card:nth-of-type(3){grid-column:4;grid-row:4;margin-top:var(--rowgap)}
.card:nth-of-type(4){grid-column:6;grid-row:4;margin-top:var(--rowgap)}
.card:nth-of-type(5){grid-column:4;grid-row:5;margin-top:var(--rowgap)}
.inner{position:relative;padding:26px 40px 12px}
.card h2{margin:0;font:inherit}
.toggle{all:unset;box-sizing:border-box;display:block;position:relative;cursor:pointer;padding-left:44px}
.toggle:focus-visible{outline:1px solid var(--c1);outline-offset:6px;border-radius:4px}
.num{position:absolute;left:19px;top:4px;font-size:var(--size-label);line-height:20px;color:var(--c1);font-variant-numeric:tabular-nums}
.q-text{display:inline;font-size:var(--size-question);font-weight:700;line-height:1.3;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.answer{padding-left:44px;margin-top:6px}
.answer p{margin:0 0 var(--gap-paragraph);font-size:var(--size-text);line-height:var(--line-text);color:var(--text);-webkit-text-stroke:var(--stroke-text) currentColor}
.answer a{color:inherit;text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:2px}
.answer a:hover{text-decoration-color:currentColor}
.answer figure{margin:16px 0 18px}
.answer img{display:block;width:100%;height:auto;border-radius:2px}
/* the proposal link as a thin outlined pill */
.answer .link a{display:inline-block;margin-top:2px;padding:7px 18px;border:1px solid var(--pill-line);border-radius:999px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--text)}
.answer .link a:hover{border-color:var(--pill-line-hover)}
/* the rest of the answer: closed, its first two lines show and fade out above the arrow; open, it grows to its full
   height (the text itself never scales, so it stays sharp while it moves) */
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.more>div{overflow:hidden;min-height:var(--preview);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
:is(.card,.opens).open .more{grid-template-rows:1fr}
:is(.card,.opens).open .more>div{-webkit-mask-image:none;mask-image:none}
:is(.card,.opens):not(.open) :is(.first,.more){cursor:pointer}

/* ------------------------------------------------------------------------------------------------------ the arrow */
/* one arrow for everything that opens (see the rules at the top). In the cards and the calculation record it is an
   <svg class="arrow"> inside a .opener button, right under the fading lines; in the drop-downs taken from the live page
   it is their .peek-tri, given the same shape further down. */
.opener{all:unset;box-sizing:border-box;display:block;position:relative;width:24px;height:18px;margin:0 0 6px -2px;cursor:pointer}
.opener:focus-visible{outline:1px solid var(--c1);outline-offset:2px;border-radius:3px}
.arrow{position:absolute;left:2px;top:4px;width:var(--arrow);height:var(--arrow);fill:var(--c1);transition:var(--arrow-turn)}
.opener:hover .arrow{transform:translateX(2px)}
:is(.card.open,.record-bar.open,.opens.open) .opener .arrow{transform:rotate(-90deg)}
:is(.card.open,.record-bar.open,.opens.open) .opener:hover .arrow{transform:rotate(-90deg) translateY(-2px)}

/* ------------------------------------------------------------------------------------------- sections 5 to 11 */
/* placed in the same grid in the BlackGold rhythm: blocks staggered left and right with smaller copies of the ball in
   the space beside them, wide gaps between sections. Rows: 4 question 3 (wide, left) and a ball; 5 a ball and question 4
   (right); 6 Equation provenance and Formula construction side by side; 7 the six items; 8 their panel; 9 and 10 the
   calculation record; 11 the map; 12 Proposed contribution (block left, ball right); 13 to 15 the closing sections. */
.sec-card{position:relative;z-index:2;border-radius:var(--radius);align-self:center;scroll-margin-top:24px}
.sec-card h2{margin:0;font:inherit}
.sec-title{position:relative;padding-left:44px}
.sec-title .num{top:4px}

/* the chrome pieces' squares (their shapes and places are set per piece below and in the page) */
.ball{display:block;width:100%;aspect-ratio:1 / 1;position:relative;z-index:0;align-self:center}
.metal-box{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;z-index:0}
.metal-box canvas{display:block;width:100%;height:100%}

/* question 3 is long, so it is a wide block: two thirds of the two card columns, for longer lines (Annie, 25 October);
   a smaller ball on its right. Question 4 sits on the right a little lower, a smaller ball on its left. Then 5 and 6
   side by side. The balls overlap their rows a little (negative margins), so the blocks stay close together. */
#inference-and-design{grid-column:4 / 7;grid-row:4;width:73%;justify-self:start}
#measurement-development{grid-column:6;grid-row:5;margin-top:48px}
/* the chrome pieces: the first ball's material in the shader's own shapes, each its own size, two whole on the page and
   two cut by the page's right edge (their squares end at the edge and their shapes sit past it); they overlap their
   rows a little (negative margins), so the blocks stay close together */
/* the piece by question 3 (Annie: "make it bigger, so that it goes underneath" question 3, "on the side of the long
   text"): large, at the page's right edge, partly under question 3's glass. It starts 30% of its height below the
   card's top ("It should be 30% lower") and, while question 3 is open, keeps level with the part of the text in the window, stopping before
   the card's end (placed by small_balls.js). The droplets on the left sit lower, so the pieces fall on a diagonal. */
#ball-3{position:absolute;right:0;top:0;width:clamp(560px,46vw,760px);margin:0;z-index:1}
#ball-4{grid-column:4;grid-row:5;justify-self:center;align-self:start;width:420px;margin:110px 0 -60px 0}
#ball-8{--w:var(--w-8,clamp(200px,22.75vw,360px));width:var(--w);justify-self:start;align-self:end;margin-bottom:calc(10px - var(--w) / 2);margin-left:calc(120px - var(--w) / 2)}
/* The last three pieces' size (--w-8, --w-10, --w-11 on #root) is set by small_balls.js from a card's width, so they
   keep their size beside the cards at any window width; the clamp values here hold only until the script runs (Annie,
   25 October: "like 20% bigger"; "procedural and responsive"; the pieces by Proposed contribution and between Earlier
   research and Personal reading "at least 2 times" and "double its size"). Each grows from its own centre, so it stays
   where it was placed (the margins follow --w); the piece behind the gallery keeps its right side at the page's edge.
   The block below each of the two doubled pieces starts below the piece's lowest point (0.45 of its square under its
   centre, at the deepest bump), so no text sits over them (Annie: "I want a minimalist look. Spread out"). */
/* Earlier research has its own pieces (Annie: "why no silver" there): one behind the gallery's top right corner, its top
   showing above the gallery and at the page's edge; one at the page's edge between Earlier research and Personal
   reading & sources (a rounder lump; the long pebble it replaces read as the wrong shape). The live sections' backs are
   see-through, so a piece behind them shows wherever their content leaves the page's black. */
#ball-10{grid-column:6 / 8;grid-row:14;justify-self:end;align-self:start;--w:var(--w-10,clamp(460px,53.1vw,820px));width:var(--w);margin:calc(var(--rowgap) + 80px - var(--w) / 2) 0 0 0;z-index:0}
#ball-11{grid-column:4;grid-row:14;justify-self:start;align-self:end;--w:var(--w-11,clamp(260px,30.3vw,480px));width:var(--w);margin:0 0 calc(-10px - var(--w) / 2) calc(130px - var(--w) / 2);z-index:0}
.live-block{background:none}
/* Earlier research's 2024-25 block (teaching, tools and individual learning, with the research timeline) sits in the
   right card column, so the piece on the left keeps clear of its text (Annie: "move the text to align with the other
   side and have the blob stay in place") */
#earlier-research .context-item.origins,#earlier-research .context-item.origins + .peek{margin-left:calc(50% + var(--gap) / 2)}
#equation-provenance{grid-column:4;grid-row:6;align-self:start;margin-top:var(--rowgap)}
#formula-construction{grid-column:6;grid-row:6;align-self:start;margin-top:calc(var(--rowgap) + var(--drop,0px))}
.term-panel{grid-column:4 / 7;grid-row:8}
.record-bar{grid-column:4 / 7;grid-row:9}
.record{grid-column:4 / 7;grid-row:10}
#inference-resolution-map{grid-column:4 / 8;grid-row:11;margin-top:var(--rowgap);padding-right:24px}
#contribution{grid-column:4;grid-row:12;margin-top:var(--rowgap)}
#ball-8{grid-column:6;grid-row:12;margin-top:var(--rowgap)}
#block-next-steps{grid-column:4 / 7;grid-row:13;margin-top:max(var(--rowgap),calc(var(--w-8,0px) * 0.4 - 120px));padding-right:0}
#earlier-research{grid-column:4 / 7;grid-row:14;margin-top:var(--rowgap)}
#personal-reading{grid-column:4 / 7;grid-row:15;margin-top:max(var(--rowgap),calc(var(--w-11,0px) * 0.45 + 50px))}
#page-end{grid-column:4 / 7;grid-row:16;margin-top:var(--space-between)}

/* R, S, U, J, P and C: six glass items in one group directly under card 6, its width, three to a row, so they read as
   the formula's parts (Annie, 25 October: "somehow to relate those R, S, U, J, P, C to it"). Each is a direct child of
   the page grid (the glass needs that) and takes its place from its column and row in the group (--col, --row). */
.tile{--tw:calc((100% - 2 * var(--space-inside)) / 3);--th:124px;all:unset;box-sizing:border-box;position:relative;z-index:2;
  cursor:pointer;border-radius:var(--radius);grid-column:6;grid-row:7;justify-self:start;align-self:start;width:var(--tw);height:var(--th);
  margin:calc(var(--space-inside) + var(--row) * (var(--th) + var(--space-inside))) 0 0 calc(var(--col) * (var(--tw) + var(--space-inside)));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;text-align:center}
.tile-letter{font-size:var(--size-question);font-weight:700;line-height:1.3;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tile-name{font-size:var(--size-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.25;color:var(--label)}
.tile[aria-expanded="true"] .tile-name{color:var(--current)}
.tile:focus-visible{outline:1px solid var(--c1);outline-offset:4px}
.term-panel,.record-bar{position:relative;z-index:2;border-radius:var(--radius);margin-top:18px}
.term-panel .inner{padding:30px 44px 18px}

/* the calculation record: a glass bar with its title and its first lines fading above the arrow; open, the first
   paragraph shows in full in the bar and the rest of the method follows below it on black */
.record-bar .inner{padding:22px 40px 10px}
.record-bar h4{margin:0;font:inherit}
.record-bar .toggle{padding-left:0}
.record-bar .rec-text{font-size:var(--size-subtitle);font-weight:700;line-height:1.3;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.record-bar .bar-text{margin-top:8px;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.record-bar .bar-text>div{overflow:hidden;min-height:var(--preview);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.record-bar.open .bar-text{grid-template-rows:1fr;cursor:auto}
.record-bar.open .bar-text>div{-webkit-mask-image:none;mask-image:none}
.record-bar .bar-text p{margin:0 0 var(--gap-paragraph);font-size:var(--size-text);line-height:var(--line-text);color:var(--text);-webkit-text-stroke:var(--stroke-text) currentColor;max-width:68ch}
.record{position:relative;z-index:1;margin-top:28px;padding:0 44px}

/* the live sections: on black, above the page's black and the chrome, below the menu and the glass blocks */
.live-block{position:relative;z-index:1;scroll-margin-top:24px}
.live-block .num{position:static;display:inline-block;margin-right:14px;font-size:var(--size-label);line-height:1;vertical-align:middle;
  -webkit-text-fill-color:var(--c1);color:var(--c1);font-variant-numeric:tabular-nums}
#next-steps,#context,#sources{scroll-margin-top:24px}
/* Earlier research: the slide gallery fills the section's width and grows and shrinks with the window; the text around it
   keeps its reading width. Its "Full size" link is hidden (Annie, 25 October: "fill the width, not say full [size]"). */
#earlier-research .context-content{max-width:none}
#earlier-research .context-content > :not(.slide-gallery){max-width:650px}
#earlier-research .slide-gallery{width:100%}
#slideOriginal{display:none}

/* the equation line in section 6 */
.formula-open .equation-panel{margin:14px 0 12px;padding:0;border:0;background:none;box-shadow:none}
.formula-open{container-type:inline-size}
.formula-open .equation{font-size:min(20px,6.2cqi);line-height:1.3;letter-spacing:-.3px;white-space:nowrap;color:var(--equation)}

/* ---------------------------------------------------------------------------------- over the live page's styles */
/* the live stylesheets size these sections for the live page (36 px titles, 18 px text); this page's sizes replace them
   here, and the live drop-downs take the page's arrow. This layer comes first in the layer order, so its !important
   values hold over the live styles' own. */
@layer fp-first{
  .live-block,.sec-text{
    --title-size:var(--size-question) !important; --subtitle-size:var(--size-subtitle) !important; --row-size:var(--size-text) !important; --label-size:var(--size-label) !important;
    --space-part:40px !important; --space-block:20px !important; --space-paragraph:var(--gap-paragraph) !important; --space-row:12px !important;
  }
  /* inside the map the live sizes stay (its List rows are 18 px on the live page); only its title takes the 21 px */
  #irmV19{--row-size:18px !important; --subtitle-size:20px !important}
  .live-block .research-layout,.live-block .live-main{display:block !important;margin:0 !important;padding:0 !important;
    max-width:none !important;width:auto !important;grid-template-columns:none !important}
  .live-block .live-main > section{margin:0 !important;padding:0 !important;max-width:none !important;
    --title:var(--sec-c1) !important;--title-from:var(--sec-c1) !important;--title-to:var(--sec-c2) !important}
  .live-block .live-main > section > h2,.live-block .live-main > section > .section-heading h2{line-height:1.3 !important}
  .live-block :is(h1,h2,h3)[data-step]::before{content:none !important;display:none !important}
  :is(.sec-text,#earlier-research,#personal-reading,#block-next-steps .record-content,#map-relationship)
    :is(p,li,dd,blockquote,.context-content,.inquiry-content,.approved-copy,.listening-intro,.next-intro){
    font-size:var(--size-text) !important;line-height:var(--line-text) !important;letter-spacing:normal !important;color:var(--text) !important;
    -webkit-text-stroke:var(--stroke-text) currentColor !important}
  :is(.sec-text,#earlier-research,#personal-reading,#map-relationship) :is(p,blockquote){margin-block:0 var(--gap-paragraph) !important}
  :is(.sec-text,#earlier-research,#personal-reading,#map-relationship) :is(p,li) a{color:inherit !important;
    text-decoration:underline !important;text-decoration-color:var(--link-line) !important;text-underline-offset:2px !important}
  .sec-text .peek > .peek-lines,#personal-reading .peek > .peek-lines,#earlier-research .peek > .peek-lines{font-size:var(--size-text) !important;line-height:var(--line-text) !important}
  .sec-text details > summary{font-size:var(--size-text) !important;font-weight:700 !important;color:var(--title) !important;
    -webkit-text-fill-color:var(--title) !important;cursor:pointer;list-style:none;display:flex;align-items:center;min-height:36px}
  .sec-text :is(h3,h4,.note-heading){font-size:var(--size-subtitle) !important;font-weight:700 !important;line-height:1.3 !important;
    margin:24px 0 10px !important;color:var(--title) !important;-webkit-text-fill-color:transparent !important;
    background:linear-gradient(90deg,var(--title-from),var(--title-to)) !important;-webkit-background-clip:text !important;background-clip:text !important;width:fit-content}
  .sec-text :is(td,th){font-size:14px !important;line-height:var(--line-text) !important}
  .sec-text .x-method > * + *{margin-top:0 !important}
  .sec-text .x-method > :first-child{margin-top:0 !important}

  /* the drop-downs taken from the live page: the page's arrow, right under their fading lines, pointing right; at the
     end of an open drop-down, the same arrow turned up closes it */
  .peek-tri{display:block !important;width:var(--arrow) !important;height:var(--arrow) !important;margin:2px 0 0 2px !important;
    filter:none !important;transition:var(--arrow-turn) !important}
  .peek-tri::before{background:var(--title,var(--menu-number)) !important;
    -webkit-clip-path:polygon(15% 5%,90% 50%,15% 95%) !important;clip-path:polygon(15% 5%,90% 50%,15% 95%) !important}
  .peek:hover .peek-down{transform:translateX(2px) !important}
  .peek-close > .peek-up{margin:0 0 0 2px !important;transform:rotate(-90deg) !important}
  .peek-close:hover > .peek-up{transform:rotate(-90deg) translateY(-2px) !important}
  .peek:hover .peek-tri,.peek-close:hover .peek-tri{filter:none !important}
  details > .peek-close{padding:6px 0 !important;margin:6px 0 14px !important}
  /* a closed drop-down's first lines sit right under its title */
  details[data-peek]:not([open]) + .peek{margin-top:-6px !important}

  /* coloured titles take the menu's semi-bold look, a 0.45 px outline in their own colour (Annie, 25 October: "All of
     the colored titles should be semi-bold"); the titles already in Arial Narrow Bold stay as they are */
  :is(#earlier-research .context-item > summary :is(.year,h3,small),#earlier-research .origin-papers > summary,
    #next-steps .timeline-task-disclosure > summary,#iterations > summary > span,#iterations .historical-method > summary,
    #xOperations summary,#mapShell .rec details > summary){-webkit-text-stroke:var(--stroke-menu) currentColor !important}
  /* a drop-down's year and title share one baseline ("the year in the title do not line up") */
  #earlier-research .context-item > summary{align-items:baseline !important}
  /* Earlier research's two blocks stay open (closing one moved the page and hid the paper: "the whole page jumps
     around and I can't find the paper"), so they have no closing arrow; the page script keeps them open */
  #earlier-research .context-item > .peek-close{display:none !important}
  #earlier-research .context-item > summary{cursor:default !important}
  #earlier-research .context-item > summary .disclosure-icon{display:none !important}
  #earlier-research .context-item[open] + .peek{display:none !important}
  /* a block's title is one line: "Modalities & spatial structures / Multimodal Spatial Intelligence" ("It should just
     say the first line and then a slash and then the next line") */
  #earlier-research .context-item > summary > span:not(.year,.disclosure-icon){display:block !important}
  #earlier-research .context-item > summary > span:not(.year,.disclosure-icon) > :is(h3,small){display:inline !important;font-size:var(--size-text) !important;
    margin:0 !important}
  #earlier-research .context-item > summary > span:not(.year,.disclosure-icon) > small::before{content:"/ ";margin-left:.3em}

  /* sections 9 to 11 on glass, like the cards ("why the bottom 10 and 11 and stuff don't have glass behind them") */
  #next-steps,#context,#sources{padding:var(--pad-glass) !important}
  /* spacing by relationship: blocks inside a section --space-between apart, a block's own parts --space-inside apart */
  :is(#context,#sources) > :is(.context-item,.sources-disclosure){margin-top:var(--space-between) !important}
  /* a section's title belongs to its first block, so it sits close above it */
  :is(#context,#sources) > .section-heading + :is(.context-item,.sources-disclosure),#next-steps > h2 + #research-workspace{
    margin-top:calc(var(--space-inside) * 2) !important}
  #earlier-research .context-content{margin-top:var(--space-inside) !important}
  #earlier-research .context-content > .slide-gallery{margin-bottom:var(--space-inside) !important}

  /* the presentation: its label sits right on the slide's top edge, the slide at the panel's top, and the panel is
     see-through ("the black glass panel behind my presentation should be semi-transparent") */
  #earlier-research .slide-gallery{position:relative;overflow:visible !important;background:rgba(5,5,5,.45) !important;
    border-color:rgba(255,255,255,.12) !important;margin-top:calc(var(--size-label) * 1.4 + var(--space-inside)) !important}
  #earlier-research .slides-heading{position:absolute !important;left:0;bottom:100%;padding:0 0 var(--space-inside) !important;
    background:none !important;border:0 !important}
  #earlier-research .slides-heading .eyebrow{font-size:var(--size-label) !important}
  #earlier-research #presentationSlide{border-radius:8px 8px 0 0}

  /* Next steps: the timeline drawing keeps its size, and its window shows the drawn band (17% to 89% of its height),
     so the empty strips above and below it are out of view (Annie: "a ginormous gap that has next steps… no text") */
  @media (min-width:761px){
    #block-next-steps #research-workspace .flow-scroll{--tl:clamp(400px,70dvh,640px);height:calc(var(--tl) * 0.72) !important;
      min-height:0 !important;max-height:none !important}
    #block-next-steps #research-workspace .flow-canvas{height:var(--tl) !important;top:calc(var(--tl) * -0.17) !important}
  }

  /* the map's right-hand panel: the map area clipped its shadow at its edge, 12 px below and beside the panel, which
     made the soft shadow look hard ("It should be soft"); the points and the drawing keep their own clip */
  #mapShell .fieldbox{overflow:visible !important}
  #mapShell .fieldbox > :is(canvas,.layer){border-radius:inherit}
}

/* ------------------------------------------------------------------------------------------------ smaller windows */
/* the menu hides below 1000 px and the page goes to one column below 760 px */
@media (max-width:1000px){
  #root{grid-template-columns:minmax(16px,1fr) 0 0 minmax(0,var(--card)) var(--gap) minmax(0,var(--card)) minmax(16px,1fr)}
  nav.menu{display:none}
  #inference-resolution-map,#block-next-steps{grid-column:4 / 7;padding-right:0}
}
@media (max-width:760px){
  #root{grid-template-columns:16px minmax(0,1fr) 16px;grid-template-rows:none}
  .site-header{padding:14px 16px}
  .intro{grid-column:2;grid-row:auto;margin-top:36px}
  .card:nth-of-type(1),.card:nth-of-type(2),.card:nth-of-type(3),.card:nth-of-type(4),.card:nth-of-type(5){grid-column:2;grid-row:auto;margin:0 0 20px}
  .card:nth-of-type(1){margin-top:25.3vh}
  .inner{padding:22px 24px 10px}
  .sec-card,.ball,.term-panel,.record-bar,.record,.live-block{grid-column:2 !important;grid-row:auto !important}
  .ball{width:min(100%,360px);justify-self:center}
  #inference-and-design,#measurement-development{grid-column:2;grid-row:auto;width:auto;margin:0 0 20px}
  #ball-3,#ball-4,#ball-8,#ball-10,#ball-11{margin:0 auto !important;width:min(100%,360px)}
  #ball-3{position:relative;right:auto;top:auto !important}
  .ball.edge{justify-self:end;margin-right:-16px !important}
  .tile{grid-column:2;grid-row:auto;width:auto;height:auto;justify-self:stretch;margin:10px 0 0;padding:12px 14px}
  .term-panel .inner,.record-bar .inner{padding:22px 24px 10px}
  .record{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){ .more,.record-bar .bar-text,.arrow,.peek-tri{transition:none !important} }

/* Mobile rendering fallback. Silver images are frames of the approved material; the
   canvases keep their existing size and place, and live drawing covers these images. */
:root{
  --glass-mobile-fill:rgba(9,9,12,.62);
  --glass-mobile-highlight:rgba(242,244,246,.12);
  --glass-mobile-shadow:inset 0 1px 0 var(--glass-mobile-highlight),
    0 calc(var(--space-inside) / 2) var(--radius) rgba(0,0,0,.24);
  --glass-mobile-blur:none;
  --silver-chrome:url("assets/silver-chrome-20261025.jpg");
  --silver-ball-3:url("assets/silver-ball-3-20261025.jpg");
  --silver-ball-4:url("assets/silver-ball-4-20261025.jpg");
  --silver-ball-8:url("assets/silver-ball-8-20261025.jpg");
  --silver-ball-10:url("assets/silver-ball-10-20261025.jpg");
  --silver-ball-11:url("assets/silver-ball-11-20261025.jpg");
}

/* Available before scripts load, including when a device cannot start WebGPU. */
#chrome{background-image:var(--silver-chrome)}
#ball-3{background-image:var(--silver-ball-3)}
#ball-4{background-image:var(--silver-ball-4)}
#ball-8{background-image:var(--silver-ball-8)}
#ball-10{background-image:var(--silver-ball-10)}
#ball-11{background-image:var(--silver-ball-11)}
#chrome,.ball{background-position:center;background-size:100% 100%;background-repeat:no-repeat}

/* Keep this after .tile's all:unset rule. None avoids a separate blurred layer for
   long open sections; the map's own glass is outside this selector. */
html.graphics-lite :is(nav.menu,.card,.sec-glass){
  background-color:var(--glass-mobile-fill);
  border-radius:var(--radius);
  box-shadow:var(--glass-mobile-shadow);
  -webkit-backdrop-filter:var(--glass-mobile-blur);
  backdrop-filter:var(--glass-mobile-blur);
}

/* Phone layout: one reading column, with two columns only for the six formula terms.
   Sizes and gaps follow the reading width rather than desktop viewport height. */
@media (max-width:760px){
  :root{
    --mobile-gutter:clamp(12px,4vw,24px);
    --mobile-card-width:calc(100vw - 2 * var(--mobile-gutter));
    --space-inside:clamp(6px,1.8vw,12px);
    --space-between:clamp(28px,7vw,48px);
    --rowgap:var(--space-between);
    --pad-glass:calc(var(--space-inside) * 3) calc(var(--space-inside) * 3.5);
    --mobile-number-gap:calc(var(--size-label) * 1.6);
    --mobile-intro-card-gap:calc(var(--mobile-card-width) * .28);
    --mobile-chrome-gap:calc(var(--mobile-card-width) * .08);
    --mobile-chrome-height:calc(var(--mobile-card-width) * 840 / 440);
    --mobile-piece-size:calc(var(--mobile-card-width) * 1.12);
    --mobile-tile-height:calc(var(--size-label) * 6);
    --mobile-map-ratio:4 / 5;
    --mobile-map-min-height:calc(var(--size-text) * 24);
    --glass-mobile-fill:rgba(9,9,12,.48);
    --glass-mobile-surface:linear-gradient(155deg,rgba(245,246,248,.065),rgba(245,246,248,.015) 46%,rgba(0,0,0,.18));
    --glass-mobile-short-fill:rgba(9,9,12,.28);
    --glass-mobile-blur:blur(8px) saturate(110%);
  }

  #root{
    grid-template-columns:var(--mobile-gutter) repeat(2,minmax(0,1fr)) var(--mobile-gutter);
    grid-template-rows:none;
    column-gap:0;
    overflow-x:clip;
    row-gap:var(--space-inside);
    padding-bottom:var(--space-between);
  }
  #root > :is(.intro,.card,.sec-card,.term-panel,.record-bar,.record,.live-block,.ball){
    grid-column:2 / 4 !important;
    grid-row:auto !important;
    min-width:0;
  }
  #root > :is(.intro,.card,.sec-card,.term-panel,.record-bar,.record,.live-block){
    width:100% !important;
    max-width:100%;
  }
  .site-header{padding:calc(var(--space-inside) * 2) var(--mobile-gutter)}
  .intro{margin-top:var(--space-between)}
  #root > :is(.card,.sec-card,.live-block){margin:var(--space-between) 0 0 !important}
  #root > .card:first-of-type{margin-top:var(--mobile-intro-card-gap) !important}
  #root > :is(.term-panel,.record-bar,.record){margin:var(--space-inside) 0 0}
  .inner,.term-panel .inner,.record-bar .inner{padding:var(--pad-glass)}
  :is(.card,.sec-card) .toggle,.sec-title{padding-left:var(--mobile-number-gap)}
  :is(.card,.sec-card) .num{left:0}
  .answer{padding-left:var(--mobile-number-gap)}
  .record{padding-inline:var(--space-inside)}

  /* Hidden term panels keep their display state; an opened panel spans the group. */
  #root > .tile{
    grid-row:auto !important;
    width:calc(100% - var(--space-inside) / 2);
    min-height:var(--mobile-tile-height);
    height:auto;
    margin:0;
    padding:calc(var(--space-inside) * 2);
  }
  #root > :is(#tile-r,#tile-u,#tile-p){grid-column:2;justify-self:start}
  #root > :is(#tile-s,#tile-j,#tile-c){grid-column:3;justify-self:end}

  #chrome{
    left:var(--mobile-gutter);
    width:var(--mobile-card-width);
    height:var(--mobile-chrome-height);
    margin-top:var(--mobile-chrome-gap);
  }
  #root > :is(#ball-3,#ball-4,#ball-8,#ball-10,#ball-11){
    position:relative;
    right:auto;
    top:auto !important;
    width:var(--mobile-piece-size) !important;
    max-width:none;
    aspect-ratio:1;
    margin:calc(var(--space-inside) * -1) 0 !important;
    justify-self:center;
  }
  #root > .ball.edge{justify-self:end;margin-right:calc(var(--mobile-gutter) * -1) !important}

  /* Native compositing blurs only short surfaces. Long answers retain a translucent
     graduated surface without a blur layer extending through their whole height. */
  html.graphics-lite :is(nav.menu,.card,.sec-glass){
    background-image:var(--glass-mobile-surface);
    background-color:var(--glass-mobile-fill);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  html.graphics-lite :is(.card:not(.open),.opens:not(.open),.tile,.record-bar:not(.open)){
    background-color:var(--glass-mobile-short-fill);
    -webkit-backdrop-filter:var(--glass-mobile-blur);
    backdrop-filter:var(--glass-mobile-blur);
  }
}

/* The earlier live styles use !important; keep their phone corrections in the
   existing first layer, with no desktop changes. */
@layer fp-first{
  @media (max-width:760px){
    #earlier-research :is(.context-item.origins,.context-item.origins + .peek){margin-left:0 !important}
    #earlier-research .context-content{margin-inline:0 !important;max-width:100% !important}
    #earlier-research .context-item > summary{grid-template-columns:auto minmax(0,1fr) auto !important;gap:var(--space-inside) !important}
    #earlier-research .slide-gallery{max-width:100% !important}
    #earlier-research #presentationSlide{width:100% !important;height:auto !important;aspect-ratio:16 / 9 !important}
    #earlier-research :is(.slide-controls,.slide-thumbs){padding:var(--space-inside) !important;gap:var(--space-inside) !important}
    #earlier-research .slide-thumb{flex-basis:calc(var(--mobile-card-width) / 4) !important}
    #personal-reading :is(.listening-covers,.source-search,.source-search input){width:100% !important;max-width:100% !important}
    #personal-reading :is(#listeningList,#masterSources){grid-template-columns:minmax(0,1fr) !important;column-gap:var(--space-inside) !important}
    #personal-reading :is(p,li,a){overflow-wrap:anywhere}
    #inference-resolution-map :is(#irmV19,#mapShell,#method,.stage,.fieldbox){min-width:0 !important;max-width:100% !important}
    #inference-resolution-map #irmV19{width:100% !important;margin-left:0 !important}
    #inference-resolution-map #mapShell .app{height:auto !important;grid-template-rows:auto auto !important}
    #inference-resolution-map #mapShell .fieldbox{
      flex:0 0 auto !important;
      aspect-ratio:var(--mobile-map-ratio);
      height:auto !important;
      min-height:var(--mobile-map-min-height) !important;
    }
    #inference-resolution-map :is(.twrap,.math-table-wrap,.summary-scroll){max-width:100% !important;overflow-x:auto !important}
  }
}

/* Original material at native spatial quality; only the silhouette gets a wider feather. */
:root{
  --metal-feather:2.5px;
  --silver-chrome:url("assets/silver-chrome-20261025.png");
  --silver-ball-3:url("assets/silver-ball-3-20261025.png");
  --silver-ball-4:url("assets/silver-ball-4-20261025.png");
  --silver-ball-8:url("assets/silver-ball-8-20261025.png");
  --silver-ball-10:url("assets/silver-ball-10-20261025.png");
  --silver-ball-11:url("assets/silver-ball-11-20261025.png");
}
#chrome{background-size:auto 100%}

/* Keep silver behind its related glass on phones, without separate sphere rows. */
@media (max-width:760px){
  :root{
    --mobile-piece-follow-start:.3;
    --mobile-piece-visible-bottom:.86;
    --mobile-piece-side-center:.85;
    --mobile-piece-content-center:.65;
    --mobile-piece-center-cap:.5;
    --mobile-piece-bottom-inset:.1;
  }
  #root > :is(#ball-3,#ball-4,#ball-8,#ball-10,#ball-11){
    position:absolute;
    grid-column:auto !important;
    grid-row:auto !important;
    left:0;
    right:auto;
    top:0 !important;
    margin:0 !important;
    justify-self:start;
    align-self:start;
    pointer-events:none;
    visibility:hidden;
  }
  #root[data-silver-layout="mobile"] > :is(#ball-3,#ball-4,#ball-8,#ball-10,#ball-11){visibility:visible}
  #root > :is(#inference-and-design,#measurement-development,#contribution,#earlier-research,#personal-reading){
    margin-bottom:var(--silver-clearance,0px) !important;
  }
}

/* A section-link jump settles opening/closing answers before its single scroll.
   Normal reading keeps the existing expansion animation and layout tokens. */
html.research-jump .more{transition:none}
:root{--scroll-section-offset:24px}
.card{scroll-margin-top:var(--scroll-section-offset)}

/* Disclosure boundaries and native text selection, 26 October 2026. */
:root{--disclosure-control-size:44px;--disclosure-preview-gap:8px}
#root{-webkit-user-select:text;user-select:text}
.record-bar #record{grid-area:auto;margin:var(--gap-paragraph) 0 0;padding:0}
.record-bar .opener{width:var(--disclosure-control-size);min-height:var(--disclosure-control-size);margin-left:0}
@layer fp-first{
details[data-peek]:not([open]) > summary{display:block !important}
details[data-peek] > summary > .peek{margin:var(--disclosure-preview-gap) 0 0 !important;min-height:var(--disclosure-control-size)}
details[data-peek][open] > summary > .peek{display:none !important}
details[data-peek] > summary:focus-visible{outline:1px solid var(--title);outline-offset:4px}
}

:is(.card,.opens):not(.open) :is(.first,.more),.record-bar .bar-text{cursor:text}

/* Opening card proportions, 26 October 2026. The remaining cards retain their layout. */
:root{
  --opening-card-inset:clamp(8px,.95vw,14px);
  --opening-card-padding:24px 28px 12px;
  --opening-number-gap:30px;
  --opening-number-left:6px;
}
@media (min-width:761px){
  :is(#human-inference,#machine-inference){width:calc(100% - var(--opening-card-inset))}
  #human-inference{justify-self:start}
  #machine-inference{justify-self:end}
  :is(#human-inference,#machine-inference) .inner{padding:var(--opening-card-padding)}
  :is(#human-inference,#machine-inference) :is(.toggle,.answer){padding-left:var(--opening-number-gap)}
  :is(#human-inference,#machine-inference) .num{left:var(--opening-number-left)}
}


/* Staged compact task graphic: preserve task order, profile proportions,
   priorities, status, full labels and record-dialog controls. */
#block-next-steps #research-workspace .flow-scroll{
  height:clamp(400px,50svh,420px) !important;
  min-height:0 !important;
  max-height:none !important;
}
#block-next-steps #research-workspace .flow-canvas{
  height:100% !important;
  top:0 !important;
}
#block-next-steps #research-workspace .flow-title{
  padding:4px 6px;
}
@media(max-width:760px){
  #block-next-steps #research-workspace .flow-scroll{
    height:400px !important;
  }
}

/* Keep the current map's selection and filter states visible beside its controls. */
.live #irmV19 .map-filter-tools{
  display:flex !important;flex-wrap:wrap !important;gap:6px 18px !important;align-items:baseline !important;
  position:relative !important;z-index:5 !important;max-width:100% !important;margin:12px 0 !important;
}
.live #irmV19 #mapFilterStatus{
  margin:0 !important;color:var(--sec) !important;max-width:100% !important;
}
.live #irmV19 .map-filter-reset{
  background:none !important;border:1px solid var(--hair) !important;border-radius:6px !important;
  padding:5px 10px !important;cursor:pointer !important;color:var(--pri) !important;font:inherit !important;
}
.live #irmV19 .dock-prompt{
  position:relative !important;z-index:2 !important;margin:12px 18px 0 !important;
  color:var(--sec) !important;max-width:100% !important;
}
#iterations > .archive-intro{margin:16px 0 24px !important}
#iterations .archive-entry > h3{margin:24px 0 16px !important}

/* Keep each archived explanation and its arrow together, with space before the next. */
html.research-jump{overflow-anchor:none;scroll-behavior:auto !important}
html.research-jump :is(.more,.bar-text){transition:none !important}
@layer fp-first{
  #measurement-development .question-support{
    margin:24px 0 !important;padding-inline-start:16px !important;
  }
  #measurement-development .question-support > summary{
    font-size:var(--size-text) !important;font-weight:700 !important;color:var(--c1) !important;
    -webkit-text-fill-color:var(--c1) !important;padding:0 !important;cursor:pointer !important;
  }
  #iterations .x-method > details.math-detail,
  #iterations details.math-detail + details.math-detail,
  #iterations #october4-x-examples,
  #iterations > details.historical-method{
    margin-block:24px !important;
  }
  #iterations details.math-detail > summary{padding-block:0 !important}
  #iterations details.math-detail[open] > summary{margin-bottom:18px !important}
  #iterations details.math-detail details.math-detail{
    margin-inline-start:18px !important;padding-inline-start:0 !important;
  }
  #iterations .series-downloads{margin:20px 0 28px !important;display:flex !important;flex-wrap:wrap !important;gap:10px 24px !important}
  #iterations .history-compare[hidden]{display:none !important}
  #iterations #october4-x-method > details > summary .peek-lines{max-width:68ch !important}

  /* Calculation equations occupy their panels rather than a separate empty band. */
  #record .equation-panel{
    display:block !important;position:relative !important;
    background:#101014 !important;padding:24px !important;margin:18px 0 !important;
    min-height:0 !important;height:auto !important;box-sizing:border-box !important;
  }
  #record .equation-panel > .equation{
    position:static !important;display:block !important;margin:0 !important;padding:0 !important;
    width:auto !important;max-width:100% !important;transform:none !important;
  }
  .tile .tile-disclosure{display:block !important;position:relative !important;width:12px !important;height:12px !important;flex:0 0 12px !important}
  .tile .tile-disclosure .arrow{left:1px !important;top:1px !important;width:var(--arrow) !important;height:var(--arrow) !important}
  .tile[aria-expanded="true"] .tile-disclosure .arrow{transform:rotate(-90deg) !important}
}
@media(min-width:761px){
  #root > :is(#tile-r,#tile-s,#tile-u){grid-row:7 !important;margin-top:var(--space-inside) !important}
  #root > :is(#tile-j,#tile-p,#tile-c){grid-row:9 !important;margin-top:var(--space-inside) !important}
  #root > :is(#term-r,#term-s,#term-u){grid-row:8 !important}
  #root > :is(#term-j,#term-p,#term-c){grid-row:10 !important}
  #root > .record-bar{grid-row:11 !important}
  #root > .record{grid-row:12 !important}
  #root > #inference-resolution-map{grid-row:13 !important}
  #root > :is(#contribution,#ball-8){grid-row:14 !important}
  #root > #block-next-steps{grid-row:15 !important}
  #root > :is(#earlier-research,#ball-10,#ball-11){grid-row:16 !important}
  #root > #personal-reading{grid-row:17 !important}
  #root > #page-end{grid-row:18 !important}
}


/* Shared disclosure previews also cover Evidence and method choices inside card 4. */
html.research-collapse{overflow-anchor:none;scroll-behavior:auto !important}
html.research-collapse :is(.more,.bar-text){transition:none !important}
@layer fp-first{
  #root details[data-peek] > summary{list-style:none !important}
  #root details[data-peek] > summary::-webkit-details-marker{display:none !important}
  #root details[data-peek] > summary::marker{content:"" !important}
  #root details[data-peek] > summary > .disclosure-icon,
  #root details[data-peek] > summary::after{display:none !important;content:none !important}
  #root details[data-peek] > summary > .peek{display:block !important;max-width:68ch !important;padding:0 !important;cursor:pointer !important}
  #root details[data-peek][open] > summary > .peek{display:none !important}
  #root details[data-peek] > summary > .peek > .peek-lines{
    display:block !important;font-size:var(--size-text) !important;font-weight:400 !important;
    line-height:var(--line-text,1.55) !important;max-height:calc(2em * var(--line-text,1.55)) !important;
    overflow:hidden !important;color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;
    background:none !important;-webkit-mask-image:var(--fade) !important;mask-image:var(--fade) !important;
  }
  #root .peek-tri::before{content:"" !important;display:block !important;width:100% !important;height:100% !important}
  #root details[data-peek] > .peek-close{
    display:block !important;width:44px !important;min-height:28px !important;padding:6px 0 !important;
    background:none !important;border:0 !important;box-shadow:none !important;cursor:pointer !important;
  }
  #root .question-support{--title:var(--c1);--title-from:var(--c1);--title-to:var(--c2)}
}


/* The map keeps its own height; record tabs add their natural height below it. */
#inference-resolution-map #irmV19 #mapShell .app{
  height:auto !important;grid-template-rows:auto auto !important;
}
#inference-resolution-map #irmV19 #mapShell .fieldbox{
  flex:0 0 auto !important;height:max(500px,calc(100svh - 160px)) !important;
}
#inference-resolution-map #irmV19 #mapShell #stage > #dock,
#inference-resolution-map #irmV19 #mapShell #stage > #dock .mbody,
#inference-resolution-map #irmV19 #mapShell #stage > #dock .cb{
  height:auto !important;max-height:none !important;overflow:visible !important;
}
/* The selected operation and its stage labels occupy a band above the plotted points. */
#inference-resolution-map #mapShell .map-selection-band{
  position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;
  gap:8px;pointer-events:none;z-index:3;min-width:0;
}
#inference-resolution-map #mapShell .map-selection-band[hidden]{display:none !important}
#inference-resolution-map #mapShell .map-selection-band > .pt.sel{
  position:relative !important;left:auto;top:auto;max-width:100%;box-sizing:border-box;
  white-space:normal;align-items:baseline;flex-wrap:nowrap;
}
#inference-resolution-map #mapShell .map-selection-band .ln{min-width:0;overflow-wrap:anywhere}
#inference-resolution-map #mapShell .stage-pin-row{
  display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;overflow-y:hidden;
  pointer-events:auto;scrollbar-width:thin;overscroll-behavior-x:contain;
}
#inference-resolution-map #mapShell .stage-pin-row > .sp{
  position:relative !important;left:auto;top:auto;transform:none !important;flex:0 0 auto;
}
/* Each record's name, X and status remain visible while its details scroll. */
#inference-resolution-map #mapShell #vList .op{grid-template-columns:40px minmax(0,1fr) auto !important}
#inference-resolution-map #mapShell #vList .op .nm .chev{
  display:inline-block;position:static;width:0;height:0;margin-left:4px;vertical-align:middle;
  border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:7px solid currentColor;transform:none !important;color:inherit;
}
#inference-resolution-map #mapShell #vList .item.on .op .nm .chev{
  transform:rotate(-90deg) !important;
}
#inference-resolution-map #mapShell #vList .item.on > .op{
  position:sticky;top:var(--record-top,0px);z-index:3;
  background:linear-gradient(180deg,rgba(23,30,36,.98),rgba(17,24,29,.97));
}
@media(max-width:760px){
  #inference-resolution-map #irmV19 #mapShell .fieldbox{
    height:auto !important;aspect-ratio:var(--mobile-map-ratio);
    min-height:var(--mobile-map-min-height) !important;
  }
}


/* The placement script owns positions; the approved silver shaders and sizes remain. */
#root[data-silver-layout="clear"] > :is(#ball-3,#ball-4,#ball-8,#ball-10,#ball-11){
  position:absolute !important;grid-column:auto !important;grid-row:auto !important;
  left:0 !important;right:auto !important;top:0 !important;margin:0 !important;
  align-self:start !important;justify-self:start !important;pointer-events:none;visibility:visible !important;
}
#root[data-silver-layout="clear"] > :is(#inference-and-design,#measurement-development,#contribution,#earlier-research){
  margin-bottom:var(--silver-clearance,0px) !important;
}
@media(min-width:761px){
  #root[data-silver-layout="clear"] > #inference-and-design{
    margin-top:calc(var(--rowgap) + var(--silver-chrome-clearance,0px)) !important;
  }
  #root[data-silver-layout="clear"] > :is(#block-next-steps,#personal-reading){margin-top:var(--rowgap) !important}
}
@media(max-width:760px){
  #root[data-silver-layout="clear"] > #inference-and-design{
    margin-top:calc(var(--space-between) + var(--silver-chrome-clearance,0px)) !important;
  }
  /* Reset the previous clearance on this section; its piece now occupies the gap before it. */
  #root[data-silver-layout="clear"] > #personal-reading{margin-bottom:0 !important}
}

/* The diagram reserves its final height before scripts and fonts finish loading. */
#block-next-steps{--timeline-graphic-height:clamp(400px,50svh,420px)}
#block-next-steps #research-workspace #timeline{min-height:calc(var(--timeline-graphic-height) + 176px)}
#block-next-steps #research-workspace #timeline-diagram{
  height:calc(var(--timeline-graphic-height) + 44px) !important;
  min-height:calc(var(--timeline-graphic-height) + 44px) !important;
}
#block-next-steps #research-workspace .flow-scroll{
  height:var(--timeline-graphic-height) !important;min-height:0 !important;max-height:none !important;
}
#block-next-steps #research-workspace .flow-scroll[data-overflow-right="true"]{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
}
@media(max-width:760px){#block-next-steps{--timeline-graphic-height:400px}}


/* 28 October: approved equation explanation uses the existing page typography and panels. */
:root{--size-equation:28px;--size-equation-main:calc(var(--size-question) * 2)}
#measurement-development{min-width:0;align-self:start}
#measurement-development #equation-provenance{margin:0;scroll-margin-top:24px}
#approved-equation-copy .equation{font-family:var(--role-font,var(--font))!important;color:var(--equation)}
#approved-equation-copy .equation-panel{max-width:100%;overflow-x:auto;overflow-y:hidden}
#approved-equation-copy .equation-fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.2;text-align:center}
#approved-equation-copy .equation-fraction>span:first-child{border-bottom:1px solid currentColor;padding:0 .16em .1em}
#approved-equation-copy .equation-fraction>span+span{padding-top:.1em}
#approved-equation-copy .equation-deduction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top}
#approved-equation-copy .equation-deduction-label{font-size:var(--size-label);line-height:var(--line-text);border-top:1px solid currentColor;margin-top:.15em}
#approved-equation-copy table{width:100%;border-collapse:collapse;margin:0 0 var(--gap-paragraph)}
#approved-equation-copy :is(th,td){padding:var(--space-inside) var(--space-inside) var(--space-inside) 0;border-bottom:1px solid var(--hair,rgba(255,255,255,.12));vertical-align:top;text-align:left}
#approved-equation-copy tbody td:first-child{width:25%}
#measurement-development #x-method{margin:var(--space-between) 0 0}
#measurement-development #x-method>details{margin:0}
@layer annie-roles{
 #approved-equation-copy .equation,#approved-equation-copy .equation *{font-family:var(--role-font,var(--font))!important}
 #approved-equation-copy #formula-construction .equation{font-size:var(--size-equation-main)!important;text-align:center!important;white-space:nowrap}
}
@media(min-width:761px){
 #measurement-development{grid-column:4 / 7;grid-row:5;width:auto;margin-top:var(--rowgap)}
 #ball-4{grid-row:6;margin:40px 0 20px;align-self:center}
}
@media(max-width:760px){
 :root{--size-equation:calc(var(--size-text) * 1.4);--size-equation-main:calc(var(--size-text) * 1.5)}
 #approved-equation-copy .equation-panel{padding:var(--pad-glass)}
 @layer annie-roles{#approved-equation-copy #formula-construction{padding:var(--space-inside)!important}}
}


/* 28 October: the six term controls belong with the equation, within its glass section. */
.equation-terms{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-inside);margin:var(--space-inside) 0 var(--space-between);
}
.equation-terms > .tile{
  grid-column:auto !important;grid-row:auto !important;justify-self:stretch;
  width:100%;height:auto;min-width:0;min-height:calc(var(--size-text) * 7);
  margin:0 !important;padding:var(--space-inside);
  border:0;background:none;
}
.equation-terms > .term-panel{
  grid-column:1 / -1 !important;grid-row:auto !important;min-width:0;margin:0;
  border:0;background:none;
}
.equation-terms > .term-panel[hidden]{display:none !important}
.equation-terms > .term-panel > .inner{padding:var(--pad-glass)}
@layer annie-roles{
  #irmTitle{position:relative !important;padding-left:44px !important}
  #irmTitle > .section-number{
    position:absolute !important;left:19px !important;top:4px !important;
    font-family:var(--role-font,var(--font)) !important;
    font-size:var(--size-label) !important;font-weight:400 !important;line-height:20px !important;
    color:var(--c1) !important;-webkit-text-fill-color:var(--c1) !important;
    font-variant-numeric:tabular-nums;
  }
}
@media(max-width:760px){
  .equation-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  @layer annie-roles{
    #irmTitle{padding-left:var(--mobile-number-gap) !important}
    #irmTitle > .section-number{left:0 !important}
  }
}

/* Each letter opens its accepted explanation; technical rules share Calculation details. */
@layer annie-roles{
 #measurement-development .term-panel .x-method > p:first-child{
   font-size:var(--size-text) !important;line-height:1.5 !important;width:auto !important;
   background:none !important;color:var(--role-text) !important;-webkit-text-fill-color:var(--role-text) !important;
 }
 #measurement-development .term-panel .x-method > p:first-child > strong{
   font-size:inherit !important;line-height:inherit !important;
   background:none !important;color:var(--role-text) !important;-webkit-text-fill-color:var(--role-text) !important;
 }
 #iterations details:not([open]) > summary .peek-lines{display:none !important}
 #iterations > details{margin-block:var(--space-inside) !important}
 #iterations > details:not([open]) > summary{min-height:0 !important;padding-block:var(--space-inside) !important}
 #iterations > details:not([open]) > summary > .peek{margin:var(--space-inside) 0 0 !important}
}


/* Expanded equation definitions sit on the bubble's alpha surface, without a nested page fill. */
@layer annie-roles{
 #measurement-development .equation-terms > .term-panel .live{background:none !important}
}


/* 3 November 2026: grouped sources and directly linked personal-reading covers. */
@layer fp-first {
  #personal-reading .source-group-note{font:inherit;color:var(--note);margin:var(--space-inside) 0}
  #personal-reading #listeningList strong > a{display:flex;align-items:flex-start;gap:var(--space-inside);text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px}
  #personal-reading #listeningList .reading-cover{flex:0 0 72px;width:72px;height:72px;object-fit:contain;object-position:top;background:transparent}
  #personal-reading #listeningList .reading-title{margin:0;color:inherit;font:inherit}
  #personal-reading #listeningList li:has(.reading-cover) > span{margin-left:calc(72px + var(--space-inside))}
}