/* lib/fui/family-documentary — shared CSS for Family B (multi-pane real-software)
 *
 * Used by: MERIDIAN OFFICE, CRYOWATCH, MIRROR LAB, ECHO-9, CHRONOS-PRIME.
 *
 * Archetype: Bloomberg-terminal / Severance-OS / classic 90s-2000s desktop apps.
 * Menu bar + tab strip + cell-fill table rows + bottom function row + status bar.
 * Distinct from Family A (full-bleed annotated schematic, no window chrome).
 *
 * Palette is supplied per-scenario via lib/fui/palette.js (--p-bg, --p-panel,
 * --p-text, --p-dim, --p-accent, --p-data, --p-cool, --p-alarm). This file
 * references only those vars — never raw hex. Family-local rules (--p-rule,
 * --p-rule2, --p-grid) fall back to neutral mixes if not set by the scenario.
 *
 * Layout grammar (apply to scenario root container):
 *   .fd-root                — full-bleed application surface
 *     .fd-menubar           — top app menu bar (height var --fd-menu-h)
 *     .fd-tabstrip          — tab strip below menubar (--fd-tab-h)
 *     <pane region>         — scenario lays out .fd-pane(s) freely
 *     .fd-fnrow             — bottom function-key row (--fd-fn-h)
 *     .fd-statusbar         — bottom status bar (--fd-status-h)
 */

