.col-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}
.col-swatch-i {
  margin: 0;
  width: 74px;
}
.col-swatch {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #00000014;
  background: var(--surface-2);
}
.col-swatch.empty {
  background: repeating-linear-gradient(
    45deg,
    var(--surface-2),
    var(--surface-2) 5px,
    var(--surface-3) 5px,
    var(--surface-3) 10px
  );
}
.col-swatch-i figcaption {
  margin-top: 6px;
  line-height: 1.3;
}
.col-swatch-i figcaption b {
  display: block;
  font-size: 12.5px;
  font-weight: 540;
  color: var(--text-primary);
}
.col-swatch-i figcaption span {
  display: block;
  word-break: break-all;
}
.col-swatch-i.missing figcaption b {
  color: var(--text-muted);
}
.col-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 18px;
}
.col-head {
  font-family: var(--serif, var(--sans));
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.col-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 12px;
}
.col-axes .pill {
  cursor: help;
}
.col-axes .pill .mono {
  margin-left: 4px;
  opacity: 0.75;
}
.col-read {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 8px;
  max-width: 74ch;
}
.col-locked {
  position: relative;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 12px;
  overflow: hidden;
}
.col-locked .blurred {
  filter: blur(9px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.col-locked .col-head {
  margin-bottom: 10px;
}
.pal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.pal-item {
  min-width: 0;
}
.pal-item i {
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #00000014;
}
.pal-item b {
  display: block;
  margin-top: 5px;
  font-weight: 540;
  color: var(--text-primary);
  line-height: 1.25;
}
.pal-item span {
  display: block;
  line-height: 1.2;
}
.pal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
}
.pal-chip i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #00000014;
  flex: none;
}
.pal-chip .mono {
  font-size: 11px;
}
.col-note {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 14px;
}
.col-note.caveats {
  background: var(--surface-2);
  border-color: transparent;
}
.col-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.col-cols .col-note {
  margin: 0 0 14px;
}
.col-caveats {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.col-caveats li {
  color: var(--text-secondary);
  line-height: 1.5;
}
@media (max-width: 560px) {
  .col-swatches {
    gap: 10px;
  }
  .col-swatch-i {
    width: 64px;
  }
  .col-swatch {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .pal-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }
  .pal-item i {
    height: 40px;
  }
  .col-card,
  .col-note,
  .col-locked {
    padding: 16px;
  }
  .pal-chip .mono {
    display: none;
  }
}
@media print {
  .col-swatch,
  .pal-item i,
  .pal-chip i,
  .col-swatches,
  .pal-grid,
  .pal-row,
  .col-card,
  .col-note {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .col-card,
  .col-note,
  .col-locked {
    break-inside: avoid;
    box-shadow: none;
    border-color: #ddd;
  }
  .pal-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .col-head {
    font-size: 24pt;
  }
}
.col-formulas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.col-formula {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  display: grid;
  gap: 4px;
}
.col-formula b {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: var(--tone);
}
.views-intro {
  max-width: 82ch;
  margin: 0 0 18px;
}
.views-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.view-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
  min-width: 0;
}
.view-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
}
.view-thumb.empty {
  background: repeating-linear-gradient(
    45deg,
    var(--surface-2),
    var(--surface-2) 6px,
    var(--surface-3) 6px,
    var(--surface-3) 12px
  );
}
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
}
.view-head b {
  font-size: 15px;
  font-weight: 560;
  color: var(--text-primary);
}
.view-note {
  margin: 2px 0 8px;
  line-height: 1.45;
}
.view-cav {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.45;
}
.view-reads {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.views-lock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.view-lock {
  margin: 0;
  min-width: 0;
}
.view-lock .view-thumb-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.view-lock figcaption {
  margin-top: 6px;
  line-height: 1.3;
}
.view-lock figcaption b {
  display: block;
  font-size: 13px;
  font-weight: 540;
  color: var(--text-primary);
}
.view-lock figcaption span {
  display: block;
}
.read-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.read-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line-soft);
}
.read-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.read-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.read-h .pill.verdict,
.read-tags .pill {
  white-space: normal;
  max-width: 100%;
  text-align: left;
}
.read-h b {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-primary);
}
.read-t {
  margin: 0;
  line-height: 1.55;
  color: var(--text-secondary);
}
.read-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.read-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  cursor: help;
}
.metrics .read-block,
.region-body .read-block {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
}
.ear-headline {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.ear-headline b {
  font-size: 15.5px;
  color: var(--text-primary);
}
.ear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ear-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 0;
}
.ear-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ear-h b {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-primary);
}
.ear-val {
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-primary);
}
.ear-val small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0;
}
.ear-why {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0 0;
}
.ear-plan {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.ear-plan-item {
  border-left: 2px solid var(--tone);
  padding-left: 12px;
}
.ear-plan-item b {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--text-primary);
}
@media (max-width: 560px) {
  .views-grid {
    grid-template-columns: 1fr;
  }
  .views-lock-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
  }
  .view-card,
  .ear-card,
  .ear-why,
  .ear-headline {
    padding: 12px 14px;
  }
  .ear-val {
    font-size: 19px;
  }
}
@media print {
  .views-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ear-grid {
    grid-template-columns: 1fr 1fr;
  }
  .view-card,
  .ear-card,
  .read-row,
  .ear-plan-item,
  .ear-why,
  .ear-headline {
    break-inside: avoid;
  }
  .view-card,
  .ear-card {
    box-shadow: none;
    border-color: #ddd;
  }
  .view-thumb {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    max-height: 70mm;
  }
  .read-tag {
    border-color: #ccc;
  }
}
.ear-ask {
  margin: 12px 0 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
@keyframes slotflash {
  0%,
  to {
    box-shadow: 0 0 #2f6f5200;
  }
  30%,
  70% {
    box-shadow: 0 0 0 4px #2f6f5259;
  }
}
.slot.flash {
  animation: slotflash 2.2s ease;
}
.read-notes {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.read-notes p {
  margin: 0 0 5px;
  line-height: 1.45;
}
.read-notes p:last-child {
  margin-bottom: 0;
}
.read-notes b {
  color: var(--text-secondary);
  font-weight: 600;
}
.blem-intro {
  max-width: 82ch;
  margin: 0 0 16px;
}
.blemish-map {
  position: relative;
  margin: 0 0 10px;
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.blemish-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blemish-map .blem-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.blemish-map .blem-svg circle {
  opacity: 0.92;
}
.blemish-map.empty {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  aspect-ratio: auto;
  background: repeating-linear-gradient(
    45deg,
    var(--surface-2),
    var(--surface-2) 6px,
    var(--surface-3) 6px,
    var(--surface-3) 12px
  );
}
.blemish-map.empty p {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 12px 14px;
}
.blemish-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 0 0 6px;
}
.blem-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.blem-key i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: inline-block;
  flex: none;
}
.blem-map-note {
  margin: 0 0 18px;
  max-width: 74ch;
}
.blem-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
}
.blem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}
.blem-table caption {
  caption-side: bottom;
  text-align: left;
  padding: 8px 0 0;
  max-width: 80ch;
}
.blem-table th,
.blem-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.blem-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.blem-table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary);
  white-space: normal;
}
.blem-table td.mono {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.blem-table td.strong {
  color: var(--text-primary);
  font-weight: 560;
}
.blem-table td.src {
  text-align: left;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
}
.blem-table td .z {
  color: var(--text-faint);
}
.blem-table tr.hot th[scope="row"] {
  color: var(--rust);
}
.blem-table tr.hot .pill {
  margin-left: 4px;
  vertical-align: 1px;
}
.blem-table tr.off th[scope="row"],
.blem-table tr.off td {
  color: var(--text-faint);
}
.blem-table tfoot th,
.blem-table tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-top: 8px;
  color: var(--text-primary);
}
.blem-reads {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 18px;
}
.blem-read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}
.blem-read:first-child {
  border-top: 0;
  padding-top: 0;
}
.blem-read-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.blem-read-h b {
  font-size: 14px;
  font-weight: 560;
  color: var(--text-primary);
}
.blem-read-t {
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 80ch;
}
.blem-read-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.blem-read-tags .read-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  cursor: help;
}
.blem-consistency,
.blem-caveats {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 12px;
}
.blem-caveats ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
}
.blem-caveats li {
  margin: 0 0 5px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .blemish-map {
    max-width: 100%;
  }
  .blem-table {
    font-size: 12px;
    min-width: 460px;
  }
  .blem-consistency,
  .blem-caveats {
    padding: 12px 14px;
  }
}
@media print {
  .blemish-map {
    max-width: 70mm;
    break-inside: avoid;
    border-color: #ddd;
  }
  .blemish-map img,
  .blemish-map .blem-svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .blem-table-wrap {
    overflow: visible;
  }
  .blem-table {
    min-width: 0;
    font-size: 10.5pt;
  }
  .blem-table,
  .blem-read,
  .blem-consistency,
  .blem-caveats {
    break-inside: avoid;
  }
  .blem-table th,
  .blem-table td {
    border-color: #ddd;
  }
  .blem-read-tags .read-tag {
    border-color: #ccc;
  }
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 6px;
}
.feat-grid-note {
  margin: 8px 0 0;
}
.feat-tile {
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
  break-inside: avoid;
}
.feat-tile.wide {
  grid-column: span 2;
}
.feat-tile.wide.points-tile {
  grid-column: 1/-1;
  max-width: 100%;
  justify-self: stretch;
}
.feat-tile.points-tile svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.feat-img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: var(--bg);
  border-radius: 10px;
}
.feat-img.empty {
  background: repeating-linear-gradient(
    45deg,
    var(--surface-2),
    var(--surface-2) 6px,
    var(--surface-3) 6px,
    var(--surface-3) 12px
  );
}
.feat-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
}
.feat-tile figcaption b {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-primary);
  line-height: 1.25;
}
.feat-note {
  line-height: 1.35;
  margin-top: 2px;
}
.feat-sub-long {
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 3px;
  max-width: 76ch;
}
.shape-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 20px;
  break-inside: avoid;
}
.shape-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.shape-word {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 2px 0 4px;
}
.shape-hint {
  color: var(--tone);
  margin-top: 6px;
}
.shape-figure {
  position: relative;
  flex: 0 0 auto;
  width: min(220px, 42vw);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}
