@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* console.simild.com — component styles. Work Sans only. Every value is a token from tokens.json. Prefix: sc- */
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 23.1px; -webkit-font-smoothing: antialiased; }
.sc-icon { flex: none; display: inline-block; vertical-align: middle; }
.sc-dim { opacity: .35; }
.sc-muted { color: var(--text-muted); margin: 0; }
.sc-faint { color: var(--text-muted); margin: 0; }
.sc-small { font-size: 12px; line-height: 16px; }
.sc-mono { font-family: var(--font-mono); font-size: 12px; }
.sc-num { font-variant-numeric: tabular-nums; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-btn-primary:focus-visible { outline-color: var(--focus); }

/* Card */
.sc-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sc-card-title { font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--text-title); margin: 0; }
.is-link { cursor: pointer; }

/* Button */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 15px/24px var(--font-sans); letter-spacing: .15px; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.sc-btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); font: 500 14px/16px var(--font-sans); letter-spacing: 0; gap: 6px; border-radius: var(--radius-sm); }
.sc-btn-icon { width: var(--control-height); padding: 0; }
.sc-btn-sm.sc-btn-icon { width: var(--control-height-sm); }
.sc-btn-primary { background: var(--accent); color: var(--on-accent); }
.sc-btn-primary:hover { background: var(--accent-hover); }
.sc-btn-secondary { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
.sc-btn-secondary:hover { background: var(--surface-hover); }
.sc-btn-ghost { background: transparent; color: var(--text); }
.sc-btn-ghost:hover { background: var(--surface-hover); }
.sc-btn-danger { background: var(--danger); color: var(--on-danger); }
.sc-btn-danger:hover { filter: brightness(.92); }
.sc-btn:disabled { background: var(--surface-sunken); color: var(--text-faint); border-color: var(--line); cursor: not-allowed; filter: none; }

/* Fields */
.sc-field { display: grid; gap: 6px; min-width: 0; }
.sc-field-label { font-size: 13px; line-height: 20.8px; font-weight: 500; color: var(--text); }
.sc-req { color: var(--danger); }
.sc-input { box-sizing: border-box; width: 100%; height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); font: 400 14px/20px var(--font-sans); }
.sc-input::placeholder { color: var(--text-faint); }
.sc-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.sc-textarea { height: auto; padding: var(--space-2) var(--space-3); resize: vertical; }
.sc-input-wrap { position: relative; } .sc-input-wrap > .sc-icon { position: absolute; left: 10px; top: 10px; color: var(--text-muted); }
.sc-input.has-icon { padding-left: 34px; }
.sc-select-wrap { position: relative; } .sc-select-wrap > .sc-icon { position: absolute; right: 10px; top: 10px; color: var(--text-muted); pointer-events: none; }
.sc-select { appearance: none; padding-right: 34px; }
.sc-field-hint { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-field-error { font-size: 12px; line-height: 16px; color: var(--danger); display: flex; gap: var(--space-1); align-items: center; }
.sc-field.is-error .sc-input { border-color: var(--danger); }

/* Badge */
.sc-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: 10px; line-height: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.sc-tone-success { background: var(--success-soft); color: var(--success); }
.sc-tone-warning { background: var(--warning-soft); color: var(--warning); }
.sc-tone-danger { background: var(--danger-soft); color: var(--danger); }
.sc-tone-info { background: var(--info-soft); color: var(--info); }
.sc-tone-accent { background: var(--accent-soft); color: var(--accent-text); }
.sc-tone-inbuild { background: var(--in-build); color: var(--text); }
.sc-tone-neutral { background: var(--neutral-soft); color: var(--text-muted); }
.sc-tone-text-success { color: var(--success); } .sc-tone-text-danger { color: var(--danger); } .sc-tone-text-warning { color: var(--warning); } .sc-tone-text-neutral { color: var(--text-muted); }
.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--text); font-size: 11px; line-height: 16.5px; }
.sc-chip b { color: var(--text); font-weight: 500; }

