/* ------------------------------------------------------------------
   The index.

   One copy of every cell's content, in the cell. Width decides how much of
   it shows; expanding sets .is-expanded on the row and .is-open on the
   cell(s), which re-lays that row so the open cell gets the full width. No
   duplicated copy, no separate detail panel.

   Density, narrowing:
     >= 1200px  all three behaviours
     < 1200px   the first behaviour only
     < 1000px   a coloured block only

   The ladder only ever SUBTRACTS from the full state and is expressed as
   @media screen queries — so it needs no JavaScript, and print gets
   everything.

   SAFARI: three workarounds below are load-bearing and each says why.
   Search this file for SAFARI before "simplifying" any of them. A fourth,
   which this file's colSpan changes are what trigger, is on html in
   styles.css.
   ------------------------------------------------------------------ */

.m-wrap {
  --m-rail: 13rem;
  --m-pad: 0.7rem;

  /* How far the remedial band reaches past the table. Matched to the cell
     padding, so the rail's flush-left text ends up the same distance from
     the band's edge as every other cell's text is from its own. */
  --m-bleed: var(--m-pad);

  margin-top: 1.25rem;
}

/* The rail's text sits flush left so it lines up with every other row,
   which on the remedial row's ink ground put the words hard against the
   edge of the black — so the band grows rather than the text moving. This
   container clips, so the bleed has to live inside it: pad by --m-bleed and
   pull the same amount back off the margin, leaving the table where it
   was. */
.m-scroll {
  margin-inline: calc(-1 * var(--m-bleed));
  padding-inline: var(--m-bleed);
}

/* Screen only: scrolling is an affordance of a viewport, and paper has none.
   This does not rescue the hosted page's own print output — at Letter the
   table overflows the page whether the box scrolls or not, which is what the
   sheet exists for — it just stops the sheet's full-width table sitting in a
   scroll container that has nothing to scroll. */
@media screen {
  .m-scroll {
    overflow-x: auto;
  }
}

table.m {
  width: 100%;
  text-align: left;

  /* Deliberately NOT border-collapse: collapse. Collapsed borders are painted
     as one shared table-level layer, and Safari fails to invalidate it when a
     hover repaints a single cell — the rule under the header row drops out in
     segments, breaking at cell boundaries. With separate borders each cell
     paints its own, so a cell repaint can only ever affect that cell.
     Every border below is on one side only, so nothing doubles. */
  border-collapse: separate;
  border-spacing: 0;
}

/* shared treatments --------------------------------------------------- */

.m-col-btn,
.m-rail-btn,
.m-cell-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
}

/* Fraunces, always italic — matching how styles.css groups the same
   decision for the page's own headings. Each rule below sets only its
   size, weight and tracking. */
.m-col-name,
.m-num {
  font-family: var(--display);
  font-style: italic;
}

/* The mono micro-label, worn at several sizes. */
.m-corner-axis,
.m-col-abbr,
.m-ent-label,
.m-sr {
  font-family: var(--mono);
  text-transform: uppercase;
}

/* header row ---------------------------------------------------------- */

.m-corner {
  width: var(--m-rail);
  padding: 0 var(--m-pad) 0.6rem 0;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ink);
  font-weight: 400;
}

.m-corner-axis {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.m-col {
  padding: 0;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--rule);
  font-weight: 400;
}

.m-col-btn {
  padding: 0 var(--m-pad) 0.6rem;
}

