/* ══════════════════════════════════════════════════════════════
components.css — NMMI · ai
@layer components | All reusable UI blocks.
References semantic tokens only — never raw values.
══════════════════════════════════════════════════════════════ */
@layer components {
/* ────────────────────────────────────────────────────────────
APP SHELL — top nav-bar + left drawer + right drawer
──────────────────────────────────────────────────────────── */
/* Top nav-bar */
.appnav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
z-index: 40;
display: flex;
align-items: center;
padding-inline-start: 0.4rem; /* aligns hamburger with sidebar rail icons */
background: var(--bg-body);
border-bottom: var(--hairline) solid var(--border);
transition: box-shadow var(--transition-fast);
}
.appnav.scrolled { box-shadow: var(--shadow-sm); }
/* ── Left hamburger — first child of .appnav ── */
.appnav > .nav-toggle-bar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: none;
border: none;
color: var(--text-low);
cursor: pointer;
transition: color var(--transition-fast);
}
.appnav > .nav-toggle-bar:hover { color: var(--text); }
.appnav > .nav-toggle-bar:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
/* ── Centre cluster: logo + brand wordmark (legacy / other pages) ── */
.nav-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-width: 0;
}
/* ── Left-aligned brand: logo + wordmark next to hamburger (dashboard) ── */
.nav-brand {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .5rem;
min-width: 0;
}
/* Logo */
.nav-center .logo-link,
.nav-brand .logo-link {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.nav-center .logo,
.nav-brand .logo {
height: 32px;
width: auto;
flex: 0 0 auto;
display: block;
object-fit: contain;
}
/* Logo adaptive rendering */
html[data-mode="light"] .logo {
filter:
brightness(0.88)
contrast(1.15)
saturate(1.1)
drop-shadow(0 1px 3px rgba(0,0,0,0.18));
transition: filter var(--transition-fast);
}
html[data-mode="dark"] .logo {
filter: drop-shadow(0 1px 6px rgba(0,0,0,0.55));
transition: filter var(--transition-fast);
}
html[data-mode="light"] .logo-link:hover .logo {
filter:
brightness(0.82)
contrast(1.2)
saturate(1.15)
drop-shadow(0 2px 6px rgba(0,0,0,0.22));
}
html[data-mode="dark"] .logo-link:hover .logo {
filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7));
}
@media (prefers-reduced-motion: reduce) {
.logo { transition: none !important; }
}
/* Brand wordmark */
.brand {
font-size: var(--t-lg);
font-weight: 500;
letter-spacing: .2em;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: baseline;
white-space: nowrap;
transition: color var(--transition-fast), text-shadow var(--transition-fast);
}
.brand .dot { padding: 0 .12em; }
html[data-mode="dark"] .brand {
color: rgba(var(--theme-rgb), 0.20);
text-shadow: 0 0 4px rgba(var(--theme-rgb), 0.55);
}
html[data-mode="dark"] .brand:hover {
color: rgba(var(--theme-rgb), 0.65);
text-shadow: 0 0 8px rgba(var(--theme-rgb), 0.55), 0 0 18px rgba(var(--theme-rgb), 0.85);
}
html[data-mode="light"] .brand {
color: rgba(var(--theme-rgb), 0.5);
text-shadow: 0 0 4px rgba(var(--theme-rgb), 0.55);
}
html[data-mode="light"] .brand:hover {
color: rgba(var(--theme-rgb), 1.0);
text-shadow: 0 0 8px rgba(var(--theme-rgb), 0.55), 0 0 18px rgba(var(--theme-rgb), 0.35);
}
.nav-center .logo-link:focus-visible,
.nav-center .brand:focus-visible,
.nav-brand .logo-link:focus-visible,
.nav-brand .brand:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
/* App-bar trailing actions (right side) */
.appnav .bar-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .25rem;
padding-inline-end: .6rem;
margin-inline-start: auto;
}
/* Touch targets ≥44px on coarse-pointer devices */
@media (pointer: coarse) {
.appnav > .nav-toggle-bar,
.appnav .bar-actions .bar-action { min-width: 44px; min-height: 44px; }
.sidebar .nav-item { min-height: 44px; }
}
/* Safe-area insets */
@supports (padding: env(safe-area-inset-left)) {
.appnav {
padding-inline-start: max(env(safe-area-inset-left), 0.4rem);
padding-inline-end: max(env(safe-area-inset-right), 0.6rem);
}
.sidebar {
padding-inline-start: max(env(safe-area-inset-left), 0.5rem);
padding-block-end: max(env(safe-area-inset-bottom),0.5rem);
}
.sidebar-right {
padding-inline-end: max(env(safe-area-inset-right), 0.5rem);
padding-block-end: max(env(safe-area-inset-bottom),0.5rem);
}
}
/* Bar-action button */
.bar-action {
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
cursor: pointer;
background: none;
border: none;
color: var(--text-low);
opacity: .7;
transition: opacity var(--transition-fast), color var(--transition-fast);
}
.bar-action:hover,
.bar-action:focus-visible { opacity: 1; color: var(--text); outline: none; }
.bar-action .ico { font-size: 1.05rem; line-height: 1; }
.bar-action .ico.bulb svg,
.bar-action .ico.gear svg { width: 20px; height: 20px; display: block; }
.bar-action:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
/* Right-drawer trigger — panel-split icon glow on open */
html[data-rdrawer="open"] #rightDrawerBtn {
opacity: 1;
color: rgba(var(--theme-rgb), 0.85);
}
/* Mode button — grayscale sun/moon, cross-fade hover */
#modeBtn .ico.bulb { display: grid; place-items: center; }
#modeBtn .ico.bulb svg {
grid-area: 1 / 1;
width: 20px; height: 20px;
display: block;
color: var(--text);
filter: grayscale(1);
transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.ic-sun, .ic-moon { display: block !important; }
html[data-mode="dark"] #modeIcon .ic-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
html[data-mode="dark"] #modeIcon .ic-moon { opacity: 1; transform: none; }
html[data-mode="light"] #modeIcon .ic-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
html[data-mode="light"] #modeIcon .ic-sun { opacity: 1; transform: none; }
html[data-mode="dark"] #modeBtn:hover #modeIcon .ic-moon { opacity: .25; transform: rotate(-40deg) scale(.6); }
html[data-mode="dark"] #modeBtn:hover #modeIcon .ic-sun { opacity: 1; transform: none; color: var(--text-hi); }
html[data-mode="light"] #modeBtn:hover #modeIcon .ic-sun { opacity: .25; transform: rotate(40deg) scale(.6); }
html[data-mode="light"] #modeBtn:hover #modeIcon .ic-moon { opacity: 1; transform: none; color: var(--text-hi); }
/* Theme button — accent glow */
#themeBtn .ico.bulb svg {
color: rgba(var(--theme-rgb), 0.85);
filter: drop-shadow(0 0 6px rgba(var(--theme-rgb), 0.55));
transition: color var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}
html[data-theme="blue"] #themeBtn:hover .ico.bulb svg { color: #22ff00; filter: drop-shadow(0 0 7px rgba(34,255,0,.6)); transform: scale(1.08); }
html[data-theme="gray"] #themeBtn:hover .ico.bulb svg { color: rgba(0,210,210,.95); filter: drop-shadow(0 0 7px rgba(0,210,210,.6)); transform: scale(1.08); }
html[data-theme="blue"][data-mode="light"] #themeBtn:hover .ico.bulb svg { color: #008a00; filter: drop-shadow(0 0 7px rgba(0,138,0,.5)); }
html[data-theme="gray"][data-mode="light"] #themeBtn:hover .ico.bulb svg { color: rgba(0,110,130,.95); filter: drop-shadow(0 0 7px rgba(0,110,130,.5)); }
/* ────────────────────────────────────────────────────────────
LEFT DRAWER SIDE-PANEL
──────────────────────────────────────────────────────────── */
.sidebar {
position: fixed;
cursor: default;
top: var(--nav-h);
bottom: 0;
left: 0;
z-index: 30;
width: var(--side-w);
background: var(--bg-body);
border-right: var(--hairline) solid var(--border);
transition: width var(--transition-layout);
overflow-x: hidden;
overflow-y: auto;
padding: .6rem .5rem;
display: flex;
flex-direction: column;
gap: .2rem;
}
/* Navigation items */
.nav-item {
display: flex;
align-items: center;
gap: .85rem;
height: 40px;
padding: 0 .65rem;
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--text-low);
font-size: var(--t-sm);
font-weight: 500;
border: 1px solid transparent;
white-space: nowrap;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
opacity: .7;
transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.nav-item:hover { background: var(--bg-surface); color: var(--text); opacity: 1; }
.nav-item.active { background: var(--bg-surface); border-color: transparent; color: var(--theme-dim); opacity: 1; }
.nav-item .ico { flex: 0 0 22px; text-align: center; font-size: 1rem; }
/* Nav labels: hide when rail-collapsed */
.nav-item .lbl { opacity: 1; transition: opacity var(--transition-fast); }
html[data-drawer="closed"] .nav-item .lbl { opacity: 0; pointer-events: none; }
html[data-drawer="closed"] .sidebar { cursor: pointer; }
/* ── Sidebar nav section header ── */
.nav-section-title {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--theme-dim);
padding: .5rem .65rem .2rem;
white-space: nowrap;
opacity: 1;
transition: opacity var(--transition-fast);
pointer-events: none;
user-select: none;
}
html[data-drawer="closed"] .nav-section-title { opacity: 0; }
/* ── Sidebar footer group ── */
.sidebar-footer {
margin-top: auto;
padding-top: .5rem;
border-top: var(--hairline) solid var(--border);
display: flex;
flex-direction: column;
gap: .1rem;
}
/* Inert nav item */
.nav-item--inert {
display: flex;
align-items: center;
gap: .85rem;
height: 36px;
padding: 0 .65rem;
border-radius: var(--radius-lg);
color: var(--text-low);
font-size: var(--t-xs);
font-weight: 400;
border: 1px solid transparent;
white-space: nowrap;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
opacity: .55;
cursor: default;
}
.nav-item--inert .ico { flex: 0 0 22px; text-align: center; font-size: .9rem; }
.nav-item--inert .lbl { opacity: 1; transition: opacity var(--transition-fast); }
html[data-drawer="closed"] .nav-item--inert .lbl { opacity: 0; pointer-events: none; }
/* Scrim (left drawer — Tier C modal) */
.scrim[hidden] { display: none; }
.scrim {
position: fixed;
inset: 0;
z-index: 25;
background: rgba(0,0,0,.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-layout), visibility var(--transition-layout);
pointer-events: none;
}
/* ────────────────────────────────────────────────────────────
RIGHT DRAWER
──────────────────────────────────────────────────────────── */
.sidebar-right {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 60;
width: var(--rdrawer-w);
background: color-mix(in srgb, var(--bg-body) 72%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
@supports not (backdrop-filter: blur(1px)) {
background: var(--bg-body);
}
border-left: var(--hairline) solid var(--border);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform var(--transition-layout),
box-shadow var(--transition-layout);
}
html[data-rdrawer="open"] .sidebar-right {
transform: translateX(0);
box-shadow: var(--shadow-lg, var(--shadow-md));
}
.scrim-right {
position: fixed;
inset: 0;
z-index: 55;
background: rgba(0,0,0,.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-layout), visibility var(--transition-layout);
pointer-events: none;
}
html[data-rdrawer="open"] .scrim-right {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rdrawer-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-h);
padding: 0 .75rem 0 1rem;
border-bottom: var(--hairline) solid var(--border);
background: var(--bg-panel);
}
.rdrawer-title {
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-mid);
}
.rdrawer-close {
width: 32px; height: 32px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--text-faint);
cursor: pointer;
opacity: .7;
transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.rdrawer-close:hover { opacity: 1; color: var(--text); background: var(--bg-surface-2); }
.rdrawer-close:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
.rdrawer-section {
flex: 0 0 auto;
padding: .85rem 1rem .6rem;
display: flex;
flex-direction: column;
gap: .5rem;
border-bottom: var(--hairline) solid var(--border);
}
.rdrawer-section-title {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-faint);
padding-bottom: .35rem;
}
.rdrawer-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 36px;
}
.rdrawer-row-label {
font-size: var(--t-sm);
font-weight: 500;
color: var(--text-mid);
}
.rdrawer-action {
width: 36px; height: 36px;
border-radius: var(--radius-lg);
}
@media (prefers-reduced-motion: reduce) {
.sidebar-right,
.scrim-right { transition: none !important; }
}
/* ────────────────────────────────────────────────────────────
SECTION TITLE
──────────────────────────────────────────────────────────── */
.section-title {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--text-mid);
border-bottom: var(--hairline) solid var(--border);
padding-bottom: .4rem;
margin-bottom: .6rem;
}
/* ────────────────────────────────────────────────────────────
CHIPS / BADGES (base only — colour variants live in page CSS)
──────────────────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .18rem .5rem;
border-radius: var(--radius-full);
font-size: var(--t-xs);
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
border: var(--hairline) solid transparent;
}
/* ────────────────────────────────────────────────────────────
BUTTONS
──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .35rem .85rem; border-radius: var(--radius-md); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; cursor: pointer; border: var(--hairline) solid transparent; white-space: nowrap; transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-primary { background: var(--bg-surface-2); border-color: var(--border); color: var(--text); transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn-primary:hover { background: var(--theme-bg); border-color: var(--theme-border); color: var(--theme-dim); box-shadow: 0 0 6px rgba(var(--theme-rgb),0.30); }
.btn-secondary { background: var(--bg-surface); color: var(--text-mid); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-low); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-surface); color: var(--text); }
.btn-danger { background: var(--err-bg); color: var(--err); border-color: var(--err-bd); }
.btn-danger:hover { background: var(--err-bd); }
.btn-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.btn-warn:hover { background: var(--warn-bd); }
.btn-icon {
padding: .35rem;
width: 32px; height: 32px;
border-radius: var(--radius-md);
}
.btn:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* ────────────────────────────────────────────────────────────
DEMO INPUT
──────────────────────────────────────────────────────────── */
.input {
padding: .35rem .65rem;
border-radius: var(--radius-md);
border: var(--hairline) solid var(--border);
background: var(--bg-input);
color: var(--text);
font-size: var(--t-sm);
font-family: var(--font-body);
outline: none;
transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--theme-border); }
.input:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* ────────────────────────────────────────────────────────────
MODAL OVERLAY + PANEL
──────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: var(--overlay-scrim);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-layout), visibility var(--transition-layout);
}
html[data-modal="open"] .modal-overlay,
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-panel {
background: var(--bg-panel);
border: var(--hairline) solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
width: 100%;
max-width: var(--modal-panel-w);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
transform: translateY(8px);
transition: transform var(--transition-layout);
}
.modal-overlay.active .modal-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.modal-overlay, .modal-panel { transition: none !important; }
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-block-end: var(--space-sm);
border-bottom: var(--hairline) solid var(--border);
flex-shrink: 0;
}
.modal-title {
font-size: var(--t-base);
font-weight: 600;
color: var(--text-hi);
margin: 0;
letter-spacing: .01em;
}
.modal-close {
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: var(--hairline) solid transparent;
border-radius: var(--radius-md);
color: var(--text-faint);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.modal-close:hover {
color: var(--text);
background: var(--bg-surface);
border-color: var(--border);
}
.modal-close:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
.modal-body {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* ────────────────────────────────────────────────────────────
SETTINGS SECTIONS
──────────────────────────────────────────────────────────── */
.settings-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding-block-end: var(--space-md);
border-bottom: var(--hairline) solid var(--border-soft);
}
.settings-section:last-child {
border-bottom: none;
padding-block-end: 0;
}
.settings-section-title {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0;
padding-block-end: .2rem;
}
.settings-identity-grid {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--space-xs) var(--space-sm);
margin: 0;
font-size: var(--t-sm);
}
.settings-identity-grid dt {
color: var(--text-low);
font-weight: 500;
}
.settings-identity-grid dd {
margin: 0;
color: var(--text);
}
/* ────────────────────────────────────────────────────────────
FORM PRIMITIVES
──────────────────────────────────────────────────────────── */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.form-group label {
font-size: var(--t-xs);
font-weight: 500;
color: var(--text-low);
letter-spacing: .02em;
}
.form-group input {
width: 100%;
padding: var(--space-xs) var(--space-sm);
font-size: var(--t-sm);
font-family: var(--font-body);
color: var(--text);
background: var(--bg-body);
border: var(--hairline) solid var(--border);
border-radius: var(--radius-md);
min-height: var(--input-h);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-group input::placeholder { color: var(--text-faint); }
.form-group input:hover { border-color: var(--border-soft); }
.form-group input:focus {
border-color: var(--theme-border);
background: var(--bg-body);
}
.form-group input:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* ────────────────────────────────────────────────────────────
PASSWORD WRAPPER
──────────────────────────────────────────────────────────── */
.password-wrapper {
position: relative;
display: flex;
align-items: stretch;
}
.password-wrapper input {
flex: 1;
padding-inline-end: 2.5rem;
}
.toggle-vis {
position: absolute;
right: var(--space-xs);
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
opacity: .55;
transition: opacity var(--transition-fast);
}
.toggle-vis:hover { opacity: 1; }
.toggle-vis:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-sm);
}
.toggle-vis .pw-ico {
width: 20px;
height: 20px;
display: block;
filter: var(--pw-ico-filter, none);
transition: opacity var(--transition-fast);
}
.toggle-vis[aria-pressed="false"] .pw-ico--show { display: block; }
.toggle-vis[aria-pressed="false"] .pw-ico--hide { display: none; }
.toggle-vis[aria-pressed="true"] {
opacity: 1;
}
.toggle-vis[aria-pressed="true"] .pw-ico--hide { display: block; }
.toggle-vis[aria-pressed="true"] .pw-ico--show { display: none; }
.toggle-vis[aria-pressed="true"] .pw-ico--hide {
filter: invert(1) sepia(1) saturate(4) hue-rotate(
var(--pw-ico-hue, 80deg)
);
}
html[data-theme="gray"] { --pw-ico-hue: 80deg; }
html[data-theme="blue"] { --pw-ico-hue: 155deg; }
html[data-theme="gray"][data-mode="light"] { --pw-ico-hue: 95deg; }
html[data-theme="blue"][data-mode="light"] { --pw-ico-hue: 170deg; }
.pw-status {
font-size: var(--t-xs);
min-height: 1.25em;
color: var(--text-faint);
transition: color var(--transition-fast);
}
.pw-status.status-ok { color: var(--ok); }
.pw-status.status-error { color: var(--err); }
/* ────────────────────────────────────────────────────────────
CREDIT BALANCE DISPLAY
──────────────────────────────────────────────────────────── */
.credit-balance {
display: flex;
flex-direction: column;
gap: .15rem;
}
.credit-balance .credit-balance-label {
font-size: var(--t-xs);
color: var(--text-faint);
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1;
}
.credit-balance b {
font-size: var(--t-sm);
font-weight: 600;
color: var(--text-hi);
line-height: 1.1;
}
/* ────────────────────────────────────────────────────────────
ACTION LINK
──────────────────────────────────────────────────────────── */
.action-link {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--t-sm);
font-weight: 500;
color: var(--theme-dim);
text-decoration: none;
padding: .2rem .4rem;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
}
.action-link:hover { color: var(--theme); background: var(--theme-bg); }
.action-link:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* ────────────────────────────────────────────────────────────
PANEL HEAD
──────────────────────────────────────────────────────────── */
.panel-head {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ════════════════════════════════════════════════════════════
TOGGLE / SWITCH COMPONENT
HTML pattern:
Optionally wrapped in a .p-row.toggle-row alongside a label.
════════════════════════════════════════════════════════════ */
.toggle-item {
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.toggle-cb {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
border-radius: var(--radius-full);
background: var(--border);
border: var(--hairline) solid var(--border);
transition: background var(--transition-fast), border-color var(--transition-fast);
flex: 0 0 auto;
}
.toggle-switch::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: var(--radius-full);
background: var(--text-low);
transition: transform var(--transition-fast), background var(--transition-fast);
}
.toggle-cb:checked + .toggle-switch {
background: var(--theme-bg);
border-color: var(--theme-border);
}
.toggle-cb:checked + .toggle-switch::after {
transform: translateX(16px);
background: var(--theme);
}
.toggle-item:hover .toggle-switch { border-color: var(--theme-dim); }
.toggle-cb:focus-visible + .toggle-switch {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.toggle-cb:disabled + .toggle-switch {
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 32px;
gap: var(--space-sm);
}
.hitl-row-inline {
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.hitl-cb {
position: absolute;
opacity: 0; width: 0; height: 0;
pointer-events: none;
}
.ts {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: var(--t-xs);
color: var(--text-mid);
}
/* ════════════════════════════════════════════════════════════
RANGE SLIDER COMPONENT
HTML pattern:
════════════════════════════════════════════════════════════ */
.ctrl-group {
display: flex;
flex-direction: column;
gap: .35rem;
padding-block: .15rem;
}
.ctrl-label {
font-size: var(--t-xs);
color: var(--text-mid);
font-weight: 500;
display: flex;
align-items: baseline;
gap: .35rem;
}
.ctrl-label strong {
font-weight: 600;
color: var(--theme-dim);
}
input[type="range"],
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: var(--radius-full);
background: var(--border);
outline: none;
cursor: pointer;
transition: background var(--transition-fast);
}
input[type="range"]:hover,
.slider:hover {
background: var(--theme-border);
}
input[type="range"]::-webkit-slider-thumb,
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--theme);
border: 2px solid var(--bg-body);
box-shadow: 0 0 4px var(--theme-glow);
cursor: grab;
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:active,
.slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.15);
box-shadow: 0 0 8px var(--theme-glow);
}
input[type="range"]::-moz-range-thumb,
.slider::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--theme);
border: 2px solid var(--bg-body);
box-shadow: 0 0 4px var(--theme-glow);
cursor: grab;
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
input[type="range"]::-moz-range-thumb:active,
.slider::-moz-range-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}
input[type="range"]::-moz-range-track,
.slider::-moz-range-track {
height: 4px;
border-radius: var(--radius-full);
background: var(--border);
}
input[type="range"]:focus-visible,
.slider:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-full);
}
input[type="range"]:disabled,
.slider:disabled {
opacity: .4;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
input[type="range"]::-webkit-slider-thumb,
.slider::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
.slider::-moz-range-thumb { transition: none; }
}
/* ════════════════════════════════════════════════════════════
STRUCTURAL / LAYOUT PRIMITIVES
════════════════════════════════════════════════════════════ */
.toolbar {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.elev {
background: var(--bg-surface);
border: var(--hairline) solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.collapse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: var(--radius-md);
background: none;
border: none;
color: var(--text-low);
cursor: pointer;
opacity: .6;
transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.collapse-btn:hover { opacity: 1; color: var(--text); }
.collapse-btn[aria-expanded="true"] { transform: rotate(180deg); }
.collapse-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}
.btn-disabled {
opacity: .4 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
.active {
background: var(--bg-surface);
color: var(--theme-dim);
border-color: transparent;
opacity: 1;
}
}
/* ══════════════════════════════════════════════════════════════
Additional universal shell components
Merged from shell-responsive-content.html
Only truly missing reusable components were added here to avoid
duplication with the existing design system.
══════════════════════════════════════════════════════════════ */
@layer components {
/* ── Legacy JS-driven stateful switch (.ts.on/.off) ──────── */
.ts {
cursor: pointer;
}
.ts.off {
background: var(--bg-input);
border: var(--hairline) solid var(--border);
}
.ts.off::after {
left: 3px;
background: var(--text-faint);
}
.ts.on {
background: var(--bg-surface-2);
border: var(--hairline) solid var(--text-low);
}
.ts.on::after {
left: calc(100% - 0.68rem);
background: var(--text-hi);
box-shadow: none;
}
/* ── Generic panel primitive for reusable surface groupings ─ */
.panel {
flex: 1 1 200px;
border-radius: var(--radius-sm);
padding: .85rem;
background: var(--bg-surface);
border: var(--hairline) solid var(--border);
box-shadow: var(--shadow-md);
color: var(--text-mid);
font-size: var(--t-sm);
}
/* ── Demo / utility layout rows used across shell docs/pages ─ */
.comp-row {
display: flex;
gap: .5rem;
flex-wrap: wrap;
align-items: center;
}
.surface-stack {
display: flex;
flex-direction: column;
gap: 4px;
}
.type-row {
display: flex;
flex-direction: column;
gap: .35rem;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
/* ── Filled-left range slider variant (.cfg-range) ───────── */
.cfg-range {
display: block;
width: 100%;
height: 12px;
-webkit-appearance: none;
appearance: none;
background: transparent;
outline: none;
cursor: pointer;
--_pct: 0%;
background-image: linear-gradient(
to right,
var(--accent-bg) 0%,
var(--accent-dim) var(--_pct),
var(--theme-border) var(--_pct),
var(--theme-bg) 100%
);
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: center;
}
.cfg-range::-webkit-slider-runnable-track {
height: 2px;
background: transparent;
border-radius: var(--radius-full);
}
.cfg-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
margin-top: -4.5px;
border-radius: 50%;
background: var(--accent-dim);
border: 1px solid var(--accent-border);
box-shadow: 0 0 0 1px var(--theme);
transition: background .2s ease, box-shadow .2s ease;
}
.cfg-range::-webkit-slider-thumb:hover {
background: var(--accent);
box-shadow: 0 0 0 2px var(--accent-dim);
}
.cfg-range::-moz-range-track {
height: 1px;
background: var(--theme-bg);
border-radius: var(--radius-full);
border: none;
}
.cfg-range::-moz-range-progress {
height: 2px;
background: var(--accent-border);
border-radius: var(--radius-full);
}
.cfg-range::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--theme-border);
border: 1px solid var(--accent-bg);
cursor: pointer;
}
}