/* Nexus UI — WorkforceMgr design system tokens only. Light by default, dark via [data-bs-theme="dark"]. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--wfm-font-size-root); }
body { margin: 0; background: var(--wfm-body-bg); color: var(--wfm-text-body); font: var(--wfm-font-weight-normal) var(--wfm-font-size-base)/var(--wfm-line-height-base) var(--wfm-font-sans); }
a { color: var(--wfm-primary-text); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--wfm-space-2); color: var(--wfm-text-heading); font-weight: var(--wfm-headings-weight); line-height: var(--wfm-headings-line-height); }
h1 { font-size: var(--wfm-h4); } h2 { font-size: var(--wfm-h5); } h3 { font-size: var(--wfm-h6); }
code, pre, .wfm-mono { font-family: var(--wfm-font-mono); font-size: var(--wfm-font-size-sm); }
pre { margin: 0; padding: var(--wfm-space-3); background: var(--wfm-surface-muted); border: var(--wfm-border-width) solid var(--wfm-border); border-radius: var(--wfm-radius-lg); overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* Shell: top navbar + content */
.wfm-navbar { height: var(--wfm-navbar-height); display: flex; align-items: center; gap: var(--wfm-space-4); padding: 0 var(--wfm-space-4); background: var(--wfm-surface); border-bottom: var(--wfm-border-width) solid var(--wfm-border); box-shadow: var(--wfm-shadow-xs); }
.wfm-navbar__brand { display: flex; align-items: center; gap: var(--wfm-space-2); color: var(--wfm-text-heading); font-weight: var(--wfm-font-weight-semibold); font-size: var(--wfm-font-size-lg); }
.wfm-navbar__brand i { color: var(--wfm-primary); font-size: 1.4rem; }
.wfm-navbar__nav { display: flex; gap: var(--wfm-space-1); }
.wfm-navbar__link { padding: var(--wfm-space-2) var(--wfm-space-3); border-radius: var(--wfm-radius-lg); color: var(--wfm-text-body); font-weight: var(--wfm-font-weight-medium); }
.wfm-navbar__link:hover { background: var(--wfm-gray-50); text-decoration: none; }
.wfm-navbar__link--active { background: var(--wfm-primary-label); color: var(--wfm-primary-text); }
.wfm-navbar__spacer { margin-left: auto; }
.wfm-content { max-width: 1320px; margin: 0 auto; padding: var(--wfm-content-padding-y) var(--wfm-space-4); }
.wfm-page-header { display: flex; align-items: center; gap: var(--wfm-space-3); margin-bottom: var(--wfm-space-4); }
.wfm-page-header h1 { margin: 0; }

