/* The board's own stylesheet, shared by the two pages that draw one.
 *
 * It was the <style> block of site/overview.html until 23 September 2026, when
 * the coverage board moved to a page of its own. Two pages draw the same table,
 * the same popover and the same sheet, and a second copy of eight hundred rules
 * is a second set of bugs: the first edit to one copy is where they part.
 *
 * The palette is the framework's, written out here rather than imported: these
 * pages keep no other stylesheet, and the reader's is its own.
 */
:root {
  --paper: #F1EFE3;
  /* The header's own ground and height, the reader's values rather than an
     approximation of them: the two bars sit at the same height and the same
     tone, or moving between the pages is a jump. */
  --chrome: #E9E6D7;
  --header-height: 54px;
  --ink: #23281B;
  --muted: #5C6B3C;
  --faint: #676C58;
  --line: #C6C4B0;
  --line-light: #DCD9C7;
  --accent: #333D22;
  --energy: #B7C94B;
  --on-accent: #F1EFE3;
  /* The two status colours, for the contradictions in the sheet: the rust marks
     a claim the judges confirmed, the grey one they did not. They are the
     framework's functional colours, and they never carry a claim alone: the
     word beside the mark says which it is. */
  --fail: #A0522D;
  --neutral: #8A8F7A;
  --footer-height: 30px;
  /* The page's measure, and the gutter that aligns a full-bleed bar with it.
     The bars run edge to edge because their ground should; their contents must
     start where the page's own text starts, or the eye reads two left margins.
     The 16px is the shell's own padding, so the two agree exactly. */
  /* A share of the window and nothing else. Any pixel cap here stops the
     margins growing with the screen, which is the opposite of proportional:
     capped at 1280 the margins were 336px at 1920 and 118px at 1280. */
  --measure: 84vw;
  /* Where the menu of sections has room in the margin, the page gives it more:
     five points of the window taken from either side of the boards (24
     September 2026), so the menu reads as a column of its own. */
  /* 24px, the same as the reader's bar and the two prose pages'. The bars were
     briefly indented to meet the page's own text, which put the brand a hundred
     pixels in and made this page's header read as a different one. Chrome runs
     to the edge of the window; only the content is held to a measure. */
  --gutter: 24px;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
/* No side padding here any more: the header runs to both edges of the window,
   as the reader's does, so the gutter belongs to the shell under it. */
/* No padding at the foot any more: the footer ends the page, and 96px under it
   would leave the bar floating above the bottom of the window. The room between
   the grid and the bar belongs to the shell. */
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
}
/* The foot of the shell clears the fixed bar below it: its own height, and then
   the room the page wanted anyway. Written as a sum rather than as one number,
   so changing the bar's height moves this with it. */
.shell {
  /* Proportional, within reason. 1100px was a cap chosen once, and on a wide
     screen it left the grid a ribbon down the middle with empty margin either
     side. It grows with the window now and stops at 1700, past which a row runs
     wider than an eye tracks across. */
  width: var(--measure);
  margin: 0 auto;
  padding: 0 16px calc(var(--footer-height) + 24px);
}

/* The reader's header, rule for rule. Copied rather than imported, like the
   palette above and for the same reason: this page is provisional and will be
   rebuilt inside the application, so it stays whole and movable. What that
   costs is that a change to the reader's bar has to be brought over by hand,
   which is the trade this whole file already makes.

   The brand lockup is one target in two halves: whichever half the pointer is
   over, both darken. The chartreuse highlight the framework gives links in
   prose is not used here, because it would fill a block behind the name that
   the mark beside it cannot take. */
/* Stuck to the top. The page is a little taller than a window and is meant to be
   read at a glance, so the few dozen pixels of scrolling it does take should not
   cost the reader the way back out of it. Its own ground is opaque, which is
   what keeps the grid from showing through as it passes underneath. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--chrome);
}

/* Where the project came from, and who runs it now, in the reader's own slim
   bar: one line, the same height and the same tones, so the two pages end the
   same way.

   Held at the foot of the window rather than at the end of the document. On the
   reader it is the last row of a full-height application and needs no holding;
   here the page scrolls, and a bar that scrolled away would leave the credit
   visible only to whoever reached the bottom. The shell below carries room for
   it, so nothing is read through it. */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: var(--footer-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  background: var(--chrome);
  color: var(--faint);
  font-size: 12px;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { background: var(--energy); color: var(--ink); }
/* On the baseline, not on the boxes: the wordmark is 17px and the collective's
   name 15px, so centred their boxes would line up while their letters did not. */
.site-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  --brand-rest: var(--muted);
  --brand-lit: var(--accent);
  --brand-pressed: var(--ink);
}
.polaris-mark {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-rest);
  transition: color .15s ease;
}
/* The mark leaves for the same place its name does, so it is kept out of the
   reading order and the tab order: the name is the one link a keyboard meets. */
.mark-link { display: flex; flex: none; align-self: center; }
.collective {
  color: var(--brand-rest);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s ease;
}
.mark-link:hover .polaris-mark,
.site-brand:has(.collective:hover) .polaris-mark,
.mark-link:hover + .collective,
.collective:hover { color: var(--brand-lit); }
.mark-link:active .polaris-mark,
.site-brand:has(.collective:active) .polaris-mark,
.mark-link:active + .collective,
.collective:active { color: var(--brand-pressed); }
.brand-divider {
  width: 1px;
  height: 15px;
  flex: none;
  align-self: center;
  background: var(--line);
}
.wordmark {
  font-family: var(--display);
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-header nav a:hover { background: var(--energy); color: var(--ink); }
/* The page you are on carries the chartreuse rule under it. */
.site-header nav a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--energy); }

h1 {
  margin: 34px 0 6px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}
h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--energy);
}
/* Under the front page's tabs the tab on screen already carries the chartreuse
   rule, so the view's title does without its own. */
[role="tabpanel"] > h1::before { display: none; }
/* Wider than the 66ch the framework asks for prose. This is a tool rather than
   a page of prose, and at 66ch the four sentences ran to six lines above a grid
   that wants the room. */
.lede { margin: 0 0 22px; max-width: 108ch; color: var(--muted); }

/* The board. A table because it is one: a row reads across, a constitution
   reads down, and a screen reader needs the headers to say so. Both views draw
   it, so the rules it is made of sit together further down, under .board. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
}
/* Fixed layout so every constitution gets the same width whatever its name or
   its version is: columns that size themselves to their contents make one lab
   look more considered than another for no reason but the length of a word.
   No minimum width, so the table is exactly its container and never scrolls
   sideways. Narrow, the cells wrap rather than overflow. */
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.grid-note {
  margin: 4px 0 0;
  max-width: 78ch;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.5;
}
/* The sentence saying the board slides sideways. The phone block at the foot of
   this file is what shows it, because that is where it is true: on a screen wide
   enough to hold every company there is nothing to slide, and the note would
   send a reader looking for a movement that never comes. */
.slides-note { display: none; margin-top: 8px; }
th, td { text-align: left; padding: 0; }
thead th {
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--muted);
  font-weight: 600;
  color: var(--muted);
  vertical-align: bottom;
}
tbody tr { border-bottom: 1px solid var(--line-light); }
tbody th {
  padding: 0;
  font-weight: 400;
  vertical-align: middle;
}
.cell { padding: 4px 6px 4px 0; }
.cell-button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgb(51 61 34 / var(--tint, .1));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cell-button:hover,
.cell-button:focus-visible { border-color: var(--accent); outline: none; }
.cell-figure {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
}
dialog::backdrop { background: rgb(35 40 27 / .55); }
.lede a {
  color: var(--ink);
  text-decoration: underline 2px var(--energy);
  text-underline-offset: 3px;
}
.lede a:hover, .lede a:focus-visible { background: var(--energy); }
/* The asterisk after "should", a way to the note on About that says what the
   word means for a model that nobody programs directly. */
