@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn,
  a.btn,
  input[type='submit'].btn,
  input[type='button'].btn,
  button.btn {
    @apply inline-flex items-center justify-center gap-2 font-medium no-underline transition-colors duration-150;
    min-height: 1.95rem;
    padding: 0.26rem 0.9rem;
    border-radius: 0.62rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border: 1px solid var(--button-border);
    border-bottom-width: 2px;
    border-bottom-color: var(--button-border-bottom);
    background: var(--button-bg);
    color: var(--button-text);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
  }

  .btn:not(.btn-sm):not(.btn-xs),
  a.btn:not(.btn-sm):not(.btn-xs),
  input[type='submit'].btn:not(.btn-sm):not(.btn-xs),
  input[type='button'].btn:not(.btn-sm):not(.btn-xs),
  button.btn:not(.btn-sm):not(.btn-xs) {
    padding-left: calc(0.9rem + 10px);
    padding-right: calc(0.9rem + 10px);
  }

  .btn:hover,
  a.btn:hover,
  input[type='submit'].btn:hover,
  input[type='button'].btn:hover,
  button.btn:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-border);
    border-bottom-color: var(--button-border-bottom);
    color: var(--button-text);
  }

  .btn:active,
  a.btn:active,
  input[type='submit'].btn:active,
  input[type='button'].btn:active,
  button.btn:active {
    background: var(--button-bg-active);
    border-bottom-width: 1px;
    transform: translateY(1px);
  }

  .btn:focus-visible,
  a.btn:focus-visible,
  input[type='submit'].btn:focus-visible,
  input[type='button'].btn:focus-visible,
  button.btn:focus-visible {
    outline: 2px solid var(--button-focus-outline);
    outline-offset: 2px;
  }

  .btn-primary,
  .btn-colored,
  a.btn-primary,
  a.btn-colored,
  input[type='submit'].btn-primary,
  input[type='submit'].btn-colored,
  input[type='button'].btn-primary,
  input[type='button'].btn-colored,
  button.btn-primary,
  button.btn-colored {
    border-color: var(--button-filled-border) !important;
    border-bottom-color: var(--button-filled-border-bottom) !important;
    border-bottom-width: 2px !important;
    background: linear-gradient(
      180deg,
      var(--button-filled-bg-top) 0%,
      var(--button-filled-bg-mid) 58%,
      var(--button-filled-bg-bottom) 100%
    ) !important;
    color: var(--button-filled-text) !important;
    box-shadow: var(--button-filled-shadow);
  }

  .btn.btn-primary:hover,
  .btn.btn-colored:hover,
  a.btn-primary:hover,
  a.btn-colored:hover,
  input[type='submit'].btn-primary:hover,
  input[type='submit'].btn-colored:hover,
  input[type='button'].btn-primary:hover,
  input[type='button'].btn-colored:hover,
  button.btn-primary:hover,
  button.btn-colored:hover {
    background: linear-gradient(
      180deg,
      var(--button-filled-bg-hover-top) 0%,
      var(--button-filled-bg-hover-mid) 58%,
      var(--button-filled-bg-hover-bottom) 100%
    ) !important;
    border-color: var(--button-filled-border-hover) !important;
    border-bottom-color: var(--button-filled-border-bottom-hover) !important;
    color: var(--button-filled-text) !important;
    box-shadow: var(--button-filled-shadow-hover);
  }

  .btn.btn-primary:active,
  .btn.btn-colored:active,
  a.btn-primary:active,
  a.btn-colored:active,
  input[type='submit'].btn-primary:active,
  input[type='submit'].btn-colored:active,
  input[type='button'].btn-primary:active,
  input[type='button'].btn-colored:active,
  button.btn-primary:active,
  button.btn-colored:active {
    border-bottom-width: 1px !important;
    transform: translateY(1px);
  }

  .btn.btn-success,
  a.btn.btn-success,
  input[type='submit'].btn.btn-success,
  input[type='button'].btn.btn-success,
  button.btn.btn-success {
    border-color: #15803d !important;
    border-bottom-color: #14532d !important;
    border-bottom-width: 2px !important;
    background: #16a34a !important;
    color: #ffffff !important;
  }

  .btn.btn-success:hover,
  a.btn.btn-success:hover,
  input[type='submit'].btn.btn-success:hover,
  input[type='button'].btn.btn-success:hover,
  button.btn.btn-success:hover {
    background: #22c55e !important;
    border-color: #16a34a !important;
    border-bottom-color: #15803d !important;
    color: #ffffff !important;
  }

  .btn.btn-warning,
  a.btn.btn-warning,
  input[type='submit'].btn.btn-warning,
  input[type='button'].btn.btn-warning,
  button.btn.btn-warning {
    border-color: #ca8a04 !important;
    border-bottom-color: #a16207 !important;
    border-bottom-width: 2px !important;
    background: #eab308 !important;
    color: #111827 !important;
  }

  .btn.btn-warning:hover,
  a.btn.btn-warning:hover,
  input[type='submit'].btn.btn-warning:hover,
  input[type='button'].btn.btn-warning:hover,
  button.btn.btn-warning:hover {
    background: #facc15 !important;
    border-color: #eab308 !important;
    border-bottom-color: #ca8a04 !important;
    color: #111827 !important;
  }

  .btn.btn-dangerous,
  a.btn.btn-dangerous,
  input[type='submit'].btn.btn-dangerous,
  input[type='button'].btn.btn-dangerous,
  button.btn.btn-dangerous {
    border-color: #b91c1c !important;
    border-bottom-color: #991b1b !important;
    border-bottom-width: 2px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
  }

  .btn.btn-dangerous:hover,
  a.btn.btn-dangerous:hover,
  input[type='submit'].btn.btn-dangerous:hover,
  input[type='button'].btn.btn-dangerous:hover,
  button.btn.btn-dangerous:hover {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    border-bottom-color: #b91c1c !important;
    color: #ffffff !important;
  }

  .btn-sm {
    min-height: 1.95rem;
    padding: 0.26rem 0.72rem;
    border-radius: 0.62rem;
    font-size: 0.82rem;
  }

  .btn-xs {
    min-height: 1.75rem;
    padding: 0.2rem 0.58rem;
    border-radius: 0.52rem;
    font-size: 0.75rem;
  }

  .btn:disabled,
  .btn[disabled],
  .btn-primary:disabled,
  .btn-colored:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  .flash-message {
    @apply flex items-center gap-2 rounded-md border px-4 py-3 text-sm font-medium shadow-sm animate-fade-in;
  }

  .flash-notice {
    border-color: var(--flash-notice-border);
    border-bottom-color: var(--flash-notice-border-bottom);
    background: linear-gradient(180deg, var(--flash-notice-bg-top) 0%, var(--flash-notice-bg-bottom) 100%);
    color: var(--flash-notice-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 1px 0 rgba(17, 24, 39, 0.04);
  }

  /* Default link styles are overridden by inherited flash text color; restore a clear link affordance */
  .flash-notice a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .flash-notice a:hover {
    color: var(--color-link-hover);
  }

  .flash-alert {
    border-color: var(--flash-alert-border);
    border-bottom-color: var(--flash-alert-border-bottom);
    background: linear-gradient(180deg, var(--flash-alert-bg-top) 0%, var(--flash-alert-bg-bottom) 100%);
    color: var(--flash-alert-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 1px 0 rgba(17, 24, 39, 0.04);
  }

  .flash-success {
    border-color: var(--deck-job-success-border);
    border-bottom-color: var(--deck-job-success-border-bottom);
    background: linear-gradient(180deg, var(--deck-job-success-bg-top) 0%, var(--deck-job-success-bg-bottom) 100%);
    color: var(--deck-job-success-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 1px 0 rgba(17, 24, 39, 0.04);
  }

  .flash-close-btn {
    @apply ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors duration-150;
    border-color: var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
  }

  .flash-close-btn:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-border-bottom);
  }

  .flash-close-btn:active {
    transform: translateY(1px);
  }

  .callout {
    @apply mt-4 flex items-start gap-3 rounded-md border px-4 py-3 text-sm font-medium shadow-sm;
  }

  .callout-icon {
    @apply mt-0.5 h-5 w-5 shrink-0;
  }

  .app-action-row {
    @apply flex flex-wrap items-center gap-2;
  }

  .app-panel {
    @apply rounded-md border p-4 sm:p-6;
    border-color: var(--color-border);
    background: var(--color-surface-strong);
  }

  .app-page-title {
    @apply text-3xl leading-tight sm:text-4xl break-words;
  }

  .app-section-heading {
    @apply text-xl font-bold leading-tight sm:text-2xl;
  }

  .app-stack-row {
    @apply flex flex-col gap-2 sm:flex-row sm:items-center;
  }

  .app-flex-text {
    @apply min-w-0 break-words;
  }

  .app-mono-url {
    @apply font-mono text-center sm:text-left min-w-0 break-all;
  }

  .app-card-meta {
    @apply inline-flex items-center gap-1 flex-wrap text-xs font-medium text-gray-500 sm:flex-nowrap sm:whitespace-nowrap;
  }

  .callout-danger {
    border-color: var(--flash-alert-border);
    border-bottom-color: var(--flash-alert-border-bottom);
    background: linear-gradient(180deg, var(--flash-alert-bg-top) 0%, var(--flash-alert-bg-bottom) 100%);
    color: var(--flash-alert-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 1px 0 rgba(17, 24, 39, 0.04);
  }

  /* Segmented tabs: neutral track, black selected pill (replaces primary/blue tab styling) */
  .segmented-tabs {
    @apply flex w-full flex-wrap rounded-lg p-1 gap-1;
    background: var(--segmented-tabs-bg);
  }

  .segmented-tab {
    @apply inline-flex min-h-[2.5rem] flex-1 min-w-0 items-center justify-center gap-2 rounded-md px-2 py-2 text-center text-sm font-medium no-underline transition-colors sm:px-3;
    color: var(--segmented-tab-text);
  }

  .segmented-tab:visited {
    color: var(--segmented-tab-text);
  }

  .segmented-tab:hover {
    background: var(--segmented-tab-hover-bg);
    color: var(--segmented-tab-hover-text);
  }

  .segmented-tab.segmented-tab-active {
    @apply shadow-sm;
    background: var(--segmented-tab-active-bg);
    color: var(--segmented-tab-active-text);
  }

  .segmented-tab.segmented-tab-active:visited {
    color: var(--segmented-tab-active-text);
  }

  .segmented-tab.segmented-tab-active:hover {
    background: var(--segmented-tab-active-bg);
    color: var(--segmented-tab-active-text);
  }

  .segmented-tab:focus-visible {
    @apply outline outline-2 outline-offset-2 outline-neutral-600;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/*
 * Root + body both use the themed background so short pages never show the browser's
 * default dark canvas below the content (common when html is min-h-screen but body height
 * follows content only).
 */
html {
    background-color: var(--color-bg);
    transition: background-color 180ms ease;
    /*
     * Match body's dynamic viewport height. Using min-h-screen (100vh) here let
     * <html> extend below <body> on mobile Safari, where 100vh (large viewport,
     * toolbar hidden) exceeds 100dvh (current). That protruding strip showed as
     * an extra band at the bottom of the page.
     */
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    transition: background-color 180ms ease, color 180ms ease;
    min-height: 100vh;
    min-height: 100dvh;
}

.rough-annotation {
    mix-blend-mode: multiply;
}

/* multiply washes out yellow highlights on dark backgrounds (e.g. intro hero) */
html[data-theme='dark'] .rough-annotation {
    mix-blend-mode: normal;
}

/* Color palette derived from speedpast logo */
:root {
    --sp-rose: #FEE2E8;
    --sp-lavender: #E8E0FF;
    --sp-dark: #1A1A2E;
    --sp-accent: #DC2626;

    --color-bg: #ffffff;
    --color-text: #111827;
    --color-muted: #4b5563;
    --color-border: #e5e7eb;
    --color-surface: rgba(255, 255, 255, 0.9);
    --color-surface-strong: #ffffff;
    --color-surface-hover: #f3f4f6;
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;

    --button-border: #d1d5db;
    --button-border-bottom: #b6bcc5;
    --button-bg: #ffffff;
    --button-bg-hover: #f9fafb;
    --button-bg-active: #f3f4f6;
    --button-text: #111827;
    --button-focus-outline: rgba(17, 24, 39, 0.15);
    --button-filled-border: #2f3339;
    --button-filled-border-bottom: #1a1d21;
    --button-filled-bg-top: #30343a;
    --button-filled-bg-mid: #24282e;
    --button-filled-bg-bottom: #1a1d22;
    --button-filled-bg-hover-top: #3a3f46;
    --button-filled-bg-hover-mid: #2d3239;
    --button-filled-bg-hover-bottom: #23272e;
    --button-filled-border-hover: #383d45;
    --button-filled-border-bottom-hover: #1f2329;
    --button-filled-text: #ffffff;
    --button-filled-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.42),
      inset 1px 0 0 rgba(255, 255, 255, 0.2),
      inset -1px 0 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(10, 13, 18, 0.32);
    --button-filled-shadow-hover:
      inset 0 2px 0 rgba(255, 255, 255, 0.56),
      inset 1px 0 0 rgba(255, 255, 255, 0.3),
      inset -1px 0 0 rgba(255, 255, 255, 0.24),
      0 1px 0 rgba(10, 13, 18, 0.38);

    --flash-notice-border: #c7d0db;
    --flash-notice-border-bottom: #b3bfcd;
    --flash-notice-bg-top: #f6f8fb;
    --flash-notice-bg-bottom: #eef2f7;
    --flash-notice-text: #1f2937;
    --flash-alert-border: #e6bcbc;
    --flash-alert-border-bottom: #d6a5a5;
    --flash-alert-bg-top: #fdf3f3;
    --flash-alert-bg-bottom: #faecec;
    --flash-alert-text: #7f1d1d;
    --shared-course-banner-border: #bfdbfe;
    --shared-course-banner-border-bottom: #93c5fd;
    --shared-course-banner-bg-top: #eff6ff;
    --shared-course-banner-bg-bottom: #dbeafe;
    --shared-course-banner-text: #1e3a8a;
    --shared-course-banner-link: #1d4ed8;
    --shared-course-banner-link-hover: #1e3a8a;
    --deck-job-progress-border: #c7d0db;
    --deck-job-progress-border-bottom: #b3bfcd;
    --deck-job-progress-bg-top: #f6f8fb;
    --deck-job-progress-bg-bottom: #eef2f7;
    --deck-job-progress-text: #1f2937;
    --deck-job-progress-spinner-duration: 1s;
    --deck-job-progress-border-pulse: #64748b;
    --deck-job-progress-border-bottom-pulse: #475569;
    --deck-job-progress-pulse-overlay: rgba(255, 255, 255, 0.55);
    --deck-job-progress-shadow-rest:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 1px 0 rgba(17, 24, 39, 0.04);
    --deck-job-progress-shadow-pulse:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 0 0 1px rgba(100, 116, 139, 0.18),
      0 2px 10px rgba(15, 23, 42, 0.12);
    --deck-job-progress-spinner: #4f46e5;
    --deck-job-success-border: #86efac;
    --deck-job-success-border-bottom: #4ade80;
    --deck-job-success-bg-top: #f0fdf4;
    --deck-job-success-bg-bottom: #dcfce7;
    --deck-job-success-text: #166534;

    --segmented-tabs-bg: #e5e7eb;
    --segmented-tab-text: #4b5563;
    --segmented-tab-hover-bg: rgba(255, 255, 255, 0.7);
    --segmented-tab-hover-text: #111827;
    --segmented-tab-active-bg: #ffffff;
    --segmented-tab-active-text: #111827;

    --navbar-bg: rgba(255, 255, 255, 0.88);
    --navbar-border: #e5e7eb;
    --navbar-link: #4b5563;
    --navbar-link-hover: #111827;
    --navbar-link-hover-bg: #f3f4f6;
    --navbar-link-active-bg: #111827;
    --navbar-link-active-text: #ffffff;
    --navbar-menu-button-bg: transparent;

    --slide-menu-bg: #ffffff;
    --slide-menu-text: #374151;
    --slide-menu-muted: #6b7280;
    --slide-menu-border: #f3f4f6;
    --slide-menu-link-hover-bg: #f9fafb;

    --theme-toggle-bg: #ffffff;
    --theme-toggle-text: #374151;
    --theme-toggle-border: #d1d5db;
    --theme-toggle-hover-bg: #f3f4f6;

    --user-menu-bg: #ffffff;
    --user-menu-border: #9ca3af;
    --user-menu-text: #111827;

    --public-library-search-input-bg: #ffffff;
    --public-library-search-input-border: #cbd5e1;
    --public-library-search-input-border-focus: #60a5fa;
    --public-library-search-input-text: #111827;
    --public-library-search-input-placeholder: #6b7280;
    --public-library-search-input-focus-ring: rgba(59, 130, 246, 0.2);
    --public-library-search-button-bg: #111827;
    --public-library-search-button-bg-hover: #1f2937;
    --public-library-search-button-text: #ffffff;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --color-bg: #080d1a;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: #334155;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-strong: rgba(255, 255, 255, 0.07);
    --color-surface-hover: rgba(255, 255, 255, 0.11);
    --color-link: #93c5fd;
    --color-link-hover: #bfdbfe;

    --button-border: #475569;
    --button-border-bottom: #334155;
    --button-bg: rgba(255, 255, 255, 0.07);
    --button-bg-hover: rgba(255, 255, 255, 0.11);
    --button-bg-active: rgba(255, 255, 255, 0.15);
    --button-text: #e2e8f0;
    --button-focus-outline: rgba(148, 163, 184, 0.4);
    --button-filled-border: #5b7290;
    --button-filled-border-bottom: #3a4a63;
    --button-filled-bg-top: #46566f;
    --button-filled-bg-mid: #3a4a63;
    --button-filled-bg-bottom: #2f3d54;
    --button-filled-bg-hover-top: #51637f;
    --button-filled-bg-hover-mid: #455573;
    --button-filled-bg-hover-bottom: #3a4a63;
    --button-filled-border-hover: #6a82a3;
    --button-filled-border-bottom-hover: #46566f;
    --button-filled-text: #f8fafc;
    --button-filled-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 1px 0 0 rgba(255, 255, 255, 0.1),
      inset -1px 0 0 rgba(255, 255, 255, 0.08),
      0 1px 0 rgba(2, 6, 23, 0.58);
    --button-filled-shadow-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 1px 0 0 rgba(255, 255, 255, 0.16),
      inset -1px 0 0 rgba(255, 255, 255, 0.14),
      0 1px 0 rgba(2, 6, 23, 0.62);

    --flash-notice-border: #334155;
    --flash-notice-border-bottom: #1e293b;
    --flash-notice-bg-top: rgba(255, 255, 255, 0.07);
    --flash-notice-bg-bottom: rgba(255, 255, 255, 0.02);
    --flash-notice-text: #cbd5e1;
    --flash-alert-border: #7f1d1d;
    --flash-alert-border-bottom: #601616;
    --flash-alert-bg-top: #2b1414;
    --flash-alert-bg-bottom: #1f1111;
    --flash-alert-text: #fecaca;
    --shared-course-banner-border: #1d4ed8;
    --shared-course-banner-border-bottom: #1e40af;
    --shared-course-banner-bg-top: #172554;
    --shared-course-banner-bg-bottom: #10193f;
    --shared-course-banner-text: #dbeafe;
    --shared-course-banner-link: #bfdbfe;
    --shared-course-banner-link-hover: #dbeafe;
    --deck-job-progress-border: #334155;
    --deck-job-progress-border-bottom: #1e293b;
    --deck-job-progress-bg-top: rgba(255, 255, 255, 0.07);
    --deck-job-progress-bg-bottom: rgba(255, 255, 255, 0.02);
    --deck-job-progress-text: #cbd5e1;
    --deck-job-progress-spinner-duration: 1s;
    --deck-job-progress-border-pulse: #94a3b8;
    --deck-job-progress-border-bottom-pulse: #64748b;
    --deck-job-progress-pulse-overlay: rgba(148, 163, 184, 0.35);
    --deck-job-progress-shadow-rest:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(2, 6, 23, 0.45);
    --deck-job-progress-shadow-pulse:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 0 0 1px rgba(148, 163, 184, 0.35),
      0 2px 12px rgba(2, 6, 23, 0.55);
    --deck-job-progress-spinner: #93c5fd;
    --deck-job-success-border: #166534;
    --deck-job-success-border-bottom: #14532d;
    --deck-job-success-bg-top: #10261a;
    --deck-job-success-bg-bottom: #0d1f15;
    --deck-job-success-text: #bbf7d0;

    --segmented-tabs-bg: rgba(255, 255, 255, 0.06);
    --segmented-tab-text: #cbd5e1;
    --segmented-tab-hover-bg: rgba(255, 255, 255, 0.12);
    --segmented-tab-hover-text: #f8fafc;
    --segmented-tab-active-bg: rgba(255, 255, 255, 0.18);
    --segmented-tab-active-text: #f8fafc;

    --navbar-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
    --navbar-border: #334155;
    --navbar-link: #cbd5e1;
    --navbar-link-hover: #f8fafc;
    --navbar-link-hover-bg: rgba(255, 255, 255, 0.12);
    --navbar-link-active-bg: #f8fafc;
    --navbar-link-active-text: #0f172a;
    --navbar-menu-button-bg: rgba(255, 255, 255, 0.06);

    --slide-menu-bg: var(--color-bg);
    --slide-menu-text: #cbd5e1;
    --slide-menu-muted: #94a3b8;
    --slide-menu-border: #334155;
    --slide-menu-link-hover-bg: rgba(255, 255, 255, 0.07);

    --theme-toggle-bg: rgba(255, 255, 255, 0.09);
    --theme-toggle-text: #e2e8f0;
    --theme-toggle-border: #475569;
    --theme-toggle-hover-bg: rgba(255, 255, 255, 0.14);

    --user-menu-bg: var(--color-bg);
    --user-menu-border: #475569;
    --user-menu-text: #e2e8f0;

    --public-library-search-input-bg: rgba(0, 0, 0, 0.25);
    --public-library-search-input-border: #334155;
    --public-library-search-input-border-focus: #93c5fd;
    --public-library-search-input-text: #e2e8f0;
    --public-library-search-input-placeholder: #94a3b8;
    --public-library-search-input-focus-ring: rgba(147, 197, 253, 0.24);
    --public-library-search-button-bg: rgba(255, 255, 255, 0.12);
    --public-library-search-button-bg-hover: rgba(255, 255, 255, 0.18);
    --public-library-search-button-text: #f8fafc;
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

.app-brand-text {
    color: var(--color-text);
}

.app-brand-image-light {
    display: none;
}

html[data-theme='dark'] .app-brand-image-default {
    display: none;
}

html[data-theme='dark'] .app-brand-image-light {
    display: inline-block;
}

.app-navbar {
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    backdrop-filter: blur(4px);
}

.app-nav-link {
    color: var(--navbar-link);
}

.app-nav-link:hover {
    color: var(--navbar-link-hover);
    background: var(--navbar-link-hover-bg);
}

.app-nav-link-active {
    background: var(--navbar-link-active-bg);
    color: var(--navbar-link-active-text);
}

.app-nav-link-active:hover {
    background: var(--navbar-link-active-bg);
    color: var(--navbar-link-active-text);
}

.app-navbar-menu-button {
    color: var(--navbar-link);
    background: var(--navbar-menu-button-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.app-navbar-menu-button:hover {
    color: var(--navbar-link-hover);
    background: var(--navbar-link-hover-bg);
}

.app-navbar-menu-button::-webkit-details-marker {
    display: none;
}

.app-slide-menu {
    background: var(--slide-menu-bg);
    color: var(--slide-menu-text);
}

/* Only show the shadow when the menu is open. While closed the menu sits just
   off the right edge of the viewport, and its blurred shadow would otherwise
   bleed back onto the visible page as a faint strip on the right. */
.app-slide-menu.translate-x-0 {
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.38);
}

.app-slide-menu-close {
    color: var(--slide-menu-muted);
}

.app-slide-menu-close:hover {
    color: var(--slide-menu-text);
}

.app-slide-menu-email {
    color: var(--slide-menu-muted);
}

.app-slide-menu-inline-align {
    padding-left: 0;
    padding-right: 0;
}

.app-slide-menu-section {
    border-top: 1px solid var(--slide-menu-border);
}

.app-slide-menu-link {
    color: var(--slide-menu-text);
}

.app-slide-menu-link:hover {
    background: var(--slide-menu-link-hover-bg);
}

.app-nav-icon {
    opacity: 0.9;
}

html[data-theme='dark'] img.app-nav-icon {
    filter: invert(1) brightness(1.15);
}

.app-nav-link-active img.app-nav-icon {
    opacity: 1;
    filter: invert(1) brightness(1.2);
}

html[data-theme='dark'] .app-nav-link-active img.app-nav-icon {
    filter: none;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--theme-toggle-border);
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-text);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.theme-toggle-btn:hover {
    background: var(--theme-toggle-hover-bg);
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--button-focus-outline);
    outline-offset: 2px;
}

.app-user-menu-dropdown {
    background: var(--user-menu-bg);
    border-color: var(--user-menu-border);
    color: var(--user-menu-text);
}

.app-user-menu-shell {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.app-user-menu-trigger {
    height: 2.25rem;
    width: 2.25rem;
    min-height: 2.25rem;
    min-width: 2.25rem;
    align-self: center;
    border-radius: 9999px;
    overflow: hidden;
}

.app-user-menu-avatar {
    height: 2.25rem;
    width: 2.25rem;
    overflow: hidden;
    border-radius: 9999px;
}

.app-user-menu-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-user-menu-email {
    color: var(--user-menu-text);
}

.app-user-menu-link {
    color: var(--user-menu-text);
}

.app-user-menu-link:hover {
    color: var(--user-menu-text);
}

.public-library-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.public-library-search-input {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--public-library-search-input-border);
    background: var(--public-library-search-input-bg);
    color: var(--public-library-search-input-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.public-library-search-input::placeholder {
    color: var(--public-library-search-input-placeholder);
}

.public-library-search-input:focus-visible {
    outline: none;
    border-color: var(--public-library-search-input-border-focus);
    box-shadow: 0 0 0 3px var(--public-library-search-input-focus-ring);
}

.public-library-search-button {
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: var(--public-library-search-button-bg);
    color: var(--public-library-search-button-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.public-library-search-button:hover {
    background: var(--public-library-search-button-bg-hover);
}

.public-library-search-button:focus-visible {
    outline: 2px solid var(--public-library-search-input-focus-ring);
    outline-offset: 2px;
}

.shared-course-source-banner {
    border: 1px solid var(--shared-course-banner-border);
    border-bottom-color: var(--shared-course-banner-border-bottom);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--shared-course-banner-text);
    background: linear-gradient(180deg, var(--shared-course-banner-bg-top) 0%, var(--shared-course-banner-bg-bottom) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 1px 0 rgba(17, 24, 39, 0.04);
}

.shared-course-source-banner-link {
    color: var(--shared-course-banner-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.shared-course-source-banner-link:hover {
    color: var(--shared-course-banner-link-hover);
}

.deck-job-status-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 1px 0 rgba(17, 24, 39, 0.04);
}

@keyframes deck-job-progress-pulse {
    0%, 100% {
        border-color: var(--deck-job-progress-border);
        border-bottom-color: var(--deck-job-progress-border-bottom);
        box-shadow: var(--deck-job-progress-shadow-rest);
    }

    50% {
        border-color: var(--deck-job-progress-border-pulse);
        border-bottom-color: var(--deck-job-progress-border-bottom-pulse);
        box-shadow: var(--deck-job-progress-shadow-pulse);
    }
}

@keyframes deck-job-progress-bg-pulse {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.deck-job-status-banner--progress {
    position: relative;
    overflow: hidden;
    border-color: var(--deck-job-progress-border);
    border-bottom-color: var(--deck-job-progress-border-bottom);
    color: var(--deck-job-progress-text);
    background: linear-gradient(180deg, var(--deck-job-progress-bg-top) 0%, var(--deck-job-progress-bg-bottom) 100%);
    animation: deck-job-progress-pulse calc(var(--deck-job-progress-spinner-duration) * 2) ease-in-out infinite;
}

.deck-job-status-banner--progress::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--deck-job-progress-pulse-overlay);
    opacity: 0;
    animation: deck-job-progress-bg-pulse calc(var(--deck-job-progress-spinner-duration) * 2) ease-in-out infinite;
    pointer-events: none;
}

.deck-job-status-banner--progress > * {
    position: relative;
    z-index: 1;
}

.deck-job-status-spinner {
    color: currentColor;
}

.deck-job-status-spinner.animate-spin {
    animation-duration: var(--deck-job-progress-spinner-duration);
}

.deck-job-status-banner--success {
    border-color: var(--deck-job-success-border);
    border-bottom-color: var(--deck-job-success-border-bottom);
    color: var(--deck-job-success-text);
    background: linear-gradient(180deg, var(--deck-job-success-bg-top) 0%, var(--deck-job-success-bg-bottom) 100%);
}

.deck-job-status-banner--error {
    border-color: var(--flash-alert-border);
    border-bottom-color: var(--flash-alert-border-bottom);
    color: var(--flash-alert-text);
    background: linear-gradient(180deg, var(--flash-alert-bg-top) 0%, var(--flash-alert-bg-bottom) 100%);
}

html[data-theme='dark'] .shared-course-source-banner,
html[data-theme='dark'] .deck-job-status-banner {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(2, 6, 23, 0.45);
}

/* Centralized dark overrides for common Tailwind light utilities still present in views. */
html[data-theme='dark'] .bg-white {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme='dark'] .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.13) !important;
}

html[data-theme='dark'] .bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme='dark'] .bg-gray-300 {
    background-color: rgba(255, 255, 255, 0.24) !important;
}

/* Keep out-of-cards red state subtle in dark mode. */
html[data-theme='dark'] .bg-red-100 {
    background-color: rgba(185, 28, 28, 0.22) !important;
}

html[data-theme='dark'] .bg-red-50 {
    background-color: rgba(185, 28, 28, 0.14) !important;
}

html[data-theme='dark'] .border-gray-100,
html[data-theme='dark'] .border-gray-200 {
    border-color: #334155 !important;
}

html[data-theme='dark'] .border-red-100,
html[data-theme='dark'] .border-red-200 {
    border-color: rgba(248, 113, 113, 0.34) !important;
}

html[data-theme='dark'] .border-gray-300,
html[data-theme='dark'] .border-gray-400 {
    border-color: #475569 !important;
}

/* Form inputs default to a light background; darken them so they don't glare
   in dark mode. Excludes inputs that carry their own themed styling. */
html[data-theme='dark'] input[type='text']:not(.public-library-search-input),
html[data-theme='dark'] input[type='email'],
html[data-theme='dark'] input[type='password'],
html[data-theme='dark'] input[type='search'],
html[data-theme='dark'] input[type='url'],
html[data-theme='dark'] input[type='tel'],
html[data-theme='dark'] input[type='number'],
html[data-theme='dark'] textarea,
html[data-theme='dark'] select {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

html[data-theme='dark'] input:not(.public-library-search-input)::placeholder,
html[data-theme='dark'] textarea::placeholder {
    color: #94a3b8;
}

html[data-theme='dark'] .text-gray-500 {
    color: #94a3b8 !important;
}

html[data-theme='dark'] .text-gray-600 {
    color: #cbd5e1 !important;
}

html[data-theme='dark'] .text-gray-700,
html[data-theme='dark'] .text-gray-800 {
    color: #e2e8f0 !important;
}

html[data-theme='dark'] .text-gray-900 {
    color: #f8fafc !important;
}

html[data-theme='dark'] .text-blue-500,
html[data-theme='dark'] .text-blue-600 {
    color: #93c5fd !important;
}

html[data-theme='dark'] .text-black {
    color: #e2e8f0 !important;
}

html[data-theme='dark'] .hover\:bg-gray-50:hover {
    background-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme='dark'] .hover\:bg-gray-100:hover {
    background-color: rgba(255, 255, 255, 0.13) !important;
}

html[data-theme='dark'] .hover\:bg-gray-800:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme='dark'] .hover\:text-gray-900:hover {
    color: #f8fafc !important;
}

.tab-audio-icon {
    filter: none;
}

html[data-theme='dark'] .tab-audio-icon {
    filter: invert(1) brightness(1.15);
}

.card-stack-icon {
    filter: none;
}

html[data-theme='dark'] .card-stack-icon {
    filter: invert(1);
}

@keyframes btnShimmerSweep {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.btn-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    animation: btnShimmerSweep 1.8s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-shimmer::after {
        animation: none;
    }

    .deck-job-status-banner--progress,
    .deck-job-status-banner--progress::before {
        animation: none;
    }
}

.hero-gradient {
    background: var(--color-bg);
}

/* Legacy support - redirect to new gradient */
.yellow-gradient {
    background: linear-gradient(135deg, #FEE2E8 0%, #F5E6FF 50%, #E8E0FF 100%);
}

.no-gradient {
    background: white;
}

html[data-theme='dark'] .no-gradient {
    background: #0f172a;
}

.styleguide-theme-compare {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.styleguide-theme-preview {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--color-surface-strong);
}

.styleguide-theme-preview-title {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    background: var(--color-bg);
}

.styleguide-theme-preview-canvas {
    padding: 0.75rem;
    color: var(--color-text);
    background: var(--color-bg);
}

/* Keep light and dark previews stable regardless of the global page theme. */
.styleguide-theme-preview--light {
    --color-bg: #ffffff;
    --color-text: #111827;
    --color-muted: #4b5563;
    --color-border: #e5e7eb;
    --color-surface: rgba(255, 255, 255, 0.9);
    --color-surface-strong: #ffffff;
    --color-surface-hover: #f3f4f6;
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;
    --button-border: #d1d5db;
    --button-border-bottom: #b6bcc5;
    --button-bg: #ffffff;
    --button-bg-hover: #f9fafb;
    --button-bg-active: #f3f4f6;
    --button-text: #111827;
    --button-focus-outline: rgba(17, 24, 39, 0.15);
    --button-filled-border: #2f3339;
    --button-filled-border-bottom: #1a1d21;
    --button-filled-bg-top: #30343a;
    --button-filled-bg-mid: #24282e;
    --button-filled-bg-bottom: #1a1d22;
    --button-filled-bg-hover-top: #3a3f46;
    --button-filled-bg-hover-mid: #2d3239;
    --button-filled-bg-hover-bottom: #23272e;
    --button-filled-border-hover: #383d45;
    --button-filled-border-bottom-hover: #1f2329;
    --button-filled-text: #ffffff;
    --button-filled-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.42),
      inset 1px 0 0 rgba(255, 255, 255, 0.2),
      inset -1px 0 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(10, 13, 18, 0.32);
    --button-filled-shadow-hover:
      inset 0 2px 0 rgba(255, 255, 255, 0.56),
      inset 1px 0 0 rgba(255, 255, 255, 0.3),
      inset -1px 0 0 rgba(255, 255, 255, 0.24),
      0 1px 0 rgba(10, 13, 18, 0.38);
    --flash-notice-border: #c7d0db;
    --flash-notice-border-bottom: #b3bfcd;
    --flash-notice-bg-top: #f6f8fb;
    --flash-notice-bg-bottom: #eef2f7;
    --flash-notice-text: #1f2937;
    --flash-alert-border: #e6bcbc;
    --flash-alert-border-bottom: #d6a5a5;
    --flash-alert-bg-top: #fdf3f3;
    --flash-alert-bg-bottom: #faecec;
    --flash-alert-text: #7f1d1d;
    --shared-course-banner-border: #bfdbfe;
    --shared-course-banner-border-bottom: #93c5fd;
    --shared-course-banner-bg-top: #eff6ff;
    --shared-course-banner-bg-bottom: #dbeafe;
    --shared-course-banner-text: #1e3a8a;
    --shared-course-banner-link: #1d4ed8;
    --shared-course-banner-link-hover: #1e3a8a;
    --deck-job-progress-border: #c7d0db;
    --deck-job-progress-border-bottom: #b3bfcd;
    --deck-job-progress-bg-top: #f6f8fb;
    --deck-job-progress-bg-bottom: #eef2f7;
    --deck-job-progress-text: #1f2937;
    --deck-job-progress-spinner-duration: 1s;
    --deck-job-progress-border-pulse: #64748b;
    --deck-job-progress-border-bottom-pulse: #475569;
    --deck-job-progress-pulse-overlay: rgba(255, 255, 255, 0.55);
    --deck-job-progress-shadow-rest:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 1px 0 rgba(17, 24, 39, 0.04);
    --deck-job-progress-shadow-pulse:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 0 0 1px rgba(100, 116, 139, 0.18),
      0 2px 10px rgba(15, 23, 42, 0.12);
    --deck-job-progress-spinner: #4f46e5;
    --deck-job-success-border: #86efac;
    --deck-job-success-border-bottom: #4ade80;
    --deck-job-success-bg-top: #ecfdf5;
    --deck-job-success-bg-bottom: #dcfce7;
    --deck-job-success-text: #166534;
    --segmented-tabs-bg: #e5e7eb;
    --segmented-tab-text: #4b5563;
    --segmented-tab-hover-bg: rgba(255, 255, 255, 0.7);
    --segmented-tab-hover-text: #111827;
    --segmented-tab-active-bg: #ffffff;
    --segmented-tab-active-text: #111827;
}

.styleguide-theme-preview--dark {
    color-scheme: dark;
    --color-bg: #080d1a;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: #334155;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-strong: rgba(255, 255, 255, 0.07);
    --color-surface-hover: rgba(255, 255, 255, 0.11);
    --color-link: #93c5fd;
    --color-link-hover: #bfdbfe;
    --button-border: #475569;
    --button-border-bottom: #334155;
    --button-bg: rgba(255, 255, 255, 0.07);
    --button-bg-hover: rgba(255, 255, 255, 0.11);
    --button-bg-active: rgba(255, 255, 255, 0.15);
    --button-text: #e2e8f0;
    --button-focus-outline: rgba(148, 163, 184, 0.4);
    --button-filled-border: #5b7290;
    --button-filled-border-bottom: #3a4a63;
    --button-filled-bg-top: #46566f;
    --button-filled-bg-mid: #3a4a63;
    --button-filled-bg-bottom: #2f3d54;
    --button-filled-bg-hover-top: #51637f;
    --button-filled-bg-hover-mid: #455573;
    --button-filled-bg-hover-bottom: #3a4a63;
    --button-filled-border-hover: #6a82a3;
    --button-filled-border-bottom-hover: #46566f;
    --button-filled-text: #f8fafc;
    --button-filled-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 1px 0 0 rgba(255, 255, 255, 0.1),
      inset -1px 0 0 rgba(255, 255, 255, 0.08),
      0 1px 0 rgba(2, 6, 23, 0.58);
    --button-filled-shadow-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 1px 0 0 rgba(255, 255, 255, 0.16),
      inset -1px 0 0 rgba(255, 255, 255, 0.14),
      0 1px 0 rgba(2, 6, 23, 0.62);
    --flash-notice-border: #334155;
    --flash-notice-border-bottom: #1e293b;
    --flash-notice-bg-top: rgba(255, 255, 255, 0.07);
    --flash-notice-bg-bottom: rgba(255, 255, 255, 0.02);
    --flash-notice-text: #cbd5e1;
    --flash-alert-border: #7f1d1d;
    --flash-alert-border-bottom: #601616;
    --flash-alert-bg-top: #2b1414;
    --flash-alert-bg-bottom: #1f1111;
    --flash-alert-text: #fecaca;
    --shared-course-banner-border: #1d4ed8;
    --shared-course-banner-border-bottom: #1e40af;
    --shared-course-banner-bg-top: #172554;
    --shared-course-banner-bg-bottom: #10193f;
    --shared-course-banner-text: #dbeafe;
    --shared-course-banner-link: #bfdbfe;
    --shared-course-banner-link-hover: #dbeafe;
    --deck-job-progress-border: #334155;
    --deck-job-progress-border-bottom: #1e293b;
    --deck-job-progress-bg-top: rgba(255, 255, 255, 0.07);
    --deck-job-progress-bg-bottom: rgba(255, 255, 255, 0.02);
    --deck-job-progress-text: #cbd5e1;
    --deck-job-progress-spinner-duration: 1s;
    --deck-job-progress-border-pulse: #94a3b8;
    --deck-job-progress-border-bottom-pulse: #64748b;
    --deck-job-progress-pulse-overlay: rgba(148, 163, 184, 0.35);
    --deck-job-progress-shadow-rest:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(2, 6, 23, 0.45);
    --deck-job-progress-shadow-pulse:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 0 0 1px rgba(148, 163, 184, 0.35),
      0 2px 12px rgba(2, 6, 23, 0.55);
    --deck-job-progress-spinner: #93c5fd;
    --deck-job-success-border: #166534;
    --deck-job-success-border-bottom: #14532d;
    --deck-job-success-bg-top: #10261a;
    --deck-job-success-bg-bottom: #0d1f15;
    --deck-job-success-text: #bbf7d0;
    --segmented-tabs-bg: rgba(255, 255, 255, 0.06);
    --segmented-tab-text: #cbd5e1;
    --segmented-tab-hover-bg: rgba(255, 255, 255, 0.12);
    --segmented-tab-hover-text: #f8fafc;
    --segmented-tab-active-bg: rgba(255, 255, 255, 0.18);
    --segmented-tab-active-text: #f8fafc;
}

.styleguide-theme-preview--light .bg-white {
    background-color: #ffffff !important;
}

.styleguide-theme-preview--light .bg-gray-50 {
    background-color: #f9fafb !important;
}

.styleguide-theme-preview--light .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

.styleguide-theme-preview--light .bg-gray-200 {
    background-color: #e5e7eb !important;
}

.styleguide-theme-preview--light .bg-gray-300 {
    background-color: #d1d5db !important;
}

.styleguide-theme-preview--light .border-gray-100,
.styleguide-theme-preview--light .border-gray-200 {
    border-color: #e5e7eb !important;
}

.styleguide-theme-preview--light .border-gray-300,
.styleguide-theme-preview--light .border-gray-400 {
    border-color: #d1d5db !important;
}

.styleguide-theme-preview--light .text-gray-500 {
    color: #6b7280 !important;
}

.styleguide-theme-preview--light .text-gray-600 {
    color: #4b5563 !important;
}

.styleguide-theme-preview--light .text-gray-700,
.styleguide-theme-preview--light .text-gray-800 {
    color: #374151 !important;
}

.styleguide-theme-preview--light .text-gray-900 {
    color: #111827 !important;
}

.styleguide-theme-preview--light .text-blue-500,
.styleguide-theme-preview--light .text-blue-600 {
    color: #2563eb !important;
}

.styleguide-theme-preview--light .text-black {
    color: #111827 !important;
}

.styleguide-theme-preview--light .hover\:bg-gray-50:hover {
    background-color: #f9fafb !important;
}

.styleguide-theme-preview--dark .shared-course-source-banner,
.styleguide-theme-preview--dark .deck-job-status-banner {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 1px 0 rgba(2, 6, 23, 0.45);
}

.styleguide-theme-preview--dark .bg-white {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.styleguide-theme-preview--dark .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.09) !important;
}

.styleguide-theme-preview--dark .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.13) !important;
}