/* Avatar */
.sc-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; overflow: hidden; flex: none; }
.sc-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Freshness */
.sc-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-fresh-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--success); }
.sc-fresh.is-stale .sc-fresh-dot { background: var(--warning); } .sc-fresh.is-stale { color: var(--warning); }
.sc-fresh.is-error .sc-fresh-dot { background: var(--danger); } .sc-fresh.is-error { color: var(--danger); }
.sc-fresh-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; }
.sc-fresh-btn:hover { background: var(--surface-hover); }

/* Tabs */
.sc-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.sc-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); border: 0; background: none; color: var(--text-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.sc-tab:hover { color: var(--text); }
.sc-tab.is-on { color: var(--accent-text); }
.sc-tab.is-on::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.sc-tab-count { padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-muted); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }

/* Stat tile + meter */
.sc-stat { display: grid; gap: var(--space-2); padding: var(--space-5); align-content: start; }
.sc-stat-label { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.sc-stat-value { font-family: var(--font-sans); font-weight: 500; font-size: 24px; line-height: 31.2px; letter-spacing: -.5px; color: var(--text-title); font-variant-numeric: tabular-nums lining-nums; }
.sc-stat-unit { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.sc-stat-delta { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 500; }
.sc-stat-foot { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-1); }
.sc-meter-wrap { display: grid; gap: 6px; }
.sc-meter-head { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-meter { height: 6px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.sc-meter-fill { height: 100%; border-radius: inherit; }
.sc-fill-accent { background: var(--accent); } .sc-fill-warning { background: var(--warning); } .sc-fill-danger { background: var(--danger); } .sc-fill-success { background: var(--success); }

/* Table */
.sc-table-card { overflow: hidden; }
.sc-table-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.sc-table-tools { display: flex; gap: var(--space-2); align-items: center; }
.sc-table-scroll { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 23.1px; }
.sc-table th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text); font-size: 13px; line-height: 20.8px; font-weight: 500; padding: 10px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sc-table th:first-child, .sc-table td:first-child { padding-left: var(--space-5); }
.sc-table th:last-child, .sc-table td:last-child { padding-right: var(--space-5); }
.sc-table td { height: var(--row-height); box-sizing: border-box; padding: 0 var(--space-3); border-bottom: 1px solid var(--line); color: var(--text); }
.sc-table.is-dense td { height: 36px; }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr.is-link { cursor: pointer; }
.sc-table tbody tr:hover td { background: var(--surface-hover); }
.sc-table tbody tr.is-selected td { background: var(--accent-soft); }
.sc-th-btn { display: inline-flex; text-align: inherit; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sc-table-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }

/* Chart */
.sc-chart { margin: 0; display: grid; gap: var(--space-2); position: relative; }
.sc-chart-toggle { justify-self: end; border: 0; background: none; padding: 2px 6px; border-radius: var(--radius-xs); color: var(--text-muted); font: 500 12.5px/20px var(--font-sans); cursor: pointer; }
.sc-chart-toggle:hover { background: var(--surface-hover); color: var(--text); }
.sc-chart .is-link { cursor: pointer; }
.sc-chart rect.is-link:hover { opacity: .8; }
.sc-chart-hit { opacity: 0; }
.sc-chart-hit:hover { opacity: 1; }
.sc-chart svg { display: block; height: auto; overflow: visible; }
.sc-chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.sc-chart-tick { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.sc-chart-s1 { fill: var(--chart-1); background: var(--chart-1); } .sc-chart-s2 { fill: var(--chart-2); background: var(--chart-2); } .sc-chart-s3 { fill: var(--chart-3); background: var(--chart-3); } .sc-chart-s4 { fill: var(--chart-4); background: var(--chart-4); }
.sc-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-chart-st1 { stroke: var(--chart-1); } .sc-chart-st2 { stroke: var(--chart-2); } .sc-chart-st3 { stroke: var(--chart-3); } .sc-chart-st4 { stroke: var(--chart-4); }
.sc-legend { display: flex; gap: var(--space-4); font-size: 12px; color: var(--text-muted); }
.sc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sc-legend-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sc-legend-key.is-line { height: 2px; width: 14px; }

/* Timeline */
.sc-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.sc-phase { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); padding-bottom: var(--space-4); }
.sc-phase:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--line); border-radius: 1px; }
.sc-phase.is-done:not(:last-child)::before { background: var(--success); opacity: .5; }
.sc-phase-node { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); }
.sc-phase.is-running .sc-phase-node, .sc-phase.is-waiting .sc-phase-node { box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 4px currentColor; }
.sc-phase-row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; padding-top: 2px; }
.sc-phase-name { font-weight: 600; color: var(--text); }
.sc-phase.is-queued .sc-phase-name { color: var(--text-muted); font-weight: 500; }
.sc-phase-meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-phase-stop { margin-top: var(--space-2); }

