/* GENERATED FILE. Edit shared/iconoplasm-card/shared-card-label.css and rerun node scripts/sync-iconoplasm-shared.mjs. */

/* Shared Iconoplasm lab-label card variant.
   Source of truth: Paper artboard "Vintage Lab Label Study / Type vs Pen" in
   Orderly jewel / Page 1. Export this variant here so the site and extension
   consume the same layout instead of drifting into per-surface reinterpretations. */

/* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md (clear aesthetic direction)
   + C:\Users\Admin\.codex\skills\extract\SKILL.md (single shared component variant)
   + C:\Users\Admin\.codex\skills\polish\SKILL.md (alignment, detail discipline).
   The lab-label variant is intentionally print-like: tighter grid, ruled sections,
   typewritten molecular fields, and handwritten character notes. Keep it compact and
   avoid reintroducing glossy web-card affordances or separate display-specific hacks.
   This is a fixed printed sheet on desktop, not a fluid border system. Use hard track
   sizes and only switch layouts at a real breakpoint instead of scaling the plate. */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Special Elite";
  src: url("../fonts/SpecialElite-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.icono-card--variant-lab-label,
.iconoplasm-tooltip--variant-lab-label,
.icono-card--variant-image-only,
.iconoplasm-tooltip--variant-image-only {
  --icono-label-paper: color-mix(in srgb, var(--light, #f4ede5) 92%, #d4cab8 8%);
  --icono-label-paper-2: color-mix(in srgb, var(--light, #f4ede5) 88%, #d7cfbf 12%);
  --icono-label-ink: color-mix(in srgb, var(--dark, #20120b) 94%, #3b2a20 6%);
  --icono-label-muted: color-mix(in srgb, var(--icono-label-ink) 42%, transparent);
  --icono-label-rule: color-mix(in srgb, var(--icono-label-ink) 16%, transparent);
  --icono-label-rule-strong: color-mix(in srgb, var(--icono-label-ink) 26%, transparent);
  --icono-label-stamp: #a24834;
  --icono-label-pen: var(--accent, #1b7269);
  --icono-label-type: "IBM Plex Mono";
  --icono-label-hand: "Caveat";
  --icono-label-portrait-fr: 29.1%;
  --icono-label-form-fr: 70.9%;
  --icono-label-header-title-fr: 56.2%;
  --icono-label-header-meta-fr: 29.8%;
  --icono-label-header-qc-fr: 14%;
  --icono-label-row-label-fr: 8.2%;
  --icono-label-row-body-fr: 91.8%;
  --icono-label-band-category-fr: 50%;
  --icono-label-band-noted-fr: 21%;
  --icono-label-band-mass-fr: 29%;
  --icono-label-footer-main-fr: 54.568528%;
  --icono-label-footer-side-fr: 45.431472%;
  --icono-label-specimen-metric-col: calc(110 / 1220 * 100cqw);
  --icono-label-specimen-value-col: calc(52 / 1220 * 100cqw);
  --icono-label-specimen-column-gap: calc(8 / 1220 * 100cqw);
  --icono-label-specimen-row-gap: calc(3 / 1220 * 100cqw);
  --icono-label-hand-size: calc(36 / 1220 * 100cqw);
}

.icono-card--variant-image-only.icono-card--brick,
.iconoplasm-tooltip--variant-image-only {
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 100%;
  aspect-ratio: var(--width, 4) / var(--height, 5);
  display: block;
  border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 88%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--icono-card-accent, #6b6b78) 18%, #201711);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--icono-label-rule) 44%, transparent),
    0 12px 28px rgba(22, 14, 11, 0.22);
  overflow: hidden;
}

.icono-image-only-link {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 384 / 512;
  min-block-size: 0;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--icono-card-accent, #6b6b78) 18%, #140f0d), #140f0d);
}

.icono-image-only-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 10, 8, 0) 0%, rgba(16, 10, 8, 0) 56%, rgba(16, 10, 8, 0.18) 78%, rgba(16, 10, 8, 0.58) 100%),
    linear-gradient(90deg, rgba(255, 244, 226, 0.05), transparent 18%, transparent 82%, rgba(255, 244, 226, 0.04));
  pointer-events: none;
}

.icono-image-only-media-stage {
  position: absolute;
  /* Fence: keep a dedicated media stage so image-only portrait fitting is governed in one
     place, separate from the caption/shadow overlay. The stage itself should stay edge to
     edge; adding a visible inset creates a fake frame that users read as an unintended border. */
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.icono-image-only-photo,
.icono-image-only-fallback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.icono-image-only-photo {
  display: block;
  /* Fence: image-only is the one layout whose job is to show the portrait itself. Using cover
     here makes the crop feel arbitrary and, on narrower faces, reads like a square thumbnail.
     Keep the full portrait visible and let the card background absorb any leftover space. */
  object-fit: contain;
  object-position: center center;
}

.icono-image-only-fallback {
  background:
    radial-gradient(circle at 28% 16%, color-mix(in srgb, var(--icono-card-accent, #6b6b78) 46%, rgba(255, 255, 255, 0.22)), transparent 36%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-card-accent, #6b6b78) 28%, #211712),
      color-mix(in srgb, var(--icono-card-accent, #6b6b78) 12%, #120d0b)
    );
}

.icono-image-only-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 5.4cqw, 24px);
  z-index: 1;
  pointer-events: none;
}

.icono-image-only-caption-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(0.85rem, 3.2cqw, 1.4rem);
  width: 100%;
}

.icono-image-only-overlay .icono-image-only-symbol {
  color: rgba(253, 245, 232, 0.96);
  font-size: clamp(2rem, 11cqw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-align: right;
  justify-self: end;
  text-shadow:
    0 1px 0 rgba(13, 9, 7, 0.4),
    0 8px 18px rgba(8, 5, 4, 0.38);
}

.icono-image-only-overlay .icono-image-only-name {
  color: rgba(250, 238, 222, 0.92);
  font-size: clamp(0.9rem, 3.2cqw, 1.12rem);
  line-height: 1.22;
  max-inline-size: 20ch;
  text-align: left;
  text-wrap: pretty;
  text-shadow: 0 3px 12px rgba(8, 5, 4, 0.42);
}

.icono-card--variant-lab-label.icono-card--brick {
  container-type: inline-size;
  inline-size: min(100%, 1220px);
  max-inline-size: 100%;
  aspect-ratio: 1220 / 634;
  grid-template-columns: var(--icono-label-portrait-fr) var(--icono-label-form-fr);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 92%, transparent);
  border-radius: 0;
  background: var(--icono-label-paper);
  box-shadow: 0 10px 24px rgba(53, 38, 27, 0.1);
}

.icono-card--variant-lab-label.icono-card--brick:hover,
.icono-card--variant-lab-label.icono-card--brick-static:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(53, 38, 27, 0.1);
}

.icono-card--variant-lab-label.icono-card--brick .iconoplasm-tooltip-portrait,
.iconoplasm-tooltip--variant-lab-label .iconoplasm-tooltip-portrait {
  /* Source of truth: Paper artboard "Vintage Lab Label Study / Type vs Pen" (6V-0).
     The left rail is not a full-bleed web image with an overlaid footer. It is a padded
     specimen column with a separate viewport and a footer block below it. Keep these
     measurements tied to the Paper sheet so site and extension don't drift again. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 / 1220 * 100cqw);
  padding: calc(18 / 1220 * 100cqw) calc(18 / 1220 * 100cqw) calc(16 / 1220 * 100cqw);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
  background: linear-gradient(
    180deg,
    var(--icono-label-paper-2) 0%,
    color-mix(in srgb, var(--icono-label-paper-2) 94%, #c8bcaa 6%) 100%
  );
  box-shadow: none;
}

.icono-card--variant-lab-label.icono-card--brick .iconoplasm-tooltip-body,
.iconoplasm-tooltip--variant-lab-label .iconoplasm-tooltip-body {
  padding: 0;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  border-left: 1px solid var(--icono-label-rule);
  background: var(--icono-label-paper);
  color: var(--icono-label-ink);
}

.iconoplasm-tooltip--variant-lab-label {
  container-type: inline-size;
  inline-size: min(100%, 1220px);
  max-inline-size: calc(100vw - 16px);
  aspect-ratio: 1220 / 634;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 92%, transparent);
  border-radius: 0;
  background: var(--icono-label-paper);
}

.iconoplasm-tooltip--variant-lab-label.iconoplasm-tooltip--dark {
  --icono-label-paper: #ddd5c8;
  --icono-label-paper-2: #cfc5b4;
  --icono-label-ink: #1f120b;
  --icono-label-muted: rgba(31, 18, 11, 0.54);
  --icono-label-rule: rgba(31, 18, 11, 0.14);
  --icono-label-rule-strong: rgba(31, 18, 11, 0.22);
}

.icono-label-specimen-viewport {
  position: relative;
  flex: 1 0 calc(442 / 1220 * 100cqw);
  min-height: 0;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 94%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-label-ink) 22%, transparent) 0%,
      transparent 30%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-label-ink) 12%, transparent) 0%,
      color-mix(in srgb, var(--icono-label-ink) 30%, transparent) 100%
    );
}

.icono-card--variant-lab-label.icono-card--brick
  .icono-label-specimen-viewport
  .iconoplasm-tooltip-portrait-media,
.iconoplasm-tooltip--variant-lab-label
  .icono-label-specimen-viewport
  .iconoplasm-tooltip-portrait-media,
.icono-card--variant-lab-label.icono-card--brick
  .icono-label-specimen-viewport
  .icono-brick-media-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.icono-card--variant-lab-label.icono-card--brick
  .icono-label-specimen-viewport
  .iconoplasm-tooltip-portrait-img,
.iconoplasm-tooltip--variant-lab-label
  .icono-label-specimen-viewport
  .iconoplasm-tooltip-portrait-img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: 0 !important;
  max-width: none !important;
  border: 0 !important;
  object-fit: cover;
  object-position: center top;
}

.icono-label-specimen-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: min-content min-content;
  gap: calc(1 / 1220 * 100cqw);
  flex: 0 0 auto;
  min-height: auto;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0;
  border-top: 1px solid var(--icono-label-rule);
  overflow: visible;
}

.icono-label-specimen-notes {
  display: grid;
  grid-auto-rows: min-content;
  width: 100%;
  min-width: 0;
  gap: calc(3 / 1220 * 100cqw);
}

.icono-label-specimen-micro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: min-content min-content;
  align-content: start;
  gap: calc(4 / 1220 * 100cqw);
  min-width: 0;
  overflow: visible;
}

.icono-label-specimen-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 / 1220 * 100cqw);
  min-width: 0;
}

.icono-label-specimen-color-name {
  color: var(--icono-label-pen);
  font-family: var(--icono-label-hand);
  font-size: var(--icono-label-hand-size);
  letter-spacing: 0.01em;
  line-height: 0.95;
  transform: rotate(-2.5deg);
  transform-origin: left center;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.icono-label-specimen-swatch-hex {
  display: flex;
  align-items: center;
  gap: calc(4 / 1220 * 100cqw);
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--icono-label-ink) 74%, transparent);
  font-family: var(--icono-label-type);
  font-size: calc(13 / 1220 * 100cqw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.icono-label-specimen-swatch {
  inline-size: calc(16 / 1220 * 100cqw);
  block-size: calc(16 / 1220 * 100cqw);
  border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 88%, transparent);
  flex: 0 0 auto;
}

.icono-label-specimen-decomposition {
  display: grid;
  grid-template-columns:
    var(--icono-label-specimen-metric-col)
    var(--icono-label-specimen-value-col)
    minmax(max-content, 1fr);
  grid-template-rows: repeat(3, min-content);
  column-gap: var(--icono-label-specimen-column-gap);
  row-gap: var(--icono-label-specimen-row-gap);
  overflow: visible;
}

.icono-label-specimen-cell {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: visible;
}

.icono-label-specimen-cell--metric {
  grid-column: 1;
}
.icono-label-specimen-cell--value {
  grid-column: 2;
}
.icono-label-specimen-cell--hand {
  grid-column: 3;
  justify-content: flex-end;
  min-width: max-content;
}

.icono-label-specimen-cell--row-1 {
  grid-row: 1;
}
.icono-label-specimen-cell--row-2 {
  grid-row: 2;
}
.icono-label-specimen-cell--row-3 {
  grid-row: 3;
}

.icono-label-specimen-decomposition .icono-label-specimen-hand-analysis {
  font-size: var(--icono-label-hand-size);
}

.icono-label-specimen-hand-analysis {
  color: var(--icono-label-pen);
  font-family: var(--icono-label-hand);
  font-size: var(--icono-label-hand-size);
  line-height: 0.95;
  letter-spacing: 0.01em;
  transform: rotate(-2.5deg);
  transform-origin: right center;
  position: relative;
  right: auto;
  white-space: nowrap;
  display: block;
  text-align: right;
  z-index: 1;
}

.icono-label-specimen-note {
  color: color-mix(in srgb, var(--icono-label-ink) 58%, transparent);
  font-family: var(--icono-label-type);
  font-size: calc(10 / 1220 * 100cqw);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: break-word;
  white-space: nowrap;
}

.icono-label-specimen-metric {
  color: color-mix(in srgb, var(--icono-label-ink) 74%, transparent);
  font-family: var(--icono-label-type);
  font-size: calc(13 / 1220 * 100cqw);
  letter-spacing: 0.1em;
  line-height: 1.08;
  text-transform: uppercase;
  display: block;
  min-width: 0;
  white-space: nowrap;
}

.icono-label-specimen-metric-value {
  font-family: "Special Elite";
  font-size: calc(20 / 1220 * 100cqw);
  letter-spacing: 0.04em;
  text-align: left;
  display: block;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}

.icono-label-sheet-body {
  display: grid;
  grid-template-rows: 29.97% 10.09% 43.85% 8.2% 7.89%;
  min-width: 0;
  height: 100%;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(
      180deg,
      var(--icono-label-paper) 0%,
      color-mix(in srgb, var(--icono-label-paper) 97%, #c7b99c 3%) 100%
    );
}

.icono-label-header-row,
.icono-label-band-row,
.icono-label-style-row,
.icono-label-alignment-row,
.icono-label-footer-row {
  display: grid;
  grid-template-columns: var(--icono-label-row-label-fr) var(--icono-label-row-body-fr);
  min-height: 0;
  overflow: visible;
  border-bottom: 1px solid var(--icono-label-rule);
}

.icono-label-header-row {
  grid-template-columns:
    var(--icono-label-header-title-fr)
    var(--icono-label-header-meta-fr)
    var(--icono-label-header-qc-fr);
  align-items: stretch;
}

.icono-label-row-label {
  padding: calc(14 / 1220 * 100cqw) calc(16 / 1220 * 100cqw);
  border-right: 1px solid var(--icono-label-rule);
  color: var(--icono-label-muted);
  font-family: var(--icono-label-type);
  font-size: calc(10 / 1220 * 100cqw);
  letter-spacing: 0.18em;
  line-height: 1.08;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.icono-label-title-block,
.icono-label-title-link {
  display: grid;
  grid-template-rows: min-content calc(56 / 1220 * 100cqw) minmax(0, 1fr) min-content;
  align-content: start;
  row-gap: calc(7 / 1220 * 100cqw);
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: calc(18 / 1220 * 100cqw);
  color: inherit;
  text-decoration: none;
}

.icono-label-title-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--icono-label-pen) 70%, white 30%);
  outline-offset: -2px;
}

.icono-label-caption {
  color: var(--icono-label-muted);
  font-family: var(--icono-label-type);
  font-size: calc(10 / 1220 * 100cqw);
  letter-spacing: 0.18em;
  line-height: 1.08;
  text-transform: uppercase;
}

.icono-label-symbol {
  color: var(--icono-label-ink);
  font-family: "League Spartan";
  font-size: calc(60 / 1220 * 100cqw);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 0.9;
}

.icono-label-name {
  color: color-mix(in srgb, var(--icono-label-ink) 92%, transparent);
  font-family: "Special Elite";
  font-size: calc(22 / 1220 * 100cqw);
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-wrap: pretty;
}

.icono-label-registry-line {
  margin-top: calc(6 / 1220 * 100cqw);
  color: #544539;
  font-family: var(--icono-label-type);
  font-size: calc(11 / 1220 * 100cqw);
  letter-spacing: 0.1em;
  line-height: 1.18;
  text-transform: uppercase;
}

.icono-label-header-stack,
.icono-label-title-block,
.icono-label-title-link,
.icono-label-header-meta,
.icono-label-header-meta-cell,
.icono-label-filed-block,
.icono-label-qc-block,
.icono-label-band-cell,
.icono-label-style-stack,
.icono-label-style-pair,
.icono-label-alignment-body,
.icono-label-footer-copy,
.icono-label-footer-copy-main,
.icono-label-footer-copy-side {
  min-height: 0;
}

.icono-label-header-stack,
.icono-label-qc-block,
.icono-label-band-cell,
.icono-label-alignment-body,
.icono-label-footer-copy {
  min-width: 0;
}

.icono-label-header-stack {
  display: grid;
  grid-template-rows: 36.842105% 63.157895%;
  border-left: 1px solid var(--icono-label-rule);
}

.icono-label-header-meta {
  display: grid;
  grid-template-columns: 61.016949% 38.983051%;
  border-bottom: 1px solid var(--icono-label-rule);
}

.icono-label-header-meta-cell {
  display: grid;
  grid-template-rows: min-content 1fr;
  align-content: start;
  padding: calc(14 / 1220 * 100cqw) calc(14 / 1220 * 100cqw) calc(10 / 1220 * 100cqw)
    calc(16 / 1220 * 100cqw);
}

.icono-label-header-meta-cell + .icono-label-header-meta-cell {
  border-left: 1px solid var(--icono-label-rule);
  padding-left: calc(12 / 1220 * 100cqw);
  padding-right: calc(12 / 1220 * 100cqw);
}

.icono-label-serial,
.icono-label-family {
  align-self: end;
}

.icono-label-serial {
  margin-top: calc(4 / 1220 * 100cqw);
  color: var(--icono-label-ink);
  font-family: "Special Elite";
  font-size: calc(24 / 1220 * 100cqw);
  line-height: 0.95;
}

.icono-label-family {
  margin-top: calc(3 / 1220 * 100cqw);
  color: var(--icono-label-ink);
  font-family: "Special Elite";
  font-size: calc(24 / 1220 * 100cqw);
  line-height: 0.96;
  text-transform: uppercase;
}

.icono-label-filed-block {
  display: flex;
  flex-direction: column;
  gap: calc(7 / 1220 * 100cqw);
  padding: calc(12 / 1220 * 100cqw) calc(16 / 1220 * 100cqw);
}

.icono-label-family-trait-field {
  position: relative;
  min-height: calc(54 / 1220 * 100cqw);
  display: flex;
  align-items: flex-start;
}

.icono-label-family-trait-field--empty {
  align-items: flex-start;
}

.icono-label-filed-copy,
.icono-label-footer-line {
  color: color-mix(in srgb, var(--icono-label-ink) 82%, transparent);
  font-family: var(--icono-label-type);
  font-size: calc(11 / 1220 * 100cqw);
  letter-spacing: 0.08em;
  line-height: 1.18;
  text-transform: uppercase;
}

.icono-label-qc-block {
  display: grid;
  grid-template-rows: min-content min-content min-content 1fr;
  gap: calc(7 / 1220 * 100cqw);
  justify-content: flex-start;
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
  padding: calc(14 / 1220 * 100cqw) calc(14 / 1220 * 100cqw) calc(14 / 1220 * 100cqw);
  border-left: 1px solid var(--icono-label-rule);
}

.icono-label-qc-empty {
  height: calc(24 / 1220 * 100cqw);
}

.icono-label-qc-meta {
  display: flex;
  justify-content: space-between;
  gap: calc(8 / 1220 * 100cqw);
}

.icono-label-qc-meta-item {
  color: #645446;
  font-family: var(--icono-label-type);
  font-size: calc(10 / 1220 * 100cqw);
  letter-spacing: 0.12em;
  line-height: 1.08;
  text-transform: uppercase;
}

.icono-label-qc-note {
  min-height: calc(24 / 1220 * 100cqw);
  margin-top: auto;
  color: var(--icono-label-pen);
  font-family: var(--icono-label-hand);
  font-size: var(--icono-label-hand-size);
  line-height: 0.9;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.icono-label-band-grid {
  display: grid;
  grid-template-columns:
    var(--icono-label-band-category-fr)
    var(--icono-label-band-noted-fr)
    var(--icono-label-band-mass-fr);
  min-width: 0;
  align-items: start;
}

.icono-label-band-cell {
  display: grid;
  grid-template-rows: min-content calc(20 / 1220 * 100cqw) calc(17 / 1220 * 100cqw);
  align-content: start;
  gap: calc(3 / 1220 * 100cqw);
  min-height: 100%;
  padding: calc(7 / 1220 * 100cqw) calc(18 / 1220 * 100cqw);
}

.icono-label-band-cell + .icono-label-band-cell {
  border-left: 1px solid var(--icono-label-rule);
}

.icono-label-band-primary,
.icono-label-band-secondary {
  min-height: 0;
}

.icono-label-band-primary {
  display: flex;
  align-items: flex-start;
  min-height: calc(20 / 1220 * 100cqw);
  padding-top: calc(9 / 1220 * 100cqw);
}

.icono-label-band-cell--category {
  position: relative;
}

.icono-label-band-cell--category .icono-label-band-primary {
  padding-top: calc(9 / 1220 * 100cqw);
}

.icono-label-band-cell--category .icono-label-band-secondary {
  position: absolute;
  top: calc(3 / 1220 * 100cqw);
  left: calc(18 / 1220 * 100cqw);
}

.icono-label-band-cell--noted {
  position: relative;
}

.icono-label-band-cell--noted .icono-label-band-secondary {
  position: absolute;
  top: calc(16 / 1220 * 100cqw);
  left: calc(100 / 1220 * 100cqw);
  right: auto;
}

.icono-label-band-cell--noted .icono-label-band-primary,
.icono-label-band-cell--mass .icono-label-band-primary {
  padding-top: calc(9 / 1220 * 100cqw);
}

.icono-label-band-secondary {
  display: flex;
  align-items: flex-start;
  min-height: calc(14 / 1220 * 100cqw);
}

.icono-label-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(26 / 1220 * 100cqw);
  min-height: calc(14 / 1220 * 100cqw);
  align-items: flex-start;
}

.icono-label-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 calc(2 / 1220 * 100cqw);
  overflow: visible;
}

.icono-label-option-copy {
  position: relative;
  z-index: 1;
  color: var(--icono-label-ink);
  font-family: "Special Elite";
  font-size: calc(24 / 1220 * 100cqw);
  letter-spacing: 0.03em;
  line-height: 0.98;
  text-transform: uppercase;
}

.icono-label-option-loop {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  transform: none;
  color: var(--icono-label-pen);
  pointer-events: none;
  overflow: visible;
}

.icono-label-typed-value,
.icono-label-origin-text {
  color: var(--icono-label-ink);
  font-family: "Special Elite";
  font-size: calc(25 / 1220 * 100cqw);
  letter-spacing: 0.03em;
  line-height: 0.98;
  text-transform: uppercase;
}

.icono-label-typed-value--band {
  line-height: 0.92;
}

.icono-label-typed-value--mass {
  letter-spacing: 0.14em;
}

.icono-label-typed-value--crossed {
  position: relative;
}

.icono-label-typed-value--crossed::after {
  content: "";
  position: absolute;
  left: -0.34rem;
  right: -0.28rem;
  top: 42%;
  border-top: 1.2px solid color-mix(in srgb, var(--icono-label-pen) 82%, transparent);
  transform: rotate(-8.5deg);
}

.icono-label-typed-value--unit-kda {
  text-transform: none;
  letter-spacing: 0.01em;
}

.icono-label-hand-note {
  color: var(--icono-label-pen);
  font-family: var(--icono-label-hand);
  font-size: var(--icono-label-hand-size);
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.icono-label-hand-note--sex,
.icono-label-hand-note--age,
.icono-label-hand-note--unit,
.icono-label-hand-note--politics {
  transform: rotate(-4deg);
  transform-origin: left center;
}

.icono-label-hand-note--age {
  white-space: nowrap;
}

.icono-label-hand-note--mass-number {
  display: inline-block;
  font-size: var(--icono-label-hand-size);
  line-height: 0.82;
  margin-bottom: calc(-1 / 1220 * 100cqw);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.icono-label-mass-line {
  display: flex;
  align-items: flex-start;
  gap: calc(8 / 1220 * 100cqw);
  min-height: calc(28 / 1220 * 100cqw);
}

.icono-label-mass-unit-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1 / 1220 * 100cqw);
}

/* Keep the handwritten correction physically attached to the crossed-out typed unit.
   Without a shared stack, the generated site and extension copies can drift back to an
   inline layout where kg sits beside kDa instead of underneath it. */
.icono-label-mass-unit-stack .icono-label-hand-note--unit {
  margin-left: calc(5 / 1220 * 100cqw);
}

.icono-label-mass-fill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(8 / 1220 * 100cqw);
  min-width: calc(112 / 1220 * 100cqw);
  padding: 0 calc(6 / 1220 * 100cqw) calc(1 / 1220 * 100cqw);
}

.icono-label-mass-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1.2px dashed color-mix(in srgb, var(--icono-label-ink) 84%, transparent);
}

.icono-label-band-cell--mass {
  gap: calc(5 / 1220 * 100cqw);
}

.icono-label-style-stack {
  display: flex;
  flex-direction: column;
  gap: calc(37 / 1220 * 100cqw);
  min-width: 0;
  padding: calc(18 / 1220 * 100cqw) calc(20 / 1220 * 100cqw);
}

.icono-label-style-pair {
  display: flex;
  flex-direction: column;
  gap: calc(4 / 1220 * 100cqw);
  min-width: 0;
}

.icono-label-hand-note--style {
  color: var(--icono-label-pen);
  font-size: var(--icono-label-hand-size);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.icono-label-alignment-body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(8 / 1220 * 100cqw);
  padding: calc(8 / 1220 * 100cqw) calc(18 / 1220 * 100cqw);
}

.icono-label-inline-note {
  color: color-mix(in srgb, var(--icono-label-ink) 70%, transparent);
  font-family: var(--icono-label-type);
  font-size: calc(9 / 1220 * 100cqw);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.icono-label-selector-row--alignment {
  position: relative;
  gap: calc(34 / 1220 * 100cqw);
  flex-wrap: nowrap;
}

.icono-label-alignment-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(6 / 1220 * 100cqw);
  width: 100%;
}

.icono-label-alignment-strike {
  position: absolute;
  left: calc(-8 / 1220 * 100cqw);
  right: calc(-10 / 1220 * 100cqw);
  top: 28%;
  height: calc(12 / 1220 * 100cqw);
  pointer-events: none;
}

.icono-label-alignment-strike::before,
.icono-label-alignment-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.3px solid color-mix(in srgb, var(--icono-label-pen) 88%, transparent);
  transform-origin: center;
}

.icono-label-alignment-strike::before {
  top: 50%;
  transform: rotate(-1.92deg);
}

.icono-label-alignment-strike::after {
  left: calc(6 / 1220 * 100cqw);
  right: calc(4 / 1220 * 100cqw);
  top: calc(50% + (1 / 1220 * 100cqw));
  opacity: 0.74;
  transform: rotate(-0.82deg);
}

.icono-label-category-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-rows: min-content;
  column-gap: calc(26 / 1220 * 100cqw);
  row-gap: 0;
  align-items: start;
  align-content: start;
  justify-content: start;
}

.icono-label-category-option {
  display: flex;
}

.icono-label-category-option--transmembrane {
  grid-column: 1;
}

.icono-label-category-option--soluble {
  grid-column: 2;
}

.icono-label-hand-note--sex-soluble,
.icono-label-hand-note--sex-transmembrane,
.icono-label-hand-note--sex-unselected {
  display: inline-block;
  min-width: calc(77 / 1220 * 100cqw);
  text-align: center;
  margin-left: calc(182 / 1220 * 100cqw);
  position: relative;
  top: calc(-5 / 1220 * 100cqw);
}

.icono-label-hand-note--politics-oncogene,
.icono-label-hand-note--politics-neutral {
  margin-left: calc(8 / 1220 * 100cqw);
}

.icono-label-hand-note--politics-contextual {
  margin-left: calc(88 / 1220 * 100cqw);
}

.icono-label-hand-note--politics-tumor-suppressor {
  margin-left: calc(190 / 1220 * 100cqw);
}

.icono-label-footer-copy {
  display: grid;
  grid-template-columns: var(--icono-label-footer-main-fr) var(--icono-label-footer-side-fr);
  min-width: 0;
}

.icono-label-footer-copy-main,
.icono-label-footer-copy-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(6 / 1220 * 100cqw) calc(12 / 1220 * 100cqw);
}

.icono-label-footer-copy-main {
  gap: calc(2 / 1220 * 100cqw);
}

.icono-label-footer-copy-side {
  gap: calc(3 / 1220 * 100cqw);
  justify-content: space-between;
  border-left: 1px solid var(--icono-label-rule);
}

.icono-label-footer-line--caption {
  font-family: var(--icono-label-type);
  font-size: calc(9 / 1220 * 100cqw);
  line-height: 1.02;
  letter-spacing: 0.12em;
}

.icono-label-footer-line--typed {
  color: #34241b;
  font-family: "Special Elite";
  font-size: calc(12 / 1220 * 100cqw);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

.icono-card--variant-lab-label .iconoplasm-tooltip-symbol,
.icono-card--variant-lab-label .iconoplasm-tooltip-name,
.icono-card--variant-lab-label .iconoplasm-tooltip-meta,
.icono-card--variant-lab-label [data-icono-card-mobile-meta],
.iconoplasm-tooltip--variant-lab-label .iconoplasm-tooltip-symbol,
.iconoplasm-tooltip--variant-lab-label .iconoplasm-tooltip-name,
.iconoplasm-tooltip--variant-lab-label .iconoplasm-tooltip-meta {
  display: none;
}

.icono-label-dossier-shell {
  display: block;
  height: 100%;
  min-height: 0;
}

.icono-label-dossier-sheet {
  height: 100%;
  min-height: 0;
}

.icono-label-mobile-peek {
  display: none;
}

@media (max-width: 720px) {
  /* Mobile lab-label cards are the same archival sheet DOM as desktop. Only the ergonomics
     change here: portrait remains primary and the canonical sheet behaves like an overlay drawer.
     Do not introduce a separate phone-only card renderer in CSS or JS. */
  .icono-grid[data-layout="bricks"] {
    scroll-snap-type: y proximity;
  }

  .icono-card--variant-lab-label.icono-card--brick {
    --icono-label-mobile-portrait-pad: 0.936rem;
    --icono-label-mobile-peek-height: 6.408rem;
    --icono-label-mobile-preview-height: 8.3rem;
    --icono-label-mobile-tab-height: 2.328rem;
    --icono-label-mobile-tab-width: 6.6rem;
    --icono-label-mobile-sheet-preview-offset: 0rem;
    --icono-label-mobile-collapse-lift: 3.672rem;
    --icono-label-mobile-band-row-height: 4.6rem;
    --icono-label-mobile-header-row-height: 2.16rem;
    --icono-label-mobile-style-row-height: 9.32rem;
    --icono-label-mobile-alignment-row-height: 12.9rem;
    /* Mobile archival card constraints from production review:
       - the collapsed tab must match the site's softer archival taste, not brutalist office tabs
       - the tab must not read as angular, asymmetric, or "windows 98"; it needs the same softer archival taste as the desktop card
       - the tab must be symmetric, gently rounded, physically attached to the dossier seam, and never sag into the sheet
       - rigid geometry test: in collapsed state, `peekTop - portraitBottom` must be ~= 0px
       - rigid geometry test: in collapsed state, `peekTop - tabBottom` must be ~= 0px
       - rigid geometry test: the tab may overshoot upward into the portrait area, but only because the
         whole collapsed dossier has moved up as one attached object; never detach the tab to fake this
       - tab symbol typography must reuse the desktop gene-symbol voice instead of a generic mono label
       - expanded state must not repeat the gene symbol already carried by the tab
       - expanded layout must be sized against measured live collisions, not eyeballed compression
       - the tab bottom must seat onto the slider seam instead of sinking into the card body
       - tab border language must match the dossier border language; no stronger, darker, or separate object outline
       - the symbol must sit optically centered in the tab, not crowd the top edge
       - rigid symbol test: tab symbol top inset must stay positive and tab symbol bottom gap must stay positive
       - collapsed voting must read as MISFIT on the left edge and FIT on the right edge
       - collapsed and expanded states are the same physical card at different vertical offsets
       - preview geometry must come from shifting the one sheet, not from hiding or swapping rows
       - all row heights are fixed archival template measurements; content does not get to resize the card skeleton */
    --icono-label-mobile-dossier-height: calc(
      var(--icono-label-mobile-band-row-height) + var(--icono-label-mobile-header-row-height) +
        var(--icono-label-mobile-style-row-height) + var(--icono-label-mobile-alignment-row-height)
    );
    --icono-label-mobile-dossier-top: calc(
      var(--icono-label-mobile-portrait-pad) + var(--icono-label-mobile-tab-height) - 1px
    );
    inline-size: 100%;
    display: block;
    position: relative;
    aspect-ratio: auto;
    block-size: auto;
    min-block-size: 0;
    max-block-size: calc(100dvh - 1.25rem);
    padding-bottom: calc(
      var(--icono-label-mobile-peek-height) + var(--icono-label-mobile-preview-height)
    );
    overflow: clip;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Opening the mobile dossier should move only the physical card sheet, not trigger browser
       scroll anchoring that yanks the page itself a few pixels. */
    overflow-anchor: none;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    transition:
      grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(var(--icono-label-mobile-swipe-offset, 0px), 0, 0)
      rotate(var(--icono-label-mobile-swipe-rotate, 0deg));
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swiping="true"] {
    transition: none;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swipe-pending="true"] {
    opacity: 0.72;
  }

  .icono-card--variant-lab-label.icono-card--brick .iconoplasm-tooltip-portrait {
    display: grid;
    grid-template-rows: minmax(0, max-content);
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    gap: 0.32rem;
    padding: var(--icono-label-mobile-portrait-pad) var(--icono-label-mobile-portrait-pad) 0.4rem;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-specimen-viewport {
    display: block;
    aspect-ratio: var(--width) / var(--height);
    min-height: 0;
    max-height: calc(
      100dvh - var(--icono-label-mobile-peek-height) - var(--icono-label-mobile-preview-height) -
        3.25rem
    );
    border: 0;
    background: transparent;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-specimen-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    gap: 0.28rem;
    padding-top: 0.18rem;
    border-top: 1px solid color-mix(in srgb, var(--icono-label-rule) 56%, transparent);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"] {
    margin-top: 0.28rem;
    padding-top: 0.3rem;
    border-top: 1px solid color-mix(in srgb, var(--icono-label-rule) 44%, transparent);
  }

  .icono-card--variant-lab-label.icono-card--brick .iconoplasm-tooltip-body {
    position: absolute;
    inset-inline: 0;
    top: var(--icono-label-mobile-dossier-top);
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    overflow-anchor: none;
    transform: translateY(
      calc(
        100% - var(--icono-label-mobile-peek-height) - var(--icono-label-mobile-preview-height) -
          var(--icono-label-mobile-collapse-lift)
      )
    );
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-expanded="true"]
    .iconoplasm-tooltip-body {
    transform: translateY(0);
  }

  .icono-card--variant-lab-label.icono-card--brick {
    /* Mobile archival card has only two writing systems:
       - one typewriter voice
       - one handwritten voice
       Do not reintroduce per-field font sizing/spacing drift here; only the small sans
       captions may vary independently. */
    --icono-label-mobile-typewriter-size: 0.672rem;
    --icono-label-mobile-hand-size: 1.2rem;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-name,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-name,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-serial,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-family,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-option-copy,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-typed-value,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-origin-text,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-metric-value {
    font-weight: 400;
    font-kerning: normal;
    font-variant-ligatures: none;
    letter-spacing: 0.03em;
    text-rendering: geometricPrecision;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-typed-value--mass {
    letter-spacing: 0.14em;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-typed-value--unit-kda {
    letter-spacing: 0.01em;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-qc-note,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-color-name,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-hand-analysis {
    font-weight: 400;
    font-kerning: normal;
    letter-spacing: 0.01em;
    text-rendering: geometricPrecision;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek {
    display: grid;
    grid-template-rows: min-content min-content min-content;
    gap: 0.08rem;
    inline-size: 100%;
    max-inline-size: 100%;
    min-height: var(--icono-label-mobile-peek-height);
    padding: 0.46rem 0.96rem 0.12rem;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-label-paper) 91%, #e7dccb 9%) 0%,
      var(--icono-label-paper) 100%
    );
    color: var(--icono-label-ink);
    text-align: left;
    border-top: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 88%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 55%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--icono-label-rule) 38%, transparent);
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-toggle {
    display: grid;
    grid-template-rows: min-content min-content;
    gap: 0.18rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    appearance: none;
    cursor: pointer;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--icono-label-pen) 64%, white 36%);
    outline-offset: -2px;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab {
    /* Stitch is only the tab-object reference. In production it must still obey the site rules:
       - no angular / asymmetric / homemade office-tab geometry
       - soft archival rounding with symmetric shoulders, using a real vector tab asset
       - bottom edge seated exactly on the dossier seam
       - expanded state must keep the entire collapse affordance inside the viewport
       - no floating gap, no downward overlap into the slider, and no off-frame overhang
       - desktop symbol typography voice ("League Spartan"), not the mono registry face */
    position: absolute;
    right: 0.82rem;
    bottom: 100%;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: var(--icono-label-mobile-tab-width);
    block-size: var(--icono-label-mobile-tab-height);
    padding: 0 0.72rem 0.1rem;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab::before,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab::after {
    content: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab-art {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab-fill {
    fill: color-mix(in srgb, var(--icono-label-paper) 95%, #eadfce 5%);
    stroke: color-mix(in srgb, var(--icono-label-rule-strong) 82%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab-highlight {
    fill: none;
    stroke: color-mix(in srgb, rgba(255, 255, 255, 0.78) 58%, transparent);
    stroke-width: 0.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab-symbol {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--icono-label-ink);
    font-family: "League Spartan";
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.09em;
    transform: translateY(0.56rem);
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-topline {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) var(--icono-label-mobile-tab-width);
    gap: 0.65rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 0.82rem;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-swipe {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.04rem;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-kicker,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-instruction,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-swipe-stamp {
    color: color-mix(in srgb, var(--icono-label-ink) 70%, transparent);
    font-family: var(--icono-label-type);
    font-size: 0.61rem;
    letter-spacing: 0.14em;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-instruction {
    justify-self: center;
    text-align: center;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-instruction--open {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-summary {
    min-height: 0;
    display: grid;
    grid-template-rows: calc(0.74rem * 1.14 * 3);
    gap: 0;
    inline-size: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-name-label {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-name {
    color: color-mix(in srgb, var(--icono-label-ink) 92%, transparent);
    font-family: "Special Elite";
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1.14;
    min-block-size: calc(var(--icono-label-mobile-typewriter-size) * 1.14 * 3);
    max-block-size: calc(var(--icono-label-mobile-typewriter-size) * 1.14 * 3);
    overflow: hidden;
    text-wrap: pretty;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-swipe-divider {
    min-width: 0;
    border-top: 1px dashed color-mix(in srgb, var(--icono-label-ink) 14%, transparent);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-box--label,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    [data-icono-vote-box] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    width: 100%;
    gap: 0;
    align-items: end;
    justify-items: stretch;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-swipe .icono-vote-btn {
    position: relative;
    min-height: 0.9rem;
    display: block;
    width: 100%;
    padding: 0 0 0.01rem;
    font-size: 0.56rem;
    line-height: 1;
    letter-spacing: 0.12em;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-copy {
    display: block;
    position: relative;
    line-height: 1;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-copy::before {
    content: "";
    position: absolute;
    inset: -0.22rem -0.42rem -0.2rem;
    border: 1px solid color-mix(in srgb, var(--icono-label-pen) 76%, transparent);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject
    .icono-vote-btn-copy::before {
    opacity: var(--icono-label-mobile-reject-circle-opacity, 0) !important;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve
    .icono-vote-btn-copy::before {
    opacity: var(--icono-label-mobile-approve-circle-opacity, 0) !important;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    padding-right: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    padding-left: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-copy-stack {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    column-gap: 0.26rem;
    align-self: center;
    width: 100%;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject
    .icono-vote-btn-copy-stack {
    grid-template-columns: 2.18rem minmax(0, 1fr);
    align-items: center;
    justify-self: stretch;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve
    .icono-vote-btn-copy-stack {
    grid-template-columns: minmax(0, 1fr) 2.18rem;
    align-items: center;
    justify-self: stretch;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-arrow {
    inline-size: 2.12rem;
    block-size: 0.66rem;
    display: block;
    align-self: center;
    overflow: visible;
    color: color-mix(in srgb, var(--icono-label-ink) 80%, transparent);
    opacity: 1;
    pointer-events: none;
    transform: translateY(0);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-arrow
    path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn-loop {
    display: block !important;
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    opacity: 0 !important;
    transition: opacity 120ms ease;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swipe-dir="left"]
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject
    .icono-vote-btn-loop,
  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swipe-dir="right"]
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve
    .icono-vote-btn-loop {
    opacity: 0.34 !important;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swipe-pending="true"][data-icono-mobile-swipe-dir="left"]
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject
    .icono-vote-btn-loop,
  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-swipe-pending="true"][data-icono-mobile-swipe-dir="right"]
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve
    .icono-vote-btn-loop {
    opacity: 0.48 !important;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn
    + .icono-vote-btn {
    border-left: 0;
    border-inline-start: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-expanded="true"]
    .icono-label-mobile-peek-instruction--closed {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-expanded="true"]
    .icono-label-mobile-peek-instruction--open {
    display: inline;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell {
    min-height: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 22%),
      linear-gradient(
        180deg,
        var(--icono-label-paper) 0%,
        color-mix(in srgb, var(--icono-label-paper) 97%, #c7b99c 3%) 100%
      );
    border-top: 1px solid color-mix(in srgb, var(--icono-label-rule) 42%, transparent);
    box-shadow: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-sheet,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-sheet-body {
    height: 100%;
    min-height: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-sheet {
    /* Mobile collapsed/expanded states must be one physical card moving vertically.
       Do not slide a second inner sheet to manufacture a different preview slice. */
    transform: none;
    transition: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-sheet-body {
    display: grid;
    grid-template-rows:
      var(--icono-label-mobile-band-row-height)
      var(--icono-label-mobile-header-row-height)
      var(--icono-label-mobile-style-row-height)
      var(--icono-label-mobile-alignment-row-height);
    align-content: start;
    min-height: var(--icono-label-mobile-dossier-height);
    block-size: var(--icono-label-mobile-dossier-height);
    background: transparent;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-row {
    grid-row: 1;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-row {
    grid-row: 2;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-row {
    grid-row: 3;
    min-block-size: var(--icono-label-mobile-style-row-height);
    block-size: var(--icono-label-mobile-style-row-height);
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-alignment-row {
    grid-row: 4;
    min-block-size: var(--icono-label-mobile-alignment-row-height);
    block-size: var(--icono-label-mobile-alignment-row-height);
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-row,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-band-row,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-row,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-alignment-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-row {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-row {
    display: block;
    min-block-size: var(--icono-label-mobile-header-row-height);
    block-size: var(--icono-label-mobile-header-row-height);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-title-block,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-title-link {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-stack {
    border-left: 0;
    border-top: 0;
    grid-template-rows: auto auto;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-caption,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-row-label {
    font-size: 0.38rem;
    letter-spacing: 0.16em;
    line-height: 1.12;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-row-label {
    padding: 0.42rem 0.8rem 0.14rem;
    border-right: 0;
    hyphens: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-symbol {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-name {
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1.08;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-registry-line {
    margin-top: 0.12rem;
    font-size: 0.33rem;
    line-height: 1.2;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-meta {
    display: contents;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto;
  }

  /* Mobile dossier keeps the desktop paper template. The top three-cell row is a fixed
     printed band, so its content must be vertically centered inside each cell instead of
     drifting based on how short a specific value is. */
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-meta-cell {
    display: grid;
    grid-template-rows: min-content min-content;
    align-content: center;
    gap: 0.08rem;
    padding: 0.28rem 0.44rem 0.24rem;
    border-bottom: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-header-meta-cell
    + .icono-label-header-meta-cell {
    padding-left: 0.42rem;
    padding-right: 0.42rem;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-serial,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-family {
    align-self: center;
    margin-top: 0;
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-filed-block {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-rows: min-content min-content;
    align-content: center;
    gap: 0.08rem;
    padding: 0.28rem 0.44rem 0.24rem;
    border-top: 0;
    border-left: 1px solid var(--icono-label-rule);
    position: relative;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-family-trait-field {
    display: grid;
    align-items: center;
    min-height: 0;
    block-size: 0.96rem;
    overflow: visible;
  }

  /* Mobile family-trait handwriting is not a centered label chip. It should float a little
     above the cell midpoint, like a pen annotation on a printed form. Do not "fix" this by
     centering the handwriting vertically; only the printed typewriter lanes get strict
     center alignment. */
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--family-trait {
    position: absolute;
    left: 0;
    top: calc(50% - 0.16rem);
    transform: translateY(-50%) rotate(-3deg);
    transform-origin: left center;
    max-width: 100%;
    pointer-events: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-qc-block {
    grid-column: 2;
    grid-row: 2;
    grid-template-rows: min-content min-content 1fr;
    gap: 0.18rem;
    padding: 0.44rem 0.54rem 0.48rem;
    border-left: 1px solid var(--icono-label-rule);
    border-top: 1px solid var(--icono-label-rule);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-qc-block
    .icono-vote-box,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-qc-block
    [data-icono-vote-box] {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick[data-icono-mobile-review-active="true"]
    .icono-label-dossier-shell
    .icono-label-qc-block {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-qc-meta-item {
    font-size: 0.46rem;
    letter-spacing: 0.12em;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-dossier-shell .icono-label-qc-note {
    min-height: 1rem;
    font-size: var(--icono-label-mobile-hand-size);
    transform: rotate(-3deg);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "noted mass"
      "category category";
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body";
    min-block-size: var(--icono-label-mobile-band-row-height);
    block-size: var(--icono-label-mobile-band-row-height);
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-row
    > .icono-label-band-grid {
    grid-area: body;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-row
    > .icono-label-row-label {
    display: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell {
    grid-template-rows: min-content min-content min-content;
    gap: 0.1rem;
    min-height: 0;
    padding: 0.08rem 0.52rem 0.12rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell
    + .icono-label-band-cell {
    border-left: 0;
    border-top: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category {
    grid-area: category;
    position: relative;
    border-top: 1px solid var(--icono-label-rule);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--icono-label-rule) 92%, transparent);
    grid-template-rows: min-content min-content;
    align-content: center;
    gap: 0.08rem;
    padding-top: 0.12rem;
    padding-bottom: 0.06rem;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted {
    grid-area: noted;
    border-top: 0;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content auto;
    grid-template-areas:
      "caption caption"
      "primary secondary";
    column-gap: 0.22rem;
    row-gap: 0.08rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--mass {
    grid-area: mass;
    border-top: 0;
    border-left: 1px solid var(--icono-label-rule);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--icono-label-rule) 92%, transparent);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-secondary,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    .icono-label-band-secondary {
    position: static;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-secondary {
    position: absolute;
    left: 50%;
    top: -0.18rem;
    z-index: 2;
    width: max-content;
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    > .icono-label-caption {
    grid-area: caption;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-primary,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    .icono-label-band-primary,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--mass
    .icono-label-band-primary {
    min-height: 0;
    padding-top: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-primary {
    align-items: start;
    padding-top: 0;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    .icono-label-band-primary {
    grid-area: primary;
    align-items: end;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    .icono-label-band-secondary,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-secondary {
    min-height: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--noted
    .icono-label-band-secondary {
    grid-area: secondary;
    align-items: end;
    justify-content: start;
    padding-bottom: 0.02rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-option-copy,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-typed-value,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-origin-text {
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1.04;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note {
    font-size: var(--icono-label-mobile-hand-size);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-category-grid,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-selector-row {
    column-gap: 0.72rem;
    gap: 0.34rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
    justify-items: center;
    align-items: start;
    align-content: start;
    column-gap: 0.72rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-category-option {
    display: grid;
    width: 100%;
    align-items: start;
    justify-content: center;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-category-option--transmembrane,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-category-option--soluble {
    grid-column: auto;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-primary,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-band-cell--category
    .icono-label-band-secondary {
    justify-content: center;
    width: 100%;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--sex-soluble,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--sex-transmembrane,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--sex-unselected {
    min-width: 0;
    margin-left: 0;
    text-align: center;
    top: 0;
    transform: rotate(-4deg);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--politics-oncogene,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--politics-neutral,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--politics-contextual,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-hand-note--politics-tumor-suppressor {
    /* Alignment handwriting also floats above the centered typed selector lane. Do not try to
       "correct" overlap by moving the typed options down or by centering the handwriting. The
       printed options stay centered; the handwritten note lives above that center line. */
    position: absolute;
    left: 50%;
    top: -0.42rem;
    z-index: 2;
    width: max-content;
    max-width: calc(100% + 2.4rem);
    margin-left: 0;
    text-align: center;
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: center top;
    pointer-events: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-mass-line {
    display: grid;
    grid-auto-flow: column;
    align-items: end;
    justify-content: start;
    gap: 0.2rem;
    min-height: 0.72rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-mass-fill {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: end;
    min-width: 3.2rem;
    gap: 0.28rem;
    padding-bottom: 0.02rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-stack {
    display: grid;
    gap: 0.38rem;
    padding: 0.54rem 0.8rem 0.62rem;
    min-block-size: calc(var(--icono-label-mobile-style-row-height) - 1.16rem);
    block-size: calc(var(--icono-label-mobile-style-row-height) - 1.16rem);
    align-content: start;
    overflow: hidden;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-pair {
    display: grid;
    gap: 0.12rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-alignment-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.44rem min-content;
    align-content: start;
    padding: 0.42rem 0.8rem 0.44rem;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-alignment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 1.44rem;
    block-size: 1.44rem;
    align-content: center;
    gap: 0.22rem;
    position: relative;
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-selector-row--alignment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.56rem;
    padding-top: 0;
    /* Raster validation on live screenshots showed the actual black typewriter ink sitting on
       the bottom edge even when the selector wrapper box was geometrically centered. The
       typewriter glyphs are bottom-heavy, so the whole typed selector row needs an optical
       lift. Validate this by screenshot pixel rows, not DOM boxes. */
    transform: translateY(-0.34rem);
    overflow: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-inline-note--spectral {
    padding-top: 0.28rem;
    border-top: 1px dashed color-mix(in srgb, var(--icono-label-ink) 22%, transparent);
    font-size: 0.46rem;
    line-height: 1.22;
  }

  /* Mobile moves the one canonical specimen footer under Alignment, but the footer itself
     must keep the desktop archival grid. Only its position changes; its internal paper
     geometry does not. */
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"] {
    --icono-label-specimen-metric-col: 6.6rem;
    --icono-label-specimen-value-col: 3.4rem;
    --icono-label-specimen-column-gap: 0.95rem;
    --icono-label-specimen-row-gap: 1rem;
    margin-top: 0;
    gap: 0.9rem;
    padding-top: 0;
    border-top: 1px solid var(--icono-label-rule);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-notes {
    gap: calc(3 / 1220 * 100cqw);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-note {
    font-size: 0.42rem;
    line-height: 1.1;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow-wrap: break-word;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-micro {
    gap: 0.85rem;
  }

  /* Mobile must keep the archival card as a fixed paper grid. Do not use flex layouts
     inside the mobile dossier footer; flex made the rows behave like floating UI chips
     instead of printed table cells and caused visual sag/drift. */
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-color-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: calc(6 / 1220 * 100cqw);
    min-width: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-specimen-swatch-hex,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-specimen-cell,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-family-trait-field,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-family-trait-field--empty,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-qc-meta,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-band-primary,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-band-secondary,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-selector-row,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-option,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-footer-copy-main,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-footer-copy-side {
    display: grid;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-band-primary,
  .icono-card--variant-lab-label.icono-card--brick .icono-label-band-secondary {
    align-items: center;
    justify-content: start;
  }

  /* Mobile lab-label cards are fixed printed forms, not elastic UI stacks. Single-line
     selector lanes must center their typed options in the lane instead of inheriting the
     desktop bottom-biased baseline seating. Handwritten marks that need to float higher are
     positioned independently above these centered typed lanes. */
  .icono-card--variant-lab-label.icono-card--brick .icono-label-selector-row {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: start;
  }

  /* Validation constraints from live production regressions:
     - validate against the fixed printed lane, never against a content-sized wrapper
     - typewriter selector/options rows should read optically centered in their cell
     - handwriting should stay above the center line unless that specific note is explicitly
       designed otherwise
     - do not let marked/unmarked content change lane height or row height
     - do not reintroduce bottom-hugging mobile type just because desktop used a lower seating */

  .icono-card--variant-lab-label.icono-card--brick .icono-label-option {
    place-items: center;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-swatch-hex {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: calc(4 / 1220 * 100cqw);
    font-size: 0.42rem;
    line-height: 1.08;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-swatch {
    inline-size: calc(16 / 1220 * 100cqw);
    block-size: calc(16 / 1220 * 100cqw);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-color-name {
    font-size: var(--icono-label-mobile-hand-size);
    line-height: 0.9;
    transform: translateY(calc(1 / 1220 * 100cqw)) rotate(-2.5deg);
    transform-origin: left top;
    min-width: 0;
    white-space: nowrap;
    align-self: start;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-decomposition {
    grid-template-columns:
      var(--icono-label-specimen-metric-col)
      var(--icono-label-specimen-value-col)
      minmax(max-content, 1fr);
    column-gap: var(--icono-label-specimen-column-gap);
    row-gap: var(--icono-label-specimen-row-gap);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-cell {
    display: grid;
    align-items: start;
    min-width: 0;
    align-content: start;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-cell--metric {
    justify-items: start;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-cell--value {
    justify-items: center;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-cell--hand {
    justify-items: end;
    min-width: max-content;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-metric {
    font-size: 0.42rem;
    line-height: 1.08;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-metric-value {
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1.08;
    text-align: center;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-specimen-footer[data-icono-mobile-footer-relocated="true"]
    .icono-label-specimen-hand-analysis {
    font-size: var(--icono-label-mobile-hand-size);
    line-height: 0.9;
    margin-inline-end: 0;
    transform: translateY(calc(-1 / 1220 * 100cqw)) rotate(-2.5deg);
    transform-origin: right top;
    align-self: start;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-specimen-viewport
    .iconoplasm-tooltip-portrait-media {
    inset: 0;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 94%, transparent);
    background: transparent;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-specimen-viewport
    .iconoplasm-tooltip-portrait-img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-alignment-strike {
    top: 34%;
    left: -0.18rem;
    right: -0.18rem;
    height: 0.64rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-copy {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-copy-main,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-copy-side {
    gap: 0.16rem;
    padding: 0.3rem 0.62rem 0.42rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-line--typed,
  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-line--caption {
    font-size: 0.48rem;
    line-height: 1.08;
    letter-spacing: 0.08em;
  }
}