/* ============================================================
   Tagora — Docs (shared for docs/*.html + getting-started.html)
   ============================================================ */

/* Override global body flex — docs pages need a true block container */
body:has(.docs-layout) {
  display: block;
  min-height: unset;
  height: 100vh;
  overflow: hidden;
}

/* ── Layout ── */
.docs-layout {
  display: flex; height: 100vh;
  background: #f8fafc; color: #0f172a;
  overflow: hidden;
}
.docs-main {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.docs-content {
  flex: 1; overflow-y: auto; background: #fff;
  padding: 1.5rem;
}
@media (min-width: 768px) { .docs-content { padding: 2.5rem; } }
.docs-content-inner {
  max-width: 56rem; margin: 0 auto;
  padding-bottom: 4rem;
  display: flex; flex-direction: column; gap: 2rem;
}
.docs-content-inner--sm  { max-width: 48rem; gap: 3rem; }
.docs-content-inner--gap-lg { gap: 2.5rem; }

/* ── Sidebar ── */
.docs-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 16rem; z-index: 40;
  background: #fff; border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.docs-sidebar--open { transform: translateX(0); }
@media (min-width: 1024px) {
  .docs-sidebar {
    position: sticky; top: 0; height: 100vh;
    transform: none; flex-shrink: 0;
  }
}
.docs-sidebar-top {
  height: 4rem; display: flex; align-items: center;
  justify-content: space-between; padding: 0 1.5rem;
  border-bottom: 1px solid #e2e8f0; background: #f8fafc;
  flex-shrink: 0;
}
.docs-sidebar-brand {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none;
}
.docs-sidebar-brand:hover .docs-sidebar-wordmark { color: #2563eb; }
.docs-sidebar-back { color: #94a3b8; flex-shrink: 0; transition: color 0.2s; }
.docs-sidebar-brand:hover .docs-sidebar-back { color: #0f172a; }
.docs-sidebar-badge {
  background: #2563eb; color: #fff;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  font-weight: 700; font-size: 0.875rem;
}
.docs-sidebar-wordmark {
  font-weight: 800; color: #1e293b;
  letter-spacing: -0.025em; font-size: 0.875rem;
  transition: color 0.2s;
}
.docs-sidebar-close {
  background: none; border: none; cursor: pointer;
  color: #94a3b8; padding: 0.25rem;
  display: flex; align-items: center; justify-content: center;
}
.docs-sidebar-close:hover { color: #0f172a; }
@media (min-width: 1024px) { .docs-sidebar-close { display: none; } }
.docs-sidebar-nav {
  flex: 1; overflow-y: auto; padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: 0.375rem;
}
.docs-nav-label {
  font-size: 10px; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 0.75rem; margin-bottom: 0.5rem; display: block;
}
.docs-nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: background 0.15s, color 0.15s;
  color: #475569;
}
.docs-nav-link:hover { background: #f1f5f9; color: #0f172a; }
.docs-nav-link--active {
  background: #2563eb; color: #fff;
  box-shadow: 0 4px 6px -1px rgb(37 99 235 / .20);
}
.docs-nav-link--active:hover { background: #1d4ed8; color: #fff; }
.docs-nav-icon { flex-shrink: 0; color: #94a3b8; }
.docs-nav-link--active .docs-nav-icon { color: #fff; }
.docs-nav-ext { margin-left: auto; opacity: 0.5; }
.docs-sidebar-footer {
  padding: 1rem; border-top: 1px solid #e2e8f0;
  background: #f8fafc; font-size: 0.75rem; color: #64748b;
  flex-shrink: 0;
}
.docs-sidebar-footer-row {
  display: flex; align-items: center; justify-content: space-between;
}
.docs-sdk-badge {
  padding: 0.125rem 0.375rem; border-radius: 0.375rem;
  background: #eff6ff; font-family: 'Menlo', monospace; font-weight: 700;
  font-size: 10px; color: #1d4ed8;
}
.docs-sidebar-fab {
  display: flex; position: fixed; bottom: 1rem; right: 1rem; z-index: 50;
}
@media (min-width: 1024px) { .docs-sidebar-fab { display: none; } }
.docs-sidebar-fab button {
  padding: 0.75rem; background: #2563eb; color: #fff;
  border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 10px 25px -5px rgb(37 99 235 / .40);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.docs-sidebar-fab button:hover { background: #1d4ed8; }
.docs-sidebar-fab button:active { transform: scale(0.95); }

/* ── Header ── */
.docs-header {
  height: 4rem; background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 0 1.5rem; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 30;
  flex-shrink: 0;
}
.docs-header-breadcrumb {
  display: none; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; color: #64748b;
}
@media (min-width: 640px) { .docs-header-breadcrumb { display: flex; } }
.docs-header-bc-current { color: #0f172a; }
.docs-header-search {
  flex: 1; max-width: 24rem; margin: 0 2rem;
  display: none;
}
@media (min-width: 768px) { .docs-header-search { display: block; } }
.docs-header-actions {
  display: flex; align-items: center; gap: 0.75rem; margin-left: auto;
}
.docs-select-wrap {
  display: flex; align-items: center; gap: 0.375rem;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 0.5rem; padding: 0.25rem 0.5rem;
}
.docs-select {
  background: transparent; font-size: 11px; font-weight: 700;
  color: #334155; border: none; outline: none; cursor: pointer;
}
.docs-header-divider { height: 1.5rem; width: 1px; background: #e2e8f0; flex-shrink: 0; }

.docs-user-chip { display: flex; align-items: center; gap: 0.5rem; }
.docs-user-name { font-size: 0.8125rem; font-weight: 600; color: #0f172a; white-space: nowrap; }
.docs-logout-btn {
  background: transparent; border: 1.5px solid #e2e8f0; color: #64748b;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.docs-logout-btn:hover { border-color: #0f172a; color: #0f172a; }
.docs-login-btn {
  background: #0f172a; color: #fff;
  padding: 0.3125rem 0.875rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.docs-login-btn:hover { background: #1e293b; }

/* ── Page header ── */
.docs-page-header { display: flex; flex-direction: column; }
.docs-page-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; color: #0f172a;
  letter-spacing: -0.025em; margin: 0 0 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.docs-page-desc {
  font-size: 1.125rem; color: #475569;
  line-height: 1.625; max-width: 48rem; margin: 0;
}

/* ── Section headings ── */
.docs-section { display: flex; flex-direction: column; gap: 1rem; }
.docs-section--gap-sm { gap: 0.75rem; }
.docs-section--gap-xs { gap: 0.5rem; }
.docs-section-title {
  font-size: 1.5rem; font-weight: 700; color: #0f172a;
  letter-spacing: -0.015em; margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.docs-section-title--lg { font-size: 1.875rem; font-weight: 800; }
.docs-section-title--md { font-size: 1.25rem; font-weight: 700; }
.docs-section-desc { font-size: 0.875rem; color: #475569; line-height: 1.625; margin: 0; }

/* ── API version badge ── */
.api-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgb(37 99 235 / .10); border: 1px solid rgb(37 99 235 / .20);
  color: #1d4ed8; font-size: 0.75rem; font-weight: 700;
  padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 1rem;
}

/* ── Alerts ── */
.alert {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border-radius: 0.75rem; font-size: 0.875rem;
}
.alert__icon { flex-shrink: 0; margin-top: 0.125rem; }
.alert--amber {
  border: 1px solid #fde68a; background: #fffbeb; color: #92400e;
}
.alert--amber strong { color: #b45309; }
.alert--amber p { color: #475569; margin: 0; }
.alert--blue {
  border: 1px solid rgb(59 130 246 / .20); background: rgb(59 130 246 / .05);
  color: #475569; line-height: 1.625;
}
.alert--slate {
  background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
  font-size: 0.75rem; border-radius: 0.5rem; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}

/* ── Info cards (policy, info pairs) ── */
.info-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1rem;
  font-size: 0.75rem; color: #475569; line-height: 1.625;
}
.info-card__title { font-weight: 600; color: #334155; display: block; margin-bottom: 0.5rem; }
.info-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .info-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ── Step cards (getting-started 4-step flow + SSE steps) ── */
.step-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .step-cards { grid-template-columns: repeat(2, 1fr); } }
.step-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1.25rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.step-card__num {
  position: absolute; top: 0.75rem; right: 1rem;
  font-size: 3rem; font-weight: 800;
  color: rgb(30 41 59 / .50); line-height: 1;
  user-select: none; pointer-events: none;
}
.step-card__title { font-weight: 700; color: #0f172a; margin: 0; font-size: 0.875rem; }
.step-card__body { font-size: 0.875rem; color: #475569; line-height: 1.625; margin: 0; }
.step-card__link { font-size: 0.75rem; color: #1d4ed8; font-weight: 600; text-decoration: none; margin-top: auto; }
.step-card__link:hover { text-decoration: underline; }
.step-card__phase {
  display: inline-flex; align-items: center; width: fit-content;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1875rem 0.5rem; border-radius: 9999px;
}
.step-card__phase--sec { background: #ede9fe; color: #6d28d9; }
.step-card__phase--int { background: #dcfce7; color: #166534; }
.step-card__out {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem;
  font-size: 0.75rem; margin-top: 0.125rem;
}
.step-card__out > span { color: #94a3b8; font-weight: 700; }

/* Step card collapsible call/response */
.step-card__call {
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: 1px dashed #e2e8f0;
}
.step-card__call-toggle {
  font-size: 0.6875rem; font-weight: 600; color: #94a3b8;
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 0.3rem;
}
.step-card__call-toggle::-webkit-details-marker { display: none; }
.step-card__call-toggle::before { content: '▶'; font-size: 0.45rem; transition: transform 0.15s; }
details[open].step-card__call > .step-card__call-toggle::before { transform: rotate(90deg); }
.step-card__call-toggle:hover { color: #64748b; }
.step-card__call-in,
.step-card__call-out {
  display: block; margin-top: 0.25rem;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.6375rem; line-height: 1.5;
}
.step-card__call-in::before  { content: '→ '; color: #94a3b8; }
.step-card__call-out::before { content: '← '; color: #94a3b8; }
.step-card__call-in  { color: #475569; }
.step-card__call-out { color: #1d4ed8; }

/* SSE step cards */
.sse-step { display: flex; flex-direction: column; gap: 0.75rem; }
.sse-step-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.sse-step-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.sse-step-title { color: #0f172a; font-weight: 600; font-size: 0.875rem; }
.sse-step-endpoint { margin-left: auto; font-size: 0.75rem; color: #475569; font-family: 'Menlo', monospace; }
.sse-step-desc { font-size: 0.75rem; color: #475569; line-height: 1.625; margin: 0; }
.sse-step-note { font-size: 0.75rem; color: #475569; line-height: 1.625; margin: 0; }

/* ── Token lifecycle box ── */
.token-lifecycle {
  background: rgb(255 255 255 / .50); border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1rem;
  font-size: 0.75rem; color: #475569; line-height: 1.625;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.token-lifecycle__label { font-weight: 600; color: #475569; }
.token-lifecycle__item { display: flex; align-items: flex-start; gap: 0.625rem; }
.token-dot {
  margin-top: 0.125rem; width: 1rem; height: 1rem;
  border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 9px;
}
.token-dot--green  { background: rgb(16 185 129 / .15); color: #047857; }
.token-dot--amber  { background: rgb(245 158 11 / .15); color: #d97706; }
.token-dot--blue   { background: rgb(59 130 246 / .15); color: #1d4ed8; }
.token-dot--red    { background: rgb(239 68 68  / .15); color: #dc2626; }

/* ── Next-step navigation cards ── */
.next-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-step-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1.25rem;
  text-decoration: none; display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 0.2s;
}
.next-step-card:hover { border-color: rgb(37 99 235 / .50); }
.next-step-card__icon { color: #1d4ed8; margin-bottom: 0.75rem; }
.next-step-card__title {
  font-weight: 700; color: #0f172a; font-size: 0.875rem;
  transition: color 0.2s;
}
.next-step-card:hover .next-step-card__title { color: #1d4ed8; }
.next-step-card__desc { font-size: 0.75rem; color: #475569; margin: 0; }

/* ── Example heading (Node/Python labels) ── */
.example-heading {
  font-size: 1rem; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
}

/* ── API method badges ── */
.method-badge {
  font-family: 'Menlo', 'Fira Code', monospace;
  font-size: 0.75rem; font-weight: 700;
  padding: 0.25rem 0.625rem; border-radius: 0.375rem; display: inline-block;
}
.method-badge--get    { background: rgb(16 185 129 / .10); color: #047857; border: 1px solid rgb(16 185 129 / .20); }
.method-badge--post   { background: rgb(59 130 246 / .10); color: #1d4ed8; border: 1px solid rgb(59 130 246 / .20); }
.method-badge--patch  { background: rgb(245 158 11 / .10); color: #b45309; border: 1px solid rgb(245 158 11 / .20); }
.method-badge--delete { background: rgb(239 68 68  / .10); color: #dc2626; border: 1px solid rgb(239 68 68  / .20); }

/* ── Endpoint blocks ── */
.endpoint-block {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 1rem; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.endpoint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.endpoint-path { font-family: 'Menlo', monospace; color: #0f172a; font-size: 0.875rem; font-weight: 600; }
.endpoint-scope { font-size: 0.75rem; color: #475569; margin-left: auto; }
.endpoint-label {
  font-size: 0.75rem; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0;
}
.endpoint-desc { font-size: 0.875rem; color: #475569; margin: 0; }

/* ── Tables ── */
.docs-table-wrap { overflow: hidden; border-radius: 1rem; border: 1px solid #e2e8f0; overflow-x: auto; }
.docs-table-wrap--bg { background: #f8fafc; }
.docs-table {
  width: 100%; text-align: left; border-collapse: collapse; font-size: 0.875rem;
}
.docs-table thead tr {
  border-bottom: 1px solid #e2e8f0;
  background: rgb(255 255 255 / .80); color: #334155; font-weight: 600;
}
.docs-table th { padding: 1rem; }
.docs-table td { padding: 1rem; color: #475569; }
.docs-table tbody tr + tr { border-top: 1px solid rgb(226 232 240 / .60); }
.docs-table .td-mono { font-family: 'Menlo', monospace; font-size: 0.75rem; }
.docs-table .td-bold { font-weight: 700; color: #475569; }
.docs-table .td-head { color: #0f172a; font-size: 0.75rem; }

/* ── Version / tag badges ── */
.ver-badge {
  font-size: 0.75rem; font-weight: 700;
  padding: 0.125rem 0.5rem; border-radius: 0.375rem; display: inline-block;
}
.ver-badge--blue   { background: rgb(59 130 246 / .10); color: #1d4ed8; border: 1px solid rgb(59 130 246 / .20); }
.ver-badge--green  { background: rgb(16 185 129 / .10); color: #047857; border: 1px solid rgb(16 185 129 / .20); }
.ver-badge--slate  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* ── Changelog timeline ── */
.changelog-timeline {
  position: relative; border-left: 2px solid #e2e8f0;
  margin-left: 1rem; padding-left: 2rem;
  display: flex; flex-direction: column; gap: 3rem;
}
.changelog-entry { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.changelog-dot {
  position: absolute; left: -3rem; top: 0.375rem;
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .10);
}
.changelog-dot--blue  { border: 2px solid #3b82f6; color: #3b82f6; }
.changelog-dot--green { border: 2px solid #10b981; color: #10b981; }
.changelog-dot--slate { border: 2px solid #e2e8f0; color: #475569; }
.changelog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.changelog-date { font-size: 0.75rem; color: #475569; }
.changelog-entry h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0; }
.changelog-entry p  { font-size: 0.875rem; color: #475569; line-height: 1.625; max-width: 42rem; margin: 0; }
.changelog-entry ul {
  font-size: 0.75rem; color: #475569;
  padding-left: 1.25rem; margin: 0;
  display: flex; flex-direction: column; gap: 0.375rem;
}

/* ── Use-case cards ── */
.usecase-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 1.5rem; padding: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.usecase-header { display: flex; align-items: center; gap: 0.75rem; }
.usecase-icon-wrap {
  padding: 0.75rem; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.usecase-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; display: block; margin: 0 0 0.25rem;
}
.usecase-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0; }
.usecase-checklist { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .usecase-checklist { grid-template-columns: repeat(2, 1fr); } }
.usecase-check {
  background: #f8fafc; padding: 1rem;
  border-radius: 0.75rem; border: 1px solid rgb(226 232 240 / .60);
  display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem;
}
.usecase-check-icon { flex-shrink: 0; margin-top: 0.125rem; }
.usecase-check-title { font-weight: 700; color: #334155; display: block; }
.usecase-check-desc { font-size: 0.75rem; color: #475569; margin: 0.25rem 0 0; }

/* ── Role / permission badges ── */
.role-badge {
  font-size: 0.75rem; font-weight: 700;
  padding: 0.125rem 0.625rem; border-radius: 9999px; display: inline-block;
}
.role-badge--green  { background: rgb(16 185 129 / .15); color: #047857; border: 1px solid rgb(16 185 129 / .20); }
.role-badge--blue   { background: rgb(59 130 246 / .15); color: #1d4ed8; border: 1px solid rgb(59 130 246 / .20); }
.role-badge--purple { background: rgb(168 85 247 / .15); color: #7e22ce; border: 1px solid rgb(168 85 247 / .20); }
.role-badge--amber  { background: rgb(245 158 11 / .15); color: #b45309; border: 1px solid rgb(245 158 11 / .20); }
.role-badge--red    { background: rgb(239 68 68  / .15); color: #dc2626; border: 1px solid rgb(239 68 68  / .20); }
.role-badge--indigo { background: rgb(99 102 241 / .15); color: #4338ca; border: 1px solid rgb(99 102 241 / .20); }
.role-badge--teal   { background: rgb(20 184 166 / .15); color: #0f766e; border: 1px solid rgb(20 184 166 / .20); }
.role-badge--slate  { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* ── Roles page patterns ── */
.role-section {
  border-top: 1px solid #e2e8f0; padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.role-section__title { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin: 0; }
.role-section__desc  { font-size: 0.875rem; color: #475569; line-height: 1.625; max-width: 48rem; margin: 0; }
.doc-section { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-section-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.doc-section-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0; }
.doc-section-desc  { font-size: 0.875rem; color: #475569; line-height: 1.625; margin: 0; }

/* ── Inline code in docs ── */
/* Only style inline code — never override code inside a pre block */
.docs-content :not(pre) > code {
  background: #fff; border: 1px solid #e2e8f0;
  padding: 0.125rem 0.375rem; border-radius: 0.375rem;
  font-size: 0.75rem;
  font-family: 'Menlo', 'Fira Code', monospace;
}
.code-blue   { color: #1d4ed8; }
.code-orange { color: #ea580c; }
.code-green  { color: #047857; }
.code-red    { color: #dc2626; }
.code-teal   { color: #0f766e; }
.code-slate  { color: #475569; }
.code-amber  { color: #d97706; }

/* ── Code block component (.cb) ── */
.cb {
  position: relative; margin: 1rem 0;
  border-radius: 0.75rem; border: 1px solid #1e293b;
  background: #0b0f19; font-family: 'Menlo', 'Fira Code', monospace;
  font-size: 0.875rem; overflow: hidden;
  box-shadow: 0 10px 25px -5px rgb(148 163 184 / .20);
}
.cb__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 1rem; border-bottom: 1px solid #1e293b;
  background: #0e1424; font-size: 0.75rem; color: #94a3b8;
}
.cb__dots { display: flex; align-items: center; gap: 0.5rem; }
.cb__dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; }
.cb__dot--red    { background: rgb(239 68 68  / .80); }
.cb__dot--yellow { background: rgb(234 179 8  / .80); }
.cb__dot--green  { background: rgb(34 197 94  / .80); }
.cb__filename { margin-left: 0.5rem; font-weight: 500; color: #cbd5e1; }
.cb__actions { display: flex; align-items: center; gap: 0.5rem; }
.cb__lang {
  padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  background: #1e293b; font-weight: 700; text-transform: uppercase;
  font-size: 10px; color: #60a5fa;
}
.cb__copy-btn {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem; border-radius: 0.375rem;
  background: none; border: none; color: #94a3b8;
  cursor: pointer; font-size: 11px; font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.cb__copy-btn:hover { background: #1e293b; color: #fff; }
.cb__body { padding: 1rem; overflow: auto; max-height: 400px; min-height: 80px; resize: vertical; }
.cb__pre {
  color: #e2e8f0; line-height: 1.625; text-align: left; margin: 0;
}
.cb__pre::selection, .cb__pre *::selection { background: rgb(37 99 235 / .30); }

/* ── Webhook simulator ── */
.sim-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; margin: 1.5rem 0;
}
@media (min-width: 1024px) { .sim-grid { grid-template-columns: 7fr 5fr; } }

.sim-panel {
  background: #0f172a; border: 1px solid #1e293b;
  border-radius: 1rem; padding: 1.5rem;
  display: flex; flex-direction: column;
}
.sim-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.sim-panel-title { font-weight: 800; color: #fff; font-size: 1.125rem; margin: 0; }
.sim-tag {
  font-size: 10px; text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.1em; color: #64748b;
  background: #020617; padding: 0.25rem 0.625rem;
  border-radius: 0.375rem; border: 1px solid #1e293b;
}
.sim-select-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.sim-select-label { font-size: 0.75rem; font-weight: 600; color: #94a3b8; }
.sim-select {
  background: #020617; border: 1px solid #1e293b;
  border-radius: 0.75rem; padding: 0.625rem 1rem;
  font-size: 0.875rem; font-weight: 600; color: #e2e8f0;
  outline: none; cursor: pointer;
}
.sim-select:focus { border-color: #2563eb; }
.sim-desc { font-size: 0.875rem; color: #94a3b8; line-height: 1.625; font-style: italic; margin: 0 0 1rem; }
.sim-btn-row { display: flex; gap: 0.75rem; margin-top: 1rem; }
.sim-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: 0.75rem;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  border: none; transition: background 0.15s;
}
.sim-btn--ghost {
  background: #1e293b; border: 1px solid #1e293b; color: #cbd5e1;
}
.sim-btn--ghost:hover { background: #334155; }
.sim-btn--primary {
  background: #2563eb; color: #fff;
  box-shadow: 0 10px 25px -5px rgb(37 99 235 / .30);
}
.sim-btn--primary:hover { background: #1d4ed8; }

.sim-log-panel {
  background: #080b13; border: 1px solid #1e293b;
  border-radius: 1rem; padding: 1.5rem;
  display: flex; flex-direction: column; min-height: 420px;
}
.sim-log-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1rem;
}
.sim-log-title-row { display: flex; align-items: center; gap: 0.5rem; }
.sim-log-title {
  font-weight: 800; color: #fff; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0;
}
.sim-clear-btn {
  font-size: 10px; font-weight: 700; color: #64748b;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.25rem;
  transition: color 0.15s;
}
.sim-clear-btn:hover { color: #cbd5e1; }
.sim-logs {
  flex: 1; overflow-y: auto; font-family: 'Menlo', monospace;
  font-size: 0.75rem; padding-right: 0.25rem; max-height: 300px;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.sim-footer {
  margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid #1e293b;
  font-size: 10px; color: #64748b; line-height: 1.625;
}
.sim-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: #475569; text-align: center; padding: 5rem 0;
}
.sim-log-item {
  padding: 0.625rem; border-radius: 0.5rem;
  background: rgb(15 23 42 / .60); border: 1px solid #1e293b;
  display: flex; justify-content: space-between; align-items: center;
}
.sim-log-col { display: flex; flex-direction: column; gap: 0.125rem; }
.sim-log-row { display: flex; align-items: center; gap: 0.5rem; }
.sim-log-time { color: #64748b; font-size: 10px; }
.sim-log-event { font-weight: 700; color: #cbd5e1; }
.sim-log-url { font-size: 10px; color: #64748b; }
.sim-status-ok {
  background: rgb(34 197 94 / .10); color: #4ade80;
  border: 1px solid rgb(34 197 94 / .25);
  padding: 0.125rem 0.375rem; border-radius: 0.375rem;
  font-size: 10px; font-weight: 700;
}

/* Webhook flow steps */
.docs-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.docs-step  { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.625rem; font-size: 0.875rem; color: #334155; line-height: 1.5; }

/* Permissions matrix table */
.docs-table--matrix { font-size: 0.8rem; }
.docs-table--matrix th, .docs-table--matrix td { text-align: center; padding: 0.5rem 0.5rem; }
.docs-table--matrix th:first-child, .docs-table--matrix td:first-child { text-align: left; padding-left: 0.875rem; min-width: 180px; max-width: 220px; }
.docs-table--matrix thead tr:first-child th { padding: 0.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.docs-table--matrix thead tr:last-child th { padding: 0.375rem 0.25rem; }
.td-capability { font-size: 0.775rem; color: #334155; line-height: 1.35; }
.td-capability code { font-size: 0.68rem; color: #3b82f6; display: block; margin-top: 1px; }
.td-yes { color: #059669; font-weight: 700; font-size: 0.875rem; }
.td-partial { color: #0369a1; font-weight: 600; font-size: 0.65rem; line-height: 1.3; }
.td-no { color: #cbd5e1; font-size: 0.875rem; }
.td-403 { color: #ef4444 !important; font-size: 0.65rem; font-weight: 700; background: rgb(254 226 226 / .6); border-radius: 3px; padding: 1px 4px; display: inline-block; }

.docs-cta-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: #3b82f6; text-decoration: none; }
.docs-cta-link:hover { color: #1d4ed8; text-decoration: underline; }

/* ── Integration Status Widget (getting-started.html) ── */
#int-status-widget { margin-top: 1.5rem; margin-bottom: 0; }
.isw-panel {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}
/* Form */
.isw-hd { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1rem; }
.isw-hd-icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  background: #eff6ff; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; color: #2563eb;
}
.isw-title { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin: 0 0 0.125rem; }
.isw-sub   { font-size: 0.8125rem; color: #64748b; margin: 0; }
.isw-form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; }
.isw-in {
  flex: 1; min-width: 140px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  padding: 0.5625rem 0.875rem; font-size: 0.875rem; color: #0f172a;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit;
}
.isw-in::placeholder { color: #94a3b8; }
.isw-in:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgb(59 130 246/.1); }
.isw-btn-primary {
  background: #2563eb; color: #fff; border: none;
  padding: 0.5625rem 1.25rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, transform 0.1s; font-family: inherit;
}
.isw-btn-primary:hover   { background: #1d4ed8; }
.isw-btn-primary:active  { transform: scale(0.97); }
.isw-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.isw-err { font-size: 0.8125rem; color: #dc2626; margin: 0.5rem 0 0; display: none; }
/* Progress */
.isw-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.isw-step  { display: flex; align-items: center; gap: 0.625rem; }
.isw-step-dot {
  width: 1.375rem; height: 1.375rem; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid #e2e8f0; display: flex; align-items: center;
  justify-content: center; font-size: 0.6875rem; font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.isw-step-dot--idle    { color: #cbd5e1; }
.isw-step-dot--running {
  color: #2563eb; border-color: #93c5fd; background: #eff6ff;
  animation: isw-pulse 0.9s ease-in-out infinite;
}
.isw-step-dot--ok    { color: #059669; border-color: #6ee7b7; background: #f0fdf4; }
.isw-step-dot--error { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
@keyframes isw-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.55; transform:scale(.85); }
}
.isw-step-lbl        { font-size: 0.875rem; color: #64748b; }
.isw-step-lbl--active { color: #0f172a; font-weight: 600; }
/* Result */
.isw-result-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;
}
.isw-ok-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600;
}
.isw-link-btn {
  background: none; border: none; color: #64748b; font-size: 0.8125rem;
  cursor: pointer; padding: 0; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.isw-link-btn:hover { color: #0f172a; }
.isw-profile { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 0.875rem; }
.isw-avatar {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0; background: #2563eb; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.025em;
}
.isw-profile-name  { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 0.125rem; }
.isw-profile-email { font-size: 0.8125rem; color: #64748b; margin: 0 0 0.5rem; }
.isw-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.isw-tag {
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
  padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.isw-tag--integration { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.isw-tag--buyer       { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.isw-tag--owner       { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; }
.isw-tag--monitor     { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.isw-meta { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.isw-meta-lbl { font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.isw-meta-val { font-size: 0.875rem; color: #334155; }
.isw-wh-section {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}
.isw-wh-head { font-size: 0.8125rem; font-weight: 700; color: #334155; margin: 0 0 0.5rem; }
.isw-wh-none { font-size: 0.875rem; color: #64748b; margin: 0; }
.isw-wh-item {
  background: #fff; border: 1px solid #e2e8f0; border-left-width: 3px;
  border-radius: 0.5rem; padding: 0.625rem 0.875rem; margin-bottom: 0.375rem;
}
.isw-wh-item:last-child { margin-bottom: 0; }
.isw-wh-item--active   { border-left-color: #10b981; }
.isw-wh-item--inactive { border-left-color: #ef4444; }
.isw-wh-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; gap: 0.5rem; }
.isw-wh-name  { font-size: 0.8125rem; font-weight: 700; color: #0f172a; }
.isw-wh-badge { font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 9999px; white-space: nowrap; }
.isw-wh-item--active   .isw-wh-badge { background: #dcfce7; color: #166534; }
.isw-wh-item--inactive .isw-wh-badge { background: #fee2e2; color: #991b1b; }
.isw-wh-url { font-size: 0.75rem; color: #2563eb; font-family: monospace; word-break: break-all; }

/* ── Widget: Mis tags — tabla ── */
.isw-empty { font-size: 0.875rem; color: #64748b; margin: 0; }
.tw-toolbar {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.625rem; flex-wrap: wrap;
}
.tw-search-in {
  flex: 1; min-width: 0; max-width: 22rem;
  padding: 0.4375rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  font-size: 0.8125rem; color: #0f172a; background: #fff;
  outline: none; transition: border-color 0.15s;
}
.tw-search-in:focus { border-color: #2563eb; }
.tw-count { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; margin-left: auto; }
.tw-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
.tw-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-family: inherit; }
.tw-th {
  padding: 0.5625rem 0.75rem; text-align: left;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #94a3b8;
  background: #0f172a; border-bottom: 2px solid #1e293b; white-space: nowrap;
}
.tw-tr td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #334155; background: #fff; transition: background 0.1s; }
.tw-tr:nth-child(even) td { background: #f8fafc; }
.tw-tr--alt td { background: #f8fafc; }
.tw-tr:hover td { background: #eff6ff !important; }
.tw-tr:last-child td { border-bottom: none; }
/* filas especiales — vista por tag */
.tw-tr--unowned td { background: #f8fafc !important; }
.tw-tr--unowned td:first-child { box-shadow: inset 3px 0 0 #cbd5e1; }
.tw-tr--unowned:hover td { background: #f1f5f9 !important; }
.tw-tr--multi td { background: #f0f9ff !important; }
.tw-tr--multi td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }
.tw-tr--multi:hover td { background: #dbeafe !important; }
.tw-td-mono  { font-family: 'Menlo','Monaco',monospace; font-size: 0.75rem; color: #64748b; }
.tw-td-status { font-size: 0.6875rem; font-weight: 700; }
.tw-td-status--active   { color: #166534; }
.tw-td-status--inactive { color: #9ca3af; }
.tw-td-empty { padding: 1.25rem 0.75rem; color: #94a3b8; font-size: 0.875rem; text-align: center; }
.tw-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 0.25rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.tw-pg-btn {
  padding: 0.3125rem 0.625rem; border: 1px solid #e2e8f0; border-radius: 0.375rem;
  background: #fff; color: #475569; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.1s, border-color 0.1s; line-height: 1;
}
.tw-pg-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.tw-pg-btn:disabled { opacity: 0.35; cursor: default; }
.tw-pg-btn--cur { background: #0f172a; color: #fff; border-color: #0f172a; }
.tw-pg-ellipsis { font-size: 0.75rem; color: #94a3b8; padding: 0 0.125rem; }
.tw-filters {
  display: flex; align-items: center; gap: 0.375rem;
  flex-wrap: wrap; margin-bottom: 0.625rem;
}
.tw-filters-lbl { font-size: 0.6875rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.125rem; }
.tw-filter-btn {
  padding: 0.25rem 0.625rem; border: 1px solid #e2e8f0; border-radius: 9999px;
  background: #fff; color: #475569; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s;
  line-height: 1.4;
}
.tw-filter-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.tw-filter-btn--active { background: #0f172a; color: #fff; border-color: #0f172a; }
/* status-specific active tints */
.tw-filter-btn--active[data-status="active"]   { background: #166534; border-color: #166534; }
.tw-filter-btn--active[data-status="inactive"] { background: #64748b; border-color: #64748b; }

/* ── Widget: Crear perfil de integración ── */
.cw-block       { margin-top: 1rem; }
.cw-block-lbl   { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.5rem; }
.cw-fields      { display: flex; flex-direction: column; gap: 0.5rem; }
.cw-fields--row { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
.cw-field-group { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 8rem; }
.cw-field-label { font-size: 0.75rem; font-weight: 600; color: #64748b; }
.cw-select      { cursor: pointer; }
.cw-auth-ok     {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; font-weight: 600; color: #059669;
}
/* Result summary */
.cw-summary      { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.75rem; }
.cw-summary-row  { display: flex; align-items: center; gap: 0.75rem; }
.cw-cred-lbl     { font-size: 0.75rem; font-weight: 700; color: #64748b; width: 4rem; flex-shrink: 0; }
.cw-summary-val  { font-size: 0.875rem; color: #0f172a; font-weight: 600; }

/* ── ISW: Dar acceso a otro usuario ── */
.isw-assign-wrap   { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.isw-assign-toggle { font-size: 0.8125rem; }
.isw-assign-form   { margin-top: 0.75rem; }
.isw-assign-ok     {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; font-weight: 600; color: #059669;
  margin-top: 0.5rem;
}
.isw-assign-ok svg { flex-shrink: 0; }

/* ── Users widget table cells ── */
.tw-td         { padding: 0.5rem 0.75rem; font-size: 0.8125rem; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.tw-td--mono   { font-family: 'Menlo','Monaco',monospace; font-size: 0.75rem; color: #94a3b8; }

/* ── role-badge size modifier ── */
.role-badge--sm { font-size: 10px; }

/* ── form field label ── */
.isw-field-lbl { display:block; font-size:0.8125rem; font-weight:600; color:#334155; margin-bottom:0.375rem; }

/* ── auth-list chevron icon ── */
.auth-list-icon { color:#1d4ed8; flex-shrink:0; margin-top:0.125rem; }

/* ── progress bar widget ── */
.isw-prog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.625rem; }
.isw-prog-label  { font-size:0.8125rem; font-weight:600; color:#334155; }
.isw-prog-track  { height:6px; background:#e2e8f0; border-radius:9999px; overflow:hidden; }
.isw-prog-bar    { height:100%; background:#3b82f6; border-radius:9999px; width:0%; transition:width .25s; }
.isw-prog-steps  { list-style:none; padding:0; margin:0.75rem 0 0; display:flex; flex-direction:column; gap:0.3rem; }

/* ── section separator ── */
.isw-section-sep { margin-top:1.25rem; border-top:1px solid #e2e8f0; padding-top:1rem; }

/* ── assign drawer ── */
.isw-drawer { margin-top:1rem; padding:1rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:0.625rem; }

/* ── scrollable table wrap modifier ── */
.tw-table-wrap--scroll { max-height:240px; overflow-y:auto; overflow-x:auto; }

/* ── selected count line ── */
.isw-sel-count { font-size:0.75rem; color:#64748b; margin:0.375rem 0 0.75rem; }

/* ── button row ── */
.isw-btn-row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }

/* ── response pre ── */
.isw-response-pre { margin-top:0.75rem; font-size:0.78rem; background:#fff; border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.75rem; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }

/* ── CTA group ── */
.docs-cta-group     { margin-top:1rem; display:flex; gap:1.25rem; justify-content:flex-end; flex-wrap:wrap; }
.docs-cta-link--green { color:#059669; }

/* ── matrix group headers ── */
.td-group-header           { text-align:center; }
.td-group-header--provider { border-bottom:2px solid #3b82f6; color:#1e40af; }
.td-group-header--dealer   { border-bottom:2px solid #10b981; color:#065f46; }

/* ── view toggle button group ── */
.tw-btn-group { display:flex; gap:0.375rem; }

/* ── full-width select ── */
.isw-select-full { width:100%; height:auto; padding:0.5rem 0.75rem; cursor:pointer; }

/* ── role-section size modifier ── */
.role-section--lg { gap:1.5rem; }

/* ── doc-section-title size modifier ── */
.doc-section-title--sm { font-size:0.875rem; }

/* ── isw-btn-primary top-margin modifier ── */
.isw-btn-primary--mt { margin-top:0.75rem; }

/* ── tu-user-list container ── */
#tu-user-list { flex-direction:column; gap:0.625rem; }

/* ── member card (JS-rendered) ── */
.tw-member-card     { background:#fff; border:1px solid #e2e8f0; border-radius:0.625rem; padding:0.875rem; }
.tw-member-header   { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.tw-member-email    { font-size:0.875rem; font-weight:700; color:#0f172a; }
.tw-member-name     { font-size:0.8rem; color:#64748b; }
.tw-member-uid      { margin-left:auto; font-size:0.7rem; color:#94a3b8; font-family:monospace; }
.tw-member-tagcount { font-size:0.7rem; font-weight:700; }

/* ── tag pill (JS-rendered) ── */
.tw-tag-pill { font-size:0.7rem; padding:0.15rem 0.5rem; border-radius:0.25rem; background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; font-family:monospace; }

/* ── status text ── */
.tw-status-text { font-size:0.75rem; color:#64748b; }

/* ── role badge inline (structural; color/bg set inline by JS) ── */
.tw-role-badge-inline { font-size:0.625rem; font-weight:700; padding:0.1rem 0.4rem; border-radius:9999px; margin-left:0.25rem; border-width:1px; border-style:solid; }

/* ── empty state italic modifier ── */
.isw-empty--italic { font-style:italic; }