:root {
  --fd-menu-h:   24px;
  --fd-tab-h:   26px;
  --fd-fn-h:    22px;
  --fd-status-h: 22px;

  --fd-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --fd-sans:    'Inter', system-ui, sans-serif;

  /* Family-local rule colors fall back to subtle neutrals; scenario can override. */
  --fd-rule:    var(--p-rule,  rgba(255, 255, 255, 0.08));
  --fd-rule2:   var(--p-rule2, rgba(255, 255, 255, 0.04));
  --fd-grid:    var(--p-grid,  rgba(255, 255, 255, 0.025));

  /* Surface tints derived from the palette. */
  --fd-surface-1: color-mix(in srgb, var(--p-panel, #131318) 100%, transparent);
  --fd-surface-2: color-mix(in srgb, var(--p-panel, #131318) 70%, var(--p-bg, #000) 30%);
  --fd-hover:     color-mix(in srgb, var(--p-text, #fff) 8%,  transparent);
}

/* === ROOT CONTAINER === */

.fd-root {
  position: fixed;
  inset: 0;
  background: var(--p-bg, #000);
  color: var(--p-text, #fff);
  overflow: hidden;
  font-family: var(--fd-sans);
  font-size: 11px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === MENU BAR (top) === */

.fd-menubar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--fd-menu-h);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--p-panel, #14141a) 90%, transparent) 0%,
    color-mix(in srgb, var(--p-panel, #14141a) 75%, transparent) 100%);
  border-bottom: 1px solid var(--fd-rule);
  font-family: var(--fd-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--p-text, #fff);
  z-index: 10;
  user-select: none;
}

.fd-menubar .fd-mb-item {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--fd-rule2);
  color: var(--p-text, #fff);
  cursor: default;
  white-space: nowrap;
}
.fd-menubar .fd-mb-item:hover {
  background: var(--fd-hover);
}
.fd-menubar .fd-mb-item .fd-mb-key {
  color: var(--p-accent, #aaa);
  margin-right: 1px;
}

.fd-menubar .fd-mb-spacer { flex: 1 1 auto; }

.fd-menubar .fd-mb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid var(--fd-rule2);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fd-menubar .fd-mb-status .fd-mb-lbl { color: var(--p-dim, #888); }
.fd-menubar .fd-mb-status .fd-mb-val { color: var(--p-text, #fff); }
.fd-menubar .fd-mb-status.alarm  .fd-mb-val { color: var(--p-alarm, #c44); }
.fd-menubar .fd-mb-status.warn   .fd-mb-val { color: var(--p-data,  #fa6); }
.fd-menubar .fd-mb-status.normal .fd-mb-val { color: var(--p-data,  #5BA877); }

/* === TAB STRIP === */

.fd-tabstrip {
  display: flex;
  align-items: stretch;
  height: var(--fd-tab-h);
  background: var(--fd-surface-2);
  border-bottom: 1px solid var(--fd-rule);
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  font-family: var(--fd-mono);
  z-index: 9;
}
.fd-tabstrip::-webkit-scrollbar { display: none; }

.fd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 14px;
  height: 100%;
  border-right: 1px solid var(--fd-rule2);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-dim, #888);
  cursor: pointer;
  white-space: nowrap;
  /* Chevron-cut right edge on every tab — classic terminal-app shape. */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.fd-tab:hover {
  color: var(--p-text, #fff);
  background: var(--fd-hover);
}
.fd-tab.active {
  color: var(--p-text, #fff);
  background: var(--p-bg, #000);
}
.fd-tab.active::after {
  /* hairline dropping the active tab into the pane below it */
  content: '';
  position: absolute;
  left: 0; right: 8px;
  bottom: -1px;
  height: 1px;
  background: var(--p-bg, #000);
}
.fd-tab .fd-tab-cnt {
  color: var(--p-accent, #aaa);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.fd-tab.active .fd-tab-cnt { color: var(--p-data, #fa6); }

.fd-tab.alarm   { color: var(--p-alarm, #c44); }
.fd-tab.alarm   .fd-tab-cnt { color: var(--p-alarm, #c44); }
.fd-tab.warn    { color: var(--p-data,  #fa6); }
.fd-tab.warn    .fd-tab-cnt { color: var(--p-data,  #fa6); }

/* === PANE === */

.fd-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--p-bg, #000);
  border: 1px solid var(--fd-rule);
  overflow: hidden;
}

.fd-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 10px 0 10px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--p-panel, #2a2620) 100%, transparent),
    color-mix(in srgb, var(--p-panel, #1d1a14) 90%, transparent));
  border-bottom: 1px solid var(--fd-rule);
  font-family: var(--fd-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--p-dim, #888);
  flex-shrink: 0;
}
.fd-pane-header .fd-pane-chevron {
  display: inline-block;
  width: 0; height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid var(--p-dim, #666);
  margin-right: 2px;
}
.fd-pane-header .fd-pane-title {
  color: var(--p-text, #fff);
  letter-spacing: 0.16em;
  font-weight: 500;
}
.fd-pane-header .fd-pane-count {
  color: var(--p-accent, #aaa);
  font-size: 8.5px;
  letter-spacing: 0.10em;
}
.fd-pane-header .fd-pane-spacer { flex: 1 1 auto; }
.fd-pane-header .fd-pane-meta   {
  color: var(--p-dim, #666);
  font-size: 8px;
  letter-spacing: 0.10em;
}

.fd-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  position: relative;
}

.fd-pane-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--fd-rule);
  padding: 4px 10px;
  font-family: var(--fd-mono);
  font-size: 8.5px;
  color: var(--p-dim, #888);
  letter-spacing: 0.10em;
}

/* === DATA TABLE === */

.fd-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--fd-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--p-text, #fff);
}

.fd-table.dense .fd-row,
.fd-table.dense .fd-row-head { font-size: 9.5px; }
.fd-table.dense .fd-cell    { padding-top: 2px; padding-bottom: 2px; }

.fd-row-head {
  display: grid;
  align-items: center;
  background: var(--fd-surface-2);
  border-bottom: 1px solid var(--fd-rule);
  font-size: 8px;
  letter-spacing: 0.20em;
  color: var(--p-dim, #888);
  text-transform: uppercase;
  height: 22px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.fd-row {
  display: grid;
  align-items: stretch;
  border-bottom: 1px solid var(--fd-rule2);
  background: var(--p-bg, #000);
  color: var(--p-text, #fff);
  transition: background 0.18s ease, color 0.18s ease;
  cursor: default;
}
.fd-row.alt    { background: color-mix(in srgb, var(--p-panel, #14141a) 35%, var(--p-bg, #000) 65%); }
.fd-row:hover  { background: var(--fd-hover); }
.fd-row.normal { color: var(--p-text, #fff); }
.fd-row.warn   { background: color-mix(in srgb, var(--p-data,  #fa6) 12%, var(--p-bg, #000) 88%);
                 color: var(--p-data, #fa6); }
.fd-row.alarm  { background: color-mix(in srgb, var(--p-alarm, #c44) 16%, var(--p-bg, #000) 84%);
                 color: var(--p-alarm, #c44); }
.fd-row.active {
  background: color-mix(in srgb, var(--p-accent, #aaa) 14%, var(--p-bg, #000) 86%);
  box-shadow: inset 2px 0 0 0 var(--p-accent, #aaa);
}

.fd-cell {
  padding: 4px 8px;
  border-right: 1px solid var(--fd-rule2);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.fd-cell:last-child { border-right: none; }
.fd-cell.num    { font-variant-numeric: tabular-nums; justify-content: flex-end; }
.fd-cell.right  { justify-content: flex-end; }
.fd-cell.center { justify-content: center; }
.fd-cell.dim    { color: var(--p-dim, #888); }

/* === ROW-FILL BAR (Bloomberg/Severance cell-fill grammar) === */
/* A horizontal gauge that lives inline within a row, % filled. */

.fd-row-fill {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: color-mix(in srgb, var(--p-panel, #14141a) 80%, var(--p-bg, #000) 20%);
  border: 1px solid var(--fd-rule2);
  overflow: hidden;
}
.fd-row-fill .fd-row-fill-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: var(--p-accent, #aaa);
  transition: width 0.4s ease;
}
.fd-row.warn  .fd-row-fill-bar { background: var(--p-data,  #fa6); }
.fd-row.alarm .fd-row-fill-bar { background: var(--p-alarm, #c44); }
.fd-row-fill .fd-row-fill-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  letter-spacing: 0.10em;
  color: var(--p-text, #fff);
  text-shadow: 0 0 2px var(--p-bg, #000);
  mix-blend-mode: normal;
}

/* === FORM ROWS (label + value with optional dot leader) === */

.fd-form-rows {
  display: flex;
  flex-direction: column;
  font-family: var(--fd-mono);
  font-size: 10.5px;
}
.fd-form-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-bottom: 1px solid var(--fd-rule2);
}
.fd-form-row .fd-form-lbl {
  color: var(--p-dim, #888);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.fd-form-row .fd-form-leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--fd-rule) 80%, transparent);
  margin: 0 4px 4px;
  min-width: 12px;
  align-self: flex-end;
}
.fd-form-row .fd-form-val {
  color: var(--p-text, #fff);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-align: right;
}
.fd-form-row.alarm  .fd-form-val { color: var(--p-alarm, #c44); }
.fd-form-row.warn   .fd-form-val { color: var(--p-data,  #fa6); }
.fd-form-row.normal .fd-form-val { color: var(--p-data,  #5BA877); }

/* === FUNCTION-KEY ROW (bottom F1/F2/F3 buttons) === */

.fd-fnrow {
  display: flex;
  align-items: stretch;
  height: var(--fd-fn-h);
  background: var(--fd-surface-2);
  border-top: 1px solid var(--fd-rule);
  font-family: var(--fd-mono);
  z-index: 8;
  flex-shrink: 0;
}
.fd-fnrow .fd-fn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-right: 1px solid var(--fd-rule2);
  color: var(--p-text, #fff);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.fd-fnrow .fd-fn:hover { background: var(--fd-hover); }
.fd-fnrow .fd-fn .fd-fn-key {
  color: var(--p-accent, #aaa);
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.fd-fnrow .fd-fn.active {
  background: var(--p-accent, #aaa);
  color: var(--p-bg, #000);
}
.fd-fnrow .fd-fn.active .fd-fn-key { color: var(--p-bg, #000); }
.fd-fnrow .fd-fn.disabled {
  color: var(--p-dim, #666);
  pointer-events: none;
}
.fd-fnrow .fd-fn.disabled .fd-fn-key { color: var(--p-dim, #666); }
.fd-fnrow .fd-fn-spacer { flex: 1 1 auto; border-right: 1px solid var(--fd-rule2); }

/* === STATUS BAR (bottom) === */

.fd-statusbar {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--fd-status-h);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--p-panel, #14141a) 95%, transparent) 0%,
    color-mix(in srgb, var(--p-panel, #14141a) 75%, transparent) 100%);
  border-top: 1px solid var(--fd-rule);
  font-family: var(--fd-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--p-dim, #888);
  z-index: 7;
  flex-shrink: 0;
}
.fd-statusbar .fd-sb-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-right: 1px solid var(--fd-rule2);
  height: 100%;
}
.fd-statusbar .fd-sb-item:last-child { border-right: none; }
.fd-statusbar .fd-sb-lbl  { color: var(--p-dim, #888); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.fd-statusbar .fd-sb-val  { color: var(--p-text, #fff); }
.fd-statusbar .fd-sb-item.alarm  .fd-sb-val { color: var(--p-alarm, #c44); }
.fd-statusbar .fd-sb-item.warn   .fd-sb-val { color: var(--p-data,  #fa6); }
.fd-statusbar .fd-sb-item.normal .fd-sb-val { color: var(--p-data,  #5BA877); }
.fd-statusbar .fd-sb-spacer { flex: 1 1 auto; border-right: 1px solid var(--fd-rule2); }
.fd-statusbar .fd-sb-center {
  flex: 1 1 auto;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-dim, #888);
  border-right: 1px solid var(--fd-rule2);
  padding: 0 10px;
}
.fd-statusbar .fd-sb-clock {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--p-text, #fff);
}
.fd-statusbar .fd-sb-user  { color: var(--p-text, #fff); }
.fd-statusbar .fd-sb-session { color: var(--p-accent, #aaa); }

/* === DIVIDERS (1px hairlines) === */

.fd-divider {
  background: var(--fd-rule);
  flex-shrink: 0;
}
.fd-divider.h { height: 1px; width: 100%; }
.fd-divider.v { width: 1px;  align-self: stretch; }

/* === BADGES (small inline tags) === */

.fd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  font-family: var(--fd-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  line-height: 1.5;
  white-space: nowrap;
}
.fd-badge.normal { color: var(--p-data,  #5BA877); }
.fd-badge.info   { color: var(--p-accent, #aaa); }
.fd-badge.warn   { color: var(--p-data,  #fa6); }
.fd-badge.alarm  {
  color: var(--p-alarm, #c44);
  background: color-mix(in srgb, var(--p-alarm, #c44) 12%, transparent);
}

/* === PILLS (rounded status pill) === */

.fd-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 8px;
  font-family: var(--fd-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  line-height: 1.5;
  white-space: nowrap;
}
.fd-pill.normal { color: var(--p-data,  #5BA877); }
.fd-pill.info   { color: var(--p-accent, #aaa); }
.fd-pill.warn   { color: var(--p-data,  #fa6); }
.fd-pill.alarm  {
  color: var(--p-alarm, #c44);
  background: color-mix(in srgb, var(--p-alarm, #c44) 14%, transparent);
  animation: fd-pill-pulse 1.4s ease-in-out infinite;
}
@keyframes fd-pill-pulse {
  0%, 100% { background: color-mix(in srgb, var(--p-alarm, #c44) 14%, transparent); }
  50%      { background: color-mix(in srgb, var(--p-alarm, #c44) 30%, transparent); }
}

/* === STATUS LED (small dot) === */

.fd-led {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-dim, #555);
  box-shadow: 0 0 3px transparent;
  flex-shrink: 0;
  vertical-align: middle;
}
.fd-led.green {
  background: var(--p-data, #5BA877);
  box-shadow: 0 0 4px color-mix(in srgb, var(--p-data, #5BA877) 70%, transparent);
}
.fd-led.amber {
  background: var(--p-data, #fa6);
  box-shadow: 0 0 4px color-mix(in srgb, var(--p-data, #fa6) 70%, transparent);
}
.fd-led.red {
  background: var(--p-alarm, #c44);
  box-shadow: 0 0 5px color-mix(in srgb, var(--p-alarm, #c44) 80%, transparent);
  animation: fd-led-pulse 1.2s ease-in-out infinite;
}
.fd-led.dim   { background: var(--p-dim, #444); box-shadow: none; }
@keyframes fd-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* === ENGINEERING GRID overlay (faint background graph paper) === */

.fd-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--fd-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fd-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}

/* === CINEMATIC POST-FX layers === */

.fd-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);
  z-index: 90;
  mix-blend-mode: multiply;
}

.fd-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 91;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: fd-grain-shift 1.6s steps(6) infinite;
  mix-blend-mode: overlay;
}
@keyframes fd-grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-8px, 4px); }
  40%  { transform: translate(6px, -6px); }
  60%  { transform: translate(-4px, -2px); }
  80%  { transform: translate(2px, 6px); }
  100% { transform: translate(0, 0); }
}

/* Fine scanline overlay — disciplined, ~3% opacity. */
.fd-scanline-fine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 92;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 3px
  );
  mix-blend-mode: screen;
}

/* CRT flicker — a slightly-amber tinted pulse layer for CRT-feel scenarios. */
.fd-crt-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 93;
  background: color-mix(in srgb, var(--p-accent, #aaa) 6%, transparent);
  mix-blend-mode: screen;
  animation: fd-crt-flicker-anim 7s steps(2) infinite;
  opacity: 0.0;
}
@keyframes fd-crt-flicker-anim {
  0%, 96%   { opacity: 0.0; }
  97%, 100% { opacity: 0.4; }
}

/* === BLINKING CURSOR (single character caret for active inputs) === */

.fd-cursor-blink {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -2px;
  background: var(--p-text, #fff);
  margin-left: 2px;
  animation: fd-cursor-blink-anim 1s steps(2) infinite;
}
@keyframes fd-cursor-blink-anim {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .fd-grain, .fd-crt-flicker, .fd-cursor-blink, .fd-pill.alarm, .fd-led.red {
    animation: none !important;
  }
}

/* === MOBILE RESPONSIVE ===
 * Goal per user (Apr 29 2026): mobile should still feel like an
 * information-packed console — not a stripped-down summary. Shrink
 * fonts + tighten padding before hiding anything; allow horizontal
 * scroll inside dense panes; keep the hero pane prominent.
 */

@media (max-width: 768px) {
  :root {
    --fd-menu-h: 22px;
    --fd-tab-h: 22px;
    --fd-fn-h: 20px;
    --fd-status-h: 20px;
  }
  .fd-menubar { font-size: 8px; padding: 0 8px; }
  .fd-mb-item { padding: 0 6px; }
  .fd-tabstrip .fd-tab { padding: 0 8px; font-size: 8px; }
  .fd-pane-header { padding: 4px 8px; min-height: 22px; font-size: 9px; }
  .fd-pane-header .fd-pane-title { font-size: 9px; }
  .fd-pane-header .fd-pane-count { font-size: 8px; }
  .fd-pane-header .fd-pane-meta { font-size: 7.5px; }
  .fd-pane-body { padding: 4px 6px; overflow-x: auto; }
  .fd-row, .fd-row-head { font-size: 7px; padding: 1px 4px; min-height: 14px; }
  .fd-cell { padding: 0 3px; }
  .fd-cell.num { font-size: 7px; }
  .fd-form-row { padding: 1px 4px; font-size: 7px; }
  .fd-form-row .fd-form-lbl { font-size: 6.5px; }
  .fd-form-row .fd-form-val { font-size: 8px; }
  .fd-fnrow { padding: 0 6px; font-size: 7.5px; gap: 4px; }
  .fd-fn { padding: 0 6px; }
  .fd-statusbar { padding: 0 8px; font-size: 7px; }
  .fd-statusbar > * { gap: 4px; }
  .fd-badge { font-size: 6.5px; padding: 0 3px; }
  .fd-pill { font-size: 7px; padding: 1px 5px; }
  .fd-row-fill { font-size: 6.5px; }
}

@media (max-width: 480px) {
  .fd-menubar { font-size: 7px; padding: 0 6px; }
  .fd-mb-item:nth-child(n+5) { display: none; }
  .fd-tabstrip .fd-tab .fd-tab-count { display: none; }
  .fd-tabstrip .fd-tab:nth-child(n+5) { display: none; }
  .fd-pane-header { font-size: 8px; padding: 3px 6px; }
  .fd-pane-header .fd-pane-meta { display: none; }
  .fd-row, .fd-row-head { font-size: 6.5px; padding: 1px 3px; }
  .fd-fnrow .fd-fn:nth-child(n+5) { display: none; }
  .fd-statusbar > .fd-status-session { display: none; }
}