/* Cockpit density framework — CSS variables + utility primitives.
 *
 * Plain-language: this file is the CSS half of the framework that
 * Phase 6.1 ships. Together with `static/cockpit-density.js` it gives
 * Phase 6.2 layouts everything they need to branch their rendering on
 * density without each surface re-inventing its own variables. Every
 * Phase 6.2 layout subscribes its root element via
 * `window.CockpitDensity.subscribe(rootEl)`, which adds one of three
 * classes (`cockpit-density-simple` / `cockpit-density-standard` /
 * `cockpit-density-expert`) and a matching `data-density="..."`
 * attribute. The variables and utility classes below cascade off
 * those classes so a layout author writes:
 *
 *     <div class="my-card">…</div>
 *
 * and gets the right padding, the right font-size, and the right
 * "show in Standard, hide in Simple" behaviour automatically — no
 * per-density branches in the markup.
 *
 * Why this layer matters: without it, every Phase 6.2 layout would
 * write its own three-density rules and they would drift. With it,
 * the contract is "use the variables and helpers, get free density
 * conformance".
 *
 * THE TOKENS
 * ==========
 * Density-aware CSS custom properties live on the density class. The
 * authoring contract is: a layout reads `--cockpit-density-<token>`,
 * never hard-codes a value. When density flips, the variables flip
 * automatically; the layout re-renders without a JS branch.
 *
 * Token catalogue (Phase 6.1):
 *   --cockpit-density-row-padding-y    vertical padding for list rows
 *   --cockpit-density-row-padding-x    horizontal padding for list rows
 *   --cockpit-density-row-gap          gap between stacked items
 *   --cockpit-density-card-padding     inner padding for cards
 *   --cockpit-density-section-gap      gap between sections
 *   --cockpit-density-stack-gap        smaller stacked-element gap
 *   --cockpit-density-font-base        base body font-size
 *   --cockpit-density-font-meta        small meta-line font-size
 *   --cockpit-density-line-height      base line-height (unitless)
 *   --cockpit-density-table-row-h      list / table row height
 *   --cockpit-density-button-padding   action-button padding
 *   --cockpit-density-radius           corner radius for cards / chips
 *   --cockpit-density-content-max-w    max content column width
 *
 * THE UTILITY CLASSES
 * ===================
 * Display helpers attach to children of a density-classed root and
 * resolve to display:none in the wrong density. Naming convention:
 *
 *   .cd-show-simple      visible in Simple only
 *   .cd-show-standard    visible in Standard only
 *   .cd-show-expert      visible in Expert only
 *   .cd-show-from-standard  visible in Standard + Expert (hide in Simple)
 *   .cd-show-from-expert    visible in Expert only (alias of above)
 *   .cd-hide-simple      hidden in Simple (visible in Standard + Expert)
 *   .cd-hide-expert      hidden in Expert (visible in Simple + Standard)
 *
 * The conditional-display helpers MUST sit inside an element carrying
 * one of `cockpit-density-(simple|standard|expert)` for the cascade to
 * apply. The framework guarantees that after `.subscribe(rootEl)`.
 *
 * Density-aware token overrides:
 *
 *   .cd-row              vertical padding from the density-row tokens
 *   .cd-card             padding + radius from the density-card tokens
 *   .cd-stack            display:flex column with density gap
 *   .cd-meta             font-meta sized text
 *   .cd-content-narrow   max-width capped at the content-max-w token
 *
 * Adopters use these helpers as STARTING points; nothing prevents a
 * layout from writing its own density-conditional CSS.
 *
 * NAMING — WHY `cd-` PREFIX
 * =========================
 * Cockpit's existing utility ecosystem uses BEM-flavoured class names
 * (`cockpit-rep-home__nudge-card`, `cdt-root`). We pick `cd-` for the
 * density utilities to keep them short (they appear all over Phase 6.2
 * layouts) AND distinct from BEM modifier suffixes. `cd` reads as
 * "cockpit density"; the prefix is short enough to compose without
 * noise.
 *
 * THEMING
 * =======
 * Every value is bound to existing Cockpit CSS variables where useful
 * (e.g. line-height inherits the global). The density tokens hold
 * pixel values directly because they are presentation density, not
 * theme — they don't change with light/dark.
 */

/* ------------------------------------------------------------
 * Default token values — applied when no density class is set
 * yet (initial paint or non-Phase-6 surfaces). Standard values.
 * ------------------------------------------------------------ */
