/* ================================================
   Penguin Support — compact density (per-user opt-in)
   ================================================

   [2026-07-07] Tighter spacing for the KB surfaces, selected per-user via
   the account-menu Density control and rendered server-side as
   data-density="compact" on <html> (see POST /settings/density +
   users.ui_density). Mirrors the theme.css palette pattern:

     - EVERY rule below is gated under [data-density="compact"]. An absent
       attribute (the comfortable default) falls through to the untouched
       base styles — kill switch by design.
     - Colors come from the Nautilus tokens (var(--nx-*)) with the classic
       orange as fallback so both palettes stay coherent.

   Scope: KB surfaces only — article body, kb-cards/sections, the KB card
   grid (category/article/featured cards collapse to single-column dense
   rows), and article-page chrome. Nothing outside the KB is touched.
*/

/* ---------- Article body: 15px, tighter rhythm ---------- */

[data-density="compact"] .article-content {
    font-size: 15px;
    line-height: 1.55;
}

[data-density="compact"] .page-content p,
[data-density="compact"] .article-content p,
[data-density="compact"] .page-content li,
[data-density="compact"] .article-content li {
    margin-bottom: 8px;
    line-height: 1.55;
    /* [2026-07-07 review] Must be declared ON p/li: the findability bump
       sets 16.5px directly there, and a container font-size never
       overrides a direct declaration — without this, compact's "smaller
       text" was a no-op for body copy. */
    font-size: 15px;
}

/* List paddings halved (base: 24px indent, 12px/20px margins, 8px items). */
[data-density="compact"] .article-content ul,
[data-density="compact"] .article-content ol {
    padding-left: 12px;
    margin: 6px 0 10px;
}

[data-density="compact"] .article-content li {
    margin-bottom: 4px;
}

[data-density="compact"] .article-content hr {
    margin: 16px 0;
}

[data-density="compact"] .article-hero h1 {
    margin-bottom: 8px;
}

/* ---------- KB sections + in-article kb-cards: margins reduced ---------- */

[data-density="compact"] .kb-section {
    margin-bottom: 20px;
}

[data-density="compact"] .kb-card {
    padding: 10px 12px;
    margin-bottom: 10px;
}

[data-density="compact"] .kb-card + .kb-card {
    margin-top: 10px;
}

[data-density="compact"] .kb-callout-important,
[data-density="compact"] .kb-callout-warning,
[data-density="compact"] .kb-callout-info,
[data-density="compact"] .kb-callout-tip {
    padding: 8px 12px;
    margin: 8px 0;
}

/* ---------- KB index/category card grid: single-column dense rows ---------- */

[data-density="compact"] .kb-card-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px 0 20px;
}

[data-density="compact"] .kb-card-grid .kb-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 12px;
    margin-bottom: 0;
}

