/* Cockpit hub density retrofit — Phase 6.2 / Agent 6B operator screens.
 *
 * Plain language: this file is the CSS layer for the hub-density
 * bridge. The bridge module (cockpit-hub-density.js) attaches one
 * cockpit-hub-screen-* class per route; this file rescales the
 * existing markup of those screens via the Phase 6.1 density tokens
 * so the chip flip changes the rendering without touching every
 * render function in app.js.
 *
 * Why a screen-scoped CSS file instead of editing styles.css: keeps
 * the retrofit isolated, reviewable, and easy to roll back. Every
 * rule below is inside a `.cockpit-density-<value> .cockpit-hub-
 * screen-<slug>` selector pair so it cannot leak to other screens
 * or other densities. Out-of-scope screens (Settings, Companies,
 * People, Deal detail, Laurent home alerts, Phase 4 manager-utility
 * surfaces) inherit nothing from this file — Agent 6C and later
 * passes own those.
 *
 * Selector contract:
 *
 *   .cockpit-density-<value>
 *      Set on the `.layout` root by window.CockpitDensity.subscribe(...)
 *      via cockpit-hub-density.js. Cascades into every descendant.
 *
 *   .cockpit-hub-screen-<slug>
 *      Also set on the `.layout` root by the same bridge call. Slugs
 *      shipped in v1: home, projects, project, inbox, decisions,
 *      architect.
 *
 * Visibility-symmetry rule (AGENT_PREAMBLE rule C): rules below hide
 * CHROME (counts, secondary metadata, density-specific badges) but
 * NEVER hide actions a user is allowed to take. If a control is
 * permission-gated, server-side gating handles it; the CSS layer
 * only changes presentation density.
 *
 * Author marker convention:
 *   Each section opens with a START line and closes with a matching
 *   END line, both labelled `[Phase 6.2 / Agent 6B] <section name>`.
 *   Other agents (e.g. Agent 6C) use their own labelled blocks; the
 *   pairs never nest, never overlap.
 */

/* === [Phase 6.2 / Agent 6B] hub-density tokens-on-layout === START === */

/* When the .layout root carries a density class, propagate the base
 * font-size + line-height from the density tokens. The legacy
 * styles.css does not set these on .layout, so the cascade reaches
 * the .topbar, .breadcrumbs, .content blocks below cleanly. */
.cockpit-density-simple,
.cockpit-density-standard,
.cockpit-density-expert {
    --cockpit-hub-screen-padding-y: var(--cockpit-density-section-gap);
    --cockpit-hub-screen-padding-x: var(--cockpit-density-card-padding);
}

/* === [Phase 6.2 / Agent 6B] hub-density tokens-on-layout === END === */

/* === [Phase 6.2 / Agent 6B] sidebar density === START === */

/*
 * Theo's locked decision (master scope §7 + dispatch): in Simple, the
 * sidebar collapses to an icon + label rail with a slimmer width.
 * Standard keeps today's behaviour. Expert keeps the labels but
 * tightens spacing.
 *
 * We do NOT hide nav links — visibility-symmetry rule. The link list
 * remains fully scrollable; we only shrink padding + width. The
 * sidebar-toggle button (already wired to Layout.toggleSidebar) keeps
 * working because we adjust width, not display.
 */

/* Simple — narrow rail. Width drops, links shrink horizontally,
   archived/pinned panels stay visible (compact). */
.cockpit-density-simple.cockpit-hub-screen-home,
.cockpit-density-simple.cockpit-hub-screen-projects,
.cockpit-density-simple.cockpit-hub-screen-project,
.cockpit-density-simple.cockpit-hub-screen-inbox,
.cockpit-density-simple.cockpit-hub-screen-decisions,
.cockpit-density-simple.cockpit-hub-screen-architect {
    /* Override the global --sidebar-w for Simple so the .main
       margin-left also shrinks (it reads var(--sidebar-w)). */
    --sidebar-w: 200px;
}
.cockpit-density-simple .sidebar-nav {
    /* Single-column nav in Simple — easier to scan, more breathing room. */
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 8px;
}
.cockpit-density-simple .sidebar-nav a {
    font-size: 14px;
    padding: 9px 12px;
}
.cockpit-density-simple .sidebar-brand {
    font-size: 17px;
    padding: 16px 18px;
}

