/* PSA Capital Markets. One printed sheet, ruled into bands that share their walls.
   Built to art/ref/panopticon-poster.jpg: near black ground, one phosphor green, a fine even speckle,
   hairline rules, squared caps for every label, one generated display word closing the sheet. */

@font-face {
  font-family: "Array";
  src: url("/fonts/Array-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Array";
  src: url("/fonts/Array-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tabular";
  src: url("/fonts/Tabular-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tabular";
  src: url("/fonts/Tabular-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #02040c;
  --band: #04070e;
  --sunk: #010308;
  --rule: #3c7a61;
  --rule-soft: #1e4335;
  --ink: #d6f5e4;
  --ink-dim: #8fc4a9;
  --muted: #5e9a80;
  --neon: #2ddf87;
  --still: #7fb8ab;

  --page: 1180px;
  --gutter: 20px;
  --pad: 20px;
  --row: 40px;

  --face: "Array", "Trebuchet MS", sans-serif;
  --mono: "Tabular", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --track: 0.08em;

  --t-fast: 0.08s ease;
  --t-hover: 0.18s ease;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--neon);
  color: #00130a;
}

a {
  color: var(--ink);
}

/* ---- the sheet ---------------------------------------------------------- */

.sheet {
  position: relative;
  width: min(var(--page), calc(100vw - var(--gutter) * 2));
  margin: 24px auto 40px;
  border: 1px solid var(--rule);
  background: var(--band);
  isolation: isolate;
}

/* The speckle of the poster: one even tile, painted once, under everything, never over a glyph. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/grain.png");
  background-size: 180px 180px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.sheet > * {
  position: relative;
  z-index: 1;
}

.band {
  border-bottom: 1px solid var(--rule);
}

.band:last-child {
  border-bottom: 0;
}

/* ---- head band ---------------------------------------------------------- */

.head {
  display: flex;
  align-items: stretch;
  min-height: 54px;
}

.head__name {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
  flex: 1 1 auto;
  min-width: 0;
}

.head__title {
  font-size: 20px;
  letter-spacing: var(--track);
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
  font-weight: 700;
}

.head__ticker {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--neon);
  letter-spacing: 0.04em;
}

.head__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--pad);
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* The barcode slot of the poster, carrying something real: lots scanned in each of the last 24 hours. */
.head__hours {
  display: block;
  width: 132px;
  height: 30px;
  image-rendering: pixelated;
}

/* ---- the selector ------------------------------------------------------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 var(--pad);
  border-left: 1px solid var(--rule);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: var(--track);
  transition: color var(--t-hover), background var(--t-hover);
}

.tab:first-child {
  border-left: 0;
}

.tab__n {
  font-family: var(--mono);
  color: var(--muted);
}

.tab:hover {
  color: var(--ink);
  background: #06120d;
}

.tab[aria-current="page"] {
  background: var(--neon);
  color: #001208;
}

.tab[aria-current="page"] .tab__n {
  color: #00301a;
}

/* ---- panels ------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 378px;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--rule);
}

.panel:first-child {
  border-left: 0;
}

.panel__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  letter-spacing: var(--track);
  color: var(--ink-dim);
}

.panel__strip b {
  font-weight: 600;
  color: var(--ink);
}

.panel__body {
  padding: var(--pad);
  flex: 1 1 auto;
  min-width: 0;
}

.panel__body--flush {
  padding: 0;
}

/* ---- the scan ----------------------------------------------------------- */

.scan {
  position: relative;
  flex: 1 1 auto;
  min-height: 380px;
  padding: 18px;
  background: var(--sunk);
}

.scan__canvas {
  position: absolute;
  left: 18px;
  top: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  display: block;
}

.scan__bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rule);
  pointer-events: none;
}

.scan__bracket--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.scan__bracket--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.scan__bracket--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.scan__bracket--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.scan__empty {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan__empty img {
  max-height: 320px;
  max-width: 100%;
  opacity: 0.85;
}

.caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px var(--pad) 16px;
  border-top: 1px solid var(--rule);
}

.caption__name {
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.caption__grade {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--neon);
  white-space: nowrap;
}

.caption__set {
  font-size: 16px;
  color: var(--ink-dim);
  min-width: 0;
  overflow-wrap: anywhere;
}

.caption__id {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- label / value rows ------------------------------------------------- */

.rows {
  display: block;
}

.row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--row);
  padding: 6px 0;
}

.row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-soft);
}

.row:last-child::after {
  display: none;
}

.row__k {
  font-size: 16px;
  letter-spacing: var(--track);
  color: var(--ink-dim);
  white-space: nowrap;
}