/* Sign-off */

/* Dialog */
.sc-overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: var(--space-4); z-index: 50; }
.sc-overlay.is-inline { position: relative; inset: auto; min-height: 100%; }
.sc-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); display: grid; }
.sc-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-5) 0; }
.sc-dialog-title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--text-title); }
.sc-dialog-body { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); overflow-y: auto; align-content: start; }
.sc-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }

/* Empty */
.sc-empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-12) var(--space-6); }
.sc-empty-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); }
.sc-empty-title { font-weight: 600; color: var(--text-title); }
.sc-empty p { max-width: 40ch; }

/* Checkbox */
.sc-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: 14px; line-height: 20px; color: var(--text); position: relative; }
.sc-check.is-disabled { cursor: default; color: var(--text-muted); }
.sc-check-input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 1px 0 0; }
.sc-check-box { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: transparent; flex: none; }
.sc-check-input:checked + .sc-check-box, .sc-check-input:indeterminate + .sc-check-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sc-check-input:focus-visible + .sc-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-check-input:disabled + .sc-check-box { opacity: .6; }
.sc-check-text { display: grid; }
.sc-check-hint { font-size: 12px; line-height: 16px; color: var(--text-muted); }

/* PermissionMatrix */
.sc-perm { overflow: hidden; }
/* PermissionMatrix: one row per area: name, level, what it allows */
.sc-perm-row { display: grid; grid-template-columns: 220px 280px 1fr; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-5); min-height: 48px; border-bottom: 1px solid var(--line); }
.sc-perm-row:last-of-type { border-bottom: 0; }
.sc-perm-row.is-head { min-height: 36px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-sunken, var(--surface)); }
.sc-perm-row.is-later { opacity: .6; }
.sc-perm-area { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--text); white-space: nowrap; }
.sc-perm-desc { font-size: 13px; line-height: 18px; color: var(--text-muted); min-width: 0; }
@media (max-width: 767px) { .sc-perm-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) var(--space-4); } .sc-perm-row.is-head { display: none; } }