.shape-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.shape-figure .shape-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* six cells inside a 570px column gave 86px each and wrapped "chin width / jaw width" down ten
   lines. The old 2/3/6 steps keyed off the WINDOW, which is twice the width of the column the
   card actually sits in; auto-fit keys off the column. */
.shape-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}
.shape-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.shape-cell b {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-primary);
}
.shape-bucket {
  color: var(--tone);
}
.shape-text {
  margin: 0 0 10px;
  line-height: 1.55;
}
.shape-caveat {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.45;
}

.dim-block {
  display: grid;
  gap: 14px;
}
.dim-plain {
  border-left: 3px solid var(--tone);
  padding: 2px 0 2px 14px;
  margin: 0 0 4px;
}
.dim-plain-lead {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.4;
  max-width: 56ch;
}
.dim-plain p.small {
  margin: 0 0 5px;
  max-width: 70ch;
}
@media (max-width: 700px) {
  .dim-plain-lead {
    font-size: 16.5px;
  }
}
.h3-sub {
  font-weight: 400;
  color: var(--text-secondary);
}
@media (max-width: 700px) {
  .h3-sub {
    display: none;
  }
}
.dim-intro {
  margin: 0;
  max-width: 82ch;
  line-height: 1.55;
}
.dim-overall {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.dim-overall > div:last-child {
  flex: 1 1 320px;
  min-width: 0;
}
.dim-overall-num {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  color: var(--text-primary);
}
.dim-overall-num small {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 2px;
}
.dim-region {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.dim-region-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.dim-region-h b {
  font-size: 14px;
  font-weight: 560;
  color: var(--text-primary);
}
.dim-row {
  display: grid;
  grid-template-columns: 160px 1fr 64px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  break-inside: avoid;
}
.dim-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dim-label b {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-primary);
  line-height: 1.25;
}
.dim-bar {
  min-width: 0;
}
.dim-track {
  position: relative;
  height: 2px;
  background: var(--surface-3);
  border-radius: 2px;
  margin: 9px 0 5px;
}
.dim-tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 10px;
  background: var(--line);
  transform: translate(-0.5px);
}
.dim-ci {
  position: absolute;
  top: -2px;
  height: 6px;
  background: var(--surface-4);
  border-radius: 3px;
  opacity: 0.75;
}
.dim-mark {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 12px;
  background: var(--accent);
  border-radius: 2px;
  transform: translate(-1.5px);
}
.dim-mark.t-ok {
  background: var(--good);
}
.dim-mark.t-wr {
  background: var(--warn);
}
.dim-mark.t-no {
  background: var(--crit);
}
.dim-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.25;
}
.dim-ends span {
  max-width: 48%;
}
.dim-ends span:last-child {
  text-align: right;
}
.dim-val {
  font-size: 15px;
  text-align: right;
  color: var(--text-primary);
  line-height: 1.15;
}
.dim-val small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.dim-text {
  grid-column: 1/-1;
  margin: 2px 0 0;
  line-height: 1.5;
  color: var(--text-secondary);
}
.dim-empty {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0;
  line-height: 1.55;
}
.dim-skipped {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 16px;
}
.dim-skipped summary {
  cursor: pointer;
  color: var(--text-secondary);
}
.dim-skipped ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
}
.dim-refs {
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .dim-row {
    grid-template-columns: 1fr 56px;
    grid-template-areas: "label val" "bar bar" "text text";
  }
  .dim-label {
    grid-area: label;
  }
  .dim-bar {
    grid-area: bar;
  }
  .dim-val {
    grid-area: val;
  }
  .dim-text {
    grid-area: text;
  }
}
.brow-guide {
  display: grid;
  gap: 12px;
}
.brow-img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.brow-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.brow-side {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}
.brow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.brow-note {
  margin: 0;
  line-height: 1.45;
}
.mirror-block {
  display: grid;
  gap: 12px;
}
.mirror-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mirror-grid .feat-img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.mirror-text {
  margin: 0;
  line-height: 1.55;
  max-width: 82ch;
}
.mirror-note {
  margin: 0;
  line-height: 1.45;
  max-width: 82ch;
}
@media (max-width: 560px) {
  .mirror-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}
