/* console.css — imports the shared tokens (see index.html), does not
 * import site/styles/site.css or communication_kit's site-base.css:
 * the console is its own product surface, same lesson as site.css's
 * own header comment. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
}
.console-shell { max-width: 720px; margin: 0 auto; padding: 32px 20px; }
.console-header {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.25rem; color: var(--navy);
  margin-bottom: 24px;
}
.icon { width: 20px; height: 20px; }
.console-logo { width: 24px; height: 24px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 20px; margin-bottom: 16px;
}
.card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 1.05rem; }
.card ul { list-style: none; }
.card li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.not-implemented { color: var(--muted); display: flex; gap: 6px; align-items: flex-start; }
.error { color: #b3261e; }
.loading { color: var(--muted); display: flex; gap: 6px; align-items: center; }
input, button { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
button { cursor: pointer; background: var(--navy); color: white; border: none; margin-left: 8px; }
pre { margin-top: 12px; font-size: 0.85rem; white-space: pre-wrap; color: var(--muted); }