/* 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 delivery is generated from font-contract.json. The website installs embedded
   FontFace objects before revealing its shell; the extension generates packaged
   @font-face rules. This artboard stylesheet owns typography use, not transport. */

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

/* A single semantic equivalent keeps the visual card compact while giving assistive
   technology and DOM-reading agents labelled character facts. Do not use display:none,
   visibility:hidden, hidden, or aria-hidden here: those would erase the equivalent from
   the accessibility tree as well as from non-visual readers. */
.icono-card-semantic-profile {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.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);
  font-family: var(--icono-label-type), monospace;
}

/* Voting ink belongs to the printed-card surface, not the page theme switcher.
   Quartz uses saved-theme while older site code also exposes data-theme; during a
   transition those attributes can briefly disagree. The paper component must remain
   internally coherent instead of inheriting pale dark-mode ink onto light paper. */
.icono-card--variant-lab-label.icono-card--brick .icono-vote-box--label,
.icono-card--variant-neo-drab.icono-card--brick .icono-vote-box--label,
.iconoplasm-tooltip.iconoplasm-tooltip--variant-lab-label .icono-vote-box--label,
.iconoplasm-tooltip.iconoplasm-tooltip--variant-neo-drab .icono-vote-box--label {
  --icono-vote-ink: var(--icono-label-ink);
  --icono-vote-muted: color-mix(in srgb, var(--icono-label-ink) 68%, transparent);
}

.icono-card--variant-lab-label.icono-card--brick .icono-vote-box--label .icono-vote-btn,
.icono-card--variant-neo-drab.icono-card--brick .icono-vote-box--label .icono-vote-btn,
.iconoplasm-tooltip.iconoplasm-tooltip--variant-lab-label
  .icono-vote-box--label
  .icono-vote-btn,
.iconoplasm-tooltip.iconoplasm-tooltip--variant-neo-drab
  .icono-vote-box--label
  .icono-vote-btn {
  color: var(--icono-vote-ink);
}

.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: var(--light);
  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: var(--light);
}

.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)
    );
  opacity: 0;
  pointer-events: none;
}

.icono-image-only-link--loaded::after {
  opacity: 1;
}

.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-loading-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: 46%;
  max-inline-size: 176px;
  aspect-ratio: 1 / 1;
  background: url("/static/iconoplasm/icons/icon-512.png") center / contain no-repeat;
  opacity: 0.28;
  transform: translate(-50%, -54%);
  pointer-events: none;
}

.icono-image-only-media-stage--loaded .icono-image-only-loading-mark {
  opacity: 0;
}

.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: blot-only cards are fixed 384x512 physical artboards. The portrait must
     auto-zoom until it covers that artboard; preserving the full bitmap with contain
     creates visible letterboxing on portraits whose source ratio is not exactly 3:4. */
  object-fit: cover;
  object-position: center center;
  opacity: 0;
}

.icono-image-only-photo--loaded {
  opacity: 1;
}

.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;
  opacity: 0;
  pointer-events: none;
}

.icono-image-only-link--loaded .icono-image-only-overlay {
  opacity: 1;
}

.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;
  display: grid;
  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: 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", "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: calc(60 / 1220 * 100cqw);
  font-weight: 800;
  letter-spacing: -0.05em;
  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;
}

/* ARCHITECTURE FENCE [IPD-003]: these four strings are decorative printed
 * legends. Keep them out of DOM text so browsing agents receive only the
 * resolved accessible mapping exposed by the parent fields. */
.icono-label-option--transmembrane .icono-label-option-copy::before {
  content: "TRANSMEMBRANE";
}

.icono-label-option--soluble .icono-label-option-copy::before {
  content: "SOLUBLE";
}

.icono-label-option--oncogene .icono-label-option-copy::before {
  content: "ONCOGENE";
}

.icono-label-option--tumor-suppressor .icono-label-option-copy::before {
  content: "TUMOR SUPPRESSOR";
}

.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: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: calc(34 / 1220 * 100cqw);
  min-width: 0;
  padding: calc(18 / 1220 * 100cqw) calc(20 / 1220 * 100cqw);
}

.icono-label-style-stack--two-column {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

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

.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: var(--icono-label-ink);
  font-family: "Special Elite";
  font-size: calc(12 / 1220 * 100cqw);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

.icono-label-print-copy-request {
  display: block;
  inline-size: max-content;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.icono-label-print-copy-request:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.12em;
}

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

  /* The gene hero is already complete in the edge response, so its closed mobile
     geometry must also be complete before JavaScript measures the physical card.
     The nearest query container is `.icono-gene-lead`; its inline size gives the
     same available-width result as the runtime geometry pass. The remaining math
     is intrinsic to the portrait dimensions carried by the server-rendered card.
     Runtime measurements still replace these values after fonts and account-only
     controls settle, but the replacement is now sub-pixel instead of a visible jump. */
  .icono-gene-lead .icono-card--variant-lab-label.icono-card--brick {
    --icono-label-mobile-fit-scale: clamp(
      0.78,
      calc(100cqi / var(--icono-label-mobile-physical-width)),
      1.9
    );
    --icono-label-mobile-dossier-top: calc(
      1px + var(--icono-label-mobile-portrait-pad) +
        (
          var(--icono-label-mobile-physical-width) -
            (2 * var(--icono-label-mobile-portrait-pad))
        ) * var(--height) / var(--width) + 0.4rem
    );
    --icono-label-mobile-viewport-height: calc(
      var(--icono-label-mobile-dossier-top) + 5.65rem
    );
  }

  .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;
    min-height: var(--icono-label-mobile-target-size, 44px);
  }

  .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: var(--icono-label-mobile-target-size, 44px);
    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;
    color: inherit;
    text-decoration: none;
    align-content: center;
  }

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

  .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: var(--icono-label-mobile-target-size, 44px);
    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;
    flex: 1 1 auto;
    min-width: 0;
    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: flex;
    align-items: center;
    gap: 0.26rem;
    align-self: center;
    width: 100%;
    min-width: 0;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--reject
    .icono-vote-btn-copy-stack {
    justify-content: flex-start;
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-mobile-peek-swipe
    .icono-vote-btn--approve
    .icono-vote-btn-copy-stack {
    justify-content: flex-end;
  }

  .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;
    flex: 0 0 1.44rem;
    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: 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-columns: minmax(0, 1fr);
    column-gap: 0.44rem;
    row-gap: 0;
    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-stack--two-column {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .icono-card--variant-lab-label.icono-card--brick
    .icono-label-dossier-shell
    .icono-label-style-column {
    display: grid;
    grid-auto-rows: 3.12rem;
    gap: 0.24rem;
    align-content: start;
    min-width: 0;
    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);
  }
}