@media print {
  .feat-tile,
  .shape-card,
  .brow-side,
  .dim-overall,
  .dim-skipped,
  .dim-empty {
    background: #fff;
    border-color: #ddd;
    box-shadow: none;
  }
  .feat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .mirror-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dim-row,
  .feat-tile,
  .brow-guide {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .shape-card,
  .mirror-block {
    break-inside: auto;
    page-break-inside: auto;
  }
  .shape-figure,
  .mirror-block figure,
  .shape-card h3 {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .dim-skipped[open] summary ~ * {
    display: block;
  }
  .dim-track {
    background: #ccc;
  }
  .dim-mark {
    background: #000;
  }
  .dim-ci {
    background: #bbb;
  }
  .shape-word {
    font-size: 36px;
  }
}
.feat-tile.wide .feat-img {
  aspect-ratio: auto;
  height: auto;
  max-height: 420px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: var(--bg);
  margin-inline: auto;
  display: block;
}
@media (max-width: 640px) {
  .feat-tile.wide .feat-img {
    max-height: 300px;
  }
}
.feat-grid.one {
  grid-template-columns: minmax(0, 1fr);
}
.pill.grade {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 11px;
  padding: 2px 7px;
}
.pill.p-ac.grade {
  background: var(--accent);
  border-color: var(--accent);
}
.verdict-card,
.region .verdict:not(.pill) {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 18px;
}
.verdict .vd-head h3 {
  margin: 2px 0 14px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
}
.vd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 900px) {
  .vd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vd-score {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.vd-score > div:last-child {
  padding-top: 2px;
}
.vd-lede {
  max-width: 52ch;
  margin-top: 6px;
  line-height: 1.55;
}
.vd-why {
  margin-top: 8px;
}
.vd-why summary {
  cursor: pointer;
}
.vd-num {
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.vd-num small {
  font-size: 18px;
  color: var(--text-muted);
  margin-left: 2px;
}
.vd-grade {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 17px;
  margin-bottom: 3px;
}
.vd-scale {
  font-weight: 400;
  line-height: 1.3;
}
/* the letters laid on the population: one bar, four bands, a mark for the reader */
.vd-legend {
  margin: 18px 0 4px;
  max-width: 52ch;
}
.vd-lgbar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 12px;
}
.vd-lg {
  display: block;
  min-width: 3px;
  border-radius: 3px;
  background: var(--surface-2, rgba(0, 0, 0, 0.06));
}
.vd-lg-f {
  background: rgba(190, 70, 60, 0.28);
}
.vd-lg-c {
  background: rgba(214, 150, 40, 0.3);
}
.vd-lg-b {
  background: rgba(70, 140, 110, 0.26);
}
.vd-lg-a {
  background: rgba(40, 110, 90, 0.5);
}
.vd-lglab {
  display: flex;
  gap: 2px;
  margin-top: 5px;
  font: 600 11px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.vd-lglab span {
  min-width: 0;
  white-space: nowrap;
}
.vd-lglab span:nth-child(2) {
  text-align: center;
}
.vd-lglab small {
  font-weight: 400;
  font-size: 10px;
  color: var(--text-muted);
}
.vd-you {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink, #17171a);
  border-radius: 1px;
}
.vd-you::after {
  content: "you";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 9.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #17171a);
}
@media (max-width: 560px) {
  .vd-lglab small {
    display: none;
  }
}
/* the share card */
.vd-docket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-3, 14px);
  background: var(--surface-1);
}
.vd-docket > span {
  flex: 1 1 26ch;
  line-height: 1.4;
}
.vd-docket #docket-out {
  flex-basis: 100%;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.docket-img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(23, 23, 26, 0.16);
}
.docket-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.vd-comps {
  display: grid;
  gap: 8px;
  margin: 6px 0 4px;
}
.vd-comp {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 34px auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.vd-comp .vd-cl {
  color: var(--text-secondary);
}
.vd-comp .vd-cl small {
  margin-left: 4px;
}
.vd-bar {
  display: block;
  height: 8px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
}
.vd-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
}
.vd-bar i.t-ok {
  background: var(--good);
}
.vd-bar i.t-ac {
  background: var(--accent);
}
.vd-bar i.t-in {
  background: var(--accent-2);
}
.vd-bar i.t-wr {
  background: var(--warn);
}
.vd-bar i.t-no {
  background: var(--crit);
}
.vd-cv {
  text-align: right;
  font-size: 12px;
}
.vd-dim {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.vd-dim-h {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
}
.vd-dim .vd-num {
  font-size: 26px !important;
}
.vd-shape b {
  font-size: 20px !important;
}
.vd-track {
  margin: 12px 0 14px;
}
.vd-track .dim-tick:after {
  content: attr(data-l);
  position: absolute;
  top: 12px;
  left: -14px;
  font: 10px var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vd-shape {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.vd-shape b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}
.vd-right {
  display: grid;
  gap: 14px;
}
.vd-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 6px;
}
.vd-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.vd-list .vd-fix {
  color: var(--text-muted);
  font-size: 12.5px;
}
.vd-first {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
}
.vd-first .kicker {
  color: #cfc9bd;
}
.vd-ol {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
}
.vd-ol li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
}
.vd-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 600 12px var(--mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.vd-method {
  margin: 14px 0 0;
  max-width: 100ch;
}
.vd-method summary {
  cursor: pointer;
}
.verdict {
  margin: 18px 0;
}
.calls {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}
.calls-standing {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
}
.calls-standing.good {
  border-left-color: var(--good);
}
.calls-standing p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  max-width: 64ch;
}
.cs-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cs {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.cs b {
  font-size: 14px;
  color: var(--text-primary);
}
.cs.t-ok b {
  color: var(--good);
}
.cs.t-wr b {
  color: var(--warn);
}
.cs.t-in b {
  color: var(--accent-2);
}
@media (max-width: 700px) {
  .calls-standing p {
    font-size: 15px;
  }
}
.call {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-1);
}
.call.t-no {
  border-left-color: var(--crit);
}
.call.t-wr {
  border-left-color: var(--warn);
}
.call.t-ok {
  border-left-color: var(--good);
}
.call-h {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.call-area {
  font: 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.call-h b {
  font-size: 16px;
  font-weight: 560;
}
.call-why {
  margin: 6px 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
}
.call-do {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
}
.call-do ul {
  margin: 0;
  padding-left: 16px;
}
.call-do.avoid {
  margin-top: 4px;
  color: var(--text-muted);
}
.region-h .pill.grade {
  margin-left: 6px;
}
.blem-headline {
  border: 1px solid var(--line);
  border-left: 4px solid var(--crit);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  background: var(--surface-1);
  font-size: 14px;
}
.slot .slot-mirror {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.call .cite {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.refcard {
  margin-top: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}
.refcard.open {
  border-color: var(--ok, #2f6f52);
}
.refcard .refc-h {
  font-size: 15px;
}
.refcard .refc-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.refc-code {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.18em;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
#results.teaser .locked #ref-card,
#results.teaser #ref-card {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 4;
}
#ref-card:empty {
  display: none;
}
.vd-hidden {
  color: var(--text-muted);
  opacity: 0.55;
  letter-spacing: 0.06em;
}
.vd-score.vd-locked .vd-num {
  font-size: 52px;
}
.vd-bar-locked {
  position: relative;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 6px,
    transparent 6px 12px
  );
  border-radius: 999px;
}
.hs-spec {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 520px) {
  .hs-grid {
    grid-template-columns: 1fr;
  }
}
.hs-cell {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hs-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hs-v {
  font-size: 14.5px;
  font-weight: 540;
  color: var(--text-primary);
}
.hs-care {
  margin-top: 8px;
}
.hs-care p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gl-fig {
  margin: 0 0 14px;
}
.gl-fig img {
  width: 100%;
  max-width: 520px;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.gl-fig figcaption {
  margin-top: 6px;
}
.read-src {
  margin-left: 6px;
}

/* build 162: the other-angle reads fold behind a summary line that carries every verdict */
.read-fold {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  padding: 0;
}
.read-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: grid;
  gap: 8px;
}
.read-fold > summary::-webkit-details-marker {
  display: none;
}
.read-fold > summary .kicker {
  margin: 0;
}
.read-fold > summary .kicker::after {
  content: " · open";
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.read-fold[open] > summary .kicker::after {
  content: " · close";
}
.read-sums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.read-sum b {
  font-weight: 500;
  color: var(--text-primary);
}
.read-fold > .read-row {
  padding: 4px 16px 12px;
  border-top: 1px solid var(--line-soft);
}
.read-fold > .read-notes {
  padding: 0 16px 14px;
}
@media print {
  .read-fold > summary .kicker::after { content: ""; }
}
/* ── Print: the PDF a reader saves. Figures are capped so no single picture takes a page, the
   site chrome is out, and nothing tall is left to straddle a page break. ── */
@media print {
  #footer,
  footer,
  .subnav,
  #topnav,
  .nav,
  .burger,
  .menu,
  dialog,
  .leave-dialog,
  .rx-controls,
  .rx-order,
  .explorer-controls,
  .save-row,
  .report-actions,
  .toolbar,
  .cam-review,
  [data-no-print],
  .no-print {
    display: none !important;
  }
  main.pad,
  .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* ear diagrams are tall crops: at page width they ran to 1300px each */
  .ear-split {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .ear-figure {
    text-align: center;
  }
  .ear-dia {
    max-height: 360px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  /* full-width figures: portraits with a ring, feature tiles, the explorer stage, the landmark map */
  .callout-fig img,
  .feat-tile.wide .feat-img,
  .feat-tile.wide img,
  .rx-stage img,
  .rx-stage canvas,
  .ov-fig img,
  .look-one img,
  .crop canvas {
    max-height: 300px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }
  .feat-img {
    aspect-ratio: auto !important;
  }
  .crop {
    text-align: center;
  }
  .mag-img {
    aspect-ratio: auto !important;
    max-height: 240px !important;
  }
  .mag-img img {
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
  }
  .rx-stage {
    max-height: 380px !important;
  }
  .ba.look,
  .ba2 {
    max-width: 100% !important;
  }
  .ba img,
  .ba2 img,
  .ba canvas {
    max-height: 300px !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  .region,
  .region-h,
  .metric,
  .fixbox,
  .call,
  .ear-detail,
  .style-card,
  .proto,
  .ov,
  .hs-head,
  .callout {
    break-inside: avoid-page;
  }
  .region {
    break-inside: auto;
  }
  .region-h,
  h2,
  h3,
  h4,
  .kicker {
    break-after: avoid-page;
  }
  img,
  canvas,
  figure {
    break-inside: avoid-page;
  }
  a[href]::after {
    content: "" !important;
  }
  body {
    font-size: 10.5pt !important;
  }
  .metric {
    padding-top: 6pt !important;
    padding-bottom: 6pt !important;
  }
  .region-h,
  .ov,
  .hs-head,
  .callout {
    break-inside: auto;
  }
}

/* build 171 · the basis pill beside a curve ("Female-derived, applied to all") is wider than the
   curve column. .pill is nowrap with max-width:100%, so the box was clamped to the column and the
   text ran out of the card. In this one place the pill wraps inside its own border instead. */
.metric .pctl .pill {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  max-width: 100%;
}

/* build 170 · the landmark map's caption. It used to be SVG type inside the map's own coordinate
   space, so it shrank with the drawing; as HTML it is the same size on every photograph. */
.points-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 6px;
}

/* ── build 171 · the foot of the report ──────────────────────────────────────────────────────
   The invitation to read the measurement library first is written for someone who has not
   uploaded anything. Once the report is on the page they have, so it goes. ── */
#results:not([hidden]) ~ .pre-upload-cta {
  display: none;
}
/* The overview above already carries the picture, the word and the confidence, so the card under
   it opens straight on the measurements. */
.shape-card-compact .shape-cells {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 0;
}

/* ── build 171 · print: the region portrait beside its prose ─────────────────────────────────
   On screen .crop is sticky, so the portrait rides down beside the measurements it belongs to.
   Paper has no scroll: sticky lays out as static, the portrait sat alone in its grid row and the
   measurements started underneath it, so every region left a band of white the width of the
   sheet. On paper the portrait floats into the prose and the text that describes it runs beside
   it. ── */
@media print {
  #results .region-body {
    display: block;
  }
  #results .region-body > .crop {
    float: left;
    width: 40%;
    max-width: 74mm;
    margin: 0 5mm 4mm 0;
  }
  /* .metrics is a grid, and a grid is its own formatting context: beside a float it shrinks to
     the space left over and keeps that narrow width on every sheet after the one the float is
     on. As a block it wraps the way prose does. (It is not always a direct child: the skin
     region wraps it in an unclassed div.) */
  #results .region-body .metrics {
    display: block;
  }
  #results .region-body .metrics > * + * {
    margin-top: 12px;
  }
  /* A card is its own formatting context too, and a tall one running beside the portrait would
     carry the narrow column onto the next sheet. Figures beside the portrait are short, so they
     stay there; cards start under it. */
  #results .region-body .metric,
  #results .region-body .brow-guide,
  #results .region-body .bas-block,
  #results .region-body .ear-detail,
  #results .region-body .style-card,
  #results .region-body .look-card,
  #results .region-body .proto,
  #results .region-body figure.mag {
    clear: left;
  }
  #results .region-body::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* ── build 171 · print: cards taller than the space left on the sheet ────────────────────────
   Every measurement card, look card and ear detail carried break-inside: avoid-page. A 600px
   card arriving 400px above the foot of a sheet moved whole onto the next one and left the rest
   of that sheet empty; over 89 pages that came to about a sixth of the paper. A tall card now
   runs across the boundary, with its name, its definition and its value chained together so the
   head of a card is never orphaned at the foot of a sheet, and with the small parts a reader
   scans as a unit (a percentile curve, a read row, a colour cell) still kept whole. ── */
@media print {
  #results .metric,
  #results .style-card,
  #results .look-card,
  #results .ear-detail,
  #results .bas-block,
  #results .proto,
  #results .col-note,
  #results .brow-guide,
  #results .vd-score,
  #results .potential,
  #results figure.mag {
    break-inside: auto;
  }
  #results .metric .lbl,
  #results .metric .define,
  #results .metric .val,
  #results .look-card .kicker,
  #results .style-card .kicker,
  #results .ear-detail .kicker {
    break-after: avoid-page;
  }
  #results .metric .lbl,
  #results .metric .val,
  #results .metric .pctl,
  #results .read-row,
  #results .hq-cell,
  #results .col-cell,
  #results .canon {
    break-inside: avoid-page;
  }
  #results p,
  #results li {
    orphans: 3;
    widows: 3;
  }
}

