/* ---- /uses: the periodic table of the tools on Jason's screen ----
   One issue a month, written by scripts/build-uses.mjs from
   content/uses/<YYYY-MM>.json (DESIGN.md, "Uses"; specs/uses.md). From
   Paper's "A · Periodic table" in "Portfolio v3", page "Uses · 2026-10-03".
   From 1280px each family is a column, its cells stacked on its label and
   the columns bottom-aligned, so the table's outline rises where a family
   holds more tools. Below 1280px each family is a row that scrolls sideways.
   Counts are measured; the notes say only what the record shows. */

.uses { --uses-cell-w: 130px; --uses-cell-h: 100px; }

/* The head: the title, with the issue across from it. */
.uses-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 20px;
}
.uses-head__issue { color: var(--ink-soft); }
a.uses-head__issue {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  padding-block: 15px;
  margin-block: -15px;
}

/* One sentence under the title, then the table (2026-10-04). */
.uses-intro__lede {
  max-width: 580px;
  padding-top: 32px;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 31px;
  font-synthesis: none;
  text-wrap: pretty;
}

/* ---- The table ---- */

.uses-table { position: relative; padding-top: 64px; }

.uses-family { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uses-family__cells { display: flex; flex-direction: column; gap: 6px; list-style: none; }

/* From 1280px, layout A (Jason, 2026-10-14): a periodic table. Each family is
   a block on the grid, placed by scripts/build-uses.mjs (--col, --row, --w,
   --h), and each tool a slot in its block (--c, --r). The blocks share the
   grid's 6px gap, so their cells line up across families. */
@media (width >= 1280px) {
  .uses-grid {
    display: grid;
    /* The columns share the width, so the table meets both edges. */
    grid-template-columns: repeat(var(--uses-cols), minmax(0, 1fr));
    grid-template-rows: var(--uses-rows);
    gap: 6px;
  }
  .uses-grid > .uses-family { display: block; grid-column: var(--col) / span var(--w); grid-row: var(--row) / span var(--h); }
  .uses-grid .uses-family__cells {
    display: grid;
    grid-template-columns: repeat(var(--w), minmax(0, 1fr));
    grid-template-rows: repeat(var(--h), var(--uses-cell-h));
    gap: 6px;
  }
  .uses-grid .uses-family__cells > li { grid-column: var(--c); grid-row: var(--r); }
}
/* From 1280px a family has no label or rule under it (Jason, 2026-10-14):
   the label stays in the markup, first, for a screen reader, and shows
   again over each row below 1280px. "Left in" keeps its label. */
.uses-family__name { font-weight: 400; line-height: 14px; }
@media (width >= 1280px) {
  .uses-family:not(.uses-family--left) .uses-family__name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .uses-family--left .uses-family__name { order: 2; padding-top: 9px; }
}
.uses-family__count { display: none; color: var(--ink-soft); }

/* A cell is an element tile, painted (Jason, 2026-10-14; DESIGN.md,
   "Uses"): a watercolour wash in its family's pigment, as deep as its days,
   under a pencil outline, both from scripts/paint-uses.py. Days seen at the
   top left like an atomic number, the days agents ran it at the top right,
   and the symbol and name centred, all in ink. The paint is the cell's
   ::before, one cell of the issue's sprite set in percentages, so it fits
   the tile at any size; it runs 8px past the 130 by 100 tile, so a pool or
   a stroke can cross the edge. */
.uses { --paint: var(--paint-light); }
@media (prefers-color-scheme: dark) { .uses { --paint: var(--paint-dark); } }
.uses-cell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "days headless" "symbol symbol" "name name" "last last";
  width: 100%;
  height: var(--uses-cell-h);
  padding: 9px 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.uses-cell::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 8px of 100 and of 130: the sprite cell's margin around its tile. */
  inset: -8% -6.1538%;
  background: var(--paint) var(--paint-x) var(--paint-y) / calc(var(--paint-cols) * 100%) calc(var(--paint-rows) * 100%) no-repeat;
  pointer-events: none;
}
.uses-cell__symbol {
  grid-area: symbol;
  align-self: center;
  justify-self: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
/* Days seen, in the mono 11px; of how many is in the key. */
.uses-cell__days {
  grid-area: days;
  justify-self: start;
  font-family: var(--mono);
  font-size: var(--text-micro);
  line-height: 14px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.uses-cell__name {
  grid-area: name;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  overflow-wrap: anywhere;
}
/* A domain never breaks: a long one (gemini.google.com) steps down a size. */
.uses-cell--web .uses-cell__name { overflow-wrap: normal; white-space: nowrap; }
.uses-cell__name--long { font-size: 11.5px; letter-spacing: -0.01em; }

/* The days agents ran it, at the top right and never added to days seen.
   Its place says what it is (2026-10-14), so it has no mark. */
.uses-cell__headless {
  grid-area: headless;
  justify-self: end;
  font-family: var(--mono);
  font-size: var(--text-micro);
  line-height: 14px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* A command-line tool: its name as the command, at a prompt, with no
   cursor (Jason, 2026-10-14). */
.uses-cell__command { font-family: var(--mono); font-size: 12px; letter-spacing: 0; white-space: nowrap; }

/* Faceless: a pool of paint with no outline, so its days sit in from the
   corner, on the paint. */
.uses-cell--faceless .uses-cell__days { margin: 7px 0 0 12px; }

/* Menu bar: always on, rarely open. A painted strip at the top of its slot
   holds the days around at the left and the name; the rest of the slot is
   paper inside the pencil outline (Jason, 2026-10-14). No symbol: "Menu bar"
   is in the cell's name and on its card. */
.uses-cell--ambient {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 22px;
  grid-template-areas: "days name";
  align-items: center;
  column-gap: 7px;
  padding: 0 8px 12px;
  text-align: left;
}
.uses-cell--ambient .uses-cell__symbol { display: none; }
.uses-cell--ambient .uses-cell__name { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uses-cell--ambient .uses-cell__days { letter-spacing: 0.02em; }

/* Left: a pencil outline alone, struck, in soft ink, with the day it was
   last seen under the name. */
.uses-cell--left { color: var(--ink-soft); }
.uses-cell--left .uses-cell__name { text-decoration: line-through 1px; }
.uses-cell__last { grid-area: last; margin-top: 2px; line-height: 14px; }

/* The open cell takes a 2px ink frame over its paint, and the card's notch
   from 1280px; the focus ring sits 3px further out. */
.uses-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.uses-cell[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .uses-cell:hover .uses-cell__name { text-decoration-line: underline; text-underline-offset: 3px; }
  .uses-cell--left:hover .uses-cell__name { text-decoration-line: line-through underline; }
}

/* The key leads the table in the markup, so a phone meets it before the
   rows (2026-10-04). From 1280px the table is a grid that sets it under the
   columns on About's 392px column, across from the tools that left. */
@media (width >= 1280px) {
  .uses-table { display: grid; grid-template-columns: 392px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .uses-table > .uses-grid { grid-row: 1; grid-column: 1 / -1; }
  .uses-table > .uses-keybox { grid-row: 2; grid-column: 1; margin-top: 40px; }
  /* Spanning both rows, so How this is counted sits right under the key,
     open or closed. */
  .uses-table > .uses-family--left { grid-row: 2 / span 2; grid-column: 2; justify-self: end; margin-top: 40px; }
  .uses-table > .uses-method { grid-row: 3; grid-column: 1; }
  .uses-table > .uses-notes { grid-row: 4; grid-column: 1 / -1; }
}
.uses-key { width: 100%; max-width: 392px; }

/* The page's two disclosures share one style (2026-10-04): the key, open
   by default and dismissable, and How this is counted under it, closed, in
   three sentences (the full method lives in specs/uses.md). Each is a
   native details, so the summary is a keyboard and screen-reader control
   with no script; uses.js only remembers whether the key was closed. */
.uses-disclosure { max-width: 392px; }
.uses-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.uses-disclosure summary::-webkit-details-marker { display: none; }
.uses-disclosure summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.uses-disclosure[open] .uses-disclosure__mark { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) {
  .uses-disclosure summary:hover { text-decoration-thickness: 2px; }
}
.uses-keybox[open] summary { margin-bottom: 4px; }
.uses-method { margin-top: 12px; }
.uses-method p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 22px; text-wrap: pretty; }
.uses-key div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
  line-height: 14px;
}
.uses-key div:last-child { border-bottom: 1px solid var(--line); }
.uses-key dt { flex: none; width: 72px; }
.uses-key dd { color: var(--ink-soft); }
.uses-key__box {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px solid var(--line);
}
/* The menu-bar strip over its slot, and a faceless tool's pool. */
.uses-key__box--strip { height: 5px; vertical-align: 1px; }
.uses-key__pool {
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-right: 8px;
  vertical-align: -1px;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.uses-family--left { --uses-cell-w: 130px; min-width: 0; max-width: calc(6 * 130px + 5 * 6px); }
.uses-family--left .uses-family__cells { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.uses-family--left .uses-family__cells > li { width: var(--uses-cell-w); }

/* ---- A tool's card ----
   Without uses.js every card shows, in a list under the table, and each cell
   links to its card. uses.js turns the cells into buttons and shows one card
   at a time: over the table from 1280px, pointing at its cell, and under the
   cell's row below that. */

.uses-notes { padding-top: 64px; }
.uses-notes__title {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.uses-notes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 20px;
  list-style: none;
}

.uses-note {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.uses-note:focus { outline: none; }
.uses-note:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.uses-note__head { display: flex; align-items: baseline; gap: 14px; }
.uses-note__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.uses-note__family { flex: 1; color: var(--ink-soft); }
.uses-note__close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-block: -15px;
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.uses-note__close[hidden] { display: none; }
.uses-note__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .uses-note__close:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.uses-note__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-block: 8px;
  border-block: 1px solid var(--line);
  color: var(--ink-soft);
  line-height: 14px;
}
.uses-note__status { color: var(--ink); }
/* What the agents' records add: sessions by week, MCP calls, headless runs. */
.uses-note__records { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; line-height: 14px; }
.uses-note__records div { display: flex; gap: 16px; }
.uses-note__records dt { flex: none; width: 72px; color: var(--ink-soft); }
.uses-note__weeks { display: flex; flex-wrap: wrap; gap: 2px 14px; font-variant-numeric: tabular-nums; }
.uses-note__note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
}
.uses-note__note .micro { color: var(--ink-soft); line-height: 14px; }
/* The two voices: "Measured" leads the counts, "Jason" his own note. */
.uses-voice { color: var(--ink); }
.uses-note__facts .uses-voice { margin-right: -8px; }
.uses-move__facts .uses-voice { margin-right: 4px; }
.uses-move__note .uses-voice { margin-right: 6px; color: var(--ink-soft); }
.uses-note__note p:not(.micro) {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 27px;
  font-synthesis: none;
  text-wrap: pretty;
}
.uses-note__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.uses-note__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* With uses.js: one card at a time, and the list stays out of sight. */
.uses-live .uses-notes { display: none; }
.uses-note--float {
  position: absolute;
  z-index: 2;
  width: min(540px, 100%);
}
/* The notch: a 6px ink tick from the card's edge to its cell. */
.uses-note--float::after {
  content: "";
  position: absolute;
  left: var(--notch, 50%);
  width: 1px;
  height: 6px;
  background: var(--ink);
}
.uses-note--float[data-side="above"]::after { top: 100%; }
.uses-note--float[data-side="below"]::after { bottom: 100%; }

/* ---- The issue's recap ----
   What joined, what left, the top of the table, the notes, and the issues.
   Rows on About's columns, between hairlines. */

.uses-recap { padding-top: 96px; }
.uses-recap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.uses-recap__head .micro { color: var(--ink-soft); }
.uses-recap__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.uses-row {
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  gap: 12px 56px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--line);
}
.uses-row__label { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.uses-row__label h3 { font-weight: 400; line-height: 14px; }
.uses-row__label p { max-width: 340px; color: var(--ink-soft); font-size: 15px; line-height: 22px; text-wrap: pretty; }
.uses-row__body { max-width: 760px; }
.uses-row__empty,
.uses-recap__notes p {
  max-width: 580px;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 27px;
  font-synthesis: none;
  text-wrap: pretty;
}
.uses-row__empty { color: var(--ink-soft); }
.uses-recap__notes { list-style: none; }
.uses-recap__notes li + li { margin-top: 12px; }

.uses-moves { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.uses-move { display: flex; align-items: flex-start; gap: 16px; }
.uses-move__body { display: flex; flex-direction: column; gap: 6px; max-width: 580px; }
.uses-move__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.uses-move__facts { color: var(--ink-soft); line-height: 16px; }
.uses-move__note {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 27px;
  font-synthesis: none;
  text-wrap: pretty;
}

/* A symbol as a chip: a link to the tool's card. Its case is the symbol's. */
.uses-chip {
  position: relative;
  flex: none;
  display: inline-block;
  min-width: 34px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  line-height: 14px;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
}
a.uses-chip::after { content: ""; position: absolute; inset: -10px -5px; }
a.uses-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.uses-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

.uses-board { width: 100%; max-width: 580px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.uses-board th,
.uses-board td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; }
.uses-board thead th { padding-top: 0; color: var(--ink-soft); line-height: 14px; }
.uses-board th:nth-child(2),
.uses-board td:nth-child(2) { text-align: left; }
.uses-board :is(th, td):first-child { width: 56px; text-align: left; }
.uses-board tbody th { text-align: left; font-size: 15px; font-weight: 500; line-height: 20px; }
.uses-board tbody td { font-family: var(--mono); font-size: 13px; }
.uses-board tbody tr:last-child :is(th, td) { border-bottom: 0; }
.uses-board__tool { display: inline-flex; align-items: center; gap: 12px; min-height: 28px; text-decoration: none; }
.uses-board__tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .uses-board__tool:hover { text-decoration: underline; text-underline-offset: 3px; }
}

.uses-issues { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; }
.uses-issues a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.uses-issues a[aria-current] { text-decoration-thickness: 2px; }
.uses-issues a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- Narrower: the intro stacks, lede first ---- */
@media (width < 1100px) {
  .uses-row { grid-template-columns: 300px minmax(0, 1fr); gap: 12px 40px; }
}

/* ---- Below 1280px each family is a row ---- */
@media (width < 1280px) {
  .uses-table { padding-top: 40px; }
  .uses-grid { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .uses-family__name {
    order: 0;
    display: flex;
    justify-content: space-between;
    padding-top: 0;
    border-top: 0;
  }
  .uses-family__count { display: inline; }
  /* The row runs off the right edge and scrolls; the page never does. */
  .uses-family__cells {
    flex-direction: row;
    overflow-x: auto;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    padding-block: 4px;
    margin-block: -4px;
    padding-left: 4px;
    margin-left: -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .uses-family__cells > li { flex: none; width: var(--uses-cell-w); }
  .uses-keybox { margin-bottom: 24px; }
  .uses-family--left { width: 100%; max-width: none; margin-top: 32px; }
  .uses-family--left .uses-family__cells { flex-wrap: nowrap; justify-content: flex-start; }
  .uses-note--float { position: static; width: auto; }
}

@media (width < 800px) {
  .uses-row { grid-template-columns: minmax(0, 1fr); padding: 20px 0 24px; }
  .uses-row__label p { max-width: none; }
  .uses-recap { padding-top: 64px; }
  .uses-notes { padding-top: 48px; }
}

@media (width < 600px) {
  /* Three cells and part of a fourth at any phone width, so a row always
     shows it scrolls: 84px at 320, 96px from about 360. */
  .uses { --uses-cell-w: clamp(84px, calc((100vw - var(--gutter)) / 3.4 - 6px), 96px); --uses-cell-h: 72px; }
  .uses-intro__lede { padding-top: 20px; font-size: 19px; line-height: 28px; }
  .uses-cell { padding: 7px 7px 9px; }
  .uses-cell__symbol { font-size: 22px; line-height: 24px; letter-spacing: 0; }
  .uses-cell--faceless .uses-cell__days { margin: 3px 0 0 7px; }
  /* One line, 11.5px. Long names end in an ellipsis rather than shrinking
     below a readable size; the accessible name and card keep them whole. */
  .uses-cell__name { font-size: 11.5px; line-height: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .uses-cell__command { font-size: 10.5px; }
  /* A left tool's date goes; the card keeps it. */
  .uses-cell--left .uses-cell__last { display: none; }
  /* The strip is 22px of a 72px slot: its name and days stay on it. */
  .uses-cell--ambient { padding: 0 6px 8px; column-gap: 5px; }
  .uses-note { padding: 16px; gap: 12px; }
  .uses-note__name { font-size: 22px; line-height: 26px; }
  .uses-note__head { flex-wrap: wrap; }
  .uses-recap__title { font-size: 22px; line-height: 26px; }
  .uses-move__name { font-size: 19px; line-height: 23px; }
  .uses-board tbody th { font-size: 14px; }
  .uses-board :is(th, td):first-child { width: 40px; }
  .uses-board__tool .uses-chip { display: none; }
}