/*
 * Portal visual tokens for Stoplight Elements docs (Direct v2 / Reseller v1).
 * Token source: portal src/app/globals.css (copied values; not imported).
 * Interactive color uses portal blue-600 (#2271ee), not portal --primary (#1a1a1a).
 * Dark experiment inverts the same palette via html[data-theme="dark"].
 * Do not use Elements bp3-dark (unreadable contrast).
 */

:root,
html[data-theme="light"] {
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --secondary: #f5f5f5;
  --muted-foreground: #727272;
  --border: #e6e6e6;
  --dark-50: #fafafa;
  --dark-100: #f5f5f5;
  --dark-200: #e6e6e6;
  --dark-400: #a3a3a3;
  --dark-500: #727272;
  --dark-700: #404040;
  --dark-800: #272727;
  --dark-900: #1a1a1a;
  --dark-950: #0c0c0c;
  --blue-50: #eff7ff;
  --blue-400: #5eb0fc;
  --blue-600: #2271ee;
  --blue-950: #162955;
  --red-400: #fb6e6e;
  --red-600: #e02222;
  --radius: 0.5rem;
  --primary: #2271ee;
  --primary-foreground: #fafafa;
  --primary-tint: #eff7ff;
  --destructive: #e02222;
  --code-bg: #f5f5f5;
  --code-fg: #1a1a1a;
  --code-border: #e6e6e6;
  --sidebar-bg: #ffffff;
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --color-canvas: var(--background);
  --color-canvas-pure: var(--card);
  --color-canvas-tint: var(--muted);
  --color-canvas-dialog: var(--card);
  --color-text: var(--foreground);
  --color-text-muted: var(--muted-foreground);
  --color-text-light: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-primary-tint: var(--primary-tint);
  --color-on-primary: var(--primary-foreground);
  --color-border: var(--border);
  --font-ui: var(--font-sans);
  --font-prose: var(--font-sans);
  --font-code: var(--font-mono);
}

html[data-theme="dark"] {
  --background: #0c0c0c;
  --foreground: #fafafa;
  --card: #1a1a1a;
  --muted: #272727;
  --secondary: #272727;
  --muted-foreground: #a3a3a3;
  --border: #404040;
  --primary: #5eb0fc;
  --primary-foreground: #0c0c0c;
  --primary-tint: #162955;
  --destructive: #fb6e6e;
  --code-bg: #272727;
  --code-fg: #fafafa;
  --code-border: #404040;
  --sidebar-bg: #1a1a1a;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

elements-api {
  display: block;
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  --color-canvas: var(--background);
  --color-canvas-pure: var(--card);
  --color-canvas-tint: var(--muted);
  --color-canvas-dialog: var(--card);
  --color-text: var(--foreground);
  --color-text-muted: var(--muted-foreground);
  --color-text-light: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-primary-tint: var(--primary-tint);
  --color-on-primary: var(--primary-foreground);
  --color-border: var(--border);
  --font-ui: var(--font-sans);
  --font-prose: var(--font-sans);
  --font-code: var(--font-mono);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

elements-api a {
  color: var(--primary);
}

elements-api button,
elements-api [role="button"],
elements-api a,
elements-api select,
elements-api summary,
elements-api [type="button"],
elements-api [type="submit"],
elements-api [type="reset"] {
  cursor: pointer;
}

/* Inline identifier tokens: spans, not <code>, so Elements does not promote them to CodeViewer. */
.docs-inline-token {
  display: inline;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  line-height: inherit;
  white-space: nowrap;
}

/* Backstop if residual <code> remains in prose (Mosaic otherwise paints a block). */
elements-api p code,
elements-api li code,
elements-api td code,
elements-api dd code,
elements-api th code,
elements-api h1 code,
elements-api h2 code,
elements-api h3 code,
elements-api h4 code,
elements-api h5 code,
elements-api h6 code {
  display: inline !important;
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  line-height: inherit;
  white-space: break-spaces;
  box-shadow: none !important;
  width: auto !important;
  max-width: 100%;
}

html[data-theme="dark"] elements-api img[src*="structurely-logo"] {
  filter: invert(1);
}

:host-context(html[data-theme="dark"]) img[src*="structurely-logo"] {
  filter: invert(1);
}

.docs-content-with-search {
  padding-top: 0 !important;
}

.docs-search-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 1rem 0;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.docs-search {
  position: relative;
  max-width: 40rem;
  margin: 0;
}

.docs-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.docs-search-input::placeholder {
  color: var(--muted-foreground);
}

.docs-search-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.docs-search-results {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  max-height: 16rem;
  overflow-y: auto;
}

.docs-search-result {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  padding: 0.5rem 0.75rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.docs-search-result:last-child {
  border-bottom: 0;
}

.docs-search-result:hover,
.docs-search-result:focus {
  background: var(--muted);
}

.docs-search-result-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.docs-search-result-summary {
  display: block;
  font-size: 0.875rem;
}

.docs-operation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.docs-operation-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--card);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
}

.docs-operation-action:hover {
  border-color: var(--dark-400);
  background: var(--muted);
  color: var(--foreground);
}

.docs-operation-action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.docs-operation-action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.docs-operation-action svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.docs-operation-action-status {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1rem;
}

.docs-markdown-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
  background: rgba(12, 12, 12, 0.56);
}

.docs-markdown-modal-backdrop[hidden] {
  display: none;
}

.docs-markdown-modal {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1.5rem 4rem rgba(12, 12, 12, 0.28);
}

.docs-markdown-modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.docs-markdown-modal-header h2 {
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.docs-markdown-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}

.docs-markdown-modal-close:hover {
  border-color: var(--border);
  background: var(--muted);
}

.docs-markdown-modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.docs-markdown-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.docs-markdown-modal-status {
  flex: 0 0 auto;
  padding: 1rem 1.5rem 0;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.docs-markdown-modal-status:empty {
  display: none;
}

.docs-markdown-modal-content {
  flex: 1 1 auto;
  min-height: 12rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--muted);
  color: var(--foreground);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.docs-markdown-modal-content:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

html[data-theme="dark"] .docs-search-input {
  border-color: var(--border);
}