.lede a.asterisk { margin-left: 1px; font-size: .75em; vertical-align: super; line-height: 0; text-decoration: none; }
/* What a judge said: the figure and the model's name in mono, the reason in the
   line tone, each reading against a rule of its own. */
.judges { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.judges li { padding: 2px 0 2px 12px; border-left: 3px solid var(--line); }
.judges .who { display: block; font-size: 12px; color: var(--faint); }
.judges .who .mono { font-size: 12px; }
.judges p { margin: 0; }
.missing { color: var(--faint); }

.claim { padding: 14px 0 6px; border-top: 1px solid var(--muted); }
.passage { margin: 0 0 4px; padding-left: 14px; border-left: 2px solid var(--line); }
.passage p { margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.55; }

.readings { width: 100%; margin: 2px 0 10px; font-size: 13px; line-height: 1.45; table-layout: auto; }
/* Not stuck: the rule above pins every table head on the page to the top of the
   window, which is what the board wants and what a small table inside a popover
   or the sheet does not. Pinned there, the head left its own table and sat over
   the page. */
.readings th {
  position: static;
  padding: 4px 10px 4px 0;
  border-bottom: 1px solid var(--muted);
  color: var(--muted);
  font-weight: 600;
  vertical-align: bottom;
  white-space: nowrap;
}
.readings td { padding: 6px 10px 6px 0; border-bottom: 1px solid rgb(92 107 60 / .2); vertical-align: top; }
.readings.figures th:not(:nth-child(-n+2)), .readings td.numeric { text-align: right; }
.readings td.numeric .mono { font-size: 13px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The governance view is a board: one table that takes the whole width, the
   companies across and their scores down. Anything
   more, what a question asks or why a company scored what it did, opens in a
   popover beside what was pressed, so the table is never pushed aside by it. */
.gov-lede { max-width: 96ch; margin-bottom: 26px; }
#status:empty { display: none; }

.gov-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gov-hint { margin: 0; max-width: 90ch; color: var(--muted); font-size: 14px; }
/* The framework's secondary button, and its primary once pressed. */
.gov-button {
  flex: none;
  padding: 5px 14px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.gov-button:hover { background: var(--energy); border-color: var(--energy); color: var(--ink); }
.gov-button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gov-button:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }

/* The table. The grid's own cells and colours, so a score reads the same in
   both views; every cell carries its figure, so colour is never alone. Its head
   holds under the site header while the checks are open and the table is long. */
/* The board: one table with the labs across and the figures down, drawn by site/board.js for both views. Rules that only the governance view's own rows need stay under .gov-heatmap below. */
/* From the top, so the ranks sit on one line whether a name wraps or carries a
   mark under it. */
.board thead th {
  top: var(--header-height);
  padding: 8px 6px 8px 0;
  vertical-align: top;
}
.board thead th.row-col { width: 22%; }
.board tbody th { padding: 0 10px 0 0; font-weight: 400; vertical-align: middle; }
.board .cell { padding: 3px 6px 3px 0; }
.board tbody tr { border-bottom: 1px solid var(--line-light); }
.board .cell-button {
  display: block;
  min-height: 44px;
  padding: 10px 8px;
  text-align: center;
}
/* The figure sits dead centre, across and down. What the score is out of is
   placed on its own in the corner and takes no part in that centring. */
.board .cell-button {
  position: relative;
  display: grid;
  place-items: center;
}
.board .cell-button .cell-figure { font-size: 16px; }
/* What the score is out of, small in the cell's lower right corner, straight on
   the cell's own colour. It inherits the figure's ink and stands back from it
   by its opacity, so it follows the cell from ink to paper: written as a colour
   of its own it was paper over every cell, which is invisible on the amber and
   green ones the figure now takes ink on. The opacity is the .7 it has always
   been, since it reads at that weight on both inks and a heavier corner mark
   would compete with the figure it belongs to. */
.cell-max {
  position: absolute;
  right: 6px;
  bottom: 3px;
  color: inherit;
  opacity: .7;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
}
.board .cell-button:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.board .cell-button.is-open { outline: 3px solid var(--ink); outline-offset: 2px; }
.board .cell-button:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
/* The total leads, and reads as the sum it is: taller, heavier, a rule under it. */
.board .total-row { border-bottom: 1px solid var(--muted); }
.board .total-row .cell-button { min-height: 54px; }
.board .total-row .cell-figure { font-size: 20px; }
/* Not assessed: no score, so no colour, and a dashed edge so the cell still
   reads as one. */
.board .cell-button.cell-na {
  border: 1px dashed var(--muted);
  background: transparent;
  color: var(--muted);
}
.board .cell-na .cell-figure { font-weight: 400; }
.chip-na {
  border: 1px dashed var(--muted);
  color: var(--muted);
  font-weight: 400;
}
/* A group's rows, indented under it and a size smaller. */
.board .check-row th { padding-left: 34px; }
/* A check's cell starts a fifth of the way into its own column, like the second
   line of a bullet: an open question reads as the parts its score is the sum of,
   column by column. */
.board .check-row .cell-button { width: 80%; margin-left: 20%; }
.board .check-row .cell-button { min-height: 36px; padding: 6px 8px; }
/* A little more room on the right than the governance view needs, which only
   ever marks "/4": "/10" is wider, and touched the figure. The coverage
   board and the overview's grid, which borrows its rows, and not the governance
   view, so no cell of that moves. */
#board .check-row .cell-button { padding-right: 20px; }
.board .check-row .cell-figure { font-size: 14px; }
.board .check-row { background: rgb(92 107 60 / .05); }

/* The rows only the governance view has, which is why they are not on the board:
   the line that puts the best practices outside the total, and the line inside
   them between what anyone can check and what only the company can show. */
/* The best practices are shown and never counted, so they stand apart, under a
   line across the table that says so. */
/* The heads of a board (the final score and its halves) are marked by the thin
   rule under them and nothing above: a heavier rule above each was tried on 24
   September 2026 and set aside as too much. */
.board .outside-row th { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); }
/* Inside the supporting practices, the line between the five scored from public
   sources and the five only an audit could score. */

.row-head { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.row-name .head-line { display: block; }
.row-name .head-line .head-name { display: inline; }
/* A footnote sign beside a row's name, explained under the table. Inline-block
   so the name's underline does not run under it. */
.row-mark {
  display: inline-block; margin-left: 2px; font-size: 9px; font-weight: 400;
  color: var(--muted); vertical-align: super; line-height: 0;
}

/* The numbered notes under the governance board. The number is the list's own,
   in mono since it is a reference a reader matches against the table. */
.gov-notes { margin: 16px 0 8px; padding-left: 28px; max-width: 86ch; color: var(--muted); font-size: 14px; }
.gov-notes li { margin: 0 0 6px; padding-left: 4px; }
.gov-notes li::marker { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; }
/* The overview's lettered notes, on the companies' names. */
.ovw-name-notes { list-style: none; margin-top: 10px; padding-left: 0; }
.ovw-name-notes .name-note-mark { display: inline-block; min-width: 14px; font-family: var(--mono); }

/* A row's name says its level too. The final score alone is strong, in the
   display face; every row folded under it is regular, a size smaller at each
   step, so a head never reads as one of its own rows and the opened rows stay
   light beside the figures. The Index and the overview draw the same rows, so
   both take these rules (8 October 2026: the halves were display 17px and the
   rows under them bold, which read as a second set of headings). */
.board tr[data-level="0"] .row-name .head-name { font-family: var(--display); font-size: 19px; font-weight: 600; }
.board tr[data-level="1"] .row-name .head-name { font-family: var(--ui); font-size: 15px; font-weight: 400; }
.board tr[data-level="2"] .row-name .head-name { font-family: var(--ui); font-size: 14px; font-weight: 400; }
.board tr[data-level="3"] .row-name .head-name { font-family: var(--ui); font-size: 13px; font-weight: 400; }
/* A section of the page that folds under its own heading, open by default. The
   chevron is the rows' own, so one sign means "opens" everywhere. */
/* The heading is the section's own, styled as every section heading is; the one
   thing folding adds is a small chevron after it, level with the words. */
.section-fold > summary {
  display: flex; align-items: flex-end; gap: 10px; cursor: pointer; list-style: none;
  padding: 0; font: inherit;
}
.section-fold > summary::-webkit-details-marker { display: none; }
/* Before the heading and centred on its words rather than on the rule above
   them: the heading's line is 26px with 12px under it, so the chevron's middle
   sits 25px up from the bottom of the summary. */
.section-fold > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-bottom: 22px;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.section-fold[open] > summary::before { transform: rotate(45deg); }
.section-fold > summary:hover::before { border-color: var(--ink); }
.section-fold > summary:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }

/* Hidden means hidden. The attribute's own rule is the browser's weakest, and
   every block here that sets a display (the grid of takeaways and notes, the
   toolbar's flex row) would otherwise stay on screen while marked hidden, which
   is how a publication that could not be drawn kept its empty headings. */
[hidden] { display: none !important; }

/* The sentence a publication that cannot be drawn gets, clear of the tabs. */
#status, #ovw-status { margin-top: 18px; }

/* The small square beside each level of the behaviour scale, painted the colour
   a cell at that depth takes. */
.scale-swatch {
  display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  border-radius: 2px; vertical-align: -1px;
}

/* The final score's cells carry a border a shade darker than their own colour:
   a translucent ink laid over the background, which runs under the border, so
   each cell darkens its own colour rather than taking one colour for all. */
.board tr[data-level="0"] .cell-button { border: 2px solid rgb(35 40 27 / .28); }

/* Only the final score keeps the underline and the highlight: on every row
   they weighed the table down. The rows under it are never underlined, at rest
   or pointed at; a pointer turns the name olive, and the focus ring on the
   button says where the keyboard is. */
.board tr[data-level]:not([data-level="0"]) .row-name .head-name {
  text-decoration: none;
  transition: color .15s ease;
}
.board tr[data-level]:not([data-level="0"]) .row-name:hover .head-name,
.board tr[data-level]:not([data-level="0"]) .row-name:focus-visible .head-name {
  background: none;
  color: var(--muted);
}

/* Where a board says how deep a row sits (`data-level`, 0 at the final score),
   its cells step in with it, the way a group's rows already did: a row's figure
   starts further right the deeper the average it belongs to, so the eye reads
   which figures are made of which. The final score and its two halves are the
   heads and stay full width, so there are two steps. */
.board tr[data-level="2"] .cell-button { width: 90%; margin-left: 10%; }
.board tr[data-level="3"] .cell-button { width: 80%; margin-left: 20%; }
.row-name, .company-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row-name .head-name { font-weight: 600; }
.check-row .row-name .head-name { font-weight: 400; text-decoration-thickness: 1px; }
/* A row's name is never underlined or highlighted: a pointer turns it olive,
   and the focus ring says where the keyboard is. */
.row-name .head-name { transition: color .15s ease; }
.row-name:hover .head-name, .row-name:focus-visible .head-name { color: var(--muted); }
.company-button:hover .company-name, .company-button:focus-visible .company-name { background: var(--energy); }
.row-name:focus-visible, .company-button:focus-visible, .row-toggle:focus-visible {
  outline: 2px solid var(--energy);
  outline-offset: 2px;
}
.head-name { display: block; }
.head-sub { display: block; font-size: 12px; font-weight: 400; color: var(--faint); }
.check-id { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.company-button { display: block; width: 100%; font-weight: 400; }
.company-button .rank { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--faint); }
/* The company's own mark, above its name: drawn in one tone from the palette
   rather than in the company's colours, so a row of nine reads as one board and
   not as nine brands. The name under it carries the meaning; this is decorative
   and hidden from assistive technology. A company the set has no mark for gets an
   empty box of the same size, so every name in the row starts on one line. */
.company-mark {
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px 0 4px;
  color: var(--accent);
}
.company-name { color: var(--muted); }
/* Open and shut, drawn rather than typed: two borders of a small square, turned
   to point right when shut and down when open. The same chevron marks every
   fold on the board. */
.row-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
/* A bare chevron, small and quiet: no ring, no border, no ground, in the faint
   tone at rest and the ink when pointed at. It is the same mark the page's own
   folding sections carry, so one sign means "opens" everywhere. The button
   around it keeps its size, which is the reach of a press, and its focus ring. */
/* A row's fold is a small chevron, thin and pale at rest and the ink when
   pointed at: it points right when the row is shut and down when it is open. */
.row-toggle::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  opacity: .7;
  transform: rotate(-45deg);
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}
.row-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.row-toggle:hover::before { border-color: var(--ink); opacity: 1; }
/* The folds inside a popover keep their chevron. */
.gov-pop summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform .15s ease, border-color .15s ease;
}
.gov-pop details[open] > summary::before { transform: rotate(45deg); }
.row-spacer { flex: none; width: 26px; }

