/* mm-insights.css: MadeMirror merchant view (beauty-insights.html). FINAL-DESIGN §3.15, §7.4.
   Ink instrument with one paper record (the latest daylight answer). Mobile first: phone is the base,
   the sidebar appears at 900px. No motion beyond state transitions (merchant MOTION dial 3). */
@layer mm.insights {

  /* ---------- frame ---------- */
  /* Grain stays fixed to the viewport (mm-base). Stretching it over the whole document cost about a second of
     first paint on a throttled phone, so full-page captures show it only in the first screen. */
  .mi-app { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100dvh; } /* short pages (empty local view) keep the top bar at its own height */
  .mi-main {
    min-width: 0; width: 100%; max-width: 1240px; margin-inline: auto;
    padding: 22px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }

  /* Phone/tablet top bar: wordmark plus two links. */
  .insights-sidebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid var(--mm-hair-1); background: var(--mm-ink-1);
  }
  .mi-brand { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--mm-fg-1); }
  .mi-brand b { font: 500 13px/1 var(--mm-f-display); font-stretch: 125%; letter-spacing: .3em; }
  .mi-brand span { display: none; }
  .mi-nav { display: none; }
  .mi-topnav { display: flex; gap: 4px; margin-right: -10px; }
  .mi-topnav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    color: var(--mm-fg-2); font: 500 var(--mm-fs-small)/1 var(--mm-f-display); text-decoration: none;
  }
  .mi-topnav a:last-child { color: var(--mm-fg-1); }

  /* ---------- type roles local to this page ---------- */
  .mi-h2 {
    font: var(--mm-w-serif) clamp(30px, 3.4vw, 46px)/1.06 var(--mm-f-serif); letter-spacing: -.01em;
    font-optical-sizing: auto; font-variant-numeric: lining-nums tabular-nums; text-wrap: balance;
  }
  /* the heavier serif weight pushes this one line past its column; a slightly lower floor/ceiling keeps production's line count */
  #qualityH { font-size: clamp(29px, 3.05vw, 44px); }
  .mi-h3 {
    font: var(--mm-w-serif) var(--mm-fs-h3)/1.12 var(--mm-f-serif); letter-spacing: -.005em;
    font-optical-sizing: auto; font-variant-numeric: lining-nums tabular-nums; text-wrap: balance;
  }
  .mi-h2 em, .mi-h3 em {
    font-style: italic; color: var(--mm-accent-text); padding-bottom: .08em;
    transition: color var(--mm-t-shade) var(--mm-ease-out);
  }
  .panel-footnote { margin-top: 16px; max-width: 72ch; color: var(--mm-fg-3); font-size: var(--mm-fs-small); line-height: 1.5; text-wrap: pretty; }
  .mm-tag:empty { visibility: hidden; }

  /* ---------- header ---------- */
  .insights-header { display: grid; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--mm-hair-1); }
  /* The title always breaks after "shades" (explicit <br>), so the Bodoni swap never changes the line count. */
  .insights-header h1 { margin-top: 12px; font-size: clamp(34px, 9.6vw, 44px); }
  .insights-header .mm-btn { display: none; } /* phones: the top bar and the footer already link to the studio */
  [id] { scroll-margin-top: 16px; }

  /* ---------- disclosure ---------- */
  .insights-disclosure {
    display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 14px;
    border: 1px solid var(--mm-hair-2); border-radius: var(--mm-r-card); background: var(--mm-ink-1);
  }
  .insights-disclosure .mm-tag { flex: none; }
  .insights-disclosure p { color: var(--mm-fg-2); font-size: var(--mm-fs-small); line-height: 1.45; }

  /* ---------- view switch + snapshot tools ---------- */
  .mi-toolbar { display: grid; gap: 14px; margin-top: 16px; }
  .view-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--mm-hair-2); border-radius: 16px; }
  .view-switch button {
    flex: 1 1 0; min-height: 44px; padding: 6px 10px; border-radius: 12px;
    color: var(--mm-fg-2); font: 500 var(--mm-fs-small)/1.15 var(--mm-f-display); text-align: center;
    transition: background-color var(--mm-t-state) var(--mm-ease-out), color var(--mm-t-state) var(--mm-ease-out);
  }
  .view-switch button[aria-pressed="true"] { background: var(--mm-silver-1); color: var(--mm-ink-0); }
  @media (hover: hover) and (pointer: fine) { .view-switch button:not([aria-pressed="true"]):hover { color: var(--mm-fg-1); } }
  .snapshot-tools { display: grid; gap: 14px; padding: 16px; border: 1px dashed var(--mm-hair-3); border-radius: var(--mm-r-card); }
  .snapshot-tools strong { display: block; font: 500 var(--mm-fs-ui)/1.3 var(--mm-f-display); }
  .snapshot-tools .mm-btn { justify-self: start; }

  /* ---------- data cells (§3.15): never boxed, hairline dividers ---------- */
  .metric-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px;
    border-top: 1px solid var(--mm-hair-2); border-bottom: 1px solid var(--mm-hair-2);
  }
  .metric-grid:empty { min-height: 301px; }
  .metric { padding: 20px 12px 20px 16px; border-left: 1px solid var(--mm-hair-1); min-width: 0; }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--mm-hair-1); }
  .metric span {
    display: block; min-height: 2.8em; color: var(--mm-fg-3);
    font: 450 var(--mm-fs-mono)/1.4 var(--mm-f-mono); letter-spacing: .12em; text-transform: uppercase;
  }
  .metric strong {
    display: block; margin: 10px 0 8px; font: var(--mm-w-number) clamp(44px, 4.4vw, 68px)/.95 var(--mm-f-display);
    font-stretch: 118%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
  }
  .metric small { display: block; color: var(--mm-fg-3); font-size: var(--mm-fs-small); line-height: 1.4; }
  /* Local view with nothing recorded: one explanation instead of four zeros. */
  .metric.metric-empty { grid-column: 1 / -1; display: grid; justify-items: start; align-content: center; gap: 10px; padding: 24px 0; border: 0; }
  .metric-empty span { min-height: 0; }
  .metric-empty strong { margin: 0; font: var(--mm-w-serif) clamp(26px, 2.4vw, 34px)/1.1 var(--mm-f-serif); font-stretch: 100%; }
  .metric-empty p { max-width: 52ch; color: var(--mm-fg-2); font-size: var(--mm-fs-ui); line-height: 1.5; }

  /* Phone section jumps: one swipeable row, 44px targets, hidden once the sidebar exists. */
  .mi-jump {
    /* Vertical padding gives the focus ring room inside the scroller (overflow-x also clips vertically). */
    display: flex; gap: 6px; margin: 8px -16px 0; padding: 6px 16px; overflow-x: auto;
    scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 16px;
  }
  .mi-jump::-webkit-scrollbar { display: none; }
  .mi-jump a {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--mm-hair-2); border-radius: var(--mm-r-pill);
    color: var(--mm-fg-2); font: 500 var(--mm-fs-small)/1 var(--mm-f-display); text-decoration: none; white-space: nowrap;
  }

  /* ---------- shade truth ---------- */
  .mi-truth { margin-top: 56px; }
  .mi-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
  .mi-section-head .mm-tag { margin-top: 6px; }
  .mi-truth-grid { display: grid; gap: 40px; margin-top: 24px; }
  .truth-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--mm-hair-2); }
  .truth-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--mm-fg-3); font: 400 var(--mm-fs-small)/1.4 var(--mm-f-display); }
  .truth-panel-note { color: var(--mm-fg-3); font: 400 var(--mm-fs-small)/1.4 var(--mm-f-display); }
  .truth-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .truth-legend i { width: 10px; height: 10px; border-radius: 2px; }

  .truth-bar { display: flex; gap: 2px; height: 10px; border-radius: 2px; overflow: hidden; background: var(--mm-hair-1); }
  .truth-bar i { display: block; flex-basis: 0; min-width: 0; }
  .truth-legend i { display: block; flex: none; }
  /* Fixed data encoding: never the shopper's lipstick accent (a nude or cocoa lipstick would read as a foundation). */
  /* Bright = looked right, the share the large figures report; mid grey = mismatch; hatched = not sure. */
  .is-right { background: var(--mm-silver-1); }
  .is-miss { background: var(--mm-silver-3); }
  .is-unsure { background: repeating-linear-gradient(135deg, var(--mm-line-3) 0 2px, transparent 2px 5px), var(--mm-ink-2); }

  .truth-bands:empty { min-height: 545px; }
  .band-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; padding: 18px 0 16px; border-bottom: 1px solid var(--mm-hair-1); }
  .band-name strong { display: block; font: 500 var(--mm-fs-ui)/1.3 var(--mm-f-display); }
  .band-value { text-align: right; }
  .band-value b { display: block; font: var(--mm-w-number) 34px/1 var(--mm-f-display); font-stretch: 118%; font-variant-numeric: tabular-nums lining-nums; }
  .band-value b.is-none { font: 450 var(--mm-fs-mono-num)/1.6 var(--mm-f-mono); color: var(--mm-fg-3); }
  .truth-empty { display: grid; justify-items: start; gap: 10px; margin-top: 18px; padding: 20px; border: 1px dashed var(--mm-hair-3); border-radius: var(--mm-r-card); }
  .truth-empty strong { font: 500 var(--mm-fs-ui)/1.35 var(--mm-f-display); }
  .truth-empty p { max-width: 52ch; color: var(--mm-fg-2); font-size: var(--mm-fs-ui); line-height: 1.5; }
  .truth-empty-shades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 18px; }
  .truth-empty-shades span { display: flex; align-items: center; gap: 10px; color: var(--mm-fg-2); font: 500 var(--mm-fs-ui)/1.2 var(--mm-f-display); }
  .band-value small { display: block; margin-top: 4px; color: var(--mm-fg-3); font: 400 var(--mm-fs-small)/1.2 var(--mm-f-display); }
  .band-row .truth-bar, .band-counts { grid-column: 1 / -1; }
  .band-counts { color: var(--mm-fg-2); font: 400 var(--mm-fs-small)/1.45 var(--mm-f-display); font-variant-numeric: tabular-nums; }
  .band-counts span { color: var(--mm-fg-3); white-space: nowrap; }

  .truth-shades:empty { min-height: 384px; }
  .shade-row {
    display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; align-items: center; align-content: center;
    gap: 4px 14px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--mm-hair-1);
  }
  .shade-row strong { display: flex; align-items: center; gap: 10px; font: 500 var(--mm-fs-ui)/1.2 var(--mm-f-display); }
  .shade-row > span:not(.truth-bar) { font: 450 var(--mm-fs-mono-num)/1 var(--mm-f-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .shade-row small { grid-column: 2 / -1; color: var(--mm-fg-3); font: 400 var(--mm-fs-small)/1.25 var(--mm-f-display); }
  .shade-row.is-worst small { color: var(--mm-accent-text); }
  .shade-row .truth-bar { height: 8px; }

  .mm-sw {
    display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid transparent;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .45), transparent 45%) padding-box,
                linear-gradient(var(--sw), var(--sw)) padding-box, var(--mm-chrome) border-box;
  }

  /* ---------- feedback spotlight: ink band, shade strip, paper record ---------- */
  .feedback-spotlight {
    display: grid; gap: 28px; margin-top: 56px; padding: 28px 16px 20px;
    border: 1px solid var(--mm-hair-2); border-radius: var(--mm-r-sheet);
    background: radial-gradient(700px 360px at 90% 0%, rgb(237 237 241 / .045), transparent 60%), var(--mm-ink-1);
  }
  .fb-flow { display: grid; gap: 18px; min-width: 0; }

  .mm-shade-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-top: 30px; }
  /* The "Review" neighbour label sits under the strip, so it never collides with the flag above at 320 to 360px. */
  .mm-shade-strip:has(.is-next) { padding-bottom: 28px; }
  .mm-shade-strip:empty { min-height: 90px; }
  .strip-tile {
    position: relative; display: flex; align-items: flex-end; height: 32px; padding: 0 0 5px 6px; border-radius: 8px;
    background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .32), transparent 50%), var(--sw);
    box-shadow: inset 0 -3px 6px rgb(0 0 0 / .18);
  }
  .strip-tile b { font: 500 var(--mm-fs-mono)/1 var(--mm-f-mono); color: var(--mm-ink-0); font-variant-numeric: tabular-nums; }
  .strip-tile:nth-child(n+5) b { color: #fff; }
  .strip-tile em {
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    padding: 4px 6px; border-radius: 5px; white-space: nowrap;
    font: 500 var(--mm-fs-mono)/1 var(--mm-f-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  }
  .strip-tile:nth-child(-n+2) em { left: 0; transform: none; }
  .strip-tile:nth-child(n+5) em { left: auto; right: 0; transform: none; }
  .strip-tile.is-flag { outline: 2px solid var(--mm-fg-1); outline-offset: 3px; }
  .strip-tile.is-flag em { background: var(--mm-silver-1); color: var(--mm-ink-0); }
  .strip-tile.is-next { outline: 1px dashed var(--mm-silver-2); outline-offset: 3px; }
  .strip-tile.is-next em { bottom: auto; top: calc(100% + 9px); padding-inline: 0; color: var(--mm-silver-2); }

  #feedbackSpotlight {
    display: grid; justify-items: start; gap: 10px; min-height: 202px; padding: 22px 20px;
    border-radius: var(--mm-r-card); background: var(--mm-paper-0); color: var(--mm-fg-1);
    box-shadow: 0 24px 48px -28px rgb(0 0 0 / .8);
  }
  #feedbackSpotlight > span { color: var(--mm-fg-3); font: 450 var(--mm-fs-mono)/1.3 var(--mm-f-mono); letter-spacing: .12em; text-transform: uppercase; }
  #feedbackSpotlight > strong {
    font: var(--mm-w-serif) var(--mm-fs-h3)/1.12 var(--mm-f-serif); letter-spacing: -.01em;
    font-optical-sizing: auto; font-variant-numeric: lining-nums tabular-nums; text-wrap: balance;
  }
  #feedbackSpotlight > b { font: 500 var(--mm-fs-ui)/1.4 var(--mm-f-display); }
  #feedbackSpotlight > em { margin-top: -6px; color: var(--mm-fg-2); font: 400 var(--mm-fs-small)/1.4 var(--mm-f-display); font-style: normal; }
  #feedbackSpotlight > p { max-width: 52ch; color: var(--mm-fg-2); font-size: var(--mm-fs-ui); line-height: 1.5; }
  #feedbackSpotlight > .mm-link { margin-top: 2px; }

  /* ---------- confidence: one ruled line per fact, each with its own base ---------- */
  .quality-panel { display: grid; gap: 24px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--mm-hair-2); }
  .quality-signals { border-top: 1px solid var(--mm-hair-2); }
  .quality-signals:empty { min-height: 344px; }
  .q-row {
    display: grid; grid-template-columns: 4rem minmax(0, 1fr) 2.75rem; align-items: baseline; gap: 6px 12px;
    padding: 14px 0 16px; border-bottom: 1px solid var(--mm-hair-1);
  }
  .q-row > b, .q-row > em { font: 450 var(--mm-fs-mono-num)/1.35 var(--mm-f-mono); font-style: normal; font-variant-numeric: tabular-nums; }
  .q-row > em { color: var(--mm-fg-3); text-align: right; }
  .q-row strong { display: block; font: 500 var(--mm-fs-ui)/1.3 var(--mm-f-display); }
  .q-row small { display: block; margin-top: 2px; color: var(--mm-fg-3); font-size: var(--mm-fs-small); line-height: 1.4; }
  /* Share of this row's own base. Rows without a base have no --q and no bar. */
  .q-row[style]::after {
    content: ""; grid-column: 2 / -1; height: 3px; margin-top: 6px; border-radius: 2px;
    background: linear-gradient(90deg, var(--mm-silver-2) var(--q, 0%), var(--mm-hair-2) var(--q, 0%));
  }

  /* ---------- journey ---------- */
  .insights-columns { display: grid; gap: 56px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--mm-hair-2); }
  .panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
  .funnel-bars:empty { min-height: 216px; }
  .funnel-row {
    display: grid; grid-template-columns: 7.25rem minmax(0, 1fr) 3.75rem; align-items: center; gap: 14px;
    min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--mm-hair-1);
  }
  .funnel-row:first-child { border-top: 1px solid var(--mm-hair-2); }
  .funnel-row > span { color: var(--mm-fg-2); font-size: var(--mm-fs-small); line-height: 1.25; }
  .funnel-row > b { text-align: right; font: 450 var(--mm-fs-mono-num)/1 var(--mm-f-mono); font-variant-numeric: tabular-nums; }
  .bar-track {
    position: relative; height: 10px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--mm-hair-2) 0 1px, transparent 1px 10%), var(--mm-hair-1);
  }
  .bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--mm-silver-2); min-width: 0; } /* solid: length is the only signal */
  .bar-fill[style*="width:0"] { min-width: 0; display: none; }

  /* ---------- product table with row bars ---------- */
  .product-signals { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--mm-hair-2); }
  .product-signal-head, .product-signal-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: 12px; align-items: center; }
  .product-signal-head { align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--mm-hair-2); color: var(--mm-fg-3); font: 400 var(--mm-fs-small)/1.3 var(--mm-f-display); }
  .product-signal-head span:not(:first-child) { text-align: right; }
  .product-signal-row [role="rowheader"] { display: grid; gap: 4px; min-width: 0; }
  .product-signal-row [role="rowheader"] small { padding-left: 28px; color: var(--mm-fg-3); font-size: var(--mm-fs-small); line-height: 1.35; }
  .product-signal-row [role="rowheader"] small.is-truth { color: var(--mm-fg-1); }
  #productSignals:empty { min-height: 264px; }
  .product-signal-row { min-height: 62px; padding: 10px 0; border-bottom: 1px solid var(--mm-hair-1); }
  .product-signal-row strong { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 var(--mm-fs-ui)/1.25 var(--mm-f-display); }
  .product-empty { padding: 16px 0; color: var(--mm-fg-3); font-size: var(--mm-fs-small); line-height: 1.5; }
  .product-signal-row > span, .product-signal-row > b {
    position: relative; padding-bottom: 10px; text-align: right;
    font: 450 var(--mm-fs-mono-num)/1 var(--mm-f-mono); font-variant-numeric: tabular-nums;
  }
  .product-signal-row > span { color: var(--mm-fg-2); }
  /* Each count sits over its own lane: a hairline track with the bar growing left to right. */
  .product-signal-row > span::before, .product-signal-row > b::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--mm-hair-1);
  }
  .product-signal-row > span::after, .product-signal-row > b::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--mm-silver-3); width: var(--a, 0%);
  }
  .product-signal-row > b::after { background: var(--mm-silver-1); width: var(--b, 0%); }

  .mi-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
    margin-top: 56px; padding: 16px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--mm-hair-1);
  }
  .mi-footer > div { display: flex; flex-wrap: wrap; gap: 0 24px; }

  /* ---------- local view with nothing saved: one explanation, then the footer ---------- */
  .mi-empty-local :is(.mi-jump, #truth, #feedback, #confidence, #journey, #products) { display: none; }
  .mi-app:has(.mi-empty-local) .mi-nav-report { display: none; }
  .mi-empty-local .metric-grid { border-bottom: 0; }

  /* ---------- no-JS / file:// notice: fixed, so it never moves layout ---------- */
  .mm-nojs {
    position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--mm-z-toast);
    max-width: 560px; margin-inline: auto; padding: 14px 18px; border-radius: var(--mm-r-card);
    background: var(--mm-silver-1); color: var(--mm-ink-0); font: 500 var(--mm-fs-ui)/1.45 var(--mm-f-display);
    opacity: 0; visibility: hidden;
  }
  /* Shown only on a real failure: a saved file, a module that failed to load or render, or no JavaScript. Never on a timer. */
  .mm-load-failed .mm-nojs, .mm-nojs--on { opacity: 1; visibility: visible; }
  .mm-nojs-file, .mm-is-file .mm-nojs-error { display: none; }
  .mm-is-file .mm-nojs-file { display: inline; }

  /* ---------- 600+: roomier phone landscape / small tablet ---------- */
  @media (min-width: 600px) {
    .insights-disclosure { gap: 18px; padding: 12px 16px; }
    .view-switch { display: inline-flex; justify-self: start; border-radius: var(--mm-r-pill); }
    .view-switch button { flex: none; padding: 0 18px; border-radius: var(--mm-r-pill); white-space: nowrap; }
    .snapshot-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
    .snapshot-tools .mm-btn { justify-self: end; }
    .mm-shade-strip { gap: 8px; }
    .strip-tile { height: 40px; }
    .feedback-spotlight { padding: 32px 28px 28px; }
    .product-signal-head, .product-signal-row { grid-template-columns: minmax(0, 1fr) 7.5rem 7.5rem; gap: 16px; }
    .funnel-row { grid-template-columns: 9.5rem minmax(0, 1fr) 4rem; }
  }

  /* ---------- 900+: sidebar workspace, multi-column panels ---------- */
  @media (min-width: 900px) {
    .mi-app {
      grid-template-columns: 220px minmax(0, 1fr);
      /* Paint the sidebar column the full page height, so full-page captures show it end to end. */
      background: linear-gradient(90deg, var(--mm-ink-1) 0 219px, var(--mm-hair-1) 219px 220px, transparent 220px);
    }
    .insights-sidebar {
      position: sticky; top: 0; align-self: start; height: 100dvh;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 36px;
      padding: 28px 16px 24px 20px; border: 0; background: transparent; overflow-y: auto;
    }
    .mi-brand { min-height: 0; gap: 9px; }
    .mi-brand span { display: block; color: var(--mm-fg-3); font: 450 var(--mm-fs-mono)/1.2 var(--mm-f-mono); letter-spacing: .14em; text-transform: uppercase; }
    .mi-topnav { display: none; }
    .mi-nav, .mi-nav-group { display: grid; gap: 2px; }
    .mi-nav-label { padding: 0 12px 8px; color: var(--mm-fg-3); font: 450 var(--mm-fs-mono)/1.2 var(--mm-f-mono); letter-spacing: .14em; text-transform: uppercase; }
    .mi-nav-gap { margin-top: 22px; }
    .mi-nav a {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px;
      border-radius: 10px; color: var(--mm-fg-2); font: 500 var(--mm-fs-small)/1.2 var(--mm-f-display); text-decoration: none;
      transition: color var(--mm-t-state) var(--mm-ease-out), background-color var(--mm-t-state) var(--mm-ease-out);
    }
    @media (hover: hover) and (pointer: fine) { .mi-nav a:hover { color: var(--mm-fg-1); } }
    @media (pointer: coarse) { .mi-nav a { min-height: 44px; } }

    .mi-main { padding: 40px clamp(28px, 3.6vw, 56px) 0; }
    .insights-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding-bottom: 36px; }
    .insights-header h1 { font-size: clamp(48px, 4.6vw, 72px); }
    .insights-header .mm-btn { display: inline-flex; justify-self: end; }
    .mi-main { padding-top: 40px; }
    .insights-disclosure { margin-top: 22px; }
    .mi-toolbar { margin-top: 22px; }
    .mi-jump { display: none; }
    .mi-toolbar { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
    .snapshot-tools { padding: 12px 12px 12px 18px; }

    .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
    .metric-grid:empty { min-height: 164px; }
    .metric { padding: 26px 20px 24px; }
    .metric:nth-child(odd) { border-left: 1px solid var(--mm-hair-1); padding-left: 20px; }
    .metric:first-child { border-left: 0; padding-left: 0; }
    .metric:nth-child(n+3) { border-top: 0; }
    .metric span { min-height: 0; }

    .mi-truth, .feedback-spotlight { margin-top: 80px; }
    .mi-truth-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); }
    .truth-bands:empty, .truth-shades:empty { min-height: 545px; }
    .mm-shade-strip:empty { min-height: 98px; }
    #productSignals:empty { min-height: 248px; }
    .shade-row { min-height: 90px; } /* six shade rows end level with the four band rows */

    .feedback-spotlight { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(32px, 3.6vw, 48px); }
    #feedbackSpotlight { min-height: 172px; padding: 26px 28px; }

    .quality-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); margin-top: 80px; }
    .q-row { grid-template-columns: 5rem minmax(0, 1fr) 3rem; }

    .insights-columns { margin-top: 80px; }
    .insights-columns > .insights-panel { max-width: 920px; } /* same measure as the product table below */
    .product-signals { margin-top: 80px; }
    /* Keep the count lanes near the names instead of across an empty middle. */
    .product-table { max-width: 920px; }
    .product-signal-head, .product-signal-row { grid-template-columns: minmax(0, 1fr) 11rem 11rem; gap: 24px; }
  }

  @media (min-width: 1200px) {
    .mi-app { grid-template-columns: 240px minmax(0, 1fr); background: linear-gradient(90deg, var(--mm-ink-1) 0 239px, var(--mm-hair-1) 239px 240px, transparent 240px); }
    .insights-sidebar { padding-left: 24px; }
  }

  /* ---------- preferences ---------- */
  @media (prefers-reduced-motion: reduce) {
    .view-switch button, .mi-nav a { transition: none; }
  }
  @media (forced-colors: active) {
    .truth-bar, .bar-track { outline: 1px solid CanvasText; }
    .is-right, .is-miss, .is-unsure, .bar-fill, .strip-tile, .mm-sw, .q-row::after { forced-color-adjust: none; }
    .view-switch button[aria-pressed="true"] { outline: 2px solid Highlight; }
  }
  @media print {
    body.mm-grain::after, .mm-skip, .insights-sidebar, .view-switch, .snapshot-tools, .mm-nojs { display: none !important; }
    .mi-app { display: block; background: none; }
  }

  /* ---------- deep grey: the merchant view ----------
     A full dark page in deep grey (#242529), not black; raised surfaces step lighter. The latest daylight answer
     stays a white paper record. Headings are Archivo semibold: the thin Bodoni read weak on phones. */
  html { color-scheme: dark; background: #242529; }
  body {
    color-scheme: dark; background: #242529;
    --mm-bg: #242529; --mm-surface-1: #2B2C31; --mm-surface-2: #33343A; --mm-surface-3: #3D3E45;
    --mm-fg-1: var(--mm-silver-1); --mm-fg-2: #B6B6BF; --mm-fg-3: #9C9CA6; --mm-fg-4: var(--mm-silver-4);
    --mm-hair-1: rgb(237 237 241 / .1); --mm-hair-2: rgb(237 237 241 / .16); --mm-hair-3: rgb(237 237 241 / .26);
    --mm-accent-text: var(--mm-shade-ink); --mm-focus: var(--mm-shade-ink);
  }
  .insights-sidebar, .insights-disclosure, .view-switch { background: #2B2C31; }
  .feedback-spotlight { background: radial-gradient(700px 360px at 90% 0%, rgb(237 237 241 / .04), transparent 60%), #2B2C31; }
  .is-unsure { background: repeating-linear-gradient(135deg, var(--mm-hair-3) 0 2px, transparent 2px 5px), #33343A; }
  /* the paper record keeps its paper tokens */
  #feedbackSpotlight {
    color-scheme: light; background: #FFFFFF; box-shadow: 0 24px 48px -28px rgb(0 0 0 / .5);
    --mm-fg-1: var(--mm-graphite-1); --mm-fg-2: var(--mm-graphite-2); --mm-fg-3: var(--mm-graphite-3);
    --mm-hair-1: var(--mm-rule-1); --mm-hair-2: var(--mm-rule-2); --mm-hair-3: var(--mm-rule-3); --mm-accent-text: var(--mm-shade-ink-paper);
  }
  @media (min-width: 900px) {
    .mi-app { background: linear-gradient(90deg, #2B2C31 0 219px, var(--mm-hair-1) 219px 220px, transparent 220px); }
  }
  @media (min-width: 1200px) {
    .mi-app { background: linear-gradient(90deg, #2B2C31 0 239px, var(--mm-hair-1) 239px 240px, transparent 240px); }
  }
  @media print { .mi-app { background: none; } }

  /* sturdy headings and figures */
  .insights-header h1, .mi-h2, .mi-h3, .metric-empty strong, #feedbackSpotlight > strong {
    font-family: var(--mm-f-display); font-weight: 600; font-stretch: 100%; letter-spacing: -.02em;
  }
  .insights-header h1 { line-height: 1.02; }
  :is(.insights-header h1, .mi-h2, .mi-h3) em { font-family: var(--mm-f-display); font-style: normal; font-weight: 600; font-stretch: 100%; letter-spacing: inherit; }
  .metric strong, .band-value b { font-weight: 500; }
}