/* StackChum shared components (UX-010). Only `.sc-*` selectors and
 * @font-face live here so a service can import this file without any change
 * to its own layout. Requires stackchum-tokens.css. Source of truth:
 * services/_shared/ui/ — never edit a vendor/ copy. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }

/* ---- accessibility primitives ---- */
.sc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sc-skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 8px 12px; background: var(--sc-navy); color: #fff; border-radius: var(--sc-radius-sm); font: 600 var(--sc-text-sm) var(--sc-font-display); }
.sc-skip-link:focus { top: 12px; outline: 2px solid var(--sc-focus); outline-offset: 2px; }
.sc-focusable:focus-visible, .sc-button:focus-visible, .sc-workspace-bar a:focus-visible, .sc-menu summary:focus-visible, .sc-menu a:focus-visible, .sc-breadcrumb a:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sc-menu, .sc-menu *, .sc-button { transition: none !important; } }

/* ---- workspace bar: the first thing a person reads (review § E.1) ---- */
.sc-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding: 3px 16px; background: var(--sc-workspace-bar-bg); color: var(--sc-workspace-bar-ink); font: 600 var(--sc-text-xs) / 1.4 var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sc-workspace-bar a { color: inherit; text-decoration: none; }
.sc-workspace-bar a:hover { text-decoration: underline; }
.sc-workspace-bar .sc-workspace-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-workspace-bar .sc-workspace-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.sc-workspace-bar .sc-workspace-sub { font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.sc-workspace-bar .sc-workspace-identity { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.sc-workspace-bar .sc-workspace-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sc-workspace-bar-chip); font: 700 11px / 1.6 var(--sc-font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 480px) { .sc-workspace-bar .sc-workspace-sub, .sc-workspace-bar .sc-workspace-identity span { display: none; } }

/* ---- top bar (wordmark + primary nav + menus) ---- */
.sc-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--sc-surface); border-bottom: 1px solid var(--sc-line); }
.sc-topbar .sc-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-ink); text-decoration: none; font: 700 var(--sc-text-lg) var(--sc-font-display); }
.sc-topbar .sc-wordmark img { height: 28px; width: auto; }
.sc-topbar .sc-wordmark .sc-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--sc-accent); color: var(--sc-accent-ink); display: inline-grid; place-items: center; font: 800 14px var(--sc-font-display); }
.sc-topbar nav.sc-primary { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.sc-topbar nav.sc-primary a { color: var(--sc-ink-2); text-decoration: none; padding: 8px 12px; border-radius: var(--sc-radius-sm); font: 600 var(--sc-text-sm) var(--sc-font-display); white-space: nowrap; }
.sc-topbar nav.sc-primary a:hover { background: var(--sc-surface-2); color: var(--sc-ink); }
.sc-topbar nav.sc-primary a[aria-current="page"] { background: var(--sc-accent-soft); color: var(--sc-ink); }
.sc-topbar .sc-topbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
@media (max-width: 768px) { .sc-topbar { flex-wrap: wrap; } .sc-topbar nav.sc-primary { order: 3; width: 100%; } }
/* UX-026: on a phone the avatar alone identifies the account menu; the name stays in the panel and the aria-label */
@media (max-width: 480px) { .sc-menu.sc-account-menu > summary .sc-account-name { display: none; } .sc-menu.sc-account-menu > summary { padding: 6px; } }

/* ---- menus: <details> based so they work without JS ---- */
.sc-menu { position: relative; }
.sc-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius-sm); background: var(--sc-surface); color: var(--sc-ink); font: 600 var(--sc-text-sm) var(--sc-font-display); }
.sc-menu > summary::-webkit-details-marker { display: none; }
.sc-menu > summary::after { content: "▾"; font-size: 12px; opacity: 0.7; }
.sc-menu[open] > summary { border-color: var(--sc-line-strong); }
.sc-menu .sc-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px; background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-2); }
.sc-menu .sc-menu-panel a, .sc-menu .sc-menu-panel button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--sc-radius-sm); background: none; color: var(--sc-ink); text-decoration: none; font: 500 var(--sc-text-sm) var(--sc-font-body); text-align: left; cursor: pointer; }
.sc-menu .sc-menu-panel a:hover, .sc-menu .sc-menu-panel button:hover { background: var(--sc-surface-2); }
.sc-menu .sc-menu-panel a[data-external]::after { content: "↗"; opacity: 0.6; }
.sc-menu .sc-menu-panel .sc-menu-heading { padding: 6px 10px 2px; color: var(--sc-muted); font: 700 11px var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sc-menu .sc-menu-panel hr { border: 0; border-top: 1px solid var(--sc-line); margin: 6px 0; }
.sc-menu .sc-menu-identity { padding: 8px 10px; border-bottom: 1px solid var(--sc-line); margin-bottom: 6px; }
.sc-menu .sc-menu-identity strong { display: block; color: var(--sc-ink); font: 600 var(--sc-text-sm) var(--sc-font-body); overflow: hidden; text-overflow: ellipsis; }
.sc-menu .sc-menu-identity span { color: var(--sc-muted); font-size: var(--sc-text-xs); }
.sc-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-ink); display: inline-grid; place-items: center; font: 700 12px var(--sc-font-display); }