/* The findings, under the table. They are open: a reader who has just read the
   table should meet what it shows without pressing anything, and the detail that
   used to sit beside them is folded into the two appendices below. */
.gov-findings { margin-top: 40px; }
/* A section of prose under a board: motivation, what comes next. */
.page-prose p { margin: 0 0 12px; max-width: 72ch; font-size: 15px; line-height: 1.6; }
/* The menu of the page's sections, down the left margin. It lives in the margin
   the page's measure leaves (13vw on either side) and only where that margin is
   wide enough to hold a short title, so it never takes width from a board. It
   is quiet: faint small text, the current section in ink with the chartreuse
   rule the framework uses for an active state. */
.page-menu { display: none; }
@media (min-width: 1200px) { :root { --measure: 74vw; } }
/* A section the menu scrolls to stops clear of the header above it. */
[data-menu] { scroll-margin-top: 80px; }
@media (min-width: 1200px) {
  .page-menu {
    display: block; position: fixed; top: 140px; left: 20px;
    width: calc(13vw - 36px); max-height: calc(100vh - 180px); overflow-y: auto;
    font-size: 13px; line-height: 1.35;
  }
  .page-menu ol { list-style: none; margin: 0; padding: 0; }
  .page-menu li { margin: 0 0 6px; }
  .page-menu a {
    display: block; padding: 2px 0 2px 8px; border-left: 2px solid transparent;
    color: var(--faint); text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  .page-menu a:hover { color: var(--ink); }
  .page-menu a[aria-current="true"] { color: var(--ink); border-left-color: var(--energy); }
  .page-menu a:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .page-menu a { transition: none; } }
.gov-findings h2 {
  margin: 0 0 12px;
  line-height: 1.25;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
}
.gov-findings h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--energy);
}
.gov-findings .finding { padding: 14px 0; border-bottom: 1px solid rgb(92 107 60 / .2); }
.gov-findings .finding h3 {
  margin: 0 0 6px;
  max-width: 72ch;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}
.gov-findings .finding p { margin: 0; max-width: 72ch; font-size: 15px; line-height: 1.6; }
.gov-pop summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.gov-pop summary::-webkit-details-marker { display: none; }
.gov-pop summary::before { flex: none; margin: 0 4px 0 2px; }
.gov-pop summary:hover { color: var(--muted); }
.gov-pop summary:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }

/* The popover. Placed by governance.js beside what opened it; the browser keeps
   it above everything and closes it on Escape or a press elsewhere. */
/* The popover is the frame and does not scroll; its body does. The cross sat in
   the scrolling box until 23 September 2026, so a reader who had scrolled a long
   popover had scrolled past the only control on it and had to reach for Escape
   or press elsewhere. It is a row of its own above the body now, in view
   wherever the body has been scrolled to. */
.gov-pop {
  inset: auto;
  margin: 0;
  width: min(460px, calc(100vw - 16px));
  max-height: min(72vh, 600px);
  overflow: hidden;
  padding: 10px 0 0;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
/* The column is given to the popover only while it is open. Written on the base
   rule it would beat the browser's own `display: none` for a closed popover,
   which is an author declaration against a user-agent one and wins whatever the
   specificity, and an empty box would sit at the foot of the page. */
.gov-pop:popover-open {
  display: flex;
  flex-direction: column;
}
.gov-pop:focus { outline: none; }
.gov-pop:focus-visible { outline: 2px solid var(--energy); }
.gov-pop-body {
  overflow-y: auto;
  padding: 0 20px 18px;
}
.gov-pop-close {
  flex: none;
  align-self: flex-end;
  margin: 0 12px 2px 12px;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.gov-pop-close:hover { background: var(--energy); color: var(--ink); }
.gov-pop h2 {
  margin: 0 0 2px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.gov-pop h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.gov-pop p { margin: 0 0 10px; }
.gov-pop .subtitle { color: var(--muted); }
.gov-pop .figure strong { font-size: 26px; font-weight: 600; }
.gov-pop details { border-top: 1px solid rgb(92 107 60 / .2); }
.gov-pop details:last-of-type { border-bottom: 1px solid rgb(92 107 60 / .2); }
.gov-pop details > :not(summary) { margin-left: 21px; }
.gov-pop .aside { margin: 14px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--muted); }
.gov-pop a { color: var(--ink); text-decoration: underline 2px var(--energy); text-underline-offset: 3px; }
.gov-pop .gov-button { margin-top: 6px; }
/* The working paper's own words, quoted exactly, each under a chartreuse rule. */
.gov-pop .paper-fold { margin-top: 10px; }
.paper-name { margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.paper-quote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--energy); }
.paper-quote p { margin: 0; }
.paper-quote .paper-where { margin-top: 3px; font-size: 12px; color: var(--faint); }
.chip {
  flex: none;
  display: inline-block;
  min-width: 30px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.check-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.check-list li { display: flex; gap: 10px; align-items: baseline; line-height: 1.45; }
.anchors { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.anchors li { display: flex; gap: 12px; padding: 4px 8px; border-radius: 3px; line-height: 1.45; }
.anchors li.is-here { background: rgb(183 201 75 / .25); }
.anchor-level { flex: none; width: 1.2em; font-family: var(--mono); font-weight: 600; }
.anchor-name { font-weight: 600; }
/* A behaviour named inside a category's popover, which opens its own popover in
   place rather than sending the reader back to the table to find its cell. */
.inline-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: underline 1px var(--energy);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.inline-button:hover { background: var(--energy); }
/* The same, as a link to a figure on another page. */
.inline-link {
  color: var(--ink);
  text-decoration: underline 1px var(--energy);
  text-underline-offset: 3px;
  transition: background-color .15s ease;
}
.inline-link:hover, .inline-link:focus-visible { background: var(--energy); }
.gov-more-body { padding: 0 0 24px; }
.gov-more-body p, .gov-more-body li { max-width: 72ch; font-size: 15px; line-height: 1.6; }
.gov-more-body p { margin: 0 0 12px; }
.gov-more-body h3 { margin: 24px 0 8px; font-family: var(--display); font-size: 16px; font-weight: 600; }
.page-prose a, .ovw-takeaways a, .gov-notes a {
  color: var(--ink);
  text-decoration: underline 2px var(--energy);
  text-underline-offset: 3px;
}
.page-prose a:hover, .page-prose a:focus-visible,
.ovw-takeaways a:hover, .ovw-takeaways a:focus-visible,
.gov-notes a:hover, .gov-notes a:focus-visible { background: var(--energy); }

/* A source a sentence rests on: its code as a superscript after the sentence,
   in the link style, and in mono because it is a reference a reader matches
   against the list of sources at the foot of the page, as the numbered notes
   are. Codes written back to back share one superscript, a comma between. */
sup.cite {
  margin-left: 1px; font-family: var(--mono); font-size: 10px; font-weight: 400;
  line-height: 0; vertical-align: super; color: var(--ink);
}
sup.cite a, a.source-code {
  color: var(--ink); text-decoration: underline 2px var(--energy); text-underline-offset: 2px;
  transition: background-color .15s ease;
}
sup.cite a:hover, sup.cite a:focus-visible,
a.source-code:hover, a.source-code:focus-visible { background: var(--energy); }
.source-code { font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* The sources reviewed: one entry per document, under its company. The entry a
   press on a code brought the reader to is marked for a moment, the colour a
   selected row takes, and nothing moves. */
.source-list { margin: 0 0 16px; padding: 0; list-style: none; }
.gov-more-body .source-entry {
  max-width: 80ch; margin: 0 0 4px; padding: 8px 10px; border-radius: 3px;
  transition: background-color .15s ease;
}
.source-entry:focus { outline: none; }
.source-entry:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
.source-entry.is-cited { background: rgb(183 201 75 / .25); }
.source-entry .source-head { margin: 0; }
.source-entry .source-head .source-code { margin-right: 4px; }
.source-entry .source-meta { margin: 2px 0 6px; font-size: 13px; color: var(--faint); }
/* The word that opens an entry: small and faint at the end of its line, with no
   arrow, and the link colour change on hover like every control here. */
.source-entry .source-toggle {
  margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--faint);
  transition: color 150ms, background-color 150ms;
}
.source-entry .source-toggle:hover { color: var(--ink); background: rgb(183 201 75 / .35); }
.source-entry .source-toggle:focus-visible { outline: 2px solid var(--energy); outline-offset: 1px; }
.source-entry .source-body { margin: 2px 0 8px; }
.source-entry .source-body[hidden] { display: none; }
.source-entry .paper-quote { margin: 6px 0 8px; }
.source-entry .paper-quote p { margin: 0; font-size: 14px; }
.source-entry .paper-quote .paper-where { margin-top: 3px; font-size: 12px; }
.gov-bullets { margin: 0 0 16px; padding: 0; list-style: none; }
.gov-bullets li { position: relative; margin-bottom: 8px; padding-left: 20px; }
.gov-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--energy);
}
.table-scroll { overflow-x: auto; margin-bottom: 8px; }
.gov-table { font-size: 14px; line-height: 1.5; }
.gov-table thead th { position: static; }
.gov-table td, .gov-table tbody th {
  padding: 9px 10px;
  border-bottom: 1px solid rgb(92 107 60 / .2);
  vertical-align: top;
}
.gov-table tbody tr { border-bottom: 0; }
.gov-scoring-table { min-width: 560px; }
.gov-scoring-table .check-col { width: 28%; }
.gov-scoring-table tbody th { font-weight: 600; }

/* Nine companies need about a thousand pixels. Narrower than that the table
   scrolls sideways in its own frame, with the names of the rows held at its left
   edge so a score never loses its row. The head no longer holds at the top
   there: a frame that can scroll is what a sticky head would stick to, and this
   one scrolls away with the page.

   `overflow-y: clip` looks like the way out of that and is not, which is worth
   writing down because it is the obvious thing to try. A frame is meant to stop
   being a vertical scroll container under it, freeing the head to hold against
   the window instead. But the two axes are settled against each other when they
   compute: with one of them `auto` or `scroll`, a `clip` on the other computes
   to `hidden`, and `hidden` is a scroll container like any other. Measured in
   Chrome 153, `overflow-x: auto; overflow-y: clip` computes to `auto/hidden`
   and the head holds against the frame exactly as before. The one pairing that
   frees it is `clip` on both axes, which takes the sideways scrolling with it.
   So the head holds where the page is the scroller and nowhere else, and a
   figure's column is read from the name its press opens. */
@media (max-width: 1180px) {
  .matrix-wrap { overflow-x: auto; }
  .board { min-width: 1000px; }
  .board thead th { position: static; }
  .board tbody th, .board thead th.row-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
  }
  .board .check-row th { background: #EAE8DB; }
  /* Held at the left only. The top the wide layout gives the head, to clear the
     site header, would push this one cell down inside the frame. */
  .board thead th.row-col { top: auto; }
  /* The edge the figures pass behind. A column that is held while the rest
     slides says so with a rule, or the first sign that the board moved is a
     figure appearing from under a name. */
  .board tbody th, .board thead th.row-col { border-right: 1px solid var(--line); }
}
/* A phone. The board is still a board: the companies read across and the rows
   read down, and comparing two companies side by side is what it is for. What
   changes is the budget. At 390 pixels, with the framework's gutter either side,
   there are 358 to spend, and a board that opens on nothing but row names has
   failed however well it scrolls. So the names take 136 and each company 72,
   which puts three companies on screen before anything slides. The 72 is what
   the longest company name needs to set on one line: a head that breaks a name
   across two is a head nobody reads.

   The names give way for it, at the size the framework gives a dense tool and
   over as many lines as they need. Nothing is renamed and nothing is cut: a row
   name opens a popover carrying it in full, as it does at every width. */
@media (max-width: 560px) {
  /* The full width of the window, less the framework's 16px gutter, which the
     shell's own padding already is. A share of the window, which is what the
     wide layout takes, spent 62 of those 358 pixels on margin. */
  .shell { width: 100%; }

  /* The thousand-pixel floor the wider layout gives this table is what left the
     names 220 wide inside a window of 296. Gone here, and nothing replaces it:
     a fixed table is as wide as its columns come to, and the two widths under
     this are what they come to. */
  .board { min-width: 0; }
  .board thead th.row-col { width: 136px; }
  .board thead th { width: 72px; }
  /* A company's name is drawn in the head of its own column, so the longest word
     in it sets how wide that column can be asked to be. Broken anywhere, the
     name is free to wrap and every column comes out the width it was given,
     which is what keeps one company from looking wider than another. */
  .board thead th .company-name { font-size: 13px; overflow-wrap: anywhere; }
  .board .row-name .head-name { font-size: 14px; overflow-wrap: anywhere; }
  .board .row-name .head-sub { font-size: 11px; }
  /* The indent that shows a check belongs to the row above it, at the width a
     phone can lend it: 34px of a 136px column is a quarter of the room the name
     has to set in. */
  .board .check-row th { padding-left: 14px; }
  /* A cell carries a figure of four characters, and that is all it has room for.
     What the figure is out of is said in the row's own name, under it, and again
     in the popover the figure opens, so the corner mark is the one place of the
     three that can go. It was never read aloud: the accessible name carries it. */
  .cell-max { display: none; }
  /* Full width, like every other cell, and the padding either side of a figure
     cut to four pixels. The step into the column that shows a check as a part
     of its question costs a fifth of 72, which is the difference between a
     figure that fits and one that does not. */
  .board .check-row .cell-button, #board .check-row .cell-button {
    width: 100%;
    margin-left: 0;
    min-height: 40px;
    padding: 6px 4px;
  }
  .board .cell-button { padding-left: 4px; padding-right: 4px; }
  .board .total-row .cell-figure { font-size: 18px; }
  /* The fold stays the size it is drawn, since a larger ring would take the room
     the name needs, and takes the press from 44 pixels around it. The rows are
     44 pixels tall at the least, so the reach of one fold stops where the next
     one begins. */
  .row-toggle { position: relative; }
  .row-toggle::after { content: ""; position: absolute; inset: -9px; }

  /* The pill above the board, at the height a thumb finds. Its 33 pixels are
     about right for a pointer and under what a finger reliably hits. */
  .gov-button { padding: 9px 16px; }

  /* The popover takes the screen. board.js places it beside whatever was
     pressed, which is what there is no room for here, and it writes the two
     offsets on the element itself: they are taken back rather than asked for,
     so that file needs to know nothing about phones. */
  .gov-pop {
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    /* As tall as it needs and no taller, up to the window: a note of two
       sentences in a box the height of a phone is an empty box, and a long one
       scrolls inside itself as it does at every width. */
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top))
                     - max(8px, env(safe-area-inset-bottom)));
  }
  /* The one control on a popover that now fills the screen, at the size a thumb
     finds. It sits in the row above the body, so it is in reach however far the
     body has been scrolled. */
  .gov-pop-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 24px;
  }
  .gov-pop-close { margin: 0 4px 0 12px; }
  /* The same, for the sheet the coverage board opens: as much of the window as
     the browser's own cap on a modal allows, rather than a box floating in the
     middle of it. Named by its id and not by its tag, because the feedback
     bubble's dialog is on this page too and carries its own sizing.

     The head is a row of its own above the body, so the cross stays in view
     however far a long sheet has been scrolled. It used to be the body that
     carried the height, worked out by subtracting a head of 62 pixels: at this
     width the title wraps and the head is taller than that, so the sheet ran
     past the foot of the window. The two are a column now and the body takes
     what is left. The vh line is there for whatever does not know dvh. */
  #sheet {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top))
                     - max(16px, env(safe-area-inset-bottom)));
  }
  #sheet[open] { display: flex; flex-direction: column; }

  /* Said once, under the board, in the tone of the board's other notes: a table
     that slides with nothing to say so reads as a table with three columns. */
  .slides-note { display: block; }

  /* The anchor tables under "How the scoring works" stop being tables, for the
     reason the readings below do: four columns of prose cannot set in 358
     pixels. A second thing sliding sideways inside a page that already has one
     is worse than either alone, so a check becomes its name and the three
     descriptions under it, each marked with the score it earns. */
  .gov-scoring-table { min-width: 0; }
  .gov-scoring-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .gov-scoring-table, .gov-scoring-table tbody, .gov-scoring-table tr,
  .gov-scoring-table tbody th, .gov-scoring-table td { display: block; width: 100%; }
  .gov-scoring-table tr { padding: 10px 0; border-bottom: 1px solid rgb(92 107 60 / .2); }
  .gov-scoring-table tbody th { padding: 0 0 6px; border: 0; }
  .gov-scoring-table td { padding: 2px 0 2px 24px; border: 0; }
  .gov-scoring-table td::before {
    display: inline-block;
    width: 24px;
    margin-left: -24px;
    color: var(--muted);
    font-family: var(--mono);
    font-weight: 600;
  }
  .gov-scoring-table td:nth-of-type(1)::before { content: "0"; }
  .gov-scoring-table td:nth-of-type(2)::before { content: "2"; }
  .gov-scoring-table td:nth-of-type(3)::before { content: "4"; }

  /* The readings of a contradiction stop being a table and become labelled
     lines, since five columns of yes and no cannot set in 360 pixels. */
  .readings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .readings, .readings tbody, .readings tr, .readings td { display: block; width: 100%; }
  .readings tr { padding: 8px 0; border-bottom: 1px solid rgb(92 107 60 / .2); }
  .readings td { padding: 1px 0; border: 0; text-align: left !important; }
  .readings td[data-label]:not(.judge)::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
  .readings td.judge { font-weight: 600; }
  .readings td.reason { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .gov-button, .row-toggle::before,
  .gov-pop summary::before, .section-fold > summary::before,
  sup.cite a, a.source-code, .source-entry, .source-entry .source-toggle { transition: none; }
}