:root {
    --cockpit-density-row-padding-y: 10px;
    --cockpit-density-row-padding-x: 14px;
    --cockpit-density-row-gap: 8px;
    --cockpit-density-card-padding: 16px;
    --cockpit-density-section-gap: 20px;
    --cockpit-density-stack-gap: 8px;
    --cockpit-density-font-base: 14px;
    --cockpit-density-font-meta: 12px;
    --cockpit-density-line-height: 1.5;
    --cockpit-density-table-row-h: 36px;
    --cockpit-density-button-padding: 8px 14px;
    --cockpit-density-radius: 8px;
    --cockpit-density-content-max-w: 1080px;
}

/* ------------------------------------------------------------
 * SIMPLE — Jean's view. Roomy, large type, generous spacing,
 * narrow content column for prose readability.
 * ------------------------------------------------------------ */
.cockpit-density-simple {
    --cockpit-density-row-padding-y: 16px;
    --cockpit-density-row-padding-x: 18px;
    --cockpit-density-row-gap: 14px;
    --cockpit-density-card-padding: 24px;
    --cockpit-density-section-gap: 32px;
    --cockpit-density-stack-gap: 12px;
    --cockpit-density-font-base: 17px;
    --cockpit-density-font-meta: 14px;
    --cockpit-density-line-height: 1.6;
    --cockpit-density-table-row-h: 56px;
    --cockpit-density-button-padding: 12px 22px;
    --cockpit-density-radius: 12px;
    /* WHY 720px: matches the Jean home target (cockpit-jean-home.css)
       so a Phase 6.2 layout that uses .cd-content-narrow lands at the
       same reading width Jean's existing screens use. */
    --cockpit-density-content-max-w: 720px;
}

/* ------------------------------------------------------------
 * STANDARD — Laurent's view. The current default; matches the
 * legacy hardcoded layouts. Defining it explicitly keeps the
 * resolved values consistent even when subscribe() runs before
 * the page's own stylesheet sets fallback values.
 * ------------------------------------------------------------ */
.cockpit-density-standard {
    --cockpit-density-row-padding-y: 10px;
    --cockpit-density-row-padding-x: 14px;
    --cockpit-density-row-gap: 8px;
    --cockpit-density-card-padding: 16px;
    --cockpit-density-section-gap: 20px;
    --cockpit-density-stack-gap: 8px;
    --cockpit-density-font-base: 14px;
    --cockpit-density-font-meta: 12px;
    --cockpit-density-line-height: 1.5;
    --cockpit-density-table-row-h: 36px;
    --cockpit-density-button-padding: 8px 14px;
    --cockpit-density-radius: 8px;
    --cockpit-density-content-max-w: 1080px;
}

/* ------------------------------------------------------------
 * EXPERT — Theo's view. Compact, more rows on screen, smaller
 * meta type, wider content column for the debug panels Theo
 * pins on the right.
 * ------------------------------------------------------------ */
.cockpit-density-expert {
    --cockpit-density-row-padding-y: 6px;
    --cockpit-density-row-padding-x: 10px;
    --cockpit-density-row-gap: 6px;
    --cockpit-density-card-padding: 12px;
    --cockpit-density-section-gap: 14px;
    --cockpit-density-stack-gap: 6px;
    --cockpit-density-font-base: 13px;
    --cockpit-density-font-meta: 11px;
    --cockpit-density-line-height: 1.45;
    --cockpit-density-table-row-h: 28px;
    --cockpit-density-button-padding: 6px 10px;
    --cockpit-density-radius: 6px;
    --cockpit-density-content-max-w: 1320px;
}

/* ------------------------------------------------------------
 * Conditional-display helpers — show / hide subtrees per density.
 *
 * Authoring rule: the helper class lives on the child; the parent
 * (or any ancestor) carries one of `cockpit-density-*`. The CSS
 * cascade does the rest.
 * ------------------------------------------------------------ */

/* Hide-by-default for every show-only-in-X helper. We then re-show
   inside the matching density root. This keeps the "default" safe:
   if a developer forgets to mount the density root, the show-only
   markup stays hidden instead of appearing in every density. */
.cd-show-simple,
.cd-show-standard,
.cd-show-expert {
    display: none !important;
}

