/* ============================================================================
   vespa-tensor-reader: the reading modes of "A tensor formalism for computer
   science". doc.css is the shared design system and is byte-identical across
   every reader. Everything this paper needs that the others do not is here.
   Four modes are new to the factory: paper, matrix, spec, reference.
   ========================================================================= */

/* The kit's mono for code. Space Mono is the factory's only mono face. */
:root{
  --code-size:clamp(.74rem, .69rem + .22vw, .9rem);
  /* The rail's rendered height, for the sticky table head to sit under it.
     Its tallest child is the Contents button: .5rem padding twice round one
     mono line. Plus the rail's own padding (u*1.5 twice) and its 1px border.
     The first estimate used the 1.5rem mark and measured 11px short at 1440:
     the head row's top sat under the rail. */
  --rail-h:calc(var(--u) * 3 + 1rem + var(--t-mono) * 1.55 + 1px);
}

/* ------------------------------------------------------- the section number */
/* The deck sets every section number in a green rounded badge beside its
   heading. Ink on --green is 7.5:1. */
.secnum{
  align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1em;height:2.1em;padding:0 .55em;border-radius:6px;
  background:var(--green);color:var(--ink);
  font-family:var(--mono);font-size:var(--t-mono);font-weight:700;letter-spacing:.02em;
}
.figcap{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;line-height:1.5;
  color:var(--on-ground-soft);max-width:48rem;
}
/* A figure panel takes the ink ground's tokens by carrying .act--ink. */
.panel{
  background:var(--ground);color:var(--on-ground);
  padding:clamp(1.25rem,3vw,2.5rem);border-radius:14px;
}
pre{margin:0}
/* The rebuilt figures sit in flex and grid stacks. min-width:0 lets a code box
   or a lateral rail inside one scroll in its own box instead of widening the
   figure past the column. */
.f1,.f2,.f11,.f13{min-width:0}

/* ================================ 1 paper ================================ */
.paper{gap:clamp(2rem,5vh,3.5rem);justify-content:flex-start}
.paper__mast{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center;grid-template-columns:1fr}
@media (min-width:64rem){.paper__mast{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.paper__h1{font-size:clamp(2.4rem,1.3rem + 3.6vw,4.75rem);color:var(--paper)}
.paper__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.paper__chips li{
  background:var(--paper);color:var(--ink);border-radius:999px;
  padding:.3em .9em;font-family:var(--mono);font-size:var(--t-mono);
}
/* The deck's cover PNG is 2448x1920 with the drawing in its middle and a
   wide transparent margin round it. Cropped here to the drawing's own box,
   so on a phone it is not a third of a screen of empty ink. */
.paper__art{width:100%;max-width:34rem;height:auto;justify-self:center;
  aspect-ratio:16/10;object-fit:cover;object-position:57% 44%}
@media (max-width:63.99rem){.paper__art{max-width:22rem;justify-self:start}}
.paper__by{
  display:grid;gap:var(--gap) clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--paper-14);padding-top:calc(var(--u)*2.5);
}
.paper__authors{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:52rem){.paper__authors{grid-template-columns:repeat(3,1fr)}}
.paper__name{font-weight:600;color:var(--paper);font-size:var(--t-body)}
.paper__role{font-size:var(--t-small);color:var(--paper-72);line-height:1.4}
.paper__city{font-family:var(--mono);font-size:var(--t-micro);color:var(--paper-72);margin-top:.35em}
.paper__venue{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--paper-72);line-height:1.6}
.paper__date{color:var(--green)}
.paper__label{font-weight:500}
.paper__abstract{max-width:var(--measure)}
.paper__kw{font-size:var(--t-small);color:var(--on-ground-soft)}
.paper__kw strong{color:var(--on-ground)}

/* Figure 1: three design choices, three benefits. */
.f1__grid{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:stretch}
@media (min-width:52rem){.f1__grid{grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr)}}
.f1__bridge{width:100%;height:auto;align-self:center}
@media (max-width:51.99rem){.f1__bridge{display:none}}
.f1__head{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-72);margin-bottom:calc(var(--u)*1.5)}
.f1__list{display:flex;flex-direction:column;gap:calc(var(--u)*1.25)}
.f1__item{
  display:grid;grid-template-columns:2.25rem 1fr;gap:.15rem .5rem;align-items:baseline;
  background:var(--paper-07);border-radius:10px;padding:calc(var(--u)*1.5) calc(var(--u)*2);
}
.f1__n{font-family:var(--mono);font-size:var(--t-mono);color:var(--green);grid-row:span 2}
.f1__name{font-weight:600;line-height:1.3}
.f1__line{font-size:var(--t-small);color:var(--paper-72);line-height:1.4}
.f1__item--gain{grid-template-columns:1fr;background:var(--green);color:var(--ink)}
.f1__item--gain .f1__line{color:var(--ink)}
.f1__prod{
  margin-top:calc(var(--u)*2.5);padding-top:calc(var(--u)*1.75);border-top:1px solid var(--paper-14);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--paper-72);
}

