/* =============================================================================
   BSE globals.css — v1.0 (additive primitives)
   depends_on: shared.css, tokens.css (in that order)
   role: shared UI primitives used across portal pages
         (card family, empty state, tabs, kv-grid, pills, forms, toast, drawer)
   does_not: redefine anything shared.css or app.css already owns correctly.
             Page-specific rules stay in their own .css files.
   ========================================================================== */

/* ---------- kv-grid (key/value data display; used in visualizer stub + more) */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.kv-cell {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.kv-key {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.kv-val {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  word-break: break-word;
}

/* ---------- status banner (inline alerts, not toast) */
.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}
.banner-warn    { background: var(--color-status-warn-bg);    color: var(--color-status-warn);    border-color: var(--color-status-warn); }
.banner-danger  { background: var(--color-status-danger-bg);  color: var(--color-status-danger);  border-color: var(--color-status-danger); }
.banner-success { background: var(--color-status-success-bg); color: var(--color-status-success); border-color: var(--color-status-success); }
.banner-accent  { background: var(--color-accent-bg);         color: var(--color-accent-primary); border-color: var(--color-accent-border); }

/* ---------- pills (generic — phase-badge in app.css is the specialized one) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.pill-accent  { color: var(--color-accent-primary);  border-color: var(--color-accent-primary); }
.pill-success { color: var(--color-status-success);  border-color: var(--color-status-success); }
.pill-warn    { color: var(--color-status-warn);     border-color: var(--color-status-warn); }
.pill-danger  { color: var(--color-status-danger);   border-color: var(--color-status-danger); }

/* ---------- form primitives (extend the login-card input pattern portal-wide) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--color-text-muted);
}
.input,
.select,
.textarea {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow   var(--duration-fast) var(--ease-standard);
  width: 100%;
  outline: none;
}
.input:hover, .select:hover, .textarea:hover {
  border-color: var(--color-text-secondary);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-accent-glow);
}
.input::placeholder, .textarea::placeholder {
  color: var(--color-text-muted);
}

/* ---------- badge (small count indicator, used in tab labels) */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
}
.badge-count.active {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* ---------- tabs (role-based; used on engagement page) */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.tab {
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  display: inline-flex;
  align-items: center;
}
.tab:hover { color: var(--color-text-primary); }
.tab.active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }
.tab-panel.active { display: block; }

/* ---------- back link (used on engagement page, sub-navigation) */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: color var(--duration-fast) var(--ease-standard);
}
.back-link:hover { color: var(--color-accent-primary); }

/* ---------- notification button (header bell) */
.notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.notif-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
}
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--color-status-danger);
  border-radius: 50%;
  border: 2px solid var(--color-bg-primary);
}

/* ---------- notification drawer (slide-in panel) */
.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  z-index: var(--z-modal);
  background: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-emphasized);
  display: flex;
  flex-direction: column;
}
.notif-drawer:not([hidden]) { transform: translateX(0); }
.notif-drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.notif-drawer h3 {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  margin: 0;
}
.notif-close {
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-secondary);
  padding: 0 var(--space-2);
}
.notif-close:hover { color: var(--color-text-primary); }
#notifList { overflow-y: auto; padding: var(--space-3) 0; }
.notif-item {
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.notif-item:hover { background: var(--color-bg-elevated); }
.notif-item.unread { background: var(--color-accent-bg); }
.notif-item .notif-title {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.notif-item .notif-time {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- eng-head (engagement page title block) */
.eng-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.eng-title {
  font-family: var(--serif);
  font-weight: var(--weight-light);
  font-size: clamp(28px, 4vw, 48px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 var(--space-3);
  color: var(--color-text-primary);
}
.eng-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--color-text-muted);
}