.m-col-name {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.m-col-abbr {
  display: none;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.m-col-def {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}

.m-col-btn:is(:hover, [aria-expanded="true"]) .m-col-name {
  color: var(--spot);
}

/* rows and the level rail ---------------------------------------------- */

/* The remedial row flips to ink, as it does on the sheet: a different
   substrate, outside the system. --muted holds on both grounds, so it is
   not overridden; --dim is the paper-side counterpart of the parent
   site's --paper-dim, which this subsite does not define. */
.m-row--remedial {
  --paper-2: rgb(from var(--paper) r g b / 6%);
  --ink: var(--paper);
  --dim: #c9c1b0;
  --rule: rgb(from var(--paper) r g b / 20%);

  background: var(--ink-deep);
  color: var(--paper);
}

.m-rail,
.m-cell {
  padding: 0;
  vertical-align: top;
  border-top: 1px solid var(--rule);
  font-weight: 400;
}

.m-cell {
  border-left: 1px solid var(--rule);

  /* The whole cell is the click target, not just the button — see matrix.js. */
  cursor: pointer;
}

/* The remedial band extends past the table as two boxes, one on each end
   cell of the row. Absolutely positioned, so they add nothing to the
   table's geometry and the rail's text stays where every other row puts it.
   `top: -1px` covers the cells' top border, which sits outside the padding
   box these are positioned against.

   SAFARI: not box-shadow on the <tr>. Safari does not reliably paint
   shadows on table boxes — the shadow version of this rendered in every
   other engine and in headless WebKit, and not in Safari itself. */
.m-row--remedial > .m-rail,
.m-row--remedial > .m-cell {
  position: relative;
}

.m-row--remedial > .m-rail::before,
.m-row--remedial > .m-cell:last-child::after,
.m-row--remedial > .m-cell[colspan]:not([colspan="1"])::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  width: var(--m-bleed);
  background: var(--ink-deep);
}

.m-row--remedial > .m-rail::before {
  right: 100%;
}

/* Whichever cell reaches the table's right edge: the last one normally, the
   open one once it spans the pillar columns. */
.m-row--remedial > .m-cell::after {
  left: 100%;
}

/* The header already draws the rule beneath itself. */
tbody tr:first-child > .m-rail,
tbody tr:first-child > .m-cell {
  border-top: 0;
}

.m-rail-btn {
  padding: var(--m-pad) var(--m-pad) 1rem 0;
}

.m-num {
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--m-accent);
}

.m-assurance {
  margin-left: 0.4rem;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.m-lead {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--dim);
}

.m-ent {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--dim);
}

.m-ent-label {
  display: block;
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.m-rail-btn:is(:hover, [aria-expanded="true"]) .m-num {
  color: var(--spot);
}

/* cells ----------------------------------------------------------------- */

.m-cell-btn {
  padding: var(--m-pad) var(--m-pad) 0;
}

/* The text is the button's sibling now, so it closes the cell the button used
   to close. The top value is the accent's own former bottom margin, moved
   here so the gap under the accent does not double. */
.m-text {
  padding: 0.45rem var(--m-pad) var(--m-pad);
}

/* The level accent, which the cells would otherwise not carry now that
   there are no coloured headlines. Grows into the whole cell at the glyph
   rung, where it is all there is. */
.m-cell-btn::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--m-accent);
}

.m-cell:hover .m-cell-btn::before,
.m-cell-btn[aria-expanded="true"]::before {
  width: 2.6rem;
}

/* The whole cell answers the pointer, because the whole cell is the target.
   Underlining one behaviour would say the others are not clickable. */
.m-cell:hover {
  background: var(--paper-2);
}

/* Focus lands on the button, which is now only the accent — so draw the ring
   on the cell the button acts for. Width and colour mirror the global
   :focus-visible in styles.css; only the offset differs, and has to, because
   this ring sits inside a table cell rather than outside a box.

   Not :focus-within, which cannot tell a keyboard from a mouse and would ring
   the cell whenever the accent was clicked. Where :has() is missing both rules
   drop and the button keeps its own ring — around the accent alone, which is
   a worse indicator than this, not merely a smaller one. */
.m-cell:has(.m-cell-btn:focus-visible) {
  outline: 2px solid var(--spot);
  outline-offset: -2px;
}

.m-cell:has(.m-cell-btn:focus-visible) .m-cell-btn {
  outline: 0;
}

.m-point {
  display: block;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--dim);
  text-wrap: pretty;
}

/* Each behaviour after the first continues the list. */
.m-point + .m-point {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}

/* the density ladder ---------------------------------------------------- */