/* On a phone the section chips fill the header row and push the fold chevron onto a row of its own,
   where margin-left:auto parks it at the right with nothing beside it. A collapsed section then
   carries about 40px of blank between its heading and the next one, and how much depends on how
   many chips that section happens to have, so no two gaps match. The chevron is taken out of the
   flex flow and pinned to the top right instead: one gap, the same everywhere. */
@media (max-width: 720px) {
  #results .region-h > .rh-top {
    position: relative;
    padding-right: 32px;
  }
  #results .region-h > .rh-top > .region-fold {
    position: absolute;
    right: 0;
    top: 1px;
    margin-left: 0;
  }
  /* Ears and Dimorphism carry no score card, so their button sits straight in .region-h */
  #results .region-h:has(> .region-fold) {
    position: relative;
    padding-right: 32px;
  }
  #results .region-h > .region-fold {
    position: absolute;
    right: 0;
    top: 1px;
    margin-left: 0;
  }
}

/* ── NOW / POTENTIAL SLIDER: THE LATE-IMAGE AND PHONE-WIDTH CASES ───────────────────────────────
   This file loads after config-93LXea_z.css, so these override the base .ba.look rules there.

   1. A slider is furniture — a white divider line, a knob and two labels — drawn over two <img>
      that may not have decoded yet. Until they have, the furniture floats over an empty frame,
      which is most of what "glitchy" looks like. dn() adds .look-ready once both halves report
      complete (or after 8s, so a picture that never fires an event cannot strand the frame), and
      the furniture fades in with them. The frame itself keeps its aspect-ratio box the whole time,
      so nothing on the page moves when the picture lands.
   2. The "Potential" label follows the divider (left: var(--x) + 12px) so it always sits on the
      potential side. On a phone the card is ~320-360px wide and the label is ~92px, so once the
      divider passes about 70% the label is pushed past the right edge and .ba's overflow:hidden
      chops it in half. Below 560px it goes back to being pinned to the right edge, where the base
      .ba .lbl.r rule already puts it, and the opacity fade still carries the meaning.
   3. touch-action stays pan-y (set on .ba): a horizontal drag is the slider, a vertical drag still
      scrolls the report. Restated here so a later edit to the base file cannot quietly take
      touch dragging away. */
