/* 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;
}

@property --icono-label-info-card-pull-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}

.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: clamp(3.15rem, 9.2%, 7rem);
  --icono-label-row-body-fr: minmax(0, 1fr);
  --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,
.icono-card--variant-image-only.icono-card--image-tile,
.iconoplasm-tooltip--variant-image-only {
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 100%;
  aspect-ratio: 384 / 512;
  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;
}

/* B-458 / B-464: neo-drab is intentionally a new card option, not a mutation of the
   vintage lab label. Paper exploration favored the sodium-dossier direction: dark olive
   field-paper, weak utility borders, and one sodium yellow accent. Keep this as a skin over
   the existing lab-label DOM so the mobile slider/tap behavior stays exactly where users
   already learned it, but never move these tokens into the plain lab-label selectors. */
.icono-card--variant-neo-drab,
.iconoplasm-tooltip--variant-neo-drab {
  --icono-label-paper: #171a14;
  --icono-label-paper-2: #202318;
  --icono-label-ink: #ede2b5;
  --icono-label-muted: rgba(237, 226, 181, 0.56);
  --icono-label-rule: rgba(225, 205, 126, 0.18);
  --icono-label-rule-strong: rgba(225, 205, 126, 0.32);
  --icono-label-stamp: #c06a3a;
  --icono-label-pen: #d7b642;
}

.icono-card--variant-neo-drab.icono-card--brick,
.iconoplasm-tooltip--variant-neo-drab {
  border-color: rgba(215, 182, 66, 0.5);
  background:
    radial-gradient(circle at 18% 10%, rgba(215, 182, 66, 0.16), transparent 32%),
    linear-gradient(180deg, #1b1f17 0%, #13160f 68%, #0f120d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 166, 0.05),
    0 18px 34px rgba(8, 10, 6, 0.34);
}

.icono-card--variant-neo-drab.icono-card--brick:hover,
.icono-card--variant-neo-drab.icono-card--brick-static:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 166, 0.06),
    0 18px 34px rgba(8, 10, 6, 0.34);
}

.icono-card--variant-neo-drab.icono-card--brick .iconoplasm-tooltip-portrait,
.iconoplasm-tooltip--variant-neo-drab .iconoplasm-tooltip-portrait {
  background:
    linear-gradient(180deg, rgba(237, 226, 181, 0.08), rgba(237, 226, 181, 0.02)),
    #12150f;
}

.icono-card--variant-neo-drab.icono-card--brick .iconoplasm-tooltip-body,
.iconoplasm-tooltip--variant-neo-drab .iconoplasm-tooltip-body {
  background: #171a14;
  color: var(--icono-label-ink);
}