.row__v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row__v--big {
  font-size: 26px;
}

.row__v--neon {
  color: var(--neon);
}

.row__v--none {
  color: var(--muted);
  font-size: 17px;
}

/* ---- the house account -------------------------------------------------- */

.house__ticker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.house__sym {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--neon);
}

.house__state {
  font-size: 16px;
  letter-spacing: var(--track);
  color: var(--muted);
}

.mint {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--sunk);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}

.mint--empty {
  color: var(--muted);
  user-select: none;
}

.keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  background: #050c09;
  color: var(--ink);
  font-family: var(--face);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--track);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}

.key--wide {
  grid-column: 1 / -1;
}

.key__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: #000;
  object-fit: contain;
}

.key:hover {
  background: #0a1a13;
  border-color: var(--neon);
  color: var(--neon);
}

.key:active {
  transform: translateY(1px);
}

.key:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.key[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--rule-soft);
  background: var(--sunk);
  cursor: not-allowed;
  opacity: 0.74;
}

.key[aria-disabled="true"] .key__mark {
  opacity: 0.74;
}

.key[aria-disabled="true"]:hover {
  background: var(--sunk);
  border-color: var(--rule-soft);
  color: var(--muted);
}

/* ---- status strip ------------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cellv {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 var(--pad);
  border-left: 1px solid var(--rule);
  min-width: 0;
}

.cellv:first-child {
  border-left: 0;
}

.cellv__k {
  font-size: 16px;
  letter-spacing: var(--track);
  color: var(--ink-dim);
  white-space: nowrap;
}

.cellv__v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cellv__v--quiet {
  color: var(--ink);
}

/* ---- the wall ----------------------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: 1.26fr 1fr 1fr;
}

.lot {
  display: flex;
  gap: 16px;
  padding: var(--pad);
  border-left: 1px solid var(--rule);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-hover);
}

.lot:first-child {
  border-left: 0;
}

.lot:hover {
  background: #06120d;
}

.lot:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: -2px;
}

.frame {
  position: relative;
  flex: 0 0 auto;
  width: 118px;
  aspect-ratio: 5 / 7;
  background: var(--sunk);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
}

.frame--big {
  width: 142px;
}

.frame img,
.frame canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(1.08) contrast(1.12) sepia(0.55) hue-rotate(96deg) saturate(2.1);
}

.frame__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-left: 2px solid var(--neon);
  border-top: 2px solid var(--neon);
}

.frame__tag--br {
  top: auto;
  left: auto;
  bottom: 6px;
  right: 6px;
  border-left: 0;
  border-top: 0;
  border-right: 2px solid var(--neon);
  border-bottom: 2px solid var(--neon);
}

.lot__text {
  min-width: 0;
  flex: 1 1 auto;
}

.lot__name {
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}

.lot__sub {
  font-size: 16px;
  color: var(--ink-dim);
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.lot__num {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-dim);
  padding: 4px 0;
}

.lot__num::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule-soft);
}

.lot__num b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.verdict {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.verdict--take {
  border-color: var(--neon);
  color: #001208;
  background: var(--neon);
}

/* ---- tables ------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 16px;
}

.table th {
  text-align: left;
  font-family: var(--face);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--track);
  color: var(--ink-dim);
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.table td {
  padding: 11px var(--pad);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  vertical-align: top;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table tbody tr:hover td {
  background: #06120d;
}

.table a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
}

.table a:hover {
  color: var(--neon);
  text-decoration-color: var(--neon);
}

.t-name {
  font-family: var(--face);
  font-weight: 600;
  max-width: 340px;
  overflow-wrap: anywhere;
}

.t-dim {
  color: var(--ink-dim);
}

.t-neon {
  color: var(--neon);
}

.t-none {
  color: var(--muted);
}

/* ---- prose -------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-dim);
}

.prose p b,
.prose p strong {
  color: var(--ink);
  font-weight: 600;
}

.prose h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: var(--track);
  color: var(--ink);
  font-weight: 700;
}

.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.step {
  padding: 24px 28px;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}

.step:nth-child(2n + 1) {
  border-left: 0;
}

.step:nth-child(1),
.step:nth-child(2) {
  border-top: 0;
}

.step__n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  color: var(--neon);
  display: block;
  margin-bottom: 6px;
}

.step h3 {
  margin: 0 0 8px;
}

.step p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* ---- the word band ------------------------------------------------------ */

.word {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  align-items: stretch;
}

.word__mark {
  display: flex;
  align-items: center;
  padding: 26px var(--pad);
  min-width: 0;
}

.word__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.word__object {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-left: 1px solid var(--rule);
  background: var(--sunk);
}

