/* Copyright (c) Edward James Harrison. All rights reserved. */ /* * COMPACT SKIN — a dense, space-reclaiming chrome * * Two things at once: (1) collapse the header dock into the ☰ #appMenu * disclosure primitive (driven by the skin's layout.nav='menu'), and (2) a * whole-shell DENSITY pass — a shorter header, tighter department nav, denser * info panel + chat, and smaller controls. It's density, NOT removal: every * feature stays reachable, just in less space. * * Everything is scoped under [data-skin="compact"] on , so it's inert * unless the Compact skin is active. `html[data-skin="compact"]` is used for * the header-height token so it always beats the :root default regardless of * stylesheet order. */ /* ── Shorter header — the biggest visible win (60px → 42px) ── */ html[data-skin="compact"] { --app-header-h: 42px; } [data-skin="compact"] .app-header { padding: 0 10px; } [data-skin="compact"] .header-left, [data-skin="compact"] .header-right { gap: 6px; } /* ── Dock → ☰ menu (renderDock fills #appMenu; hide the empty inline dock) ── */ [data-skin="compact"] .app-menu-btn { display: flex; } [data-skin="compact"] .dock { display: none; } /* ── Smaller round header controls (30px → 26px) ── */ [data-skin="compact"] .app-menu-btn, [data-skin="compact"] .reports-btn, [data-skin="compact"] .feedback-btn, [data-skin="compact"] .avatar-btn, [data-skin="compact"] .sp-toggle-btn { width: 26px; height: 26px; font-size: 13px; } /* ── Tighter chart-identity cluster ── */ [data-skin="compact"] .nav-mode-toggle { padding: 3px 9px; font-size: 11px; } [data-skin="compact"] .chart-meta { font-size: 11px; } /* ── Denser department nav — thinner bar, tighter buttons + icons ── */ [data-skin="compact"] .dept-nav { padding: 2px 8px; } [data-skin="compact"] .dept-btn { padding: 3px 5px; } [data-skin="compact"] .dept-btn .dept-icon { font-size: 14px; } /* ── Denser info panel + chat bar ── */ [data-skin="compact"] .breadcrumb { padding-top: 6px; padding-bottom: 3px; font-size: 11px; } [data-skin="compact"] .chat-bar { padding: 5px 10px; } [data-skin="compact"] .chat-input { padding: 5px 12px; font-size: 12px; } [data-skin="compact"] .chat-send { width: 28px; height: 28px; } /* ── Compact ☰ menu rows to match ── */ [data-skin="compact"] .app-menu-item { padding: 6px 9px; font-size: 12px; }