/* ── ProjectVault theme layer ──
*
* Loaded AFTER tailwind.css and style.css so it wins the cascade.
*
* style.css draws every app component from 52 CSS variables, so the whole app
* is rethemed by redefining those variables rather than rewriting 1,300 lines
* of component CSS. Values are the Material 3 palette from the approved design.
*
* This file also replaces the Bootstrap classes the templates still use
* (btn, form-control, modal, ...), because Bootstrap was removed -- its CSS
* fought Tailwind's preflight and its only JS use was modals, now handled by
* modal.js.
*/
/* ── Design tokens ───────────────────────────────────────────────── */
/* The Project Vault brand palette. Five colours carry the whole thing:
*
* Vault Ink #0E1116 page, tile, core-on-light
* Panel #1D242D surfaces and borders
* Paper #FAFBFC core-on-dark, text
* Vault Gold #EFA23C the accent, and the mark's ring -- always
* Cyan #37B4D6 focus and informational status, never the mark
*
* Gold and cyan are the same lightness and chroma in oklch (.78 / .155), which
* is why they sit together without one shouting over the other. Keep any new
* status colour on that line or it will look like a different product.
*
* The named brand colours are exposed as --brand-* so components can reach for
* the real thing (the mark, the wordmark) rather than a semantic alias that a
* retheme is free to change. Everything else should use the semantic tokens. */
:root,
[data-theme='dark'] {
--brand-ink: #0e1116;
--brand-panel: #1d242d;
--brand-paper: #fafbfc;
--brand-gold: #efa23c;
--brand-gold-hover: #f7bc63;
--brand-cyan: #37b4d6;
--bg: #0e1116;
--bg-secondary: #12171e;
--surface: #12171e;
--surface-hover: #1d242d;
--surface-active: #29323d;
--accent: #efa23c;
--accent-hover: #f7bc63;
--accent-light: rgba(239, 162, 60, 0.11);
--accent-medium: rgba(239, 162, 60, 0.22);
--accent-gradient: linear-gradient(135deg, #efa23c, #f7bc63);
--text: #edeff2;
--text-secondary: #9ba6b3;
--text-dim: #7c8896;
--border: #29323d;
--border-light: #1d242d;
--danger: #f2707a;
--danger-light: rgba(242, 112, 122, 0.12);
--success: #4bd0a0;
--warning: #efa23c;
--info: #37b4d6;
--sidebar-bg: #12171e;
--sidebar-text: #9ba6b3;
--sidebar-hover: #1d242d;
--sidebar-active: rgba(239, 162, 60, 0.16);
--sidebar-active-text: #efa23c;
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
--card-shadow-hover: 0 0 15px rgba(239, 162, 60, 0.22);
--accent-fill: #efa23c;
--accent-fill-hover: #f7bc63;
--on-accent: #0e1116;
--on-danger: #ffffff;
--radius: 0.5rem;
}
/* The brand is dark-first -- ink is the page. Light mode keeps the same gold
and cyan but darkens them enough to stay legible on paper: #EFA23C on white
is about 1.9:1, which fails badly for text, so text-weight uses of the
accent get --accent and the flat brand gold stays for fills only. */
[data-theme='light'] {
--brand-ink: #0e1116;
--brand-panel: #1d242d;
--brand-paper: #fafbfc;
--brand-gold: #efa23c;
--brand-gold-hover: #f7bc63;
--brand-cyan: #37b4d6;
--bg: #fafbfc;
--bg-secondary: #ffffff;
--surface: #ffffff;
--surface-hover: #f1f3f6;
--surface-active: #e6e9ee;
--accent: #9a5c07;
--accent-hover: #7d4a04;
--accent-light: rgba(239, 162, 60, 0.14);
--accent-medium: rgba(239, 162, 60, 0.28);
--accent-gradient: linear-gradient(135deg, #efa23c, #f7bc63);
--text: #0e1116;
--text-secondary: #47525f;
--text-dim: #6b7683;
--border: #d3d9e0;
--border-light: #e6e9ee;
--danger: #b3261e;
--danger-light: rgba(179, 38, 30, 0.08);
--success: #06795a;
--warning: #8a5300;
--info: #10627a;
--sidebar-bg: #ffffff;
--sidebar-text: #47525f;
--sidebar-hover: #f1f3f6;
--sidebar-active: rgba(239, 162, 60, 0.2);
--sidebar-active-text: #9a5c07;
--card-shadow: 0 1px 3px rgba(14, 17, 22, 0.08);
--accent-fill: #efa23c;
--accent-fill-hover: #f7bc63;
--on-accent: #0e1116;
--on-danger: #ffffff;
--card-shadow-hover: 0 6px 20px rgba(14, 17, 22, 0.12);
}
/* ── Typography ──────────────────────────────────────────────────── */
/* Three families, three roles -- see the brand sheet:
*
* Chakra Petch wordmark, headings, numerics 500 / 600 / 700
* Ubuntu UI and body 300 / 400 / 500 / 700
* IBM Plex Mono IDs, timestamps, eyebrows 400 / 500
*
* The mono is deliberately not Ubuntu Mono: it thins out at the 10-11px label
* sizes this interface uses and ships no medium weight, so eyebrow labels have
* nothing between regular and bold.
*
* style.css sets Poppins with a universal selector, so this has to match it. */
*,
*::before,
*::after {
font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Headings and the numbers on the stat tiles. Chakra Petch's clipped corners
echo the chamfers in the mark, which is the whole reason it is here -- so it
belongs on the things people read as structure, not on body copy. */
h1,
h2,
h3,
h4,
h5,
h6,
.auth-title,
.stat-tile-num,
.company-stat-value,
.version-badge,
.topnav-brand h1 {
font-family: 'Chakra Petch', 'Ubuntu', system-ui, sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
}
.material-symbols-outlined,
.material-symbols-outlined::before,
.material-symbols-outlined::after {
font-family: 'Material Symbols Outlined';
}
/* Meta: ids, timestamps and the tracked uppercase eyebrow labels. */
code,
pre,
kbd,
samp,
.font-mono,
.sidebar-section-label,
.stat-tile-label,
.project-page-eyebrow,
.admin-split-label,
.company-stat-label {
font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
}
body {
background: var(--bg);
color: var(--text);
}
/* ── Material Symbols sizing ─────────────────────────────────────── */
/* These replaced elements that were sized by the surrounding rules; keep
them optically aligned with adjacent text everywhere they appear. */
.material-symbols-outlined {
font-size: 1.15em;
line-height: 1;
vertical-align: -0.18em;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.company-icon-box .material-symbols-outlined,
.project-icon-box .material-symbols-outlined,
.title-icon .material-symbols-outlined {
font-size: 18px;
vertical-align: -0.22em;
}
.welcome-state .material-symbols-outlined {
font-size: 64px;
opacity: 0.25;
display: block;
margin-bottom: 12px;
}
/* ── Buttons (Bootstrap replacement) ─────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius);
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
background: var(--surface-hover);
color: var(--text);
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
text-decoration: none;
}
.btn:hover {
background: var(--surface-active);
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn:disabled,
.btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
/* Gold is light in both themes, so what sits on it is ink in both. This used
to hardcode a navy from the old blue scheme, which came out as unreadable
brown-on-gold the moment the accent changed. */
.btn-primary {
background: var(--accent-fill);
color: var(--on-accent);
border-color: transparent;
}
.btn-primary:hover {
background: var(--accent-fill-hover);
box-shadow: var(--card-shadow-hover);
}
.btn-danger {
background: var(--danger);
color: var(--on-danger);
}
.btn-link {
background: none;
border: none;
color: var(--accent);
padding: 4px 6px;
text-decoration: underline;
}
.btn-link:hover {
background: none;
color: var(--accent-hover);
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success {
background: transparent;
border-color: var(--border);
color: var(--text-secondary);
}
.btn-outline-primary {
border-color: var(--accent-medium);
color: var(--accent);
}
.btn-outline-primary:hover {
background: var(--accent-light);
color: var(--accent);
}
.btn-outline-secondary:hover {
background: var(--surface-hover);
color: var(--text);
}
.btn-outline-danger {
border-color: var(--danger);
color: var(--danger);
}
.btn-outline-danger:hover {
background: var(--danger-light);
}
.btn-outline-success {
border-color: var(--success);
color: var(--success);
}
.btn-outline-success:hover {
background: rgba(78, 222, 163, 0.12);
}
.btn-close {
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
font-size: 0;
cursor: pointer;
position: relative;
}
.btn-close::before {
content: 'close';
font-family: 'Material Symbols Outlined';
font-size: 20px;
line-height: 30px;
}
.btn-close:hover {
background: var(--surface-active);
color: var(--text);
}
/* ── Forms (Bootstrap replacement) ───────────────────────────────── */
.form-label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--text-secondary);
}
.form-control,
.form-select {
display: block;
width: 100%;
padding: 9px 12px;
font-size: 14px;
color: var(--text);
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control::placeholder {
color: var(--text-dim);
}
.form-control:focus,
.form-select:focus {
outline: none;
border-color: var(--accent-hover);
box-shadow: 0 0 0 3px var(--accent-light);
}
.form-control-sm {
padding: 6px 9px;
font-size: 13px;
}
.form-control-color {
width: 46px;
padding: 4px;
height: 38px;
cursor: pointer;
}
.form-select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 34px;
}
textarea.form-control {
min-height: 90px;
resize: vertical;
}
/* ── Spacing utilities the templates rely on ─────────────────────── */
.mb-3 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
/* ── Modals (Bootstrap replacement, driven by modal.js) ──────────── */
.modal {
display: none;
position: fixed;
inset: 0;
z-index: 1050;
overflow-y: auto;
padding: 24px 16px;
}
.modal.show {
display: block;
}
.pv-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(8, 14, 29, 0.72);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.pv-modal-backdrop.show {
opacity: 1;
pointer-events: auto;
}
body.pv-modal-open {
overflow: hidden;
}
.modal-dialog {
position: relative;
width: 100%;
max-width: 500px;
margin: 24px auto;
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 48px);
}
.modal-lg .modal-dialog,
.modal-dialog.modal-lg {
max-width: 820px;
}
.modal-content {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
}
.modal-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.modal-body {
padding: 20px;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--border-light);
background: var(--bg-secondary);
}
/* ── Quill, themed to match ──────────────────────────────────────── */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
border-color: var(--border) !important;
}
.ql-toolbar.ql-snow {
background: var(--bg-secondary);
border-radius: var(--radius) var(--radius) 0 0;
}
.ql-container.ql-snow {
border-radius: 0 0 var(--radius) var(--radius);
font-family: 'Geist', sans-serif;
font-size: 14px;
color: var(--text);
}
/* ── Editor scrolling ──
Quill's own stylesheet gives .ql-editor `height: 100%; overflow-y: auto`, so
the text box became its own scroll container: the wheel moved the text inside
a fixed window while the page behind it stayed put, and the toolbar was out
of reach as soon as you were a screen into a long page.
Let the editor grow with its content instead, and hand the scrolling back to
the page -- .tab-body for an issue, .design-editor-panel for a design page --
so the toolbar can stick to the top of it. */
.ql-container.ql-snow {
height: auto;
}
.ql-editor {
min-height: 320px;
height: auto;
overflow-y: visible;
}
/* `overflow: hidden` was clipping the rounded corners, but it also makes the
wrapper the nearest scroll container -- and a sticky child sticks to that,
which never scrolls, so it would never move. Round the two children instead. */
.rich-editor-wrapper {
overflow: visible;
}
.rich-editor-wrapper > .rich-editor-toolbar {
position: sticky;
top: 0;
z-index: 30;
border-radius: var(--radius) var(--radius) 0 0;
}
.rich-editor-wrapper > .rich-editor {
border-radius: 0 0 var(--radius) var(--radius);
}
/* The page title and its Save/Delete buttons ride along with the toolbar --
losing Save behind a long page was the other half of the same complaint.
The negative margins bleed it over .design-editor-panel's 20px padding so
text does not scroll past in the gutters.
Both are sticky, so the toolbar has to stop where the header ends or it
slides underneath and is gone. One number, declared once and used twice; the
title is an so the header cannot wrap and grow past it. */
.design-editor-panel {
--design-header-h: 62px;
/* No padding at the top: the sticky title bar provides its own, and it has
to be able to sit flush against the scrollport. */
padding-top: 0;
}
/* Sticky offsets position the element's *margin* box, so the -20px top margin
that used to bleed this over the panel's padding also pushed the visible bar
20px below where it pinned — and page text scrolled up through the strip
above it. The panel drops its top padding instead, and the bar carries its
own, so its margin box and its border box are the same thing. */
.design-page-header {
position: sticky;
top: 0;
z-index: 35;
height: var(--design-header-h);
box-sizing: border-box;
background: var(--bg);
margin: 0 -20px 16px;
padding: 8px 20px;
border-bottom: 1px solid var(--border);
}
.design-editor-panel .rich-editor-wrapper > .rich-editor-toolbar {
top: var(--design-header-h);
}
.ql-editor.ql-blank::before {
color: var(--text-dim);
font-style: normal;
}
.ql-snow .ql-stroke { stroke: var(--text-secondary); }
.ql-snow .ql-fill { fill: var(--text-secondary); }
.ql-snow .ql-picker { color: var(--text-secondary); }
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke {
stroke: var(--accent) !important;
}
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill {
fill: var(--accent) !important;
}
.ql-snow .ql-picker-options {
background: var(--surface);
border-color: var(--border) !important;
}
.ql-editor pre,
.ql-editor .ql-code-block-container {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
}
.ql-editor blockquote {
border-left: 3px solid var(--accent-hover);
color: var(--text-secondary);
}
.ql-editor table td,
.ql-editor table th {
border: 1px solid var(--border);
}
/* ── App shell: top nav, mega menu, tools rail ───────────────────── */
/* Replaces the old two-sidebar layout. style.css still positions
.app-container as a flex row, so it is overridden here. */
.app-container {
display: block;
height: 100vh;
overflow: hidden;
}
.topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
z-index: 900;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 20px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.topnav-left,
.topnav-right {
display: flex;
align-items: center;
gap: 20px;
height: 100%;
}
.topnav-brand {
display: flex;
align-items: center;
gap: 10px;
padding-right: 20px;
border-right: 1px solid var(--border);
height: 100%;
}
.topnav-brand .material-symbols-outlined {
font-size: 28px;
color: var(--accent);
}
.topnav-brand h1 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
}
/* ── Mega menu ── */
.megamenu {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.megamenu-trigger {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--text);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.megamenu-trigger:hover,
.megamenu.open .megamenu-trigger {
background: var(--surface-hover);
border-color: var(--border);
}
.megamenu-badge {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: var(--radius);
background: var(--accent-light);
border: 1px solid var(--accent-medium);
color: var(--accent);
}
.megamenu-crumbs {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.crumb-company {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--text-secondary);
white-space: nowrap;
}
.crumb-sep {
font-size: 16px;
color: var(--text-dim);
}
.crumb-project {
font-size: 16px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
}
.crumb-project.is-empty {
color: var(--text-dim);
font-weight: 400;
}
.megamenu-caret {
color: var(--text-secondary);
font-size: 20px;
}
.megamenu-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: min(760px, calc(100vw - 40px));
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
z-index: 950;
}
.megamenu.open .megamenu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.megamenu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
padding: 22px;
max-height: min(70vh, 560px);
overflow-y: auto;
}
.megamenu-col-title {
margin: 0 0 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
}
.megamenu-col > div[id$='-list'] {
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── Left rail ── */
.sidebar-a {
position: fixed;
top: 64px;
left: 0;
bottom: 0;
width: 240px;
display: flex;
flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
z-index: 800;
transition: width 0.18s ease;
}
.sidebar-a .sidebar-body {
flex: 1;
overflow-y: auto;
padding: 16px 10px;
}
.sidebar-a .sidebar-footer {
border-top: 1px solid var(--border);
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.rail-empty {
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
color: var(--text-dim);
}
/* Collapsed rail: icons only. */
.sidebar-a.collapsed {
width: 68px;
}
.sidebar-a.collapsed .cat-label,
.sidebar-a.collapsed .sidebar-section-label,
.sidebar-a.collapsed .rail-empty,
.sidebar-a.collapsed .project-tree-tab span:not(.material-symbols-outlined) {
display: none;
}
.sidebar-a.collapsed .project-tree-tab,
.sidebar-a.collapsed .btn-theme-toggle,
.sidebar-a.collapsed .btn-settings {
justify-content: center;
}
.app-container:has(.sidebar-a.collapsed) .main-content {
margin-left: 68px;
}
/* ── Main content sits inside the fixed chrome ── */
.main-content {
margin-left: 240px;
margin-top: 64px;
height: calc(100vh - 64px);
overflow-y: auto;
transition: margin-left 0.18s ease;
}
/* The tools rail reuses the project tab styling from style.css; make it read
as a nav list rather than a nested tree. */
.sidebar-a .project-tree-tab {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
margin: 2px 0;
border-radius: var(--radius);
color: var(--text-secondary);
cursor: pointer;
}
.sidebar-a .project-tree-tab:hover {
background: var(--surface-hover);
color: var(--text);
}
.sidebar-a .project-tree-tab.active {
background: var(--sidebar-active);
color: var(--sidebar-active-text);
font-weight: 600;
}
@media (max-width: 1100px) {
.topnav-brand h1 { display: none; }
.megamenu-grid { grid-template-columns: 1fr; }
}
/* style.css hardcodes a white hover for these, which is invisible on the light
theme's white surfaces. Drive it from the token system instead. */
.btn-theme-toggle:hover,
.btn-settings:hover {
color: var(--text);
background: var(--surface-active);
}
/* ════════════════════════════════════════════════════════════════════════
b1.0 — accounts, permissions, rebuilt rail
════════════════════════════════════════════════════════════════════════ */
/* ── Stacking order ──────────────────────────────────────────────────────
One place to read the whole layering, because it was previously spread
across two files and drifted: .modal was 1050 while the admin console
overlay was 9999, so "Edit account" opened *behind* the console and looked
like nothing had happened until you closed it.
Anything full-screen goes here. Keep the gaps -- they leave room to slot a
layer in without renumbering everything. */
.global-modal-overlay { /* admin console, release notes, issue list */
z-index: 9000;
}
.context-menu { /* right-click menus, opened from lists */
z-index: 9500;
}
.pv-modal-backdrop {
z-index: 10040;
}
.modal { /* must clear the overlays above */
z-index: 10050;
}
.editor-ctx-menu { /* opened from inside the editor */
z-index: 10060;
}
.toast-container { /* always readable, whatever else is open */
z-index: 10100;
}
/* The `hidden` attribute is how the admin-only controls, the unread dots and
the inline form errors are switched off. Tailwind's preflight does define
`[hidden] { display: none }`, but that selector ties on specificity with any
class rule that sets `display` -- and theme.css loads after tailwind.css, so
`.topnav-action { display: flex }` was quietly winning and the Admin button
stayed visible for members. */
[hidden] {
display: none !important;
}
/* ── Build badge (top left, beside the product name) ─────────────────── */
.version-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 2px;
padding: 3px 9px;
border: 1px solid var(--accent-medium);
border-radius: 999px;
background: var(--accent-light);
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.version-badge:hover {
background: var(--accent-medium);
transform: translateY(-1px);
}
.version-dot,
.account-badge-dot,
.account-menu-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--danger, #e5484d);
box-shadow: 0 0 0 2px var(--surface);
}
.version-dot { margin-left: 1px; }
.account-badge-dot {
position: absolute;
top: 8px;
right: 8px;
}
.account-menu-dot { margin-left: auto; }
/* ── Top nav ─────────────────────────────────────────────────────────── */
.topnav-action {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topnav-action:hover {
background: var(--surface-hover);
color: var(--text);
border-color: var(--accent-medium);
}
/* The selection is the most important thing in the header, so it is the
loudest thing in the header. */
.megamenu-crumbs { gap: 10px; }
.crumb-company {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.crumb-project {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
max-width: 320px;
}
.megamenu-hint {
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-active);
color: var(--text-dim);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.15s;
}
.megamenu-trigger:hover .megamenu-hint { opacity: 1; }
/* ── Left rail: where you are ────────────────────────────────────────── */
.rail-context {
padding: 16px 14px 14px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, var(--accent-light), transparent);
}
.rail-context-company {
display: flex;
align-items: center;
gap: 6px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 8px;
}
.rail-context-company .material-symbols-outlined { font-size: 16px; }
.rail-company-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rail-company-name.is-empty,
.rail-project-name.is-empty {
color: var(--text-dim);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.rail-context-project {
display: flex;
align-items: center;
gap: 10px;
}
.rail-project-dot {
width: 30px;
height: 30px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--surface-active);
}
.rail-project-dot .material-symbols-outlined { font-size: 17px; }
.rail-project-name {
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--text);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.rail-context-level {
margin-top: 10px;
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-active);
color: var(--text-dim);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── Left rail: back navigation ──────────────────────────────────────── */
.rail-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px;
border-bottom: 1px solid var(--border);
}
.rail-link {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.rail-link:hover:not(:disabled) {
background: var(--surface-hover);
color: var(--text);
}
.rail-link:disabled {
opacity: 0.4;
cursor: default;
}
.rail-link .material-symbols-outlined { font-size: 19px; }
/* ── Left rail: account, pinned to the bottom ────────────────────────── */
.rail-account { position: relative; }
.sidebar-profile {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.sidebar-profile:hover,
.sidebar-profile.open {
background: var(--surface-hover);
border-color: var(--border);
color: var(--text);
}
.account-id {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.account-name {
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-role {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.account-caret {
font-size: 18px;
color: var(--text-dim);
flex-shrink: 0;
}
/* Opens upward: it is the last thing in the rail, so there is no room below. */
.account-menu {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 258px;
padding: 6px;
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 1000;
}
.account-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.account-menu-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
margin-bottom: 4px;
border-radius: var(--radius);
background: var(--surface);
}
.account-menu-avatar { flex-shrink: 0; }
.account-menu-id {
display: flex;
flex-direction: column;
min-width: 0;
}
.account-menu-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-menu-username {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dim);
}
.account-menu-group {
padding: 4px 0;
border-top: 1px solid var(--border);
}
.account-menu-group:first-of-type { border-top: none; }
.account-menu-label {
padding: 6px 10px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.account-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.account-menu-item:hover {
background: var(--surface-active);
color: var(--text);
}
.account-menu-item .material-symbols-outlined { font-size: 18px; }
.account-menu-item.danger { color: var(--danger, #e5484d); }
.account-menu-item.danger:hover {
background: rgba(229, 72, 77, 0.12);
color: var(--danger, #e5484d);
}
/* The rail footer stacks: collapse toggle, then the account block. */
.sidebar-a .sidebar-footer {
gap: 6px;
padding: 10px;
}
.sidebar-toggle-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 10px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-dim);
font-size: 12px;
cursor: pointer;
}
.sidebar-toggle-btn:hover {
background: var(--surface-hover);
color: var(--text);
}
/* Collapsed rail keeps the icons meaningful and hides the prose. */
.sidebar-a.collapsed .rail-context {
padding: 12px 8px;
text-align: center;
}
.sidebar-a.collapsed .rail-company-name,
.sidebar-a.collapsed .rail-project-name,
.sidebar-a.collapsed .rail-context-level,
.sidebar-a.collapsed .account-id,
.sidebar-a.collapsed .account-caret {
display: none;
}
.sidebar-a.collapsed .rail-context-company,
.sidebar-a.collapsed .rail-context-project,
.sidebar-a.collapsed .rail-link,
.sidebar-a.collapsed .sidebar-profile,
.sidebar-a.collapsed .sidebar-toggle-btn {
justify-content: center;
}
.sidebar-a.collapsed .account-menu {
left: calc(100% + 8px);
bottom: 0;
}
/* ── Sign-in and access-denied screens ───────────────────────────────── */
.auth-screen {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px;
overflow: hidden;
}
.auth-aurora {
position: absolute;
inset: -30%;
background:
radial-gradient(40% 40% at 20% 25%, var(--accent-light), transparent 70%),
radial-gradient(35% 35% at 80% 70%, var(--accent-medium), transparent 70%);
filter: blur(40px);
opacity: 0.75;
pointer-events: none;
}
.auth-card {
position: relative;
width: 100%;
max-width: 420px;
padding: 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.auth-brand {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.auth-brand .material-symbols-outlined {
font-size: 30px;
color: var(--accent);
}
.auth-brand-text { flex: 1; }
.auth-brand-text h1 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--text);
}
.auth-brand-text p {
margin: 0;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.auth-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.auth-subtitle {
margin: 0 0 22px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.auth-password { position: relative; }
.auth-password .form-control { padding-right: 44px; }
.auth-reveal {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--text-dim);
cursor: pointer;
}
.auth-reveal:hover {
background: var(--surface-hover);
color: var(--text);
}
.auth-error,
.form-error {
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid rgba(229, 72, 77, 0.4);
border-radius: var(--radius);
background: rgba(229, 72, 77, 0.1);
color: var(--danger, #e5484d);
font-size: 12.5px;
line-height: 1.45;
}
.auth-submit {
width: 100%;
justify-content: center;
padding: 11px;
font-size: 14px;
}
.auth-foot {
margin: 18px 0 0;
text-align: center;
font-size: 12px;
color: var(--text-dim);
}
.auth-form.shake { animation: authShake 0.35s ease; }
@keyframes authShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
.denied-card { text-align: center; }
.denied-code {
font-family: 'JetBrains Mono', monospace;
font-size: 46px;
font-weight: 800;
line-height: 1;
color: var(--accent);
opacity: 0.35;
}
.denied-icon {
display: block;
margin: 10px auto 14px;
font-size: 34px;
color: var(--text-dim);
}
.denied-actions { margin-top: 22px; }
.denied-actions .btn { justify-content: center; width: 100%; }
/* ── Shared form bits ────────────────────────────────────────────────── */
.field-hint {
display: block;
margin-top: 5px;
font-size: 11.5px;
line-height: 1.45;
color: var(--text-dim);
}
.field-optional {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.modal-lede {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.form-color {
width: 56px;
height: 38px;
padding: 3px;
cursor: pointer;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.form-control-sm,
.form-select-sm {
padding: 6px 10px;
font-size: 12.5px;
}
.btn-danger {
background: var(--danger, #e5484d);
border-color: var(--danger, #e5484d);
color: #fff;
}
.btn-danger:hover { filter: brightness(1.08); }
/* ── Admin console ───────────────────────────────────────────────────── */
.admin-dialog,
.updates-dialog {
width: 1100px;
max-width: 94vw;
max-height: 88vh;
}
.updates-dialog { width: 780px; }
.admin-tabs {
display: flex;
gap: 4px;
padding: 10px 20px 0;
border-bottom: 1px solid var(--border);
}
.admin-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.admin-tab .material-symbols-outlined { font-size: 18px; }
.admin-body { padding: 20px; }
.admin-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.admin-heading {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.admin-sub {
margin: 0;
max-width: 62ch;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.admin-loading,
.admin-empty {
padding: 40px 20px;
text-align: center;
color: var(--text-dim);
font-size: 13px;
}
.admin-dim { color: var(--text-dim); font-size: 12px; }
.admin-table-wrap {
border: 1px solid var(--border);
border-radius: 12px;
overflow: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.admin-table th {
position: sticky;
top: 0;
padding: 10px 14px;
background: var(--surface-hover);
border-bottom: 1px solid var(--border);
color: var(--text-dim);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.admin-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table.compact td { padding: 7px 14px; }
.admin-table tbody tr:hover { background: var(--surface-hover); }
.admin-drawer-row:hover { background: transparent; }
.admin-person {
display: flex;
align-items: center;
gap: 10px;
}
.admin-person-name {
display: block;
font-weight: 600;
color: var(--text);
}
.admin-person-sub {
display: block;
font-size: 11px;
color: var(--text-dim);
}
.admin-avatar {
width: 30px;
height: 30px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
}
.admin-pill {
display: inline-block;
padding: 3px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-active);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.admin-pill.accent {
border-color: var(--accent-medium);
background: var(--accent-light);
color: var(--accent);
}
.admin-pill.ok {
border-color: rgba(46, 160, 67, 0.4);
background: rgba(46, 160, 67, 0.12);
color: #3fb950;
}
.admin-pill.warn {
border-color: rgba(210, 153, 34, 0.4);
background: rgba(210, 153, 34, 0.12);
color: #d29922;
}
.admin-pill.muted { color: var(--text-dim); }
/* Deliberately not `display: flex`: this is a | , and making it a flex
container takes it out of the table layout, so its border no longer lines up
with the rest of the row. Keep it a cell and lay the buttons out inline. */
.admin-actions {
white-space: nowrap;
text-align: right;
width: 1%;
}
.admin-actions .btn-icon {
display: inline-grid;
place-items: center;
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 8px;
}
.admin-actions .btn-icon:hover { background: var(--surface-active); }
.admin-actions .btn-icon .material-symbols-outlined { font-size: 18px; }
.btn-icon.danger { color: var(--danger, #e5484d); }
.admin-dot {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
}
/* Permissions: member list beside the grant matrix. */
.admin-split {
display: grid;
grid-template-columns: 240px 1fr;
gap: 20px;
align-items: start;
}
.admin-split-list {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-hover);
}
.admin-split-label {
padding: 4px 6px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.admin-user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.admin-user-chip:hover { background: var(--surface-active); }
.admin-user-chip.active {
background: var(--accent-light);
border-color: var(--accent-medium);
}
.perm-company {
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.perm-company-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
background: var(--surface-hover);
border-bottom: 1px solid var(--border);
}
.perm-company-name {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 13.5px;
}
.perm-company-grant {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.admin-level { width: 150px; }
/* Company cards */
.admin-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
}
.admin-card {
padding: 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
}
.admin-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.admin-card-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 11px;
}
.admin-card-icon.small {
width: 26px;
height: 26px;
border-radius: 8px;
}
.admin-card-icon.small .material-symbols-outlined { font-size: 15px; }
.admin-card-title { display: flex; flex-direction: column; min-width: 0; }
.admin-card-fields {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.admin-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 150px;
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
}
.admin-field.narrow { flex: 0 0 auto; }
.admin-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-card-drawer { margin-top: 14px; }
/* Access drawer */
.access-drawer {
padding: 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-hover);
}
.access-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.access-row {
display: flex;
align-items: center;
gap: 10px;
}
.access-row.muted { opacity: 0.65; }
.access-name {
flex: 1;
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.access-row .form-select { width: 140px; flex-shrink: 0; }
.access-inherited {
padding-top: 10px;
margin-top: 4px;
border-top: 1px dashed var(--border);
}
.access-note { padding-top: 8px; }
.access-add {
display: flex;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.access-add .form-select { flex: 1; }
.access-add .form-select + .form-select { flex: 0 0 130px; }
/* ── Release notes ───────────────────────────────────────────────────── */
.updates-body { padding: 4px 20px 20px; }
.update-entry {
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.update-entry:last-child { border-bottom: none; }
.update-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.update-version {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
color: var(--accent);
}
.update-date {
margin-left: auto;
font-size: 11.5px;
color: var(--text-dim);
}
.update-headline {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.update-summary {
margin: 0 0 14px;
max-width: 68ch;
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
}
.update-changes {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.update-changes li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.update-kind {
flex-shrink: 0;
min-width: 62px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
background: var(--surface-active);
color: var(--text-dim);
}
/* Namespaced `kind-*`, never the bare word.
`.fixed` is Tailwind's position:fixed utility and `.added`/`.changed` are one
release away from becoming utilities too. A bare state word on an element
Tailwind also styles is a collision waiting to happen -- this one took the
pill out of the flex row so the text ran underneath it. */
.update-kind.kind-added {
background: rgba(46, 160, 67, 0.14);
color: #3fb950;
}
.update-kind.kind-changed {
background: var(--accent-light);
color: var(--accent);
}
.update-kind.kind-fixed {
background: rgba(210, 153, 34, 0.14);
color: #d29922;
}
.update-kind.kind-security {
background: rgba(229, 72, 77, 0.14);
color: var(--danger, #e5484d);
}
/* Takes the remaining width and wraps inside its own column, so a long line
stays beside the pill instead of under it. */
.update-text {
flex: 1;
min-width: 0;
}
/* ── Content width ───────────────────────────────────────────────────── */
/* The rail is a hard edge, so content sitting flush against it read as
cramped on the left while the right had nothing in it. Give both sides the
same gutter and let the grids grow into the space that frees up. */
.main-content {
--content-gutter: 32px;
--content-max: 1720px;
}
.project-home-scroll,
.company-stats-fixed,
.company-project-scroll,
.tab-body {
padding-left: var(--content-gutter, 32px);
padding-right: var(--content-gutter, 32px);
}
.company-stats-fixed { padding-top: 24px; padding-bottom: 0; }
.company-project-scroll { padding-bottom: 24px; }
.tab-header { padding-left: var(--content-gutter, 32px); padding-right: var(--content-gutter, 32px); }
.project-header { padding-left: var(--content-gutter, 32px); padding-right: var(--content-gutter, 32px); }
/* Wide screens: cap the measure so lines stay readable, but far higher than
before so a 1440-wide window is filled rather than letterboxed.
Every block that takes this cap must also centre itself. Capping without the
auto margins leaves it hard against the left gutter while its neighbours are
centred, which is what made the stat strip look out of line with the module
list below it. If you add a selector here, it gets both or neither. */
.project-home-grid,
.stat-strip,
.module-toolbar,
.module-chips,
#company-project-overview {
max-width: var(--content-max, 1720px);
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* The overview list is the widest thing on the company screen; keeping its
label aligned with it stops the heading floating off on its own. */
.company-project-scroll > .sidebar-section-label {
max-width: var(--content-max, 1720px);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1500px) {
.main-content { --content-gutter: 48px; }
}
@media (max-width: 900px) {
.main-content { --content-gutter: 16px; }
.admin-split { grid-template-columns: 1fr; }
.admin-dialog { max-height: 92vh; }
}
/* ── Read-only mode ──────────────────────────────────────────────────── */
/* A viewer keeps the whole interface, minus the controls that would 403. */
body.is-readonly [data-needs='edit'],
body.is-readonly [data-needs='manage'] {
display: none !important;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
b1.1 — Server tier, redesigned Project page, roles, email
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── Server switcher (top nav) ────────────────────────────────────────── */
.serverswitch {
position: relative;
height: 100%;
display: flex;
align-items: center;
padding-right: 16px;
margin-right: 4px;
border-right: 1px solid var(--border);
}
.serverswitch-trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-hover);
color: var(--text);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.serverswitch-trigger:hover,
.serverswitch.open .serverswitch-trigger {
border-color: var(--accent-medium);
background: var(--surface-active);
}
.serverswitch-badge {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--accent-light);
color: var(--accent);
}
.serverswitch-badge .material-symbols-outlined { font-size: 16px; }
.serverswitch-name {
font-size: 13px;
font-weight: 700;
white-space: nowrap;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
}
.serverswitch-caret { font-size: 18px; color: var(--text-dim); }
.serverswitch-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 320px;
padding: 10px;
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
z-index: 960;
}
.serverswitch.open .serverswitch-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.serverswitch-head {
padding: 4px 8px 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
}
.server-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: background 0.12s;
}
.server-item:hover { background: var(--surface-active); }
.server-item.active {
background: var(--accent-light);
border-color: var(--accent-medium);
}
.server-item-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 9px;
}
.server-item-icon .material-symbols-outlined { font-size: 17px; }
.server-item-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.server-item-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-item-meta { font-size: 11px; color: var(--text-dim); }
.server-item-check { color: var(--accent); font-size: 18px; }
/* ── Rail: server row ─────────────────────────────────────────────────── */
.rail-context-server {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.rail-context-server .material-symbols-outlined { font-size: 14px; }
.rail-server-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-a.collapsed .rail-server-name { display: none; }
.sidebar-a.collapsed .rail-context-server { justify-content: center; }
.megamenu-count {
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: var(--surface-active);
color: var(--text-dim);
font-size: 10px;
letter-spacing: 0;
}
/* An empty pill still paints its background and reads as a stray dot. */
.megamenu-count:empty { display: none; }
/* ── Project page ─────────────────────────────────────────────────────── */
.project-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px var(--content-gutter, 32px);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.project-page-id {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.project-page-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 13px;
}
.project-page-icon .material-symbols-outlined { font-size: 24px; }
.project-page-titles { min-width: 0; }
.project-page-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.project-page-header h4 {
margin: 2px 0 0;
font-size: 22px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-page-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Stat strip.
Every tile is the same width and its contents are centred. Left-aligned
content in tiles this wide leaves a ragged column of numbers with a pool of
empty space to the right of each one, which is what made the row look
unbalanced. */
/* The width cap and the auto margins that centre it live together in the
"Content width" block above -- setting max-width here as well is how the two
drifted apart and left the strip sitting left of the module list. */
.stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.stat-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
/* The progress tile carries a bar, so it gets the width of two -- but its
contents stay centred like the rest. */
.stat-tile.wide { grid-column: span 2; }
.stat-tile-icon {
font-size: 20px;
color: var(--text-dim);
flex-shrink: 0;
}
.stat-tile.accent .stat-tile-icon { color: var(--accent); }
.stat-tile-num {
font-size: 26px;
font-weight: 800;
line-height: 1.05;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stat-tile-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.stat-tile-progress {
width: 100%;
min-width: 0;
}
.stat-tile-progress .status-progress-bar { margin-top: 10px; }
@media (max-width: 900px) {
/* Two narrow columns beat one very wide tile on a small window. */
.stat-tile.wide { grid-column: span 2; }
.stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat-tile.clickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.stat-tile.clickable:hover { border-color: var(--accent-medium); transform: translateY(-1px); }
/* Toolbar */
.module-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.module-toolbar .company-filter-bar {
flex: 1;
min-width: 220px;
margin-bottom: 0;
position: relative;
}
.filter-clear {
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
}
.filter-clear:hover { color: var(--text); }
.module-toolbar-group { display: flex; gap: 8px; align-items: center; }
.toolbar-select {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-dim);
}
.toolbar-select .material-symbols-outlined { font-size: 17px; }
.toolbar-select select {
border: none;
background: transparent;
color: var(--text);
font-size: 13px;
padding: 9px 4px;
outline: none;
cursor: pointer;
}
.segmented {
display: flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--surface);
}
.segmented button {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.segmented button:hover { color: var(--text); }
.segmented button.active {
background: var(--accent-light);
color: var(--accent);
}
.segmented .material-symbols-outlined { font-size: 18px; }
/* Flag filter chips */
.module-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: var(--content-max, 1720px);
}
.module-chips:not(:empty) { margin-bottom: 14px; }
.module-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-secondary);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.module-chip .material-symbols-outlined { font-size: 13px; color: var(--chip, var(--accent)); }
.module-chip:hover { border-color: var(--chip, var(--accent)); color: var(--text); }
.module-chip.active {
border-color: var(--chip, var(--accent));
background: color-mix(in srgb, var(--chip, #efa23c) 18%, transparent);
color: var(--text);
}
.module-list-head {
display: flex;
align-items: baseline;
gap: 10px;
max-width: var(--content-max, 1720px);
margin: 0 auto 8px;
}
.module-count {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dim);
}
/* ── Module list ──────────────────────────────────────────────────────── */
#company-project-overview.view-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
#company-project-overview.view-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.module-row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.module-row:hover {
border-color: var(--accent-medium);
background: var(--surface-hover);
}
.module-row:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.module-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 10px;
}
.module-icon .material-symbols-outlined { font-size: 18px; }
.module-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.module-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--text-dim);
}
.module-meta .material-symbols-outlined { font-size: 13px; }
.module-due { display: inline-flex; align-items: center; gap: 4px; }
.module-due.soon { color: #d29922; }
.module-due.overdue { color: var(--danger); font-weight: 600; }
.module-issue-count {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 999px;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.module-issue-count:hover { background: var(--accent); color: #fff; }
.module-flags { display: inline-flex; gap: 4px; }
.module-progress {
display: flex;
align-items: center;
gap: 10px;
width: 190px;
flex-shrink: 0;
}
/* The bar and fill are s here, because a module row is a clickable
container of inline content. Inline boxes ignore width and height, so the
fill rendered as nothing at all -- force them to blocks. */
.module-progress .status-progress-bar {
display: block;
flex: 1;
height: 6px;
overflow: hidden;
}
.module-progress .status-progress-fill {
display: block;
height: 100%;
}
.module-pct {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
width: 38px;
text-align: right;
}
.module-go { color: var(--text-dim); font-size: 20px; flex-shrink: 0; }
/* Card density: same markup, stacked instead of in a line. */
.view-cards .module-row {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 16px;
}
.view-cards .module-icon { width: 40px; height: 40px; }
.view-cards .module-progress { width: auto; }
.view-cards .module-go { display: none; }
.view-cards .module-name { font-size: 15px; white-space: normal; }
.module-empty {
padding: 48px 20px;
text-align: center;
color: var(--text-dim);
}
.module-empty .material-symbols-outlined {
font-size: 40px;
opacity: 0.4;
display: block;
margin-bottom: 10px;
}
.module-empty p { margin: 0 0 14px; font-size: 13px; }
/* ── Admin console: search, groups ────────────────────────────────────── */
.admin-toolbar-controls {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.admin-search {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
min-width: 200px;
}
.admin-search .material-symbols-outlined { font-size: 17px; color: var(--text-dim); }
.admin-search input {
border: none;
background: transparent;
outline: none;
color: var(--text);
font-size: 13px;
width: 100%;
}
.admin-split-list .admin-search { margin-bottom: 8px; min-width: 0; }
.admin-group,
.perm-server,
.perm-project {
margin-bottom: 10px;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
}
.admin-group > summary,
.perm-server > summary,
.perm-project > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 14px;
background: var(--surface-hover);
cursor: pointer;
list-style: none;
user-select: none;
}
.admin-group > summary::-webkit-details-marker,
.perm-server > summary::-webkit-details-marker,
.perm-project > summary::-webkit-details-marker { display: none; }
.admin-group > summary:hover,
.perm-server > summary:hover,
.perm-project > summary:hover { background: var(--surface-active); }
.admin-group-title,
.perm-server-name,
.perm-project-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 700;
color: var(--text);
min-width: 0;
/* Take the slack, so the title sits against the twisty instead of being
centred by the summary's space-between. */
flex: 1;
}
/* A twisty, so a collapsed group reads as openable rather than inert. */
.admin-group > summary::before,
.perm-server > summary::before,
.perm-project > summary::before {
content: 'chevron_right';
font-family: 'Material Symbols Outlined';
font-size: 18px;
color: var(--text-dim);
transition: transform 0.15s;
}
.admin-group[open] > summary::before,
.perm-server[open] > summary::before,
.perm-project[open] > summary::before { transform: rotate(90deg); }
.admin-group .admin-table-wrap { border: none; border-radius: 0; }
.perm-server-body { padding: 10px; }
.perm-server-body .perm-project { background: var(--bg); }
.perm-grant {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
flex-shrink: 0;
}
.perm-grant .form-select { width: 132px; }
/* ── Settings: sections, test results ─────────────────────────────────── */
.settings-section {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.settings-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.settings-section-head h6 {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.test-ok { color: #3fb950; }
.test-fail { color: var(--danger); }
/* ── Forms: checkboxes, hints ─────────────────────────────────────────── */
.form-check {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 10px;
align-items: center;
margin-bottom: 16px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
}
.form-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.form-check .field-hint { grid-column: 2; margin-top: 0; }
.field-hint.ok { color: #3fb950; }
.field-hint.warn { color: #d29922; }
/* ── Password strength meter ──────────────────────────────────────────── */
.pw-meter { margin-top: 8px; }
.pw-meter-track {
height: 4px;
border-radius: 999px;
background: var(--surface-active);
overflow: hidden;
}
.pw-meter-fill {
height: 100%;
width: 0;
border-radius: 999px;
transition: width 0.2s ease, background 0.2s ease;
}
.pw-meter-fill.weak { background: var(--danger); }
.pw-meter-fill.fair { background: #d29922; }
.pw-meter-fill.good { background: #3fb950; }
.pw-meter-fill.strong { background: var(--accent); }
.pw-meter-label {
display: block;
margin-top: 5px;
font-size: 11.5px;
color: var(--text-dim);
}
.pw-meter-label.weak { color: var(--danger); }
.pw-meter-label.fair { color: #d29922; }
.pw-meter-label.good,
.pw-meter-label.strong { color: #3fb950; }
/* ── Auth pages: label row, links, notice ─────────────────────────────── */
.auth-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.auth-link {
color: var(--accent);
font-size: 12px;
text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
.auth-notice {
display: flex;
gap: 12px;
padding: 14px;
margin-bottom: 16px;
border: 1px solid var(--accent-medium);
border-radius: var(--radius);
background: var(--accent-light);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
}
.auth-notice .material-symbols-outlined { color: var(--accent); flex-shrink: 0; }
.auth-notice strong { color: var(--text); display: block; margin-bottom: 3px; }
.auth-notice p { margin: 0; }
/* ── Context menu: inline progress row ────────────────────────────────── */
.ctx-submenu-row { display: flex; align-items: center; gap: 8px; }
.ctx-submenu-row .ctx-progress-input {
width: 60px;
margin-left: auto;
}
@media (max-width: 1100px) {
.serverswitch { padding-right: 10px; }
.serverswitch-name { max-width: 110px; }
.project-page-header { flex-direction: column; align-items: flex-start; }
.module-progress { width: 120px; }
}
/* ── Role capability editor ──────────────────────────────────────────────
Two axes, and the copy in the modal says so: a grant decides which servers
and projects someone reaches, these toggles decide what they may do there. */
.cap-editor {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.cap-editor-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.cap-editor-head h6 {
margin: 0 0 4px;
font-size: 13.5px;
font-weight: 700;
color: var(--text);
}
.cap-editor-head .field-hint { max-width: 52ch; }
.cap-editor-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.cap-group {
margin: 0 0 10px;
padding: 10px 12px 6px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.cap-group legend {
display: flex;
align-items: center;
gap: 8px;
padding: 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.cap-group-toggle {
border: 1px solid var(--border);
border-radius: 999px;
background: transparent;
color: var(--text-dim);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1px 8px;
cursor: pointer;
}
.cap-group-toggle:hover {
border-color: var(--accent-medium);
color: var(--accent);
}
/* Two columns on a wide modal, one when it gets tight. */
.cap-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 2px 14px;
}
.cap-group legend { grid-column: 1 / -1; }
.cap-item {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 9px;
padding: 6px 4px;
border-radius: 6px;
cursor: pointer;
}
.cap-item:hover { background: var(--surface-hover); }
.cap-item input {
width: 15px;
height: 15px;
margin-top: 2px;
accent-color: var(--accent);
cursor: pointer;
}
.cap-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.cap-item-label {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.cap-item-desc {
font-size: 11px;
line-height: 1.4;
color: var(--text-dim);
}
.cap-editor.is-disabled { opacity: 0.75; }
.cap-editor-admin-note {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 12px 14px;
border: 1px solid var(--accent-medium);
border-radius: 10px;
background: var(--accent-light);
color: var(--text-secondary);
font-size: 12.5px;
}
.cap-editor-admin-note .material-symbols-outlined {
font-size: 18px;
color: var(--accent);
}
/* The role modal carries a lot more than the others. */
#roleModal .modal-dialog {
max-width: 760px;
}
/* Locked-account badge in the accounts table. */
.admin-pill.locked {
border-color: rgba(229, 72, 77, 0.4);
background: rgba(229, 72, 77, 0.12);
color: var(--danger);
}
/* ══════════════════════════════════════════════════════════════════
b1.3 — Project Vault brand
══════════════════════════════════════════════════════════════════ */
/* ── The mark ─────────────────────────────────────────────────────
Ring is always Vault Gold. The split core flips with the surface --
paper on ink, ink on paper -- and var(--text) is already exactly that
in both themes, so the same SVG serves both without a second file.
Never recolour the ring, never rotate it (the notches are cardinal),
never place it on a gold field. Below 28px use the mini tile instead:
the notches fill in and it stops reading as a ring. */
.vault-mark {
flex-shrink: 0;
display: block;
}
.vault-mark-ring { fill: var(--brand-gold); }
.vault-mark-core { fill: var(--text); }
.vault-mini {
flex-shrink: 0;
display: block;
}
/* ── The wordmark ─────────────────────────────────────────────────
PROJECT is the quiet half, VAULT the loud one. Chakra Petch, because
its clipped corners are the same cut as the mark's chamfers. */
.vault-lockup {
display: inline-flex;
align-items: center;
gap: 14px;
}
.vault-lockup-rule {
width: 1px;
align-self: stretch;
margin: 4px 0;
background: var(--border);
}
.vault-wordmark,
.topnav-brand h1,
.auth-brand-text h1 {
font-family: 'Chakra Petch', 'Ubuntu', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text);
}
/* The quiet half of the wordmark. A hair of tracking after it stands in
for the space, so "ProjectVault" reads as two words without one. */
.vault-wordmark-quiet {
font-weight: 500;
color: var(--text-dim);
margin-right: 0.3em;
}
/* ── Brand in the chrome ── */
.topnav-brand h1 {
color: var(--text);
font-size: 17px;
}
.auth-brand .vault-mark { margin-right: 2px; }
.welcome-state .vault-mark {
margin: 0 auto 18px;
opacity: 0.9;
}
.denied-icon {
display: flex;
justify-content: center;
margin: 10px auto 14px;
}
/* ── Focus ────────────────────────────────────────────────────────
Gold, offset by 2px. Cyan was the first attempt — the brand sheet
files it under "links, focus, status" — but in a gold interface a
cyan ring around a text box just reads as a stray blue outline, which
is exactly what it got reported as. The offset is what keeps it
visible on a gold button: ring, a gap of page behind it, then fill. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* Text inputs already announce focus with a gold border and a gold glow
(.form-control:focus, above). A third gold ring on top of those is
just noise, so they opt out of the shared one. */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.rich-editor:focus,
.rich-editor:focus-visible,
.ql-editor:focus,
.ql-editor:focus-visible,
.design-page-title-input:focus,
.design-page-title-input:focus-visible {
outline: none;
}
/* ── Empty states ─────────────────────────────────────────────────
Cut from the same geometry as the mark, so there is no second
illustration set to keep in step. They use stroke="currentColor",
which is why the colour is set here and not in the file. */
.empty-art {
width: 84px;
height: 84px;
margin: 0 auto 16px;
display: block;
color: var(--text-dim);
opacity: 0.55;
}
/* ── Loading ──────────────────────────────────────────────────────
The ring spins, the core holds still. */
.vault-spinner .vault-mark-ring {
transform-origin: 32px 32px;
animation: vault-spin 1.4s linear infinite;
}
@keyframes vault-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.vault-spinner .vault-mark-ring { animation-duration: 4s; }
}
/* ── Text on an accent fill ───────────────────────────────────────
Vault Gold is a *light* colour — #EFA23C against white text is about
2.1:1, which fails at any size. style.css was written when the accent
was a mid blue and sets `color: #fff` on every solid-accent surface,
so each one has to be turned back over here rather than left to look
washed out. One list, so the next accent change is one edit.
--on-accent is ink in both themes on purpose: the fill is the same
gold either way, so its foreground does not flip with the theme. */
.btn-primary,
.modal-footer .btn-primary,
.edit-actions .btn-primary,
.btn-outline-primary:hover,
.issue-filter.active,
.editor-btn.active,
.log-page-btn.active,
.context-menu-item:hover,
.module-issue-count:hover,
.company-project-issue-count:hover,
[data-theme='dark'] .editor-btn.active,
[data-theme='light'] .editor-btn.active {
color: var(--on-accent);
}
/* Not every accent surface is a *solid* one. The selected admin tab is
transparent with a gold underline, and the selected segmented button
is an 11% tint — both want gold text, not ink. Listing them above
turned their labels the same colour as the panel behind them, which
made the selected tab unreadable. */
.admin-tab.active,
.segmented button.active {
color: var(--accent);
}
/* The tick inside a checked box is drawn as two borders, so it needs the
same treatment as text would. */
.flag-manager-cb:checked::after {
border-color: var(--on-accent);
}
/* ── Accent as a fill vs accent as text ───────────────────────────
Two different jobs, and light mode is where they come apart. On
paper, #EFA23C as *text* is about 2:1 — unreadable — so --accent
darkens to a bronze there. But the gold *fill* must stay gold in both
themes, because that is the brand colour and --on-accent (ink) is
what was chosen to sit on it. Darkening the fill instead is what made
the primary button come out ink-on-brown.
--accent text, borders, icons — safe on the page background
--accent-fill solid surfaces that --on-accent sits on top of
style.css predates the split and fills with var(--accent), so those
rules are turned over here. */
.log-page-btn.active,
.editor-btn.active,
.context-menu-item:hover,
.btn-outline-primary:hover,
.icon-picker-item.selected,
.company-project-issue-count:hover,
.module-issue-count:hover,
.home-quick-note-btn,
.ctx-progress-go,
.editor-grid-cell:hover,
.editor-grid-cell.active,
.pw-meter-fill.strong,
.sidebar-b-resize:hover,
.sidebar-b-resize.active,
.editor-col-resize-handle:hover,
.editor-col-resize-handle.active {
background: var(--accent-fill);
}
/* ── Brand palette swatches ───────────────────────────────────────
Attached under every colour input by attachColourSwatches(). The
point is that picking from these is easier than picking from the
native colour wheel, so they need to be the obvious thing to hit. */
.colour-swatches {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.colour-swatch {
width: 26px;
height: 26px;
padding: 0;
border: 2px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: transform 0.12s, border-color 0.12s;
}
.colour-swatch:hover { transform: translateY(-1px); }
/* The ring sits outside the swatch so it reads against the colour
rather than eating into it. */
.colour-swatch.active {
border-color: var(--surface);
box-shadow: 0 0 0 2px var(--accent);
}
/* ── Settings: appearance reset ── */
.reset-appearance-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.settings-check {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
}
.settings-check input { accent-color: var(--accent-fill); cursor: pointer; }
/* ══════════════════════════════════════════════════════════════════
b1.4 — Project overview, rail and top bar redesign
Three things separate this from what it replaces:
1. Square. No radius anywhere in these components. The mark is built
from chamfers and right angles, and rounded cards fought it.
2. Three depths, not one. --chrome (the frame) sits *below* --bg (the
page), which sits below --surface (panels). The old shell painted
the rail the same colour as the content and the two ran together.
3. Modules are split by state, not listed flat. Twenty finished
modules and four unfinished ones are not the same kind of thing.
══════════════════════════════════════════════════════════════════ */
:root,
[data-theme='dark'] {
/* Darker than the page: the frame should recede, not compete. */
--chrome: #0a0d11;
--chrome-border: #1a212a;
--rule: #1d242d;
}
[data-theme='light'] {
--chrome: #ffffff;
--chrome-border: #e2e6ec;
--rule: #e6e9ee;
}
/* ── Hero ───────────────────────────────────────────────────────── */
.season-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
border: 1px solid var(--rule);
background: var(--surface);
max-width: var(--content-max, 1720px);
margin: 0 auto 26px;
width: 100%;
}
.season-hero-main {
padding: 26px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-width: 0;
}
.season-headline {
display: flex;
align-items: flex-end;
gap: 16px;
}
.season-pct {
font-family: 'Chakra Petch', sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.season-pct span {
font-size: 26px;
color: var(--text-dim);
}
.season-headline-text {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 5px;
}
.season-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.season-sub {
font-size: 13px;
color: var(--text-secondary);
}
/* ── The module chart ──
One column per module, its height that module's progress. "21 of 24"
and *which* three are outstanding land in the same glance, which is
the whole reason this replaced a single averaged progress bar. */
.season-chart-wrap {
display: flex;
flex-direction: column;
gap: 9px;
}
.season-chart {
display: flex;
gap: 2px;
align-items: stretch;
height: 40px;
}
.season-bar {
flex: 1;
min-width: 2px;
padding: 0;
border: none;
background: var(--surface-hover);
display: flex;
align-items: flex-end;
cursor: pointer;
transition: opacity 0.12s;
}
.season-bar > span {
width: 100%;
background: var(--accent-fill);
display: block;
}
.season-bar.is-full { background: var(--accent-fill); }
/* Finished but still carrying an open issue. Cyan, because it is a
different problem from unstarted work -- see moduleStatus(). */
.season-bar.is-blocked { background: var(--brand-cyan); }
.season-bar:hover { opacity: 0.75; }
.season-legend {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-dim);
}
.season-legend-note { margin-right: auto; }
.season-key {
display: flex;
align-items: center;
gap: 6px;
}
.season-key-swatch {
width: 9px;
height: 9px;
background: var(--surface-hover);
display: flex;
align-items: flex-end;
flex: none;
}
.season-key-swatch.is-done { background: var(--accent-fill); }
.season-key-swatch.is-part > span {
width: 100%;
height: 45%;
background: var(--accent-fill);
display: block;
}
/* ── The three figures ── */
.season-figures {
border-left: 1px solid var(--rule);
display: flex;
flex-direction: column;
}
.season-figure {
padding: 18px 22px;
border: none;
border-bottom: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 3px;
align-items: stretch;
text-align: left;
background: none;
font: inherit;
color: inherit;
}
.season-figure:last-child { border-bottom: none; }
button.season-figure { cursor: pointer; }
button.season-figure:hover { background: var(--surface-hover); }
.season-figure-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
}
.season-figure-row {
display: flex;
align-items: baseline;
gap: 9px;
}
.season-figure-num {
font-family: 'Chakra Petch', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.season-figure-num.accent { color: var(--accent); }
.season-figure-note {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--text-dim);
}
/* ── Group headings ── */
.module-group {
display: flex;
flex-direction: column;
gap: 14px;
max-width: var(--content-max, 1720px);
margin: 0 auto 26px;
width: 100%;
}
.module-group-head {
display: flex;
align-items: baseline;
gap: 12px;
}
.module-group-head.is-quiet {
padding-bottom: 2px;
border-bottom: 1px solid var(--chrome-border);
}
.module-group-title {
margin: 0;
font-family: 'Chakra Petch', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text);
}
.module-group-head.is-quiet .module-group-title { color: var(--text-dim); }
.module-group-count {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--text-dim);
}
.module-group-toggle {
margin-left: auto;
background: none;
border: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
cursor: pointer;
}
.module-group-toggle:hover { color: var(--text); }
.module-group.is-collapsed #company-project-overview { display: none; }
/* ── Needs-attention cards ──
A top rule in the accent, because the state is the point of the card. */
.attention-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.attention-card {
border: 1px solid var(--border);
border-top: 2px solid var(--accent-fill);
background: var(--surface);
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.attention-card:hover,
.attention-card:focus-visible {
background: var(--surface-hover);
border-color: var(--text-dim);
border-top-color: var(--accent-fill);
}
.attention-card.tone-blocked { border-top-color: var(--brand-cyan); }
.attention-card.tone-blocked:hover { border-top-color: var(--brand-cyan); }
.attention-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.attention-card-id {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.attention-card-name {
font-family: 'Chakra Petch', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
color: var(--text);
overflow-wrap: anywhere;
}
.attention-card-status {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.tone-blocked .attention-card-status { color: var(--brand-cyan); }
.attention-card-pct {
font-family: 'Chakra Petch', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1;
color: var(--text);
flex: none;
font-variant-numeric: tabular-nums;
}
.attention-card-pct.is-zero { color: var(--text-dim); }
.attention-card-bar {
height: 3px;
background: var(--surface-hover);
display: flex;
}
.attention-card-bar > span {
background: var(--accent-fill);
display: block;
}
.attention-card-flags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.attention-card-foot {
display: flex;
align-items: center;
gap: 14px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--text-dim);
}
.attention-foot-item {
display: flex;
align-items: center;
gap: 5px;
}
.attention-foot-item.soon { color: var(--warning); }
.attention-foot-item.overdue { color: var(--danger); }
.attention-diamond {
width: 4px;
height: 4px;
background: var(--brand-cyan);
transform: rotate(45deg);
flex: none;
}
.attention-foot-item.overdue .attention-diamond { background: var(--danger); }
.attention-foot-issues { margin-left: auto; }
.attention-foot-issues.has-issues { color: var(--text); }
/* ── Status chips ── */
.status-chips {
display: flex;
align-items: center;
gap: 7px;
}
.status-chip {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
background: none;
border: 1px solid var(--border);
padding: 7px 12px;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
}
.status-chip b { font-weight: 500; }
.status-chip:hover { color: var(--text); border-color: var(--text-dim); }
.status-chip.active {
background: var(--accent-fill);
border-color: var(--accent-fill);
color: var(--on-accent);
}
/* ── The ready pile ──
A 1px gap over a rule-coloured background draws the gridlines, so
twenty finished modules read as one block rather than twenty cards. */
#company-project-overview.view-rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1px;
background: var(--chrome-border);
border: 1px solid var(--chrome-border);
}
#company-project-overview.view-rows .module-row {
background: var(--bg);
padding: 13px 16px;
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
cursor: pointer;
border: none;
border-radius: 0;
}
#company-project-overview.view-rows .module-row:hover {
background: var(--surface);
}
.module-diamond {
width: 5px;
height: 5px;
background: var(--accent-fill);
transform: rotate(45deg);
flex: none;
}
#company-project-overview .module-name {
font-size: 13.5px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
#company-project-overview .module-pct {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
margin-left: auto;
flex: none;
}
#company-project-overview .module-flags {
display: flex;
gap: 3px;
flex: none;
}
/* Cards view keeps a roomier cell for the same rows. */
#company-project-overview.view-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
background: none;
border: none;
}
#company-project-overview.view-cards .module-row {
background: var(--surface);
border: 1px solid var(--rule);
padding: 16px;
gap: 12px;
align-items: flex-start;
}
#company-project-overview.view-cards .module-main {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
@media (max-width: 1100px) {
.season-hero { grid-template-columns: minmax(0, 1fr); }
.season-figures {
border-left: none;
border-top: 1px solid var(--rule);
flex-direction: row;
}
.season-figure {
flex: 1;
border-bottom: none;
border-right: 1px solid var(--rule);
}
.season-figure:last-child { border-right: none; }
}
/* The overview body is one scrolling column now, so it owns the gutters and
the vertical rhythm that the removed inner wrappers used to supply. */
.company-home-body {
padding-top: 26px;
padding-bottom: 48px;
}
/* ── The rail ─────────────────────────────────────────────────────
Darker than the page, so the frame recedes and the content reads as
the thing in front. Sections are separated by rules rather than
cards -- at 236px wide there is no room to spend on card padding. */
.sidebar-a {
background: var(--chrome);
border-right: 1px solid var(--chrome-border);
width: 236px;
min-width: 236px;
padding-top: 18px;
}
.app-container .main-content { margin-left: 236px; }
.rail-section {
padding: 0 0 18px;
border-bottom: 1px solid var(--chrome-border);
display: flex;
flex-direction: column;
gap: 2px;
}
.rail-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 0 18px 10px;
}
.rail-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
padding: 0 18px;
}
.rail-section-head .rail-label { padding: 0; }
.rail-add {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.06em;
color: var(--accent);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.rail-add:hover { color: var(--accent-hover); }
/* ── Projects ── */
.rail-project-list {
display: flex;
flex-direction: column;
}
.rail-project-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: none;
border: none;
border-left: 2px solid transparent;
cursor: pointer;
text-align: left;
font: inherit;
width: 100%;
}
.rail-project-row:hover { background: var(--surface); }
.rail-project-row.active {
background: var(--surface);
border-left-color: var(--accent-fill);
padding-left: 16px;
}
.rail-project-label {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rail-project-row.active .rail-project-label {
font-weight: 500;
color: var(--text);
}
.rail-project-figure {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: none;
}
.rail-bar {
width: 34px;
height: 3px;
background: var(--surface-active);
display: flex;
flex: none;
}
.rail-bar > span {
background: var(--accent-fill);
display: block;
}
.rail-bar.is-unknown { opacity: 0.4; }
.rail-pct {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
color: var(--text-dim);
width: 28px;
text-align: right;
}
.rail-project-row.active .rail-pct { color: var(--text); }
/* ── Needs attention ── */
.rail-attention { padding-top: 18px; gap: 12px; }
.rail-attention-list {
display: flex;
flex-direction: column;
gap: 1px;
}
.rail-attention-row {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 18px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font: inherit;
width: 100%;
}
.rail-attention-row:hover { background: var(--surface); }
.rail-diamond {
width: 5px;
height: 5px;
background: var(--accent-fill);
transform: rotate(45deg);
flex: none;
}
.rail-diamond.is-blocked { background: var(--brand-cyan); }
.rail-attention-name {
font-size: 12.5px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rail-attention-figure {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
color: var(--text-dim);
margin-left: auto;
flex: none;
}
.rail-attention-more {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.06em;
color: var(--accent);
background: none;
border: none;
cursor: pointer;
text-align: left;
padding: 6px 18px 0;
}
/* ── Module tools ── */
.sidebar-a .sidebar-body {
padding: 18px 0;
border-bottom: none;
gap: 12px;
}
.rail-current-module {
display: flex;
align-items: center;
gap: 9px;
padding: 0 18px;
}
.rail-current-module .rail-project-name {
font-size: 13px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rail-current-module .rail-project-name.is-empty {
color: var(--text-dim);
font-size: 12px;
}
.rail-current-module .rail-project-dot {
width: 20px;
height: 20px;
display: grid;
place-items: center;
flex: none;
}
.rail-current-module .rail-project-dot .material-symbols-outlined { font-size: 13px; }
.rail-current-module .rail-project-name.is-empty + .rail-context-level,
.rail-current-module .rail-project-dot:empty { display: none; }
.sidebar-a #project-tools { padding: 0 10px; }
/* ── Account ──
The avatar is the mark's silhouette: same chamfers, same 22% cut. */
.sidebar-footer {
margin-top: auto;
border-top: 1px solid var(--chrome-border);
}
.rail-account .profile-avatar,
.account-menu-avatar {
border-radius: 0;
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
}
#account-role {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
}
/* Collapsed rail: labels go, the rows stay reachable. */
.sidebar-a.collapsed .rail-section-head,
.sidebar-a.collapsed .rail-label,
.sidebar-a.collapsed .rail-project-figure,
.sidebar-a.collapsed .rail-attention-figure,
.sidebar-a.collapsed .rail-attention-more { display: none; }
.app-container:has(.sidebar-a.collapsed) .main-content { margin-left: 68px; }
/* ── Top bar ──────────────────────────────────────────────────────
Three blocks, each divided by a rule rather than by spacing:
brand (exactly the rail's width), server, breadcrumb. Reading it
left to right gives the full address of whatever is on screen. */
.topnav {
height: 58px;
background: var(--chrome);
border-bottom: 1px solid var(--chrome-border);
align-items: stretch;
padding: 0;
}
.topnav-left {
display: flex;
align-items: stretch;
gap: 0;
height: 100%;
min-width: 0;
flex: 1;
}
.topnav-brand {
width: 236px;
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px;
border-right: 1px solid var(--chrome-border);
height: 100%;
}
.topnav-brand h1 {
margin: 0;
font-family: 'Chakra Petch', sans-serif;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
.topnav-brand .vault-wordmark-quiet { margin-right: 0.25em; }
/* Square, mono, hairline -- a build id is metadata, not a pill. */
.version-badge {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.06em;
color: var(--text-dim);
background: none;
border: 1px solid var(--border);
border-radius: 0;
padding: 2px 5px;
cursor: pointer;
position: relative;
flex: none;
}
.version-badge:hover { color: var(--text); border-color: var(--text-dim); }
/* The small eyebrow that names each part of the address. */
.topnav-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 8.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
line-height: 1.15;
}
.topnav-eyebrow.accent { color: var(--accent); }
/* ── Server switcher ──
A gold edge, because which server you are in changes the meaning of
everything else on the page. */
.serverswitch {
position: relative;
flex: none;
border-right: 1px solid var(--chrome-border);
height: 100%;
padding: 0;
margin: 0;
}
.serverswitch-trigger {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
background: var(--surface);
border: none;
border-left: 3px solid var(--accent-fill);
border-radius: 0;
padding: 0 16px;
min-width: 236px;
cursor: pointer;
text-align: left;
}
.serverswitch-trigger:hover { background: var(--surface-hover); }
.serverswitch-id {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
}
.serverswitch-name {
font-family: 'Chakra Petch', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
line-height: 1.15;
}
.serverswitch-figure {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
margin-left: auto;
flex: none;
}
.serverswitch-count,
.serverswitch-caret {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
color: var(--text-dim);
white-space: nowrap;
}
.serverswitch-caret { font-size: 10px; }
.serverswitch-panel {
width: 340px;
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}
.serverswitch-head {
padding: 11px 16px;
border-bottom: 1px solid var(--rule);
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.server-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
border-left: 3px solid transparent;
border-radius: 0;
cursor: pointer;
}
.server-item:hover { background: var(--surface-hover); }
.server-item.active {
background: var(--surface-hover);
border-left-color: var(--accent-fill);
}
.server-item-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.server-item-name {
font-size: 13.5px;
color: var(--text);
}
.server-item.active .server-item-name { font-weight: 500; }
.server-item-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
}
.server-item-current {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-left: auto;
flex: none;
}
.server-item-figure {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: none;
}
/* ── Breadcrumb ── */
.topnav-crumbs {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px;
min-width: 0;
flex: 1;
}
.crumb {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
line-height: 1.15;
background: none;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
padding: 6px 10px;
cursor: pointer;
text-align: left;
font: inherit;
}
.crumb:hover {
background: var(--surface);
border-bottom-color: var(--accent-fill);
}
.crumb-company {
font-size: 14px;
font-weight: 500;
color: var(--accent);
white-space: nowrap;
}
.crumb-slash {
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
color: var(--border);
flex: none;
}
.megamenu {
position: relative;
flex: none;
height: auto;
padding: 0;
border: none;
}
.megamenu-trigger {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
border-bottom: 1px dashed var(--border);
}
.crumb-id {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
line-height: 1.15;
}
.crumb-project {
font-size: 14px;
color: var(--text-secondary);
white-space: nowrap;
}
.megamenu-caret {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
}
.megamenu-panel {
top: calc(100% + 8px);
border-radius: 0;
border: 1px solid var(--border);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}
.topnav-right { padding: 0 20px; display: flex; align-items: center; }
.topnav-action { border-radius: 0; }
@media (max-width: 1100px) {
.topnav-brand { width: auto; }
.topnav-brand h1 { display: none; }
.serverswitch-trigger { min-width: 0; }
}
/* ── b1.4 corrections ── */
/* Two older .crumb-company rules survive from the shells this replaced, and
one of them uppercases and tracks the name. In the breadcrumb the project is
a proper noun sitting under a mono eyebrow that already carries the tracked
uppercase, so doing it twice reads as shouting. */
.topnav-crumbs .crumb-company {
font-family: 'Ubuntu', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--accent);
}
.topnav-crumbs .crumb-project {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
}
/* "100%" is 30px wide; the column was 28, so the bar beside it overlapped the
text and read as a strikethrough. */
.rail-pct { width: 32px; }
/* The name is what people scan; everything else in the row gives way to it. */
#company-project-overview.view-rows .module-name { flex: 1; }
/* ══════════════════════════════════════════════════════════════════
b1.5 — Module page, context menus and the remaining tabs
One panel shape used everywhere: square, hairline border, a head
with a mono-uppercase title, sections split by rules, and a "See all"
foot. Once that shape exists the module page, the tabs and the menus
are the same component at different sizes.
══════════════════════════════════════════════════════════════════ */
/* ── Panels ── */
.project-home-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
max-width: var(--content-max, 1720px);
}
.home-box {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 0;
min-height: 0;
transition: border-color 0.15s;
}
.home-box:hover {
border-color: var(--rule);
transform: none;
box-shadow: none;
}
.home-box-header {
padding: 17px 22px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
gap: 12px;
background: none;
}
.home-box-header h2 {
margin: 0;
font-family: 'Chakra Petch', sans-serif;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.home-box-figure {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
}
.home-box-action {
margin-left: auto;
background: none;
border: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
cursor: pointer;
}
.home-box-action:hover { color: var(--accent-hover); }
.home-box-body {
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.home-box-footer {
border-top: 1px solid var(--rule);
padding: 13px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: none;
}
.home-box-footer:hover { background: var(--surface-hover); }
/* ── Sections inside a panel ── */
.home-section {
padding: 18px 22px;
border-bottom: 1px solid var(--chrome-border);
display: flex;
flex-direction: column;
gap: 11px;
}
.home-section:last-child { border-bottom: none; }
.home-section-grow { flex: 1; }
.home-section-head {
display: flex;
align-items: center;
gap: 12px;
}
.home-section-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.home-section-figure,
.home-section-note {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
margin-left: auto;
}
.home-section-note { margin-left: 0; }
/* ── Progress ── */
.home-status-row {
display: flex;
align-items: center;
gap: 14px;
}
.home-status-row .status-progress-bar {
flex: 1;
height: 8px;
background: var(--surface-active);
border-radius: 0;
display: flex;
}
.home-status-row .status-progress-fill {
background: var(--accent-fill);
border-radius: 0;
display: block;
}
.home-progress-pct {
font-family: 'Chakra Petch', sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1;
color: var(--text);
flex: none;
font-variant-numeric: tabular-nums;
}
.home-due-info {
display: flex;
align-items: center;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--text-secondary);
}
.home-due-info.is-empty { color: var(--text-dim); }
.home-due-info.soon { color: var(--warning); }
.home-due-info.overdue { color: var(--danger); }
.home-due-left {
margin-left: auto;
color: var(--text-dim);
}
.home-diamond {
width: 4px;
height: 4px;
background: var(--brand-cyan);
transform: rotate(45deg);
flex: none;
}
.home-due-info.overdue .home-diamond { background: var(--danger); }
/* ── Flags ──
Outlined rather than filled: on this page a flag is a label on the
module, not a coloured tag in a list, and a row of solid blocks
fought the panel. */
.status-flags {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin-bottom: 0;
}
.status-flags .flag-tag {
background: transparent !important;
border: 1px solid currentColor;
border-radius: 0;
padding: 5px 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
gap: 8px;
}
.status-flags .flag-tag:hover { transform: none; }
.status-flags .flag-tag .material-symbols-outlined { display: none; }
.status-flags .flag-tag::before {
content: '';
width: 4px;
height: 4px;
background: currentColor;
transform: rotate(45deg);
flex: none;
}
.status-flags .flag-remove-btn {
opacity: 0.55;
font-size: 12px;
margin-left: 2px;
}
.flag-add-chip {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
background: none;
border: 1px dashed var(--border);
padding: 5px 10px;
cursor: pointer;
}
.flag-add-chip:hover { color: var(--accent); border-color: var(--accent); }
/* ── Checklist ──
The bar is one segment done, one to go. A percentage would say the
same thing less usefully: what matters is how much is left. */
.home-todo-bar {
display: flex;
gap: 2px;
height: 5px;
}
.home-todo-bar .is-done { background: var(--accent-fill); }
.home-todo-bar .is-left { background: var(--surface-active); }
.home-todo-grid {
display: flex;
flex-direction: column;
gap: 1px;
}
.home-checklist-item {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 7px 0;
background: none;
border: none;
text-align: left;
font: inherit;
cursor: pointer;
width: 100%;
}
/* The mark's silhouette again, at 14px. */
.home-check {
width: 14px;
height: 14px;
flex: none;
border: 1px solid var(--text-dim);
margin-top: 2px;
clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
transition: background 0.12s, border-color 0.12s;
}
.home-checklist-item:hover .home-check {
border-color: var(--accent);
background: var(--accent-light);
}
.home-checklist-text {
font-size: 13.5px;
color: var(--text);
line-height: 1.45;
text-wrap: pretty;
}
/* ── Issues panel ── */
.issue-counts {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--chrome-border);
gap: 0;
}
.issue-count-item {
padding: 22px;
display: flex;
flex-direction: column;
gap: 5px;
border: none;
border-right: 1px solid var(--chrome-border);
border-radius: 0;
background: none;
cursor: pointer;
}
.issue-count-item:last-child { border-right: none; }
.issue-count-item:hover { background: var(--surface-hover); }
.issue-count-num {
font-family: 'Chakra Petch', sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
/* Only colour it when there is something to act on. */
.issue-count-item.has-open .issue-count-num { color: var(--accent); }
.issue-count-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
}
.issue-count-desc {
font-size: 12px;
color: var(--text-dim);
}
.home-issue-actions {
padding: 16px 22px;
display: flex;
align-items: center;
gap: 12px;
}
.home-issue-mark {
width: 26px;
height: 26px;
flex: none;
border: 1px solid var(--border);
display: grid;
place-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
}
.home-issue-mark.is-clear { color: var(--accent); }
.home-issue-mark.has-open { color: var(--danger); border-color: var(--danger); }
.home-issue-summary {
font-size: 13px;
color: var(--text-secondary);
min-width: 0;
}
.btn-ghost {
margin-left: auto;
flex: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
background: none;
border: 1px solid var(--border);
padding: 6px 11px;
cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* ── Design panel ── */
.design-recent-list {
display: flex;
flex-direction: column;
padding: 10px 0 12px;
}
.design-recent-item {
display: flex;
align-items: center;
gap: 11px;
padding: 8px 22px;
border-radius: 0;
cursor: pointer;
}
.design-recent-item:hover { background: var(--surface-hover); }
.design-recent-item .home-diamond { background: var(--accent-fill); }
.design-recent-name {
font-size: 13.5px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.design-recent-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
margin-left: auto;
flex: none;
}
/* ── Log panel ── */
.home-quick-note {
padding: 18px 22px;
border-bottom: 1px solid var(--chrome-border);
display: flex;
align-items: center;
gap: 10px;
}
.home-quick-note input {
flex: 1;
border: 1px solid var(--border);
background: var(--bg);
border-radius: 0;
padding: 10px 13px;
font-size: 13px;
color: var(--text);
}
.home-quick-note-btn {
flex: none;
background: var(--accent-fill);
border: 1px solid var(--accent-fill);
border-radius: 0;
padding: 10px 15px;
cursor: pointer;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--on-accent);
}
.home-quick-note-btn:hover { background: var(--accent-fill-hover); }
.log-preview {
display: flex;
flex-direction: column;
padding: 8px 0 10px;
}
.log-preview-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 22px;
}
.log-preview-item:hover { background: var(--surface-hover); }
.log-preview-item .home-diamond {
background: var(--surface-active);
margin-top: 7px;
}
.log-preview-text {
font-size: 13.5px;
color: var(--text);
line-height: 1.5;
text-wrap: pretty;
}
.log-preview-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
margin-left: auto;
flex: none;
margin-top: 3px;
}
/* ── Module header ── */
.project-header {
background: none;
border-bottom: 1px solid var(--chrome-border);
padding-top: 22px;
padding-bottom: 22px;
gap: 24px;
}
.project-header-left {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.project-header h4 {
font-family: 'Chakra Petch', sans-serif;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.1;
color: var(--text);
}
.project-header-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
}
.project-header-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
flex: none;
}
.project-header-search {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 0;
padding: 9px 14px;
min-width: 300px;
}
/* ── Rail: tool counts and siblings ── */
.project-tree-tab {
border-radius: 0;
border-left: 2px solid transparent;
padding: 8px 18px;
gap: 11px;
}
.project-tree-tab.active {
background: var(--surface);
border-left-color: var(--accent-fill);
padding-left: 16px;
}
.project-tree-tab .tool-label { flex: 1; min-width: 0; }
.tool-count {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
color: var(--text-secondary);
flex: none;
}
.tool-count.is-quiet { color: var(--text-dim); }
.rail-diamond.is-done { background: var(--surface-active); }
.rail-siblings { padding-top: 18px; gap: 12px; border-bottom: none; }
/* ── Context menus ─────────────────────────────────────────────────
The same shape as the server and module dropdowns: square, hairline
border, a hard shadow, and a gold rule down the hovered row rather
than a filled bar. Filling the whole row in gold was fine when the
accent was a mid blue; at this weight it shouts. */
.context-menu {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0;
padding: 5px 0;
min-width: 200px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}
.context-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
border-radius: 0 !important;
border-left: 2px solid transparent;
font-size: 13px;
color: var(--text-secondary);
}
.context-menu-item:hover {
background: var(--surface-hover);
border-left-color: var(--accent-fill);
color: var(--text);
}
.context-menu-item .material-symbols-outlined {
font-size: 15px;
color: var(--text-dim);
}
.context-menu-item:hover .material-symbols-outlined { color: var(--accent); }
.context-menu-item.ctx-danger { color: var(--danger); }
.context-menu-item.ctx-danger:hover {
background: var(--danger-light);
border-left-color: var(--danger);
color: var(--danger);
}
.context-menu-item.ctx-danger:hover .material-symbols-outlined { color: var(--danger); }
.context-menu-divider {
height: 1px;
background: var(--rule);
margin: 5px 0;
}
/* Section labels, matching the dropdowns' "SWITCH SERVER" head. */
.context-menu-header,
.context-menu-label {
padding: 9px 15px 5px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.ctx-progress-input {
border-radius: 0;
border: 1px solid var(--border);
background: var(--bg);
}
.ctx-progress-go { border-radius: 0; }
/* ── Menus and popovers that share the shape ── */
.megamenu-panel,
.serverswitch-panel,
.account-menu,
.editor-ctx-menu,
.pv-modal .modal-content,
.modal-content {
border-radius: 0;
}
.account-menu {
border: 1px solid var(--border);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}
.account-menu-item {
border-radius: 0;
border-left: 2px solid transparent;
}
.account-menu-item:hover {
background: var(--surface-hover);
border-left-color: var(--accent-fill);
}
/* ── The rest of the tabs ─────────────────────────────────────────
Same panel shape, same mono eyebrows, same square edges as the
module page, so moving between tabs does not change the language. */
.tab-header {
background: none;
border-bottom: 1px solid var(--chrome-border);
padding-top: 18px;
padding-bottom: 18px;
}
.tab-header h4 {
font-family: 'Chakra Petch', sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.btn-back {
border-radius: 0;
border: 1px solid var(--border);
background: var(--surface);
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); }
/* Issues */
.issue-card,
.status-card,
.log-note-add,
.log-entry,
.design-tree-panel,
.design-editor-panel > #design-page-view,
.todo-item {
border-radius: 0;
}
.issue-card {
background: var(--surface);
border: 1px solid var(--rule);
border-left: 2px solid var(--rule);
}
.issue-card:hover {
border-color: var(--border);
transform: none;
}
.issue-card.priority-critical,
.issue-card.priority-high { border-left-color: var(--danger); }
.issue-card.priority-medium { border-left-color: var(--accent-fill); }
.issue-card.priority-low { border-left-color: var(--surface-active); }
.issue-badge {
border-radius: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 7px;
}
.issue-filter {
border-radius: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--border);
}
.issue-filter.active {
background: var(--accent-fill);
border-color: var(--accent-fill);
color: var(--on-accent);
}
/* Status tab */
.status-card {
background: var(--surface);
border: 1px solid var(--rule);
}
.status-card-header {
border-bottom: 1px solid var(--rule);
background: none;
}
.status-card-header h6,
.status-card-header span:not(.material-symbols-outlined) {
font-family: 'Chakra Petch', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.todo-item {
border-bottom: 1px solid var(--chrome-border);
border-radius: 0;
}
/* Design tab */
.design-tree-panel {
background: var(--chrome);
border-right: 1px solid var(--chrome-border);
}
.tree-item {
border-radius: 0;
border-left: 2px solid transparent;
font-size: 13px;
}
.tree-item:hover { transform: none; background: var(--surface); }
.tree-item.active {
background: var(--surface);
border-left-color: var(--accent-fill);
color: var(--text);
}
.design-page-title-input {
font-family: 'Chakra Petch', sans-serif;
font-weight: 600;
}
/* Log tab */
.log-entry {
background: var(--surface);
border: 1px solid var(--rule);
}
.log-note-add input,
.log-note-add textarea {
border-radius: 0;
}
.log-page-btn {
border-radius: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
}
/* The log preview on the module page: rules, not cards. */
.home-box-logs .log-preview-item {
background: none;
border: none;
border-bottom: 1px solid var(--chrome-border);
border-radius: 0;
padding: 9px 22px;
}
.home-box-logs .log-preview-item:last-child { border-bottom: none; }
.home-box-logs .log-preview-item:hover { background: var(--surface-hover); border-color: var(--chrome-border); }
/* ── Everything else that still has a radius ──
The mark is built from chamfers and right angles; a rounded control
next to it reads as a different product. */
.btn,
.form-control,
.form-select,
.admin-pill,
.admin-card,
.admin-table-wrap,
.admin-search,
.segmented,
.module-chip,
.company-filter-bar,
.toolbar-select,
.stat-tile,
.attention-card,
.season-hero,
.home-box,
.megamenu-badge,
.serverswitch-badge,
.btn-icon,
.admin-avatar,
.version-badge,
.sidebar-search-wrapper,
.filter-clear,
.btn-add-project {
border-radius: 0;
}
/* The avatars keep the mark's silhouette rather than going square. */
.profile-avatar,
.account-menu-avatar,
.admin-avatar {
border-radius: 0;
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}
/* ══════════════════════════════════════════════════════════════════
b1.6 — no decorative icons, and the last blue ring
The design is icon-free. Everywhere the old shell reached for a
Material glyph, the design uses a typographic mark instead: a
diamond for a module, "+" for an add, "/" for a separator. Icons
were mostly acting as spacers -- a 20px glyph plus its gap ahead of
every label, in a 236px rail, for no information.
They are switched off here rather than stripped from thirty render
sites: the markup that emits them is shared, and a rule per region
is easier to reverse than thirty edits. Where the glyph carried
meaning it gets a mark instead, not nothing.
══════════════════════════════════════════════════════════════════ */
.rail-link .material-symbols-outlined,
.project-tree-tab .material-symbols-outlined,
.context-menu-item .material-symbols-outlined,
.account-menu-item .material-symbols-outlined,
.btn .material-symbols-outlined,
.btn-back .material-symbols-outlined,
.topnav-action .material-symbols-outlined,
.home-box-header .material-symbols-outlined,
.status-card-header .material-symbols-outlined,
.tab-header .material-symbols-outlined,
.tree-item .tree-icon,
.design-recent-item .material-symbols-outlined,
.log-preview-item .material-symbols-outlined,
.module-chip .material-symbols-outlined,
.issue-filter .material-symbols-outlined,
.megamenu-badge,
.serverswitch-badge,
.project-page-icon,
.project-header-icon,
.company-icon-box,
.project-dot,
.server-item-icon {
display: none !important;
}
/* A leading "+" reads as an add without a 20px glyph in front of it. */
.btn-primary::before,
.btn-add-project::before {
content: '+';
font-family: 'IBM Plex Mono', monospace;
margin-right: 2px;
}
/* Except where the label already says it, or it is not an add at all. */
.btn-primary.no-plus::before,
.modal-footer .btn-primary::before,
.edit-actions .btn-primary::before,
#login-submit::before,
#btn-save-settings::before { content: none; }
/* The rail's labels carry the whole row now, so they get the space back. */
.rail-link,
.project-tree-tab { gap: 0; }
/* ── The switcher ── */
.megamenu-panel {
width: 312px;
padding: 0;
min-width: 0;
}
.megamenu-grid { display: block; }
.switcher-filter {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 15px;
border-bottom: 1px solid var(--rule);
}
.switcher-glyph {
font-size: 15px;
color: var(--text-dim);
flex: none;
}
.switcher-filter input {
flex: 1;
min-width: 0;
background: none;
border: none;
outline: none;
font-size: 12.5px;
color: var(--text);
padding: 0;
}
.switcher-filter input::placeholder { color: var(--text-dim); }
.switcher-count {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
color: var(--text-dim);
border: 1px solid var(--border);
padding: 2px 5px;
white-space: nowrap;
}
.switcher-group-label {
padding: 9px 15px 4px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
/* The first group is the one that needs doing, so it is the loud one. */
#project-list .switcher-group-label:first-child { color: var(--accent); }
#project-list .project-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
border-radius: 0;
border-left: 2px solid transparent;
background: none;
}
#project-list .project-item:hover { background: var(--surface-hover); }
#project-list .project-item.active {
background: var(--surface-hover);
border-left-color: var(--accent-fill);
}
#project-list .project-name {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
#project-list .project-item.active .project-name {
color: var(--text);
font-weight: 500;
}
.switcher-diamond {
width: 5px;
height: 5px;
background: var(--accent-fill);
transform: rotate(45deg);
flex: none;
}
.switcher-diamond.is-done { background: var(--surface-active); }
.switcher-diamond.is-blocked { background: var(--brand-cyan); }
.switcher-figure {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--text-dim);
flex: none;
}
.switcher-add {
display: block;
width: 100%;
padding: 10px 15px;
border: none;
border-top: 1px solid var(--rule);
background: none;
text-align: left;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--accent);
cursor: pointer;
}
.switcher-add:hover { background: var(--surface-hover); }
/* ── The last blue ring ──
@tailwindcss/forms styles every input on focus with its own ring, and
its default colour is Tailwind blue-600. It reaches inputs that are
not .form-control -- the switcher filter, the quick note, the module
search -- which is why a blue border kept coming back after the
focus rule was fixed. Neutralise the ring and give them the same gold
border and glow the form controls already had. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
--tw-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-color: var(--accent-fill);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: transparent;
outline: none;
border-color: var(--accent-hover);
box-shadow: 0 0 0 3px var(--accent-light);
}
/* Borderless inputs keep the glow off -- their container shows focus. */
.switcher-filter input:focus,
.sidebar-search-wrapper input:focus,
.company-filter-bar input:focus,
.project-header-search input:focus,
.admin-search input:focus {
box-shadow: none;
border-color: transparent;
}
.switcher-filter:focus-within,
.company-filter-bar:focus-within,
.project-header-search:focus-within,
.admin-search:focus-within { border-color: var(--accent); }
/* Click proxies. Real buttons that other controls trigger, kept in the DOM for
their handler but never shown -- so `hidden` is not used, because the
permission pass flips that back on for anyone allowed to use them. */
.switcher-proxy {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
border: 0;
}
/* The rail's module marker was the last coloured tile. The design names the
module in plain text under the "Module tools" label -- the tile was another
20px of glyph in front of a word that already says it. */
.rail-current-module .rail-project-dot { display: none; }
.rail-current-module { padding-bottom: 4px; }
.rail-current-module .rail-project-name {
font-family: 'Chakra Petch', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
}
|