/* CSS variables are unlayered so they're available to both layers and to
   components that reference them via var(). Custom properties inherit
   naturally regardless of layer ordering. */
:root {
  --theme-transition-duration: 0.3s;
  --text-color: #eee;
  --page-bg: #090019;
  --max-text-width: 50em;

  --sms-max-width: 20em;
  --sms-min-height: 19pt;
  --sms-text-color: var(--text-color);

  /* Svelte MultiSelect */
  --sms-options-bg: var(--page-bg);
  --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
  --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
  --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
  --border-radius: 3pt;

  /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
     These must exceed Threlte HTML overlays, which use very high z-index values. */
  --z-index-overlay-controls: 100000000;
  --z-index-overlay-nav: 100000001;
  --z-index-overlay-dialog: 100000002;
  --z-index-overlay-options: 100000003;
}

/* App-shell styles: page layout, typography, headings, navigation.
   These are only needed by the standalone matterviz demo site.
   When embedded in a host framework (Dash/Mantine, React, etc.),
   the host's unlayered CSS automatically takes precedence. */
@layer matterviz-shell {
  /* Targeted theme transitions for performance */
  :where(body, main, button, a, code, kbd, pre, blockquote, textarea, table, input),
  :where(select, label, .theme-control, .toc, svg, path, circle, rect, text),
  :where(.info-pane, .pane-header, .pane-content, .close-button),
  :where(nav > a),
  :where(.theme-control, .theme-control label, .theme-control select) {
    transition:
      background-color var(--theme-transition-duration) ease,
      color var(--theme-transition-duration) ease,
      border-color var(--theme-transition-duration) ease,
      fill var(--theme-transition-duration) ease,
      stroke var(--theme-transition-duration) ease,
      box-shadow var(--theme-transition-duration) ease;
  }
  body {
    background: var(--page-bg);
    padding: 5vh 3vw 3vh;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    margin: auto;
    color: var(--text-color);
    line-height: 1.5;
    /* Sticky footer: footer stays at bottom when content is short */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
  }
  main {
    margin: auto;
    width: 100%;
    max-width: var(--max-text-width);
    container-type: inline-size;
    flex: 1; /* Grow to fill available space (sticky footer) */
  }
  a {
    color: var(--accent-color, cornflowerblue);
    text-decoration: none;
  }
  a:hover {
    color: var(--accent-hover-color, orange);
  }
  blockquote {
    border-left: 3pt solid var(--accent-color, cornflowerblue);
    padding: 3pt 7pt;
    background: rgba(255, 255, 255, 0.2);
    margin: 1em 0;
  }
  blockquote p:first-child {
    margin-top: 0;
  }
  blockquote p:last-child {
    margin-bottom: 0;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: 100px;
  }
  :where(h1, h2, h3, h4, h5, h6):target {
    color: var(--accent-color, cornflowerblue);
  }
  body main > :where(h1, h2, h3, h4, h5, h6) {
    text-align: center;
  }
  /* style heading anchors added by heading_anchors attachment from svelte-multiselect */
  :where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
    transition: 0.3s;
    margin-left: 4pt;
    opacity: 0;
  }
  :where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
    opacity: 1;
  }
  .full-bleed {
    --margin: 5vw;
    width: calc(100vw - 2 * var(--margin)) !important;
    margin-left: calc(-50vw + 50% + var(--margin));
    max-width: none !important;
  }
  .bleed-1400 {
    --margin: 5vw;
    width: min(1400px, calc(100vw - 2 * var(--margin))) !important;
    margin-left: calc(-50vw + 50% + max(var(--margin), (100vw - 1400px) / 2));
    max-width: none !important;
  }
  .copy-btn {
    position: absolute;
    top: 9pt;
    right: 9pt;
    background: var(--btn-bg);
    color: var(--btn-color);
  }
}

/* Component base styles: form controls, tables, code blocks.
   MatterViz components (Structure, ConvexHull, plots, etc.) depend on
   these for consistent appearance. Also layered so host frameworks
   can override if needed, but these target elements that typically
   only appear inside MatterViz component trees. */
@layer matterviz-components {
  button,
  a.btn {
    color: var(--text-color);
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    padding: 2pt 4pt;
  }
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  code,
  kbd {
    overflow-wrap: break-word;
    padding: 1pt 3pt;
    border-radius: var(--border-radius);
    background-color: var(--code-bg);
  }
  kbd {
    font-size: larger;
  }
  pre code {
    background-color: transparent;
    display: inline-block;
    padding: 0;
    width: 100%;
  }
  pre {
    position: relative;
    border-radius: var(--border-radius);
    font-size: 0.95em;
    background-color: var(--pre-bg);
    padding: 1ex 1em;
    overflow-x: auto;
  }
  textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    box-sizing: border-box;
    margin: 1em auto;
  }
  /* Theme-aware form controls (works consistently in notebooks and VSCode/Cursor webviews) */
  :is(
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
    textarea,
    select
  ) {
    background-color: var(--surface-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2px 6px;
  }
  :is(
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
    textarea,
    select
  ):focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
  }
  :is(input, textarea)::placeholder {
    color: var(--text-color-muted);
  }
  select option {
    background-color: var(--surface-bg);
    color: var(--text-color);
  }
  /* Modern flat input styling — only reset border for non-text inputs */
  input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
    border: none;
  }
  input[type='number'] {
    min-width: 40px;
    width: auto;
  }
  input[type='color'] {
    border: none;
    padding: 0;
    outline: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
  }
  input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type='color']::-webkit-color-swatch {
    border: none;
  }
  table {
    display: block;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
  }
  table :is(td, th) {
    border: 1px solid var(--border-color, gray);
    padding: 3pt 12pt;
  }
  table.roomy :is(td, th) {
    padding: 5pt 9pt;
  }
  tbody tr:nth-child(odd) {
    background: color-mix(in hsl, var(--page-bg, black), var(--text-color) 2%);
  }
  :where(ul.selected > li button, button.remove-all) {
    background-color: transparent !important;
  }
}