/* Shell */
.sc-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; background: var(--surface); transition: grid-template-columns .16s ease; }
.sc-shell.is-collapsed { grid-template-columns: var(--sidebar-width-collapsed) 1fr; }
@media (prefers-reduced-motion: reduce) { .sc-shell { transition: none; } }
.sc-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; background: var(--chrome); border-right: 1px solid var(--chrome-line); color: var(--chrome-text); padding: var(--space-3); overflow-y: auto; }
.sc-simimark { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2); }
.sc-simimark-tile { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-purple), var(--brand-indigo)); color: #FFFFFF; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1; flex: none; }
.sc-simimark-logo { height: 32px; width: auto; flex: none; }
.sc-simimark-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-simimark-name { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 20px; color: var(--chrome-text); }
.sc-simimark-sub { font-size: 12px; line-height: 16px; color: var(--chrome-muted); }
.sc-nav { display: grid; gap: var(--space-4); margin-top: var(--space-3); flex: 1; align-content: start; }
.sc-nav-group { display: grid; gap: 2px; }
.sc-nav-heading { font-size: 11px; line-height: 17.6px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--chrome-muted); padding: 0 var(--space-2) var(--space-1); }
.sc-nav-item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 6px var(--space-2); border-radius: var(--radius-sm); color: var(--chrome-text); text-decoration: none; font-size: 13.5px; line-height: 21.6px; }
.sc-nav-item .sc-icon { color: var(--chrome-muted); }
.sc-nav-item:hover { background: var(--chrome-raised); }
.sc-nav-item.is-on { background: var(--chrome-active); color: var(--on-chrome-active); font-weight: 500; }
.sc-nav-item.is-on .sc-icon { color: var(--on-chrome-active); }
.sc-nav-label { flex: 1; min-width: 0; }
.sc-nav-count { min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--brand-purple-tint); color: var(--brand-navy); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.sc-main { min-width: 0; display: flex; flex-direction: column; }
.sc-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); height: var(--topbar-height); box-sizing: border-box; padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); }
.sc-search { position: relative; display: flex; align-items: center; gap: var(--space-2); width: min(420px, 100%); height: 34px; padding: 0 var(--space-3); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-muted); }
.sc-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 400 14px/20px var(--font-sans); }
.sc-search-input::placeholder { color: var(--text-faint); }
.sc-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.sc-search kbd { font: 500 11px/16px var(--font-mono); padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-muted); }
.sc-topbar-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.sc-content { width: 100%; max-width: var(--content-max); box-sizing: border-box; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); display: grid; gap: var(--space-6); align-content: start; }
.sc-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.sc-pagehead-main { display: grid; gap: var(--space-1); }
.sc-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.sc-crumbs span { display: inline-flex; align-items: center; gap: 4px; }
.sc-pagehead-titlerow { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.sc-pagehead-title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 28px; line-height: 33.6px; letter-spacing: -1px; color: var(--text-title); }
.sc-pagehead-actions { display: flex; gap: var(--space-2); }
/* Menus: ScopeSwitcher, UserMenu */
.sc-menu-wrap { position: relative; }
.sc-scope { display: flex; align-items: center; gap: var(--space-2); height: 40px; max-width: 280px; padding: 0 var(--space-2) 0 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sc-scope:hover { background: var(--surface-hover); }
.sc-scope > .sc-icon { color: var(--text-muted); flex: none; }
.sc-scope-tile, .sc-menu-tile { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--neutral-soft); color: var(--text); font-size: 11px; font-weight: 600; flex: none; }
.sc-scope-tile.is-all { background: var(--accent-soft); color: var(--accent-text); }
.sc-scope-text { display: grid; min-width: 0; }
.sc-scope-label { font-size: 11px; line-height: 14px; color: var(--text-muted); }
.sc-scope-name { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 260px; max-height: 420px; overflow-y: auto; padding: var(--space-1); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.sc-menu-right { left: auto; right: 0; }
.sc-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: 400 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.sc-menu-item:hover { background: var(--surface-hover); }
.sc-menu-item.is-on { font-weight: 600; }
.sc-menu-item > .sc-icon { color: var(--text-muted); }
.sc-menu-hint { margin-left: 2px; font-size: 11px; color: var(--text-muted); }
.sc-menu-check { margin-left: auto; color: var(--accent-text) !important; }
.sc-menu-heading { padding: var(--space-2) var(--space-2) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sc-menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--line); }
.sc-menu-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.sc-menu-person-name { font-weight: 600; color: var(--text-title); }
.sc-menu-person-role { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-2); font-size: 14px; }
.sc-seg { display: inline-flex; padding: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.sc-seg-btn { height: 26px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.sc-seg-btn:hover { color: var(--text); }
.sc-seg-btn.is-on { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-card); }
.sc-usermenu { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; }
.sc-usermenu:hover { background: var(--surface-hover); }
.sc-crumbs span { white-space: nowrap; }
.sc-crumbs a { color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding: 0 2px; }
.sc-crumbs a:hover { color: var(--text); background: var(--surface-hover); }
.sc-num, .sc-badge, .sc-stat-unit { white-space: nowrap; }

/* Sidebar toggle */
.sc-sidebar-toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 34px; margin-top: var(--space-2); padding: 6px var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--chrome-muted); font: 500 13px/18px var(--font-sans); text-align: left; cursor: pointer; }
.sc-sidebar-toggle:hover { background: var(--chrome-raised); color: var(--chrome-text); }