/* ---------- the overview ----------
 *
 * Its grid is a board like the Index's, drawn by board.js with the same cells,
 * so only what the overview adds is here: its letters and the takeaways under
 * it. */

/* A final score's cells are one height, whatever letter they carry.
   The rows under it are the Index's, and keep the Index's sizes. */
.ovw-board tr[data-level="0"] .cell-button { height: 54px; min-height: 54px; }
/* No border of their own on the final scores' cells here: the Index marks its
   final score with a darker edge, and on the overview, where the final scores
   are most of what is shown, every cell edged in its own darker shade read as a
   row of separate buttons. */
.ovw-board tr[data-level="0"] .cell-button { border: 1px solid transparent; }

/* The figures with a small gap between cells, a pixel each side, and a small
   rounding of each: the eye reads a block of colour, and each cell still reads
   as one. No border. */
.ovw-board tbody tr[data-level] { border-bottom: 0; }
.ovw-board tbody tr[data-level] > th { border-bottom: 1px solid var(--line-light); }
.ovw-board tbody tr[data-level] > td.cell { padding: 1px; }
.ovw-board tbody tr[data-level] .cell-button { border-radius: 3px; }
/* The letters in a light weight: the colour already carries the grade. */
.ovw-board .cell-grade .cell-figure { font-weight: 400; }
/* Each level under a final score starts further in than the one above it, so
   the names read as a tree: a row's fold sits under its parent's name, never
   beside it, and a row with no fold starts 20px in from its parent's name. The cells
   step in with the names, a few points a level, so the figures read as a tree
   as well. The names' column is a little wider here to hold the deepest names. */