.ba.look .handle,
.ba.look .knob,
.ba.look .lbl {
  transition:
    opacity 0.18s ease-out,
    left 0s;
}
.ba.look:not(.look-ready) .handle,
.ba.look:not(.look-ready) .knob,
.ba.look:not(.look-ready) .lbl {
  opacity: 0;
  pointer-events: none;
}
.ba.look {
  touch-action: pan-y;
}
.ba.look .lbl {
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .ba.look .lbl.r {
    left: auto;
    right: 10px;
  }
}
@media (min-width: 561px) {
  /* Keep the label beside the divider, but never let its left edge get so close to the right wall
     that the word is clipped. 116px is the label's own width plus the 14px gutter. */
  .ba.look .lbl.r {
    left: clamp(104px, calc(var(--x, 50%) + 12px), calc(100% - 116px));
  }
}

/* ── build 173 · print: the mock-up grid was fragmenting into overprinted text ────────────────
   Two faults compounded on the "other calls, on your own face" strip:

   1. `.alt-grid` is a CSS grid, and Chrome fragments a grid container by slicing the row that
      crosses the sheet boundary. The picture of a look landed at the foot of one sheet and its
      own caption ("Same cut, a thin moustache", the Why, the upkeep line) on the next.
   2. Worse, the sliced remainder was painted over whatever followed it, so the last card's words
      and the "How this picture is built" paragraph were drawn on top of each other and neither
      could be read. On the front-photo-only report that was page 52; on a full eight-view report,
      page 61.

   The trigger was build 171's paper-saving pass, which set `#results .look-card {break-inside:
   auto}` (above, ~line 2075) to stop tall cards being pushed whole onto the next sheet. That is
   right for the lead slider card, which is tall; it is wrong for these, which are a picture plus
   six lines and always fit.

   So on paper the strip stops being a grid. The cards become atomic inline-blocks in block flow —
   Chrome cannot split a monolithic inline-level box, so a card that does not fit is moved whole
   and can never be sliced or overprinted — laid two-up at the same width the grid gave them. ── */