.cockpit-density-simple   .cd-show-simple   { display: revert !important; }
.cockpit-density-standard .cd-show-standard { display: revert !important; }
.cockpit-density-expert   .cd-show-expert   { display: revert !important; }

/* "Show from standard" = visible in Standard + Expert; hidden in Simple.
   Useful for the "advanced controls" pattern — Jean does not see them
   but Laurent and Theo do. */
.cd-show-from-standard {
    display: none !important;
}
.cockpit-density-standard .cd-show-from-standard,
.cockpit-density-expert   .cd-show-from-standard {
    display: revert !important;
}

/* "Show from expert" = visible only in Expert. Alias for clarity in
   layout code — semantically identical to .cd-show-expert. We keep
   the alias to make intent readable in the markup. */
.cd-show-from-expert {
    display: none !important;
}
.cockpit-density-expert .cd-show-from-expert { display: revert !important; }

/* "Hide-X" helpers: visible by default; hidden inside the matching
   density root. Useful when the rest of the markup is shared and
   only one block disappears in one density. */
.cockpit-density-simple .cd-hide-simple { display: none !important; }
.cockpit-density-expert .cd-hide-expert { display: none !important; }

/* ------------------------------------------------------------
 * Density-aware utility classes — token-driven shapes.
 *
 * These classes resolve their values from the density tokens above,
 * which gives the layout author one-line ergonomics:
 *
 *     <div class="cd-card">…</div>     // padding + radius scale
 *     <div class="cd-row">…</div>      // row-style padding scale
 *     <div class="cd-stack">…</div>    // stacked items with density gap
 *     <span class="cd-meta">…</span>   // small meta text
 *     <main class="cd-content-narrow">…</main>  // content width cap
 * ------------------------------------------------------------ */

.cd-row {
    padding: var(--cockpit-density-row-padding-y)
             var(--cockpit-density-row-padding-x);
    line-height: var(--cockpit-density-line-height);
    font-size: var(--cockpit-density-font-base);
}

.cd-card {
    padding: var(--cockpit-density-card-padding);
    border-radius: var(--cockpit-density-radius);
    line-height: var(--cockpit-density-line-height);
    font-size: var(--cockpit-density-font-base);
}

.cd-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cockpit-density-stack-gap);
}

.cd-stack-loose {
    display: flex;
    flex-direction: column;
    gap: var(--cockpit-density-row-gap);
}

.cd-section {
    margin-bottom: var(--cockpit-density-section-gap);
}

.cd-meta {
    font-size: var(--cockpit-density-font-meta);
    line-height: 1.4;
}

.cd-content-narrow {
    max-width: var(--cockpit-density-content-max-w);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.cd-button {
    padding: var(--cockpit-density-button-padding);
    border-radius: var(--cockpit-density-radius);
    font-size: var(--cockpit-density-font-base);
}

/* === [Phase 6.2 / Agent 6C] commercial-spine helpers === START === */
/* Plain-language: utility classes Agent 6C needs across the
 * commercial-spine screens (Companies, People, Deal detail, Laurent
 * home alerts, Phase 4 manager-utility surfaces). These do not
 * replace the global cd-* tokens above; they specialise them for
 * screens that share the same composition pattern.
 *
 * Each helper either reads a density token (so it adapts when the
 * chip flips) or wraps a conditional-display rule. Keep the prefix
 * `cd-c6c-` for items unique to this dispatch so a future agent can
 * grep them as a coherent block.
 */

/* Grid that auto-fits cards; min-width grows in Simple so Jean sees
 * fewer, larger cards per row. */
.cd-c6c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cockpit-density-section-gap);
}
.cockpit-density-simple .cd-c6c-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.cockpit-density-expert .cd-c6c-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

/* "Big number" hero readout, used by Simple-density rollup tiles
 * (e.g. "X affaires actives" on Companies index). Density tokens
 * pull the size up in Simple, down in Expert. */
.cd-c6c-bignum {
    font-size: calc(var(--cockpit-density-font-base) * 2.4);
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-bright, inherit);
}
.cockpit-density-simple .cd-c6c-bignum {
    font-size: calc(var(--cockpit-density-font-base) * 2.6);
}
.cockpit-density-expert .cd-c6c-bignum {
    font-size: calc(var(--cockpit-density-font-base) * 1.6);
}

