/** * Prime Self — Density Mode CSS * ================================ * density.css — Essential / Standard / Deep-dive modes. * Applied via [data-density] attribute on or page containers. * * Three modes: * essential — minimal labels, compact cards, secondary content hidden * standard — default spacing and labels (no attribute override needed) * deep-dive — expanded content, additional context shown * * Integrates with existing data-text-density pattern from frontend/css/app.css * while using the new ps- namespace and data-density attribute (not data-text-density). */ /* ── Density spacing tokens ────────────────────────────── */ :root { /* Standard (default) spacing scale. Only --density-space-lg is consumed via var() (in .ps-page); the xs/sm/md/xl/2xl siblings were unreferenced and removed in the dead-code audit. Likewise --density-secondary-display / --density-context-display were set on every mode but never read (the show/hide rules use literal display values), so they were removed. */ --density-space-lg: var(--space-4); /* 16px */ /* Card padding default */ --density-card-padding: var(--space-6); /* 24px */ --density-section-gap: var(--space-8); /* 32px */ --density-item-gap: var(--space-4); /* 16px */ /* Nav label visibility */ --density-nav-label-display: block; } /* ── Essential mode ─────────────────────────────────────── */ [data-density="essential"], html[data-density="essential"] { --density-space-lg: var(--space-3); /* 12px */ --density-card-padding: var(--space-3); /* 12px */ --density-section-gap: var(--space-4); /* 16px */ --density-item-gap: var(--space-2); /* 8px */ --density-nav-label-display: none; } /* Hide secondary/contextual content in essential mode */ [data-density="essential"] .ps-nav__label, html[data-density="essential"] .ps-nav__label { display: var(--density-nav-label-display); } [data-density="essential"] .ps-secondary-content, [data-density="essential"] .ps-context-block, [data-density="essential"] .ps-card__hint, [data-density="essential"] .ps-card__sub, html[data-density="essential"] .ps-secondary-content, html[data-density="essential"] .ps-context-block, html[data-density="essential"] .ps-card__hint, html[data-density="essential"] .ps-card__sub { display: none; } [data-density="essential"] .ps-card, html[data-density="essential"] .ps-card { padding: var(--density-card-padding); } [data-density="essential"] .ps-page__section, html[data-density="essential"] .ps-page__section { gap: var(--density-item-gap); } /* ── Standard mode (default — explicit override) ────────── */ [data-density="standard"], html[data-density="standard"] { --density-card-padding: var(--space-6); --density-section-gap: var(--space-8); --density-item-gap: var(--space-4); --density-nav-label-display: block; } /* ── Deep-dive mode ─────────────────────────────────────── */ [data-density="deep-dive"], html[data-density="deep-dive"] { --density-space-lg: var(--space-6); /* 24px */ --density-card-padding: var(--space-8); /* 32px */ --density-section-gap: var(--space-12); /* 48px */ --density-item-gap: var(--space-6); /* 24px */ --density-nav-label-display: block; } /* Show additional context in deep-dive mode */ [data-density="deep-dive"] .ps-deep-only, html[data-density="deep-dive"] .ps-deep-only { display: block; } /* Hide deep-only content by default (shown only in deep-dive) */ .ps-deep-only { display: none; } /* ── Page layout applies density spacing ────────────────── */ .ps-page { padding: var(--density-space-lg) var(--mobile-padding, var(--space-4)); } .ps-page__section { display: flex; flex-direction: column; gap: var(--density-item-gap); margin-bottom: var(--density-section-gap); } .ps-card { padding: var(--density-card-padding); border-radius: var(--card-radius, var(--radius-lg)); background-color: var(--bg-secondary); border: 1px solid var(--border-subtle); } /* ── Track 7.2: Compact density mode ──────────────────────── Opt-in via .ps-density-compact on any container. Default for the practitioner shell (data-dense workspace). Reduces card padding, section gaps, and heading sizes by an additional ~10% beyond the global token reduction. ──────────────────────────────────────────────────────────── */ .ps-density-compact { --density-card-padding: var(--space-4); /* 16px (standard: 24px) */ --density-section-gap: var(--space-6); /* 24px (standard: 32px) */ --density-item-gap: var(--space-2); /* 8px (standard: 16px) */ --density-space-lg: var(--space-3); /* 12px (standard: 16px) */ /* Compact heading scale — further –10% on top of global token reduction */ --text-2xl: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); --text-3xl: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem); --text-4xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.8rem); }