[data-density="compact"] .kb-card-grid .kb-card:hover {
    transform: none;
    border-color: var(--nx-gold, #fcb040);
}

/* Decorative card icons are the cheapest space win — hide them. */
[data-density="compact"] .kb-card__icon {
    display: none;
}

[data-density="compact"] .kb-card__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

/* Excerpts collapse to one truncated line so each row stays a row. */
[data-density="compact"] .kb-card__excerpt {
    -webkit-line-clamp: 1;
    margin: 0;
    font-size: 12px;
}

[data-density="compact"] .kb-card__meta {
    margin-top: 0;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Meta icons inside dense rows are decoration — drop them too. */
[data-density="compact"] .kb-card__meta i {
    display: none;
}

[data-density="compact"] .kb-section-heading {
    margin: 0 0 8px;
    padding-bottom: 5px;
    font-size: 16px;
}

/* ---------- Article-page chrome: meta row, sidebar, widgets ---------- */

[data-density="compact"] .article-hero .article-meta {
    gap: 10px;
    font-size: 12px;
}

[data-density="compact"] .sidebar-widget,
[data-density="compact"] .toc-widget {
    padding: 10px 12px;
    margin-bottom: 12px;
}

[data-density="compact"] .kb-nav-link {
    padding: 3px 8px;
}

/* ---------- Vendor directory (/knowledge/vendors): dense rows ---------- */
/* [2026-07-10] The vendor list obeys the same per-user Density control as the
   rest of the KB. Comfortable (no attribute) keeps the roomy cards; compact
   tightens to scannable rows — smaller padding/gap, more columns, decorative
   icon dropped (same stance as .kb-card__icon above). */

[data-density="compact"] .vendor-directory__intro {
    font-size: 13.5px;
    margin-bottom: 16px;
}

[data-density="compact"] .vendor-group {
    margin-bottom: 18px;
}

[data-density="compact"] .vendor-group__title {
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* Narrower min so more vendors fit per row, tighter gutter. */
[data-density="compact"] .vendor-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
}

[data-density="compact"] .vendor-card {
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Decorative icon is the cheapest space win — hide it (mirrors kb-card). */
[data-density="compact"] .vendor-card__icon {
    display: none;
}

[data-density="compact"] .vendor-card__name {
    font-size: 14px;
}

/* Subtitle stays (it disambiguates vendors) but drops to one tight line. */
[data-density="compact"] .vendor-card__sub {
    font-size: 11.5px;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-density="compact"] .vendor-card__chev {
    font-size: 12px;
}

/* ---------- Article shortcodes: tighter cards in compact -------------- *
 * [2026-07-10] The {{shortcode}}-rendered components (embedded form, price
 * card, tag rosters, TRC cards, vendor contact directory) live inside
 * .article-content but were never covered by compact. Compact = the
 * standard view, so tighten their chrome here; comfortable falls through to
 * the roomy base. The big collapsible cards (form embed, TRC, Electrolux)
 * also render COLLAPSED in compact / OPEN in comfortable — that default is
 * set server-side in the partials via `ui_density` (see those templates). */

/* Embedded form card ({{form:slug}}) */
[data-density="compact"] .kb-form-embed { margin: 14px 0; }
[data-density="compact"] .kb-form-embed__head { padding: 10px 14px; gap: 11px; }
[data-density="compact"] .kb-form-embed__icon { width: 30px; height: 30px; font-size: 14px; }
[data-density="compact"] .kb-form-embed__body { padding: 12px 14px; }

/* Price guide card ({{price-guide}}) — static + live variants */
[data-density="compact"] .kb-price-guide { padding: 10px 14px; margin: 14px 0; }
[data-density="compact"] .kb-price-guide--live { padding: 0; }
[data-density="compact"] .kb-price-guide--live .kb-price-guide__head { padding: 10px 14px; }
[data-density="compact"] .kb-price-guide__icon { width: 30px; height: 30px; font-size: 14px; }

/* Tag roster card ({{tag-card:KEY}}) */
[data-density="compact"] .kb-roster-card { margin: 12px 0; }
[data-density="compact"] .kb-roster-card__head { padding: 10px 14px; }
[data-density="compact"] .kb-roster-card__desc { margin: 0 0 6px; }
[data-density="compact"] .kb-roster-card__body { line-height: 1.6; }

/* TRC sales cards (collapsible) — tighten the always-visible head */
[data-density="compact"] .trc-card { margin: 12px 0; }
[data-density="compact"] .trc-card__head { padding: 10px 14px; }
[data-density="compact"] .trc-card__icon { width: 30px; height: 30px; font-size: 14px; }

/* Vendor contact directory (Electrolux, collapsible) */
[data-density="compact"] .kb-contact-directory { margin: 0 0 16px; }
[data-density="compact"] .kb-contact-directory__head { padding: 10px 14px; }
[data-density="compact"] .kb-contact-directory__icon { width: 30px; height: 30px; font-size: 14px; }

/* Article tables: tighter cells (base is 10px 14px). */
[data-density="compact"] .article-content table th,
[data-density="compact"] .article-content table td {
    padding: 6px 9px;
    font-size: 14px;
}

/* Vendor/TPA card ({{card:vendor:type}}) — a collapsible <details> on .kb-card.
   In compact it renders COLLAPSED (density-driven `open` omitted in the
   partial), so only the summary shows = less scrolling. Tighten the summary
   text and the expanded body/warning gaps. */
[data-density="compact"] .kb-vendor-card__title { font-size: 14.5px; }
[data-density="compact"] .kb-vendor-card__body { margin-top: 8px; }
[data-density="compact"] .kb-vendor-card__callout { margin-top: 8px; }