/* Collapsed rail: icons only, same in both themes */
.sc-sidebar.is-collapsed { padding-left: var(--space-2); padding-right: var(--space-2); }
.sc-sidebar.is-collapsed .sc-simimark { justify-content: center; padding-left: 0; padding-right: 0; }
.sc-sidebar.is-collapsed .sc-simimark-text, .sc-sidebar.is-collapsed .sc-nav-label, .sc-sidebar.is-collapsed .sc-nav-heading { display: none; }
.sc-sidebar.is-collapsed .sc-nav-group + .sc-nav-group { border-top: 1px solid var(--chrome-line); padding-top: var(--space-3); }
.sc-sidebar.is-collapsed .sc-nav { gap: var(--space-3); }
.sc-sidebar.is-collapsed .sc-nav-item, .sc-sidebar.is-collapsed .sc-sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
.sc-sidebar.is-collapsed .sc-sidebar.is-collapsed .sc-nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; line-height: 16px; padding: 0 4px; }
/* Below 1024px the sidebar is always the rail */
@media (max-width: 1023px) {
  .sc-shell, .sc-shell.is-collapsed { grid-template-columns: var(--sidebar-width-collapsed) 1fr; }
  .sc-sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
  .sc-simimark-text, .sc-nav-label, .sc-nav-heading, .sc-sidebar-toggle { display: none; }
  .sc-simimark { justify-content: center; padding-left: 0; padding-right: 0; }
  .sc-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .sc-nav-group + .sc-nav-group { border-top: 1px solid var(--chrome-line); padding-top: var(--space-3); }
  .sc-nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; line-height: 16px; padding: 0 4px; }
}

/* Fit: badges, tags and short values never leave their card and never break over two lines.
   A row that holds a title and a badge wraps the badge below the title when space runs out. */