@media print {
  #results .alt-grid {
    display: block !important;
    max-width: none;
  }
  #results .alt-grid > .look-card {
    display: inline-block;
    vertical-align: top;
    width: 47%;
    margin: 0 2% 14px 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Capping the picture's HEIGHT (and letting the width follow the 4:5 box, so object-fit:cover
     has nothing to crop) is what pays for keeping the cards whole: at 86mm two cards and their
     words fit the space left on a sheet, so the strip costs the same 64 pages it did while it was
     corrupting itself, at the same mean ink. Chaining the strip's heading to the first row stops
     the intro being left alone on a sheet of its own. */
  #results .alt-grid > .look-card .look-one img,
  #results .alt-grid > .look-card .ba.look .print-after {
    max-height: 86mm !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
  }
  /* On paper an alternate stays what it was: one picture of the result, marked Potential. The
     slider's own print rule (config: .ba as a two-up grid) is for the lead; here the before half
     and its label are dropped so the strip keeps its 64-page budget. */
  #results .alt-grid > .look-card .ba.look {
    display: block !important;
  }
  #results .alt-grid > .look-card .ba.look .bottom,
  #results .alt-grid > .look-card .ba.look .lbl.l,
  #results .alt-grid > .look-card .ba.look input {
    display: none !important;
  }
  #results .alt-looks > .kicker,
  #results .alt-looks > p {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* The lead card keeps build 171's break-inside:auto — it is the tall one paper-saving was for. */
}

