:root {
    /* Material 3 dark scheme tokens (example palette) */
    --md-sys-color-primary: #b8c3ff;
    --md-sys-color-on-primary: #1f2a60;
    --md-sys-color-primary-container: #3c4aa3;
    --md-sys-color-on-primary-container: #dee1ff;

    --md-sys-color-secondary: #c6c4dd;
    --md-sys-color-on-secondary: #2f2f42;
    --md-sys-color-secondary-container: #444559;
    --md-sys-color-on-secondary-container: #e3e1f9;

    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #4a2532;
    --md-sys-color-tertiary-container: #633b47;
    --md-sys-color-on-tertiary-container: #ffd9e3;

    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-surface-variant: #44464f;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-surface-container: #1f2126;

    --md-sys-color-outline: #91919a;
    --md-sys-color-outline-variant: #44464f;
    --md-sys-color-inverse-surface: #e2e2e9;
    --md-sys-color-inverse-on-surface: #2f3036;

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 32px;
    --radius: 12px;
    /* Accent for French words (audio-integrated) */
    --fr-accent: #aee9ff;
  }

  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
  }
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100dvh;
  }
  @media (max-width: 729px) {
    .layout {
      grid-template-columns: 1fr;
    }
  }
  .content {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
  }

  md-top-app-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--md-sys-color-surface);
  }

  /* App top bar (MD3-inspired) */
  .app-top-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .app-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 38px;
  }
  .app-bar-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
  }
  .app-bar-title {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }
  .app-bar-title a {
    color: inherit;
    text-decoration: none;
  }
  .icon-button {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #menu-button {
    display: none;
  }
  @media (max-width: 729px) {
    #menu-button {
      display: inline-flex;
    }
  }
  .icon-button:hover {
    background: color-mix(in oklab, var(--md-sys-color-primary) 18%, transparent);
  }
  .icon-button:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
  }


  main {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-5) clamp(16px, 4vw, 56px);
    background: var(--md-sys-color-surface);
  }

  /*.section {
    display: grid;
    gap: var(--space-4);
  }*/
  .section h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }
  .section p.helper {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
  }

  .table-card {
    max-width: 100%;
  }

  .md-table {
    border-collapse: collapse;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--radius);
    overflow: clip;
  }
  .md-table thead th {
    text-align: left;
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in oklab, var(--md-sys-color-surface-container) 85%, var(--md-sys-color-on-surface) 15%);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .md-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .md-table tbody td.audio:hover {
    background: color-mix(in oklab, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-on-surface) 8%);
  }

  footer.nav-cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    padding: var(--space-5) clamp(16px, 4vw, 56px);
    background: var(--md-sys-color-surface);
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }
  @media (min-width: 720px) {
    footer.nav-cards {
      grid-template-columns: 1fr 1fr;
    }
  }
  .nav-card {
    cursor: pointer;
    user-select: none;
  }
  .nav-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .nav-meta {
    display: grid;
    gap: 2px;
  }
  .nav-label {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .nav-title {
    font-weight: 600;
  }

  /* Bottom nav text alignment */
  #prevCard .nav-card-content {
    justify-content: flex-start;
  }
  #prevCard .nav-meta {
    text-align: left;
  }
  #nextCard .nav-meta {
    flex: 1; /* stretch so text can align to the card's right edge */
    text-align: right;
  }

  /* Drawer tweaks */
  md-drawer {
    --md-navigation-drawer-container-color: var(--md-sys-color-surface);
    --md-navigation-drawer-content-color: var(--md-sys-color-on-surface);
    --md-navigation-drawer-active-indicator-color: var(--md-sys-color-primary);
    width: 250px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }
  @media (max-width: 729px) {
    md-drawer {
      position: fixed;
      z-index: 100;
    }
    md-drawer:not([opened]) {
      display: none;
    }
  }
  .drawer-header {
    padding: var(--space-5) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);        
  }
  .drawer-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    padding-left: 16px;
  }
  .drawer-subtitle {
    margin: 2px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    padding-left: 16px;
  }

  a.reset {
    color: inherit;
    text-decoration: none;
  }

  h1 {
    margin-top: 0;
  }
  /* Rounded pill-style navigation items like in screenshot */
  md-list.drawer-nav {
    padding: var(--space-5);
    margin-left: 20px;
  }
  md-list.drawer-nav a.reset {
    display: block;
    border-radius: 9999px;
    margin: 4px 8px;
    padding: 8px 16px;
  }
  md-list.drawer-nav a.reset:hover {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -2px;
  }
  md-list.drawer-nav a.reset[aria-current="page"],
  md-list.drawer-nav a.reset.active {
    background: color-mix(in oklab, var(--md-sys-color-primary) 22%, transparent);
  }

  /* French word accent color */
  .fr,
  [lang="fr"] {
    color: var(--fr-accent);
    font-weight: 600;
  }
  .wavy-border {
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20"><path d="M0,10 Q10,0 20,10 T40,10" fill="transparent" stroke="purple" stroke-width="2"/></svg>') repeat-x;
  }
  .translation {
    font-style: italic;
  }

.audio-message {
  display: none; align-items: center; gap: 12px; padding: 16px 24px; background: var(--md-sys-color-surface-container); border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin-bottom: 20px;
}

md-list-item {
    --md-list-item-one-line-container-height: 56px;
    --md-list-item-leading-space: 24px;
    --md-list-item-trailing-space: 24px;
}
.menu {
    margin-left: 12px;
}
.horizontal-header {
    background: color-mix(in oklab, var(--md-sys-color-surface-container) 85%, var(--md-sys-color-on-surface) 15%);
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div.audio {
  display: inline-block;
  padding: 4px;
}

div.audio:hover {
  background: color-mix(in oklab, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-on-surface) 8%);
}
.translation, .w {
  pointer-events: none;
}
.audio-message-desktop {
  margin-bottom: 10px;
}
.paragraph {
  margin: 14px 0;
}