/* "Voir les justifications" expand toggle for the Simple-density
 * citation deferral. The toggle itself is always visible; the icons
 * inside live on `.cd-c6c-citations-icons` and unhide when the
 * <details> opens. Visibility-symmetry: the citations are not
 * removed in Simple, they are just one click further away. */
.cd-c6c-citations-toggle {
    margin-top: 6px;
    font-size: var(--cockpit-density-font-meta);
    color: var(--text-secondary, inherit);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--cockpit-density-radius);
    border: 1px solid var(--border, transparent);
    background: transparent;
}
.cd-c6c-citations-toggle:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
}
.cd-c6c-citations-toggle[aria-expanded="true"] {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
}
.cd-c6c-citations-icons {
    display: none;
    margin-top: 6px;
    line-height: 1.6;
}
.cd-c6c-citations-toggle[aria-expanded="true"] + .cd-c6c-citations-icons {
    display: block;
}
/* In Standard / Expert, the citation icons are inline (rendered by
 * cockpit-source-span-render.js); the expand toggle stays hidden. */
.cockpit-density-standard .cd-c6c-citations-toggle,
.cockpit-density-expert .cd-c6c-citations-toggle {
    display: none;
}
.cockpit-density-standard .cd-c6c-citations-icons,
.cockpit-density-expert .cd-c6c-citations-icons {
    display: block;
}

/* Compact people-row in Expert; airy in Simple. The base .people-row
 * style in styles.css keeps Standard intact. We only override when a
 * density root is in scope. */
.cockpit-density-simple .people-row {
    padding: 14px 18px;
    gap: 16px;
    font-size: 16px;
}
.cockpit-density-simple .project-row {
    padding: 14px 18px;
    gap: 16px;
    font-size: 16px;
}
.cockpit-density-expert .people-row {
    padding: 4px 8px;
    gap: 6px;
    font-size: 12px;
}
.cockpit-density-expert .project-row {
    padding: 4px 8px;
    gap: 6px;
    font-size: 12px;
}

/* Comp-card density: Simple grows the card padding + value font. */
.cockpit-density-simple .comp-card {
    padding: 24px;
    gap: 14px;
    border-radius: 12px;
}
.cockpit-density-simple .comp-card .comp-val {
    font-size: 30px;
}
.cockpit-density-expert .comp-card {
    padding: 10px 12px;
    gap: 6px;
    border-radius: 6px;
}
.cockpit-density-expert .comp-card .comp-val {
    font-size: 16px;
}

/* Info-card density (used on company + person detail). */
.cockpit-density-simple .info-card {
    padding: 22px;
    border-radius: 12px;
}
.cockpit-density-simple .info-card .label {
    font-size: 13px;
}
.cockpit-density-simple .info-card .value {
    font-size: 18px;
}
.cockpit-density-expert .info-card {
    padding: 10px 12px;
}
.cockpit-density-expert .info-card .label {
    font-size: 10px;
}
.cockpit-density-expert .info-card .value {
    font-size: 13px;
}

/* Laurent-home alerts card density. Match the existing BEM but
 * scale padding + meta size from the density tokens. */
.cockpit-density-simple .laurent-home-alerts__card {
    padding: 20px;
    border-radius: 12px;
}
.cockpit-density-expert .laurent-home-alerts__card {
    padding: 10px 12px;
    border-radius: 6px;
}

/* Rep-home card density - the rep daily home gets airy in Simple. */
.cockpit-density-simple .cockpit-rep-home__nudge-card {
    padding: 22px;
}
.cockpit-density-expert .cockpit-rep-home__nudge-card {
    padding: 10px 14px;
}

/* Sidebar collapsed-icon-rail in Simple. Layout side mirrors this
 * by adding `cd-c6c-sidebar-collapsed` on the sidebar element when
 * a Simple-density layout asks for it. We keep the rule conditional
 * on the helper class so non-opted-in pages keep their full sidebar. */
.cockpit-density-simple .layout > .sidebar.cd-c6c-sidebar-collapsed {
    width: 56px;
    overflow-x: hidden;
}
.cockpit-density-simple .layout > .sidebar.cd-c6c-sidebar-collapsed .sidebar-nav a {
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* Expert-mode debug strip (stickied below content). Hidden in
 * Simple/Standard; cd-show-from-expert handles the display flip. */
.cd-c6c-expert-strip {
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    border: 1px dashed var(--border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    color: var(--text-muted, inherit);
}

/* === [Phase 6.2 / Agent 6C] commercial-spine helpers === END === */