/* FTN Display — one standardized public screen. Dark, ambient, built for a 3-second glance and a
   20-minute stare. Fibonacci spacing rhythm (8/13/21/34/55/89/144) governs hierarchy here rather
   than the site's general 8pt token scale, since this surface is read from across a room. */

.display-screen {
  background: var(--color-black);
  color: var(--color-white);
  padding: 21px max(13px, calc((100vw - 1400px) / 2)) 55px;
}

.display-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.display-topbar__id {
  display: flex;
  align-items: baseline;
  gap: 13px 21px;
  flex-wrap: wrap;
  min-width: 0;
}

.display-topbar__mark {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-red-on-dark);
  font-size: 14px;
}

.display-topbar__clock {
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 700;
}

.display-topbar__weather {
  color: var(--color-silver);
  font-size: 14px;
}

.display-topbar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 13px;
}

/* The ftnplatform.org/display URL is a nice-to-have context cue, not load-bearing information --
   the first thing to drop on a narrow phone rather than force the real controls (orientation,
   Clock Mode, Full Screen) to wrap or overflow. */
@media (max-width: 480px) {
  .display-topbar__url {
    display: none;
  }
}

.display-topbar__url {
  color: var(--color-silver);
  font-size: 12px;
}

.display-lede {
  max-width: 89ch;
  color: var(--color-silver);
  font-size: 14px;
  line-height: 1.5;
  margin: 13px 0 21px;
}

.display-lede a { color: var(--color-red-on-dark); }

/* National Pulse — compact strip, not a card wall */
.display-pulse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 21px;
}

@media (min-width: 700px) {
  .display-pulse { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .display-pulse { grid-template-columns: repeat(6, 1fr); }
}

/* Orientation must have a real, immediately visible effect on the normal page too -- not only
   once Full Screen is entered. A founder clicking Landscape/Portrait needs to see the layout
   actually change right away; the fullscreen-only rules further down remain for the dedicated
   kiosk composition, this is the on-page preview responding to the same choice. Higher
   specificity than the width-based rules above (attribute selector on body + the class) and
   later in source order, so it wins regardless of the actual viewport width. */
body[data-display-orientation="portrait"] .display-pulse {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-display-orientation="landscape"] .display-pulse {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body[data-display-orientation="portrait"] .display-tvnow {
  grid-template-columns: minmax(0, 1fr);
}

body[data-display-orientation="landscape"] .display-tvnow {
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  align-items: start;
}

body[data-display-orientation="portrait"] .display-screen {
  max-width: 620px;
  margin-inline: auto;
}

.pulse-card {
  min-width: 0;
  overflow-wrap: break-word;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 13px;
}

.pulse-card--empty { opacity: 0.72; }

.pulse-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-silver);
  margin-bottom: 8px;
}

.pulse-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.pulse-card__value span { font-size: 13px; font-weight: 600; color: var(--color-silver); }

.pulse-card__note {
  font-size: 11px;
  color: var(--color-silver);
  margin-top: 4px;
}

.pulse-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 13px;
}

.pulse-card__meta .trust-badge { margin-right: auto; }

/* The shared .trust-badge is tuned for a white Trust Card modal -- a solid pale fill reads as
   loud, dominant chrome on this card's near-black background, competing with the actual number
   for attention on a screen meant to be glanced at, not audited. Recede it to a small outlined
   label; the classification and Trust Card link stay, just no longer the loudest thing on the
   card. Color is intentionally overridden to one neutral tone regardless of classification --
   currentColor here would mean "modelled" renders in FTN's own brand red, which reads as the
   loudest, most brand-urgent thing on the card and defeats the recede. The classification text
   itself (MODELLED/ILLUSTRATIVE/etc.) stays exactly as truthful; only its color is neutralized. */
.pulse-card__meta .trust-badge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-silver) !important;
  padding: 2px 8px;
  font-size: 10px;
  margin-bottom: 0;
}

/* FTN TV NOW — the visually dominant surface, per the golden-ratio composition brief */
.display-tvnow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  margin-bottom: 21px;
  min-width: 0;
}

@media (min-width: 900px) {
  .display-tvnow { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: start; }
}

.display-tvnow__player {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  overflow: hidden;
  background: #000;
}