/* ============================ 2 argument, Figure 2 ======================== */
.tpull{margin-top:calc(var(--u)*1.5);font-size:var(--t-serif)}
.pull__src{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;color:var(--on-ground-soft);margin-top:.6em}
.f2__grid{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:center}
@media (min-width:52rem){.f2__grid{grid-template-columns:minmax(0,1fr) 3rem minmax(0,1fr);align-items:stretch}}
.f2__panel{border-radius:14px;padding:clamp(1.25rem,2.5vw,2rem);display:flex;flex-direction:column;gap:calc(var(--u)*1.5)}
.f2__panel--before{background:var(--paper);color:var(--ink)}
.f2__panel--after{background:var(--ground);color:var(--on-ground)}
.f2__label{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ground-soft)}
.f2__panel--before .f2__label{color:var(--ink-mute)}
.f2__title{font-family:var(--sans-display);font-size:var(--t-section);line-height:1.2;font-weight:500}
.f2__bar{width:100%;max-width:18rem;height:auto}
.f2__arrow{width:3rem;height:auto;align-self:center;justify-self:center}
@media (max-width:51.99rem){.f2__arrow{transform:rotate(90deg);width:2.25rem}}
.f2__items{display:flex;flex-direction:column;gap:calc(var(--u)*1.25)}
.f2__items li{display:grid;grid-template-columns:1.6rem 1fr;gap:.75rem;align-items:start;font-size:var(--t-small);line-height:1.45}
.f2__mark{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:5px;font-size:.85rem;font-weight:700}
.f2__mark--no{background:var(--ink-14);color:var(--ink)}
.f2__mark--yes{background:var(--green);color:var(--ink)}
.f2__out{border-top:1px solid var(--paper-14);padding-top:calc(var(--u)*1.25);font-size:var(--t-small);color:var(--green)}

/* ================================ 3 matrix ================================ */
.mx__t{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.mx__t thead th{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;font-weight:400;
  text-transform:uppercase;color:var(--ink-mute);text-align:center;vertical-align:bottom;
  padding:0 .75rem calc(var(--u)*1.5);line-height:1.35;
}
.mx__t tbody th{text-align:left;font-weight:600;padding:calc(var(--u)*1.5) .75rem calc(var(--u)*1.5) 0}
.mx__t tbody td{text-align:center;padding:calc(var(--u)*1.5) .75rem}
.mx__t tbody tr{border-top:1px solid var(--hair)}
.mx__t tbody tr:last-child{border-bottom:1px solid var(--hair)}
.mx__self{background:var(--green-22)}
.mx__yes{
  display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;
  border-radius:5px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.9rem;
}
.mx__self .mx__yes{background:var(--green);color:var(--ink)}
.mx__no{display:inline-block;width:1rem;height:2px;background:var(--ink-38);vertical-align:middle}
.mx .figcap{margin-top:calc(var(--u)*1.5)}
/* One card per approach on a phone: four properties named on every card. */
@media (max-width:39.99rem){
  .mx__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .mx__t,.mx__t tbody,.mx__t tr,.mx__t th,.mx__t td{display:block}
  .mx__t tbody tr{padding:calc(var(--u)*1.25) 0}
  .mx__self{padding-inline:.75rem !important;border-radius:8px}
  .mx__t tbody th{padding:0 0 .5rem}
  .mx__t tbody td{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;padding:.3rem 0}
  .mx__t tbody td::before{
    content:attr(data-label);font-family:var(--mono);font-size:var(--t-micro);
    letter-spacing:.08em;color:var(--ink-mute);
  }
}

/* =============================== 4 statement ============================== */
.scope__notes{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:40rem){.scope__notes{grid-template-columns:1fr 1fr}}
.scope__note{background:var(--paper);display:flex;flex-direction:column;gap:.6rem}
.scope__note .eyebrow{color:var(--ink-mute)}
.scope__t{font-weight:600;line-height:1.4}
.statement__prose{max-width:46rem}

/* ================================= 5 list ================================= */
.feats{display:flex;flex-direction:column}
.feats li{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--gap);align-items:start;
  border-top:1px solid var(--hair);padding:calc(var(--u)*2.5) 0;
}
.feats li:last-child{border-bottom:1px solid var(--hair)}
@media (min-width:52rem){.feats li{grid-template-columns:8rem minmax(0,1fr)}}
.feat__ic{width:100%;height:auto;border-radius:10px}
.feats strong{font-weight:600}

