/* Components: card, entries, badges/tags/chips, account cards, rows,
   toasts, dashboard quick links. */
.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.entry {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: var(--space-3) 16px;
  margin-bottom: 10px;
}
.entry .head { display: flex; align-items: baseline; gap: 10px; }
.entry .date { color: var(--muted); font-size: 12px; margin-left: auto; }
.entry h3 { margin: 0; font-size: 16px; }
.entry .body { white-space: pre-wrap; margin: var(--space-2) 0; color: var(--text-dim); }
.entry .tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.tag {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 7px;
  cursor: pointer;
}
.badge {
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--edge);
  color: var(--muted);
}
.badge.warn { background: var(--warn-soft); }
.badge.ok { background: var(--ok-soft); }
.ok-text { color: var(--ok); }

.chip {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--edge-soft);
  color: var(--muted);
  background: var(--panel-inset);
  word-break: break-all;
}
.chip.warn { border-color: #a2713a; color: #d9a05b; }

/* connected-account cards (mail / calendar / contacts / admin users) */
.acct { border: 1px solid var(--edge); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
.acct h3 { margin: 0 16px 0 0; font-size: 16px; }
.acct h4 {
  margin: 10px 0 var(--space-1);
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.acct .row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.policy-cell {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: space-between;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.policy-cell .small { font-size: 12px; }
label.check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; color: var(--muted); }

/* Token reveal blocks (one-time API/webhook/user tokens): standard
   inset surface — var(--panel-inset) adapts to both themes. A
   hardcoded dark background here rendered dark-on-dark text under
   prefers-color-scheme: light (JOINERY-UI-TOKENBG-001). Text is
   pinned to var(--text): high-contrast dark-on-light in light mode. */
.token-out { background: var(--panel-inset); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
.token-out p { margin: 0 0 var(--space-2); font-size: 13px; }
.adm-tokens { margin-top: var(--space-2); border-top: 1px solid var(--edge); padding-top: var(--space-2); }

/* generic list row (tasks, projects, ledger lines, events…) */
.task-row {
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--edge);
  flex-wrap: wrap;
}
.task-row:last-child { border-bottom: none; }
.task-row input[type="checkbox"] { flex: 0 0 auto; width: auto; }
.task-title { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.task-title.done { text-decoration: line-through; color: var(--muted); }
.task-row .muted { flex: 0 0 auto; }
.doc-rev-row { display: flex; gap: 10px; align-items: center; padding: var(--space-1) 0; border-bottom: 1px solid var(--edge); }
.doc-rev-row:last-child { border-bottom: none; }
.doc-rev-row .link { margin-left: auto; }

/* toasts */
.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  max-width: 380px;
  box-shadow: var(--shadow);
  font-size: 13px;
  cursor: pointer;
}
.toast-error { border-left-color: var(--err); }

/* home dashboard quick links */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.quick-card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 12px;
  text-align: left;
  color: var(--text);
}
.quick-card:hover { border-color: var(--accent); filter: none; }
.quick-label { font-weight: 700; text-transform: capitalize; }

/* dialogs (confirmDialog / promptDialog) */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 16px;
}
.dialog {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 440px;
  padding: var(--space-4);
}
.dialog-title { margin: 0 0 var(--space-2); font-size: 16px; overflow-wrap: anywhere; }
.dialog-body { margin: 0 0 var(--space-3); color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.dialog-input { width: 100%; margin-bottom: var(--space-3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.dialog-ok.danger { background: var(--err); border-color: var(--err); }
button.danger { color: var(--err); border-color: var(--err); }

/* global request progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  z-index: 200;
  animation: progress-pulse 0.9s ease-in-out infinite;
}
@keyframes progress-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar { animation: none; }
}

/* Settings pane */
.kv { display: grid; gap: 6px; margin: 10px 0; }
.kv > div { display: flex; gap: 8px; align-items: baseline; }
.kv .k { min-width: 90px; color: var(--muted, #8a94a6); font-size: 13px; }
/* Code/token strings (curl blocks, MFA secret + recovery codes, conn
   rows): standard inset surface, theme-adaptive — was hardcoded
   #1d2430 (JOINERY-UI-TOKENBG-001). */
.code { background: var(--panel-inset); color: var(--text); border-radius: var(--radius-sm, 6px); padding: 10px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; overflow-x: auto; }
.token-value { word-break: break-all; }

/* --- live signal feed (portal SSE watch) --- */
.sig-btn { position: relative; font-size: 16px; line-height: 1; }
.sig-btn.sig-hot { color: var(--accent, #e8b34b); }
.sig-btn.sig-dead { opacity: 0.4; }
.sig-pop {
  position: fixed;
  top: 46px;
  right: var(--space-3, 12px);
  width: 300px;
  max-height: 55vh;
  overflow-y: auto;
  background: var(--panel, #161a23);
  border: 1px solid var(--edge, #262c3a);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  z-index: 60;
}
.sig-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 6px 0;
  border-bottom: 1px solid var(--edge, #262c3a);
  font-size: 13px;
}
.sig-row:last-child { border-bottom: none; }
.sig-at { color: var(--muted, #8b93a7); font-size: 11px; white-space: nowrap; }