/* The plugin pages (/plugins/**), generated by scripts/build-plugins.mjs. Loaded after
   styles.css and prefixed ix- throughout (lm- for the landing page's own rules, at the end), so
   nothing in the design system is touched. The look is the mock's
   (design/mocks/open-index.tpl.html in the Plugindex repo): the section's bar, the crumb, the
   filing as keycaps, the amber-or-green chip, the pitch card, the siblings. No marks and no art,
   on purpose. */

.header nav a[aria-current] {
  color: var(--ink);
}

/* ---------------------------------------------------- the bar: three numbers, one search --- */

.ix-bar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.ix-bar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  min-height: 3.25rem;
  padding-block: 0.55rem;
}
.ix-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
/* On a phone the three numbers take two lines rather than clipping at the gutter. */
@media (max-width: 479.98px) {
  .ix-count {
    font-size: 0.75rem;
  }
}
.ix-count b {
  color: var(--ink);
  font-weight: 600;
}
.ix-count em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}
.ix-q {
  position: relative;
  flex: 1 1 16rem;
  max-width: 420px;
  margin-left: auto;
}
.ix-q input {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-control);
  padding: 0.45rem 0.8rem;
  -webkit-appearance: none;
  appearance: none;
}
.ix-q input::placeholder {
  color: var(--ink-faint);
}
.ix-q input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ix-hits {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  max-height: 60vh;
  overflow: auto;
}
.ix-hits li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
}
.ix-hits li a:hover,
.ix-hits li a:focus {
  background: var(--surface);
  outline: none;
}
.ix-hits li a small {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.75rem;
  white-space: nowrap;
}
.ix-hits li.none {
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
}

/* ------------------------------------------------------------------------- the pages --- */

.ix-main {
  padding-block: 2rem 3rem;
}
.ix-crumb {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.ix-crumb a {
  color: var(--ink-faint);
  text-decoration: none;
}
.ix-crumb a:hover {
  color: var(--ink);
}
.ix-crumb b {
  color: var(--ink-muted);
  font-weight: 500;
}
.ix-hero h1,
.ix-who h1 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 780;
  font-variation-settings: "wdth" 118;
  overflow-wrap: anywhere;
}
.ix-lede {
  margin: 0.9rem 0 0;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 62ch;
}
.ix-by {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 1rem;
}
.ix-by a {
  color: var(--ink-muted);
  text-underline-offset: 3px;
}
.ix-by a:hover {
  color: var(--ink);
}

/* Section headings with a count after them. */
.ix-makers h2,
.ix-group h2,
.ix-beside h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ix-makers h2 span,
.ix-group h2 span,
.ix-beside h2 span {
  margin-left: 0.6rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
}

