/* Maya 2.0 ULTRA — Cognitive architecture views (kernel, goals, skills,
   self-model, capabilities, metacognition, society, MCP, core loop) */

/* ── Layout helpers ─────────────────────────────── */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.panel h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.panel h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-grid-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat-grid-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stat-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); word-break: break-all; }
.stat-value.small-val { font-size: 1rem; line-height: 1.8; }
.stat-label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }

.kv-list { margin: 0; }
.kv-list > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1_5, 6px) 0; border-bottom: 1px dashed var(--border); }
.kv-list > div:last-child { border-bottom: none; }
.kv-list dt { color: var(--text-tertiary); font-size: var(--text-sm); white-space: nowrap; }
.kv-list dd { margin: 0; font-size: var(--text-sm); text-align: right; word-break: break-word; }

.subtabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.subtab { border: none; background: transparent; color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); }
.subtab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.subtab.active { background: var(--accent-soft, rgba(139,111,71,.14)); color: var(--accent); font-weight: 600; }

.mode-pill, .pill-ok, .pill-warn, .pill-off {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
}
.pill-ok { color: var(--success); border-color: var(--success); }
.pill-warn { color: var(--warning); border-color: var(--warning); }
.pill-off { color: var(--text-tertiary); }

.result-list { display: flex; flex-direction: column; gap: var(--space-2); }
.result-item { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.result-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 4px; }

.thread-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1_5, 6px) 0; border-bottom: 1px dashed var(--border); }
.thread-row:last-child { border-bottom: none; }

.plain-list { margin: var(--space-2) 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: 2px; }
.muted { color: var(--text-tertiary); }
.small, .muted.small { font-size: var(--text-xs); }
.mono-small, pre.mono-small { font-family: var(--font-mono); font-size: var(--text-xs); }
.pre-wrap { white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; }

.search-bar { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.search-bar .form-input { flex: 1; min-width: 0; }

.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.form-row-end { align-items: center; justify-content: flex-end; }
.form-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.view-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ── Goals view ─────────────────────────────────── */
.propose-panel { margin-bottom: var(--space-4); border-left: 3px solid var(--accent); }
.incomplete-panel { margin-bottom: var(--space-4); border-left: 3px solid var(--warning); }
.incomplete-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.goal-desc { margin: 2px 0 var(--space-2); }
.goal-row .row-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.progress-track { height: 5px; background: var(--bg-tertiary); border-radius: 999px; overflow: hidden; margin-top: var(--space-1); }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.plan-steps li { margin-bottom: var(--space-2); }
.resume-hint { margin-top: 2px; }
.pipeline-status-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-3); }
.pipeline-status-card.is-proposal { border-left: 3px solid var(--warning); }

/* ── Skills view ────────────────────────────────── */
.skill-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.skill-check { padding-top: 2px; }
.skill-main { flex: 1; min-width: 0; }

/* ── Conf dot (belief confidence) ──────────────── */
.conf-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--text-tertiary); }
.conf-dot[data-conf="1"], .conf-dot[data-conf="0.9"], .conf-dot[data-conf="0.8"] { background: var(--success); }
.conf-dot[data-conf="0.7"], .conf-dot[data-conf="0.6"], .conf-dot[data-conf="0.5"] { background: var(--warning); }
.conf-dot[data-conf="0.4"], .conf-dot[data-conf="0.3"], .conf-dot[data-conf="0.2"], .conf-dot[data-conf="0.1"] { background: var(--error); }

/* ── Tasks live stream ──────────────────────────── */
.live-event-log { max-height: 260px; overflow-y: auto; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.live-event-row { padding: 3px 0; border-bottom: 1px dashed var(--border); display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.live-event-row:last-child { border-bottom: none; }
.evt-time { color: var(--text-tertiary); }

/* ── Sidebar groups ─────────────────────────────── */
.nav-group-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-3) var(--space-3) var(--space-1); }
.sidebar.collapsed .nav-group-label { display: none; }

/* ── Login ──────────────────────────────────────── */
.login-wrap {
  min-height: calc(100vh - env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.login-card {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.12));
}
.login-brand { text-align: center; margin-bottom: var(--space-5); }
.login-brand .brand-icon { width: 56px; height: 56px; color: var(--accent); }
.login-brand h1 { margin: var(--space-2) 0 0; font-size: 1.5rem; }
.login-sub { color: var(--text-tertiary); font-size: var(--text-sm); margin: 4px 0 0; }
.login-error { background: rgba(220,53,69,.1); border: 1px solid var(--error); color: var(--error); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.login-toggle { text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-4); }
.login-toggle a { color: var(--accent); }
.btn-block { width: 100%; }
.hidden { display: none !important; }

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .panel-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kv-list dd { text-align: left; }
  .kv-list > div { flex-direction: column; gap: 0; }
  .subtabs { overflow-x: auto; flex-wrap: nowrap; }
  .login-card { padding: var(--space-5) var(--space-4); }
}

@media (max-width: 480px) {
  .login-wrap { padding: var(--space-3); }
  .login-card { padding: var(--space-4); }
  .login-brand .brand-icon { width: 48px; height: 48px; }
  .login-brand h1 { font-size: 1.25rem; }
  .login-sub { font-size: var(--text-xs); }
}