.sc-badge, .sc-chip, .sc-tag { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-card, .sc-card > *, .sc-stat, .sc-approval, .sc-dialog-body { min-width: 0; }
.sc-card { overflow-wrap: break-word; }
.sc-row-between { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.sc-row-between > :first-child { flex: 1 1 200px; min-width: 0; }

/* Collapse toggle lives inside the sidebar, beside the logo (below it in the rail). */
.sc-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.sc-sidebar-head .sc-rail-toggle { flex: none; color: var(--chrome-muted); }

.sc-nowrap { white-space: nowrap; }
.sc-text-success { color: var(--success); } .sc-text-warning { color: var(--warning); } .sc-text-danger { color: var(--danger); } .sc-text-info { color: var(--info); } .sc-text-neutral, .sc-text-inbuild { color: var(--text-muted); }

/* ApprovalCard: one compact row; details on demand. Stack them with an 8px gap. */
.sc-so { padding: 0; }
.sc-so-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 56px; flex-wrap: wrap; }
.sc-so-open { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-muted); cursor: pointer; }
.sc-so-open:hover { background: var(--surface-hover); color: var(--text); }
.sc-so-main { flex: 1 1 260px; min-width: 0; }
.sc-so-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-so-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: 12px; line-height: 18px; color: var(--text-muted); }
.sc-so-meta > span + span::before { content: '·'; margin-right: var(--space-2); color: var(--text-muted); }
.sc-so-side { display: flex; align-items: center; gap: var(--space-3); flex: none; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.sc-so-wait { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warning); font-weight: 500; }
.sc-so-actions { display: flex; align-items: center; gap: var(--space-2); }
.sc-so-reason { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 24px + var(--space-3)); }
.sc-so-reason > :first-child { flex: 1 1 auto; min-width: 0; }
.sc-so-reason .sc-field { margin: 0; }
.sc-so-reason input, .sc-so-reason select { height: var(--control-height-sm); }
.sc-so-answer { padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 24px + var(--space-3)); }
.sc-so-details { margin: 0; display: grid; grid-template-columns: 80px 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 24px + var(--space-3)); border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; }
.sc-so-details > div { display: contents; }
.sc-so-details dt { color: var(--text-muted); font-size: 12px; }
.sc-so-details dd { margin: 0; min-width: 0; }
.sc-so-gates { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.sc-so-gate { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sc-so.is-answered .sc-so-title { color: var(--text); }

/* Alert: one compact line, a colored left edge, never a big block. */
.sc-alert { border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 13px; line-height: 18px; }
.sc-alert-row { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
.sc-alert-row > .sc-icon { flex: none; }
.sc-alert-danger { color: var(--danger); } .sc-alert-warning { color: var(--warning); } .sc-alert-info { color: var(--info); } .sc-alert-success { color: var(--success); }
.sc-alert-text { flex: 1 1 auto; min-width: 0; color: var(--text); }
.sc-alert-text b { font-weight: 600; }
.sc-alert-more { color: var(--text-muted); margin-left: var(--space-2); }
.sc-alert-action { flex: none; border: 0; background: none; padding: 4px 6px; border-radius: var(--radius-xs); font: inherit; font-weight: 600; color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.sc-alert-action:hover { background: var(--surface-hover); }
.sc-alert-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--text-muted); border-radius: var(--radius-xs); cursor: pointer; }


/* Collapsed rail: the toggle replaces the logo on hover or focus, so it takes no extra row. */
.sc-sidebar.is-collapsed .sc-sidebar-head { flex-direction: row; position: relative; justify-content: center; }
.sc-sidebar.is-collapsed .sc-sidebar-head .sc-rail-toggle { position: absolute; inset: 0; margin: auto; opacity: 0; }
.sc-sidebar.is-collapsed .sc-sidebar-head:hover .sc-rail-toggle, .sc-sidebar.is-collapsed .sc-sidebar-head .sc-rail-toggle:focus-visible { opacity: 1; background: var(--chrome-raised); }
.sc-sidebar.is-collapsed .sc-sidebar-head .sc-rail-toggle:not(:focus-visible) { outline: none; }
.sc-sidebar.is-collapsed .sc-sidebar-head:hover .sc-simimark, .sc-sidebar.is-collapsed .sc-sidebar-head:has(.sc-rail-toggle:focus-visible) .sc-simimark { opacity: 0; }

.sc-alert-action.is-quiet { color: var(--text-muted); font-weight: 500; }
.sc-alert-details { padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 16px + var(--space-2)); color: var(--text); font-size: 13px; line-height: 20px; }
.sc-alert-details dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); }
.sc-alert-details dt { color: var(--text-muted); }
.sc-alert-details dd { margin: 0; }