/* The index: makers by letter. */
.ix-makers {
  margin-top: 2.5rem;
}
.ix-letter {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line-soft);
}
.ix-letter h2,
.ix-letter h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.ix-letter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.4rem 1.5rem;
}
.ix-letter li a {
  color: var(--ink);
  text-decoration: none;
}
.ix-letter li a:hover {
  color: var(--accent);
}
.ix-letter li span {
  margin-left: 0.4rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* The makers page: a row of letters that jump to each group, every one a 44px tap target. */
.ix-az {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ix-az a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-decoration: none;
}
.ix-az a:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
/* A maker's page: its plugins by category. */
.ix-group {
  margin-top: 2.25rem;
}
.ix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.5rem 1rem;
}
.ix-list li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.ix-list li a:hover {
  background: var(--surface-2);
}
.ix-list__name {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.ix-list li a small {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A heading that names a category links to its page. */
.ix-group h2 a,
.ix-beside h2 span a {
  color: inherit;
  text-decoration: none;
}
.ix-group h2 a:hover,
.ix-beside h2 span a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ix-group__note {
  margin: -0.5rem 0 1rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* A category's page: every plugin under it, name over maker, and the words a dot or a bar would
   only hint at (Unconfirmed, and the CPU word where the row was measured). Long names wrap; the
   tags drop under the name on a narrow row rather than pushing it wider than the screen. */
.ix-cat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem 1rem;
}
.ix-cat li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.7rem;
  align-items: center;
  height: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.ix-cat li a:hover {
  background: var(--surface-2);
}
.ix-cat__name {
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ix-cat__by {
  grid-column: 1;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.ix-cat__tags {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.ix-cat__tags small {
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}
.ix-cat__un {
  color: var(--ink-muted);
}
.ix-cat__un::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #d29a2c;
}
.ix-cat__cpu {
  font-weight: 650;
}
.ix-cat__cpu--light {
  color: #4fbf6b;
}
.ix-cat__cpu--medium {
  color: #d29a2c;
}
.ix-cat__cpu--heavy {
  color: #dd5a4c;
}

/* Amber until the filing has been checked against a real source, then green. */
.ix-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d29a2c;
  flex: none;
}
.ix-dot.ok {
  background: #4fbf6b;
}

/* A plugin's page. */
.ix-pg {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 859.98px) {
  .ix-pg {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.ix-rows {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  row-gap: 1.1rem;
  column-gap: 1rem;
  align-items: start;
  margin-top: 1.75rem;
}
.ix-rows .k {
  padding-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 479.98px) {
  .ix-rows {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }
  .ix-rows .k {
    padding-top: 0.9rem;
  }
}
.ix-path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 1rem;
}
.ix-path span,
.ix-path a {
  padding: 0.3rem 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.4);
}
.ix-path span.dim {
  color: var(--ink-muted);
}
/* Each category is a link to its page: the keycap stays, the accent says it goes somewhere. */
.ix-path a {
  text-decoration: none;
}
.ix-path a:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}
.ix-path i {
  color: var(--ink-faint);
  font-style: normal;
}
.ix-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.ix-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d29a2c;
  flex: none;
}
.ix-chip.ok::before {
  background: #4fbf6b;
}
.ix-chip b {
  color: var(--ink);
  font-weight: 600;
}
.ix-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}
.ix-pills li {
  display: inline-block;
  padding: 0.42em 0.85em;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  white-space: nowrap;
}
.ix-plain {
  margin: 0;
  padding-top: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.ix-plain.faint {
  color: var(--ink-faint);
}
.ix-plain a {
  color: var(--ink-muted);
  text-underline-offset: 3px;
}
.ix-plain a:hover {
  color: var(--ink);
}
/* How heavy it is (cpuRow in build-plugins.mjs): a word and a sentence first, on a bar whose scale
   is the three words, the figure under it. The bar is an SVG, sized here and filled by class (the
   CSP allows no inline style). Its three colours are the dots' green and amber and a red drawn to
   sit with them. */
.ix-cpu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.15rem;
}
.ix-cpu__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ix-cpu__meter {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 240px;
  max-width: 100%;
}
.ix-cpu__bar {
  display: block;
  width: 100%;
  height: 10px;
}
.ix-cpu__track {
  fill: var(--surface-2);
  stroke: var(--line-soft);
  stroke-width: 1;
}
.ix-cpu__tick {
  fill: var(--line);
}
.ix-cpu__fill--light {
  fill: #4fbf6b;
}
.ix-cpu__fill--medium {
  fill: #d29a2c;
}
.ix-cpu__fill--heavy {
  fill: #dd5a4c;
}
.ix-cpu__scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Level with the bar rather than the bar and its scale together. */
.ix-cpu__word {
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.ix-cpu__say {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-muted);
}
.ix-cpu__tech {
  padding-top: 0;
  max-width: 60ch;
  font-size: 0.8125rem;
}
.ix-cpu__tech b {
  font-family: var(--mono);
  font-weight: 500;
}
.ix-wrong {
  margin: 2rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.ix-wrong a {
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ix-wrong a:hover {
  color: var(--ink);
}

.ix-pitch {
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-panel);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 20px 50px -30px oklch(0.56 0.19 250 / 0.6);
}
.ix-pitch h2 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 740;
  font-variation-settings: "wdth" 112;
}
.ix-pitch h2 em {
  color: var(--accent);
  font-style: normal;
}
.ix-pitch p {
  margin: 0 0 1.2rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ix-pitch .btn {
  width: 100%;
}
.ix-pitch .fine {
  margin: 0.8rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.ix-beside {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.ix-beside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 1.5rem;
}
@media (max-width: 759.98px) {
  .ix-beside ul {
    grid-template-columns: 1fr;
  }
}
.ix-beside li a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.ix-beside li a:hover {
  background: var(--surface-2);
}
.ix-beside__name {
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.ix-beside__by {
  grid-column: 1;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.ix-beside li a .ix-dot {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ------------------------------------------------------------- measured on our Mac --- */

/* A measured plugin in a list (the measured page, the landing page): name over maker, then a
   small bar with the plugin page's thirds, the word over the figure. The SVG's lengths are its
   own attributes and its colours the classes above, since the CSP allows no inline style. */
.ix-mlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  column-gap: 2.25rem;
}
.ix-mlist li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
  height: 100%;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}
.ix-mrow__name {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ix-mrow__name small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-faint);
}
/* The category beside the maker says something only once the groups are gone. */
.ix-mrow__cat {
  display: none;
}
.ix-mflat .ix-mrow__cat {
  display: inline;
}
.ix-mlist li a:hover .ix-mrow__name {
  color: var(--accent);
}
.ix-mrow__how {
  display: grid;
  grid-template-columns: 56px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  justify-items: start;
}
/* On the measured page the word's column is as wide as "Medium", so the bars line up down a
   list that mixes the three words. */
.ix-measured .ix-mrow__how {
  grid-template-columns: 56px 4.1rem;
}
.ix-mini {
  grid-row: 1 / span 2;
  width: 56px;
  height: 6px;
}
.ix-mini__t {
  fill: var(--surface-2);
}
.ix-mini__k {
  fill: var(--bg);
}
.ix-mrow__how b {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.1;
}
.ix-mrow__how i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* How the measured rows split across the three words: one bar, its key in words. */
.ix-spread__bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 2px;
}
.ix-spread__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.ix-spread__key b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
}