/* =============================== 6 glossary =============================== */
.terms{display:grid;gap:1px;background:var(--hair);grid-template-columns:1fr}
@media (min-width:40rem){.terms{grid-template-columns:1fr 1fr}}
.term{background:var(--paper);padding:calc(var(--u)*2) calc(var(--u)*2.25);display:flex;flex-direction:column;gap:.4rem}
.term dt{font-family:var(--mono);font-size:var(--t-mono);font-weight:700;letter-spacing:.1em;color:var(--green-ink)}
.term dd{font-size:var(--t-small);line-height:1.45}

/* ================================= 7 spec ================================= */
.spec__part + .spec__part{border-top:1px solid var(--hair);padding-top:var(--shelf)}
.spec__run{font-family:var(--sans-display);font-size:var(--t-section);line-height:1.2;font-weight:500;color:var(--on-ground-soft)}
.spec__body{min-width:0}
.spec__lead{font-size:var(--t-body)}
.spec__exl{margin-bottom:calc(var(--u)*-1)}
.spec__fig{display:flex;flex-direction:column;gap:calc(var(--u)*1.25)}
.spec__img{width:100%;height:auto;border-radius:12px}

/* A code box. It scrolls inside itself and never pushes the page wide, and
   the scroll is advertised by the self-hiding shadow (doc.css's case-rail
   pattern, in the code box's own ink): ink cover patches travel with the text
   (`local`), light shadows stay on the box (`scroll`). */
.code{
  font-family:var(--mono);font-size:var(--code-size);line-height:1.65;
  white-space:pre;overflow-x:auto;tab-size:2;
  padding:calc(var(--u)*2) calc(var(--u)*2.5);border-radius:10px;
  background-color:var(--ink);color:var(--paper);
  background-image:
    /* The cover is SOLID over the shadow's whole width and fades only past
       it. A cover that faded from its first pixel let the shadow show through
       at rest, so every box painted a pale right edge with nothing to scroll. */
    linear-gradient(to right, var(--ink) 1.25rem, rgba(46,47,39,0)),
    linear-gradient(to left,  var(--ink) 1.25rem, rgba(46,47,39,0)),
    linear-gradient(to right, rgba(255,255,255,.22), rgba(255,255,255,0)),
    linear-gradient(to left,  rgba(255,255,255,.22), rgba(255,255,255,0));
  background-position:left center,right center,left center,right center;
  background-size:2.5rem 100%,2.5rem 100%,1.25rem 100%,1.25rem 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll;
  scrollbar-width:thin;scrollbar-color:var(--paper-14) transparent;
}
.code--ex{padding:calc(var(--u)*1.25) calc(var(--u)*1.75)}
.ex__type{color:var(--green)}
.ex{display:flex;flex-direction:column;gap:calc(var(--u)*1.75)}
.ex__row{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.ex__row dt{font-size:var(--t-small);color:var(--on-ground-soft);line-height:1.4}
.ex__row dd{min-width:0}

/* =============================== 8 sequence =============================== */
.f6__grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:40rem){.f6__grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.f6__grid{grid-template-columns:repeat(3,1fr)}}
.f6__tile{
  display:grid;grid-template-columns:3.5rem 1fr;gap:.15rem .9rem;align-items:center;
  background:var(--ink);color:var(--paper);text-decoration:none;border-radius:12px;
  padding:calc(var(--u)*1.5) calc(var(--u)*1.75);height:100%;
  transition:background .2s ease;
}
.f6__tile:hover{background:#3a3b33}
.f6__ic{grid-row:span 3;width:100%;height:auto}
.f6__n{font-family:var(--mono);font-size:var(--t-micro);color:var(--green)}
.f6__name{font-family:var(--mono);font-size:var(--t-mono);font-weight:700;color:var(--paper)}
.f6__line{font-size:var(--t-small);line-height:1.35;color:var(--paper-72)}
.f6 .figcap{margin-top:calc(var(--u)*1.5)}

.fn{border-top:1px solid var(--hair);padding-top:calc(var(--u)*4)}
.fn__head{gap:calc(var(--u)*1.25)}
.fn__ic{width:5rem;height:auto;background:var(--ink);border-radius:10px;padding:.35rem}
.fn__body{min-width:0}
.sig{
  font-family:var(--mono);font-size:var(--code-size);line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--paper);color:var(--ink);border-left:3px solid var(--green);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);border-radius:0 8px 8px 0;
}
.aggs{display:grid;grid-template-columns:1fr;gap:.35rem 1.5rem;font-family:var(--mono);font-size:var(--code-size)}
@media (min-width:40rem){.aggs{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto)}}
.aggs li{border-top:1px solid var(--hair);padding-top:.35rem}