/* Table: filter button in each filterable header; one quiet line shows what is filtered. Cells stay on one line. */
.sc-th-inner { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.sc-th-inner.is-right { flex-direction: row-reverse; }
.sc-colfilter { display: inline-flex; }
.sc-colfilter-btn { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-muted); cursor: pointer; opacity: .55; }
th:hover .sc-colfilter-btn, .sc-colfilter-btn:focus-visible, .sc-colfilter-btn[aria-expanded="true"] { opacity: 1; background: var(--surface-hover); }
.sc-colfilter-btn.is-set { opacity: 1; background: var(--accent); color: var(--on-accent); }
.sc-colfilter-menu { min-width: 200px; max-width: 280px; z-index: 60; font-weight: 400; text-align: left; }
.sc-colfilter-text { display: flex; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); }
.sc-colfilter-text .sc-input { height: var(--control-height-sm); flex: 1; min-width: 0; }
.sc-filterline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.sc-filterchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--text); font-size: 12px; white-space: nowrap; }
.sc-filterchip b { font-weight: 600; }
.sc-filterchip button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); cursor: pointer; }
.sc-filterchip button:hover { background: var(--surface-raised); color: var(--text); }
.sc-filter-clear { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-text); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-xs); }
.sc-filter-clear:hover { background: var(--surface-hover); }
.sc-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.sc-table td.is-wrap { white-space: normal; }
.sc-table td > * { vertical-align: middle; }

/* Tabs never wrap their labels; many tabs scroll sideways. */
.sc-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab.is-on::after { bottom: 0; }
.sc-tab { white-space: nowrap; flex: none; }

/* ItemRow */
.sc-so.is-link { cursor: pointer; }
.sc-so.is-link:hover { border-color: var(--line-strong); }
.sc-so-icon { cursor: default; }
.sc-so-icon:hover { background: none; }
.sc-so-body { padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 24px + var(--space-3)); border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; }

/* Notifications */
.sc-bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); cursor: pointer; }
.sc-bell:hover, .sc-bell[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.sc-bell-count { position: absolute; top: -1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--danger); color: var(--on-danger); font-size: 10px; line-height: 16px; font-weight: 600; text-align: center; box-shadow: 0 0 0 2px var(--surface-raised); }
.sc-notes { width: 360px; padding: 0; }
.sc-notes-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-title); }
.sc-note { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; color: var(--text); text-decoration: none; }
.sc-note:last-child { border-bottom: 0; }
.sc-note.is-link { cursor: pointer; }
.sc-note.is-link:hover { background: var(--surface-hover); }
.sc-note.is-unread { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.sc-note-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.sc-note-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sc-note-title { font-size: 13px; line-height: 18px; font-weight: 500; }
.sc-note-sub { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sc-note-time { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sc-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-purple); }
.sc-notes-empty { padding: var(--space-5) var(--space-4); text-align: center; }
.sc-so-icon.sc-text-danger { color: var(--danger); } .sc-so-icon.sc-text-warning { color: var(--warning); } .sc-so-icon.sc-text-success { color: var(--success); } .sc-so-icon.sc-text-info { color: var(--info); }

/* Pagination */
.sc-table-foot { flex-wrap: wrap; gap: var(--space-3); }
.sc-pager { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; font-size: 12px; color: var(--text-muted); }
.sc-pager-size { display: inline-flex; align-items: center; gap: 6px; }
.sc-pager select { height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font: inherit; font-size: 12px; }
.sc-pager-range { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pager-nav { display: inline-flex; align-items: center; gap: 2px; }
.sc-flip .sc-icon { transform: scaleX(-1); }
.sc-btn:disabled { opacity: .4; cursor: default; }

/* Tooltip on icon-only buttons: Button `tooltip` */
.sc-tip { position: relative; }
.sc-row-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

/* Small Select (32px), for title bars */
.sc-select-wrap.is-sm .sc-input { height: var(--control-height-sm); font-size: 13px; padding-left: var(--space-2); padding-right: 28px; }
.sc-select-wrap.is-sm > .sc-icon { top: 8px; right: 8px; }

/* Search */
.sc-search-clear { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); cursor: pointer; }
.sc-search-clear:hover { background: var(--surface-hover); color: var(--text); }
.sc-search-menu { left: 0; right: 0; min-width: 0; top: calc(100% + 6px); max-height: 420px; }
.sc-search-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 44px; text-align: left; }
.sc-search-item.is-active { background: var(--surface-hover); }
.sc-search-title { font-size: 14px; line-height: 20px; color: var(--text); }
.sc-search-meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }

.sc-tooltip { position: fixed; z-index: 100; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--brand-navy); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); }
.sc-colfilter-menu { overflow-y: auto; }

/* Segmented */
.sc-seg { display: inline-flex; padding: 2px; gap: 2px; height: var(--control-height-sm); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sc-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font: 500 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.sc-seg-btn:hover { color: var(--text); }
.sc-seg-btn.is-on { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 2px rgba(27, 31, 66, .08); }

.sc-chart-caption { font-size: 12px; line-height: 16px; color: var(--text-muted); margin-bottom: var(--space-2); }
.sc-chart { min-width: 0; }

/* A section card that holds a list (e.g. Overview's "Waiting On You"): header + flat rows */
.sc-so.is-flat { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); background: transparent; }
.sc-section { padding: 0; overflow: hidden; }
.sc-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.sc-section-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text-title); }

.sc-simimark-logo { height: 28px; width: auto; display: block; }
.sc-simimark-mark { height: 28px; width: 28px; display: block; flex: none; }

/* Collapsed rail: no scrollbars; the rail fits its items */
.sc-sidebar { overflow-x: hidden; }
.sc-sidebar.is-collapsed { overflow-y: auto; scrollbar-width: none; }
.sc-sidebar.is-collapsed::-webkit-scrollbar { display: none; }
.sc-sidebar.is-collapsed .sc-nav-item { position: relative; }
.sc-sidebar.is-collapsed .sc-nav-count { position: absolute; top: 2px; right: 2px; min-width: 16px; line-height: 16px; padding: 0 4px; }

/* DataTable chart view */
.sc-chart-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.sc-filterpill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-full); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.sc-filterpill.is-set { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.sc-filterpill .sc-colfilter-btn { opacity: 1; flex: none; }
.sc-filterpill .sc-colfilter-btn { border-radius: var(--radius-full); }
.sc-th-inner { gap: 6px; }
.sc-table-chart { padding: var(--space-4); }

/* Sidebar: an area switched off for now (shown, greyed, not clickable) */
.sc-nav-item.is-disabled { opacity: .5; cursor: default; pointer-events: auto; }
.sc-nav-item.is-disabled:hover { background: transparent; }
.sc-nav-soon { margin-left: auto; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-full); font-size: 10px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.sc-sidebar.is-collapsed .sc-nav-soon { display: none; }

/* Logo per theme: the light logo by default, the dark one when data-theme="dark" */
.sc-logo-dark { display: none; }
[data-theme="dark"] .sc-logo-light { display: none; }
[data-theme="dark"] .sc-logo-dark { display: block; }

/* Segmented: the chosen option is filled with the accent so it reads at a glance, in both themes */
.sc-seg-btn.is-on { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.sc-seg-btn.is-on:hover { background: var(--accent-hover); color: var(--on-accent); }
.sc-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* PermissionMatrix: narrower area column so "What it allows" keeps to one or two lines at 1024px */
.sc-perm-row { grid-template-columns: minmax(150px, 190px) 264px minmax(0, 1fr); }
@media (max-width: 1279px) { .sc-perm-row { gap: var(--space-3); padding-left: var(--space-4); padding-right: var(--space-4); } .sc-perm-desc { font-size: 12px; line-height: 16px; } }
.sc-perm-row { grid-template-columns: minmax(160px, 220px) 264px minmax(0, 1fr); }
.sc-perm-area { white-space: normal; flex-wrap: wrap; row-gap: 2px; }

/* Pagination on its own, under a list of cards or rows */
.sc-pager-standalone { border-top: 1px solid var(--line); margin-top: var(--space-2); }