/* omniteacher_com: the site's tokens over Ionic's (the runtime's ionic_css.css, linked first). */
:root {
  --ot-accent: #3d5afe;
  --ot-accent-contrast: #ffffff;
  --ot-bg: #f6f7fb;
  --ot-surface: #ffffff;
  --ot-muted: #5f6475;

  --ion-color-primary: var(--ot-accent);
  --ion-color-primary-contrast: var(--ot-accent-contrast);
  --ion-color-primary-shade: #3650e0;
  --ion-color-primary-tint: #506bfe;
  --ion-background-color: var(--ot-bg);
  --ion-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ot-accent: #8c9eff;
    --ot-accent-contrast: #0b0d17;
    --ot-bg: #0f1117;
    --ot-surface: #181b24;
    --ot-muted: #a3a8b8;
    --ion-color-primary-shade: #7b8be0;
    --ion-color-primary-tint: #98a8ff;
    --ion-text-color: #e8e9ef;
    --ion-item-background: var(--ot-surface);
    --ion-card-background: var(--ot-surface);
    --ion-toolbar-background: var(--ot-surface);
    /* The runtime's Ionic has no dark palette: its stepped colours, from these tokens. */
    --ion-background-color-rgb: 15, 17, 23;
    --ion-text-color-rgb: 232, 233, 239;
    --ion-background-color-step-50: #1a1c22;
    --ion-background-color-step-100: #25272d;
    --ion-background-color-step-150: #303137;
    --ion-background-color-step-200: #3a3c42;
    --ion-background-color-step-250: #45474d;
    --ion-background-color-step-300: #505258;
    --ion-background-color-step-350: #5b5d63;
    --ion-background-color-step-400: #66676d;
    --ion-background-color-step-450: #717278;
    --ion-background-color-step-500: #7c7d83;
    --ion-background-color-step-550: #86888e;
    --ion-background-color-step-600: #919399;
    --ion-background-color-step-650: #9c9da3;
    --ion-background-color-step-700: #a7a8ae;
    --ion-background-color-step-750: #b2b3b9;
    --ion-background-color-step-800: #bdbec4;
    --ion-background-color-step-850: #c7c9cf;
    --ion-background-color-step-900: #d2d3d9;
    --ion-background-color-step-950: #dddee4;
    --ion-text-color-step-50: #dddee4;
    --ion-text-color-step-100: #d2d3d9;
    --ion-text-color-step-150: #c7c9cf;
    --ion-text-color-step-200: #bdbec4;
    --ion-text-color-step-250: #b2b3b9;
    --ion-text-color-step-300: #a7a8ae;
    --ion-text-color-step-350: #9c9da3;
    --ion-text-color-step-400: #919399;
    --ion-text-color-step-450: #86888e;
    --ion-text-color-step-500: #7c7d83;
    --ion-text-color-step-550: #717278;
    --ion-text-color-step-600: #66676d;
    --ion-text-color-step-650: #5b5d63;
    --ion-text-color-step-700: #505258;
    --ion-text-color-step-750: #45474d;
    --ion-text-color-step-800: #3a3c42;
    --ion-text-color-step-850: #303137;
    --ion-text-color-step-900: #25272d;
    --ion-text-color-step-950: #1a1c22;
    --ion-color-step-50: #1a1c22;
    --ion-color-step-100: #25272d;
    --ion-color-step-150: #303137;
    --ion-color-step-200: #3a3c42;
    --ion-color-step-250: #45474d;
    --ion-color-step-300: #505258;
    --ion-color-step-350: #5b5d63;
    --ion-color-step-400: #66676d;
    --ion-color-step-450: #717278;
    --ion-color-step-500: #7c7d83;
    --ion-color-step-550: #86888e;
    --ion-color-step-600: #919399;
    --ion-color-step-650: #9c9da3;
    --ion-color-step-700: #a7a8ae;
    --ion-color-step-750: #b2b3b9;
    --ion-color-step-800: #bdbec4;
    --ion-color-step-850: #c7c9cf;
    --ion-color-step-900: #d2d3d9;
    --ion-color-step-950: #dddee4;
  }
}

.ot-hero {
  padding: 24px 16px 8px;
  max-width: 960px;
  margin: 0 auto;
}
.ot-hero h1 { margin: 0 0 4px; font-size: 1.75rem; }
.ot-hero p { margin: 0; color: var(--ot-muted); }

.ot-controls,
.ot-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 8px;
}

.ot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ot-grid ion-card { margin: 8px; }
.ot-meta { display: flex; gap: 8px; align-items: center; padding: 0 16px 16px; }

.ot-empty,
.ot-status {
  text-align: center;
  color: var(--ot-muted);
  padding: 48px 16px;
}