.display-tvnow__video { aspect-ratio: 16 / 9; background: #000; }
.display-tvnow__video iframe { width: 100%; height: 100%; border: 0; }

.ftn-media-fallback {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.ftn-media-fallback > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.ftn-media-fallback__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 21px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
}

.ftn-media-fallback__badge {
  border-radius: 8px;
  margin-bottom: 4px;
}

.ftn-media-fallback__eyebrow {
  color: var(--color-red-on-dark);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ftn-media-fallback__overlay h3 { font-size: 22px; margin: 0; }
.ftn-media-fallback__overlay p { margin: 0; color: var(--color-silver); font-size: 13px; }

.display-tvnow__meta { padding: 13px; }

.display-tvnow__eyebrow {
  display: block;
  color: var(--color-red-on-dark);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.display-tvnow__meta strong { display: block; font-size: 18px; margin-top: 4px; }
.display-tvnow__meta span { color: var(--color-silver); font-size: 13px; }

.display-next {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  padding: 13px;
}

.display-next__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-silver);
  margin-bottom: 8px;
}

.display-next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.display-next li { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 8px; font-size: 13px; }
.display-next li:first-child { border-top: 0; padding-top: 0; }
.display-next li strong { display: block; }
.display-next li span { color: var(--color-silver); font-size: 12px; }
.display-next__empty { color: var(--color-silver); }

.display-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  margin-bottom: 21px;
}

@media (min-width: 900px) {
  .display-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.display-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  padding: 13px;
}

.display-panel h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-silver);
  margin-bottom: 13px;
}

.condition-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.condition-row:first-child { border-top: 0; padding-top: 0; }

.condition-row__note {
  color: var(--color-silver);
  font-size: 12px;
}

/* Classification badge + Trust Card trigger, receded the same way as the Pulse strip's own
   (css comment above .pulse-card__meta .trust-badge explains why: a solid pale badge or brand-
   red "modelled" text would out-shout the number itself on a near-black glance-read surface). */
.condition-row .trust-badge,
.world-economy__row .trust-badge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-silver) !important;
  padding: 2px 8px;
  font-size: 10px;
  margin-bottom: 0;
  order: 3;
}

.condition-row .trust-trigger,
.world-economy__row .trust-trigger {
  order: 4;
}

/* Illustrative values get one honest, unmissable visual tell wherever they appear on Display --
   a dashed rather than solid badge outline -- distinguishing "no live source, placeholder figure"
   from FTN Modelled/Derived/Estimated at the same glance a viewer reads the number itself. This
   changes presentation only; it never touches classification data (js/indicators-data.js is
   explicit that classification is never bulk-relabelled -- see ANALYTICS_STANDARD.md §1). */
.display-screen .trust-badge--demo {
  border-style: dashed !important;
}

.display-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.display-links a { color: var(--color-white); font-size: 13px; text-decoration: none; }
.display-links a:hover { color: var(--color-red-on-dark); }

.display-world {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 21px;
}

.display-world h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-silver);
  margin-bottom: 13px;
}

.display-world__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

@media (min-width: 700px) {
  .display-world__grid { grid-template-columns: 1.618fr 1fr; }
}

.display-world__zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 13px;
}

.world-zone {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 13px;
  text-align: center;
}

.world-zone span { display: block; color: var(--color-silver); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.world-zone strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 4px; }

.world-economy__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.world-economy__row:first-child { border-top: 0; padding-top: 0; }
.world-economy__row--muted { color: var(--color-silver); }

.display-world__note {
  color: var(--color-silver);
  font-size: 12px;
  margin-top: 13px;
}

.display-world__note a { color: var(--color-red-on-dark); }

.display-methodology {
  color: var(--color-silver);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 34px;
  max-width: 89ch;
}

.display-ticker {
  display: none;
}

/* Full-screen broadcast state — a genuine single fixed screen, not a scrolling webpage with
   chrome hidden. Recomposed as one CSS Grid pinned to 100vh: a persistent topbar, FTN TV NOW as
   the dominant zone (golden-ratio width against the secondary column), National Pulse as the
   secondary zone, a rotating tertiary zone (Live Conditions / What's Happening / Community /
   World Now cycle through the same slot rather than stacking and forcing a scrollbar), and a
   persistent bottom ticker. Verified to hold document.documentElement.scrollHeight/scrollWidth
   within window.innerHeight/innerWidth at 1920x1080, 1366x768, 1280x720 and 1024x768. */