/* ── build 173 · print: the proportion explorer's rows overlapped each other ──────────────────
   `.rx-list` is a flex column of 20-odd rows and taller than a sheet. Chrome fragments a flex
   container the same way it fragments a grid: the row crossing the boundary was drawn twice,
   once clipped at the foot of page 3 and once over the row beneath it, so the first proportion
   in the list ("Intercanthal distance : palpebral fissure length") sat on top of the second and
   both were illegible. The list has no reason to be a flex container on paper — the rows are
   full-width and carry their own bottom rule — so it becomes block flow, where each row is a
   block box that `break-inside: avoid` can move whole.

   `.rx-stage` is also still `position: sticky` in print: the base print reset (config, ~3363)
   only neutralises `.sticky` and inline `position:sticky`, and this one comes from a container
   query. It is pinned static here so it cannot travel down the sheet. ── */
@media print {
  #results .rx-list {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #results .rx-row {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  #results .rx-stage {
    position: static !important;
    top: auto !important;
  }
  /* ── and the overlap that was actually printing ────────────────────────────────────────────
     The rows were sitting under the stage's caption, not under each other. This file caps the
     explorer picture at 300px and the whole stage at 380px (above, ~1897 and ~1925) so the canvas
     and its caption fit the grid row they are given. config-93LXea_z.css then re-caps the same
     canvas at 110mm — 416px — through a higher-specificity selector (`#results .rx .rx-canvas`),
     which beats `.rx-stage canvas` even though both are !important. The canvas grew 116px past
     the row it was laid into, so `.rx-cap` — which prints the name of the measurement drawn on
     the face — was painted straight over the first two rows of the list and none of the three
     could be read. The cap is restored here at a specificity that holds, and the stage's own
     max-height is released so that if any future rule grows that canvas again the stage grows
     with it instead of spilling over the list. ── */
  #results .rx .rx-stage canvas,
  #results .rx .rx-stage img,
  #results .rx .rx-canvas {
    max-height: 300px !important;
  }
  #results .rx .rx-stage {
    max-height: none !important;
  }
}

/* ── build 173 · mobile: iOS zooms the page when a sub-16px field takes focus ─────────────────
   The report's keep-this-report code box inherits 14.5px, so tapping it on an iPhone scales the
   whole page up and leaves the reader panning a zoomed report. 16px is the threshold at which
   Safari leaves the viewport alone. Only below 640px, so the desktop card is unchanged. The same
   fix for account.html's own fields is in config-93LXea_z.css, which is the sheet that page
   loads. ── */
@media (max-width: 640px) {
  #ka-code-in {
    font-size: 16px;
  }
}

/* ── BUILD 199: THE OTHER CALLS READ AS ROWS — PICTURE LEFT, THE WORDS BESIDE IT ─────────────
   "image left, description right for the alternates". Three portrait sliders in a row put the
   text under each picture in a 300px column, so a why-line ran eight lines deep and the four
   stat cells sat below the fold of the card. Each alternate is now one row: the slider on the
   left at the same width as before, everything about it on the right where there is room for
   it. Idle cards (not yet drawn) keep their compact tile. Phones stack as before. */
#results .alt-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1020px;
  gap: 18px;
}
#results .alt-grid > .look-card.is-alt {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  height: auto;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}
#results .alt-grid > .look-card.is-alt:first-child {
  border-top: 0;
  padding-top: 4px;
}
#results .alt-grid > .look-card.is-alt .ba.look,
#results .alt-grid > .look-card.is-alt .look-one {
  width: 100%;
  min-width: 0;
}
#results .alt-grid > .look-card.is-alt .look-txt {
  min-width: 0;
  padding-top: 2px;
}
#results .alt-grid > .look-card.is-alt .look-txt > span {
  max-width: 62ch;
}
#results .alt-grid > .look-card.is-alt .look-txt > b {
  font-size: 19px;
}
#results .alt-grid > .look-card.alt-idle {
  max-width: 320px;
}
@media (max-width: 640px) {
  #results .alt-grid > .look-card.is-alt {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  #results .alt-grid > .look-card.is-alt .ba.look {
    max-width: 360px;
  }
}
/* The stat cells: no more grey boxes. A cell is a label and a value on one line, the four of
   them in a light two-column list, and a cell whose value is "None" is not shown at all — a
   box that says "Parting: None" is a box that says nothing. */
#results .hs-spec {
  margin-top: 10px;
  padding-top: 10px;
}
#results .hs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
}
#results .hs-cell {
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--line);
  border-radius: 0;
  padding: 5px 0;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#results .hs-cell .hs-k {
  font-size: 10.5px;
  flex: none;
}
#results .hs-cell .hs-v {
  font-size: 13.5px;
  text-align: right;
}
#results .hs-cell.is-none {
  display: none;
}
#results .hs-care {
  margin-top: 8px;
}
@media (max-width: 520px) {
  #results .hs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── BUILD 199: "THE CALLS" — A MEASURE, AND ROOM BETWEEN THE PARTS ────────────────────────────
   On a wide screen every call ran its why-line and its Do-list the full 1100px across, and the
   parts of a card sat on top of one another with 6px between them. Text now stops at a readable
   measure, and the header, the why and the lists breathe. */
#results .calls {
  gap: 14px;
}
#results .call {
  padding: 16px 18px 15px;
}
#results .call-h {
  margin-bottom: 4px;
  row-gap: 4px;
}
#results .call-h b {
  font-size: 16.5px;
  line-height: 1.3;
}
#results .call-why {
  margin: 8px 0 12px;
  max-width: 72ch;
  line-height: 1.55;
}
#results .call-do {
  max-width: 78ch;
  gap: 6px 10px;
  line-height: 1.5;
}
#results .call-do + .call-do {
  margin-top: 8px;
}
#results .call-do li + li {
  margin-top: 4px;
}
#results .call .cite {
  margin-top: 10px !important;
  max-width: 86ch;
}
#results .calls-standing p {
  line-height: 1.55;
}
/* One column, on purpose: the calls are "do these, in this order", and two columns of cards
   that are all different heights left a hole under every short one. */
#results .calls {
  max-width: 900px;
}

