/* Connect+ - shared UI primitives.
   One definition of button, input, badge, card and status-card, so every
   screen draws the same control at the same size. Three button tiers only:
     primary   - the single filled action in a view
     (default) - outlined secondary
     ghost     - text/icon tertiary
   Existing class names (.tb-btn, .sa-btn, edit-toolbar / settings-actions /
   modal-actions buttons) are folded into the same rule so screens did not need
   markup changes to pick this up. Loaded after the screen stylesheets. */

/* ---- Buttons ---- */
.btn,
.tb-btn,
.sa-btn,
.edit-toolbar button,
.settings-actions button,
.modal-actions button,
.dash-empty button,
.status-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--ln);
  border-radius: var(--r-md);
  background: var(--sf2);
  color: var(--tx);
  font: 500 var(--fs-sm)/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-out), background-color var(--t-out), color var(--t-out);
}
.btn:hover,
.tb-btn:hover,
.sa-btn:hover,
.edit-toolbar button:hover,
.settings-actions button:hover,
.modal-actions button:hover,
.status-card button:hover { border-color: var(--tx2); }

.btn--primary,
.tb-btn.primary,
.sa-btn-primary,
.edit-toolbar button.primary,
.modal-actions button.primary,
.dash-empty button,
.status-card button.primary {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--ac-on);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 0 var(--sp-4);
}
.btn--primary:hover,
.tb-btn.primary:hover,
.sa-btn-primary:hover,
.edit-toolbar button.primary:hover,
.modal-actions button.primary:hover,
.dash-empty button:hover { border-color: var(--ac); filter: brightness(1.08); }

.btn--ghost,
.tb-btn.subtle,
.sa-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tx2);
}
.btn--ghost:hover,
.tb-btn.subtle:hover,
.sa-btn-ghost:hover { color: var(--tx); background: var(--sf2); border-color: transparent; }

.btn--danger:hover,
.sa-btn-danger:hover,
.edit-toolbar button.danger:hover,
.settings-actions button.danger:hover,
.modal-actions button.danger:hover { border-color: var(--red); color: var(--red-ink); }

.btn--icon,
.tb-btn.icon-sq {
  width: var(--ctl-h);
  padding: 0;
  color: var(--tx2);
}
.btn--icon:hover,
.tb-btn.icon-sq:hover { color: var(--tx); }

.btn:disabled,
.tb-btn:disabled,
.sa-btn:disabled,
.edit-toolbar button:disabled,
.settings-actions button:disabled { opacity: .45; cursor: not-allowed; }

.btn svg, .tb-btn svg { flex: none; }

/* ---- Inputs ---- */
.input,
.sa-date,
.settings-field select,
.settings-field input,
.edit-toolbar .dash-name-input,
.lib-search {
  height: var(--ctl-h);
  padding: 0 var(--sp-2);
  border: 1px solid var(--ln);
  border-radius: var(--r-md);
  background: var(--sf2);
  color: var(--tx);
  font: 500 var(--fs-sm) var(--font-body);
}
.input::placeholder, .sa-date::placeholder, .lib-search::placeholder { color: var(--tx2); opacity: .85; }
.input:disabled, .sa-date:disabled { opacity: .55; cursor: not-allowed; }

/* Full-width where the container is a column (rails, modals, forms). */
.lib-search, .modal-form .input, .settings-field input, .settings-field select { width: 100%; }

/* ---- Badges (pill, dot + label) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--tone-ln, var(--ln));
  background: var(--tone-bg, transparent);
  color: var(--tone-ink, var(--tx2));
  font: 600 var(--fs-xs)/1 var(--font-body);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--ok   { --tone-bg: var(--ok-bg);   --tone-ln: var(--ok-ln);   --tone-ink: var(--ok-ink); }
.badge--warn { --tone-bg: var(--warn-bg); --tone-ln: var(--warn-ln); --tone-ink: var(--amb-ink); }
.badge--bad  { --tone-bg: var(--bad-bg);  --tone-ln: var(--bad-ln);  --tone-ink: var(--red-ink); }
.badge--demo { --tone-bg: var(--warn-bg); --tone-ln: var(--warn-ln); --tone-ink: var(--amb-ink); }
.badge--role::before { content: none; }

/* ---- Section label (sentence case, 11px) ---- */
.label-caps {
  font: 600 var(--fs-xs)/1.2 var(--font-body);
  color: var(--tx2);
}

/* ---- Inline status card: replaces toasts for states the user must act on ---- */
.status-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--tone-ln, var(--ln));
  border-radius: var(--r-lg);
  background: var(--tone-bg, var(--sf));
  color: var(--tx);
  font: 500 var(--fs-md)/1.45 var(--font-body);
}
.status-card--warn { --tone-bg: var(--warn-bg); --tone-ln: var(--warn-ln); }
.status-card--bad  { --tone-bg: var(--bad-bg);  --tone-ln: var(--bad-ln); }
.status-card__icon { flex: none; margin-top: 1px; color: var(--tone-ink, var(--tx2)); }
.status-card--warn .status-card__icon { color: var(--amb-ink); }
.status-card--bad .status-card__icon { color: var(--red-ink); }
.status-card__body { flex: 1; min-width: 0; }
.status-card__title { font-weight: 600; }
.status-card__text { color: var(--tx); opacity: .88; }
.status-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ---- Skeleton (loading affordance; replaces blank panels) ---- */
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--sf2) 25%, color-mix(in srgb, var(--sf2) 70%, var(--tx) 8%) 50%, var(--sf2) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.status-card__detail { margin-top: var(--sp-2); font: 500 var(--fs-xs) var(--font-body); color: var(--tx); }
.status-card__detail summary { cursor: pointer; width: max-content; min-height: 28px; display: flex; align-items: center; }
.status-card__detail code { display: block; margin-top: 4px; font: 500 var(--fs-xs) ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }

/* ---- Status badge with a glyph instead of a dot ---- */
.badge--icon::before { content: none; }
.badge-ico { flex: none; }

/* ---- Keycap (shortcut hints, legend) ---- */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--ln);
  border-radius: var(--r-sm);
  background: var(--sf2);
  color: var(--tx2);
  font: 500 var(--fs-xs)/1 var(--font-body);
}

/* ---- Command palette and shortcut legend (js/ui/shortcuts.js) ---- */
.kb-scrim {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: rgba(0, 0, 0, .5);
}
.kb-pop {
  width: min(560px, 92vw);
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: var(--r-canvas);
  box-shadow: var(--shadow-pop);
  animation: kb-in .18s var(--ease-expo);
}
@keyframes kb-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.kb-input {
  height: 44px;
  padding: 0 var(--sp-4);
  border: none;
  border-bottom: 1px solid var(--ln);
  background: transparent;
  color: var(--tx);
  font: 450 var(--fs-lg) var(--font-body);
}
.kb-input:focus-visible { outline: none !important; }
.kb-input::placeholder { color: var(--tx2); }
.kb-results, .kb-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.kb-results li, .kb-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--tx);
  font: 450 var(--fs-md) var(--font-body);
  cursor: pointer;
}
.kb-results li[aria-selected="true"] { background: var(--row-hover); box-shadow: inset 2px 0 0 var(--indigo); }
.kb-hint { color: var(--tx2); font-size: var(--fs-xs); }
.kb-none { color: var(--tx2) !important; cursor: default !important; }
.kb-legend { padding: var(--sp-4); }
.kb-title { margin: 0 0 var(--sp-2) var(--sp-3); font-size: var(--fs-lg); }
.kb-list li { cursor: default; }
.kb-keys { display: inline-flex; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .kb-pop { animation: none; } }