.styleguide-theme-preview--dark .bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.styleguide-theme-preview--dark .bg-gray-300 {
    background-color: rgba(255, 255, 255, 0.24) !important;
}

.styleguide-theme-preview--dark .border-gray-100,
.styleguide-theme-preview--dark .border-gray-200 {
    border-color: #334155 !important;
}

.styleguide-theme-preview--dark .border-gray-300,
.styleguide-theme-preview--dark .border-gray-400 {
    border-color: #475569 !important;
}

.styleguide-theme-preview--dark .text-gray-500 {
    color: #94a3b8 !important;
}

.styleguide-theme-preview--dark .text-gray-600 {
    color: #cbd5e1 !important;
}

.styleguide-theme-preview--dark .text-gray-700,
.styleguide-theme-preview--dark .text-gray-800 {
    color: #e2e8f0 !important;
}

.styleguide-theme-preview--dark .text-gray-900 {
    color: #f8fafc !important;
}

.styleguide-theme-preview--dark .text-blue-500,
.styleguide-theme-preview--dark .text-blue-600 {
    color: #93c5fd !important;
}

.styleguide-theme-preview--dark .text-black {
    color: #e2e8f0 !important;
}

.styleguide-theme-preview--dark .hover\:bg-gray-50:hover {
    background-color: #273449 !important;
}