/* Buttons — appearance: solid | label | outline */
.wfm-btn { display: inline-flex; align-items: center; gap: var(--wfm-space-2); padding: 0.5rem 1.125rem; border: var(--wfm-border-width) solid transparent; border-radius: var(--wfm-radius-lg); font: var(--wfm-font-weight-medium) var(--wfm-font-size-base)/1.4 var(--wfm-font-sans); cursor: pointer; transition: filter var(--wfm-transition-fast) var(--wfm-ease), background var(--wfm-transition-fast) var(--wfm-ease); text-decoration: none; }
.wfm-btn:hover { filter: brightness(0.94); text-decoration: none; }
.wfm-btn:focus-visible { outline: none; box-shadow: 0 0 0 0.15rem rgba(var(--wfm-primary-rgb), 0.12); }
.wfm-btn:disabled, .wfm-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.wfm-btn--sm { padding: 0.3rem 0.75rem; font-size: var(--wfm-font-size-sm); }
.wfm-btn--lg { padding: 0.7rem 1.5rem; font-size: var(--wfm-font-size-lg); }
.wfm-btn--block { width: 100%; justify-content: center; }
.wfm-btn--primary { background: var(--wfm-primary); color: var(--wfm-white); }
.wfm-btn--secondary { background: var(--wfm-secondary); color: var(--wfm-white); }
.wfm-btn--success { background: var(--wfm-success); color: var(--wfm-white); }
.wfm-btn--warning { background: var(--wfm-warning); color: var(--wfm-white); }
.wfm-btn--danger { background: var(--wfm-danger); color: var(--wfm-white); }
.wfm-btn--info { background: var(--wfm-info); color: var(--wfm-white); }
.wfm-btn--label.wfm-btn--primary { background: var(--wfm-primary-label); color: var(--wfm-primary-text); }
.wfm-btn--label.wfm-btn--secondary { background: var(--wfm-secondary-label); color: var(--wfm-gray-800); }
.wfm-btn--label.wfm-btn--success { background: var(--wfm-success-label); color: #3f8a0e; }
.wfm-btn--label.wfm-btn--warning { background: var(--wfm-warning-label); color: #9a6a0b; }
.wfm-btn--label.wfm-btn--danger { background: var(--wfm-danger-label); color: var(--wfm-danger-text); }
.wfm-btn--label.wfm-btn--info { background: var(--wfm-info-label); color: #0b7fa8; }
.wfm-btn--outline { background: transparent; }
.wfm-btn--outline.wfm-btn--primary { border-color: var(--wfm-primary); color: var(--wfm-primary-text); }
.wfm-btn--outline.wfm-btn--secondary { border-color: var(--wfm-secondary); color: var(--wfm-gray-800); }
.wfm-btn--outline.wfm-btn--danger { border-color: var(--wfm-danger); color: var(--wfm-danger-text); }
.wfm-btn--outline.wfm-btn--info { border-color: var(--wfm-info); color: #0b7fa8; }
.wfm-btn--outline.wfm-btn--success { border-color: var(--wfm-success); color: #3f8a0e; }
.wfm-btn--outline.wfm-btn--warning { border-color: var(--wfm-warning); color: #9a6a0b; }

/* Badges — soft label tint by default */
.wfm-badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.55em; border-radius: var(--wfm-radius-badge); font-size: var(--wfm-font-size-xs); font-weight: var(--wfm-font-weight-medium); line-height: 1.3; white-space: nowrap; }
.wfm-badge--pill { border-radius: var(--wfm-radius-pill); padding-inline: 0.7em; }
.wfm-badge__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.wfm-badge--primary { background: var(--wfm-primary-label); color: var(--wfm-primary-text); }
.wfm-badge--secondary { background: var(--wfm-secondary-label); color: var(--wfm-gray-800); }
.wfm-badge--success { background: var(--wfm-success-label); color: #3f8a0e; }
.wfm-badge--info { background: var(--wfm-info-label); color: #0b7fa8; }
.wfm-badge--warning { background: var(--wfm-warning-label); color: #9a6a0b; }
.wfm-badge--danger { background: var(--wfm-danger-label); color: var(--wfm-danger-text); }
.wfm-badge--solid.wfm-badge--primary { background: var(--wfm-primary); color: var(--wfm-white); }
.wfm-badge--solid.wfm-badge--secondary { background: var(--wfm-secondary); color: var(--wfm-white); }
.wfm-badge--solid.wfm-badge--success { background: var(--wfm-success); color: var(--wfm-white); }
.wfm-badge--solid.wfm-badge--info { background: var(--wfm-info); color: var(--wfm-white); }
.wfm-badge--solid.wfm-badge--warning { background: var(--wfm-warning); color: var(--wfm-white); }
.wfm-badge--solid.wfm-badge--danger { background: var(--wfm-danger); color: var(--wfm-white); }

/* Cards */
.wfm-card { background: var(--wfm-surface); border: var(--wfm-border-width) solid var(--wfm-border); border-radius: var(--wfm-radius-xl); box-shadow: var(--wfm-shadow); margin-bottom: var(--wfm-space-4); }
.wfm-card__header { display: flex; align-items: center; gap: var(--wfm-space-3); padding: var(--wfm-space-card); border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-card__title { margin: 0; font-size: var(--wfm-h5); font-weight: var(--wfm-font-weight-semibold); }
.wfm-card__subtitle { margin: 0.125rem 0 0; color: var(--wfm-text-muted); font-size: var(--wfm-font-size-sm); }
.wfm-card__actions { margin-left: auto; display: flex; gap: var(--wfm-space-2); }
.wfm-card__body { padding: var(--wfm-space-card); }
.wfm-card--muted .wfm-card__body { background: var(--wfm-surface-muted); border-radius: 0 0 var(--wfm-radius-xl) var(--wfm-radius-xl); }
.wfm-card--flush .wfm-card__body { padding: 0; }

/* Alerts */
.wfm-alert { display: flex; gap: var(--wfm-space-2); padding: var(--wfm-space-3); border-radius: var(--wfm-radius-lg); margin-bottom: var(--wfm-space-3); }
.wfm-alert i { font-size: 1.25rem; line-height: 1; }
.wfm-alert__title { display: block; font-weight: var(--wfm-font-weight-semibold); }
.wfm-alert__close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem; }
.wfm-alert--success { background: var(--wfm-success-label); color: #3f8a0e; }
.wfm-alert--info { background: var(--wfm-info-label); color: #0b7fa8; }
.wfm-alert--warning { background: var(--wfm-warning-label); color: #9a6a0b; }
.wfm-alert--danger { background: var(--wfm-danger-label); color: var(--wfm-danger-text); }
.wfm-alert--primary { background: var(--wfm-primary-label); color: var(--wfm-primary-text); }

/* Forms */
.wfm-field { display: flex; flex-direction: column; gap: var(--wfm-space-1); margin-bottom: var(--wfm-space-3); }
.wfm-label { font-size: var(--wfm-font-size-sm); font-weight: var(--wfm-font-weight-medium); color: var(--wfm-text-heading); }
.wfm-input, .wfm-select, .wfm-textarea { width: 100%; padding: 0.5rem 0.875rem; background: var(--wfm-surface); color: var(--wfm-text-heading); border: var(--wfm-border-width) solid var(--wfm-border); border-radius: var(--wfm-radius-lg); font: inherit; transition: border-color var(--wfm-transition-fast) var(--wfm-ease), box-shadow var(--wfm-transition-fast) var(--wfm-ease); }
.wfm-input:focus, .wfm-select:focus, .wfm-textarea:focus { outline: none; border-color: var(--wfm-primary); box-shadow: 0 0 0 0.15rem rgba(var(--wfm-primary-rgb), 0.12); }
.wfm-input--invalid { border-color: var(--wfm-danger); }
.wfm-input-wrap { position: relative; } .wfm-input-wrap > i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--wfm-text-muted); } .wfm-input-wrap > .wfm-input { padding-left: 2.25rem; }
.wfm-select { appearance: none; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239295a1' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; }
.wfm-hint { font-size: var(--wfm-font-size-xs); color: var(--wfm-text-muted); } .wfm-hint--error { color: var(--wfm-danger-text); }
.wfm-input--lg, .wfm-select--lg { padding: 0.7rem 1rem; font-size: var(--wfm-font-size-lg); }
.wfm-select--lg { padding-inline: 1rem 2.25rem; }
.wfm-select--sm, .wfm-input--sm { padding: 0.3rem 0.625rem; font-size: var(--wfm-font-size-sm); }
.wfm-select--sm { padding-inline: 0.625rem 2.25rem; }

/* Tabs — underline */
.wfm-tabs { display: flex; gap: var(--wfm-space-3); border-bottom: var(--wfm-border-width) solid var(--wfm-border); margin-bottom: var(--wfm-space-3); }
.wfm-tab { display: inline-flex; align-items: center; gap: var(--wfm-space-2); padding: 0.6rem 0.25rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--wfm-text-body); font-weight: var(--wfm-font-weight-medium); }
.wfm-tab:hover { color: var(--wfm-primary-text); text-decoration: none; }
.wfm-tab--active { color: var(--wfm-primary-text); border-bottom-color: var(--wfm-primary); }

/* Tables + toolbar */
.wfm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wfm-space-2); padding: var(--wfm-space-card-sm) var(--wfm-space-card); border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-toolbar .wfm-field { margin: 0; }
.wfm-table-search { margin-left: auto; position: relative; display: inline-flex; align-items: center; }
.wfm-table-search i { position: absolute; left: 0.6rem; color: var(--wfm-text-muted); }
.wfm-table-search input { padding-left: 2rem; min-width: 220px; }
.wfm-table { width: 100%; border-collapse: collapse; font-size: var(--wfm-font-size-sm); }
.wfm-table th { text-align: left; padding: 0.75rem var(--wfm-space-card); color: var(--wfm-text-heading); font-weight: var(--wfm-font-weight-medium); font-size: var(--wfm-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; background: var(--wfm-surface-muted); border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-table td { padding: 0.75rem var(--wfm-space-card); border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); vertical-align: top; }
.wfm-table tbody tr:hover { background: var(--wfm-gray-25); }
.wfm-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.wfm-empty { padding: var(--wfm-space-5) var(--wfm-space-3); text-align: center; color: var(--wfm-text-muted); }
.wfm-pager { display: flex; justify-content: space-between; align-items: center; padding: var(--wfm-space-card-sm) var(--wfm-space-card); color: var(--wfm-text-muted); font-size: var(--wfm-font-size-sm); }
.wfm-pager nav { display: flex; gap: var(--wfm-space-1); }
.wfm-pager a, .wfm-pager span[aria-current] { padding: 0.25rem 0.6rem; border-radius: var(--wfm-radius); }
.wfm-pager span[aria-current] { background: var(--wfm-primary); color: var(--wfm-white); }

/* Issue detail helpers */
.wfm-grid { display: grid; gap: var(--wfm-space-4); grid-template-columns: 2fr 1fr; }
.wfm-stack > * + * { margin-top: var(--wfm-space-2); }
.wfm-kv { display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem var(--wfm-space-3); font-size: var(--wfm-font-size-sm); }
.wfm-kv dt { color: var(--wfm-text-muted); margin: 0; } .wfm-kv dd { margin: 0; color: var(--wfm-text-heading); word-break: break-word; }
.wfm-frames { list-style: none; margin: 0; padding: 0; font-family: var(--wfm-font-mono); font-size: var(--wfm-font-size-sm); }
.wfm-frames li { padding: 0.35rem 0.5rem; border-left: 3px solid transparent; color: var(--wfm-text-muted); }
.wfm-frames li.in-app { border-left-color: var(--wfm-primary); color: var(--wfm-text-heading); background: var(--wfm-primary-label); }
.wfm-spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.wfm-spark span { flex: 1; background: var(--wfm-primary); opacity: 0.8; border-radius: 2px 2px 0 0; min-height: 2px; }
.wfm-login { max-width: 400px; margin: 10vh auto; }
.wfm-login .wfm-card__body { padding: var(--wfm-space-4); }
@media (max-width: 768px) { .wfm-grid { grid-template-columns: 1fr; } .wfm-table-search { margin-left: 0; width: 100%; } .wfm-table-search input { width: 100%; } .wfm-navbar { padding: 0 var(--wfm-space-3); } }

/* ===== Design-pass additions to nexus.css (each block = one README deviation) ===== */

/* D1 Dark mode: text-on-tint shades. The baseline hard-codes light-theme inks (#3f8a0e, #9a6a0b, #0b7fa8)
   which sit at ~2.5:1 on the dark translucent tints; in dark the bright base hues read instead. */
[data-bs-theme="dark"] .wfm-badge--success, [data-bs-theme="dark"] .wfm-alert--success, [data-bs-theme="dark"] .wfm-btn--label.wfm-btn--success, [data-bs-theme="dark"] .wfm-btn--outline.wfm-btn--success { color: var(--wfm-success); }
[data-bs-theme="dark"] .wfm-badge--warning, [data-bs-theme="dark"] .wfm-alert--warning, [data-bs-theme="dark"] .wfm-btn--label.wfm-btn--warning, [data-bs-theme="dark"] .wfm-btn--outline.wfm-btn--warning { color: var(--wfm-warning); }
[data-bs-theme="dark"] .wfm-badge--info, [data-bs-theme="dark"] .wfm-alert--info, [data-bs-theme="dark"] .wfm-btn--label.wfm-btn--info, [data-bs-theme="dark"] .wfm-btn--outline.wfm-btn--info { color: var(--wfm-info); }
[data-bs-theme="dark"] .wfm-badge--secondary, [data-bs-theme="dark"] .wfm-btn--label.wfm-btn--secondary, [data-bs-theme="dark"] .wfm-btn--outline.wfm-btn--secondary { color: var(--wfm-text-heading); }
[data-bs-theme="dark"] { color-scheme: dark; }

/* D2 Navbar: icon-only theme toggle + user chip, so the bar fits a phone */
.wfm-navbar__icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--wfm-radius-lg); background: transparent; color: var(--wfm-text-body); font-size: 1.15rem; cursor: pointer; }
.wfm-navbar__icon-btn:hover { background: var(--wfm-gray-50); }
.wfm-navbar__icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 0.15rem rgba(var(--wfm-primary-rgb), 0.25); }
.wfm-navbar__user { display: inline-flex; align-items: center; gap: var(--wfm-space-2); color: var(--wfm-text-heading); font-size: var(--wfm-font-size-sm); font-weight: var(--wfm-font-weight-medium); }
.wfm-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wfm-primary-label); color: var(--wfm-primary-text); font-size: var(--wfm-font-size-xs); font-weight: var(--wfm-font-weight-semibold); }

/* D3 Page header: title + subtitle + right-aligned actions (Client - Redesigned hero anatomy, flattened) */
.wfm-page-header { flex-wrap: wrap; }
.wfm-page-header__sub { margin: 0.25rem 0 0; color: var(--wfm-text-muted); font-size: var(--wfm-font-size-sm); }
.wfm-page-header__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--wfm-space-2); }

/* D4 Tabs: count pill + button-element tabs; tabs inside a card header sit flush on its border */
.wfm-tab { background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; cursor: pointer; }
.wfm-tab__count { padding: 0.05rem 0.5rem; border-radius: var(--wfm-radius-pill); background: var(--wfm-secondary-label); color: var(--wfm-text-body); font-size: var(--wfm-font-size-xs); font-variant-numeric: tabular-nums; }
.wfm-tab--active .wfm-tab__count { background: var(--wfm-primary-label); color: var(--wfm-primary-text); }
.wfm-card > .wfm-tabs { margin: 0; padding: 0 var(--wfm-space-card); border-bottom-color: var(--wfm-border-light); }

/* D5 Toolbar: a title slot on the left, compact selects, search pushed right (toolbar rule) */
.wfm-toolbar__title { margin: 0 var(--wfm-space-2) 0 0; font-size: var(--wfm-h6); font-weight: var(--wfm-font-weight-semibold); color: var(--wfm-text-heading); }
.wfm-toolbar .wfm-select { width: auto; min-width: 8rem; }
.wfm-table-search .wfm-input { padding-left: 2rem; }

/* D6 Tables: horizontal scroll wrapper, clickable rows, issue cell (title + culprit), muted ignored rows */
.wfm-table-wrap { position: relative; overflow-x: auto; }
.wfm-table td { vertical-align: middle; }
.wfm-table--clickable tbody tr[data-href] { cursor: pointer; }
.wfm-table tbody tr:focus-visible { outline: 2px solid var(--wfm-primary); outline-offset: -2px; }
.wfm-table tr.is-selected { background: var(--wfm-primary-label); }
.wfm-issue { display: flex; gap: var(--wfm-space-2); align-items: flex-start; min-width: 18rem; }
.wfm-issue__icon { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--wfm-radius); background: var(--wfm-surface-muted); border: var(--wfm-border-width) solid var(--wfm-border-light); color: var(--wfm-text-body); }
.wfm-issue__title { display: block; color: var(--wfm-text-heading); font-weight: var(--wfm-font-weight-medium); font-size: var(--wfm-font-size-base); line-height: 1.3; word-break: break-word; }
.wfm-issue__culprit { display: block; margin-top: 0.15rem; color: var(--wfm-text-muted); font-family: var(--wfm-font-mono); font-size: var(--wfm-font-size-xs); overflow-wrap: anywhere; }
.wfm-issue__meta { display: flex; flex-wrap: wrap; gap: var(--wfm-space-1); margin-top: 0.4rem; }
.wfm-table tr.is-muted .wfm-issue__title { color: var(--wfm-text-body); }
.wfm-muted { color: var(--wfm-text-muted); }
.wfm-nowrap { white-space: nowrap; }
.wfm-count { font-weight: var(--wfm-font-weight-semibold); color: var(--wfm-text-heading); }

/* D7 Level badge: one fixed mapping fatal=solid danger, error=danger, warning=warning */
.wfm-level { text-transform: lowercase; }

/* D8 Empty state with icon + one-line consequence */
.wfm-empty i { display: block; margin: 0 auto var(--wfm-space-2); font-size: 2rem; color: var(--wfm-text-muted); }
.wfm-empty__title { display: block; color: var(--wfm-text-heading); font-weight: var(--wfm-font-weight-medium); margin-bottom: 0.25rem; }

/* D9 Issue detail: stat strip, event picker, frames with vendor collapse, tag chips */
.wfm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--wfm-space-4); }
.wfm-stat { padding: var(--wfm-space-card-sm) var(--wfm-space-card); border-left: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-stat:first-child { border-left: 0; }
.wfm-stat__label { display: block; color: var(--wfm-text-muted); font-size: var(--wfm-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.wfm-stat__value { display: block; margin-top: 0.2rem; color: var(--wfm-text-heading); font-size: var(--wfm-font-size-lg); font-weight: var(--wfm-font-weight-semibold); font-variant-numeric: tabular-nums; }
.wfm-event-picker { display: flex; align-items: center; gap: var(--wfm-space-2); flex-wrap: wrap; }
.wfm-event-picker .wfm-select { width: auto; flex: 1; min-width: 12rem; }
.wfm-frames li { display: flex; gap: var(--wfm-space-3); justify-content: space-between; border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-frames li:last-child { border-bottom: 0; }
.wfm-frames__fn { color: inherit; word-break: break-all; }
.wfm-frames__loc { flex: none; color: var(--wfm-text-muted); }
.wfm-frames li.in-app .wfm-frames__fn { font-weight: var(--wfm-font-weight-semibold); }
.wfm-frames__toggle { display: flex; width: 100%; padding: 0.35rem 0.5rem; border: 0; border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); background: var(--wfm-surface-muted); color: var(--wfm-text-muted); font: inherit; font-family: var(--wfm-font-sans); font-size: var(--wfm-font-size-xs); cursor: pointer; text-align: left; gap: var(--wfm-space-1); align-items: center; }
.wfm-frames__toggle:hover { color: var(--wfm-primary-text); }
.wfm-exception { margin-bottom: var(--wfm-space-3); }
.wfm-exception__class { color: var(--wfm-danger-text); font-family: var(--wfm-font-mono); font-weight: var(--wfm-font-weight-semibold); }
.wfm-exception__msg { margin-top: 0.2rem; color: var(--wfm-text-heading); word-break: break-word; }
.wfm-tags { display: flex; flex-wrap: wrap; gap: var(--wfm-space-1); }
.wfm-tag { display: inline-flex; border: var(--wfm-border-width) solid var(--wfm-border); border-radius: var(--wfm-radius); font-size: var(--wfm-font-size-xs); overflow: hidden; }
.wfm-tag b { padding: 0.15rem 0.45rem; background: var(--wfm-surface-muted); color: var(--wfm-text-muted); font-weight: var(--wfm-font-weight-medium); }
.wfm-tag span { padding: 0.15rem 0.45rem; color: var(--wfm-text-heading); font-family: var(--wfm-font-mono); }
.wfm-spark span { opacity: 1; background: color-mix(in srgb, var(--wfm-primary) 75%, var(--wfm-surface)); }
.wfm-spark span.is-zero { background: var(--wfm-border); }
.wfm-spark__axis { display: flex; justify-content: space-between; margin-top: 0.35rem; color: var(--wfm-text-muted); font-size: var(--wfm-font-size-xs); }
.wfm-kv { margin: 0; }
.wfm-grid > * { min-width: 0; } /* long frames / JSON must scroll inside the card, not widen the page */
.wfm-back { display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: var(--wfm-space-2); color: var(--wfm-text-muted); font-size: var(--wfm-font-size-sm); }

/* D10 Secret (token shown once): mono box + copy button */
.wfm-secret { display: flex; gap: var(--wfm-space-2); align-items: center; margin-top: var(--wfm-space-2); }
.wfm-secret code { flex: 1; padding: 0.5rem 0.75rem; background: var(--wfm-surface); border: var(--wfm-border-width) dashed var(--wfm-border); border-radius: var(--wfm-radius-lg); color: var(--wfm-text-heading); word-break: break-all; }

/* D11 Modal + toast (Projects create / rotate / edit, issue actions) */
.wfm-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-start; justify-content: center; padding: 10vh var(--wfm-space-3) var(--wfm-space-3); background: rgba(var(--wfm-black-rgb), 0.45); overflow-y: auto; }
.wfm-modal.is-open { display: flex; }
.wfm-modal__dialog { width: 100%; max-width: 520px; background: var(--wfm-surface); border-radius: var(--wfm-radius-xl); box-shadow: var(--wfm-shadow-xl); }
.wfm-modal__footer { display: flex; justify-content: flex-end; gap: var(--wfm-space-2); padding: var(--wfm-space-card-sm) var(--wfm-space-card); border-top: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-toast { position: fixed; right: var(--wfm-space-3); bottom: var(--wfm-space-3); z-index: 60; display: flex; gap: var(--wfm-space-2); align-items: center; padding: 0.7rem 1rem; border-radius: var(--wfm-radius-lg); background: var(--wfm-dark); color: var(--wfm-white); box-shadow: var(--wfm-shadow-lg); font-size: var(--wfm-font-size-sm); opacity: 0; transform: translateY(0.5rem); transition: opacity var(--wfm-transition) var(--wfm-ease), transform var(--wfm-transition) var(--wfm-ease); pointer-events: none; }
.wfm-toast.is-on { opacity: 1; transform: none; }
.wfm-checkbox { display: inline-flex; align-items: center; gap: var(--wfm-space-2); font-size: var(--wfm-font-size-sm); }
.wfm-checkbox input { accent-color: var(--wfm-primary); }

/* D12 Login: brand mark above the card */
.wfm-login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--wfm-space-2); margin-bottom: var(--wfm-space-4); text-align: center; }
.wfm-login__mark { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--wfm-radius-xl); background: var(--wfm-primary); color: var(--wfm-white); font-size: 1.6rem; box-shadow: var(--wfm-shadow-sm); }
.wfm-login__foot { margin-top: var(--wfm-space-3); text-align: center; color: var(--wfm-text-muted); font-size: var(--wfm-font-size-xs); }
.wfm-login__theme { position: fixed; top: var(--wfm-space-3); right: var(--wfm-space-3); }

