/* ── Setup level — Simple / Advanced ────────────────────────────────────────── The dashboard-wide simplicity switch. See dashboard/client/js/uiMode.js for the four rules this implements; the two that matter here: • THE HIDING IS THIS ONE RULE, not a JavaScript pass. Pages repaint constantly, and a repainted node inherits a CSS rule for free while it would need every repaint site to remember to re-run a pass. It is also why there is no flash: the mode is stamped on at import time, so the first paint is already correct. • `[data-tier-keep]` IS LOAD-BEARING. It marks an advanced control whose value differs from its default, which must stay on screen in the simple view — a setting somebody tuned must never become invisible and un-undoable. Do not "simplify" the selector by dropping the :not(). Numbered 24 because load order IS the filename in this directory (see parts/README.md) and these rules must outrank the panel/form styles they hide. */ :root[data-ui-mode="simple"] [data-tier="advanced"]:not([data-tier-keep]) { display: none !important; } /* A kept control says why it survived, so "this one is still here" reads as deliberate rather than as the switch having missed one. */ :root[data-ui-mode="simple"] [data-tier-keep]::after { content: ""; } :root[data-ui-mode="simple"] [data-tier-keep] > .uim-keep-tag, :root[data-ui-mode="simple"] .uim-keep-tag { display: inline-flex; } .uim-keep-tag { display: none; align-items: center; gap: .25rem; margin-left: .4rem; padding: .05rem .38rem; border: 1px solid rgba(var(--accent-rgb, 220 38 38) / .35); border-radius: 999px; background: rgba(var(--accent-rgb, 220 38 38) / .10); color: var(--text-muted, #9aa3b2); font-size: .62rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; } /* ── The segmented switch ─────────────────────────────────────────────────── */ .uim-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border, #23262e); border-radius: 10px; background: var(--surface-2, #14161b); flex: 0 0 auto; } .uim-opt { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted, #9aa3b2); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.1; cursor: pointer; white-space: nowrap; transition: background .16s ease, color .16s ease; } .uim-opt ion-icon { font-size: .95rem; } .uim-opt:hover { color: var(--text, #e6e8ec); } .uim-opt.is-on { background: var(--surface-3, #1d2027); color: var(--text, #e6e8ec); box-shadow: 0 1px 2px rgb(0 0 0 / .28); } .uim-opt:focus-visible { outline: 2px solid var(--accent, #dc2626); outline-offset: 1px; } /* Below the topbar's crowded breakpoint the labels go and the icons carry it — the switch must survive on mobile, because that is where a dense page is worst. */ @media (max-width: 1100px) { .uim-opt span { display: none; } .uim-opt { padding: .3rem .45rem; } } .uim-switch--compact { padding: 2px; } .uim-switch--compact .uim-opt { padding: .22rem .5rem; font-size: .72rem; } /* ── "N more settings" ──────────────────────────────────────────────────────── What a section is holding back, and the button that reveals it. Both are hidden in advanced mode: there is nothing left to count, and a disclosure over an already-open section is just a control that does nothing. */ :root[data-ui-mode="advanced"] [data-tier-count-host], :root[data-ui-mode="advanced"] .uim-more { display: none !important; } .uim-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .3rem .6rem; border: 1px dashed var(--border, #23262e); border-radius: 8px; background: transparent; color: var(--text-muted, #9aa3b2); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease; } .uim-more:hover { border-color: var(--accent, #dc2626); color: var(--text, #e6e8ec); } .uim-more ion-icon { font-size: .9rem; } .uim-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--surface-3, #1d2027); color: var(--text, #e6e8ec); font-size: .68rem; font-weight: 700; } /* ── Section note ─────────────────────────────────────────────────────────── */ .uim-note { margin: .35rem 0 0; color: var(--text-muted, #9aa3b2); font-size: .74rem; line-height: 1.45; } :root[data-ui-mode="advanced"] .uim-note--simple { display: none; } :root[data-ui-mode="simple"] .uim-note--advanced { display: none; }