/* Expert — keep two-column nav, tighten padding. */
.cockpit-density-expert .sidebar-nav {
    gap: 1px;
    padding: 4px 3px;
}
.cockpit-density-expert .sidebar-nav a {
    font-size: 12px;
    padding: 4px 8px;
}
.cockpit-density-expert .sidebar-brand {
    font-size: 16px;
    padding: 10px 14px;
}

/* === [Phase 6.2 / Agent 6B] sidebar density === END === */

/* === [Phase 6.2 / Agent 6B] topbar density === START === */

.cockpit-density-simple .topbar {
    padding: 14px 22px;
    min-height: 60px;
}
.cockpit-density-simple .topbar-title {
    font-size: 20px;
}
.cockpit-density-simple .topbar-search-text {
    font-size: 14px;
}

.cockpit-density-expert .topbar {
    padding: 5px 12px;
    min-height: 38px;
}
.cockpit-density-expert .topbar-title {
    font-size: 13px;
}
.cockpit-density-expert .topbar-search-text {
    font-size: 12px;
}

/* === [Phase 6.2 / Agent 6B] topbar density === END === */

/* === [Phase 6.2 / Agent 6B] content padding density === START === */

.cockpit-density-simple .content {
    padding: 32px 28px;
    max-width: var(--cockpit-density-content-max-w);
    /* margin auto centers the narrow column inside .main. */
    margin-left: auto;
    margin-right: auto;
}
.cockpit-density-simple .breadcrumbs {
    font-size: 13px;
    padding: 16px 28px 0;
}
.cockpit-density-expert .content {
    padding: 12px 18px;
}
.cockpit-density-expert .breadcrumbs {
    font-size: 11px;
    padding: 4px 18px 0;
}

/* === [Phase 6.2 / Agent 6B] content padding density === END === */

/* === [Phase 6.2 / Agent 6B] HOME screen === START === */

/*
 * Home is the operator dashboard.
 * Simple: prose-first. Bigger hero, bigger headline, narrower content
 *         column. The portfolio rows turn into a stacked card list
 *         with bigger touch targets. Briefing details auto-open
 *         (handled by the bridge's _hookHome).
 * Standard: today's behaviour.
 * Expert: tighter rows, smaller meta, denser portfolio table.
 */

/* Simple home: hero gets serious breathing room, headline reads as
   a one-line briefing, metrics cluster grows to thumb-friendly. */
.cockpit-density-simple.cockpit-hub-screen-home .home-hero {
    padding: 32px 28px;
    margin-bottom: 36px;
    border-radius: var(--cockpit-density-radius);
}
.cockpit-density-simple.cockpit-hub-screen-home .home-hero-headline {
    font-size: 26px;
    line-height: 1.3;
}
.cockpit-density-simple.cockpit-hub-screen-home .home-hero-sub {
    font-size: 16px;
    line-height: 1.5;
}
.cockpit-density-simple.cockpit-hub-screen-home .hero-metric {
    padding: 14px 22px;
    border-radius: 12px;
}
.cockpit-density-simple.cockpit-hub-screen-home .hero-metric .hm-v {
    font-size: 30px;
}
.cockpit-density-simple.cockpit-hub-screen-home .home-section-title {
    font-size: 20px;
}
.cockpit-density-simple.cockpit-hub-screen-home .home-section-header {
    margin-bottom: 18px;
}
/* Simple home portfolio rows — bigger, friendlier, single-column. */
.cockpit-density-simple.cockpit-hub-screen-home .project-row {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.55;
    border-radius: 10px;
    flex-wrap: wrap;
    row-gap: 6px;
}
.cockpit-density-simple.cockpit-hub-screen-home .project-row .project-meta {
    font-size: 13px;
}
/* Hide the type chip in Simple — chrome, not action. The status +
   next-action lines carry enough context. The status chip
   (.project-status equivalent in this row) stays. */