.icono-card--variant-neo-drab .icono-label-sheet-body,
.iconoplasm-tooltip--variant-neo-drab .icono-label-sheet-body {
  background:
    linear-gradient(90deg, rgba(215, 182, 66, 0.06) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 80% 12%, rgba(74, 114, 117, 0.14), transparent 30%),
    linear-gradient(180deg, #1b1f17 0%, #15180f 100%);
  background-size: 19px 100%, auto, auto;
}

.icono-card--variant-neo-drab .icono-label-specimen-viewport,
.iconoplasm-tooltip--variant-neo-drab .icono-label-specimen-viewport {
  background:
    radial-gradient(circle at 50% 22%, rgba(215, 182, 66, 0.12), transparent 35%),
    linear-gradient(180deg, #202318, #10130d);
}

.icono-card--variant-neo-drab .iconoplasm-tooltip-portrait-img,
.iconoplasm-tooltip--variant-neo-drab .iconoplasm-tooltip-portrait-img {
  filter: saturate(0.82) contrast(1.08) sepia(0.12);
}

.icono-card--variant-neo-drab .icono-label-registry-line,
.icono-card--variant-neo-drab .icono-label-qc-meta-item,
.icono-card--variant-neo-drab .icono-label-footer-line--typed,
.icono-card--variant-neo-drab .icono-label-footer-line--caption,
.icono-card--variant-neo-drab .icono-label-specimen-note,
.icono-card--variant-neo-drab .icono-label-specimen-metric,
.icono-card--variant-neo-drab .icono-label-specimen-swatch-hex,
.iconoplasm-tooltip--variant-neo-drab .icono-label-registry-line,
.iconoplasm-tooltip--variant-neo-drab .icono-label-qc-meta-item,
.iconoplasm-tooltip--variant-neo-drab .icono-label-footer-line--typed,
.iconoplasm-tooltip--variant-neo-drab .icono-label-footer-line--caption,
.iconoplasm-tooltip--variant-neo-drab .icono-label-specimen-note,
.iconoplasm-tooltip--variant-neo-drab .icono-label-specimen-metric,
.iconoplasm-tooltip--variant-neo-drab .icono-label-specimen-swatch-hex {
  color: rgba(237, 226, 181, 0.66);
}

.icono-card--variant-neo-drab .icono-label-mobile-peek,
.iconoplasm-tooltip--variant-neo-drab .icono-label-mobile-peek {
  background:
    linear-gradient(180deg, rgba(215, 182, 66, 0.08), transparent 38%),
    #171a14;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 166, 0.09),
    inset 0 -1px 0 rgba(215, 182, 66, 0.18);
}

.icono-card--variant-neo-drab .icono-label-mobile-peek-tab-fill,
.iconoplasm-tooltip--variant-neo-drab .icono-label-mobile-peek-tab-fill {
  fill: #1b1f17;
  stroke: rgba(215, 182, 66, 0.46);
}

.icono-card--variant-neo-drab .icono-label-mobile-peek-tab-highlight,
.iconoplasm-tooltip--variant-neo-drab .icono-label-mobile-peek-tab-highlight {
  stroke: rgba(237, 226, 181, 0.28);
}

.icono-card--variant-neo-drab .icono-label-dossier-shell,
.iconoplasm-tooltip--variant-neo-drab .icono-label-dossier-shell {
  background:
    linear-gradient(90deg, rgba(215, 182, 66, 0.05) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #1b1f17, #15180f);
  background-size: 19px 100%, auto;
}

.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 blot-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%;
  box-sizing: border-box;
  margin: 0;
}

.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(8 / 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: normal;
  word-break: normal;
  hyphens: none;
}

.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;
}

.icono-mobile-card-physical-object {
  display: contents;
}

@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;
    justify-items: center;
    overflow-x: visible;
    overflow-y: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick {
    --icono-label-mobile-physical-width: 23.4rem;
    --icono-label-mobile-portrait-pad: 0.936rem;
    --icono-label-mobile-peek-height: 5.25rem;
    --icono-label-mobile-preview-height: 0rem;
    --icono-label-mobile-tab-height: 2.328rem;
    /* B-479: current public catalog max gene-symbol length is 14 chars
       (`EEF1AKMT4-ECE2`). Give the printed ID a little runway so it never ellipsizes
       while being optically centered inside the fixed right-anchored tab. */
    --icono-label-mobile-tab-symbol-capacity: 17ch;
    --icono-label-mobile-tab-width: var(--icono-label-mobile-tab-symbol-capacity);
    --icono-label-mobile-tab-safe-inset: 0.92rem;
    --icono-label-mobile-sheet-preview-offset: 0rem;
    --icono-label-mobile-collapse-lift: 3.672rem;
    --icono-label-mobile-viewport-height: auto;
    --icono-label-mobile-band-row-height: 4.6rem;
    --icono-label-mobile-header-row-height: 2.16rem;
    --icono-label-mobile-style-row-height: 17.8rem;
    --icono-label-mobile-alignment-row-height: 2.9rem;
    --icono-label-mobile-footer-row-height: 15.6rem;
    /* 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
       - the physical tab position is fixed by the archival sheet design; center the text inside it, do not move the tab
       - gene-symbol IDs must not ellipsize; widen the text runway instead of clipping the identifier
       - tracked text must compensate for the browser's trailing letter-spacing; DOM box centering is not visual ink centering
       - 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) +
        var(--icono-label-mobile-footer-row-height)
    );
    --icono-label-mobile-dossier-top: calc(
      var(--icono-label-mobile-portrait-pad) + var(--icono-label-mobile-tab-height) - 1px
    );
    inline-size: calc(var(--icono-label-mobile-physical-width) * var(--icono-label-mobile-fit-scale, 1));
    max-inline-size: none;
    display: block;
    position: relative;
    aspect-ratio: auto;
    block-size: calc(var(--icono-label-mobile-viewport-height) * var(--icono-label-mobile-fit-scale, 1));
    min-block-size: 0;
    max-block-size: none;
    padding-bottom: 0;
    overflow: clip;
    transform-origin: top left;
    transition:
      block-size 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),
      clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 220ms cubic-bezier(0.22, 1, 0.36, 1);
    filter:
      drop-shadow(0 0.045rem 0 color-mix(in srgb, var(--icono-label-rule-strong) 58%, transparent))
      drop-shadow(0 0.16rem 0.18rem rgba(53, 38, 27, 0.16));
    clip-path: polygon(
      0 0,
      100% 0,
      100% 96.7%,
      96.8% 99.9%,
      93.5% 97.2%,
      89.7% 99.4%,
      85.4% 96.8%,
      80.9% 99.8%,
      76.2% 97.1%,
      71.5% 99.5%,
      66.1% 96.9%,
      61.7% 99.7%,
      56.4% 97.3%,
      51.2% 99.9%,
      46% 96.8%,
      41.1% 99.4%,
      35.8% 97%,
      30.2% 99.8%,
      24.9% 97.2%,
      19.6% 99.5%,
      14% 96.9%,
      9.1% 99.7%,
      4.2% 97.1%,
      0 99.9%
    );
    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;
    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-expanded="true"] {
    clip-path: inset(0);
    filter: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-mobile-card-physical-object {
    position: relative;
    display: block;
    inline-size: var(--icono-label-mobile-physical-width);
    min-block-size: 0;
    overflow: visible;
    transform: scale(var(--icono-label-mobile-fit-scale, 1));
    transform-origin: top left;
  }

  .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: none;
    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: auto;
    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;
    pointer-events: auto;
    overflow-anchor: none;
    filter: drop-shadow(0 -0.24rem 0.28rem rgba(53, 38, 27, 0.16));
    --icono-label-info-card-pull-y: 0px;
    transform: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .iconoplasm-tooltip-body::before {
    content: "";
    position: absolute;
    right: var(--icono-label-mobile-tab-safe-inset);
    bottom: calc(100% - 0.08rem);
    inline-size: calc(var(--icono-label-mobile-tab-width) + 1.36rem);
    block-size: var(--icono-label-mobile-tab-height);
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-label-paper) 96%, #eadfce 4%) 0%,
      color-mix(in srgb, var(--icono-label-paper) 91%, #e7dccb 9%) 100%
    );
    border: 1px solid color-mix(in srgb, var(--icono-label-rule-strong) 72%, transparent);
    border-bottom: 0;
    border-radius: 1.16rem 1.16rem 0 0 / 1rem 1rem 0 0;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 58%, transparent),
      0 -0.18rem 0.28rem rgba(53, 38, 27, 0.1);
  }

  .icono-card--variant-lab-label.icono-card--brick {
    /* Mobile archival card has four text voices, each with one size:
       - tab symbol: League Spartan
       - typewritten values: Special Elite
       - handwritten annotations: Caveat
       - labels/captions: IBM Plex Mono
       Do not reintroduce per-field font-size drift inside those voices. */
    --icono-label-mobile-tab-symbol-size: 1.14rem;
    --icono-label-mobile-typewriter-size: 1.008rem;
    --icono-label-mobile-hand-size: 1.55rem;
    --icono-label-mobile-label-size: 0.52rem;
  }

  .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.02rem;
    inline-size: 100%;
    max-inline-size: 100%;
    min-height: var(--icono-label-mobile-peek-height);
    padding: 0.32rem 0.72rem 0.08rem;
    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::before {
    content: none;
  }

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

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-toggle {
    display: grid;
    grid-template-rows: min-content min-content;
    gap: 0.08rem;
    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: 1px dashed color-mix(in srgb, var(--icono-label-pen) 34%, transparent);
    outline-offset: -1px;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab {
    /* The visible tab material is owned by the infocard body's compound surface.
       This span only positions the gene symbol, so the tab no longer behaves like
       a separate child badge glued onto the peek strip. */
    position: absolute;
    right: var(--icono-label-mobile-tab-safe-inset);
    bottom: calc(100% + 0.02rem);
    z-index: 2;
    display: grid;
    align-items: center;
    justify-items: center;
    inline-size: calc(var(--icono-label-mobile-tab-width) + 1.36rem);
    block-size: var(--icono-label-mobile-tab-height);
    padding: 0.05rem 0.58rem 0;
    border: 0;
    background: transparent;
    overflow: visible;
    font-family: "League Spartan";
    font-size: var(--icono-label-mobile-tab-symbol-size);
  }

  .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-symbol {
    display: block;
    position: relative;
    z-index: 1;
    max-width: none;
    inline-size: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    color: var(--icono-label-ink);
    font-family: "League Spartan";
    font-size: var(--icono-label-mobile-tab-symbol-size);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    transform: none;
  }

  .icono-card--variant-lab-label.icono-card--brick .icono-label-mobile-peek-tab-symbol::before {
    content: "0";
    visibility: hidden;
  }

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

  .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;
    min-width: 0;
  }

  .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: var(--icono-label-mobile-label-size);
    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(var(--icono-label-mobile-typewriter-size) * 1.14 * 2);
    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 * 2);
    max-block-size: calc(var(--icono-label-mobile-typewriter-size) * 1.14 * 2);
    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%;
    min-width: 0;
    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: 1.24rem;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 0 0.01rem;
    font-size: var(--icono-label-mobile-typewriter-size);
    line-height: 1;
    letter-spacing: 0.08em;
  }

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

  .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: 1.02rem 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) 1.02rem;
    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: 1.44rem;
    block-size: 0.99rem;
    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 {
    block-size: auto;
    height: auto;
    min-height: 0;
    min-block-size: var(--icono-label-mobile-dossier-height);
    overflow: visible;
    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: auto;
    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)
      var(--icono-label-mobile-footer-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;
    grid-template-rows: min-content min-content;
    align-content: start;
    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 {
    grid-row: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content min-content 3.72rem;
    align-content: start;
    min-block-size: var(--icono-label-mobile-footer-row-height);
    block-size: var(--icono-label-mobile-footer-row-height);
    overflow: visible;
    border-top: 1px solid var(--icono-label-rule);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-footer-row
    > .icono-label-row-label {
    grid-row: 2;
    border-right: 0;
    border-top: 1px solid var(--icono-label-rule);
    border-bottom: 1px solid var(--icono-label-rule);
    padding: 0.32rem 0.8rem 0.16rem;
  }

  .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: var(--icono-label-mobile-label-size);
    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: var(--icono-label-mobile-label-size);
    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: var(--icono-label-mobile-label-size);
    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: -1.04rem;
    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: center;
    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: center;
    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-mass-unit-stack {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: baseline;
    gap: 0.18rem;
    inline-size: max-content;
    line-height: 1;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-mass-unit-stack
    .icono-label-hand-note--unit {
    position: relative;
    top: 0.02rem;
    z-index: 2;
    pointer-events: none;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-stack {
    display: grid;
    grid-template-rows: repeat(5, 3.12rem);
    gap: 0.24rem;
    padding: 0.52rem 0.56rem 0.54rem;
    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: visible;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(5.9rem, 0.82fr);
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    min-block-size: 3.12rem;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-pair
    .icono-label-origin-text {
    min-width: 0;
    max-width: 100%;
    line-height: 1.02;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-pair
    .icono-label-hand-note--style {
    justify-self: end;
    width: 100%;
    max-width: 100%;
    line-height: 0.92;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    transform: rotate(-3deg);
  }

  .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: 0.86rem;
    align-content: start;
    padding: 0.18rem 0.8rem 0.22rem;
    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);
    grid-template-rows: 0.86rem;
    min-block-size: 0.86rem;
    block-size: 0.86rem;
    align-content: start;
    gap: 0.12rem;
    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-alignment-grid
    .icono-label-hand-note--politics {
    position: absolute;
    left: 50%;
    top: -0.42rem;
    z-index: 2;
    justify-self: center;
    align-self: start;
    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-inline-note--spectral {
    padding-top: 0.28rem;
    border-top: 1px dashed color-mix(in srgb, var(--icono-label-ink) 22%, transparent);
    font-size: var(--icono-label-mobile-label-size);
    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: 5.35rem;
    --icono-label-specimen-value-col: 3.1rem;
    --icono-label-specimen-hand-col: minmax(8.6rem, 1fr);
    --icono-label-specimen-column-gap: 0.52rem;
    --icono-label-specimen-row-gap: 0.34rem;
    grid-row: 1;
    display: grid;
    grid-template-columns:
      var(--icono-label-specimen-metric-col)
      var(--icono-label-specimen-value-col)
      var(--icono-label-specimen-hand-col);
    grid-template-rows: min-content min-content repeat(3, min-content);
    align-content: start;
    margin-top: 0;
    column-gap: var(--icono-label-specimen-column-gap);
    row-gap: 0.52rem;
    padding: 0.42rem 0.62rem 0.56rem;
    border-top: 1px solid color-mix(in srgb, var(--icono-label-rule) 78%, transparent);
  }

  .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 {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    gap: 0.12rem;
  }

  .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: var(--icono-label-mobile-label-size);
    line-height: 1.08;
    letter-spacing: 0.03em;
    max-width: 100%;
    white-space: normal;
    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 {
    display: contents;
  }

  /* 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 {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns:
      var(--icono-label-specimen-metric-col)
      var(--icono-label-specimen-value-col)
      var(--icono-label-specimen-hand-col);
    align-items: baseline;
    column-gap: var(--icono-label-specimen-column-gap);
    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: var(--icono-label-mobile-typewriter-size);
    line-height: 1.08;
    grid-column: 1 / span 2;
    justify-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-swatch {
    inline-size: 0.48rem;
    block-size: 0.48rem;
  }

  .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 {
    grid-column: 3;
    justify-self: start;
    font-size: var(--icono-label-mobile-hand-size);
    line-height: 0.9;
    transform: translateY(-0.02rem) 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 {
    display: contents;
    grid-template-columns:
      var(--icono-label-specimen-metric-col)
      var(--icono-label-specimen-value-col)
      var(--icono-label-specimen-hand-col);
    column-gap: 0;
    row-gap: 0;
  }

  .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: baseline;
    min-width: 0;
    align-content: center;
    min-block-size: 1.34rem;
  }

  .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--row-1 {
    grid-row: 3;
  }

  .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--row-2 {
    grid-row: 4;
  }

  .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--row-3 {
    grid-row: 5;
  }

  .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: start;
    min-width: 0;
  }

  .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: var(--icono-label-mobile-label-size);
    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(-0.04rem) rotate(-2.5deg);
    transform-origin: left center;
    align-self: baseline;
    text-align: left;
  }

  .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-row: 3;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: 0;
    overflow: visible;
  }

  .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.1rem;
    padding: 0.26rem 0.62rem 0.3rem;
  }

  .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-family: var(--icono-label-type);
    font-size: var(--icono-label-mobile-label-size);
    line-height: 1.08;
    letter-spacing: 0.07em;
  }

  .icono-card--variant-neo-drab.icono-card--brick {
    --icono-label-paper: #111813;
    --icono-label-paper-2: #263342;
    --icono-label-ink: #d7d2bd;
    --icono-label-muted: rgba(215, 210, 189, 0.62);
    --icono-label-rule: rgba(216, 182, 63, 0.2);
    --icono-label-rule-strong: rgba(216, 182, 63, 0.38);
    --icono-label-stamp: #b4633c;
    --icono-label-pen: #d8b63f;
    --icono-label-type: "IBM Plex Mono";
    --icono-label-hand: "Special Elite";
    --icono-label-mobile-peek-height: 6.9rem;
    --icono-label-mobile-preview-height: 8.9rem;
    --icono-label-mobile-tab-height: 2.56rem;
    --icono-label-mobile-tab-width: 7.5rem;
    --icono-label-mobile-typewriter-size: 0.62rem;
    --icono-label-mobile-hand-size: 0.78rem;
    color: var(--icono-label-ink);
    border-color: rgba(216, 182, 63, 0.44);
    background:
      radial-gradient(circle at 18% 0%, rgba(216, 182, 63, 0.16), transparent 28%),
      linear-gradient(135deg, rgba(111, 125, 142, 0.18), transparent 42%),
      #07090d;
    box-shadow:
      inset 0 0 0 1px rgba(215, 210, 189, 0.06),
      0 1.2rem 2.8rem rgba(7, 9, 13, 0.42);
  }

  .icono-card--variant-neo-drab.icono-card--brick::before {
    content: "NEO-MOSKVA";
    position: absolute;
    inset-inline: 0.72rem;
    top: 0.62rem;
    z-index: 2;
    color: rgba(111, 125, 142, 0.2);
    font-family: "League Spartan", "Bahnschrift", "Arial Narrow", sans-serif;
    font-size: clamp(2.2rem, 16vw, 4.6rem);
    font-weight: 800;
    line-height: 0.76;
    letter-spacing: -0.07em;
    text-transform: uppercase;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .icono-card--variant-neo-drab.icono-card--brick::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
      repeating-linear-gradient(0deg, rgba(215, 210, 189, 0.035) 0 1px, transparent 1px 5px),
      radial-gradient(circle at 80% 16%, rgba(216, 182, 63, 0.12), transparent 20%);
    opacity: 0.9;
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  .icono-card--variant-neo-drab.icono-card--brick .iconoplasm-tooltip-portrait {
    background:
      linear-gradient(180deg, rgba(38, 51, 66, 0.58), rgba(7, 9, 13, 0.2) 42%),
      #0b0e10;
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-specimen-viewport {
    border: 1px solid rgba(216, 182, 63, 0.34);
    background:
      linear-gradient(180deg, rgba(216, 182, 63, 0.1), transparent 22%),
      linear-gradient(90deg, rgba(111, 125, 142, 0.15), transparent 32%),
      #0b0e10;
    box-shadow:
      inset 0 0 0 1px rgba(215, 210, 189, 0.06),
      0 0.42rem 1.4rem rgba(7, 9, 13, 0.28);
  }

  .icono-card--variant-neo-drab.icono-card--brick .iconoplasm-tooltip-portrait-img {
    filter: saturate(0.72) contrast(1.16) sepia(0.08) brightness(0.9);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek {
    background:
      linear-gradient(90deg, rgba(216, 182, 63, 0.94) 0 0.34rem, transparent 0.34rem 100%),
      radial-gradient(circle at 84% 12%, rgba(216, 182, 63, 0.18), transparent 28%),
      repeating-linear-gradient(0deg, rgba(215, 210, 189, 0.035) 0 1px, transparent 1px 5px),
      linear-gradient(180deg, #141b19, #0b0f0d);
    padding-top: 1.02rem;
    border-top: 1px solid rgba(216, 182, 63, 0.48);
    box-shadow:
      inset 0 1px 0 rgba(215, 210, 189, 0.08),
      inset 0 -1px 0 rgba(216, 182, 63, 0.26),
      0 -0.5rem 1.2rem rgba(7, 9, 13, 0.34);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek::before {
    content: "";
    position: absolute;
    left: 0.98rem;
    right: 7.8rem;
    top: 0.44rem;
    border-top: 1px dashed rgba(216, 182, 63, 0.42);
    pointer-events: none;
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-tab {
    right: 0.64rem;
    filter: drop-shadow(0 0.42rem 0.42rem rgba(7, 9, 13, 0.3));
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-tab-fill {
    fill: #d8b63f;
    stroke: rgba(7, 9, 13, 0.68);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-tab-highlight {
    stroke: rgba(255, 245, 179, 0.34);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-tab-symbol {
    color: #07090d;
    font-family: "Bahnschrift", "Arial Narrow", "League Spartan", sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    transform: translateY(0.62rem);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-kicker,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-instruction,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-swipe-stamp {
    color: rgba(215, 210, 189, 0.78);
    font-family: "Bahnschrift", "Arial Narrow", "IBM Plex Mono", sans-serif;
    font-weight: 700;
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-name {
    color: rgba(215, 210, 189, 0.9);
    font-family: "IBM Plex Mono";
    text-transform: uppercase;
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-mobile-peek-swipe-divider {
    border-top-color: rgba(216, 182, 63, 0.26);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell {
    background:
      linear-gradient(90deg, rgba(216, 182, 63, 0.08) 0 1px, transparent 1px 100%),
      repeating-linear-gradient(0deg, rgba(215, 210, 189, 0.03) 0 1px, transparent 1px 6px),
      linear-gradient(180deg, #141b19, #0d1210);
    background-size: 17px 100%, auto, auto;
    border-top-color: rgba(216, 182, 63, 0.42);
    box-shadow: inset 0 0.42rem 0 rgba(216, 182, 63, 0.06);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-caption,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-row-label,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-qc-meta-item,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-specimen-note,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-specimen-metric {
    color: rgba(215, 210, 189, 0.64);
    font-family: "Bahnschrift", "Arial Narrow", "IBM Plex Mono", sans-serif;
    font-weight: 700;
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-option-copy,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-typed-value,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-origin-text,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-serial,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-family,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-specimen-metric-value {
    color: rgba(215, 210, 189, 0.95);
    font-family: "IBM Plex Mono";
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-hand-note,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-qc-note,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-specimen-color-name,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-specimen-hand-analysis {
    color: #d8b63f;
    font-family: "Special Elite";
    text-shadow: 0 0 0.5rem rgba(216, 182, 63, 0.18);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-band-cell,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-filed-block,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-qc-block,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-style-row,
  .icono-card--variant-neo-drab.icono-card--brick .icono-label-dossier-shell .icono-label-alignment-row {
    border-color: rgba(216, 182, 63, 0.2);
  }

  .icono-card--variant-neo-drab.icono-card--brick .icono-vote-btn,
  .icono-card--variant-neo-drab.icono-card--brick .icono-vote-btn-copy,
  .icono-card--variant-neo-drab.icono-card--brick .icono-vote-btn-arrow {
    color: var(--icono-label-ink);
  }
}