/* The measured page: the spread, then the order (plugins.js shows the buttons). */
.ix-measured-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-top: 2rem;
}
.ix-measured-top .ix-spread {
  flex: 1 1 22rem;
  max-width: 40rem;
}
.ix-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ix-sort[hidden] {
  display: none;
}
.ix-sort button {
  min-height: 2.75rem;
  padding: 0 0.95rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
}
.ix-sort button:hover {
  color: var(--ink);
}
.ix-sort button[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.ix-mflat {
  margin-top: 2.25rem;
}
.ix-mflat[hidden],
.ix-mgroup[hidden] {
  display: none;
}

/* ------------------------------------------------------- the landing page, lm- prefixed --- */
/* B0's approved mock (design/plugins-landing-mock.html), built: one line of type, one sentence,
   one large search, then the lists, each under a legend on a hairline. */

.lm {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* The hero: the text on the left, the bar's numbers as a column of read-outs on the right. */
.lm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
.lm-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 800;
  font-variation-settings: "wdth" 122;
  text-wrap: balance;
}
.lm-hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.lm-sub {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  max-width: 64ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-muted);
}
.lm-facts {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.35rem;
  min-width: 15rem;
}
.lm-facts div {
  display: flex;
  flex-direction: column-reverse;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.lm-facts div:first-child {
  border-top: 0;
  padding-top: 0;
}
.lm-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
}
.lm-facts dt {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* The search, large: the bar's box and hits, with a keycap for "/" (plugins.js focuses it). */
.ix-q.lm-q {
  flex: none;
  max-width: 44rem;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}
.lm-q input {
  height: 3.5rem;
  padding: 0 3.5rem 0 1.15rem;
  font-size: 1.0625rem;
  background: var(--bg-deep);
  border-color: var(--line);
  border-radius: var(--r-control);
}
.lm-q__key {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.lm-q input:focus + .lm-q__key {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.lm-q .ix-hits li a {
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
}
.lm-q .ix-hits li a small {
  font-size: 0.8125rem;
}

/* Sections: a legend over a hairline, the way the site's panels label themselves. */
.lm-sec {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.lm-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  font-weight: 740;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 112;
}
.lm-h a {
  color: var(--ink);
  text-decoration: none;
}
.lm-h a:hover {
  color: var(--accent);
}
.lm-n {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lm-n small {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* A level meter under each row: how long the list is against the longest. */
.lm-meter {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  margin-top: 0.45rem;
}
.lm-meter__t {
  fill: var(--line-soft);
}
.lm-meter__f {
  fill: var(--accent-dim);
}
a:hover .lm-meter__f,
a:focus-visible .lm-meter__f {
  fill: var(--accent);
}

/* By what it does: the categories with 10 or more rows, largest first, read down three even
   columns. */
.lm-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.lm-cats__list li {
  break-inside: avoid;
}
.lm-cats__list a,
.lm-rows a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.75rem;
  padding: 0.6rem 0 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
.lm-cats__name,
.lm-rows__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
}
.lm-cats__list a:hover .lm-cats__name,
.lm-rows a:hover .lm-rows__name {
  color: var(--accent);
}

/* The DAW lists and the measured block side by side, 5 to 7. */
.lm-pair {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.lm-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lm-rows__m4l {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line-soft);
}

/* Measured on our Mac: the spread and the rows are the measured page's (above). */
.lm-m__how-line {
  margin: 0 0 1.25rem;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.lm-m__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2.25rem;
  margin-top: 1.6rem;
}
.lm-m__lists h3 {
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lm-m__lists h3 a {
  color: var(--ink-faint);
  text-decoration: none;
}
.lm-m__lists h3 a:hover {
  color: var(--ink);
}
.lm-m__lists .ix-mlist li:last-child a {
  border-bottom: 0;
}
.lm-more {
  margin: 1.1rem 0 0;
}
.lm-more a {
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
}
.lm-more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The pitch: a band across the page, the one filled button on it. */
.lm-pitch {
  margin-top: clamp(1rem, 3vw, 2rem);
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 var(--accent-dim);
}
.lm-pitch__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4.5vw, 3rem);
}
.lm-pitch h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  font-variation-settings: "wdth" 122;
  text-wrap: balance;
}
.lm-pitch h2 em {
  font-style: normal;
  color: var(--accent);
}
.lm-pitch__in > p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
}
.lm-pitch__go {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.lm-fine {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* The makers, one link away, and the letters that jump into the makers page. */
.lm-makers .lm-h {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.9rem;
}
.lm-az {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lm-az a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-decoration: none;
}
.lm-az a:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.ix-wrong.lm-wrong {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.lm-wrong a {
  color: var(--ink-muted);
}

/* On a desktop the letters fill the measure in one row, however many letters have makers. */
@media (min-width: 1100px) {
  .lm-az {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
  .lm-az a {
    width: auto;
  }
}
@media (max-width: 1099.98px) {
  .lm-pitch__in {
    grid-template-columns: 1fr auto;
    row-gap: 1rem;
  }
  .lm-pitch__in > p {
    grid-column: 1;
  }
  .lm-pitch__go {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
@media (max-width: 959.98px) {
  .lm-hero {
    grid-template-columns: 1fr;
  }
  .lm-facts {
    display: none;
  }
}
@media (max-width: 859.98px) {
  .lm-pair {
    grid-template-columns: 1fr;
  }
  .lm-cats__list {
    columns: 2;
    column-gap: 1.25rem;
  }
  .lm-pitch__in {
    grid-template-columns: 1fr;
  }
  .lm-pitch__go {
    grid-column: 1;
    grid-row: auto;
    align-items: stretch;
    margin-top: 0.4rem;
  }
  .lm-fine {
    text-align: center;
  }
}
/* A phone has no "/" key: the keycap goes and the placeholder gets its room (the field stays
   16px so iOS does not zoom on focus; only the hint steps down). The letters go too: the makers
   page has its own. */
@media (max-width: 599.98px) {
  .lm-hero {
    padding-block: 1.75rem 1.25rem;
  }
  .lm-q__key {
    display: none;
  }
  .lm-q input {
    height: 3.25rem;
    padding: 0 0.75rem;
  }
  .lm-q input::placeholder {
    font-size: 0.9375rem;
  }
  .lm-sec {
    padding-block: 1.4rem;
  }
  .lm-h {
    margin-bottom: 0.6rem;
  }
  .lm-m__lists {
    grid-template-columns: 1fr;
    margin-top: 1.2rem;
  }
  .lm-cats__list a,
  .lm-rows a {
    padding: 0.55rem 0 0.6rem;
  }
  .lm-cats__name,
  .lm-rows__name {
    font-size: 1rem;
  }
  .lm-az {
    display: none;
  }
  .lm-makers .lm-h {
    margin-bottom: 0;
  }
}