.word__object img {
  display: block;
  max-width: 100%;
  max-height: 168px;
}

/* ---- notes, empty states ------------------------------------------------ */

.note {
  padding: var(--pad);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.note b {
  color: var(--ink);
  font-weight: 600;
}

.legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.legend__item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px var(--pad);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule-soft);
  font-size: 16px;
  color: var(--ink-dim);
  min-width: 0;
}

.legend__item:nth-child(3n + 1) {
  border-left: 0;
}

.legend__item:nth-child(1),
.legend__item:nth-child(2),
.legend__item:nth-child(3) {
  border-top: 0;
}

.legend__code {
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad);
  min-height: 58px;
  border-left: 1px solid var(--rule);
}

.field:first-child {
  border-left: 0;
}

.field input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--sunk);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  padding: 9px 14px;
}

.field input:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 1px;
}

.chart {
  display: block;
  width: 100%;
  height: 220px;
}

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

.skip:focus {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: inline-block;
  margin: 10px;
  padding: 10px 16px;
  border: 1px solid var(--neon);
  color: var(--neon);
}

/* ---- responsive. Every override lives below the base rules it overrides. -- */

@media (max-width: 1100px) {
  .split {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .word {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
}

@media (max-width: 920px) {
  :root {
    --gutter: 14px;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .panel:first-child {
    border-top: 0;
  }
  .wall {
    grid-template-columns: 1fr;
  }
  .lot {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .lot:first-child {
    border-top: 0;
  }
  .legend {
    grid-template-columns: 1fr 1fr;
  }
  .legend__item:nth-child(3n + 1) {
    border-left: 1px solid var(--rule);
  }
  .legend__item:nth-child(2n + 1) {
    border-left: 0;
  }
  .legend__item:nth-child(3) {
    border-top: 1px solid var(--rule-soft);
  }
}

@media (max-width: 760px) {
  .sheet {
    margin: 14px auto 26px;
  }
  .head {
    flex-wrap: wrap;
  }
  .head__meta {
    border-left: 0;
    border-top: 1px solid var(--rule);
    width: 100%;
    justify-content: space-between;
    padding: 10px var(--pad);
  }
  .tabs {
    grid-template-columns: 1fr 1fr;
  }
  .tab {
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }
  .tab:nth-child(2n + 1) {
    border-left: 0;
  }
  .tab:nth-child(1),
  .tab:nth-child(2) {
    border-top: 0;
  }
  .strip {
    grid-template-columns: 1fr;
  }
  .cellv {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .cellv:first-child {
    border-top: 0;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .step {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .step:nth-child(2) {
    border-top: 1px solid var(--rule);
  }
  .word {
    grid-template-columns: 1fr;
  }
  .word__object {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .legend {
    grid-template-columns: 1fr;
  }
  .legend__item {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }
  .legend__item:nth-child(2),
  .legend__item:nth-child(3) {
    border-top: 1px solid var(--rule-soft);
  }
  .legend__item:first-child {
    border-top: 0;
  }
  .table th:nth-child(n + 5),
  .table td:nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 10px;
  }
  .head__title {
    font-size: 18px;
  }
  .house__sym {
    font-size: 26px;
  }
  .keys {
    grid-template-columns: 1fr;
  }
  .lot {
    flex-wrap: wrap;
  }
  .table th:nth-child(n + 4),
  .table td:nth-child(n + 4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- added while building the first screen ------------------------------ */

.strip--4 {
  grid-template-columns: repeat(4, 1fr);
}

.strip--ruled {
  border-top: 1px solid var(--rule);
}

.cellv--stack {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

@media (max-width: 920px) {
  .strip--4 {
    grid-template-columns: 1fr 1fr;
  }
  .strip--4 .cellv {
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }
  .strip--4 .cellv:nth-child(2n + 1) {
    border-left: 0;
  }
  .strip--4 .cellv:nth-child(1),
  .strip--4 .cellv:nth-child(2) {
    border-top: 0;
  }
}

@media (max-width: 420px) {
  .strip--4 {
    grid-template-columns: 1fr;
  }
  .strip--4 .cellv {
    border-left: 0;
  }
  .strip--4 .cellv:nth-child(2) {
    border-top: 1px solid var(--rule);
  }
}

/* A filter cell is a control, not a label: it keeps the cell's shape and gains the cell's states. */
.cellv--button {
  border-top: 0;
  background: none;
  font-family: var(--face);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover);
}

.cellv--button:hover {
  background: #06120d;
}

.cellv--button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: -2px;
}

.cellv--button[aria-pressed="true"] {
  background: #08190f;
}

.cellv--button:active {
  transform: translateY(1px);
}

.verdict {
  padding: 8px 16px;
}

.mint {
  padding: 14px 16px;
}

.panel__body--house {
  padding-left: 32px;
  padding-right: 32px;
}

.legend__item {
  padding: 14px var(--pad);
}

/* ---- second pass over the audit ----------------------------------------- */

/* The four cell strip needs room for a label and a figure: two rows before it gets tight. */
@media (max-width: 1240px) {
  .strip--4 {
    grid-template-columns: 1fr 1fr;
  }
  .strip--4 .cellv {
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }
  .strip--4 .cellv:nth-child(2n + 1) {
    border-left: 0;
  }
  .strip--4 .cellv:nth-child(1),
  .strip--4 .cellv:nth-child(2) {
    border-top: 0;
  }
}

@media (max-width: 760px) {
  .head__meta {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  .head__meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .head__name {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .step {
    padding: 20px 24px;
  }
}

/* ---- third pass: the narrow widths, after every wider rule --------------- */

@media (max-width: 520px) {
  .strip--4 {
    grid-template-columns: 1fr;
  }
  .strip--4 .cellv {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .strip--4 .cellv:first-child {
    border-top: 0;
  }
  .field {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .field input {
    flex: 1 1 100%;
    width: 100%;
  }
  .table td,
  .table th {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .t-name {
    max-width: none;
  }
}

.table {
  table-layout: auto;
}

.table td {
  overflow-wrap: anywhere;
}

.lot__text {
  display: flex;
  flex-direction: column;
}

.lot__text .verdict {
  margin-top: auto;
  align-self: flex-start;
}

.word__object img {
  max-height: 232px;
}

/* ---- fourth pass: the phone ---------------------------------------------- */

.panel__strip > span:first-child {
  white-space: nowrap;
}

.panel__strip b {
  text-align: right;
  min-width: 0;
}

@media (max-width: 760px) {
  .tab:nth-child(5) {
    grid-column: 1 / -1;
  }
  .panel__strip {
    flex-wrap: wrap;
    gap: 2px 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .panel__strip b {
    text-align: left;
  }
}

/* ---- fifth pass: tables and the two column height ------------------------ */

/* A reason code is one word of the desk's vocabulary: it never breaks across lines. */
.verdict {
  white-space: nowrap;
}

/* The prose sits at the top of its panel and the figures on its bottom edge, so the panel and the
   house rail beside it end on one line instead of leaving a hole under the text. */
.panel__body {
  display: flex;
  flex-direction: column;
}

.panel__body > .rows:last-child {
  margin-top: auto;
}

/* Ten reason codes read as five complete rows, never a half empty one. */
.legend {
  grid-template-columns: 1fr 1fr;
}

.legend__item:nth-child(3n + 1) {
  border-left: 1px solid var(--rule);
}

.legend__item:nth-child(2n + 1) {
  border-left: 0;
}

.legend__item:nth-child(3) {
  border-top: 1px solid var(--rule-soft);
}

.legend__item:nth-child(1),
.legend__item:nth-child(2) {
  border-top: 0;
}

@media (max-width: 760px) {
  .legend {
    grid-template-columns: 1fr;
  }
  .legend__item {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }
  .legend__item:first-child {
    border-top: 0;
  }
  .legend__item:nth-child(2) {
    border-top: 1px solid var(--rule-soft);
  }
}

/* The figures of a panel sit on its bottom edge so the panel and the rail beside it end on one line. */
.rows--tail {
  margin-top: auto;
  padding-top: 18px;
}

.nowrap {
  white-space: nowrap;
}

/* ---- sixth pass: a long value on a narrow sheet -------------------------- */

@media (max-width: 520px) {
  .row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .row__v {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
}

/* A compartment without a numeral: the same cell, carrying a heading instead of a step. */
.steps--plain .step h3 {
  margin-bottom: 10px;
}

/* A note that is the whole body of a panel keeps the panel's padding, not its own. */
.note--flush {
  padding: 0;
  margin: 0;
  max-width: 68ch;
}

/* ---- seventh pass: a status value on a phone ---------------------------- */

@media (max-width: 520px) {
  .cellv {
    flex-wrap: wrap;
    row-gap: 2px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .cellv__v {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ---- eighth pass: every keyboard stop, not only the keys ------------------
   The selector's links were falling back to the browser's own ring, which on a near black sheet is a
   near black line nobody can see. Every focusable thing on the sheet now wears the same neon ring. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.tab:focus-visible,
.lot:focus-visible,
.cellv--button:focus-visible {
  outline-offset: -2px;
}