body.display-fullscreen {
  overflow: hidden;
}

body.display-fullscreen .site-header,
body.display-fullscreen .site-footer,
body.display-fullscreen .display-lede,
body.display-fullscreen .display-methodology {
  display: none;
}

body.display-fullscreen .display-screen {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  padding: 13px 21px;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "tv     pulse"
    "tv     rotate"
    "ticker ticker";
  gap: 13px;
}

body.display-fullscreen .display-topbar {
  grid-area: topbar;
  padding-bottom: 8px;
  min-height: 0;
}

body.display-fullscreen .display-topbar__clock { font-size: 26px; }

body.display-fullscreen .display-tvnow {
  grid-area: tv;
  grid-template-columns: 1fr;
  min-height: 0;
  min-width: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  /* The >=900px desktop rule sets align-items: start for its side-by-side player/next-list
     columns; that rule doesn't stop applying just because this block changes flex-direction, so
     without an explicit reset here the player shrinks to its content width instead of filling
     the tv grid area -- the actual cause of the large dead space next to the broadcast panel. */
  align-items: stretch;
}

body.display-fullscreen .display-next { display: none; }

body.display-fullscreen .display-tvnow__player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.display-fullscreen .display-tvnow__video {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

body.display-fullscreen .display-tvnow__meta { flex: 0 0 auto; }

body.display-fullscreen .display-pulse {
  grid-area: pulse;
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
}

body.display-fullscreen .pulse-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

body.display-fullscreen .pulse-card__value { font-size: 22px; }

/* Rotating tertiary zone: .display-grid is "unwrapped" (display: contents) so its three panel
   children become direct grid items sharing the same "rotate" area as .display-world -- only the
   one carrying .is-rotate-active is actually shown, toggled by js/display-page.js. Nothing here
   duplicates real data; it only decides which already-rendered panel is visible right now. */
body.display-fullscreen .display-grid {
  display: contents;
}

body.display-fullscreen .display-panel,
body.display-fullscreen .display-world {
  grid-area: rotate;
  display: none;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  border-top: 0;
  padding-top: 13px;
}

body.display-fullscreen .display-panel.is-rotate-active,
body.display-fullscreen .display-world.is-rotate-active {
  display: flex;
  flex-direction: column;
}

body.display-fullscreen .display-world .display-world__grid { flex: 1; min-height: 0; }
body.display-fullscreen .display-world__note { display: none; }

body.display-fullscreen .display-ticker {
  grid-area: ticker;
  display: flex;
  align-items: center;
  min-height: 0;
  height: 28px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

body.display-fullscreen .display-ticker__track {
  display: inline-block;
  padding-left: 100%;
  font-size: 13px;
  color: var(--color-silver);
  animation: display-ticker-scroll 40s linear infinite;
}

@keyframes display-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .display-screen * { animation: none !important; transition: none !important; }
  body.display-fullscreen .display-ticker__track { padding-left: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Orientation toggle -- Auto (default, follows the real viewport below), Landscape and Portrait
   are explicit overrides for a commercial screen whose mounting hardware rotates the physical
   panel without changing the resolution the browser reports. */
.display-orientation {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.display-orientation__opt {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-silver);
  padding: 5px 11px;
  font: 700 11px/1 var(--font-body, Inter, sans-serif);
  cursor: pointer;
}

.display-orientation__opt.is-active {
  background: var(--color-white);
  color: var(--color-black);
}

/* Portrait fullscreen composition -- a genuinely different layout for a vertically installed
   screen, not the landscape grid squeezed into a narrow width (which clips pulse-card content
   and leaves the signature TV panel a thin sliver). Single column, TV kept as the dominant zone.
   Explicit "portrait" always applies; "auto" only applies it when the viewport itself is
   portrait, so a screen reporting landscape resolution isn't force-fit into this layout. */
body.display-fullscreen[data-display-orientation="portrait"] .display-screen {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1.35fr 1fr 0.85fr auto;
  grid-template-areas:
    "topbar"
    "tv"
    "pulse"
    "rotate"
    "ticker";
}

body.display-fullscreen[data-display-orientation="portrait"] .display-pulse {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

@media (orientation: portrait) {
  body.display-fullscreen[data-display-orientation="auto"] .display-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1.35fr 1fr 0.85fr auto;
    grid-template-areas:
      "topbar"
      "tv"
      "pulse"
      "rotate"
      "ticker";
  }

  body.display-fullscreen[data-display-orientation="auto"] .display-pulse {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

/* Customize: module visibility. One dedicated !important class rather than the native `hidden`
   attribute -- .display-pulse/.display-tvnow/.display-panel/.display-world all carry their own
   unconditional `display:` rules, and an author-origin display: always beats [hidden] regardless
   of specificity (this exact cascade footgun has bitten Clock's face/personalize toggles and the
   sitewide ibis widget already this pass). */
.display-module-hidden {
  display: none !important;
}

/* Dense density ("Information Wall") -- every visible module shown at once instead of one
   tertiary panel rotating through the slot. Still exactly the six real Display modules; nothing
   fabricated. Live Conditions / What's Happening / Community / World Now each take a fixed
   quadrant of the old single "rotate" area rather than stacking, so no module is ever hidden by
   the density choice itself (Customize's own module checkboxes are the only thing that hides a
   module). */
body.display-fullscreen[data-display-density="dense"]:not([data-display-orientation="portrait"]) .display-screen {
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto 0.85fr 0.65fr 0.65fr auto;
  grid-template-areas:
    "topbar topbar topbar"
    "tv     pulse  pulse"
    "tv     rot1   rot2"
    "tv     rot3   rot4"
    "ticker ticker ticker";
}

body.display-fullscreen[data-display-orientation="portrait"][data-display-density="dense"] .display-screen,
body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .display-screen {
  grid-template-columns: 1fr 1fr;
  /* "pulse" was 0.6fr -- not enough height for 6 real KPI cards in a 2x3 grid, and .display-pulse's
     own 2 internal rows would compress into each other's space (root-caused via founder redteam:
     national debt/recorded-murders/inflation text overlapping in this exact Dense+Portrait+
     Fullscreen combination). Taking share from "tv" and the rot1-4 quadrants keeps every zone real
     content stays legible instead of one working, one silently corrupted. */
  grid-template-rows: auto 0.85fr 1fr 0.5fr 0.5fr auto;
  grid-template-areas:
    "topbar topbar"
    "tv     tv"
    "pulse  pulse"
    "rot1   rot2"
    "rot3   rot4"
    "ticker ticker";
}

@media (orientation: landscape) {
  body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .display-screen {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto 0.85fr 0.65fr 0.65fr auto;
    grid-template-areas:
      "topbar topbar topbar"
      "tv     pulse  pulse"
      "tv     rot1   rot2"
      "tv     rot3   rot4"
      "ticker ticker ticker";
  }
}

body.display-fullscreen[data-display-density="dense"] #display-conditions { grid-area: rot1; }
body.display-fullscreen[data-display-density="dense"] #display-whats-happening { grid-area: rot2; }
body.display-fullscreen[data-display-density="dense"] #display-community { grid-area: rot3; }
body.display-fullscreen[data-display-density="dense"] .display-world { grid-area: rot4; }

body.display-fullscreen[data-display-density="dense"] .display-panel,
body.display-fullscreen[data-display-density="dense"] .display-world {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  padding: 8px 13px;
  overflow: hidden;
}

body.display-fullscreen[data-display-density="dense"] .display-panel h2,
body.display-fullscreen[data-display-density="dense"] .display-world h2 {
  font-size: 11px;
  margin-bottom: 6px;
}

body.display-fullscreen[data-display-density="dense"] .display-world__note,
body.display-fullscreen[data-display-density="dense"] .display-next {
  display: none;
}

body.display-fullscreen[data-display-density="dense"] .display-world__grid {
  flex: 1;
  min-height: 0;
}

body.display-fullscreen[data-display-density="dense"] .condition-row,
body.display-fullscreen[data-display-density="dense"] .display-links a,
body.display-fullscreen[data-display-density="dense"] .world-zone strong,
body.display-fullscreen[data-display-density="dense"] .world-economy__row {
  font-size: 11px;
}

body.display-fullscreen[data-display-density="dense"] .display-pulse {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* At <=480px, 2 narrow ~150px columns force the long KPI values ("22,316,573,668 TTD") and the
   FTN MODELLED/Trust Card meta row to wrap across extra lines each -- taller content than a 1fr
   share of an already-short phone viewport can hold, so it was still clipping/overlapping (found
   via founder redteam AFTER the desktop overlap fix: cards showed only their badge, or a label
   overlapping the row above). Single column removes the width-driven wrapping (each card gets the
   full row width instead), and "pulse" takes most of its extra height directly from "tv" -- on a
   phone this small, the six live KPI numbers are more load-bearing than the video panel. Must come
   after the rule above: identical specificity, so source order is what makes this win at <=480px. */
@media (max-width: 480px) {
  body.display-fullscreen[data-display-orientation="portrait"][data-display-density="dense"] .display-screen,
  body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .display-screen {
    grid-template-rows: auto 0.5fr 2fr 0.5fr 0.5fr auto;
  }

  body.display-fullscreen[data-display-density="dense"] .display-pulse {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }

  /* Six KPI cards + TV + four rotating-zone panels genuinely do not fit a phone-height viewport
     without either illegible cramming or clipped/missing text (both found and rejected during
     founder redteam) -- Display's own product framing is a waiting-room/shop/office screen, not a
     phone held in dense fullscreen, so a deliberate, cleanly-contained scroll is the honest
     degradation here, not a bug to hide. */
  body.display-fullscreen[data-display-orientation="portrait"][data-display-density="dense"] .display-screen,
  body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .display-screen {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  body.display-fullscreen[data-display-orientation="portrait"][data-display-density="dense"] .display-pulse,
  body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .display-pulse {
    height: auto;
    grid-template-rows: repeat(6, minmax(56px, auto));
  }

  body.display-fullscreen[data-display-orientation="portrait"][data-display-density="dense"] .pulse-card,
  body.display-fullscreen[data-display-orientation="auto"][data-display-density="dense"] .pulse-card {
    overflow: visible;
  }
}

body.display-fullscreen[data-display-density="dense"] .pulse-card__value {
  font-size: 16px;
}

body.display-fullscreen[data-display-density="dense"] .pulse-card {
  padding: 8px 10px;
}

body.display-fullscreen[data-display-density="dense"] .pulse-card__label {
  margin-bottom: 3px;
  font-size: 10px;
}

body.display-fullscreen[data-display-density="dense"] .pulse-card__note {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
}

body.display-fullscreen[data-display-density="dense"] .pulse-card__meta {
  margin-top: 6px;
}

/* Below ~480px the same fr-share still isn't enough: cards run narrower, so labels/values wrap to
   an extra line and need MORE height per card, not less -- the note (secondary explanatory prose)
   is the one droppable line; keeping it would silently clip the label/value that replaced it
   above, which is worse than not showing the note at all. */
@media (max-width: 480px) {
  body.display-fullscreen[data-display-density="dense"] .pulse-card__note {
    display: none;
  }

  body.display-fullscreen[data-display-density="dense"] .pulse-card {
    padding: 6px 8px;
  }

  body.display-fullscreen[data-display-density="dense"] .pulse-card__label {
    font-size: 9px;
    margin-bottom: 2px;
  }

  body.display-fullscreen[data-display-density="dense"] .pulse-card__value {
    font-size: 14px;
  }

  body.display-fullscreen[data-display-density="dense"] .pulse-card__meta {
    margin-top: 3px;
  }
}

/* Customize sheet content -- reuses the shared FTN.Sheet chrome (light-surface panel, same as
   every other Sheet consumer sitewide) even though Display itself is dark; consistency with the
   one shared dialog primitive matters more than a bespoke dark variant for an occasional-use
   settings panel. */
.display-customize__eyebrow {
  color: var(--color-red);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.display-customize__title {
  margin-bottom: 21px;
}

.display-customize__group {
  border: 0;
  padding: 0;
  margin: 0 0 21px;
}

.display-customize__group legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  padding: 0;
}

.display-customize__radio,
.display-customize__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}

.display-customize__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.display-customize__preset.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.display-customize__note {
  color: var(--color-charcoal);
  font-size: 12px;
}

.display-math p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 13px;
}

.display-math strong {
  font-variant-numeric: tabular-nums;
}

.display-math__note {
  color: var(--color-charcoal);
  font-size: 12px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border);
}