/*
  Width decides how much of a cell shows. Expressed as media queries rather
  than a class the script sets, so the ladder cannot fall out of step with
  the viewport and does not apply in print.

  `scripting: enabled` gates it: the ladder only ever hides content that
  expanding can bring back, so without a script to expand with, hiding it
  would strand the reader on a grid of coloured blocks. Browsers that do
  not know the feature fail the whole query and show everything, which is
  the same safe outcome.

  The queries are in px. The project's other breakpoints are in rem, but
  media-query rem resolves against 16px rather than the 18px root, so px is
  the honest unit for a threshold measured against the table's real width.

  Cumulative: whatever the first hides, the second hides too.

  Scoped away from `body.sheet`. `scripting: enabled` reports what the browser
  allows, not whether this document loaded matrix.js — and the printable sheet
  loads none. The premise above ("hides only what expanding can bring back")
  is therefore false there, and the sheet is a fixed A3 page whose width has
  nothing to do with the viewport's. Excluding it here rather than letting
  sheet.css undo the effects keeps the ladder's membership in one place: undo
  from outside can only ever restore what it remembers to.
*/
@media screen and (scripting: enabled) and (width < 1200px) {
  body:not(.sheet) :is(.m-point + .m-point, .m-ent, .m-col-def) {
    display: none;
  }

  body:not(.sheet) .m-wrap {
    --m-rail: 9rem;
  }
}

@media screen and (scripting: enabled) and (width < 1000px) {
  body:not(.sheet) :is(.m-text, .m-lead, .m-col-name) {
    display: none;
  }

  body:not(.sheet) .m-col-abbr {
    display: block;
  }

  body:not(.sheet) .m-wrap {
    --m-rail: 4.75rem;
  }

  /* The accent marker becomes the whole cell — until the cell is opened,
     when it reverts to the bar every other width shows. */
  body:not(.sheet) .m-cell:not(.is-open) .m-cell-btn::before {
    width: 100%;
    height: auto;
    min-height: 1.6rem;
    margin-bottom: 0;
    opacity: 0.55;
  }

  body:not(.sheet) .m-cell:not(.is-open) .m-cell-btn:hover::before {
    opacity: 1;
  }

  /* Keep the tap target at 44px however narrow the column gets, and share
     the width equally — content-sized columns leave the narrowest pillar
     below that. */
  body:not(.sheet) table.m {
    table-layout: fixed;
  }

  body:not(.sheet) .m-cell-btn {
    padding: 0.55rem 0.3rem;
    min-height: 44px;
  }

  body:not(.sheet) .m-col-btn {
    padding: 0 0.3rem 0.5rem;
  }

  body:not(.sheet) .m-assurance {
    display: block;
    margin-left: 0;
    font-size: 0.8rem;
    line-height: 1.1;
  }

  body:not(.sheet) .m-num {
    font-size: 1.5rem;
  }
}

/* The open cell takes the full width by spanning the pillar columns — the
   script sets colspan, so table layout does the sizing. Its siblings drop
   out. Rows above and below keep their column alignment. Not screen-only:
   the colspan is in the DOM when printing too, so the siblings must go or
   the printed row is six cells wide. */
.m-row.is-expanded > .m-cell:not(.is-open) {
  display: none;
}

/* an expanded cell ------------------------------------------------------ */

/* Shows in full whatever the rung says. The text sets to the measure; the
   button stays full width, because the whole cell is still the target. */
.m-row.is-expanded > .m-cell.is-open .m-text {
  display: block;
}

.m-row.is-expanded > .m-cell.is-open .m-point {
  display: block;
  max-width: var(--measure);
}

.m-row.is-expanded > .m-cell.is-open {
  background: var(--paper-2);
}

.m-row.is-expanded > .m-cell.is-open .m-point + .m-point {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Narrow, the rail has room for the entitlement again once the row is open
   — until it is too narrow, where the open cell's kicker names the level
   instead. */
@media screen and (scripting: enabled) and (1000px <= width < 1200px) {
  .m-row.is-expanded .m-ent {
    display: block;
  }
}

/* The coordinate label is hidden until its cell is open at the glyph rung,
   where nothing else in the grid carries words. Un-hiding has to undo the
   whole of .visually-hidden, not part of it. */
@media screen and (scripting: enabled) and (width < 1000px) {
  .m-row.is-expanded > .m-cell.is-open .m-sr {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    clip-path: none;
    margin: 0 0 0.35rem;
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    color: var(--muted);
  }
}