.ovw-board thead th.row-col { width: 28%; }
.ovw-board tr[data-level="1"] > th { padding-left: 34px; }
.ovw-board tr[data-level="2"] > th { padding-left: 68px; }
.ovw-board tr[data-level="3"] > th { padding-left: 122px; }
.ovw-board tr[data-level="1"] .cell-button { width: 94%; margin-left: 6%; }
.ovw-board tr[data-level="2"] .cell-button { width: 88%; margin-left: 12%; }
.ovw-board tr[data-level="3"] .cell-button { width: 82%; margin-left: 18%; }
/* Where the names are held at the left while the companies slide under them,
   they stay above a cell raised by a pointer or a popover. */
@media (max-width: 1180px) {
  .ovw-board tbody th { z-index: 2; }
}
/* The overall grade leads the grid as a quiet band, like a header row: the
   header's own paper tint across the row and no painted cells, since it is read
   from the two letters under it. Its name is as strong as theirs; its letter is
   in the data face, with the figure beside it small and muted. */
.ovw-board .ovw-overall-row { border-bottom: 1px solid var(--muted); }
.ovw-board .ovw-overall-row > th,
.ovw-board .ovw-overall-row > td { background: var(--chrome); }
.ovw-board .ovw-overall-row .row-name .head-name {
  font-family: var(--display); font-size: 19px; font-weight: 600;
}
.ovw-board .ovw-overall-cell { height: 54px; text-align: center; vertical-align: middle; }
.ovw-overall-letter {
  font-family: var(--mono); font-size: 18px; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ovw-overall-figure {
  margin-left: 4px; font-family: var(--mono); font-size: 12px; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.ovw-pop-link { margin-top: 12px; }
/* The row names of the views in preparation: plain text a little smaller than
   the Index's, on two lines if they need them, underlined only when pointed
   at. */
.ovw-board .ovw-row-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color 150ms;
}
.ovw-board .ovw-row-name:hover { color: var(--muted); }
.ovw-board .ovw-row-name:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
/* A view in preparation: no figure and no colour, the words quiet in the
   middle of the one cell that spans the companies. */
/* The controls above the grid. */
.ovw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
/* The key to the letters, under the grid and the width of it: one bar per
   letter, painted as the grid paints that letter and carrying it, with what it
   means under it, seven across on a screen that holds them and four on a phone.
   The whole key is one button that opens the scale, so it takes the focus ring
   every control has, and a pointer turns its words to ink. */
.ovw-key {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ovw-key:focus-visible { outline: 2px solid var(--energy); outline-offset: 4px; }
.ovw-key-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  max-width: 420px;
}
.ovw-key-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ovw-key-bar {
  display: block;
  height: 16px;
  padding: 0 6px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}
.ovw-key-words {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  transition: color .15s ease;
}
.ovw-key:hover .ovw-key-words { color: var(--ink); }
@media (max-width: 760px) {
  .ovw-key-list { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ovw-key-words { transition: none; }
}
/* In the scale it opens, each letter's figures are data. */
.ovw-scale-list .ovw-scale-range { font-family: var(--mono); font-size: 13px; }
/* A final score's parts in its popover, each opening in place. */
.gov-pop .ovw-part { border-top: 1px solid rgb(92 107 60 / .2); padding: 6px 0; }
.gov-pop .ovw-part summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.gov-pop .ovw-part-body { margin: 6px 0 4px; font-size: 14px; }
.ovw-board .cell-coming {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: 11px;
  color: var(--faint);
}
/* Adherence where nothing is measured yet: no colour and no edge, a small word
   in the quiet ink, the size "In preparation" is, so ten of them across a row
   read as an empty row rather than as ten figures. A pilot under way is said in
   the olive of the headings; a company with no constitution is a dash. A
   cell that cannot be tested keeps a faint 1px olive outline the size of a
   scored cell, so the row still reads as a grid where no result will come. */
.ovw-board .cell-button.cell-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--faint);
}
.ovw-board tr[data-level] .cell-button.cell-quiet-untested { border-color: rgb(92 107 60 / .3); }
.ovw-board tr[data-level] .cell-button.cell-quiet:hover,
.ovw-board tr[data-level] .cell-button.cell-quiet:focus-visible { border-color: var(--accent); }
.ovw-board .cell-quiet .cell-quiet-word { font-size: 11px; line-height: 1.3; }
.ovw-board .cell-quiet-pilot { color: var(--muted); }
.ovw-board .cell-quiet-pilot .cell-quiet-word { font-weight: 600; }
.ovw-board .cell-quiet-read { color: var(--muted); }
.ovw-board .cell-quiet-none .cell-quiet-word { font-family: var(--mono); font-size: 13px; }
/* The switch beside adherence's name between its two views: two small joined
   pills, a word each, on the name's line, so the row grows neither wider nor
   taller. The view shown is pressed in the framework's primary colours. */
