/* ============================================================
Editorial Calm — shared app shell + component overrides
============================================================
Loaded on every page that includes /js/editorial-shell.js
and has .
Scope: every rule below is prefixed with body.editorial-calm
so removing that class disables the entire visual layer.
What's restyled (no markup changes required):
• Sidebar chrome (.sidebar, .sidebar-header, .app-branding,
.team-context, .sidebar-nav, .sidebar-footer)
• Topbar / .page-header
• Cards (.card, .stat-card, .doc-card, .empty-state)
• Buttons (existing .btn variants picked up new accent
from tokens-bridge; here we restyle the *shape*)
• Inputs, badges, conflicts list
To change the look globally → edit this file. Never set per-page.
============================================================ */
/* ============================================================
Motion + interaction system (canonical)
------------------------------------------------------------
All interactive elements should follow these conventions.
Duration tokens (from tokens.css):
--duration-instant 80ms instant feedback (no perceptible delay)
--duration-fast 150ms default for hover, focus, ripple
--duration-base 220ms default for transitions, slide-in
--duration-slow 360ms for full-screen / modal entry
Easing tokens:
--easing-standard cubic-bezier(0.2, 0, 0, 1) default
--easing-emphasis cubic-bezier(0.2, 0, 0, 1.2) for slight overshoot
Hover patterns:
• Buttons → background + border tint (150ms)
• Cards → background + 1px lift + shadow-1 (150ms)
• Nav items → background tint only (150ms)
• Icon buttons → background tint + border visible (150ms)
• Destructive → danger-soft bg + danger color (150ms)
Focus visible:
• Every focusable element gets a 2px accent ring with 2px
offset (or 2px danger ring if data-action="delete-*").
• Outside that, no custom focus styling — use this default.
Don't:
• Stretch transitions past 220ms unless animating a modal/page.
• Use transform-lift on more than cards (buttons stay still).
• Add bespoke focus rings — extend this block instead.
============================================================ */
body.editorial-calm :focus-visible {
outline: 2px solid var(--color-teal-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
body.editorial-calm a:focus-visible,
body.editorial-calm button:focus-visible,
body.editorial-calm [role="button"]:focus-visible,
body.editorial-calm [tabindex]:focus-visible {
outline: 2px solid var(--color-teal-400);
outline-offset: 2px;
}
/* Danger-on-hover elements get a danger focus ring (kept in sync with hover) */
body.editorial-calm [data-action^="delete"]:focus-visible {
outline: 2px solid var(--color-danger);
outline-offset: 2px;
}
/* Generic interactive transition — apply to any element that should
animate its background/border/color on hover. Components can opt in
by adding `.ec-interactive` or adopting the property list directly. */
body.editorial-calm .ec-interactive {
transition: background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
/* Card-lift — the canonical "tap me" affordance for clickable cards.
Apply by adding `.ec-card-lift` (or via existing patterns that already
set transform+shadow on hover — they remain valid). */
body.editorial-calm .ec-card-lift {
transition: border-color var(--duration-fast) var(--easing-standard),
box-shadow var(--duration-fast) var(--easing-standard),
transform var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-card-lift:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-1);
transform: translateY(-1px);
}
/* ─────────────────────────────────────────────
Page chrome
───────────────────────────────────────────── */
body.editorial-calm {
background: var(--bg);
color: var(--fg-body);
}
body.editorial-calm .sidebar {
background: var(--bg-secondary);
border-right: 1px solid var(--border);
padding: var(--space-6) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-6);
width: 268px;
min-width: 268px;
}
/* Sidebar header — flatten so its children (brand + team-context) can be
independently reordered as direct flex items of .sidebar.
Brand stays top; team-context (workspace identity) is pushed to bottom. */
body.editorial-calm .sidebar-header {
display: contents;
}
body.editorial-calm .app-branding { order: 1; }
body.editorial-calm .sidebar-nav { order: 2; }
body.editorial-calm .ec-spaces { order: 3; }
body.editorial-calm .team-context { order: 4; margin-top: auto; }
body.editorial-calm .sidebar-footer{ order: 5; }
body.editorial-calm .app-branding {
display: flex;
align-items: center;
gap: 10px;
padding: 4px var(--space-2);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .app-branding:hover { background: rgba(0, 0, 0, .035); }
body.editorial-calm .app-branding:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
body.editorial-calm .app-logo,
body.editorial-calm .app-logo svg {
width: 26px; height: 26px;
background: none;
border-radius: 0;
}
body.editorial-calm .app-logo svg { color: var(--accent); }
body.editorial-calm .app-title h2 {
font-family: var(--wordmark-family);
font-weight: var(--wordmark-weight);
letter-spacing: var(--wordmark-track);
font-size: 19px;
color: var(--fg);
margin: 0;
line-height: 1.1;
}
body.editorial-calm .app-title p { display: none; }
/* Workspace context (sidebar): text-only switcher, no swatch.
Lets the workspace name breathe — wraps to a second line if needed,
never truncates to "..." */
/* Bottom-left account card — workspace name + chevron, opens the
unified workspace dropdown (switch ws, settings, profile, logout).
Standardised height so the card matches itself across pages.
styles.css sets flex-direction:column on .team-context; we force
row so the chevron sits to the right of the name, not below it. */
body.editorial-calm .team-context {
margin: 0;
padding: 10px 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
height: 56px;
min-height: 56px;
width: 100%;
box-sizing: border-box;
position: relative; /* dropdown anchor */
}
body.editorial-calm .team-context:hover { background: var(--bg-elevated); cursor: pointer; }
body.editorial-calm .team-context-label { display: none; }
body.editorial-calm .team-selector {
display: flex;
align-items: center;
gap: 8px;
/* Let flex shrink this column so the ::after chevron always has room.
Don't set width:100% — it overrides flex sizing and pushes chevron
outside the card. */
flex: 1 1 0;
min-width: 0;
padding: 0;
background: none;
border: 0;
}
body.editorial-calm .team-avatar,
body.editorial-calm .team-avatar-fallback { display: none; }
body.editorial-calm .team-info {
display: flex;
flex-direction: column;
line-height: 1.25;
gap: 3px;
flex: 1;
min-width: 0;
}
body.editorial-calm .team-info::before {
content: "Workspace";
font: 500 9.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
/* Higher specificity to beat both .team-name AND .sidebar-header .team-name
in styles.css (which sets display:inline-flex + white-space:nowrap). */
body.editorial-calm .team-name,
body.editorial-calm .sidebar-header .team-name {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
background: transparent;
padding: 0;
border-radius: 0;
gap: 0;
white-space: normal;
overflow-wrap: anywhere;
text-overflow: clip;
overflow: hidden;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body.editorial-calm .team-context::after {
content: "";
width: 14px;
height: 14px;
flex: 0 0 14px;
align-self: center;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
pointer-events: none;
}
body.editorial-calm .team-context:hover::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* ─────────────────────────────────────────────
Workspace switcher dropdown (.team-switcher-dropdown)
Rendered by /js/team-switcher.js into .team-selector.
We anchor it ABOVE the bottom workspace card and style it
to match Editorial Calm.
───────────────────────────────────────────── */
body.editorial-calm .team-switcher-dropdown {
position: absolute;
left: 0;
bottom: calc(100% + 6px); /* open upward — sits above the card */
right: auto;
top: auto;
width: 260px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3);
padding: 6px;
z-index: 1000;
color: var(--fg);
}
body.editorial-calm .team-switcher-header {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 10px 12px 6px;
background: transparent;
border: 0;
}
body.editorial-calm .team-switcher-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: transparent;
color: var(--fg-body);
cursor: pointer;
font-family: var(--font-sans);
font-size: 13.5px;
}
body.editorial-calm .team-switcher-item:hover {
background: var(--bg-secondary);
color: var(--fg);
}
body.editorial-calm .team-switcher-item.active {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
body.editorial-calm .team-switcher-item .team-avatar {
width: 24px; height: 24px;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
background: var(--bg-secondary);
color: var(--fg-muted);
font-size: 12px;
flex: 0 0 24px;
}
body.editorial-calm .team-switcher-item .team-avatar-img {
width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover;
}
body.editorial-calm .team-switcher-item .team-name {
font-size: 13.5px;
font-weight: 500;
color: inherit;
background: none;
padding: 0;
border: 0;
display: inline;
-webkit-line-clamp: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
body.editorial-calm .team-switcher-item.active .team-name { color: var(--accent); }
/* Additional account-menu items appended by editorial-shell.js */
body.editorial-calm .ec-account-divider {
height: 1px;
background: var(--border);
margin: 6px 4px;
}
body.editorial-calm .ec-account-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: transparent;
color: var(--fg-body);
cursor: pointer;
font: 500 13.5px/1.2 var(--font-sans);
text-decoration: none;
}
body.editorial-calm .ec-account-item:hover { background: var(--bg-secondary); color: var(--fg); }
body.editorial-calm .ec-account-item--danger { color: var(--color-danger); }
body.editorial-calm .ec-account-item--danger:hover { background: #FEE2E2; color: var(--color-danger); }
body.editorial-calm .ec-account-item svg { width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; opacity: .9; }
/* ─────────────────────────────────────────────
Spaces section (sidebar) — sub-spaces within current workspace.
Rendered by editorial-shell.js from window.spaceManager.
───────────────────────────────────────────── */
body.editorial-calm .ec-spaces {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
}
body.editorial-calm .ec-spaces::before {
content: "Spaces";
display: block;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 0 10px 6px;
}
body.editorial-calm .ec-spaces .ec-space-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--fg-body);
font: 500 13.5px/1.3 var(--font-sans);
cursor: pointer;
text-align: left;
width: 100%;
min-width: 0;
}
body.editorial-calm .ec-spaces .ec-space-item:hover {
background: rgba(0, 0, 0, .035);
color: var(--fg);
}
body.editorial-calm .ec-spaces .ec-space-item.is-active {
background: var(--bg-elevated);
color: var(--fg);
border-color: var(--border);
}
body.editorial-calm .ec-spaces .ec-space-dot {
width: 8px; height: 8px; flex: 0 0 8px;
border-radius: 999px;
background: var(--fg-muted);
}
body.editorial-calm .ec-spaces .ec-space-item[data-space-id="general"] .ec-space-dot {
background: var(--accent);
outline: 2px solid var(--accent-soft);
}
body.editorial-calm .ec-spaces .ec-space-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.editorial-calm .ec-spaces .ec-space-new {
margin-top: 6px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: var(--radius-md);
background: transparent;
border: 1px dashed var(--border-strong);
color: var(--fg-muted);
font: 600 12.5px/1 var(--font-sans);
cursor: pointer;
text-align: left;
width: 100%;
}
body.editorial-calm .ec-spaces .ec-space-new:hover {
color: var(--fg);
border-color: var(--accent);
background: var(--accent-soft);
}
/* ─────────────────────────────────────────────
Sidebar space rows + gear — the sidebar is the single
space-switching surface (legacy topbar header bar removed).
───────────────────────────────────────────── */
body.editorial-calm .ec-spaces .ec-space-row {
display: flex;
align-items: center;
gap: 2px;
}
body.editorial-calm .ec-spaces .ec-space-row .ec-space-item { flex: 1; min-width: 0; }
body.editorial-calm .ec-spaces .ec-space-gear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition: background var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-spaces .ec-space-gear svg { width: 14px; height: 14px; }
body.editorial-calm .ec-spaces .ec-space-gear:hover {
background: rgba(0, 0, 0, .05);
color: var(--fg);
}
body.editorial-calm .ec-spaces .ec-space-gear:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────
Notification bell — mounted at the right edge of the brand
row by editorial-shell.js; markup rendered by notifications.js.
───────────────────────────────────────────── */
body.editorial-calm .ec-bell-mount {
margin-left: auto;
display: inline-flex;
align-items: center;
}
body.editorial-calm .ec-bell-mount .header-notification-btn {
width: 30px;
height: 30px;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--fg-muted);
box-shadow: none;
transform: none;
}
body.editorial-calm .ec-bell-mount .header-notification-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, .05);
border: 0;
box-shadow: none;
transform: none;
color: var(--fg);
}
body.editorial-calm .ec-bell-mount .header-notification-btn:focus-visible {
box-shadow: none;
outline: var(--focus-ring);
outline-offset: 2px;
}
body.editorial-calm .ec-bell-mount .header-notification-icon {
width: 16px;
height: 16px;
color: currentColor;
}
body.editorial-calm .ec-bell-mount .notification-badge {
top: 4px;
right: 4px;
background: var(--color-danger);
border-color: var(--bg-secondary);
}
/* Panel opens over the content area, anchored to the sidebar edge. */
body.editorial-calm .ec-bell-mount .notification-panel {
position: fixed;
top: 56px;
left: 16px;
right: auto;
border-radius: var(--radius-lg);
border-color: var(--border);
}
/* ─────────────────────────────────────────────
Credits pill — sidebar footer mount (rendered by
/js/credits-indicator.js).
───────────────────────────────────────────── */
body.editorial-calm .ec-credits-mount { margin-bottom: 10px; }
body.editorial-calm .ec-credits-mount .header-credits-btn {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--bg-elevated);
color: var(--fg-body);
font: 600 12px/1 var(--font-sans);
padding: 7px 12px;
cursor: pointer;
transition: border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-credits-mount .header-credits-btn:hover {
border-color: var(--accent);
color: var(--fg);
}
body.editorial-calm .ec-credits-mount .header-credits-btn svg {
width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto;
}
body.editorial-calm .ec-credits-mount .header-credits-value { min-width: 0; }
body.editorial-calm .ec-credits-mount .header-credits-badge {
margin-left: auto;
font: 600 10px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-danger);
}
/* Sidebar nav */
body.editorial-calm .sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
}
body.editorial-calm .sidebar-nav::before {
content: "Workspace";
display: block;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 0 10px 6px;
}
body.editorial-calm .sidebar-nav a.nav-item,
body.editorial-calm .sidebar-nav .nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
color: var(--fg-body);
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
background: transparent;
border: 1px solid transparent;
text-decoration: none;
}
body.editorial-calm .sidebar-nav a.nav-item:hover {
background: rgba(0, 0, 0, .035);
color: var(--fg);
}
body.editorial-calm .sidebar-nav a.nav-item.active {
background: var(--bg-elevated);
color: var(--fg);
border-color: var(--border);
}
body.editorial-calm .sidebar-nav .nav-icon {
width: 16px; height: 16px;
flex: 0 0 16px;
color: currentColor;
opacity: .9;
}
/* The Inbox badge inside nav (rendered by navigation.js) */
body.editorial-calm .sidebar-nav .nav-badge {
margin-left: auto;
background: var(--color-danger) !important;
color: #fff !important;
font: 600 10.5px/1 var(--font-sans) !important;
padding: 2px 7px !important;
border-radius: 999px !important;
vertical-align: middle;
}
/* Sidebar footer — sits directly below the workspace context card.
No top divider (the workspace card above provides visual separation). */
body.editorial-calm .sidebar-footer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 8px 4px;
border-top: 0;
background: transparent;
}
body.editorial-calm .user-info {
display: flex;
align-items: center;
gap: 10px;
padding-top: 6px;
background: transparent;
border: 0;
}
body.editorial-calm .user-avatar {
width: 32px; height: 32px;
border-radius: 999px;
background: oklch(0.92 0.04 200);
color: oklch(0.4 0.07 200);
display: grid; place-items: center;
font: 600 12px var(--font-sans);
border: 0;
}
body.editorial-calm .user-details h4 {
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
margin: 0;
line-height: 1.15;
}
body.editorial-calm .user-details p {
font: 500 10px/1.3 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0;
}
/* Standalone Logout button is folded into the workspace dropdown
below — hide the original .sidebar-footer button to avoid duplication. */
body.editorial-calm .sidebar-footer #logout-btn,
body.editorial-calm .sidebar-footer .btn { display: none; }
/* ─────────────────────────────────────────────
Main content / topbar / page-header
───────────────────────────────────────────── */
body.editorial-calm .main-content {
background: var(--bg);
padding: var(--space-12) var(--space-8);
}
body.editorial-calm .page-header {
border: 0;
padding: 0 0 var(--space-8);
margin: 0 0 var(--space-8);
border-bottom: 1px solid var(--border);
}
/* Pages that wrap the title + topbar pill in a row */
body.editorial-calm .page-header-top-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
}
body.editorial-calm .page-header-content { flex: 1; min-width: 0; }
body.editorial-calm .page-header h1 {
font: 400 var(--text-h1-size)/var(--text-h1-lh) var(--font-serif);
letter-spacing: var(--text-h1-track);
color: var(--fg);
margin: 0 0 8px;
}
body.editorial-calm .page-header h1 em {
font-style: italic;
color: var(--accent);
font-weight: 400;
}
body.editorial-calm .page-header p {
font: var(--text-body-lg-weight) var(--text-body-lg-size)/var(--text-body-lg-lh) var(--font-sans);
letter-spacing: var(--text-body-lg-track);
color: var(--fg-muted);
margin: 0;
max-width: 720px;
}
/* Eyebrow utility — drop `…` above any h1/h2
to get the signature mono uppercase label. */
body.editorial-calm .ub-eyebrow,
body.editorial-calm .editorial-eyebrow {
display: inline-block;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 8px;
}
body.editorial-calm .ub-eyebrow--accent,
body.editorial-calm .editorial-eyebrow.is-accent { color: var(--accent); font-weight: 600; }
/* ─────────────────────────────────────────────
Cards
───────────────────────────────────────────── */
body.editorial-calm .card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
}
body.editorial-calm .card .card-header,
body.editorial-calm .card-header {
border-bottom: 1px solid var(--border);
}
body.editorial-calm .card-header h2,
body.editorial-calm .card-header h3,
body.editorial-calm .card > h2:first-child,
body.editorial-calm .card > h3:first-child,
body.editorial-calm .card > h2:nth-child(-n+2),
body.editorial-calm .card > h3:nth-child(-n+2) {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.3;
color: var(--fg);
margin: 0 0 14px;
}
/* Larger variant (e.g. "Recent System Files" was rendering at 20px) */
body.editorial-calm .card > h3.card-section-title,
body.editorial-calm .card > h2.card-section-title {
font-size: 20px;
margin-bottom: 18px;
}
/* Stats grid */
body.editorial-calm .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
body.editorial-calm .stat-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px 20px;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 10px;
}
body.editorial-calm .stat-card.clickable:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-1);
}
body.editorial-calm .stat-card .stat-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 0;
}
body.editorial-calm .stat-card .stat-icon {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent);
display: grid; place-items: center;
font-size: 14px;
}
body.editorial-calm .stat-card .stat-title,
body.editorial-calm .stat-card .stat-label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
body.editorial-calm .stat-card .stat-value,
body.editorial-calm .stat-card .stat-number {
font: 400 36px/1 var(--font-serif);
letter-spacing: -0.025em;
color: var(--fg);
}
body.editorial-calm .stat-card .stat-meta,
body.editorial-calm .stat-card .stat-subtitle {
font: 500 12px/1.4 var(--font-sans);
color: var(--fg-muted);
}
/* Iconless stat cards (Conflicts page etc.) — dial down the heroic
36px serif so they feel calm in empty state, not shouty. */
body.editorial-calm .stat-card:not(:has(.stat-icon)) {
text-align: left;
padding: 16px 18px;
gap: 6px;
}
body.editorial-calm .stat-card:not(:has(.stat-icon)) .stat-value,
body.editorial-calm .stat-card:not(:has(.stat-icon)) .stat-number {
font-size: 28px;
line-height: 1;
text-align: left;
}
body.editorial-calm .stat-card:not(:has(.stat-icon)) .stat-label {
text-align: left;
}
/* ─────────────────────────────────────────────
Buttons — re-shape existing .btn to Editorial Calm
(color was already shifted by tokens-bridge.css)
───────────────────────────────────────────── */
body.editorial-calm .btn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.005em;
padding: 10px 18px;
font-size: 14px;
border: 1px solid transparent;
transition: background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .btn-sm { padding: 8px 14px; font-size: 13px; }
body.editorial-calm .btn-lg { padding: 14px 22px; font-size: 15px; }
body.editorial-calm .btn-primary {
background: var(--accent);
color: #fff;
}
body.editorial-calm .btn-primary:hover { background: var(--accent-hover); }
body.editorial-calm .btn-secondary {
background: transparent;
color: var(--fg);
border-color: var(--border);
}
body.editorial-calm .btn-secondary:hover { background: var(--bg-secondary); }
body.editorial-calm .btn-danger {
background: var(--color-danger);
color: #fff;
}
/* Outlined danger CTA — destructive but lower-emphasis (e.g. Disable MFA, Remove avatar) */
body.editorial-calm .btn-danger-outline {
background: transparent;
color: var(--color-danger);
border: 1px solid var(--color-danger);
}
body.editorial-calm .btn-danger-outline:hover {
background: #FEE2E2;
color: var(--color-danger);
}
/* Subtle text-only button — no fill/border (e.g. "Show advanced") */
body.editorial-calm .btn-link-subtle {
background: transparent;
border: 0;
padding: 4px 6px;
color: var(--fg-muted);
font: 600 12.5px/1 var(--font-sans);
cursor: pointer;
}
body.editorial-calm .btn-link-subtle:hover { color: var(--fg); background: transparent; }
/* ─────────────────────────────────────────────
Inputs
───────────────────────────────────────────── */
body.editorial-calm input[type="text"],
body.editorial-calm input[type="email"],
body.editorial-calm input[type="password"],
body.editorial-calm input[type="search"],
body.editorial-calm textarea {
font-family: var(--font-sans);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 14px;
color: var(--fg);
}
body.editorial-calm input:focus,
body.editorial-calm textarea:focus {
border-color: var(--accent);
outline: none;
box-shadow: none;
}
/* Native