/* D13 Phone: hide secondary columns, stack the stat strip, keep the navbar on one line */
@media (max-width: 768px) {
  .wfm-hide-sm { display: none; }
  .wfm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wfm-stat:nth-child(3) { border-left: 0; }
  .wfm-stat:nth-child(n+3) { border-top: var(--wfm-border-width) solid var(--wfm-border-light); }
  .wfm-navbar { gap: var(--wfm-space-2); }
  .wfm-navbar__user, .wfm-navbar__brand span { display: none; }
  .wfm-navbar__link { padding-inline: var(--wfm-space-2); }
  .wfm-content { padding-inline: var(--wfm-space-3); }
  .wfm-tabs { overflow-x: auto; overflow-y: hidden; gap: var(--wfm-space-2); scrollbar-width: none; }
  .wfm-tab { white-space: nowrap; }
  .wfm-tab > i { display: none; }
  .wfm-toolbar .wfm-select { flex: 1 1 calc(50% - var(--wfm-space-2)); min-width: 0; }
  .wfm-issue { min-width: 0; }
  .wfm-table th, .wfm-table td { padding-inline: var(--wfm-space-3); }
  .wfm-page-header__actions { margin-left: 0; }
}
@media (min-width: 769px) { .wfm-show-sm { display: none; } }