.ovw-board .adh-switch {
  display: inline-flex;
  flex: none;
  align-self: center;
  border: 1px solid var(--muted);
  border-radius: 999px;
  overflow: hidden;
}
.ovw-board .adh-switch-button {
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ovw-board .adh-switch-button + .adh-switch-button { border-left: 1px solid var(--muted); }
.ovw-board .adh-switch-button:hover { background: var(--energy); color: var(--ink); }
.ovw-board .adh-switch-button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ovw-board .adh-switch-button:focus-visible { outline: 2px solid var(--energy); outline-offset: -2px; }
/* The "i" beside the switch: a small ringed letter in the olive of the headings,
   opening what the two views mean. A letter, not an icon. */
.ovw-board .adh-info {
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  /* Against the switch: the row head's 8px gap, taken back but for 3px. */
  margin-left: -5px;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 8px;
  font-weight: 600;
  line-height: 10px;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ovw-board .adh-info:hover, .ovw-board .adh-info.is-open { background: var(--energy); border-color: var(--energy); color: var(--ink); }
.ovw-board .adh-info:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
/* The robustness gauge between adherence's name and the switch: one bar per
   level, rising left to right, outlined in the olive of the headings and
   filled in the energy colour as far as the evaluations' robustness. */
.ovw-board .adh-robust {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  margin-left: -4px;
  padding: 1px 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ovw-board .adh-robust svg { width: 20px; height: 10px; display: block; }
.ovw-board .adh-robust-bar { fill: none; stroke: var(--muted); stroke-width: .6; }
.ovw-board .adh-robust-fill { fill: var(--energy); }
.ovw-board .adh-robust:hover, .ovw-board .adh-robust.is-open { background: rgb(183 201 75 / .3); }
.ovw-board .adh-robust:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
.gov-pop .adh-levels { margin: 0 0 10px; padding: 0; list-style: none; }
.gov-pop .adh-levels li { margin: 0 0 6px; }
/* What an adherence figure rests on, in its popover: one line per rule, its
   name and its figure, the figure in mono at the right. */
.gov-pop .adh-rules { margin: 0 0 10px; padding: 0; list-style: none; font-size: 14px; }
.gov-pop .adh-rules li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 3px 0; border-top: 1px solid rgb(92 107 60 / .2);
}
.gov-pop .adh-rules li:last-child { border-bottom: 1px solid rgb(92 107 60 / .2); }
.gov-pop .adh-rules .mono { font-size: 13px; white-space: nowrap; }
/* A case a provider's classifier blocked: said under the rule's name, quietly. */
.gov-pop .adh-rules .adh-blocked { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
/* The context under the grid: facts no score counts, so no colour, no tier and
   no buttons for names. The heading and the row names are quiet text; every
   cell is the same size whatever it holds, a few words on two lines at most. */
.ovw-board .context-head th { padding: 12px 0 6px; text-align: left; border-bottom: 1px solid rgb(92 107 60 / .2); }
.ovw-board .context-title { font-size: 12px; font-weight: 600; color: var(--faint); }
/* The heading's one line: the switch and the name at the left, the grid's
   colour scale at the board's right edge. */
.ovw-board .context-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ovw-board .context-left { display: flex; align-items: center; gap: 4px; }
.ovw-board .context-head .row-mark { color: var(--faint); }
/* The switch for the context, small, beside its heading. */
/* Hidden, the context is one small button; shown, it is closed again by a
   small underlined word before its heading. */
.ovw-board .ovw-context-toggle { padding: 3px 12px; font-size: 12px; }
.ovw-board .context-hide {
  margin-right: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--faint);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ovw-board .context-hide:hover { color: var(--ink); }
.ovw-board .context-hide:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
.ovw-board .context-row th { text-align: left; vertical-align: middle; }
.ovw-board .context-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 150ms;
}
.ovw-board .context-name:hover,
.ovw-board .context-name:focus-visible { color: var(--ink); outline: none; }
.ovw-board .context-name:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }
.ovw-board .cell-context {
  display: grid;
  grid-template-rows: 28px 15px;
  row-gap: 2px;
  align-content: center;
  justify-items: center;
  background: transparent;
  /* The height of a score's cell above, so every row of the grid is one height. */
  height: 54px;
  min-height: 54px;
  padding: 4px 4px;
  overflow: hidden;
}
/* Two bands of one height in every cell, so each line sits level across the
   row: two lines' room for the model's name, which starts at the top of every
   cell, then the months, starting at the same height whatever the name takes. */
.ovw-board .cell-context > .cell-context-words { align-self: start; }
/* Open weights under the usage figures, on one line whatever the column's width. */
/* At 9px "Open weights" fits inside the cell's padding, so it centres under the figures. */
.ovw-board .cell-context-open { font-size: 9px; line-height: 1.2; color: var(--faint); white-space: nowrap; }
/* In a usage cell the figures take the first band, centred in it. */
.ovw-board .cell-context > .usage-meter { align-self: center; }
.ovw-board .cell-context > :only-child { grid-row: 1 / -1; align-self: center; margin: 0; }
/* A row's name, and under it in small type what its cells say. */
.ovw-board .context-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ovw-board .context-sub { font-size: 11px; color: var(--faint); }
.ovw-board .cell-context-words,
.ovw-board .cell-context-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ovw-board .cell-context-sub { color: var(--faint); }
/* The rows keep a little air between them, as the grid above does. */
/* The same cell spacing as the scores above, so the columns line up. */
.ovw-board .context-row .cell { position: relative; padding: 3px 6px 3px 0; }
/* The context starts under a rule like the one at the top of the grid. */
.ovw-board .context-first > th, .ovw-board .context-first > td { border-top: 1px solid var(--muted); }
.ovw-board .context-first th, .ovw-board .context-first td { padding-top: 10px; }
/* A light divider between two context cells, short of the cell's top and
   bottom, so the columns read apart without drawing boxes. */
.ovw-board .context-row .cell + .cell::before {
  content: "";
  position: absolute;
  /* In the middle of the 6px gap the cell before leaves on its right, which is
     where the gap between two score cells above falls. */
  left: -3.5px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgb(92 107 60 / .2);
}
/* A model at the frontier: its words in bold and in ink, and larger than the
   months under the other models, as large as the second band's 15px allows, so
   the one word that matters most on the row is seen first. */
.ovw-board .cell-context-lead { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 15px; }
.ovw-board .cell-context-band { font-family: var(--mono); font-size: 13px; line-height: 1.2; }
/* The usage estimate: three small figures of a person in grey, filled one per
   step, the empty ones drawn as an outline, so fill and outline tell them apart
   rather than the two greys. Grey rather than a colour of the boards, since it
   is a rough estimate and no score. The SVG draws in currentColor. */
.ovw-board .usage-meter, .gov-pop .usage-meter { display: inline-flex; gap: 2px; }
.ovw-board .usage-step, .gov-pop .usage-step {
  display: block;
  flex: none;
  width: 10px;
  height: 12px;
  color: var(--neutral);
}
.ovw-board .usage-step-on, .gov-pop .usage-step-on { color: var(--faint); }
.gov-pop .usage-figure { display: flex; align-items: center; gap: 10px; }
.gov-pop .usage-scale { margin: 6px 0 10px; padding: 0; list-style: none; }
.gov-pop .usage-signals { margin: 8px 0 10px; padding-left: 18px; font-size: 13px; }
.gov-pop .usage-signals li { margin: 0 0 6px; }
.gov-pop .usage-signals a { font-size: 12px; }
.gov-pop .usage-scale li { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 13px; }
.ovw-board .cell-context-none { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.gov-pop .mono { font-family: var(--mono); }
.gov-pop .ovw-quote { margin: 10px 0 4px; padding-left: 12px; border-left: 3px solid var(--energy); }
/* A caveat on a company's document: under everything else, set off by a rule,
   in the popover's quiet subtitle ink. */
.gov-pop .ovw-caveat { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgb(92 107 60 / .2); }

.ovw-takeaways { margin-top: 40px; }
.ovw-takeaways h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
}
.ovw-takeaways h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--energy);
}
.ovw-takeaway-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  border-top: 1px solid rgb(92 107 60 / .2);
}
.ovw-takeaway { padding: 12px 0 14px; border-bottom: 1px solid rgb(92 107 60 / .2); }
.ovw-takeaway h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.ovw-takeaway p { margin: 0; max-width: 66ch; font-size: 14px; line-height: 1.55; }
@media (max-width: 880px) {
  .ovw-takeaway-list { grid-template-columns: 1fr; }
}
/* In the scale the key opens, a plain letter's words, after its figures. */
.ovw-scale-list .ovw-scale-words { color: var(--muted); font-size: 13px; }
/* On the overview every name is in the regular weight, the final scores and
   the overall grade included: the size and the indentation say the level. */