.cockpit-density-simple.cockpit-hub-screen-home .project-row .project-type {
    display: none;
}
.cockpit-density-simple.cockpit-hub-screen-home .company-name {
    font-size: 17px;
    margin: 14px 0 8px;
}

/* Expert home: tight rows, smaller meta, more on screen. */
.cockpit-density-expert.cockpit-hub-screen-home .home-hero {
    padding: 14px 16px;
    margin-bottom: 14px;
}
.cockpit-density-expert.cockpit-hub-screen-home .home-hero-headline {
    font-size: 17px;
    line-height: 1.3;
}
.cockpit-density-expert.cockpit-hub-screen-home .home-hero-sub {
    font-size: 12px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hero-metric {
    padding: 6px 10px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hero-metric .hm-v {
    font-size: 18px;
}
.cockpit-density-expert.cockpit-hub-screen-home .project-row {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
}
.cockpit-density-expert.cockpit-hub-screen-home .company-name {
    font-size: 13px;
    margin: 8px 0 3px;
}

/* === [Phase 6.2 / Agent 6B] HOME screen === END === */

/* === [Phase 6.2 / Agent 6B] PROJECTS index === START === */

/*
 * Projects index uses the .proj-grid + .proj-card classes defined
 * inline in showProjects(). The grid declares
 * `repeat(auto-fit, minmax(300px, 1fr))` — we override the minmax
 * per density so Simple gets fewer wider cards (prose-friendly) and
 * Expert gets more, narrower cards (more visible at a glance).
 */
.cockpit-density-simple.cockpit-hub-screen-projects .proj-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 18px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-card {
    padding: 18px 20px;
    gap: 10px;
    border-radius: 12px;
    /* WHY thicker accent: in Simple the card reads more like a
       billboard than a row, the accent border supports that read. */
    border-left-width: 4px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-name {
    font-size: 16px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-co,
.cockpit-density-simple.cockpit-hub-screen-projects .proj-next {
    font-size: 14px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-status {
    font-size: 11px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-footer {
    font-size: 12px;
}
.cockpit-density-simple.cockpit-hub-screen-projects .proj-lbl {
    font-size: 11px;
}

/* Expert projects: dense — smaller cards, more per row. */
.cockpit-density-expert.cockpit-hub-screen-projects .proj-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.cockpit-density-expert.cockpit-hub-screen-projects .proj-card {
    padding: 8px 10px;
    gap: 4px;
    border-radius: 4px;
}
.cockpit-density-expert.cockpit-hub-screen-projects .proj-name {
    font-size: 12px;
}
.cockpit-density-expert.cockpit-hub-screen-projects .proj-co,
.cockpit-density-expert.cockpit-hub-screen-projects .proj-next {
    font-size: 11px;
}
.cockpit-density-expert.cockpit-hub-screen-projects .proj-footer {
    font-size: 10px;
    padding-top: 4px;
}

/* === [Phase 6.2 / Agent 6B] PROJECTS index === END === */

/* === [Phase 6.2 / Agent 6B] PROJECT detail === START === */

/*
 * Project detail page is the busiest hub surface. Simple collapses
 * the secondary panels (handled by the bridge's _hookProject) and
 * widens the action row buttons. Expert tightens the timeline +
 * attachment list line height.
 */

.cockpit-density-simple.cockpit-hub-screen-project .project-action-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
}
.cockpit-density-simple.cockpit-hub-screen-project .project-action-row .btn {
    padding: 10px 16px;
    font-size: 14px;
}
.cockpit-density-simple.cockpit-hub-screen-project .timeline-list {
    font-size: 15px;
    line-height: 1.6;
}
.cockpit-density-simple.cockpit-hub-screen-project .timeline-item {
    padding: 14px 0;
}

.cockpit-density-expert.cockpit-hub-screen-project .project-action-row {
    padding: 4px 8px;
    gap: 4px;
}
.cockpit-density-expert.cockpit-hub-screen-project .project-action-row .btn {
    padding: 3px 8px;
    font-size: 11px;
}
.cockpit-density-expert.cockpit-hub-screen-project .timeline-list {
    font-size: 12px;
    line-height: 1.4;
}
.cockpit-density-expert.cockpit-hub-screen-project .timeline-item {
    padding: 4px 0;
}

/* === [Phase 6.2 / Agent 6B] PROJECT detail === END === */

/* === [Phase 6.2 / Agent 6B] INBOX (incl. Captures) === START === */

.cockpit-density-simple.cockpit-hub-screen-inbox .tab-bar {
    margin-bottom: 24px;
}
.cockpit-density-simple.cockpit-hub-screen-inbox .tab {
    font-size: 15px;
    padding: 10px 18px;
}
.cockpit-density-simple.cockpit-hub-screen-inbox #smart-paste-input {
    font-size: 15px;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: 10px;
    min-height: 180px;
}
/* Capture cards in Simple: bigger touch targets, more breathing
   room around the actions row. */
.cockpit-density-simple.cockpit-hub-screen-inbox .capture-card {
    padding: 18px 20px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.cockpit-density-simple.cockpit-hub-screen-inbox .capture-card-body {
    font-size: 15px;
    line-height: 1.6;
    margin: 10px 0;
}
.cockpit-density-simple.cockpit-hub-screen-inbox .capture-card-actions {
    gap: 10px;
    flex-wrap: wrap;
}
.cockpit-density-simple.cockpit-hub-screen-inbox .capture-card-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
}

.cockpit-density-expert.cockpit-hub-screen-inbox .tab {
    font-size: 11px;
    padding: 4px 10px;
}
.cockpit-density-expert.cockpit-hub-screen-inbox #smart-paste-input {
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 8px;
}
.cockpit-density-expert.cockpit-hub-screen-inbox .capture-card {
    padding: 6px 10px;
    margin-bottom: 4px;
}
.cockpit-density-expert.cockpit-hub-screen-inbox .capture-card-body {
    font-size: 12px;
    line-height: 1.4;
    margin: 4px 0;
}

/* === [Phase 6.2 / Agent 6B] INBOX === END === */

/* === [Phase 6.2 / Agent 6B] DECISIONS === START === */

.cockpit-density-simple.cockpit-hub-screen-decisions .page-header h2 {
    font-size: 22px;
}
.cockpit-density-simple.cockpit-hub-screen-decisions #dec-q {
    font-size: 14px;
    padding: 10px 14px;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
}
.cockpit-density-simple.cockpit-hub-screen-decisions .decision-row {
    padding: 16px 18px;
    margin-bottom: 12px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.55;
}
.cockpit-density-simple.cockpit-hub-screen-decisions .decision-title {
    font-size: 16px;
    font-weight: 600;
}
.cockpit-density-simple.cockpit-hub-screen-decisions .decision-when {
    font-size: 13px;
}
.cockpit-density-simple.cockpit-hub-screen-decisions .decision-chosen {
    font-size: 14px;
    margin-top: 6px;
}
.cockpit-density-simple.cockpit-hub-screen-decisions .decision-meta {
    font-size: 12px;
    margin-top: 8px;
}

.cockpit-density-expert.cockpit-hub-screen-decisions .decision-row {
    padding: 5px 10px;
    margin-bottom: 3px;
    font-size: 11px;
    line-height: 1.4;
}
.cockpit-density-expert.cockpit-hub-screen-decisions .decision-title {
    font-size: 12px;
}
.cockpit-density-expert.cockpit-hub-screen-decisions .decision-when {
    font-size: 10px;
}
.cockpit-density-expert.cockpit-hub-screen-decisions .decision-chosen {
    font-size: 11px;
}
.cockpit-density-expert.cockpit-hub-screen-decisions .decision-meta {
    font-size: 10px;
}

/* === [Phase 6.2 / Agent 6B] DECISIONS === END === */

/* === [Phase 6.2 / Agent 6B] BRIEFING surface === START === */

/*
 * Briefing surface lives inside Home (#home-daily-brief slot) AND
 * in any future briefing dedicated route. Style by class so both
 * locations inherit. Simple opens by default (handled by the
 * bridge's _hookHome) and reads as a friendly summary block;
 * Expert tightens the prose to a debug-feeling block.
 */
.cockpit-density-simple .home-brief {
    padding: 18px 22px;
    border-radius: 12px;
    margin: 24px 0;
}
.cockpit-density-simple .home-brief summary {
    font-size: 16px;
    padding: 6px 0;
}
.cockpit-density-simple .hb-title {
    font-size: 17px;
    font-weight: 600;
}
.cockpit-density-simple .hb-body {
    font-size: 15px;
    line-height: 1.65;
    padding-top: 12px;
}

.cockpit-density-expert .home-brief {
    padding: 6px 10px;
    margin: 6px 0;
}
.cockpit-density-expert .home-brief summary {
    font-size: 11px;
    padding: 1px 0;
}
.cockpit-density-expert .hb-title {
    font-size: 12px;
}
.cockpit-density-expert .hb-body {
    font-size: 11px;
    line-height: 1.4;
    padding-top: 4px;
}

/* === [Phase 6.2 / Agent 6B] BRIEFING surface === END === */

/* === [Phase 6.2 / Agent 6B] STATUS SIGNALS panel === START === */

/* Status signals panel sits on Home below the briefing. Simple
   opens it by default (handled by the bridge), shows fewer rows
   per visible chunk via line-height, and bumps the row touch
   target. The panel keeps every signal accessible — visibility-
   symmetry rule. */
.cockpit-density-simple.cockpit-hub-screen-home .home-signals {
    padding: 14px 18px;
    border-radius: 12px;
    margin-top: 18px;
}
.cockpit-density-simple.cockpit-hub-screen-home .home-signals summary {
    font-size: 16px;
    padding: 4px 0;
}
.cockpit-density-simple.cockpit-hub-screen-home .hs-title {
    font-size: 17px;
}
.cockpit-density-simple.cockpit-hub-screen-home .hs-row {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 6px;
    border-radius: 8px;
}
.cockpit-density-simple.cockpit-hub-screen-home .hs-row-msg {
    font-size: 14px;
}
.cockpit-density-simple.cockpit-hub-screen-home .hs-row-proj {
    font-size: 12px;
}
.cockpit-density-simple.cockpit-hub-screen-home .hs-fix {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
}

.cockpit-density-expert.cockpit-hub-screen-home .home-signals {
    padding: 4px 8px;
    margin-top: 6px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hs-title {
    font-size: 11px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hs-row {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 1px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hs-row-msg {
    font-size: 11px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hs-row-proj {
    font-size: 10px;
}
.cockpit-density-expert.cockpit-hub-screen-home .hs-fix {
    padding: 1px 6px;
    font-size: 10px;
}

/* === [Phase 6.2 / Agent 6B] STATUS SIGNALS panel === END === */

/* === [Phase 6.2 / Agent 6B] ARCHITECT side pane + modal === START === */

/*
 * Architect side pane / modal is an out-of-tree panel mounted on
 * document.body by architect-context.js. The bridge applies the
 * density root class to .layout, which propagates via
 * cockpit-density-* — but the architect panel attaches to body, so
 * the classes don't reach it via the cascade.
 *
 * Solution: scope these rules to body[data-density="<value>"]
 * which is set by the framework's apply() call on subscribe and
 * also by an additional body-level apply we wire from the bridge
 * for the architect surface specifically.
 */

body.cockpit-density-simple .architect-panel {
    font-size: 15px;
    line-height: 1.6;
}
body.cockpit-density-simple .architect-panel-title {
    font-size: 17px;
}
body.cockpit-density-simple .architect-panel-subtitle {
    font-size: 13px;
}
body.cockpit-density-simple .architect-panel-msgs {
    font-size: 15px;
    line-height: 1.65;
}
body.cockpit-density-simple .architect-panel-input textarea {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
}

body.cockpit-density-expert .architect-panel {
    font-size: 12px;
    line-height: 1.4;
}
body.cockpit-density-expert .architect-panel-title {
    font-size: 13px;
}
body.cockpit-density-expert .architect-panel-msgs {
    font-size: 11px;
    line-height: 1.45;
}
body.cockpit-density-expert .architect-panel-input textarea {
    font-size: 11px;
    line-height: 1.35;
    padding: 4px 8px;
}

/* === [Phase 6.2 / Agent 6B] ARCHITECT === END === */