/* D14 Utility: visually hidden labels for the toolbar selects / search */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Display:flex/grid rules above would otherwise beat the [hidden] attribute (vendor frames, detail panes). */
[hidden] { display: none !important; }

/* Export page (Claude Design "Nexus Export"): filter grid, date row + quick ranges, download bar */
.wfm-export-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--wfm-space-3); }
.wfm-export-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; padding-top: 0.25rem; margin-top: 0.25rem; border-top: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-export-dates .wfm-field { margin: 0.75rem 0 0; }
.wfm-export-dates .wfm-input { width: 11rem; }
.wfm-export-ranges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wfm-export-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 1rem 1.25rem; border-top: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-export-bar > p { margin: 0; font-size: var(--wfm-font-size-sm); flex: 1 1 22rem; }
.wfm-export-bar--stack { flex-direction: column; align-items: stretch; }
.wfm-export-bar--stack > .wfm-alert { margin: 0; }
.wfm-export-bar--stack > .wfm-btn { align-self: flex-end; }
.wfm-export-item { padding: 0.75rem 1rem; border-bottom: var(--wfm-border-width) solid var(--wfm-border-light); }
.wfm-export-item:last-child { border-bottom: 0; }
.wfm-export-item .wfm-issue__meta { margin-top: 0.35rem; }
.wfm-export-empty-actions { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }
@media (max-width: 768px) {
  .wfm-export-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wfm-export-grid > .is-wide { grid-column: 1 / -1; }
  .wfm-export-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 0.75rem; border-top: 0; padding-top: 0; margin-top: 0; }
  .wfm-export-dates .wfm-field { min-width: 0; }
  .wfm-export-dates .wfm-input { width: 100%; min-width: 0; }
  .wfm-export-ranges { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0.75rem; }
  .wfm-export-ranges .wfm-btn, .wfm-export-bar .wfm-btn { justify-content: center; min-height: 44px; }
  .wfm-export-bar > .wfm-btn { width: 100%; }
}