.ovw-board tr[data-level="0"] .row-name .head-name,
.ovw-board .ovw-overall-row .row-name .head-name { font-weight: 400; }
.ovw-board tr[data-level="1"] .row-name .head-name { font-size: 14.5px; }
.ovw-board tr[data-level="2"] .row-name .head-name { font-size: 13.5px; }
/* On the overview each company's mark and name sit centred over its column. */
.ovw-board thead .company-button { text-align: center; }
.ovw-board thead .company-mark { margin-left: auto; margin-right: auto; }
/* An overall grade is a button that keeps the band's look: no ground, no edge,
   the letter and its figure centred, the focus ring every control has. */
.ovw-board .ovw-overall-button {
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ovw-board .ovw-overall-button:hover,
.ovw-board .ovw-overall-button.is-open { background: rgb(92 107 60 / .08); }
.ovw-board .ovw-overall-button:focus-visible { outline: 2px solid var(--energy); outline-offset: -2px; }
/* The line on the overall grade at the head of a company's popover. */
.gov-pop .ovw-overall-line { margin: 0 0 10px; }
/* A scored row's scale after its name, in the data face, small and faint. */
.ovw-board .row-scale {
  margin-left: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  white-space: nowrap;
}
/* The scores of a popover, as a tree: each level a step in, each score a chip
   in the grid's colour with its name after it and its scale after that. */
.gov-pop .ovw-tree { list-style: none; margin: 6px 0 10px; padding-left: 0; }
.gov-pop .ovw-tree .ovw-tree { margin: 2px 0 4px; padding-left: 18px; }
.gov-pop .ovw-tree li { margin: 3px 0; }
.gov-pop .ovw-tree-head { display: inline-flex; align-items: center; gap: 8px; }
.gov-pop .ovw-tree li > .ovw-tree-head { margin-left: 14px; }
.gov-pop .ovw-tree-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
/* One rule between two branches of the tree. Each branch is the only fold in
 * its list item, so the popover's rule for a last fold would draw a second line
 * under every one of them. */
.gov-pop .ovw-tree details.ovw-tree-fold { border-bottom: 0; }
.gov-pop .ovw-tree li:has(> .ovw-tree-fold) { margin: 0; }
.gov-pop .ovw-tree-fold > summary::-webkit-details-marker { display: none; }
.gov-pop .ovw-tree-chip { min-width: 30px; text-align: center; font-size: 12px; }
.gov-pop .ovw-tree-name { font-size: 14px; }
.gov-pop .ovw-tree-all { margin: 2px 0 4px; }
/* The mark beside an overall grade held at F, pointing to its note. */
.ovw-board .ovw-overall-mark { margin-left: 1px; font-size: 13px; vertical-align: super; color: var(--muted); }
/* The overview's introduction in the body ink, as its takeaways are, with its
   few bold words at the weight the takeaways' titles use. */
#ovw-lede, #ovw-lede p { color: var(--ink); }
#ovw-lede strong { font-weight: 600; color: var(--ink); }
.source-entry .source-back { display: inline-block; margin: 6px 0 4px; }
/* A fold inside a section, under a smaller heading: the chevron sits level with
   the heading's words, and the heading keeps no margin of its own in the line. */
.section-fold .section-fold > summary { align-items: center; padding: 6px 0; }
.section-fold .section-fold > summary h3 { margin: 0; }
.section-fold .section-fold > summary::before { margin-bottom: 0; }
/* The methodology's folds go three deep under the section's own. Each part
   opens a step in, its body level with its heading's words, and the heading
   shrinks a step at each level, so a part reads as part of the one it sits in.
   What the folds hold that the boards' pages draw too (a scale, a table of
   checks) keeps their styles; only its spacing and its small headings are set
   here. */
#ovw-methodology .section-fold .section-fold > div { padding-left: 16px; }
#ovw-methodology .section-fold .section-fold .section-fold > summary h3 { font-size: 15px; }
#ovw-methodology .section-fold .section-fold .section-fold .section-fold > summary h3 {
  font-family: var(--ui); font-weight: 600;
}
#ovw-methodology .ovw-method-body > h3 {
  margin: 12px 0 6px; font-family: var(--ui); font-size: 14px; font-weight: 600;
}
#ovw-methodology .ovw-method-category { margin: 20px 0 8px; font-family: var(--ui); font-size: 15px; font-weight: 600; }
#ovw-methodology p.ovw-method-source { font-size: 14px; color: var(--muted); }
#ovw-methodology .ovw-method-practice { margin: 0 0 20px; }
#ovw-methodology .ovw-method-practice > p:first-child { margin-bottom: 6px; }
#ovw-methodology .ovw-method-scale { margin-bottom: 12px; }
#ovw-methodology .ovw-method-scale .anchor-level { width: 3.4em; white-space: nowrap; }
#ovw-methodology .ovw-method-behaviours li p { margin: 0 0 4px; }
#ovw-methodology .ovw-method-stops { color: var(--muted); }
#ovw-methodology .ovw-method-label { font-weight: 600; }
@media (max-width: 560px) {
  #ovw-methodology .section-fold .section-fold > div { padding-left: 8px; }
}
/* Under a source, the cells that cite it. */
.source-entry .source-cited { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.source-entry .source-cited .inline-button { font-size: 13px; }
/* The popover a final score's name opens on the overview: wide, since it
   carries a whole board's takeaways. The class is on the popover's body, which
   board.js replaces on every open, so no other popover keeps the width. On a
   phone every popover already takes the screen (the rule at 560px). */
@media (min-width: 561px) {
  .gov-pop:has(> .ovw-pop-wide) {
    width: min(720px, calc(100vw - 16px));
    max-height: min(82vh, 760px);
  }
}
.gov-pop .ovw-pop-takeaway { padding: 10px 0 2px; border-top: 1px solid rgb(92 107 60 / .2); }
.gov-pop .ovw-pop-takeaway h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.gov-pop .ovw-pop-takeaway p { max-width: 72ch; }
.gov-pop .ovw-pop-wide .ovw-pop-link { padding-top: 12px; border-top: 1px solid rgb(92 107 60 / .2); }

/* Sources reviewed, one fold per company: the company's name at the size of a
   list heading, how many sources it has beside it, and the chevron centred on
   the name rather than on a section heading's rule. */
details.source-company { border-top: 1px solid var(--hair); }
details.source-company > summary { align-items: center; gap: 10px; padding: 8px 0; }
details.source-company > summary::before { margin-bottom: 0; }
details.source-company > summary h3 { margin: 0; }
details.source-company > summary .source-company-count { color: var(--muted); font-size: 13px; }
details.source-company[open] > .source-list { margin-top: 4px; }
/* The way to /methodology, at the head of the overview's Methodology section:
   the link in the weight of a lead, so it reads as the first thing the section
   offers rather than one link among the prose's. */
#ovw-methodology .ovw-full-method-line { margin: 4px 0 18px; padding: 10px 14px;
  border-left: 3px solid var(--energy); background: rgb(183 201 75 / .12); }
#ovw-methodology a.ovw-full-method { font-weight: 600; }
/* A link that opens in its own tab: a small arrow out of a box after its last
   word, in the link's own colour, which screen readers announce as opening a
   new tab. Set by markLeaving in board.js on every link of a popover that
   leaves the page, and by hand on the few such links outside one. The arrow
   stays on the line of the word before it. */
a.leaves-page::after {
  content: "" / ", opens in a new tab";
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-left: .28em;
  vertical-align: -.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7M7 1.5h3.5V5M10.5 1.5L5.5 6.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7M7 1.5h3.5V5M10.5 1.5L5.5 6.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}