.styleguide-theme-preview--dark .card-stack-icon {
    filter: invert(1);
}

nav.pagination a {
    color: rgb(59 130 246);
    &:hover {
        text-decoration: underline;
    }
}
nav.pagination span {
    margin: 0 0.25rem;
}

form.button_to {
    display: inline;
}

.reorder-card-row,
.reorder-card-row a {
    cursor: grab;
    user-select: none;
}

.reorder-card-row:active,
.reorder-card-row:active a {
    cursor: grabbing;
}

.reorder-card-row {
    transition: background-color 120ms ease, border-color 120ms ease;
}

.reorder-card-row--dragging {
    opacity: 0.55;
}

.reorder-card-move-button {
    /* .btn / .btn-sm supply the button look, hover, press and disabled styles;
       this just keeps both arrows equal width with a comfortable tap target and
       overrides the row's grab cursor. */
    min-width: 2.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    cursor: pointer;
    touch-action: manipulation;
}

.rendered-markdown {
    h1 {
        font-size: 2rem;
        font-weight: 600;
    }
    h2 {
        font-size: 1.5rem;
        font-weight: 500;
    }
    h3 {
        font-size: 1.25rem;
        font-weight: 400;
    }
    p {
        font-size: 1rem;
        font-weight: 400;
        margin: 1rem 0;
    }
    ul {
        list-style-type: disc;
        margin-left: 1.5rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    ol {
        list-style-type: decimal;
        margin-left: 1.5rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    a {
        color: black;
        text-decoration: underline;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}