/* ---- breadcrumb ---- */
.sc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--sc-muted); font: 500 var(--sc-text-sm) var(--sc-font-body); }
.sc-breadcrumb li + li::before { content: "›"; margin-right: 6px; opacity: 0.6; }
.sc-breadcrumb a { color: var(--sc-link); text-decoration: none; }
.sc-breadcrumb a:hover { text-decoration: underline; }
.sc-breadcrumb [aria-current="page"] { color: var(--sc-ink); font-weight: 600; }

/* ---- buttons, notices, cards, empty/error states ---- */
.sc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--sc-radius-sm); background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none; font: 600 var(--sc-text-sm) var(--sc-font-display); cursor: pointer; transition: filter 120ms ease; }
.sc-button:hover { filter: brightness(1.06); }
.sc-button.sc-secondary { background: var(--sc-surface); color: var(--sc-ink); border-color: var(--sc-line-strong); }
.sc-button.sc-danger { background: var(--sc-danger); color: #fff; }
.sc-button[disabled], .sc-button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.sc-notice { padding: 12px 16px; border-radius: var(--sc-radius); border: 1px solid var(--sc-line); background: var(--sc-surface-2); color: var(--sc-ink); font: 500 var(--sc-text-sm) / 1.5 var(--sc-font-body); }
.sc-notice.sc-info { border-color: var(--sc-blue-soft); background: var(--sc-blue-soft); }
.sc-notice.sc-success { border-color: #BBF7D0; background: #DCFCE7; }
.sc-notice.sc-warning { border-color: #FDE68A; background: #FEF3C7; }
.sc-notice.sc-danger { border-color: #FECACA; background: #FEE2E2; }
[data-workspace="admin"] .sc-notice, [data-workspace="keel"] .sc-notice { color: var(--sc-ink); }
[data-workspace="admin"] .sc-notice.sc-info, [data-workspace="keel"] .sc-notice.sc-info { background: rgba(37, 99, 235, 0.18); border-color: rgba(59, 130, 246, 0.4); }
[data-workspace="admin"] .sc-notice.sc-warning, [data-workspace="keel"] .sc-notice.sc-warning { background: rgba(245, 158, 11, 0.18); border-color: rgba(251, 191, 36, 0.4); }
.sc-card { background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-lg); padding: 20px; box-shadow: var(--sc-shadow-1); }
.sc-card .sc-card-label { display: block; margin-bottom: 8px; color: var(--sc-accent); font: 700 11px var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sc-tile { display: flex; flex-direction: column; gap: 10px; }
.sc-tile .sc-tile-head { display: flex; align-items: center; gap: 12px; }
.sc-tile .sc-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--sc-accent); color: var(--sc-accent-ink); display: inline-grid; place-items: center; font: 800 16px var(--sc-font-display); flex: none; }
.sc-tile h2, .sc-tile h3 { margin: 0; font: 700 var(--sc-text-lg) var(--sc-font-display); color: var(--sc-ink); }
.sc-tile .sc-tile-state { color: var(--sc-muted); font-size: var(--sc-text-sm); }
.sc-empty, .sc-error-state { text-align: center; padding: 40px 20px; border: 1px dashed var(--sc-line-strong); border-radius: var(--sc-radius-lg); color: var(--sc-muted); }
.sc-empty h2, .sc-error-state h2 { margin: 0 0 8px; color: var(--sc-ink); font: 700 var(--sc-text-xl) var(--sc-font-display); }
.sc-footer-brand { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 16px; color: var(--sc-muted); font: 500 var(--sc-text-xs) var(--sc-font-body); border-top: 1px solid var(--sc-line); }
.sc-footer-brand a { color: var(--sc-muted); }