/* ================================= 9 turn ================================= */
.turn .plate{padding:clamp(2rem,6vw,5rem) clamp(1.5rem,5vw,4.5rem)}
.turn__q{max-width:48rem}
.turn__q .h2{color:var(--paper)}
.turn__q .pull__src{color:var(--paper-72);margin-top:1.25em}

/* ============================== 10 argument =============================== */
.dfig{display:flex;flex-direction:column;gap:calc(var(--u)*1.25)}
.dfig__img{width:100%;height:auto;border-radius:12px}

/* =============================== 11 reference ============================= */
.ref__h{max-width:40rem}
.ref__filter{border:0;margin:0;padding:0;min-width:0}
.ref__filter legend{padding:0;margin-bottom:calc(var(--u)*1.25);color:var(--ink-mute)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
/* The radios are the filter's state and are visually replaced by their chips.
   Still in the tab order and on screen (1px), so a keyboard reaches them. */
.ref__in{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip{
  display:inline-flex;align-items:baseline;gap:.55em;cursor:pointer;
  padding:.5em 1em;border:1px solid var(--ink-38);border-radius:999px;
  font-family:var(--mono);font-size:var(--t-mono);color:var(--ink);background:var(--paper);
  transition:background .18s ease,color .18s ease;
}
.chip__n{font-weight:700}
.chip--all{border-radius:12px;max-width:34rem}
.chip--all .chip__n{font-family:var(--sans-display);font-size:1.6em;line-height:1}
.chip--all .chip__t{font-family:var(--sans);font-size:var(--t-small);line-height:1.35}
.ref__in:checked + .chip{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ref__in:focus-visible + .chip{outline:2px solid var(--green-ink);outline-offset:3px}
.chip:hover{border-color:var(--ink)}
/* THE FILTER ONLY HIDES. Every row stays in the HTML. A browser without
   :has() shows all 53, which is the honest fallback. */
.ref:has(#core-map:checked) .ref__t tbody tr:not([data-core~="map"]),
.ref:has(#core-join:checked) .ref__t tbody tr:not([data-core~="join"]),
.ref:has(#core-reduce:checked) .ref__t tbody tr:not([data-core~="reduce"]),
.ref:has(#core-tensor:checked) .ref__t tbody tr:not([data-core~="tensor"]){display:none}

.ref__t{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.45}
.ref__t thead th{
  background:var(--ink);color:var(--paper);text-align:left;font-weight:400;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  padding:.75rem .9rem;
}
.ref__t tbody th,.ref__t tbody td{text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--hair);font-weight:400}
.ref__t tbody tr:nth-child(even){background:var(--ink-04)}
.ref__t code{font-family:var(--mono);font-size:var(--code-size);overflow-wrap:anywhere}
.ref__t tbody th code{font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:.3rem}
.tag{font-family:var(--mono);font-size:var(--t-micro);padding:.15em .55em;border-radius:4px;line-height:1.5}
.tag--map{background:var(--green);color:var(--ink)}
.tag--join{background:var(--ink);color:var(--paper)}
.tag--reduce{background:#CDEFD9;color:var(--ink)}
.tag--tensor{background:var(--mist);color:var(--ink)}
@media (min-width:52rem){
  .ref__t th:nth-child(1){width:19%}
  .ref__t th:nth-child(2){width:37%}
  .ref__t th:nth-child(4){width:12%}
}
/* Sticky column heads: a desktop device. On a phone the table is cards and
   there is no head row to stick (law 3, and shoot's single-column row). */
@media (min-width:64rem){
  .ref__t thead th{position:sticky;top:var(--rail-h);z-index:2}
}
/* One card per row below 52rem: the page never scrolls sideways, and every
   cell keeps its column's own head as its label. */
@media (max-width:51.99rem){
  .ref__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ref__t,.ref__t tbody,.ref__t tr,.ref__t th,.ref__t td{display:block}
  .ref__t tbody tr{border-top:1px solid var(--hair);padding:.6rem 0}
  .ref__t tbody tr:nth-child(even){background:none}
  .ref__t tbody th,.ref__t tbody td{border:0;padding:.3rem 0;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem}
  .ref__t tbody th::before,.ref__t tbody td::before{
    content:attr(data-label);font-family:var(--mono);font-size:var(--t-micro);
    letter-spacing:.06em;color:var(--ink-mute);padding-top:.15em;
  }
}

/* ================================ 12 figure =============================== */
.mcode{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:52rem){.mcode{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mcode__box{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.mcode__l{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;color:var(--ink-mute)}
.f11__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-bottom:calc(var(--u)*2.5)}
.f11__title{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;color:var(--green)}
.f11__legend{display:flex;gap:1.25rem;font-family:var(--mono);font-size:var(--t-micro);color:var(--paper-72)}
.lg{display:inline-flex;align-items:center;gap:.45rem}
.lg::before{content:"";width:.8rem;height:.8rem;border-radius:3px}
.lg--type::before{background:var(--paper-14);border:1px solid var(--paper-54)}
.lg--function::before{background:var(--paper)}
/* The evaluation track. One step per line, down one axis, so the steps arrive
   one by one as the reader scrolls: a function, then the type it produced.
   Types and the output sit one indent in, on their own lane. */
.steps{display:flex;flex-direction:column;gap:.55rem;max-width:44rem;border-left:2px solid var(--paper-14);padding-left:clamp(.75rem,2vw,1.5rem)}
.st{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;
  padding:.6rem 1rem;border-radius:8px;font-family:var(--mono);font-size:var(--code-size);line-height:1.45;
}
.st--function{background:var(--paper);color:var(--ink);margin-right:clamp(2rem,10vw,8rem)}
.st--function .st__l:first-child{font-weight:700}
.st--type{background:var(--paper-14);color:var(--paper);margin-left:clamp(1.25rem,6vw,4rem)}
.st--output{background:var(--green);color:var(--ink);margin-left:clamp(1.25rem,6vw,4rem)}
.st__k{font-size:var(--t-micro);letter-spacing:.12em;color:var(--green)}
.st--output .st__k{color:var(--ink)}
.st__v{color:inherit}
.st__inputs > ol{display:flex;flex-wrap:wrap;gap:.55rem}
.st--in{margin-left:0;flex:1 1 9rem}

/* ================================= 13 rail ================================ */
.f13__title{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--ink-mute);margin-bottom:calc(var(--u)*-2)}
.f13__stage{
  background:var(--ink);color:var(--paper);border-radius:14px;
  padding:clamp(1.1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:.75rem;
}
.f13__stage--run{background:var(--green);color:var(--ink)}
.f13__srcs{display:flex;flex-direction:column;gap:.6rem}
.f13__srcs li{background:var(--paper-07);border-radius:10px;padding:.75rem .9rem}
.f13__name{font-weight:600;line-height:1.3}
.f13__line{font-size:var(--t-small);line-height:1.4;color:var(--paper-72)}
.f13__stage--run .f13__line{color:var(--ink)}
.f13__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--green)}
.f13__stage--run .f13__k{color:var(--ink)}
.f13__big{font-family:var(--sans-display);font-size:var(--t-section);line-height:1.15;font-weight:500}
.f13__fns{display:flex;flex-wrap:wrap;gap:.35rem}
.f13__fns li{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t-micro);padding:.15em .6em;border-radius:4px}
.f13__eval{background:var(--paper);color:var(--ink);border-radius:10px;padding:.75rem .9rem}
.f13__eval .f13__k{color:var(--green-ink)}
.f13__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--ink-mute);
  border-top:1px solid var(--hair);padding-top:calc(var(--u)*1.25);
}

/* =============================== 14 argument ============================== */
.cfigs{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:52rem){.cfigs{grid-template-columns:repeat(3,1fr)}}
.cfig{background:var(--ink);color:var(--paper);border-radius:14px;padding:clamp(1.25rem,2.5vw,2rem)}
.cfig__v{font-family:var(--sans-display);font-size:var(--t-h2);line-height:1.05;color:var(--green);font-weight:500}
.cfig__l{font-size:var(--t-small);color:var(--paper-72);margin-top:.5rem;line-height:1.4}

/* ================================ 15 close ================================ */
.secnum--ref{letter-spacing:.1em}
.refs{display:flex;flex-direction:column}
.ref__item{
  display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.75rem;
  border-top:1px solid var(--paper-14);padding:calc(var(--u)*1.5) 0;
  font-size:var(--t-small);line-height:1.5;color:var(--paper-72);
}
.ref__item:last-child{border-bottom:1px solid var(--paper-14)}
.ref__item a{overflow-wrap:anywhere}
.refs__n{font-family:var(--mono);font-size:var(--t-mono);color:var(--green);padding-top:.15em}
.close__end{margin-top:calc(var(--u)*2)}
.close__mark{height:clamp(3.5rem, 8vw, 6rem);width:auto}
.close__pdf{font-size:var(--t-body)}

/* =========================== v2: the figure viewer ========================
   Figures 4, 5, 7, 8 and 9 are the deck's PNGs with their words drawn in.
   Each is a link to its own file, and tensor.js opens that file in a
   full-screen <dialog> at its natural size. The link is a block the exact
   size of its image and the label sits over the image's corner, absolutely,
   so the figure takes the same box it took in v1: no layout shift. */
/* THE LABEL SITS UNDER THE IMAGE, NEVER ON IT. The first v2 build laid a
   chip over the image's corner. At 390 that chip was 40px on a figure 100 to
   200px tall and covered the figure's own words in every corner of at least
   one of the five (Figure 4's "Indexed dimension", Figure 8's title, Figure
   9's legend). So the label is a line of the link's own text under the
   image's right edge: it covers nothing, it is ink on the act's own ground,
   and link-contrast grades the pair a reader actually sees. It is static
   markup, so the figure is one line taller than v1 and nothing moves on load,
   on open or on close. */
/* The colour is set on the LINK and the label inherits it, so the link's own
   colour, which link-contrast grades, is the colour its one line of text is
   painted in. Quiet on desktop: micro size, the act's muted ink. */
.zoom__link{display:block;text-decoration:none;color:var(--on-ground-mute)}
.zoom__link:hover{color:var(--on-ground)}
.zoom__link:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
.zoom__hint{
  display:block;width:max-content;margin:.55rem 0 0 auto;color:inherit;
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;
  font-size:var(--t-micro);
}
/* Plain on a phone, where the figure is too small to read: larger, full ink. */
@media (max-width:63.99rem){
  .zoom__link{color:var(--on-ground)}
  .zoom__hint{font-size:var(--t-mono)}
}
dialog.zoom{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;
  background:var(--ink);color:var(--paper);
}
dialog.zoom::backdrop{background:var(--ink)}
.zoom[open]{display:flex;flex-direction:column}
.zoom__bar{
  flex:none;display:flex;justify-content:flex-end;
  padding:calc(var(--u)*1.25) var(--pad-x);border-bottom:1px solid var(--paper-14);
}
.zoom__close{
  background:transparent;color:var(--paper);cursor:pointer;
  border:1px solid var(--paper-54);border-radius:6px;padding:.6rem 1rem;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
}
.zoom__close:hover{border-color:var(--green);color:var(--green)}
/* The image at its NATURAL size, in a pane that scrolls both ways and lets a
   touch screen pinch. The shared reset caps every img at 100% of its box,
   which is the cap this viewer exists to lift. */
.zoom__pane{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:var(--gap);touch-action:pan-x pan-y pinch-zoom;
}
.zoom__img{max-width:none;width:auto;height:auto;margin:auto}
/* A fade in, only where motion is welcome. Under reduced motion the dialog is
   simply there: no zoom, no fade. */
@media (prefers-reduced-motion:no-preference){
  .zoom[open]{animation:zoom-in .2s ease-out}
}
@keyframes zoom-in{from{opacity:0}to{opacity:1}}

/* ====== PORT ADDITION: figure viewer at natural size ===================== */
/* Added by docscroll/pipeline/hubspot/port.py, not present in the source
   build. HubSpot adds srcset + sizes="...100vw..." to every <img> with a
   width, which turns `width:auto` into the screen width. Every enlarged
   figure is 2064px wide, so say so. See TENSOR_ZOOM_CONTROLS in targets.py. */
.zoom__img{width:2064px;height:auto;max-width:none}