/* Small, intentional baseline tweaks for readability */
/* Ensure native form controls prefer dark UI where supported (Chrome/Edge/Safari). */
:root { color-scheme: dark; }

/* Reduce "flashbang" native <select> dropdown styling on Windows/Chromium */
select, option {
  background-color: rgb(15 23 42); /* slate-900 */
  color: rgb(226 232 240);        /* slate-200 */
}

html, body {
  height: 100%;
}

a {
  text-decoration: none;
}

/* Better mobile tap targets for buttons/links */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* Ensure the Blazor app can use full height layouts cleanly */
#app {
  min-height: 100vh;
}


/* =========================================================
   Scope Prose Styles (Blazor native section components)
   ========================================================= */
.scope-prose {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.65;
}

.scope-prose h1,
.scope-prose h2,
.scope-prose h3,
.scope-prose h4 {
  margin: 1.25rem 0 0.65rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.scope-prose h2 { font-size: 1.35rem; }
.scope-prose h3 { font-size: 1.15rem; }
.scope-prose h4 { font-size: 1.05rem; }

.scope-prose p { margin: 0.65rem 0; }

.scope-prose ul,
.scope-prose ol {
  margin: 0.65rem 0;
  padding-left: 1.25rem;
}

.scope-prose li { margin: 0.25rem 0; }

.scope-prose a {
  color: rgba(165, 180, 252, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(165, 180, 252, 0.45);
  text-underline-offset: 3px;
}

.scope-prose a:hover {
  text-decoration-color: rgba(165, 180, 252, 0.85);
}

.scope-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0.08rem 0.35rem;
  border-radius: 0.55rem;
}

.scope-code {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 0.9rem 0;
}

.scope-code code {
  background: transparent;
  border: 0;
  padding: 0;
}

.scope-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.9rem 0;
  font-size: 0.92rem;
}

.scope-table th,
.scope-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.55rem 0.6rem;
  vertical-align: top;
}

.scope-table th {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

.scope-panel {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  padding: 1rem;
  margin: 0.9rem 0;
}

.scope-panel-alt {
  background: rgba(255, 255, 255, 0.05);
}

.scope-callout {
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.12);
  border-radius: 1rem;
  padding: 1rem;
  margin: 0.9rem 0 1.1rem;
}


/* --- Mobile ergonomics + overflow handling (phones/tablets) --- */

/* Make long URLs and identifiers behave on narrow screens */
.scope-content a,
.scope-content code,
.scope-content pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pre/code blocks should never blow out the layout */
.scope-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tables: allow horizontal scroll on small screens (service matrices, etc.) */
@media (max-width: 768px) {
  .scope-content table,
  .scope-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scope-content th,
  .scope-content td,
  .scope-table th,
  .scope-table td {
    white-space: nowrap;
  }
}

/* Respect iOS safe areas */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}