/* ── BUILD 199: THE OVERVIEW CARDS — THE WORDS SIT BESIDE THE PICTURE, NOT UNDER IT ──────────
   The symmetry overview put its two cells beside a tall portrait and its paragraph underneath,
   so the right-hand column was a headline, two cells stretched to 400px each, and a hole. The
   explanation and its caveat now live in the side column under the cells (Ds() moved them), the
   cells stop growing past a readable width, and the column fills the height of the figure. */
#results .ov-body {
  align-items: start;
  gap: 24px 28px;
}
#results .ov-cells {
  grid-template-columns: repeat(2, minmax(0, 230px));
  margin-top: 14px;
}
#results .ov-side .ov-text {
  margin: 14px 0 0;
  max-width: 62ch;
}
#results .ov-side .ov-caveat {
  margin: 8px 0 0;
  max-width: 62ch;
}
@media (max-width: 720px) {
  #results .ov-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── BUILD 200: THE LOADING SCREEN FITS THE SCREEN ────────────────────────────────────────────
   "It's a little overly zoomed in. You can't actually see the tip screen." The box was a 460px
   column that grew with its content: a list of seven steps with a line of description each, a
   bar, the tip and the footer — taller than a laptop's visible viewport, so the tip sat below
   the fold of a box that could not be scrolled (the page under it is locked while it is open).
   Now: two columns on a wide screen (progress left, the tip right — all of it in view), one
   compact column on a phone, and the box is never taller than the visible viewport — dvh, which
   is the viewport with the phone's own toolbars taken off. */
.ms-overlay {
  padding: 16px;
}
.ms-box {
  max-width: 900px;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 28px;
  text-align: left;
  padding: 30px 32px 26px;
}
.ms-main,
.ms-side {
  min-width: 0;
}
.ms-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.ms-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ms-top .ms-art {
  width: auto;
  margin: 0;
  flex: none;
}
.ms-top .cx-scan.lg svg {
  width: 52px;
  height: 52px;
}
.ms-h {
  font-size: 26px;
}
.ms-p {
  margin: 12px 0 16px;
  font-size: 14px;
}
.ms-steps {
  gap: 11px;
}
.ms-steps li {
  row-gap: 1px;
}
.ms-steps li b {
  font-size: 15px;
}
.ms-bar {
  margin-top: 16px;
}
.ms-fact {
  margin-top: 0;
  padding: 18px 20px;
  min-height: 0;
}
.ms-fact .kicker {
  margin-bottom: 8px;
}
.ms-fact p {
  font-size: 15px;
  line-height: 1.6;
}
.ms-slow {
  margin-top: 0;
}
.ms-foot {
  margin-top: 16px;
}
.ms-detail {
  margin-top: 14px;
  display: grid;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  max-height: 160px;
  overflow-y: auto;
}
.ms-detail[hidden] {
  display: none;
}
.ms-detail > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted var(--line);
  padding: 2px 0;
}
.ms-detail .st-done {
  color: var(--good);
}
.ms-detail .st-error {
  color: var(--crit);
}
@media (max-width: 760px) {
  .ms-overlay {
    padding: 12px;
    align-items: center;
  }
  .ms-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px 18px 16px;
  }
  .ms-top .cx-scan.lg svg {
    width: 38px;
    height: 38px;
  }
  .ms-h {
    font-size: 21px;
  }
  .ms-p {
    font-size: 13px;
    margin: 8px 0 12px;
  }
  .ms-steps {
    gap: 7px;
  }
  .ms-steps li span {
    display: none;
  }
  .ms-steps li b {
    font-size: 14px;
  }
  .ms-fact {
    padding: 12px 14px;
  }
  .ms-fact p {
    font-size: 13px;
    line-height: 1.5;
  }
  .ms-foot {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 10px;
  }
}
@media (max-height: 640px) and (min-width: 761px) {
  .ms-steps li span {
    display: none;
  }
  .ms-p {
    margin: 8px 0 10px;
  }
}

/* ── BUILD 200: THE ALTERNATE ROWS ON PAPER ───────────────────────────────────────────────────
   The screen rows (picture left, words right) are also the right shape for a sheet: one look per
   row, the picture at 62mm, never split across a page. */
@media print {
  #results .alt-grid > .look-card.is-alt {
    display: grid !important;
    grid-template-columns: 62mm minmax(0, 1fr);
    gap: 0 7mm;
    width: 100%;
    margin: 0 0 8mm;
    padding: 0;
    border-top: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #results .alt-grid > .look-card.is-alt .ba.look .print-after,
  #results .alt-grid > .look-card.is-alt .look-one img {
    max-height: 78mm !important;
  }
}

/* ── BUILD 201: THE LOADING BOX WITHOUT THE HOLE ───────────────────────────────────────────────
   The tip column was centred vertically beside a tall list, so the top half of the right column
   was empty. It now starts level with the text under the heading, the box is narrower, and the
   four stages keep it short enough that nothing floats. */
.ms-box {
  max-width: 820px;
  width: min(820px, calc(100vw - 32px));
  gap: 32px;
  align-items: start;
}
.ms-side {
  justify-content: flex-start;
  padding-top: 74px;
}
.ms-detail {
  display: none !important;
}
@media (max-width: 760px) {
  .ms-side {
    padding-top: 0;
  }
}

/* Build 201b: one column at every width — the heading, the stages, the bar, then the tip card.
   A second column only ever held a short card beside a tall list, which left a hole under it. */
.ms-box {
  max-width: 600px;
  width: min(600px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.ms-side {
  padding-top: 0;
}
/* Build 201: "Analyze photo" before a photo is picked reads as a quiet outline, not a dark pill
   with its label lost in it — the guided camera beside it is the action until then. */
#analyze-row #analyze:disabled {
  background: transparent !important;
  color: var(--text-muted, #6b675f) !important;
  box-shadow: inset 0 0 0 1px rgba(23, 23, 26, 0.18) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}