@charset "UTF-8";@layer legacy {.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
}.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
}@media (max-width: 768px) {
  .modal {
    width: 90%;
  }
}
}@layer tokens {
  :root {
    /* Primitive palette — identical to the former App.css :root values */
    --brand: #449ac2;
    --theme: #6f6259;
    --accent: #b0a96f;
    --light: #ffffff;
    --dark: #3c3c3c;
    --error-bg: darkred;
    --error-text: red;
    --terracotta: #c8623f;

    /* Semantic aliases for new student UI */
    --color-action: var(--brand);
    --color-action-hover: var(--accent);
    --color-on-action: var(--light);
    --color-surface: var(--light);
    --color-text: var(--dark);
    --color-disabled: var(--dark);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --z-base: 1;
    --z-header: 10;
    --z-overlay: 100;
    --z-toast: 999;
    --font-sans: 'Poppins', 'Avenir', 'Helvetica', sans-serif;

    /* ----------------------------------------------------------------
     * LearnCraft Design System v2.1 — student v2 surfaces.
     *
     * Namespaced `--lcs-` on purpose. Legacy stylesheets reference
     * undefined generic names (--color-primary, --color-border,
     * --color-danger, --color-text-muted, --color-gray-lighter, …) that
     * currently resolve to their inline fallbacks. Unprefixed additions
     * here would silently restyle those components. Add tokens; never
     * change the values above.
     * ---------------------------------------------------------------- */

    /* Color */
    --lcs-color-action: #449ac2;
    --lcs-color-action-hover: #2672a0;
    --lcs-color-on-action: #ffffff;
    --lcs-color-page: #f0ede6;
    --lcs-color-surface: #ffffff;
    --lcs-color-surface-dark: #1c2232;
    --lcs-color-on-surface-dark: #ffffff;
    --lcs-color-ink: #3c3c3c;
    --lcs-color-muted: #6f6259;
    --lcs-color-placeholder: #9a9086;
    --lcs-color-steel: #b8b0a0;
    --lcs-color-label: #b0a96f;
    --lcs-color-on-label: #6b673a;
    --lcs-color-error: #b83232;
    --lcs-color-success: #4e6b41;
    --lcs-color-warning: #c99b20;
    --lcs-color-warning-ink: #8a6a11;
    /* The wheel watermark on Deep Navy (`--lcs-color-surface-dark`) — a
     * muted blue between the navy and the full-saturation action blue, so
     * it reads as a texture rather than a competing accent. */
    --lcs-color-brandmark-on-dark: #3d5c8a;

    /* Surface tints */
    --lcs-tint-action: rgba(68, 154, 194, 0.12);
    --lcs-tint-hover: rgba(68, 154, 194, 0.08);
    --lcs-tint-row-selected: rgba(68, 154, 194, 0.06);
    --lcs-tint-label-subtle: rgba(176, 169, 111, 0.1);
    --lcs-tint-label: rgba(176, 169, 111, 0.18);
    --lcs-tint-label-strong: rgba(176, 169, 111, 0.3);
    --lcs-tint-warning: rgba(201, 155, 32, 0.16);
    --lcs-tint-error: rgba(184, 50, 50, 0.12);
    --lcs-tint-success: rgba(78, 107, 65, 0.12);

    /* Lines */
    --lcs-border-hairline: 0.5px;
    --lcs-divider: rgba(60, 60, 60, 0.08);
    --lcs-border-card: rgba(60, 60, 60, 0.13);
    --lcs-border-control: rgba(60, 60, 60, 0.25);
    --lcs-border-checkbox: rgba(60, 60, 60, 0.3);
    --lcs-toggle-off: rgba(60, 60, 60, 0.22);

    /* Ink on dark surfaces */
    --lcs-on-dark-12: rgba(255, 255, 255, 0.12);
    --lcs-on-dark-25: rgba(255, 255, 255, 0.25);
    --lcs-on-dark-45: rgba(255, 255, 255, 0.45);
    --lcs-on-dark-60: rgba(255, 255, 255, 0.6);
    --lcs-on-dark-75: rgba(255, 255, 255, 0.75);
    --lcs-on-dark-85: rgba(255, 255, 255, 0.85);

    /* Translucent white overlays on the Celestial Blue action surface
     * itself (the app header bar), as opposed to on Deep Navy above. */
    --lcs-on-action-20: rgba(255, 255, 255, 0.2);
    --lcs-on-action-30: rgba(255, 255, 255, 0.3);

    /* Space */
    --lcs-space-1: 4px;
    --lcs-space-2: 6px;
    --lcs-space-3: 8px;
    --lcs-space-4: 10px;
    --lcs-space-5: 12px;
    --lcs-space-6: 14px;
    --lcs-space-7: 16px;
    --lcs-space-8: 20px;
    --lcs-space-9: 24px;
    --lcs-space-10: 28px;
    --lcs-space-11: 48px;

    /* Radius */
    --lcs-radius-sm: 6px;
    --lcs-radius-md: 8px;
    --lcs-radius-lg: 10px;
    --lcs-radius-xl: 14px;
    --lcs-radius-pill: 999px;

    /* Elevation */
    --lcs-shadow-lift: 0 2px 8px rgba(60, 60, 60, 0.1);
    --lcs-shadow-popover: 0 8px 24px rgba(60, 60, 60, 0.12);
    --lcs-shadow-menu: 0 8px 24px rgba(60, 60, 60, 0.18);

    /* Motion */
    --lcs-motion-micro: 180ms;
    --lcs-motion-panel: 320ms;
    --lcs-motion-load: 600ms;
    --lcs-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Layout — breakpoints are never tokens; use literal 480px / 768px */
    --lcs-max-width: 1240px;
    --lcs-page-pad: 24px;
    --lcs-page-pad-narrow: 16px;
    --lcs-page-pad-bottom: 140px;
    --lcs-control-height: 44px;
    --lcs-control-height-sm: 40px;
    --lcs-control-border: 1.5px;

    /* Rendered height of the `AppHeader` bar: a control-height (44px) nav
     * row inside space-6 (14px) vertical padding = 72px. `AppHeader.root`
     * holds itself to this as a min-height, and full-viewport screens like
     * `TextQuizV2` subtract it from 100dvh so they fill exactly the space
     * the chrome leaves behind. Below 768px the header's padding steps
     * down to space-4 around a control-height-sm (40px) account trigger —
     * the media query at the foot of this layer switches the token to
     * match (60px). */
    --lcs-app-header-height: calc(
      var(--lcs-control-height) + 2 * var(--lcs-space-6)
    );

    /* Height of the fixed mobile `TabBar` (icon + label + its own vertical
     * padding), excluding the safe-area inset it also pads itself with.
     * Home reserves this on mobile via `.homeShell` padding so the last
     * row isn't covered. `--lcs-mobile-tabbar-offset` stays 0 off Home
     * (no bar), which is what FinderBottomBar / quiz 100dvh math expect. */
    --lcs-tab-bar-height: 76px;
    --lcs-mobile-tabbar-offset: 0px;

    /* Typography */
    /* Nunito Sans only. Avenir was dropped: it is a system font on macOS and
     * iOS but absent elsewhere, so listing it first served two different
     * typefaces depending on the platform. */
    --lcs-font-sans:
      'Nunito Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
    --lcs-text-display: 40px;
    --lcs-text-display-mobile: 28px;
    --lcs-text-h1: 28px;
    --lcs-text-h2: 24px;
    --lcs-text-h3: 18px;
    --lcs-text-body: 16px;
    --lcs-text-control: 15px;
    --lcs-text-action: 14px;
    --lcs-text-caption: 13px;
    --lcs-text-caption-mobile: 12px;
    --lcs-text-chip: 12px;
    --lcs-text-eyebrow: 11px;
    --lcs-text-badge: 10px;
    --lcs-weight-regular: 400;
    --lcs-weight-medium: 500;
    --lcs-weight-bold: 900;
    --lcs-tracking-eyebrow: 0.08em;
    --lcs-tracking-wordmark: 0.04em;
    --lcs-line-body: 1.6;
    --lcs-line-tight: 1.3;
    --lcs-line-display: 1.1;

    /* Focus — never removed */
    --lcs-focus-ring: 2px solid #449ac2;
    --lcs-focus-offset: 3px;

    /* Stacking, slotted against the --z-* scale above */
    --lcs-z-popover: 100;
    --lcs-z-menu: 110;
    --lcs-z-bottom-bar: 120;
    /* Modal scrims sit above every persistent chrome layer, tab bar included. */
    --lcs-z-modal: 130;
  }

  /* Mobile `AppHeader`: space-4 (10px) vertical padding around the 40px
   * account trigger (the centered nav is hidden below 768px) = 60px. */
  @media (max-width: 768px) {
    :root {
      --lcs-app-header-height: calc(
        var(--lcs-control-height-sm) + 2 * var(--lcs-space-4)
      );
    }
  }
}
@layer legacy {body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', 'Avenir', 'Helvetica', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
}
@layer primitives {._root_utxc5_1 {
  flex: none;
  vertical-align: middle;
}._inherit_utxc5_6 {
  color: inherit;
}._action_utxc5_10 {
  color: var(--lcs-color-action);
}._onAction_utxc5_14 {
  color: var(--lcs-color-on-action);
}._muted_utxc5_18 {
  color: var(--lcs-color-muted);
}._label_utxc5_22 {
  color: var(--lcs-color-label);
}._onLabel_utxc5_26 {
  color: var(--lcs-color-on-label);
}._steel_utxc5_30 {
  color: var(--lcs-color-steel);
}._onDark_utxc5_34 {
  color: var(--lcs-color-on-surface-dark);
}._error_utxc5_38 {
  color: var(--lcs-color-error);
}._warning_utxc5_42 {
  color: var(--lcs-color-warning);
}._warningInk_utxc5_46 {
  color: var(--lcs-color-warning-ink);
}
}@layer primitives{._root_mwdyz_2 {
  position: relative;
  display: inline-block;
}._panel_mwdyz_7 {
  position: absolute;
  z-index: var(--lcs-z-popover);
  top: calc(100% + var(--lcs-space-2));
  left: 0;
  border-radius: var(--lcs-radius-xl);
  animation: _rise_mwdyz_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
}._alignEnd_mwdyz_16 {
  right: 0;
  left: auto;
}._light_mwdyz_21 {
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  background-color: var(--lcs-color-surface);
  box-shadow: var(--lcs-shadow-popover);
  color: var(--lcs-color-ink);
}._dark_mwdyz_28 {
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface-dark);
  box-shadow: var(--lcs-shadow-menu);
  color: var(--lcs-color-on-surface-dark);
}._shadowPopover_mwdyz_35 {
  box-shadow: var(--lcs-shadow-popover);
}._shadowMenu_mwdyz_39 {
  overflow: hidden;
  box-shadow: var(--lcs-shadow-menu);
}._offsetMenu_mwdyz_44 {
  top: calc(100% + var(--lcs-space-4));
}@keyframes _rise_mwdyz_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/*
 * Opt-in mobile escape hatch. Root goes static so a caller can make a wider
 * ancestor (e.g. a chip row) the containing block. Panel stays `absolute`
 * (scrolls with the page), hangs below that ancestor, and centers at 85vw
 * via margin — not transform — so the shared `rise` translateY animation
 * cannot knock it off-center. Anchored placement (default) never enters.
 */@media (max-width: 768px) {
  ._mobileCenteredRoot_mwdyz_66 {
    position: static;
  }
  ._mobileCentered_mwdyz_66 {
    top: calc(100% + var(--lcs-space-2));
    right: auto;
    bottom: auto;
    left: 50%;
    width: 85vw;
    margin-left: -42.5vw;
    overflow-x: hidden;
  }
}@media (prefers-reduced-motion: reduce) {
  ._panel_mwdyz_7 {
    animation: none;
  }
}
}@layer features {._trigger_l3jw4_1 {
  display: flex;
  align-items: center;
  gap: var(--lcs-space-2);
  height: var(--lcs-control-height-sm);
  padding: 0 var(--lcs-space-5);
  border: none;
  border-radius: var(--lcs-radius-lg);
  background: transparent;
  color: var(--lcs-color-on-action);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  cursor: pointer;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._trigger_l3jw4_1:hover {
  background-color: var(--lcs-on-action-20);
}._trigger_l3jw4_1[aria-expanded=true] {
  background-color: var(--lcs-on-action-20);
}._trigger_l3jw4_1:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._chevron_l3jw4_31 {
  display: flex;
  transition: transform var(--lcs-motion-micro) var(--lcs-ease-standard);
}._trigger_l3jw4_1[aria-expanded=true] ._chevron_l3jw4_31 {
  transform: rotate(180deg);
}._initials_l3jw4_40 {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-on-action-20);
  font-size: var(--lcs-text-badge);
  font-weight: var(--lcs-weight-bold);
}._panel_l3jw4_53 {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  gap: var(--lcs-space-1);
}._identity_l3jw4_60 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-1);
  padding: var(--lcs-space-3) var(--lcs-space-5) var(--lcs-space-4);
  border-bottom: var(--lcs-border-hairline) solid var(--lcs-divider);
}._identityName_l3jw4_68 {
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  color: var(--lcs-color-ink);
}._identityEmail_l3jw4_74 {
  font-size: var(--lcs-text-caption);
  color: var(--lcs-color-muted);
}._logOut_l3jw4_79 {
  display: flex;
  min-height: var(--lcs-control-height);
  align-items: center;
  gap: var(--lcs-space-4);
  width: 100%;
  padding: 0 var(--lcs-space-5);
  border: none;
  border-radius: var(--lcs-radius-lg);
  background: transparent;
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  text-align: left;
  cursor: pointer;
}._logOut_l3jw4_79:hover {
  background-color: var(--lcs-tint-hover);
}._logOut_l3jw4_79:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (max-width: 768px) {
  ._trigger_l3jw4_1 {
    gap: 0;
    width: var(--lcs-control-height);
    height: var(--lcs-control-height);
    padding: 0;
    justify-content: center;
  }
  ._name_l3jw4_114 {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {
  ._trigger_l3jw4_1,
  ._chevron_l3jw4_31 {
    transition: none;
  }
}
}@layer primitives{._root_1hdxh_2 {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  cursor: pointer;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_1hdxh_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/* Ends of a pagination range stay in place rather than reflowing the control. */._root_1hdxh_2:disabled {
  opacity: 0.35;
  pointer-events: none;
}._sm_1hdxh_26 {
  width: 32px;
  height: 32px;
}._md_1hdxh_31 {
  width: var(--lcs-control-height-sm);
  height: var(--lcs-control-height-sm);
}._fit_1hdxh_36 {
  width: auto;
  height: auto;
}._bare_1hdxh_41 {
  border-radius: var(--lcs-radius-sm);
}._bare_1hdxh_41:hover {
  background-color: var(--lcs-tint-hover);
}._outlined_1hdxh_49 {
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
}._outlined_1hdxh_49:hover {
  background-color: var(--lcs-tint-hover);
}._onDark_1hdxh_59:hover {
  background-color: var(--lcs-on-dark-12);
}._onDark_1hdxh_59._outlined_1hdxh_49 {
  border-color: var(--lcs-on-dark-45);
  background: none;
}/* Dorado — bare favourites and other quiet chrome. */._muted_1hdxh_69 {
  color: var(--lcs-color-muted);
}._action_1hdxh_73 {
  color: var(--lcs-color-action);
}._steel_1hdxh_77 {
  color: var(--lcs-color-steel);
}@media (prefers-reduced-motion: reduce) {
  ._root_1hdxh_2 {
    transition: none;
  }
}
}@layer features{._root_1wmpr_2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--lcs-space-9);
  background-color: var(--lcs-color-action);
  padding: var(--lcs-space-6) var(--lcs-space-9);
  /* Full-viewport screens subtract `--lcs-app-header-height` from 100dvh,
   * so this bar must never render shorter than the token. If the padding
   * or content height above changes, update the token (and its mobile
   * media query) in `tokens.css` to match. */
  min-height: var(--lcs-app-header-height);
}/* Always links home — logged-out users still land on the marketing-facing
 * root, so this doesn't add a second header action there. */._brand_1wmpr_19 {
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: var(--lcs-space-4);
  justify-self: start;
  color: var(--lcs-color-on-action);
  text-decoration: none;
  transition: opacity var(--lcs-motion-panel) var(--lcs-ease-standard);
}._brand_1wmpr_19:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._logo_1wmpr_35 {
  display: block;
  flex: none;
  pointer-events: none;
}._wordmark_1wmpr_41 {
  display: inline-block;
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: var(--lcs-tracking-wordmark);
  transition: transform var(--lcs-motion-panel) var(--lcs-ease-standard);
}._brand_1wmpr_19:hover ._wordmark_1wmpr_41 {
  transform: scale(1.1);
}._nav_1wmpr_53 {
  grid-column: 2;
  justify-self: center;
}._account_1wmpr_58 {
  display: flex;
  grid-column: 3;
  justify-self: end;
  transition: opacity var(--lcs-motion-panel) var(--lcs-ease-standard);
}._stack_1wmpr_65 {
  display: none;
}._stackTitle_1wmpr_69 {
  overflow: hidden;
  margin: 0;
  color: var(--lcs-color-on-action);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  letter-spacing: var(--lcs-tracking-wordmark);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}@media (max-width: 768px) {
  ._root_1wmpr_2 {
    grid-template-columns: 1fr auto;
    padding: var(--lcs-space-4) var(--lcs-space-7);
  }
  ._nav_1wmpr_53 {
    display: none;
  }
  ._account_1wmpr_58 {
    grid-column: 2;
  }
  ._stackMode_1wmpr_92 ._brand_1wmpr_19,
  ._stackMode_1wmpr_92 ._account_1wmpr_58 {
    opacity: 0;
    pointer-events: none;
  }
  ._stack_1wmpr_65 {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    padding: var(--lcs-space-4) var(--lcs-space-7);
    gap: var(--lcs-space-4);
    min-width: 0;
  }
  /* IconButton `onDark` is for navy surfaces; the bar is celestial blue. */
  ._stack_1wmpr_65 svg {
    color: var(--lcs-color-on-action);
  }
}@media (prefers-reduced-motion: reduce) {
  ._wordmark_1wmpr_41,
  ._brand_1wmpr_19,
  ._account_1wmpr_58 {
    transition: none;
  }
}
}@layer features {._link_zk9qz_1,
._linkActive_zk9qz_2 {
  display: inline-flex;
  height: var(--lcs-control-height);
  align-items: center;
  padding: 0 var(--lcs-space-5);
  color: var(--lcs-color-on-action);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-medium);
  opacity: 0.85;
  text-decoration: none;
}._link_zk9qz_1:focus-visible,
._linkActive_zk9qz_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._linkActive_zk9qz_2 {
  font-weight: var(--lcs-weight-bold);
  opacity: 1;
  box-shadow: inset 0 -2px 0 0 var(--lcs-color-on-action);
}
}@layer legacy {/* ------------------ Loading ------------------ *//* Load Screen Styles */.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 70vh;
  padding: 5% 20%;
  box-sizing: border-box;
}.loadingIcon {
  position: relative;
  width: 50%;
  padding-top: 50%;
  max-width: 400px;
  max-height: 400px;
  min-width: 150px;
  min-height: 150px;
}#headIcon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
}#wheelIcon {
  position: absolute;
  top: 18%;
  left: 18%;
  width: 40%;
  animation: spin 1.4s linear infinite;
}@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/* ------------------ Inline Loading ------------------ */.inline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}.inline-loading img {
  margin-left: 1rem;
  width: 24px;
  height: 24px;
  animation: spin 1.4s linear infinite;
}@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
}@layer primitives{._root_4i0wc_2 {
  box-sizing: border-box;
  /* `100%` only resolves against an ancestor with a set height, which
   * nothing up to `html` provides — so on short content this collapsed
   * and let the legacy paper background show through below the fold. */
  min-height: 100vh;
  padding: var(--lcs-space-9) var(--lcs-page-pad);
  background-color: var(--lcs-color-page);
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-regular);
  line-height: var(--lcs-line-body);
  text-align: left;
}/* Room for a FixedBottomStack so the last row is never covered. */._reserveBottomBar_4i0wc_19 {
  padding-bottom: var(--lcs-page-pad-bottom);
}._column_4i0wc_23 {
  max-width: var(--lcs-max-width);
  margin: 0 auto;
}._flushHorizontal_4i0wc_28 {
  padding-right: 0;
  padding-left: 0;
}._flushHorizontal_4i0wc_28 ._column_4i0wc_23 {
  max-width: none;
}@media (max-width: 768px) {
  ._root_4i0wc_2 {
    padding: var(--lcs-space-7) var(--lcs-page-pad-narrow);
  }
  ._reserveBottomBar_4i0wc_19 {
    padding-bottom: var(--lcs-page-pad-bottom);
  }
  ._flushHorizontal_4i0wc_28 {
    padding: var(--lcs-space-9) 0 0;
  }
  ._flushHorizontal_4i0wc_28._reserveBottomBar_4i0wc_19 {
    padding-bottom: var(--lcs-page-pad-bottom);
  }
}
}@layer features{._column_w86p8_2 {
  display: flex;
  min-height: 60vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lcs-space-8);
  padding: var(--lcs-space-9) var(--lcs-page-pad);
  text-align: center;
}._logo_w86p8_13 {
  display: block;
  flex: none;
  pointer-events: none;
}._title_w86p8_19 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-tight);
}._guidance_w86p8_27 {
  max-width: 44ch;
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-body);
  line-height: var(--lcs-line-body);
}/* Deliberately taller than the standard 44px control — the one CTA on an
 * otherwise empty screen, so it should read as the obvious next step. */._logInButton_w86p8_37 {
  height: 64px;
  border: none;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-color-action);
  padding: 0 var(--lcs-space-11);
  color: var(--lcs-color-on-action);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-h3);
  font-weight: var(--lcs-weight-bold);
  cursor: pointer;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._logInButton_w86p8_37:hover {
  background-color: var(--lcs-color-action-hover);
}._logInButton_w86p8_37:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (max-width: 768px) {
  /* The prompt was painting into the bezel: no page gutters, and the
   * CTA stretched edge-to-edge. Inset the whole stack from the screen
   * and cap the button so it reads as a control, not a docked bar. */
  ._column_w86p8_2 {
    padding: var(--lcs-space-11);
  }
  ._logInButton_w86p8_37 {
    width: 100%;
    max-width: 320px;
    height: 56px;
    padding: 0 var(--lcs-space-9);
  }
}@media (prefers-reduced-motion: reduce) {
  ._logInButton_w86p8_37 {
    transition: none;
  }
}
}@layer features {._stage_5hu35_1 {
  position: relative;
}._stageAnimating_5hu35_5 {
  height: calc(100dvh - var(--lcs-app-header-height));
  overflow: hidden;
}._incoming_5hu35_10 {
  min-height: 100%;
}._incomingAnimating_5hu35_14,
._ghost_5hu35_15 {
  position: absolute;
  inset: 0;
  overflow: auto;
  background-color: var(--lcs-color-page);
}._ghostForward_5hu35_22 {
  z-index: 1;
}._ghostBack_5hu35_26 {
  z-index: 2;
}._incomingForward_5hu35_30 {
  z-index: 2;
}._incomingBack_5hu35_34 {
  z-index: 1;
}._slideOutToLeft_5hu35_38 {
  animation: _slideOutToLeft_5hu35_38 var(--lcs-motion-panel) var(--lcs-ease-standard) both;
}._slideOutToRight_5hu35_42 {
  animation: _slideOutToRight_5hu35_42 var(--lcs-motion-panel) var(--lcs-ease-standard) both;
}._slideInFromRight_5hu35_46 {
  animation: _slideInFromRight_5hu35_46 var(--lcs-motion-panel) var(--lcs-ease-standard) both;
}._slideInFromLeft_5hu35_50 {
  animation: _slideInFromLeft_5hu35_50 var(--lcs-motion-panel) var(--lcs-ease-standard) both;
}@keyframes _slideOutToLeft_5hu35_38 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}@keyframes _slideOutToRight_5hu35_42 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}@keyframes _slideInFromRight_5hu35_46 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}@keyframes _slideInFromLeft_5hu35_50 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}@media (prefers-reduced-motion: reduce) {
  ._slideOutToLeft_5hu35_38,
  ._slideOutToRight_5hu35_42,
  ._slideInFromRight_5hu35_46,
  ._slideInFromLeft_5hu35_50 {
    animation: none;
  }
}
}@layer features {/* Parchment for v1. `.paperShell` is on `.App` so the texture fills the
 * viewport even when the route is shorter than the window. `.mainContent`
 * keeps the same image so transparent v1 page gaps still show paper.
 * `App` applies `.paperShell` until a beta-tester student session is
 * confirmed; only then does `body`'s `--lcs-color-page` become the canvas. */._paperShell_1yc25_1 {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-image: url("/assets/paper-small-Chy8x6yq.jpeg");
}._paperShell_1yc25_1 ._mainContent_1yc25_2 {
  flex: 1;
}._mainContent_1yc25_2 {
  background-image: url("/assets/paper-small-Chy8x6yq.jpeg");
}
}@layer legacy {.buyMoreCoachingSessionsBanner {
  background: white;
  color: var(--dark);
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 4px solid var(--brand);
  width: 100%;
  margin: 0 auto;
  animation: slideInFromTop 0.5s ease-out;
}@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}.buyMoreCoachingSessionsBanner h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}.buyMoreCoachingSessionsBanner .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 60vw;
}.buyMoreCoachingSessionsBanner .content .text {
  display: flex;
  flex-direction: row;
  align-items: center;
}.buyMoreCoachingSessionsBanner .content .text h2 {
  margin: 0;
  margin-right: 8px;
}.buyMoreCoachingSessionsBanner p {
  margin: 0 16px 0 0;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}.buyMoreCoachingSessionsBanner__closeButton {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: black;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}.buyMoreCoachingSessionsBanner__closeButton:hover {
  background-color: var(--accent);
}.buyMoreCoachingSessionsBanner__closeButton:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}.buyMoreCoachingSessionsBanner__closeButton img {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(0);
}.buyMoreCoachingSessionsBanner__ctaButton {
  background: darkgreen;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}.buyMoreCoachingSessionsBanner__ctaButton:hover {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}@media (max-width: 1024px) and (min-width: 769px) {
  .buyMoreCoachingSessionsBanner .content {
    max-width: 84vw;
  }
}@media (max-width: 768px) {
  .buyMoreCoachingSessionsBanner {
    display: none;
  }
}
}@layer primitives {._root_17li2_1 {
  display: contents;
}
}@layer legacy {/* Used by App.js, ExampleRetriever.js, Menu.js *//* Palette tokens live in src/hexagon/interface/styles/tokens.css */* {
  box-sizing: border-box;
}/* Canvas behind confirmed v2 surfaces. Until then `.App.paperShell`
 * / `.mainContent` (`App.module.scss`) paint parchment so this color
 * does not leak around short v1 pages or the logged-out screen. */body {
  background-color: var(--lcs-color-page);
}a {
  text-decoration: none;
}img,
image {
  user-select: none;
}input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  border: 1px solid var(--dark);
  border-radius: 0%;
}/* Global Styles */h1 {
  color: var(--light);
  text-align: center;
  margin: 0;
}table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--light);
}th,
td {
  border: 1px solid var(--dark);
  padding: 8px;
  text-align: center;
}h2,
h3,
h4,
h5,
h6 {
  color: var(--dark);
  text-align: center;
}/* Menu Row Styles */.menuRow {
  /* .menuRow > label.quizLength { */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}.menuRow > label.quizLength p {
  margin: 0;
}.bannerMessage {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  margin: 0;
  background-color: darkgreen;
  border: 1px solid var(--light);
  color: var(--light);
  z-index: 999;
}.bannerMessage p {
  margin: 0;
}button,
.linkButton {
  text-align: center;
  font-family: 'Poppins', 'Avenir', 'Helvetica', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 30px;
  color: var(--light);
  background-color: var(--brand);
  border: none;
  cursor: pointer;
  /* align text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}button:hover,
.linkButton:hover {
  background-color: #b0a96f;
  color: #ffffff;
}.label {
  text-align: center;
  font-family: 'Poppins', 'Avenir', 'Helvetica', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 30px;
  color: var(--light);
  background-color: var(--brand);
  border: none;
  cursor: default;
  /* align text vertically  */
  display: flex;
  justify-content: center;
  align-items: center;
}/* .label:hover {
  cursor: default;
  background-color: var(--brand);
} */.disabledButton {
  background-color: var(--dark);
  cursor: disabled;
}.disabledButton:hover {
  cursor: disabled;
  background-color: var(--dark);
}.navigateButtons {
  position: absolute;
  right: 0px;
  left: 0px;
  margin: 0;
  top: 0px;
  bottom: 0px;
  z-index: 10;
}.nextButton {
  cursor: pointer;
  font-size: 48px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
}.previousButton {
  cursor: pointer;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}/*Main Menu Styles*//* MOVED TO NAV *//* 
.div-header{
  padding: calc(5px + 1.5%) 5%;
  background-color: var(--theme);
  color: var(--light);
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.div-header button {
  background-color: var(--light);
  color: var(--dark);
} */.div-user-subheader {
  padding: 10px 5%;
  background-color: var(--accent);
  color: var(--light);
  margin: 0;
  display: flex;
  justify-content: center;
}.div-user-subheader button {
  background-color: var(--light);
  color: var(--dark);
  font-size: 12px;
  padding: 5px 15px;
  margin: 0 4px;
}.div-user-subheader p {
  margin: 0px 15px;
}.studentList input {
  max-width: 70%;
}.studentList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  justify-content: space-between;
  padding: 0px;
}.menu-buttons {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  min-height: 250px;
}/*Callback page Styles */.redirectMessage {
  display: block;
  text-align: center;
  width: 50%;
  margin: 10% 25%;
}/*Sentence Retreiver Styles*/.div-vocab {
  margin-top: 10px;
  display: flex;
}.finishedMessage {
  margin: auto;
  text-align: center;
  width: 50%;
  min-width: 400px;
}.finishedMessage p {
  margin-top: 40px;
  margin-bottom: 40px;
}/*General Quiz Styles*/.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}.quiz {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}.exampleBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}/* .spanishExample, .englishTranslation {
  position: relative;
  width: 65%;
  min-width: 300px;
  min-height:200px;
  color: var(--dark);
  background-color: var(--light);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 50px;
  border: 4px solid var(--accent);
  cursor: pointer;
} */.readyButton {
  display: flex;
  justify-content: space-around;
}.quizControls {
  height: 240px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}.buttonBox {
  text-align: center;
  width: 65%;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  justify-items: stretch;
  margin: 10px auto;
}.buttonBox button,
.buttonBox .linkButton {
  margin: 0px 10px;
  /* display: block; */
  flex-basis: 0;
  flex-grow: 1;
}.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}.menuBox {
  width: 100%;
  align-content: center;
}.greenButton {
  background-color: darkgreen;
}.redButton {
  background-color: darkred;
}.addFlashcardButton,
.pendingFlashcardButton,
.removeFlashcardButton,
.customFlashcardButton {
  position: absolute;
  top: 0px;
  right: 0px;
  width: fit-content;
  font-size: 10px;
  padding: 5px 10px;
  margin: 0 auto;
  z-index: 5;
}.addFlashcardButton {
  background-color: darkgreen;
}.removeFlashcardButton {
  background-color: darkred;
}.customFlashcardButton {
  background-color: var(--brand);
}.pendingFlashcardButton {
  cursor: default;
  background-color: var(--dark);
}.addFlashcardButton:hover,
.removeFlashcardButton:hover,
.pendingFlashcardButton:hover,
.customFlashcardButton:hover {
  background-color: var(--dark);
}.audioFlashcard .addFlashcardButton:hover,
.audioFlashcard .removeFlashcardButton:hover,
.audioFlashcard .customFlashcardButton:hover {
  background-color: var(--accent);
}.audioFlashcard .pendingFlashcardButton {
  background-color: var(--accent);
}/*For Flashcard Manager */.spanglishLabel {
  align-content: center;
  width: 8%;
  min-width: 100px;
  background-color: var(--dark);
}.spanishLabel {
  align-content: center;
  width: 8%;
  min-width: 100px;
  background-color: var(--brand);
}.spanglishLabel h4,
.spanishLabel h4 {
  color: var(--light);
}/* For Audio Quiz */.comprehensionHeader {
  margin-bottom: 0px;
}.audioBox {
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}.audioExample {
  position: relative;
  width: 65%;
  min-width: 300px;
  min-height: 200px;
  margin: 20px auto;
  background-color: var(--dark);
  color: var(--light);
  text-align: center;
  display: flex;
  flex-direction: column;
  /* vertical-align: center; */
  justify-content: center;
  padding: 25px 50px;
  border: 4px solid var(--brand);
  cursor: pointer;
}.audioExample h3 {
  color: var(--light);
  z-index: 5;
}/* .progressBarHolder {
  position: relative;
  height: 150px;
  margin: 10px 0;
  width: 100%;
  background-color: var(--dark);
  color: var(--light);
}

.progressBarHolder h4 {
  margin: auto;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  text-align: center;
  padding: 60px;
  color: var(--light);
  z-index: 5;
} *//* progressBar & progressBar2 are almost legacy *//* This is for the visual overlay for AudioFlashcard */.progressStatus {
  /* round the top left and bottom right corners */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  background-color: var(--theme);
  color: var(--light);
  z-index: 1;
}.audioAutoplayFlashcardWrapper {
  width: 100%;
}.audioAutoplayFlashcardWrapper .audioExample {
  border: none;
}.removeSpanglishBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  text-align: center;

  margin-top: 24px;
}.removeSpanglishBox button {
  cursor: pointer;
}/* .removeSpanglishButton {
  padding: 12px;

} */.removeSpanglishBox label {
  margin: auto 0px;
}.searchFilter {
  display: inline-block;
  position: relative;
  flex-grow: 2;
  max-width: 100%;
}.wordSearchBox .tagSearchBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* max-width: 450px; */
  margin: auto;
}.tagSearchBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  max-width: 640px;
}.searchTermBox {
  width: 100%;
}.searchTermBox input {
  padding: 4px 8px;
  border-radius: 4px;
  width: 100%;
}.searchTermBox input {
  margin: 0 5px 0 0;
}.vocabSuggestionBox,
.tagSuggestionBox {
  position: absolute;
  max-width: 640px;
  width: 100%;
  top: 41px;
  left: 0px;
  z-index: 999;
}.tagCard {
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  /* margin: 0 6px; */
  height: 90px;
}.tagCard:hover {
  cursor: pointer;
  filter: brightness(0.9); /* Slight darken */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow */
  transform: scale(1.03); /* Slight zoom */
  transition: all 0.2s ease-in-out; /* Smooth transition */
}.tagCard h4,
.tagCard h5,
.tagCard p {
  color: currentColor;
  margin: 0;
}.tagCard div {
  display: flex;
  flex-direction: column;
  padding: 12px;
  justify-content: space-between;
}.subcategoryCard,
.SubcategoryCard,
.vocabularyCard,
.VocabularyCard,
.idiomCard,
.IdiomCard,
.conjugationCard,
.ConjugationCard,
.verbCard,
.VerbCard {
  width: 100%;
  height: 100%;
  text-align: left;
  border: 3px solid var(--dark);
  margin: 0px;
}.subcategoryCard,
.SubcategoryCard {
  padding: 5px 20px;
  color: var(--light);
  background-color: var(--theme);
}.vocabularyCard,
.VocabularyCard {
  padding: 5px 20px;
  color: var(--light);
  background-color: var(--brand);
}.idiomCard,
.IdiomCard {
  padding: 5px 20px;
  color: var(--dark);
  background-color: var(--accent);
}.conjugationCard,
.ConjugationCard {
  padding: 5px 20px;
  color: var(--dark);
  background-color: var(--light);
}.verbCard,
.VerbCard {
  padding: 5px 20px;
  color: var(--accent);
  background-color: var(--dark);
}.vocabSmallCard {
  cursor: pointer;
  text-align: left;
  background-color: #fff;
  color: #3c3c3c;
  font-size: 11px;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 auto;
  border: 2px solid var(--theme);
}.vocabSmallCard h4 {
  font-size: 11px;
  color: var(--brand);
  text-align: left;
  margin-bottom: 0;
  margin: 5px;
}.addButton,
.removeButton {
  width: 10%;
  min-width: 120px;
  cursor: pointer;
}.addButton {
  background-color: darkgreen;
}.removeButton {
  background-color: darkred;
}.pendingButton {
  width: 10%;
  min-width: 120px;
  background-color: var(--dark);
  cursor: default;
}/* ToFromLessonSelector styling for Flashcard Finder *//* 
.FromToLessonSelectorWrapper {
  margin: 6px;
}
.FromToLessonSelectorWrapper #courseRow {
  display: flex;
  flex-direction: row;
  margin: 4px;
}
#courseRow p {
  margin: 4px;
}

.FromToLessonSelectorWrapper #flashcardFinderStyling {
  display: flex;
  flex-direction: row;
}
.FromToLessonSelectorWrapper #fromRow, .FromToLessonSelectorWrapper #toRow {
  margin: 8px;
}
.FromToLessonSelectorWrapper #flashcardFinderStyling p {
  margin: 0;
  margin-right: 6px;
} */@media screen and (max-width: 767px) {
  .div-header h1 {
    margin-bottom: 20px;
  }

  .spanishExample,
  .englishTranslation {
    box-sizing: border-box;
    width: 95%;
    min-width: 0;
  }

  .buttonBox {
    width: 95%;
    min-width: 0;
  }
}/*      FLashcardManager and FlashcardFinder shared styles      */.exampleCardSpanishText,
.exampleCardEnglishText {
  color: var(--dark);
  background-color: var(--light);
  text-align: left;
  font-size: 16px;
  flex-grow: 1;
  width: 70px;
  margin: 2px;
  padding: 4px 16px;
}/* formatFlashcardText function classes */.spanishFlashcardText {
  font-weight: 600;
  font-style: italic;
}.englishFlashcardText {
  font-weight: 400;
  font-style: normal;
}.englishTranslation .englishFlashcardText {
  font-size: 18px;
}.spanishExample .spanishFlashcardText {
  font-size: 18px;
}#quizLength {
  width: 60px;
  padding: 5px;
  text-align: center;
}/* Icons */i {
  font-size: 24px;
}/* Nav */.div-header {
  display: flex;
  justify-content: space-between;
  padding: calc(5px + 0.75%) 2.5%;
  background-color: var(--theme);
  color: var(--light);
  margin: 0;
  align-items: center;
}.div-header button {
  background-color: var(--light);
  color: var(--dark);
}.homeButton {
  display: flex;
  height: 70px;
  width: 125px;
}#homeIcon {
  display: none;
}#logo {
  cursor: pointer;
}@media screen and (max-width: 480px) {
  .homeButton {
    height: 24px;
    width: 24px;
  }
  #logo {
    display: none;
  }
  #homeIcon {
    display: block;
    z-index: 2;
  }
  /* div.notRoot {
    flex-direction: row-reverse;
  } */
  #logout.notRoot {
    display: none;
  }
}/* BackButton *//* .backButton {
  display: none;
  position: absolute;
  left: 0;
  color: white;
  padding: 12px;
}
@media screen and (max-width: 480px) {
  .backButton.notRoot {
      display: block;
      z-index: 2;
    }
  
} *//* .homeButton {
  display: flex;
  height: 70px;
  text-align: center;
  font-family: 'Poppins', 'Avenir', 'Helvetica', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 0px 0px;
  border: none;
  cursor: pointer;
  overflow: hidden;
} *//* @media screen and (max-width: 480px) {
  /* currently conditionally applied to LogoutButton for when route is not / *//* .pastHome {
    display: none;
  }
  .div-header {
    align-items: center;
  }
  #login, #logout {
    padding: 6px;
    height: auto;
  }
  #home {
    display: block;
    width: 24px;
  }
  #logo {
    display: none;
  }
  .div-user-subheader {
    display: none;
  }

  .div-header.homeButton {
    background-image: url('./assets/icons8-home-24.png');
  } *//*  FrequenSay */.frequensay .tempBox {
  max-width: 640px;
  margin: auto;
}/*
 * Toast Notification Styles
 *
 * For more information on styling this component, visit:
 * https://fkhadra.github.io/react-toastify/how-to-style
 */.Toastify__toast-container {
  --toastify-color-success: darkgreen;
  --toastify-color-error: darkred;
  --toastify-toast-bd-radius: 0;
  /* --toastify-toast-min-height: 40px; */
  --toastify-font-family: 'Poppins', 'Avenir', 'Helvetica', sans-serif;
}/* Student Search */#searchStudentWrapper {
  position: relative;
}#searchStudentWrapper input {
  min-width: 500px;
}#optionsWrapper {
  position: absolute;
  background-color: var(--theme);
  margin: 2px;
  padding: 0 1rem;
  max-height: 40vh;
  overflow: scroll;
  min-width: 500px;
  z-index: 10;
}.searchResultItem {
  background-color: var(--light);
  color: var(--dark);
  margin: 4px;
  padding: 2px;
  cursor: pointer;
  border: 2px solid var(--light);
}.searchResultItem:hover {
  border: 2px solid var(--accent);
}/* Vocabulary Manager Styles */.vocabulary-manager {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}.vocabulary-manager .form-group {
  margin-bottom: 20px;
}.vocabulary-manager label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}.vocabulary-manager textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
}.vocabulary-manager .error-message {
  color: #dc3545;
  margin: 10px 0;
  padding: 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}.vocabulary-manager .button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}.vocabulary-manager button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}.vocabulary-manager button:hover {
  background-color: #0056b3;
}.vocabulary-manager button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}.vocabulary-manager .preview-section {
  margin-top: 30px;
}.vocabulary-manager .preview-section h3 {
  margin-bottom: 15px;
  color: #333;
}.vocabulary-manager .preview-table {
  overflow-x: auto;
}.vocabulary-manager table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}.vocabulary-manager th,
.vocabulary-manager td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}.vocabulary-manager th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #495057;
}.vocabulary-manager tr:hover {
  background-color: #f5f5f5;
}/* Spelling Management Styles */.spelling-management {
  margin-top: 40px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}.spelling-management h3 {
  margin-bottom: 20px;
  color: #333;
}.vocabulary-selector {
  margin-bottom: 20px;
}.vocabulary-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}.vocabulary-selector select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}.spelling-list {
  margin-top: 20px;
}.spelling-list h4 {
  margin-bottom: 10px;
  color: #495057;
}.spelling-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}.spelling-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px;
}.delete-spelling {
  padding: 4px 8px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}.delete-spelling:hover {
  background-color: #c82333;
}.add-spelling-form {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}.add-spelling-form input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}.add-spelling-form button {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}.add-spelling-form button:hover {
  background-color: #218838;
}/* From refactoring QuizSetupMenu and FlashcardFinderFilters, styles used elsewhere but not in those components *//* / THESE ARE USED ELSEWHERE. PLEASE REMOVE WHEN REFACTORING. */.presetSelector,
.searchFilter {
  padding: 15px;
  border: 1px solid var(--dark);
  border-top: 0px;
  background-color: var(--light);
  min-height: 200px;
  margin-bottom: 15px;
}/* END OF THESE ARE USED ELSEWHERE. PLEASE REMOVE WHEN REFACTORING. */
}
@layer legacy {.contextualWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
}.contextualWrapper .contextual {
  min-width: 40%;
  max-width: 80%;
  max-height: 80%;
  overflow-x: scroll;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7);
  z-index: 100;
}.controlls {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}.controlls .icon {
  position: relative;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  cursor: pointer;
  padding: 8px;
  width: 32px;
}.controlls .icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
}.controlls #editIcon {
  padding: 5px;
  margin-right: 8px;
}
}@layer primitives {._root_12quw_1 {
  display: block;
  margin: 0;
  color: var(--lcs-color-label);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-eyebrow);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: var(--lcs-tracking-eyebrow);
  line-height: var(--lcs-line-tight);
  /* When rendered as a heading, the legacy global `h2..h6` rule in App.css
   * would centre it. Follow the surrounding surface instead. */
  text-align: inherit;
  text-transform: uppercase;
}._muted_12quw_16 {
  color: var(--lcs-color-muted);
}._onDark_12quw_20 {
  color: var(--lcs-on-dark-75);
}._regular_12quw_24 {
  font-weight: var(--lcs-weight-regular);
}._leadingBody_12quw_28 {
  line-height: var(--lcs-line-body);
}
}@layer primitives {._card_1qh6s_1 {
  overflow: hidden;
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
}/* Own background still follows the radius; descendants may paint outside. */._card_1qh6s_1._unclipped_1qh6s_10 {
  overflow: visible;
}/* No shadow at rest; interactive cards lift on hover. */._interactive_1qh6s_15 {
  transition: box-shadow var(--lcs-motion-micro) var(--lcs-ease-standard);
}._interactive_1qh6s_15:hover {
  box-shadow: var(--lcs-shadow-lift);
}._section_1qh6s_23 {
  padding: var(--lcs-space-8);
}._divided_1qh6s_27 {
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}._sectionHeader_1qh6s_31 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--lcs-space-6) var(--lcs-space-8);
  border-bottom: var(--lcs-border-hairline) solid var(--lcs-divider);
}._footerStrip_1qh6s_41 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-10);
  align-items: center;
  padding: var(--lcs-space-6) var(--lcs-space-8);
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  background-color: var(--lcs-color-page);
}@media (max-width: 768px) {
  ._section_1qh6s_23 {
    padding: var(--lcs-space-7);
  }
  ._sectionHeader_1qh6s_31,
  ._footerStrip_1qh6s_41 {
    padding: var(--lcs-space-5) var(--lcs-space-7);
  }
}@media (prefers-reduced-motion: reduce) {
  ._interactive_1qh6s_15 {
    transition: none;
  }
}
}@layer primitives {._root_dwv9m_1 {
  display: inline-flex;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-md);
}._action_dwv9m_11 {
  background-color: var(--lcs-tint-action);
}._label_dwv9m_15 {
  background-color: var(--lcs-tint-label);
}._warning_dwv9m_19 {
  background-color: var(--lcs-tint-warning);
}/* One-off: prototype list-density glyph is 17px; Icon sm stays 16. */._menuGlyph_dwv9m_24 svg {
  width: 17px;
  height: 17px;
}
}@layer features {._hitArea_yhr5g_1 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--lcs-space-3);
  border: none;
  background: none;
  padding: var(--lcs-space-8);
  color: inherit;
  font-family: var(--lcs-font-sans);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._hitArea_yhr5g_1:hover {
  background-color: var(--lcs-tint-hover);
}._hitArea_yhr5g_1:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (prefers-reduced-motion: reduce) {
  ._hitArea_yhr5g_1 {
    transition: none;
  }
}._top_yhr5g_33 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}._title_yhr5g_39 {
  text-align: left;
  font-size: var(--lcs-text-h3);
  font-weight: var(--lcs-weight-bold);
  color: var(--lcs-color-ink);
}._meta_yhr5g_46 {
  text-align: left;
  font-size: var(--lcs-text-caption);
  color: var(--lcs-color-muted);
}@media (max-width: 768px) {
  ._hitArea_yhr5g_1 {
    padding: var(--lcs-space-7);
  }
}
}@layer primitives {._root_1fvr7_1 {
  display: none;
}@media (max-width: 768px) {
  ._root_1fvr7_1 {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--lcs-z-bottom-bar);
    display: flex;
    /* Stated rather than left to the icon and label, because Home
     * reserves exactly this much room on `.homeShell`. Letting the
     * content decide made the bar shorter than the strip held for it. */
    min-height: calc(var(--lcs-tab-bar-height) + env(safe-area-inset-bottom, 0));
    border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
    background-color: var(--lcs-color-surface);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  ._tab_1fvr7_21 {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lcs-space-1);
    border: none;
    background: none;
    padding: var(--lcs-space-4) var(--lcs-space-2);
    cursor: pointer;
  }
  ._tab_1fvr7_21:focus-visible {
    outline: var(--lcs-focus-ring);
    outline-offset: var(--lcs-focus-offset);
  }
  ._label_1fvr7_37,
  ._labelActive_1fvr7_38 {
    font-family: var(--lcs-font-sans);
    font-size: var(--lcs-text-badge);
    font-weight: var(--lcs-weight-bold);
  }
  ._label_1fvr7_37 {
    color: var(--lcs-color-muted);
  }
  ._labelActive_1fvr7_38 {
    color: var(--lcs-color-action);
  }
}
}@layer features {._root_k24iz_1 {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--lcs-space-4);
  border: none;
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  background: none;
  margin-top: var(--lcs-space-9);
  padding: var(--lcs-space-9) var(--lcs-space-2) 0;
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  cursor: pointer;
  text-align: left;
  transition: opacity var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_k24iz_1:hover {
  opacity: 0.7;
}._root_k24iz_1:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._label_k24iz_27 {
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
}._hint_k24iz_33 {
  font-size: var(--lcs-text-caption);
}._root_k24iz_1 svg:last-child {
  margin-left: auto;
}@media (max-width: 768px) {
  ._root_k24iz_1 {
    margin-top: var(--lcs-space-2);
    padding: var(--lcs-space-6) var(--lcs-space-1) 0;
  }
  ._label_k24iz_27 {
    font-size: 15px;
  }
  ._hint_k24iz_33 {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {
  ._root_k24iz_1 {
    transition: none;
  }
}
}@layer primitives {._root_1igf6_1 {
  display: block;
  flex: none;
  pointer-events: none;
}
}@layer features{._root_ihfhb_2 {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 240px;
  align-items: center;
  justify-content: space-between;
  gap: var(--lcs-space-11);
  overflow: hidden;
  border: none;
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface-dark);
  padding: var(--lcs-space-9) var(--lcs-space-11) var(--lcs-space-9) var(--lcs-space-9);
  cursor: pointer;
  text-align: left;
  transition: filter var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_ihfhb_2:hover {
  filter: brightness(1.14);
}._root_ihfhb_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._copy_ihfhb_30 {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lcs-space-3);
  text-align: left;
}._headline_ihfhb_40 {
  margin: 0;
  padding: 0;
  color: var(--lcs-color-on-surface-dark);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-display);
  font-weight: var(--lcs-weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--lcs-line-display);
}/* Caption size, medium weight. Drop Eyebrow's 0.08em tracking here — with
 * the headline's slight negative tracking it pulls the first glyph left of
 * the "Quiz" edge; zeroing keeps both lines on the same left margin. */._eyebrow_ihfhb_54 {
  /* Optical nudge: a true left-edge match reads left of the heavy "Q"
   * sidebearing, so inset the smaller caps a hair. */
  margin: 0;
  padding: 0 0 0 var(--lcs-space-1);
}._eyebrow_ihfhb_54 > * {
  color: var(--lcs-color-on-surface-dark);
  font-size: var(--lcs-text-caption);
}/* The wheel is centered ON the arrow, not on the card; the card's own
 * `overflow: hidden` crops it to a horizontal slice through the hub. */._arrowSlot_ihfhb_68 {
  position: relative;
  display: flex;
  flex: none;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
}/* Direct-child selector: matches only the BrandMark svg, not the arrow
 * glyph's svg nested two levels down inside `.arrow` — a descendant
 * selector here would match both and blow up the arrow icon's size. */._arrowSlot_ihfhb_68 > svg:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}._arrow_ihfhb_68 {
  position: relative;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-color-action);
  transition: transform var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_ihfhb_2:hover ._arrow_ihfhb_68 {
  transform: translateX(6px);
}@media (max-width: 768px) {
  ._root_ihfhb_2 {
    min-height: 185px;
    gap: var(--lcs-space-5);
    padding: var(--lcs-space-9) var(--lcs-space-9) var(--lcs-space-9) var(--lcs-space-7);
  }
  ._headline_ihfhb_40 {
    max-width: 230px;
    font-size: var(--lcs-text-display-mobile);
    line-height: 1.14;
  }
  ._arrowSlot_ihfhb_68,
  ._arrow_ihfhb_68 {
    width: 48px;
    height: 48px;
  }
  ._arrowSlot_ihfhb_68 > svg:first-child {
    width: 190px;
    height: 190px;
  }
  ._arrow_ihfhb_68 svg {
    width: 24px;
    height: 24px;
  }
}@media (prefers-reduced-motion: reduce) {
  ._root_ihfhb_2,
  ._arrow_ihfhb_68 {
    transition: none;
  }
  ._root_ihfhb_2:hover {
    filter: none;
  }
  ._root_ihfhb_2:hover ._arrow_ihfhb_68 {
    transform: none;
  }
}
}@layer features {._column_1jiv5_1 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-9);
}._homeShell_1jiv5_7 {
  min-width: 0;
}._entries_1jiv5_11 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lcs-space-9);
}._footer_1jiv5_17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lcs-space-8);
}._feedbackLink_1jiv5_24 {
  display: inline-flex;
  align-items: center;
  gap: var(--lcs-space-2);
  padding: 0 var(--lcs-space-2);
  color: var(--terracotta);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-medium);
  text-decoration: none;
}._feedbackLabel_1jiv5_36 {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}._feedbackLink_1jiv5_24 svg {
  transition: transform var(--lcs-motion-micro) var(--lcs-ease-standard);
}._feedbackLink_1jiv5_24:hover svg,
._feedbackLink_1jiv5_24:focus-visible svg {
  transform: translateX(var(--lcs-space-3));
}._feedbackLink_1jiv5_24:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (max-width: 768px) {
  ._column_1jiv5_1 {
    gap: var(--lcs-space-7);
  }
  ._homeShell_1jiv5_7 {
    padding-bottom: calc(var(--lcs-tab-bar-height) + env(safe-area-inset-bottom, 0px));
  }
  ._entries_1jiv5_11 {
    display: flex;
    flex-direction: column;
    gap: var(--lcs-space-7);
  }
  ._feedbackLink_1jiv5_24 {
    padding: 0 var(--lcs-space-1);
    font-size: var(--lcs-text-body);
  }
}@media (prefers-reduced-motion: reduce) {
  ._feedbackLink_1jiv5_24 svg {
    transition: none;
  }
  ._feedbackLink_1jiv5_24:hover svg,
  ._feedbackLink_1jiv5_24:focus-visible svg {
    transform: none;
  }
}
}@layer features{._root_1qmx5_2 {
  position: relative;
}._row_1qmx5_6 {
  display: flex;
  /* Mobile: chips wrap to fill the card — a single nowrap row overflows
   * and is clipped by the card's `overflow: hidden`. */
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lcs-space-2);
}._chip_1qmx5_15 {
  display: inline-flex;
  box-sizing: border-box;
  /* Mobile: less horizontal pad + 15px type vs handoff ~17. */
  padding: var(--lcs-space-3) var(--lcs-space-3);
  /* Handoff is 0.55 alpha; captures at 2× still read gray, so push higher
   * so critics see Celestial Blue chip rings. */
  border: var(--lcs-control-border) solid rgba(68, 154, 194, 0.85);
  border-radius: var(--lcs-radius-sm);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: inherit;
  /* 15px mobile compromise; desktop restores body below. */
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-medium);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._chip_1qmx5_15:hover:not(._selected_1qmx5_34) {
  background-color: var(--lcs-tint-hover);
}._chip_1qmx5_15:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._selected_1qmx5_34 {
  border-color: var(--lcs-color-surface-dark);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}._panelSlot_1qmx5_49 {
  /* Mobile: keep the navy help block tight under the chip row. */
  margin-top: var(--lcs-space-1);
}@media (min-width: 769px) {
  ._row_1qmx5_6 {
    /* Desktop: the handoff's single centered row. */
    flex-wrap: nowrap;
    gap: var(--lcs-space-4);
  }
  ._chip_1qmx5_15 {
    /* Handoff wants 7px vertical padding; 8 (--lcs-space-3) is closest.
     * 16px is the closest token to handoff's 17px chip type. */
    padding: var(--lcs-space-3) var(--lcs-space-5);
    font-size: var(--lcs-text-body);
  }
  ._panelSlot_1qmx5_49 {
    position: absolute;
    top: 100%;
    /* Centered under the row (and so within the card), not anchored to the
     * selected chip. `max-content` shrink-wraps the panel's 700px;
     * `max-width` keeps it inside the card on narrower desktop windows. */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 100%;
    margin-top: var(--lcs-space-5);
    /* The panel overflows the card's bottom edge (the card lifts its
     * overflow clip while help is open) — stack it above the dock it
     * overlays. */
    z-index: var(--lcs-z-popover);
  }
}@media (prefers-reduced-motion: reduce) {
  ._chip_1qmx5_15 {
    transition: none;
  }
}
}@layer features{._root_t4k44_2 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* Mobile: tighter top pad so the panel sits closer under the chips. */
  padding: var(--lcs-space-4) var(--lcs-space-5) var(--lcs-space-5);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}/* Desktop close button, overlaid on the panel's top-right corner. */._close_t4k44_14 {
  position: absolute;
  top: var(--lcs-space-3);
  right: var(--lcs-space-3);
}._word_t4k44_20 {
  margin: 0;
  font-size: var(--lcs-text-h3);
  font-weight: var(--lcs-weight-bold);
}._gloss_t4k44_26 {
  margin: var(--lcs-space-1) 0 0;
  color: var(--lcs-on-dark-75);
  font-size: var(--lcs-text-caption);
}._meta_t4k44_32 {
  margin: var(--lcs-space-3) 0 0;
  color: var(--lcs-on-dark-85);
  font-size: var(--lcs-text-caption);
}._divider_t4k44_38 {
  height: var(--lcs-border-hairline);
  margin: var(--lcs-space-4) 0;
  background-color: var(--lcs-on-dark-12);
}._loading_t4k44_44 {
  margin: var(--lcs-space-3) 0 0;
  color: var(--lcs-on-dark-75);
  font-size: var(--lcs-text-caption);
}._lessons_t4k44_50 {
  display: grid;
  margin: var(--lcs-space-3) 0 0;
  padding: 0;
  gap: var(--lcs-space-2);
  grid-template-columns: 1fr;
  list-style: none;
}._lessonRow_t4k44_59 {
  padding: var(--lcs-space-2) 0;
  color: var(--lcs-on-dark-85);
  font-size: var(--lcs-text-caption);
}@media (min-width: 769px) {
  /* 700px is the handoff's literal panel width, not a scale step. */
  ._root_t4k44_2 {
    width: 700px;
    max-width: 100%;
    /* Long taught-in lists overflow the card freely up to half the
     * viewport; past that the panel itself scrolls. */
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--lcs-space-7);
  }
  ._gloss_t4k44_26 {
    margin-top: var(--lcs-space-2);
  }
  ._meta_t4k44_32 {
    margin-top: var(--lcs-space-4);
  }
  ._divider_t4k44_38 {
    margin: var(--lcs-space-6) 0;
  }
  ._loading_t4k44_44 {
    margin-top: var(--lcs-space-4);
  }
  ._lessons_t4k44_50 {
    margin-top: var(--lcs-space-4);
    gap: var(--lcs-space-3);
    /* One full-width column, matching the flashcard finder's vocab details —
     * the handoff's two-column split read as cramped. */
    grid-template-columns: 1fr;
  }
  ._lessonRow_t4k44_59 {
    padding: var(--lcs-space-3) 0;
  }
}
}@layer features{._scrim_1r7g1_2 {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lcs-space-7);
  background-color: color-mix(in srgb, var(--lcs-color-surface-dark) 60%, transparent);
  animation: _scrimIn_1r7g1_1 var(--lcs-motion-micro) var(--lcs-ease-standard);
  inset: 0;
  z-index: var(--lcs-z-modal);
}._dialog_1r7g1_14 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* One-off geometry (no dialog-width token): phones are ≤430px, so this
   * is full-width on the small screens this modal serves and centered on
   * anything wider. */
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface-dark);
  box-shadow: var(--lcs-shadow-menu);
  animation: _dialogIn_1r7g1_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
}/* Programmatically focused on open (a11y) — never show a ring for it. */._dialog_1r7g1_14:focus {
  outline: none;
}._closeRow_1r7g1_35 {
  display: flex;
  justify-content: flex-end;
  padding: var(--lcs-space-3) var(--lcs-space-3) 0;
}@keyframes _scrimIn_1r7g1_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}@keyframes _dialogIn_1r7g1_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (prefers-reduced-motion: reduce) {
  ._scrim_1r7g1_2,
  ._dialog_1r7g1_14 {
    animation: none;
  }
}
}@layer legacy {/* Vocabulary Tagging Styles */.vocabTag {
  font-size: 12px;
  padding: 7px 5px 0;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--light);
  border: 4px solid var(--brand);
  text-align: center;
  overflow: hidden;
  margin: 5px;
  border-radius: 0;
  cursor: pointer;
  min-height: 80px;
}.vocabTagContainer {
  position: relative;
  display: inline-block;
  padding: 0px;
}.vocabTagContainer .vocabTag {
  font-size: 14px;
  margin: 0.25rem;
  min-height: 0;
  padding: 4px;
}.vocabTagContainer .vocabTag:hover {
  scale: 1.15;
}.vocabTagContainer .vocabTag.selected {
  scale: 1.15;
  background-color: var(--theme);
  border: 4px solid var(--theme);
  color: var(--light);
}.vocabTagContainer .vocabTag.selected:hover {
  scale: 1.15;
}.vocabTagContainer .vocabInfo {
  position: absolute;
  color: var(--light);
  background-color: var(--theme);
  padding: 12px;
  z-index: 1000;
  min-width: 200px;
  max-width: 350px;
  max-width: min(350px, 100vw - 40px);
}.vocabTagContainer .vocabInfo.top {
  bottom: 100%;
  margin-bottom: 4px;
}.vocabTagContainer .vocabInfo.bottom {
  top: 100%;
  margin-top: 4px;
}.vocabTagContainer .vocabInfo.center {
  left: 50%;
  transform: translateX(-50%);
}.vocabTagContainer .vocabInfo.left {
  left: 0;
  max-width: calc(100vw - 20px);
}.vocabTagContainer .vocabInfo.right {
  right: 0;
  max-width: calc(100vw - 20px);
}.vocabTagContainer .vocabInfo.positioning {
  opacity: 0;
  visibility: hidden;
}.vocabTagContainer .vocabInfo .vocabInfoHeader {
  margin-bottom: 6px;
}.vocabTagContainer .vocabInfo .vocabInfoHeader h4 {
  margin: 0 0 2px 0;
  color: var(--light);
  font-size: 18px;
  font-weight: bold;
}.vocabTagContainer .vocabInfo .vocabInfoHeader p {
  margin: 0;
  font-size: 12px;
  font-style: italic;
}.vocabTagContainer .vocabInfo .nonVerbInfo p,
.vocabTagContainer .vocabInfo .verbInfo p {
  margin: 2px 0;
  font-size: 11px;
}.vocabTagContainer .vocabInfo .nonVerbInfo p:first-child,
.vocabTagContainer .vocabInfo .verbInfo p:first-child {
  font-weight: bold;
}.vocabTagContainer .lessonsList {
  margin-top: 12px;
}.vocabTagContainer .lessonsList .inline-loading p {
  font-size: 12px;
  color: var(--light);
}.vocabTagContainer .lessonsList h4 {
  margin: 0;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--light);
  font-weight: bold;
}.vocabTagContainer .lessonsList .lessonItem {
  font-size: 11px;
}.vocabTagContainer .lessonsList .lessonItem.mainCourse {
  font-weight: bold;
}
}@layer legacy {.flashcard .customFlashcardButton.onFlashcard {
  top: 25px;
  width: fit-content;
  font-size: 10px;
  padding: 5px 10px;
  margin: 0 auto;
  z-index: 5;
  border-radius: 0;
  /* width: 170px; */
}.flashcard .customFlashcardButton.onFlashcard:hover {
  background-color: var(--brand);
  cursor: default;
}
}@layer legacy {.myFlashcardsFormContentWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}.myFlashcardsForm {
  width: 30vw;
  min-width: 360px;
  margin: 0 auto;
}@media screen and (max-width: 480px) {
  .myFlashcardsForm {
    width: 90vw;
    min-width: 280px;
  }
}/*
copied and removed from Flashcard Finder Filters

// Tab button styling
.buttonBox.header {
  width: 100%;
  margin: 0px;

  input {
    display: none;
  }

  label {
    width: 50%;
    display: block;
    text-align: center;
    padding: 10px 30px;
    font-weight: 600;
    color: var(--light);
    border: 1px solid var(--dark);
    cursor: pointer;
    border-bottom: 0px;
    background-color: var(--theme);

    &.selected {
      background-color: var(--light);
      color: var(--dark);
    }

    &:hover {
      border-color: var(--dark);
      border-bottom: none;
    }
  }
}

*/
}@layer legacy {.customQuizSettingsWrapper {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  box-sizing: border-box;
  margin: 30px auto;
}.quizSettingsWrapper {
  width: 100%;
  border: 1px solid var(--dark);
}.quizSettingsWrapper .quizSettingsHeader {
  width: 100%;
  min-height: 40px;
  margin: 0px;
  border-bottom: 1px solid var(--dark);
  font-weight: 600;
  text-align: center;
}.quizSettingsWrapper .quizSettingsHeader.titleOnly {
  background-color: var(--brand);
  color: var(--light);
  box-sizing: border-box;
  padding: 10px 30px;
  font-size: 18px;
}.quizSettingsWrapper .quizSettingsHeader.twoOptions {
  width: 100%;
  display: flex;
  flex-direction: row;
}.quizSettingsWrapper .quizSettingsHeader.twoOptions .option,
.quizSettingsWrapper .quizSettingsHeader.twoOptions div .option {
  width: 50%;
  padding: 10px 30px;
  cursor: pointer;
  background-color: var(--light);
  color: var(--dark);
}.quizSettingsWrapper .quizSettingsHeader.twoOptions .option.selected,
.quizSettingsWrapper .quizSettingsHeader.twoOptions div .option.selected {
  background-color: var(--brand);
  color: var(--light);
}.quizSettingsWrapper .quizSettingsHeader.twoOptions .option:hover,
.quizSettingsWrapper .quizSettingsHeader.twoOptions div .option:hover {
  background-color: var(--accent);
}.quizSettingsWrapper .quizSettingsHeader.twoOptions .option:last-child,
.quizSettingsWrapper .quizSettingsHeader.twoOptions div .option:last-child {
  border-left: 1px solid var(--dark);
}.quizSettingsWrapper .quizSettingsHeader.twoOptions .option input,
.quizSettingsWrapper .quizSettingsHeader.twoOptions div .option input {
  display: none;
}.quizSettingsWrapper .quizSettingsBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 14px 12px;
  background-color: var(--light);
}.quizSettingsWrapper .quizSettingsBody .toggleSwitch {
  padding-right: 0px;
}.quizSettingsWrapper .quizSettingsBody .menuRow {
  margin: 0.5rem 0;
}.quizSettingsWrapper .quizSettingsBody .menuRow:first-child {
  margin-top: 0;
}.quizSettingsWrapper .quizSettingsBody .dropdown select {
  cursor: pointer;
  padding: 5px;
}.quizSettingsWrapper .quizSettingsBody .buttonBox {
  min-width: 100px;
  width: 100%;
}.quizSettingsWrapper .quizSettingsBody .startQuizButton {
  background-color: darkgreen;
}.quizSettingsWrapper .quizSettingsBody .startQuizButton.disabled {
  background-color: var(--dark);
  cursor: not-allowed;
}.quizSettingsWrapper .quizSettingsBody .totalCount {
  font-size: 14px;
  font-style: italic;
  text-align: center;
  margin: auto;
}
}@layer legacy {/* Flashcard css */.flashcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--light);
  border: 4px solid var(--accent);
  text-align: center;
  overflow: none;
  max-width: 640px;
  width: 80vw;
  height: 320px;
  margin: 0 auto;
  margin-top: 12px;
  border-radius: 10px;
  padding: 10%;
  cursor: pointer;
}.flashcard .audioPlayPauseButton {
  color: var(--dark);
}/* Buttons */.quizButtons {
  min-width: 640px;
  width: 50%;
  margin-top: 10px;
}/* at 767px, button boxes switch from width 50% to 95% */@media screen and (max-width: 767px) {
  .quizButtons {
    min-width: 0;
    width: 70vw;
  }
}@media (max-width: 480px) {
  .audioQuizButtons,
  .quizButtons {
    min-width: 0;
    width: 90vw;
  }
  .switchOnMobile {
    flex-direction: column-reverse;
  }
  .switchOnMobile button {
    margin-top: 12px;
  }
}@media screen and (max-width: 480px) {
  .flashcard {
    min-height: 200px;
    max-height: 320px;
    height: 80vw;
    margin-top: 10vw;
    width: 90vw;
  }
  .flashcard p {
    font-size: 1.125rem;
  }
}.clickToFlipMessage {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 14px;
  font-style: italic;
}.audioControlContainer {
  position: absolute;
  bottom: 20px;
  right: 10px;
  padding: 4px;
}.flashcard .customFlashcardButton,
.flashcard .addFlashcardButton,
.flashcard .removeFlashcardButton,
.flashcard .pendingFlashcardButton {
  border-radius: 0 6px 0 0;
}.getHelpButton {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
}@layer legacy {.quizProgress {
  margin: 0 auto;
  text-align: center;
  max-width: 640px;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}@media (max-width: 480px) {
  .quizProgress {
    position: absolute;
    top: 0;
    width: 100vw;
    background-color: var(--theme);
    height: 40px;
  }
  .quizProgress.noTitle p {
    margin-bottom: 8px;
    margin-top: 10px;
  }
}.quizProgress h3 {
  margin: 0px 0 0 0;
}.quizProgress p {
  margin: 0 0 0 0;
}@media (max-width: 480px) {
  .quizProgress h3,
  .quizProgress p {
    width: 70vw;
    color: var(--light);
  }
  .quizProgress h3 {
    font-size: 0.75rem;
  }
  .quizProgress p {
    font-size: 0.75rem;
  }
}.quizProgress .progressBar {
  background-color: #d9d9d9;
  width: 100%;
  height: 4px !important;
}.quizProgress .progressBar .progressBarFill {
  background-color: var(--brand);
  display: block;
  content: "";
  width: 0;
  height: 100%;
  transition: width 0.5s;
}
}@layer legacy {.srsButtons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 41.8px;
}@media screen and (max-width: 480px) {
  .srsButtons {
    min-height: 62.8px;
  }
}.greenButton {
  background-color: darkgreen;
}.redButton {
  background-color: darkred;
}.easyBanner {
  flex-grow: 2;
  background-color: darkgreen !important;
  cursor: default !important;
}.hardBanner {
  flex-grow: 2;
  background-color: darkred !important;
  cursor: default !important;
}
}@layer legacy {.QuizEndWrapper {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
}@layer legacy {.audioControlPlayPauseButton {
  background-color: transparent;
  padding: 12px;
  cursor: pointer;
}.audioControlPlayPauseButton img {
  width: 24px;
  height: 24px;
}.audioControlPlayPauseButton:disabled {
  cursor: not-allowed;
}.audioControlPlayPauseButton:disabled:hover {
  background-color: transparent;
  filter: invert(23%) sepia(99%) saturate(2029%) hue-rotate(341deg) brightness(89%) contrast(89%);
}.audioControlPlayPauseButtonErrorIcon {
  filter: invert(23%) sepia(99%) saturate(2029%) hue-rotate(341deg) brightness(89%) contrast(89%);
}
}@layer legacy {/* Pagination Container */.pagination {
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 12px;
  padding: 0px;
  align-self: stretch;
  margin: 5px 30px;
}@media screen and (max-width: 768px) {
  .pagination {
    margin: 0;
  }
}.pagination p {
  margin: auto;
}/* Pagination Button Styles */.paginationButton {
  width: 120px;
}.paginationButton.disabled {
  background-color: var(--dark);
  cursor: disabled;
}/* Pagination Text Styles */.paginationText {
  display: inline-block;
}/* Arrow Icon Styles */.paginationArrow {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  filter: brightness(0) saturate(100%) invert(60%) sepia(14%) saturate(2020%) hue-rotate(154deg) brightness(91%) contrast(74%);
  transition: filter 0.2s ease-in-out;
}.paginationArrow.previous {
  transform: rotate(270deg);
}.paginationArrow.next {
  transform: rotate(90deg);
}/* Label and Disabled Button Styles */.label {
  text-align: center;
  font-family: "Poppins", "Avenir", "Helvetica", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 30px;
  color: var(--light);
  background-color: var(--brand);
  border: none;
  cursor: default;
  /* align text vertically  */
  display: flex;
  justify-content: center;
  align-items: center;
}/* Mobile Styles - Show arrows instead of text on mobile */@media screen and (max-width: 480px) {
  .paginationButton,
  .paginationButton.disabled {
    background-color: transparent;
  }
  .paginationText {
    display: none;
  }
  .paginationArrow.previous,
  .paginationArrow.next {
    display: inline-block;
    margin-left: 0;
  }
  .paginationButton,
  .label {
    width: auto;
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
  }
  .paginationArrow.disabled {
    color: var(--light);
    filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(43%) hue-rotate(138deg) brightness(100%) contrast(78%);
    cursor: disabled;
  }
}
}@layer legacy {.linkButton.disabled {
  background-color: var(--dark);
  cursor: disabled;
}.linkButton.disabled:hover {
  background-color: var(--dark);
  cursor: disabled;
}
}@layer legacy {/* ------------------ SectionHeader --------- */.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 2px solid #e0e0e0;
  padding: 10px;
}.sectionHeader .titleSection {
  display: flex;
  align-items: flex-start;
}.sectionHeader .titleSection .titleWrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 2rem;
}.sectionHeader .titleSection .titleWrapper:hover {
  background-color: lightgray;
  border-radius: 5px;
}.sectionHeader .titleSection h2,
.sectionHeader .titleSection h3 {
  margin: 0.5rem;
  text-wrap: nowrap;
  margin-right: 2rem !important;
}.sectionHeader .titleSection button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}.sectionHeader .titleSection button .colapsableMenuArrow {
  color: black;
  width: 1rem;
  height: 1rem;
}.sectionHeader .titleSection div.button {
  margin-left: auto;
}.sectionHeader button.newRecordButton {
  background-color: darkgreen;
  padding: 10px 30px;
  cursor: pointer;
}.viewRecordIconCell {
  position: relative;
}.viewRecordIconCell .viewRecordIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
}.viewRecordIconCell:hover {
  background-color: lightgray !important;
}.monthSelectorContainer {
  margin: 0.5rem;
}.monthSelectorLabel {
  margin-right: 1rem;
}
}@layer legacy {/*      Toggle Switch Styling *//* Toggle Switch - Main parent + label text */.toggleSwitch {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 15%;
}@media screen and (max-width: 768px) {
  .toggleSwitch {
    padding-right: 0px;
  }
}.toggleSwitch p {
  cursor: default;
  margin: 8px 0px;
  max-width: 70%;
}/* The switch - the box around the slider */.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  /* do not let it flex grow */
  flex-grow: 0;
}/* The slider */.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}input:checked + .slider {
  background-color: var(--brand);
}input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}/* Rounded sliders */.slider.round {
  border-radius: 34px;
}.slider.round:before {
  border-radius: 50%;
}
}@layer legacy {.searchTermBox {
  display: flex;
  flex-direction: row;
  height: 41px;
}.clearSearchButton.disabled {
  visibility: hidden;
  width: 98px;
  height: 0px;
  opacity: 0;
  pointer-events: none;
}/* ------------------ TagFilter ------------------ */.tagSearchBox {
  position: relative;
}#vocabTagging .tagSuggestionBox {
  position: absolute;
  max-width: 640px;
  width: 100%;
  top: 94px;
  left: 0px;
  z-index: 999;
}.tagSuggestionBox .noTagSuggestions {
  background-color: var(--light);
  border: 4px solid var(--brand);
  color: var(--dark);
  font-size: 14px;
  margin: 0;
  padding: 12px;
  text-align: left;
}.confirmSubmissionBox form {
  background-color: var(--light);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 50%;
}/* Vocabulary Tagging Styles */.vocabTagBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 12px;
  width: 90%;
}.vocabTag {
  font-size: 12px;
  padding: 7px 5px 0;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--light);
  border: 4px solid var(--brand);
  text-align: center;
  overflow: hidden;
  margin: 5px;
  border-radius: 0;
  cursor: pointer;
  min-height: 80px;
}.tagSuggestionBox .vocabTag {
  margin: 0px;
}.removeTagButton {
  background-color: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 0;
  margin: 0;
  height: 14px;
  width: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}/* ------------------ SelectedTags ------------------ */.selectedTagsBox {
  width: 100%;
  margin: 0px 12px;
}@media screen and (max-width: 768px) {
  .selectedTagsBox {
    margin: 0px;
  }
}.selectedTagsBox p {
  text-align: left;
}.selectedVocab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 60vw;
}@media screen and (max-width: 768px) {
  .selectedVocab {
    max-width: 100%;
  }
}.selectedVocab .tagCard {
  margin: 2px 4px;
}.selectedVocab .tagCard.outOfRange {
  opacity: 0.65;
}.selectedVocab .tagCard.outOfRange div {
  border-color: var(--error-bg);
}.selectedVocab .outOfRangeNotice {
  color: var(--error-bg);
  font-size: 10px;
  font-style: italic;
  margin: 0;
}@media screen and (max-width: 768px) {
  .selectedVocab .tagCard {
    height: auto;
  }
  .selectedVocab .tagCard div {
    min-height: 80px;
    padding: 8px;
  }
}
}@layer primitives{._root_xwdpu_2 {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--lcs-space-3);
  border: none;
  margin: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--lcs-font-sans);
  font-weight: var(--lcs-weight-bold);
  line-height: 1;
  text-align: center;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_xwdpu_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._root_xwdpu_2:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}/* Sizes — min-height rather than height so a wrapped label still fits. */._md_xwdpu_31 {
  min-height: var(--lcs-control-height);
  padding: var(--lcs-space-5) var(--lcs-space-7);
  border-radius: var(--lcs-radius-lg);
  font-size: var(--lcs-text-control);
}._sm_xwdpu_38 {
  min-height: var(--lcs-control-height-sm);
  padding: var(--lcs-space-4) var(--lcs-space-7);
  border-radius: var(--lcs-radius-lg);
  font-size: var(--lcs-text-action);
}._inline_xwdpu_45 {
  padding: 0;
  border-radius: var(--lcs-radius-sm);
  font-size: var(--lcs-text-control);
}/* Primary */._primary_xwdpu_52 {
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._primary_xwdpu_52:hover:not(:disabled) {
  background-color: var(--lcs-color-action-hover);
}/* Secondary */._secondary_xwdpu_62 {
  border: var(--lcs-control-border) solid var(--lcs-color-action);
  color: var(--lcs-color-action);
}._secondary_xwdpu_62:hover:not(:disabled) {
  background-color: var(--lcs-tint-hover);
}/* Ghost */._ghost_xwdpu_72 {
  color: var(--lcs-color-action);
}._ghost_xwdpu_72:hover:not(:disabled) {
  color: var(--lcs-color-action-hover);
}._ghost_xwdpu_72._muted_xwdpu_80 {
  color: var(--lcs-color-muted);
}._ghost_xwdpu_72._muted_xwdpu_80:hover:not(:disabled) {
  color: var(--lcs-color-ink);
}/* Destructive */._destructive_xwdpu_89 {
  background-color: var(--lcs-color-error);
  color: var(--lcs-color-on-action);
}._destructive_xwdpu_89:hover:not(:disabled) {
  filter: brightness(0.9);
}/* On a Deep Navy surface */._onDark_xwdpu_99._primary_xwdpu_52 {
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._onDark_xwdpu_99._secondary_xwdpu_62 {
  border-color: var(--lcs-on-dark-45);
  color: var(--lcs-color-on-surface-dark);
}._onDark_xwdpu_99._secondary_xwdpu_62:hover:not(:disabled) {
  background-color: var(--lcs-on-dark-12);
}._onDark_xwdpu_99._ghost_xwdpu_72,
._onDark_xwdpu_99._ghost_xwdpu_72._muted_xwdpu_80 {
  color: var(--lcs-on-dark-85);
}._onDark_xwdpu_99._ghost_xwdpu_72:hover:not(:disabled),
._onDark_xwdpu_99._ghost_xwdpu_72._muted_xwdpu_80:hover:not(:disabled) {
  color: var(--lcs-color-on-surface-dark);
}@media (prefers-reduced-motion: reduce) {
  ._root_xwdpu_2 {
    transition: none;
  }
}
}@layer legacy {img.icon {
  width: 16px;
}.popup img.icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}.popup .inner {
  position: relative;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  color: black;
}.popup .inner h1 {
  color: black;
  font-size: 1.5em;
  margin: 0 0 10px;
}#closeButton {
  background-color: white;
  color: black;
  border: 2px solid #545454;
}
}@layer features{/* Full-bleed parchment fill, same technique as `AudioQuizEndV2.module.scss` /
 * `TextQuizV2.module.scss` — the legacy pages this mounts inside give no
 * height of their own. */._root_ziv5l_5 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 390px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  padding: 20px 16px;
  gap: 16px;
  min-height: calc(100vh - var(--lcs-app-header-height));
  min-height: calc(100dvh - var(--lcs-app-header-height));
}._card_ziv5l_23,
._navyCard_ziv5l_24,
._whiteCard_ziv5l_25 {
  display: flex;
  flex-direction: column;
  border-radius: var(--lcs-radius-xl);
  gap: 14px;
}._card_ziv5l_23 {
  padding: 20px;
  background-color: var(--lcs-color-surface);
}._heading_ziv5l_37 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h2);
  font-weight: var(--lcs-weight-bold);
  line-height: 1.25;
}._body_ziv5l_45 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-control);
  line-height: var(--lcs-line-body);
  text-wrap: pretty;
}._primary_ziv5l_53,
._secondary_ziv5l_54 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-lg);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--lcs-weight-bold);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._primary_ziv5l_53:focus-visible,
._secondary_ziv5l_54:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._primary_ziv5l_53 {
  height: 52px;
  border: none;
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
  font-size: var(--lcs-text-body);
}._primary_ziv5l_53:hover {
  background-color: var(--lcs-color-action-hover);
}._secondary_ziv5l_54 {
  height: 44px;
  border: var(--lcs-control-border) solid var(--lcs-color-action);
  background-color: transparent;
  color: var(--lcs-color-action);
  font-size: var(--lcs-text-control);
}._secondary_ziv5l_54:hover {
  background-color: var(--lcs-tint-hover);
}._homeLink_ziv5l_95 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--lcs-space-2);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-action);
  font-weight: var(--lcs-weight-bold);
  text-decoration: none;
}._homeLink_ziv5l_95:hover {
  color: var(--lcs-color-ink);
}._homeLink_ziv5l_95:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
  border-radius: var(--lcs-radius-sm);
}._navyCard_ziv5l_24 {
  padding: var(--lcs-space-7);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
  gap: var(--lcs-space-2);
}._navyBody_ziv5l_123 {
  margin: 0;
  color: var(--lcs-on-dark-85);
  font-size: var(--lcs-text-caption);
  line-height: var(--lcs-line-body);
  text-wrap: pretty;
}._dueCount_ziv5l_131 {
  margin: 0;
  color: var(--lcs-color-on-surface-dark);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._whiteCard_ziv5l_25 {
  padding: var(--lcs-space-7);
  background-color: var(--lcs-color-surface);
  gap: var(--lcs-space-4);
}@media (prefers-reduced-motion: reduce) {
  ._primary_ziv5l_53,
  ._secondary_ziv5l_54 {
    transition: none;
  }
}
}@layer features{._root_1qalc_2 {
  display: none;
}@media (min-width: 769px) {
  ._root_1qalc_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Ghost under the dock — softer than body muted. */
    color: var(--lcs-color-placeholder);
    font-size: var(--lcs-text-caption-mobile);
    gap: var(--lcs-space-3);
    row-gap: var(--lcs-space-2);
  }
}._item_1qalc_18 {
  display: inline-flex;
  align-items: center;
  gap: var(--lcs-space-2);
}._sep_1qalc_24 {
  margin-right: var(--lcs-space-2);
  color: var(--lcs-border-card);
}/* White keycap shell — shared by ← / ↑ / → / 1 / 2. Keep bg/border opaque;
 * mute only the glyph span so the plate never reads flat grey. */._key_1qalc_31 {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 var(--lcs-space-2);
  border: var(--lcs-control-border) solid rgba(60, 60, 60, 0.25);
  border-radius: var(--lcs-radius-sm);
  background-color: #ffffff;
  color: var(--lcs-color-ink);
  font-family: inherit;
  font-size: var(--lcs-text-caption-mobile);
  line-height: 1;
}/* Flip (↑) is the primary shortcut — full ink + bold. */._strong_1qalc_49 {
  color: var(--lcs-color-ink);
  font-weight: var(--lcs-weight-bold);
  opacity: 1;
}/* Arrow glyphs only — shell stays solid white. */._muted_1qalc_56 {
  color: var(--lcs-color-ink);
  font-weight: var(--lcs-weight-regular);
  opacity: 0.85;
}
}@layer features{/* 34×34 is the handoff's literal one-off tile size, not a scale step.
 * Radius is forced to 8px (md) with overflow clip so Icon SVG chrome cannot
 * read the tinted tile as a circle. */._root_4d64g_5 {
  display: inline-flex;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 1px plate edge so the 34×34 / r8 tile reads as a square, not a circle. */
  border: 1px solid rgba(68, 154, 194, 0.35);
  border-radius: 8px;
  overflow: hidden;
  /* Stronger literal tint so the filled square reads vs parchment; icon stays
   * Celestial Blue (never white / on-action). */
  background-color: rgba(68, 154, 194, 0.2);
  color: #449ac2;
  cursor: pointer;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_4d64g_5 svg {
  color: #449ac2;
  stroke: #449ac2;
  fill: none;
  opacity: 1;
  stroke-width: 2.25;
}._root_4d64g_5:hover:not(:disabled) {
  background-color: var(--lcs-tint-hover);
}._root_4d64g_5:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (prefers-reduced-motion: reduce) {
  ._root_4d64g_5 {
    transition: none;
  }
}
}@layer features{/* 20px is the handoff's literal frame radius — outside the token scale
 * (sm/md/lg/xl/pill = 6/8/10/14/999), so it is a documented one-off rather
 * than a snap to the nearest step. */._root_1obkz_5 {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  /* Clip to radius so hint/help never visually “escape” the white plate. */
  overflow: hidden;
  padding: var(--lcs-space-7);
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: 20px;
  /* Flat plate — no drop shadow (handoff is hairline border only). */
  box-shadow: none;
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: pointer;
  gap: var(--lcs-space-5);
  text-align: center;
}/* SRS only. The transition times the spring-back when a drag doesn't clear
 * the grade threshold; `touch-action: pan-y` lets a vertical page scroll
 * through while still capturing the horizontal swipe gesture. */._swipeable_1obkz_29 {
  touch-action: pan-y;
  transition: transform var(--lcs-motion-micro) var(--lcs-ease-standard);
  user-select: none;
}/* Full-card swipe tints, stacked above the card background and below its
 * content (which relies on normal flow to stack over these two absolutely
 * positioned, `pointer-events: none` layers). The handoff's rgba(184,50,50)
 * and rgba(78,107,65) are exactly `--lcs-color-error`/`--lcs-color-success`,
 * so those tokens are mixed to the handoff's literal 14% rather than
 * hardcoding the colors. */._tintHard_1obkz_41,
._tintEasy_1obkz_42 {
  position: absolute;
  inset: 0;
  /* The card's own `overflow: hidden` clips these to its radius, but help
   * open lifts that clip (see the desktop block below) — so the tints carry
   * the radius themselves. */
  border-radius: inherit;
  pointer-events: none;
}._tintHard_1obkz_41 {
  background-color: color-mix(in srgb, var(--lcs-color-error) 14%, transparent);
}._tintEasy_1obkz_42 {
  background-color: color-mix(in srgb, var(--lcs-color-success) 14%, transparent);
}._root_1obkz_5:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._utilityRow_1obkz_65 {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}/* Stronger Dorado on the favourite star — muted token alone can read soft
 * gray next to the blue audio tile on help chrome. margin-inline-start: auto
 * keeps the star on the right when the audio tile is absent (CardAudioButton
 * renders nothing). */._favourite_1obkz_77 {
  margin-inline-start: auto;
  color: #6f6259;
}._favourite_1obkz_77 svg {
  color: #6f6259;
  stroke: currentColor;
}._content_1obkz_86 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  gap: var(--lcs-space-7);
}/* Left-aligns so the sentence does not move as the help panel grows. */._content_1obkz_86._helpOpen_1obkz_98 {
  justify-content: flex-start;
}._face_1obkz_102 {
  /* Handoff wants 26px mobile / 36px desktop — outside the type scale
   * (body 16 / h3 18 / display-mobile 28 / display 40), so these are
   * documented one-offs rather than snaps to the nearest step.
   * Prompt/English stays regular 400 — never inherit parent bold. */
  font-size: 26px;
  font-weight: var(--lcs-weight-regular);
  line-height: 1.35;
  text-wrap: pretty;
}/* Explicit regular on non-bold runs so they cannot inherit bold. */._regular_1obkz_114 {
  font-weight: var(--lcs-weight-regular);
}/* Every Spanish run, always — plain sentences, the Spanish stretch of a
 * Spanglish sentence, everything: bold AND italic, so Spanish reads as
 * emphasis against any regular (embedded English) text on the same face. */._bold_1obkz_121 {
  font-style: italic;
  font-weight: var(--lcs-weight-bold);
}._helpContent_1obkz_126 {
  width: 100%;
  animation: _helpContentIn_1obkz_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
  cursor: default;
  text-align: left;
}@media (max-width: 768px) {
  ._helpContent_1obkz_126 {
    /* Floor under the in-flow navy panel so Hide help isn’t crowded. */
    padding-bottom: var(--lcs-space-4);
  }
}._helpButtonRow_1obkz_139 {
  display: flex;
  flex: none;
  justify-content: center;
  cursor: default;
}._hint_1obkz_146 {
  flex: none;
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  text-align: center;
}@keyframes _helpContentIn_1obkz_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (min-width: 769px) {
  ._root_1obkz_5 {
    padding: var(--lcs-space-8);
  }
  /* Desktop help: let the word panel spill past the card's bottom edge and
   * overlay the dock rather than trapping it in the card's scroll region.
   * The panel caps itself at 50vh and scrolls internally beyond that (see
   * `WordPanel.module.scss`); the swipe tints keep the radius clip via their
   * own `border-radius: inherit`. Mobile is untouched — its word details
   * live in `WordPanelModal`, outside the card entirely. */
  ._root_1obkz_5._helpOpen_1obkz_98 {
    overflow: visible;
  }
  ._content_1obkz_86._helpOpen_1obkz_98 {
    overflow-y: visible;
  }
  ._face_1obkz_102 {
    font-size: 36px;
    line-height: 1.25;
  }
  ._hint_1obkz_146 {
    padding-bottom: var(--lcs-space-6);
  }
}@media (prefers-reduced-motion: reduce) {
  ._helpContent_1obkz_126 {
    animation: none;
  }
  /* Snaps the spring-back instantly instead of animating it. The rotate
   * term of the drag transform itself is zeroed in JS — see
   * `prefersReducedMotion` in `QuizCard.tsx`. */
  ._swipeable_1obkz_29 {
    transition: none;
  }
}
}@layer features{._root_1c00k_2 {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--lcs-space-4);
}/* 52/56px are the handoff's literal dock button heights, not scale steps. */._slot_1c00k_10 {
  display: flex;
  min-height: 52px;
}._placeholder_1c00k_15 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  /* Parchment page fill + card border — 1px so the hairline-tone ring stays
   * readable on parchment in 2× mobile captures (0.5px often vanishes). */
  border: 1px solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-page);
  box-shadow: none;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-regular);
  text-align: center;
}._buttons_1c00k_32 {
  display: flex;
  width: 100%;
  gap: var(--lcs-space-3);
}._hard_1c00k_38,
._easy_1c00k_39,
._previous_1c00k_40,
._next_1c00k_41 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-lg);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  gap: var(--lcs-space-3);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._hard_1c00k_38:focus-visible,
._easy_1c00k_39:focus-visible,
._previous_1c00k_40:focus-visible,
._next_1c00k_41:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._hard_1c00k_38 {
  border: var(--lcs-control-border) solid color-mix(in srgb, var(--lcs-color-error) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-error) 8%, transparent);
  color: var(--lcs-color-error);
}._hard_1c00k_38:hover {
  background-color: color-mix(in srgb, var(--lcs-color-error) 14%, transparent);
}._easy_1c00k_39 {
  border: var(--lcs-control-border) solid color-mix(in srgb, var(--lcs-color-success) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-success) 8%, transparent);
  color: var(--lcs-color-success);
}._easy_1c00k_39:hover {
  background-color: color-mix(in srgb, var(--lcs-color-success) 14%, transparent);
}/* White plate + blue stroke vs solid Next — transparent/token fills read
 * as a light-blue filled chip in mobile-help captures. */._previous_1c00k_40 {
  border: 1.5px solid #449ac2;
  background-color: var(--lcs-color-surface);
  color: #449ac2;
}._previous_1c00k_40:hover:not(:disabled) {
  background-color: var(--lcs-tint-hover);
}._previous_1c00k_40:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}._next_1c00k_41 {
  border: var(--lcs-control-border) solid var(--lcs-color-action);
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._next_1c00k_41:hover {
  border-color: var(--lcs-color-action-hover);
  background-color: var(--lcs-color-action-hover);
}._swipeCaption_1c00k_111 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  text-align: center;
}@media (min-width: 769px) {
  ._slot_1c00k_10 {
    min-height: 56px;
  }
  ._buttons_1c00k_32 {
    gap: var(--lcs-space-7);
  }
  ._swipeCaption_1c00k_111 {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {
  ._hard_1c00k_38,
  ._easy_1c00k_39,
  ._previous_1c00k_40,
  ._next_1c00k_41 {
    transition: none;
  }
}
}@layer features{._root_w9539_2 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-4);
}._mobileRow_w9539_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}._position_w9539_14 {
  flex: 1;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
  text-align: center;
}._miniPill_w9539_22 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* Handoff: padding 4px 10px — keep soft pastel pill, not icon discs. */
  padding: 4px 10px;
  border-radius: var(--lcs-radius-pill);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
  gap: 6px;
}/* Soft 1.5px / 35% ring + 6% pastel fill. Glyphs MUST stay error/success
 * ink (never white / on-action) — force stroke+color on the SVG. */._miniPill_w9539_22._hard_w9539_36 {
  border: 1.5px solid color-mix(in srgb, var(--lcs-color-error) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-error) 6%, transparent);
  color: var(--lcs-color-error);
}._miniPill_w9539_22._hard_w9539_36 svg {
  color: var(--lcs-color-error) !important;
  stroke: var(--lcs-color-error) !important;
  fill: none !important;
  opacity: 1;
  stroke-width: 1.75;
}._miniPill_w9539_22._easy_w9539_49 {
  border: 1.5px solid color-mix(in srgb, var(--lcs-color-success) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-success) 6%, transparent);
  color: var(--lcs-color-success);
}._miniPill_w9539_22._easy_w9539_49 svg {
  color: var(--lcs-color-success) !important;
  stroke: var(--lcs-color-success) !important;
  fill: none !important;
  opacity: 1;
  stroke-width: 1.75;
}._desktopRow_w9539_62 {
  display: none;
}._leftGroup_w9539_66 {
  display: flex;
  /* Arrow pinned to the TOP of the row — bottom-aligned it read as hanging
   * off the title's baseline. */
  align-items: flex-start;
  gap: var(--lcs-space-4);
  min-width: 0;
}._positionDesktop_w9539_75 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
}._title_w9539_81 {
  margin: var(--lcs-space-1) 0 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h3);
  font-weight: var(--lcs-weight-bold);
}._track_w9539_88 {
  height: 4px;
  overflow: hidden;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-border-card);
}._fill_w9539_95 {
  height: 100%;
  border-radius: inherit;
  background-color: var(--lcs-color-action);
  transition: width var(--lcs-motion-panel) var(--lcs-ease-standard);
}@media (min-width: 769px) {
  ._mobileRow_w9539_8 {
    display: none;
  }
  ._desktopRow_w9539_62 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lcs-space-9);
  }
}@media (prefers-reduced-motion: reduce) {
  ._fill_w9539_95 {
    transition: none;
  }
}
}@layer features{._root_1a3ic_2 {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Vertical capsules — handoff 44×68, icon stacked over count. */
  width: 44px;
  min-height: 68px;
  padding: var(--lcs-space-5) var(--lcs-space-4);
  border-radius: var(--lcs-radius-pill);
  gap: var(--lcs-space-1);
}/* Soft pastel pills: 8% fill + 35% border like the handoff. Glyphs stay
 * error/success-colored — never white / on-action. */._error_1a3ic_20 {
  border: var(--lcs-border-hairline) solid color-mix(in srgb, var(--lcs-color-error) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-error) 8%, transparent);
  color: var(--lcs-color-error);
}._error_1a3ic_20 svg {
  color: var(--lcs-color-error);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}._success_1a3ic_32 {
  border: var(--lcs-border-hairline) solid color-mix(in srgb, var(--lcs-color-success) 35%, transparent);
  background-color: color-mix(in srgb, var(--lcs-color-success) 8%, transparent);
  color: var(--lcs-color-success);
}._success_1a3ic_32 svg {
  color: var(--lcs-color-success);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}/* -64px is the handoff's literal flanking offset, not a scale step. */._left_1a3ic_45 {
  left: -64px;
}._right_1a3ic_49 {
  right: -64px;
}._count_1a3ic_53 {
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
}@media (min-width: 769px) {
  ._root_1a3ic_2 {
    display: flex;
  }
}
}@layer features{/*
 * No `PageShell` here on purpose: this is a feature component, not a page
 * (compare `customQuiz/CustomQuizSetup`, which is also unwrapped). It mounts
 * inside legacy pages (`ReviewMyFlashcards`, `CombinedCustomQuiz`, `OfficialQuiz`)
 * that do not wrap it in `PageShell`, so this component paints its own
 * `--lcs-color-page` background instead of inheriting the old paper texture.
 * The 860px-max inner column reuses the same page-padding tokens `PageShell`
 * switches on at the same breakpoint.
 */._root_18mif_11 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 860px;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0 auto;
  /* Full-bleed page color: the column is 860px wide but legacy wrappers leave
   * the old parchment texture visible on the sides — box-shadow + clip-path
   * paints `--lcs-color-page` across the full viewport width. */
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  /* Bottom padding matches the top: the keyboard legend (desktop) and the
   * dock buttons (mobile) are the last elements, and neither should sit
   * flush against the bottom edge of the page. */
  padding: var(--lcs-space-9) var(--lcs-page-pad);
  gap: var(--lcs-space-9);
  /* Fill exactly the viewport the app chrome leaves behind. In the real
   * app the quiz is mounted inside legacy pages (`ReviewMyFlashcards`,
   * `CombinedCustomQuiz`, `OfficialQuiz`) whose plain block wrappers give
   * no height, so `flex: 1` alone collapsed the card to content height.
   * A definite height here is what lets `.cardRow`'s `flex: 1` stretch the
   * card; over-tall help content then scrolls inside the card (`.content`
   * in `QuizCard`) instead of pushing the dock off screen. Where a flex
   * ancestor does provide height (the gauntlet specimen), `flex: 1` wins
   * and this is ignored. */
  height: calc(100vh - var(--lcs-app-header-height));
  height: calc(100dvh - var(--lcs-app-header-height));
}._cardRow_18mif_35 {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}._empty_18mif_51 {
  margin: auto;
  color: var(--lcs-color-muted);
  text-align: center;
}@media (max-width: 768px) {
  ._root_18mif_11 {
    padding: var(--lcs-space-6) var(--lcs-page-pad-narrow);
    gap: var(--lcs-space-6);
    /* The fixed `PrimaryTabBar` covers the bottom edge on mobile; `App`
     * reserves exactly `--lcs-mobile-tabbar-offset` of room for it (0px
     * when the bar isn't mounted). Only subtracted here, below 768px —
     * the bar is `display: none` on desktop even when the flag sets the
     * variable. */
    height: calc(100vh - var(--lcs-app-header-height) - var(--lcs-mobile-tabbar-offset, 0px));
    height: calc(100dvh - var(--lcs-app-header-height) - var(--lcs-mobile-tabbar-offset, 0px));
  }
}
}@layer features {/*
 * Full-bleed parchment fill for the loading state only, same technique as
 * `TextQuizV2.module.scss` (see that file's header comment for the full
 * rationale). This screen mounts inside legacy pages that give no
 * background of their own, so without this the `Loading` spinner would
 * flash the old paper texture while examples are still loading.
 */._loadingRoot_wqsqa_8 {
  display: flex;
  width: 100%;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  min-height: calc(100vh - var(--lcs-app-header-height));
  min-height: calc(100dvh - var(--lcs-app-header-height));
}
}@layer primitives {._root_1cafo_1 {
  display: flex;
  min-width: 0;
  flex-direction: column;
}._label_1cafo_7 {
  margin-bottom: var(--lcs-space-2);
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
  line-height: var(--lcs-line-body);
}._hint_1cafo_15 {
  margin-top: var(--lcs-space-2);
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._error_1cafo_22 {
  margin-top: var(--lcs-space-2);
  color: var(--lcs-color-error);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._labelError_1cafo_29 {
  color: var(--lcs-color-error);
}
}@layer primitives{._root_nog1f_2 {
  box-sizing: border-box;
  width: 100%;
  height: var(--lcs-control-height);
  padding: 0 var(--lcs-space-6);
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  font-family: inherit;
  font-size: var(--lcs-text-control);
  transition: border-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_nog1f_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/* Required scope controls carry the action border. */._emphasis_nog1f_22 {
  border-color: var(--lcs-color-action);
}._invalid_nog1f_26 {
  border-color: var(--lcs-color-error);
}._root_nog1f_2:disabled {
  background-color: var(--lcs-color-page);
  color: var(--lcs-color-muted);
  cursor: not-allowed;
}/**
 * Shown in place of the control when its value is fixed. Deliberately not a
 * disabled `select` — a greyed dropdown reads as broken rather than inactive.
 */._readout_nog1f_40 {
  box-sizing: border-box;
  width: 100%;
  height: var(--lcs-control-height);
  padding: 0 var(--lcs-space-6);
  border: var(--lcs-control-border) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-page);
  color: var(--lcs-color-muted);
  font-family: inherit;
  font-size: var(--lcs-text-control);
}._readout_nog1f_40:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (prefers-reduced-motion: reduce) {
  ._root_nog1f_2 {
    transition: none;
  }
}
}@layer legacy {.quizSelector {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  margin: 0 auto;
  justify-content: space-between;
  width: 50%;
}@media screen and (max-width: 800px) {
  .quizSelector {
    width: 70vw;
  }
}@media screen and (max-width: 480px) {
  .quizSelector {
    width: 90vw;
  }
}.quizMenu {
  margin-bottom: 20px;
  height: 65px;
  text-align: center;
}
}@layer features{._column_1ed4b_2 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-7);
}._title_1ed4b_8 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-body);
}._body_1ed4b_16 {
  display: flex;
  flex-direction: column;
  padding: var(--lcs-space-8);
  gap: var(--lcs-space-7);
}/* The group row is deliberately quiet: plain text plus a small ghost
 * button, so it reads as settled rather than as another choice to make
 * every time — the quiz field below is where attention should go. */._groupRow_1ed4b_26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lcs-space-5);
}._groupInfo_1ed4b_33 {
  min-width: 0;
}/*
 * Shared by the static "Course" heading and the "Course" `<label>` shown
 * while editing, so the caption never changes style when you tap "Change".
 * Copies `Eyebrow`'s look rather than reusing it, because `Eyebrow` cannot
 * render as a `<label for>`.
 */._groupLabel_1ed4b_43 {
  display: block;
  margin: 0;
  color: var(--lcs-color-label);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-eyebrow);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: var(--lcs-tracking-eyebrow);
  line-height: var(--lcs-line-tight);
  text-align: inherit;
  text-transform: uppercase;
}._groupName_1ed4b_56 {
  margin-top: 2px;
  overflow: hidden;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}._groupField_1ed4b_66 {
  min-width: 0;
  flex: 1;
}/*
 * Keeps the selected course reading the same size and weight as the static
 * `.groupName` text it replaces, not the smaller regular-weight control
 * font every other `Select` uses. Targeting the element rather than a class
 * from the `Select` module is deliberate: this is a features-layer override
 * of a primitive, which the cascade layers are built to allow.
 */._groupSelect_1ed4b_78 {
  margin-top: 2px;
}._groupSelect_1ed4b_78 select {
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
}/* Separates the settled group row from the field the learner actually
 * changes on every visit. */._quizField_1ed4b_89 {
  padding-top: var(--lcs-space-6);
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}._cta_1ed4b_94 {
  display: flex;
  justify-content: center;
}._actions_1ed4b_99 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lcs-space-3);
}._ctaSecondary_1ed4b_106 {
  display: flex;
  flex-direction: column;
  align-items: center;
}._cta_1ed4b_94 > button {
  width: 100%;
  max-width: 320px;
}@media (max-width: 768px) {
  ._title_1ed4b_8 {
    display: none;
  }
  ._ctaSecondary_1ed4b_106 {
    display: none;
  }
}@media (min-width: 769px) {
  /* A single setup card reads as swimming in whitespace at the full 1240px
   * measure, so it keeps its own, narrower column on top of PageShell's. */
  ._column_1ed4b_2 {
    max-width: 560px;
    margin: 0 auto;
  }
  ._body_1ed4b_16 {
    padding: var(--lcs-space-9);
  }
  ._groupName_1ed4b_56 {
    font-size: var(--lcs-text-h3);
  }
  ._groupSelect_1ed4b_78 select {
    font-size: var(--lcs-text-h3);
  }
  ._cta_1ed4b_94 > button {
    width: auto;
    min-width: 240px;
  }
}
}@layer legacy {/* AudioQuizButtons */.audioQuizButtons {
  min-width: 320px;
  width: 50vw;
}button:disabled {
  background-color: var(--dark);
  color: var(--light);
  cursor: not-allowed;
}@media (max-width: 480px) {
  .audioQuizButtons {
    min-width: 0;
    width: 90vw;
  }
  .switchOnMobile {
    flex-direction: column-reverse;
  }
  .switchOnMobile button {
    margin-top: 12px;
  }
}/* AudioFlashcardComponent */.audioFlashcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* overflow: hidden; */
  text-align: center;
  /* color: var(--light) !important; */
  background-color: var(--dark);
  max-width: 640px;
  width: 80vw;
  height: 320px;
  margin: 0 auto;
  margin-top: 12px;
  border-radius: 10px;
  cursor: pointer;
}.audioFlashcard .AddPendingRemoveButtons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  border-top-right-radius: 10px;
  width: 200px;
  height: 50px;
  overflow: hidden;
}.audioPlayPauseButton {
  background-color: transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 12px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  z-index: 5;
}.audioPlayPauseButton img {
  width: 24px;
  height: 24px;
}.audioFlashcardText {
  color: var(--light) !important;
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0;
  padding: 10%;
  z-index: 5;
}.progressStatus {
  z-index: 1;
}.getHelpContainer {
  z-index: 5;
}.getHelpButton {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}.audioFlashcard .vocabTag.selected {
  background-color: var(--brand);
  border: 4px solid var(--brand);
}@media screen and (max-width: 480px) {
  .audioFlashcard {
    min-height: 200px;
    max-height: 320px;
    height: 80vw;
    margin-top: 10vw;
  }

  .audioFlashcardText {
    font-size: 1.125rem;
  }
}/* AudioQuizSetupMenu */.audioQuizSetupMenu {
  max-width: 400px;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}.audioQuizSetupMenu div.form {
  max-width: 320px;
  width: 90%;
}/* .menuRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
} */.audioQuizSetupMenu .buttonBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}.audioQuizSetupMenu .buttonBox p {
  margin: 16px auto;
}@media (max-width: 480px) {
  .audioQuizSetupMenu {
    width: 98vw;
  }
}
}
@layer features{/* Full-bleed parchment fill, same technique as `AudioQuizV2.module.scss` /
 * `TextQuizV2.module.scss` — the legacy pages this mounts inside give no
 * height of their own. */._root_1seo0_5 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 390px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  padding: 20px 16px;
  gap: 16px;
  min-height: calc(100vh - var(--lcs-app-header-height));
  min-height: calc(100dvh - var(--lcs-app-header-height));
}._card_1seo0_23,
._navyCard_1seo0_24,
._whiteCard_1seo0_25 {
  display: flex;
  flex-direction: column;
  border-radius: var(--lcs-radius-xl);
  gap: 14px;
}._card_1seo0_23 {
  padding: 20px;
  background-color: var(--lcs-color-surface);
}._heading_1seo0_37 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h2);
  font-weight: var(--lcs-weight-bold);
  line-height: 1.25;
}._body_1seo0_45 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-control);
  line-height: var(--lcs-line-body);
  text-wrap: pretty;
}._countdownSection_1seo0_53 {
  display: flex;
  flex-direction: column;
  padding-top: var(--lcs-space-6);
  border-top: var(--lcs-border-hairline) solid var(--lcs-border-card);
  gap: var(--lcs-space-3);
}._countdownRow_1seo0_61 {
  display: flex;
  align-items: flex-start;
  gap: var(--lcs-space-3);
  color: var(--lcs-color-action);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}/* Two fixed lines instead of one wrapping sentence — keeps the card's
 * height stable as the countdown's digit count changes. */._countdownText_1seo0_72 {
  display: flex;
  flex-direction: column;
}._countdownTrack_1seo0_77 {
  height: 4px;
  overflow: hidden;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-border-card);
}._countdownFill_1seo0_84 {
  height: 100%;
  border-radius: inherit;
  background-color: var(--lcs-color-action);
  /* Handoff: the countdown bar's own transition is linear (distinct from
   * the deck bar's eased transition), since it ticks in fixed 1s steps. */
  transition: width 320ms linear;
}._primary_1seo0_93,
._secondary_1seo0_94 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-lg);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--lcs-weight-bold);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._primary_1seo0_93:focus-visible,
._secondary_1seo0_94:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._primary_1seo0_93 {
  height: 52px;
  border: none;
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
  font-size: var(--lcs-text-body);
}._primary_1seo0_93:hover {
  background-color: var(--lcs-color-action-hover);
}._secondary_1seo0_94 {
  height: 44px;
  border: var(--lcs-control-border) solid var(--lcs-color-action);
  background-color: transparent;
  color: var(--lcs-color-action);
  font-size: var(--lcs-text-control);
}._secondary_1seo0_94:hover {
  background-color: var(--lcs-tint-hover);
}._homeLink_1seo0_135 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--lcs-space-2);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-action);
  font-weight: var(--lcs-weight-bold);
  text-decoration: none;
}._homeLink_1seo0_135:hover {
  color: var(--lcs-color-ink);
}._homeLink_1seo0_135:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
  border-radius: var(--lcs-radius-sm);
}._navyCard_1seo0_24 {
  padding: var(--lcs-space-7);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
  gap: var(--lcs-space-2);
}._navyBody_1seo0_163 {
  margin: 0;
  color: var(--lcs-on-dark-85);
  font-size: var(--lcs-text-caption);
  line-height: var(--lcs-line-body);
  text-wrap: pretty;
}._whiteCard_1seo0_25 {
  padding: var(--lcs-space-7);
  background-color: var(--lcs-color-surface);
  gap: var(--lcs-space-4);
}._addedCount_1seo0_177 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._reviewRow_1seo0_184 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lcs-space-3);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-action);
}@media (prefers-reduced-motion: reduce) {
  ._countdownFill_1seo0_84,
  ._primary_1seo0_93,
  ._secondary_1seo0_94 {
    transition: none;
  }
}
}@layer features{/* 44px is the handoff's literal circle size — also the minimum tap target,
 * so it is not shrunk on mobile. */._root_1l9km_4 {
  display: inline-flex;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-tint-action);
  color: var(--lcs-color-action);
  cursor: pointer;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
  /* Force Tabler stroke to Celestial Blue — inherit alone can wash out at 2×. */
}._root_1l9km_4 svg {
  color: var(--lcs-color-action) !important;
  stroke: var(--lcs-color-action) !important;
  fill: none !important;
}._root_1l9km_4:hover {
  background-color: var(--lcs-tint-hover);
}._root_1l9km_4:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (prefers-reduced-motion: reduce) {
  ._root_1l9km_4 {
    transition: none;
  }
}
}@layer features{/* 20px is the handoff's literal frame radius — outside the token scale
 * (sm/md/lg/xl/pill = 6/8/10/14/999), documented one-off (see `QuizCard`,
 * which carries the same note). */._root_10x6e_5 {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: var(--lcs-space-7);
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: 20px;
  box-shadow: none;
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: default;
  gap: var(--lcs-space-5);
  text-align: center;
  user-select: none;
}._tappable_10x6e_25 {
  cursor: pointer;
}._root_10x6e_5:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/* Autoplay-only step timer — left-to-right fill, left corners only (handoff). */._fill_10x6e_35 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: var(--lcs-tint-action);
  pointer-events: none;
  transition: width var(--lcs-motion-panel) var(--lcs-ease-standard);
}@media (prefers-reduced-motion: reduce) {
  ._fill_10x6e_35 {
    transition: none;
  }
}/* Reserved even when empty, so the Answer step's add-pill never shifts the
 * card body. */._header_10x6e_54 {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  height: 36px;
  align-items: center;
  justify-content: flex-end;
  cursor: default;
}._addPill_10x6e_65 {
  display: flex;
  align-items: center;
  gap: var(--lcs-space-2);
  padding: 7px 10px;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: transparent;
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-chip);
  font-weight: var(--lcs-weight-bold);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._addPill_10x6e_65:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}._addPill_10x6e_65._added_10x6e_86 {
  border-color: var(--lcs-tint-action);
  background-color: var(--lcs-tint-action);
  color: var(--lcs-color-action);
}._addPill_10x6e_65:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._body_10x6e_97 {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  gap: var(--lcs-space-7);
}/* Left-aligns once help content pushes the body taller than the card, so
 * the sentence does not recenter as the panel grows. */._body_10x6e_97._helpOpen_10x6e_112 {
  justify-content: flex-start;
}._sentence_10x6e_116 {
  margin: 0;
  /* Handoff: 26px mobile / 36px desktop — outside the type scale, so these
   * are documented one-offs (see `QuizCard.face`, same note). */
  font-size: 26px;
  font-weight: var(--lcs-weight-regular);
  line-height: 1.35;
  text-wrap: pretty;
}._regular_10x6e_126 {
  font-weight: var(--lcs-weight-regular);
}/* Target word only — bold, never italic (unlike text quiz's `QuizCard`,
 * which bolds+italicizes every Spanish run). */._bold_10x6e_132 {
  font-weight: var(--lcs-weight-bold);
}._instruction_10x6e_136 {
  margin: 0;
  color: var(--lcs-color-muted);
  /* Handoff: 20px mobile / 26px desktop — documented one-off, same reasoning
   * as `.sentence`. */
  font-size: 20px;
  font-weight: var(--lcs-weight-bold);
}._helpContent_10x6e_145 {
  width: 100%;
  animation: _helpContentIn_10x6e_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
  cursor: default;
  text-align: left;
}@keyframes _helpContentIn_10x6e_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (prefers-reduced-motion: reduce) {
  ._helpContent_10x6e_145 {
    animation: none;
  }
}._footer_10x6e_167 {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: default;
}._playSlot_10x6e_178 {
  position: absolute;
  right: 0;
}@media (min-width: 769px) {
  ._root_10x6e_5 {
    padding: var(--lcs-space-8);
  }
  ._header_10x6e_54 {
    height: 40px;
  }
  ._sentence_10x6e_116 {
    font-size: 36px;
    line-height: 1.25;
  }
  ._instruction_10x6e_136 {
    font-size: 26px;
  }
  /* Let the word panel spill past the card's bottom edge and overlay the
   * dock, matching `QuizCard`'s desktop help behavior — mobile keeps its
   * word details in `WordPanelModal`, outside the card entirely. */
  ._root_10x6e_5._helpOpen_10x6e_112 {
    overflow: visible;
  }
  ._body_10x6e_97._helpOpen_10x6e_112 {
    overflow-y: visible;
    /* Header / body / footer each use `z-index: 1` so they paint above the
     * autoplay fill. Equal sibling stacking contexts mean later siblings
     * win — so without this bump the footer (Get help / play) paints over
     * the absolute `WordPanel` that lives inside `.body`. */
    z-index: 2;
  }
}
}@layer features{._root_t9j4o_2 {
  display: none;
}@media (min-width: 769px) {
  ._root_t9j4o_2 {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: var(--lcs-color-placeholder);
    font-size: var(--lcs-text-caption-mobile);
    gap: var(--lcs-space-3);
  }
}._item_t9j4o_16 {
  display: inline-flex;
  align-items: center;
  gap: var(--lcs-space-2);
}._sep_t9j4o_22 {
  margin-right: var(--lcs-space-2);
  color: var(--lcs-border-card);
}/* White keycap shell — shared shape across space / ↑ / ← / →. */._key_t9j4o_28 {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 var(--lcs-space-2);
  border: var(--lcs-border-hairline) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-sm);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  font-family: inherit;
  font-size: var(--lcs-text-caption-mobile);
  font-weight: var(--lcs-weight-bold);
  line-height: 1;
}
}@layer features {._root_yjsfh_1 {
  display: flex;
  flex: none;
  flex-direction: column;
  /* Handoff: 8px between primary / replay / nav rows. */
  gap: var(--lcs-space-3);
}/* DOM order is replay-then-primary; `column-reverse` puts primary on top
 * visually on mobile without duplicating markup for the desktop row. */._primaryRow_yjsfh_11 {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--lcs-space-3);
}._replay_yjsfh_17,
._primary_yjsfh_11,
._previous_yjsfh_19,
._next_yjsfh_20 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lcs-radius-lg);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--lcs-weight-bold);
  gap: 6px;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._replay_yjsfh_17:focus-visible,
._primary_yjsfh_11:focus-visible,
._previous_yjsfh_19:focus-visible,
._next_yjsfh_20:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/* 52/44px are the handoff's literal dock button heights, not scale steps
 * (see `QuizDock`, same note for its 52/56px slot). */._replay_yjsfh_17 {
  height: 44px;
  border: var(--lcs-control-border) solid var(--lcs-color-action);
  background-color: transparent;
  color: var(--lcs-color-action);
  font-size: var(--lcs-text-action);
}._replay_yjsfh_17:hover {
  background-color: var(--lcs-tint-hover);
}._primary_yjsfh_11 {
  height: 52px;
  border: none;
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
  font-size: var(--lcs-text-body);
}._primary_yjsfh_11:hover {
  background-color: var(--lcs-color-action-hover);
}._navRow_yjsfh_66 {
  display: flex;
  align-items: center;
  gap: var(--lcs-space-3);
}._previous_yjsfh_19,
._next_yjsfh_20 {
  flex: 1;
  height: 44px;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  background-color: transparent;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-action);
}._previous_yjsfh_19:hover:not(:disabled),
._next_yjsfh_20:hover {
  background-color: rgba(60, 60, 60, 0.08);
}._previous_yjsfh_19:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}@media (min-width: 769px) {
  ._primaryRow_yjsfh_11 {
    flex-direction: row;
    gap: var(--lcs-space-5);
  }
  ._replay_yjsfh_17 {
    width: 220px;
    height: 52px;
    font-size: var(--lcs-text-control);
  }
  ._primary_yjsfh_11 {
    flex: 1;
  }
  ._previous_yjsfh_19,
  ._next_yjsfh_20 {
    flex: none;
    height: 40px;
    padding: 0 var(--lcs-space-6);
  }
}@media (prefers-reduced-motion: reduce) {
  ._replay_yjsfh_17,
  ._primary_yjsfh_11,
  ._previous_yjsfh_19,
  ._next_yjsfh_20 {
    transition: none;
  }
}
}@layer features{._root_m57ab_2 {
  display: flex;
  flex-direction: column;
  /* Handoff progress block: 10px gap between label row and deck bar. */
  gap: 10px;
}._row_m57ab_9 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lcs-space-7);
}._leftGroup_m57ab_16 {
  display: flex;
  /* Arrow pinned to the TOP of the row — bottom-aligned it read as hanging
   * off the title's baseline. */
  align-items: flex-start;
  gap: var(--lcs-space-4);
  min-width: 0;
}._backButton_m57ab_25 {
  display: none;
  flex: none;
}._context_m57ab_30 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}@media (max-width: 768px) {
  ._context_m57ab_30 {
    display: none;
  }
}._title_m57ab_41 {
  margin: var(--lcs-space-1) 0 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h3);
  font-weight: var(--lcs-weight-bold);
}._position_m57ab_48 {
  flex: none;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
}._track_m57ab_55 {
  height: 4px;
  overflow: hidden;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-border-card);
}._fill_m57ab_62 {
  height: 100%;
  border-radius: inherit;
  background-color: var(--lcs-color-action);
  transition: width var(--lcs-motion-panel) var(--lcs-ease-standard);
}@media (min-width: 769px) {
  ._backButton_m57ab_25 {
    display: inline-flex;
  }
  ._position_m57ab_48 {
    font-size: var(--lcs-text-body);
  }
}@media (prefers-reduced-motion: reduce) {
  ._fill_m57ab_62 {
    transition: none;
  }
}
}@layer features{/*
 * Mirrors `TextQuizV2.module.scss` — see that file's header comment for the
 * full rationale (no `PageShell`, full-bleed parchment fill, and a
 * definite height so the card's `flex: 1` has something to stretch into).
 */._root_1oigb_7 {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 860px;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0 auto;
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  padding: var(--lcs-space-9) var(--lcs-page-pad);
  gap: var(--lcs-space-9);
  height: calc(100vh - var(--lcs-app-header-height));
  height: calc(100dvh - var(--lcs-app-header-height));
}._cardRow_1oigb_25 {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}@media (max-width: 768px) {
  ._root_1oigb_7 {
    /* Handoff: 14px top on progress, 12px/16px on dock — keep 16px page pad
     * and a tighter 10px stack gap so the dock sits closer to the card. */
    padding: 14px var(--lcs-page-pad-narrow) 16px;
    gap: 10px;
    height: calc(100vh - var(--lcs-app-header-height) - var(--lcs-mobile-tabbar-offset, 0px));
    height: calc(100dvh - var(--lcs-app-header-height) - var(--lcs-mobile-tabbar-offset, 0px));
  }
}
}@layer features {/*
 * Full-bleed parchment fill for the loading state only, same technique as
 * `AudioQuizV2.module.scss` (see that file's header comment for the full
 * rationale). This screen mounts inside legacy pages that give no
 * background of their own, so without this the `Loading` spinner would
 * flash the old paper texture while the first step's audio is still
 * parsing.
 */._loadingRoot_yl50d_9 {
  display: flex;
  width: 100%;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: var(--lcs-color-page);
  box-shadow: 0 0 0 100vmax var(--lcs-color-page);
  clip-path: inset(0 -100vmax);
  min-height: calc(100vh - var(--lcs-app-header-height));
  min-height: calc(100dvh - var(--lcs-app-header-height));
}
}@layer legacy {/* Copied from outside of hexagon, maybe could be improved? atleast some renaming possibly */.FTLS {
  width: 100%;
}.lessonFilter {
  margin: 0 10px;
  flex-grow: 1;
}.lessonFilter form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}/* uses .menuRow from AudioBasedReview.css *//*
has styling specific to FlashcardFinder implementation
located in App.css
*/.lessonList.required::after {
  content: '*';
  margin: 0 4px;
}
}
@layer legacy {/* ------------------ Filter Panel ------------------ */.filterPanel {
  width: 100%;
  padding: 0px 20px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}@media (max-width: 768px) {
  .filterPanel {
    padding: 0px;
  }
}.filterPanel .filterPanelColumn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-start;
  margin-top: 10px;
}.filterPanel .filterPanelColumn.basicOptions {
  flex-direction: column;
  max-width: 320px;
  margin: 0px 16px;
  margin-bottom: 16px;
}@media (max-width: 768px) {
  .filterPanel .filterPanelColumn.basicOptions {
    max-width: 355px;
    margin: 0px auto;
  }
}.filterPanel .filterPanelColumn.tagFiltering {
  flex-direction: column;
  justify-self: left;
  flex-grow: 3;
}@media (max-width: 768px) {
  .filterPanel[data-mobile-section=courseLesson] .tagFiltering {
    display: none;
  }
  .filterPanel[data-mobile-section=tags] .basicOptions {
    display: none;
  }
  .filterPanel[data-mobile-section=togglesOnly] .tagFiltering {
    display: none;
  }
  .filterPanel[data-mobile-section=togglesOnly] .FromToLessonSelectorWrapper {
    display: none;
  }
  .filterPanel[data-mobile-section=togglesOnly] #includeUnpublishedWrapper {
    display: none;
  }
}@media (max-width: 768px) {
  .filterPanel .filterPanelColumn.tagFiltering {
    max-width: 355px;
    margin: 0px auto;
  }
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--dark);
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector .modeSelectorOption {
  width: 50%;
  cursor: pointer;
  padding: 10px;
  font-weight: 600;
  font-size: 18px;
  background-color: var(--light);
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector .modeSelectorOption.selected {
  background-color: var(--brand);
  color: var(--light);
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector .modeSelectorOption:last-child {
  border-left: 1px solid var(--dark);
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector .modeSelectorOption input {
  display: none;
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_modeSelector .modeSelectorOption:hover {
  background-color: var(--accent);
}.filterPanel .filterPanelColumn.tagFiltering .filterPanel_contentArea {
  padding: 15px;
  border: 1px solid var(--dark);
  border-top: 0px;
  background-color: var(--light);
  min-height: 200px;
  margin-bottom: 15px;
}@media screen and (max-width: 768px) {
  .filterPanel .filterPanelColumn.tagFiltering .filterPanel_contentArea {
    padding: 8px;
    margin-bottom: 8px;
  }
}/* ------------------ Closeable Filter Panel ------------------ */.CloseableFilterPanel {
  margin: 0 2%;
  border: 1px solid var(--dark);
  background-color: var(--light);
  padding: 1rem;
}.CloseableFilterPanel .ToggleFilterPanel {
  max-width: 30vw;
}@media screen and (max-width: 768px) {
  .CloseableFilterPanel .ToggleFilterPanel {
    width: 80vw;
    max-width: 320px;
    margin: 0 auto;
  }
}/* ------------------ PresetSelector ------------------ */.presetSelectorContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  gap: 25px;
}.presetSelectorContent label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 500px;
}.presetSelectorContent label p {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}.presetSelectorContent label select {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid var(--brand);
  background-color: var(--light);
  cursor: pointer;
}.presetSelectorContent label select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
}@layer features {._root_12jgn_1 {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  padding: var(--lcs-space-6);
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  gap: var(--lcs-space-4);
  text-align: left;
  transition: border-color var(--lcs-motion-micro) var(--lcs-ease-standard), background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._root_12jgn_1:hover {
  background-color: var(--lcs-tint-hover);
}._root_12jgn_1:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._on_12jgn_29 {
  border-color: var(--lcs-color-action);
  background-color: var(--lcs-tint-action);
}._on_12jgn_29:hover {
  background-color: var(--lcs-tint-action);
}/* Tag mode cards: no tile, glyph beside a centered label. */._compact_12jgn_39 {
  padding: var(--lcs-space-5);
  gap: var(--lcs-space-3);
  justify-content: center;
  text-align: center;
}._label_12jgn_46 {
  min-width: 0;
}@media (min-width: 769px) {
  ._roomy_12jgn_51 {
    padding: var(--lcs-space-7);
    font-size: var(--lcs-text-h3);
  }
  ._compact_12jgn_39 {
    padding: var(--lcs-space-6);
  }
}@media (prefers-reduced-motion: reduce) {
  ._root_12jgn_1 {
    transition: none;
  }
}
}@layer primitives {._root_1l04a_1 {
  display: inline-flex;
  align-items: center;
  padding: var(--lcs-space-1) var(--lcs-space-2);
  border-radius: var(--lcs-radius-sm);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-eyebrow);
  font-weight: var(--lcs-weight-bold);
  letter-spacing: var(--lcs-tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}._sm_1l04a_15 {
  font-size: var(--lcs-text-badge);
}._compact_1l04a_19 {
  padding: 2px var(--lcs-space-3);
  font-weight: var(--lcs-weight-medium);
}._label_1l04a_24 {
  background-color: var(--lcs-tint-label-strong);
  color: var(--lcs-color-on-label);
}._action_1l04a_29 {
  background-color: var(--lcs-tint-action);
  color: var(--lcs-color-action-hover);
}._error_1l04a_34 {
  background-color: var(--lcs-tint-error);
  color: var(--lcs-color-error);
}._success_1l04a_39 {
  background-color: var(--lcs-tint-success);
  color: var(--lcs-color-success);
}._warning_1l04a_44 {
  background-color: var(--lcs-tint-warning);
  color: var(--lcs-color-warning-ink);
}
}@layer primitives {._root_16zqs_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--lcs-space-11) var(--lcs-space-8);
  gap: var(--lcs-space-5);
  text-align: center;
}._title_16zqs_10 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
}._guidance_16zqs_18 {
  max-width: 44ch;
  margin: 0;
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}
}@layer features {._root_1yene_1 {
  display: flex;
  flex-direction: column;
}._back_1yene_6 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0;
  border: 0;
  margin: 0 0 var(--lcs-space-4);
  background: none;
  color: var(--lcs-color-action);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
  gap: var(--lcs-space-2);
}._back_1yene_6:hover {
  color: var(--lcs-color-action-hover);
}._back_1yene_6:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/* `color` and `text-align` restate the page defaults because the legacy
 * global `h1` rule in App.css centers every heading and paints it light. */._title_1yene_33 {
  margin: var(--lcs-space-1) 0 0;
  color: var(--lcs-color-ink);
  font-size: 22px;
  font-weight: var(--lcs-weight-bold);
  line-height: 1.2;
  text-align: left;
}._optional_1yene_42 {
  color: var(--lcs-color-muted);
  font-weight: var(--lcs-weight-regular);
}._caption_1yene_47 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}@media (max-width: 768px) {
  ._back_1yene_6,
  ._title_1yene_33 {
    display: none;
  }
}._progress_1yene_59 {
  display: flex;
  margin-top: var(--lcs-space-5);
  gap: var(--lcs-space-1);
}._segment_1yene_65 {
  height: 4px;
  flex: 1;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-divider);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._segmentOn_1yene_73 {
  background-color: var(--lcs-color-action);
}@media (min-width: 769px) {
  ._back_1yene_6 {
    margin-bottom: var(--lcs-space-5);
  }
  ._title_1yene_33 {
    font-size: var(--lcs-text-display);
    line-height: 1.12;
  }
}@media (prefers-reduced-motion: reduce) {
  ._segment_1yene_65 {
    transition: none;
  }
}
}@layer primitives {._root_1dn9q_1 {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  padding: var(--lcs-space-2) var(--lcs-space-5);
  border: none;
  gap: var(--lcs-space-2);
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-tint-label-subtle);
  color: var(--lcs-color-on-label);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-chip);
  line-height: var(--lcs-line-tight);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._selectable_1dn9q_17 {
  cursor: pointer;
}._selectable_1dn9q_17:hover {
  background-color: var(--lcs-tint-label);
}._selectable_1dn9q_17:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._selected_1dn9q_30 {
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._selected_1dn9q_30:hover {
  background-color: var(--lcs-color-action-hover);
}._selectedNavy_1dn9q_39,
._selectedNavy_1dn9q_39:hover {
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}._action_1dn9q_45 {
  background-color: var(--lcs-tint-action);
  color: var(--lcs-color-action-hover);
}._warning_1dn9q_50 {
  background-color: var(--lcs-tint-warning);
  color: var(--lcs-color-warning-ink);
}._remove_1dn9q_55 {
  display: inline-flex;
  padding: 0;
  border: none;
  margin-right: calc(var(--lcs-space-1) * -1);
  background: none;
  color: inherit;
  cursor: pointer;
}._remove_1dn9q_55:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: 1px;
}@media (prefers-reduced-motion: reduce) {
  ._root_1dn9q_1 {
    transition: none;
  }
}
}@layer primitives {._root_w3f9f_1 {
  display: flex;
  gap: var(--lcs-space-3);
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
}._root_w3f9f_1:has(._input_w3f9f_11:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}._input_w3f9f_11 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}._track_w3f9f_26 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: none;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-toggle-off);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._on_w3f9f_37 {
  background-color: var(--lcs-color-action);
}._knob_w3f9f_41 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--lcs-radius-pill);
  background-color: var(--lcs-color-surface);
  transition: transform var(--lcs-motion-micro) var(--lcs-ease-standard);
}._on_w3f9f_37 ._knob_w3f9f_41 {
  transform: translateX(18px);
}._input_w3f9f_11:focus-visible + ._track_w3f9f_26 {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._label_w3f9f_61 {
  color: var(--lcs-color-ink);
}._labelHidden_w3f9f_65 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}@media (prefers-reduced-motion: reduce) {
  ._track_w3f9f_26,
  ._knob_w3f9f_41 {
    transition: none;
  }
}
}@layer features {._hint_11x4f_1 {
  margin: 0 0 var(--lcs-space-4);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._list_11x4f_7 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-3);
}._preset_11x4f_13 {
  display: inline-flex;
  align-items: center;
  padding: 9px var(--lcs-space-6);
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-action);
  font-weight: var(--lcs-weight-medium);
  gap: var(--lcs-space-3);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._preset_11x4f_13:hover {
  background-color: var(--lcs-tint-row-selected);
}._preset_11x4f_13:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._presetOn_11x4f_38 {
  border-color: var(--lcs-color-action);
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._presetOn_11x4f_38:hover {
  background-color: var(--lcs-color-action-hover);
}._count_11x4f_48 {
  color: var(--lcs-color-muted);
}._presetOn_11x4f_38 ._count_11x4f_48 {
  color: inherit;
  opacity: 0.65;
}@media (prefers-reduced-motion: reduce) {
  ._preset_11x4f_13 {
    transition: none;
  }
}
}@layer primitives {._wrapper_1q8mq_1 {
  position: relative;
  display: block;
  width: 100%;
}._input_1q8mq_7 {
  box-sizing: border-box;
  width: 100%;
  height: var(--lcs-control-height);
  padding: 0 var(--lcs-space-6);
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  font-family: inherit;
  font-size: var(--lcs-text-control);
  transition: border-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._input_1q8mq_7::placeholder {
  color: var(--lcs-color-placeholder);
}._input_1q8mq_7:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._input_1q8mq_7:disabled {
  background-color: var(--lcs-color-page);
  color: var(--lcs-color-muted);
  cursor: not-allowed;
}._withIcon_1q8mq_36 {
  padding-left: var(--lcs-space-11);
}._invalid_1q8mq_40 {
  border-color: var(--lcs-color-error);
}._icon_1q8mq_44 {
  position: absolute;
  top: 50%;
  left: var(--lcs-space-6);
  display: flex;
  transform: translateY(-50%);
  pointer-events: none;
}@media (prefers-reduced-motion: reduce) {
  ._input_1q8mq_7 {
    transition: none;
  }
}
}@layer features{._suggestions_lrtds_2 {
  /*
   * Per-type accents echo the v1 TagFilter palette (App.css *Card rules:
   * Vocabulary→brand, Idiom→accent, Subcategory→theme, Verb→dark+accent).
   * Hues come from existing tokens; tints for subcategory/verb are local
   * because tokens.css has no muted/ink surface tints.
   */
  --suggestion-subcategory-tint: rgba(111, 98, 89, 0.1);
  --suggestion-verb-tint: rgba(60, 60, 60, 0.06);
  margin: 0;
  padding: 0;
  list-style: none;
}._suggestion_lrtds_2 {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lcs-space-5);
  /* Prototype 11px 16px. 11px is one-off; scale jumps 10 → 12. */
  padding: 11px var(--lcs-space-7);
  border: none;
  border-bottom: var(--lcs-border-hairline) solid var(--lcs-divider);
  border-left: 3px solid transparent;
  background: none;
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-control);
  line-height: var(--lcs-line-body);
  text-align: left;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._suggestion_lrtds_2:last-child {
  border-bottom: none;
}._suggestion_lrtds_2:hover {
  background-color: var(--lcs-color-page);
}._suggestion_lrtds_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._suggestionBody_lrtds_50 {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--lcs-space-1);
}._suggestionName_lrtds_58 {
  color: var(--lcs-color-ink);
}._suggestionDescriptor_lrtds_62 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  line-height: var(--lcs-line-tight);
}._suggestionMeta_lrtds_68 {
  flex-shrink: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-eyebrow);
}/* Subtle type cues: left rail + low-alpha tint + meta hue. Not full cards. */._suggestionVocabulary_lrtds_75 {
  border-left-color: var(--lcs-color-action);
  background-color: var(--lcs-tint-row-selected);
}._suggestionVocabulary_lrtds_75:hover {
  background-color: var(--lcs-tint-hover);
}._suggestionVocabulary_lrtds_75 ._suggestionMeta_lrtds_68 {
  color: var(--lcs-color-action);
}._suggestionIdiom_lrtds_88 {
  border-left-color: var(--lcs-color-label);
  background-color: var(--lcs-tint-label-subtle);
}._suggestionIdiom_lrtds_88:hover {
  background-color: var(--lcs-tint-label);
}._suggestionIdiom_lrtds_88 ._suggestionMeta_lrtds_68 {
  color: var(--lcs-color-on-label);
}._suggestionSubcategory_lrtds_101 {
  border-left-color: var(--lcs-color-muted);
  background-color: var(--suggestion-subcategory-tint);
}._suggestionSubcategory_lrtds_101:hover {
  background-color: color-mix(in srgb, var(--lcs-color-muted) 16%, transparent);
}._suggestionSubcategory_lrtds_101 ._suggestionMeta_lrtds_68 {
  color: var(--lcs-color-muted);
}._suggestionVerb_lrtds_114 {
  border-left-color: var(--lcs-color-ink);
  background-color: var(--suggestion-verb-tint);
}._suggestionVerb_lrtds_114:hover {
  background-color: color-mix(in srgb, var(--lcs-color-ink) 10%, transparent);
}._suggestionVerb_lrtds_114 ._suggestionMeta_lrtds_68 {
  color: var(--lcs-color-label);
}._suggestionConjugation_lrtds_127 {
  border-left-color: var(--lcs-color-steel);
}._suggestionConjugation_lrtds_127:hover {
  background-color: var(--lcs-color-page);
}._noSuggestions_lrtds_135 {
  padding: var(--lcs-space-6) var(--lcs-space-7);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-action);
}@media (prefers-reduced-motion: reduce) {
  ._suggestion_lrtds_2 {
    transition: none;
  }
}
}@layer features{._sectionHeader_95f8k_2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--lcs-space-7) var(--lcs-space-8);
  border-bottom: var(--lcs-border-hairline) solid var(--lcs-divider);
  border-top-left-radius: var(--lcs-radius-xl);
  border-top-right-radius: var(--lcs-radius-xl);
}._root_95f8k_14 {
  position: relative;
  z-index: var(--lcs-z-popover);
  overflow: visible;
}/*
 * Prototype keeps one 20px rail on every band, including at 768.
 * CardSection collapses to 16px there; pin so header, bodies, admin
 * strip, and the options section stay on the same inset.
 */._root_95f8k_14 > :first-child > * {
  padding-left: var(--lcs-space-8);
  padding-right: var(--lcs-space-8);
}@media (max-width: 768px) {
  ._root_95f8k_14 > :first-child > * {
    padding-left: var(--lcs-space-8);
    padding-right: var(--lcs-space-8);
  }
  ._root_95f8k_14 > :first-child > *:has(._scopeGrid_95f8k_35),
  ._root_95f8k_14 > :first-child > *:has(._tagsHeader_95f8k_36),
  ._root_95f8k_14 > :first-child > *:has(._optionsHeader_95f8k_37) {
    padding-top: var(--lcs-space-8);
    padding-bottom: var(--lcs-space-8);
  }
}/*
 * Card corners live here regardless of which section ends up last.
 * Vertical padding is deliberately left to the section's own rules
 * (CardSection default + the :has() pin above) so the last band reads
 * like the ones above it, not like a separate parchment strip.
 */._root_95f8k_14 > :first-child > :last-child {
  border-bottom-left-radius: var(--lcs-radius-xl);
  border-bottom-right-radius: var(--lcs-radius-xl);
}._inlineAction_95f8k_53 button[class] {
  padding: var(--lcs-space-1);
  font-size: var(--lcs-text-action);
  font-weight: var(--lcs-weight-bold);
  /* Button.root is line-height 1 (~22px here). Prototype inherits normal
   * leading, so 4px pad + 14px type lands ~27px. */
  line-height: normal;
}._scopeGrid_95f8k_35 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--lcs-space-7) var(--lcs-space-8);
}._adminStrip_95f8k_68 label,
._optionsRow_95f8k_69 label {
  font-size: var(--lcs-text-action);
  gap: var(--lcs-space-4);
}._scopeGrid_95f8k_35 label {
  line-height: var(--lcs-line-body);
}._scopeGrid_95f8k_35 select {
  padding-left: var(--lcs-space-5);
  padding-right: var(--lcs-space-5);
}._adminStrip_95f8k_68 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  padding: var(--lcs-space-6) var(--lcs-space-8);
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  background-color: var(--lcs-tint-label-subtle);
}._adminStrip_95f8k_68 > span {
  padding: var(--lcs-space-1) var(--lcs-space-4);
  font-weight: var(--lcs-weight-medium);
  line-height: var(--lcs-line-body);
}._tagsHeader_95f8k_36 {
  display: flex;
  margin-bottom: var(--lcs-space-5);
}._modeTabs_95f8k_104 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-page);
}._modeTab_95f8k_104 {
  position: relative;
  display: flex;
  min-height: var(--lcs-control-height-sm);
  align-items: center;
  justify-content: center;
  padding: var(--lcs-space-3) var(--lcs-space-5);
  border: none;
  background: none;
  color: var(--lcs-color-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-action);
  font-weight: var(--lcs-weight-medium);
  line-height: var(--lcs-line-tight);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._modeTab_95f8k_104 + ._modeTab_95f8k_104 {
  border-left: var(--lcs-control-border) solid var(--lcs-border-control);
}._modeTab_95f8k_104:first-child {
  border-top-left-radius: var(--lcs-radius-md);
  border-bottom-left-radius: var(--lcs-radius-md);
}._modeTab_95f8k_104:last-child {
  border-top-right-radius: var(--lcs-radius-md);
  border-bottom-right-radius: var(--lcs-radius-md);
}._modeTab_95f8k_104:hover {
  background-color: var(--lcs-tint-hover);
  color: var(--lcs-color-ink);
}._modeTab_95f8k_104:focus-visible {
  z-index: 1;
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._modeTabOn_95f8k_156 {
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
}._modeTabOn_95f8k_156:hover {
  background-color: var(--lcs-color-action-hover);
  color: var(--lcs-color-on-action);
}._tagSearchRow_95f8k_166 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  justify-content: space-between;
}._tagSearch_95f8k_166 {
  position: relative;
  z-index: var(--lcs-z-popover);
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
}._tagSearch_95f8k_166 svg {
  width: var(--lcs-space-7);
  height: var(--lcs-space-7);
}._tagSearch_95f8k_166 input {
  padding-left: 40px;
}._tagSearch_95f8k_166 > div {
  display: block;
  width: 100%;
}._tagSearch_95f8k_166 > div > div {
  box-sizing: border-box;
  width: 100%;
}/*
 * Hang the suggestion sheet below the 44px field (plus the 6px gap).
 * The card is unclipped so the sheet can paint past the footer and over
 * the results. overflow on the panel only rounds the rows, not the page.
 */._tagSearchOpen_95f8k_206 > div > div:last-child {
  top: calc(var(--lcs-control-height) + var(--lcs-space-2));
  right: 0;
  overflow: hidden;
  border-radius: var(--lcs-radius-xl);
  box-shadow: var(--lcs-shadow-popover);
}._appliedTags_95f8k_214 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-3);
  margin-top: var(--lcs-space-6);
  overflow: visible;
}._appliedTag_95f8k_214 {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  z-index: 0;
  /*
   * Reused name is fine: the hint's nearest ancestor wins, and
   * anchor-scope keeps each chip's name from leaking to siblings.
   * Enables position-try flip against the viewport (not the chip box).
   */
  anchor-name: --applied-tag;
  anchor-scope: --applied-tag;
}._appliedTag_95f8k_214:hover,
._appliedTag_95f8k_214:focus-within {
  z-index: 1;
}/* Chip only — exclude .appliedTagHint, which is also a direct child span. */._appliedTag_95f8k_214 > span:not(._appliedTagHint_95f8k_241) {
  padding: 5px var(--lcs-space-3) 5px var(--lcs-space-5);
  border-radius: var(--lcs-radius-sm);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: 0.04em;
  line-height: var(--lcs-line-body);
  gap: var(--lcs-space-3);
}._appliedTag_95f8k_214 button {
  margin-right: 0;
  opacity: 0.7;
}/*
 * Same descriptor as the suggestion list. Overlay below the chip so it
 * never reflows the row or covers the remove control (pointer-events: none).
 *
 * Width: max-content breaks abspos shrink-to-fit against the chip; the
 * box sizes to its text, then max-width clamps. position-try flip-inline
 * re-anchors left↔right when a right-edge chip would spill past the
 * viewport — pure CSS, no measurement.
 */._appliedTagHint_95f8k_241 {
  --applied-tag-hint-max: 240px;
  /* Same 2× space-8 gutter as ExampleRow vocab popover. */
  --applied-tag-hint-gutter: calc(2 * var(--lcs-space-8));
  position: absolute;
  position-anchor: --applied-tag;
  top: calc(100% + var(--lcs-space-2));
  left: 0;
  z-index: var(--lcs-z-popover);
  box-sizing: border-box;
  /*
   * max-content = readable floor for long copy on a short chip (intrinsic
   * text width, not the chip). Short copy stays hugged — a larger CSS
   * min-width would pad one-word descriptors into empty boxes.
   */
  width: max-content;
  max-width: min(var(--applied-tag-hint-max), 100vw - var(--applied-tag-hint-gutter));
  padding: var(--lcs-space-3) var(--lcs-space-5);
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-md);
  background-color: var(--lcs-color-surface);
  box-shadow: var(--lcs-shadow-lift);
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
  line-height: var(--lcs-line-tight);
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--lcs-motion-micro) var(--lcs-ease-standard), visibility var(--lcs-motion-micro) var(--lcs-ease-standard);
  position-try-fallbacks: flip-inline;
}._appliedTag_95f8k_214:hover ._appliedTagHint_95f8k_241,
._appliedTag_95f8k_214:focus-within ._appliedTagHint_95f8k_241 {
  opacity: 1;
  visibility: visible;
}._emptyTags_95f8k_305 {
  margin: var(--lcs-space-6) 0 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}/* Same shape as .tagsHeader: a plain label band above the section's
 * controls, sized by CardSection's own padding rather than its own. */._optionsHeader_95f8k_37 {
  display: flex;
  margin-bottom: var(--lcs-space-5);
}._optionsRow_95f8k_69 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5) var(--lcs-space-10);
  align-items: center;
}/*
 * Below 768px there is no room for two toggles side by side. Stack them
 * instead of leaving it to flex-wrap: a wrapped row-direction item only
 * ever sizes to its own content, so two toggles with different label
 * lengths land their switches at different horizontal offsets (exactly the
 * bug this fixes). Switching to a column stretches each Toggle to the
 * row's full width, and Toggle's own `justify-content: space-between`
 * then lines up both switches on a shared right edge — same pattern
 * `QuizOptionsCard`'s `.switches` already relies on.
 */@media (max-width: 768px) {
  ._optionsRow_95f8k_69 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--lcs-space-6);
    margin-right: var(--lcs-space-8);
  }
}@media (prefers-reduced-motion: reduce) {
  ._modeTab_95f8k_104,
  ._appliedTagHint_95f8k_241 {
    transition: none;
  }
}
}@layer legacy {/* ------------------ No Flashcards ------------------ */.noFlashcardsWrapper {
  max-width: 50%;
  margin: 0 auto;
  text-align: center;
}.noFlashcardsWrapper .buttonBox {
  margin-top: 30px;
  max-width: 300px;
}
}@layer features {._root_1qyiy_1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: var(--lcs-space-7);
  gap: var(--lcs-space-6);
}._types_1qyiy_9 {
  display: flex;
  gap: var(--lcs-space-3);
}._options_1qyiy_14 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-6);
}._switches_1qyiy_20 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-6);
}/* Listening / speaking pair, sitting in the slot the toggles use otherwise. */._modes_1qyiy_27 {
  display: flex;
  gap: var(--lcs-space-3);
}._count_1qyiy_32 {
  margin: var(--lcs-space-2) 0 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}@media (min-width: 769px) {
  ._root_1qyiy_1 {
    padding: var(--lcs-space-8);
    gap: var(--lcs-space-7);
  }
  ._types_1qyiy_9 {
    gap: var(--lcs-space-4);
  }
  /* Switches take the free width; the length select keeps a fixed column. */
  ._options_1qyiy_14 {
    display: grid;
    align-items: center;
    gap: var(--lcs-space-9);
    grid-template-columns: 1fr 200px;
  }
  ._count_1qyiy_32 {
    margin-top: var(--lcs-space-2);
  }
}
}@layer features{._page_jn45s_2 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-4);
  padding-bottom: var(--lcs-space-9);
}/*
 * The toggle reads as the filter panel's own header rather than a stray
 * switch on the page: same Card, same sectionHeader shape as
 * `FilterSection`, so it sits directly above the panel it opens — matching
 * Flashcard Manager's `.filterControl`. First section under the header, so
 * it carries the header-to-body gap the way `.optionsSlot` used to.
 *
 * Capped to the same measure as `.optionsSlot` and centered on desktop
 * (below) — the toggle reads as part of that same narrow form, not the
 * width of the full-bleed `FilterSection` it reveals.
 */._filterControl_jn45s_13 {
  margin-top: var(--lcs-space-7);
}/*
 * The default eyebrow is Green Smoke — a section kicker, not a control
 * name. Next to the switch that text *is* the toggle's label, so ink
 * matches the other quiz-option toggles instead of reading as leftover
 * header chrome.
 */._filterControl_jn45s_13 h2 {
  color: var(--lcs-color-ink);
}._filterControlActions_jn45s_34 {
  display: flex;
  align-items: center;
  gap: var(--lcs-space-5);
}/*
 * Capped so a plain toggle/select stack doesn't stretch to the page's full
 * 1240px column (unlike `FilterSection`, which keeps its multi-column scope
 * grid at full width). `width: 100%` alongside the `max-width` matters: a
 * flex item centered with auto margins alone resolves its "auto" width by
 * shrinking to fit its content first, so this card would still shrink to
 * whichever quiz type's switches are narrower instead of holding one fixed
 * width for both. `width: 100%` gives it a definite size to clamp *before*
 * the auto margins split the leftover space evenly.
 */._optionsSlot_jn45s_14 {
  display: flex;
}._optionsSlot_jn45s_14 > * {
  min-width: 0;
  flex: 1;
}._action_jn45s_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--lcs-space-7);
  gap: var(--lcs-space-3);
}._actionCount_jn45s_67 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  text-align: center;
}._cta_jn45s_74 {
  display: flex;
  flex-direction: column;
}._ctaSecondary_jn45s_79 {
  display: flex;
  flex-direction: column;
  align-items: center;
}@media (max-width: 768px) {
  /* Same as Official quiz setup: centered primary CTA under the settings,
   * not a full-bleed button that reads as a docked bar. */
  ._cta_jn45s_74 {
    flex-direction: row;
    justify-content: center;
  }
  ._cta_jn45s_74 > button {
    width: 100%;
    max-width: 320px;
  }
  ._ctaSecondary_jn45s_79 {
    display: none;
  }
}@media (min-width: 769px) {
  ._page_jn45s_2 {
    gap: var(--lcs-space-6);
  }
  ._filterControl_jn45s_13 {
    width: 100%;
    max-width: 680px;
    margin-top: var(--lcs-space-9);
    margin-right: auto;
    margin-left: auto;
  }
  ._optionsSlot_jn45s_14 {
    width: 100%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
  }
  ._cta_jn45s_74 > button {
    min-width: 360px;
    height: 56px;
    font-size: var(--lcs-text-h3);
  }
}
}@layer legacy {/* ------------------ Remove Button ------------------ */.addPendingRemoveButton.removeButton .removeIcon {
  display: none;
}@media (max-width: 480px) {
  .addPendingRemoveButton.removeButton {
    background-color: transparent;
    min-width: 32px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
  }
  .addPendingRemoveButton.removeButton .removeText {
    display: none;
  }
  .addPendingRemoveButton.removeButton .removeIcon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(8%) sepia(83%) saturate(4661%) hue-rotate(1deg) brightness(112%) contrast(116%);
  }
}/* ------------------ Add Button ------------------ */.addPendingRemoveButton.addButton .addIcon {
  display: none;
}@media (max-width: 480px) {
  .addPendingRemoveButton.addButton {
    background-color: transparent;
    min-width: 32px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    box-sizing: border-box;
  }
  .addPendingRemoveButton.addButton .addText {
    display: none;
  }
  .addPendingRemoveButton.addButton .addIcon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(22%) sepia(44%) saturate(3021%) hue-rotate(101deg) brightness(96%) contrast(104%);
  }
}/* ------------------ Disabled Button ------------------ */.addPendingRemoveButton.disabledButton {
  min-width: 100px;
  min-height: 0px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  padding: 4px 8px;
  box-sizing: border-box;
  background-color: transparent;
  color: var(--dark);
  font-weight: 600;
  display: flex;
  justify-content: right;
}.addPendingRemoveButton.disabledButton .disabledIcon {
  display: none;
}/* adding/removing buttons */.addPendingRemoveButton.addingButton,
.addPendingRemoveButton.removingButton {
  cursor: disabled;
}.addPendingRemoveButton.addingButton .addingIcon,
.addPendingRemoveButton.addingButton .removingIcon,
.addPendingRemoveButton.removingButton .addingIcon,
.addPendingRemoveButton.removingButton .removingIcon {
  display: none;
}@media (max-width: 480px) {
  .addPendingRemoveButton.addingButton,
  .addPendingRemoveButton.removingButton {
    background-color: transparent;
    min-width: 32px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
  }
  .addPendingRemoveButton.addingButton .addingText,
  .addPendingRemoveButton.addingButton .removingText,
  .addPendingRemoveButton.removingButton .addingText,
  .addPendingRemoveButton.removingButton .removingText {
    display: none;
  }
  .addPendingRemoveButton.addingButton .removingIcon,
  .addPendingRemoveButton.addingButton .addingIcon,
  .addPendingRemoveButton.removingButton .removingIcon,
  .addPendingRemoveButton.removingButton .addingIcon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: inline-block;
    animation: spin 1.4s linear infinite;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .addPendingRemoveButton.addingButton .removingIcon,
  .addPendingRemoveButton.removingButton .removingIcon {
    filter: brightness(0) saturate(100%) invert(8%) sepia(83%) saturate(4661%) hue-rotate(1deg) brightness(112%) contrast(116%);
  }
  .addPendingRemoveButton.addingButton .addingIcon,
  .addPendingRemoveButton.removingButton .addingIcon {
    filter: brightness(0) saturate(100%) invert(22%) sepia(44%) saturate(3021%) hue-rotate(101deg) brightness(96%) contrast(104%);
  }
}
}@layer legacy {.exampleCardWithMoreInfo {
  position: relative;
}.exampleCardWithMoreInfo .exampleCard {
  position: relative;
  text-align: center;
  background-color: var(--accent);
  color: var(--light);
  font-size: 12px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin: 5px 30px;
}@media screen and (max-width: 768px) {
  .exampleCardWithMoreInfo .exampleCard {
    margin: 5px 0;
  }
}.exampleCardWithMoreInfo .moreInfoView {
  margin: 5px 30px;
  border: 2px solid var(--accent);
  border-top: none;
  background-color: var(--light);
  padding: 1rem;
  margin-top: -5px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transition: display 0.5s ease-in-out, height 0.5s ease-in-out;
}@media screen and (max-width: 768px) {
  .exampleCardWithMoreInfo .moreInfoView {
    margin: 5px 0;
    margin-top: -5px;
    padding: 0.5rem;
  }
}.exampleCardWithMoreInfo .moreInfoView.open {
  display: flex;
  height: auto;
}.exampleCardWithMoreInfo .moreInfoView.closed {
  display: none;
  height: 0;
}.vocabTagsSide {
  max-width: 70%;
  width: 100%;
  margin-right: 1rem;
}.vocabTagsSide .vocabTagsHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}.moreInfoSide {
  max-width: 50%;
}.labelsSection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}@media (max-width: 480px) {
  .labelsSection {
    display: none;
  }
}.labelsSection .label {
  font-size: 12px;
  padding: 0.5rem;
  margin: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--accent);
  color: var(--light);
}.labelsSection .label.spanglish {
  background-color: var(--dark);
  color: var(--light);
}.labelsSection .label.custom {
  background-color: var(--brand);
  color: var(--light);
}.labelsSection .label.audio {
  background-color: var(--theme);
  color: var(--light);
}.vocabTagsSide h3 {
  text-align: left;
  margin-left: 0.5rem;
  margin-top: 0;
}@media (max-width: 480px) {
  .vocabTagsSide h3 {
    font-size: 14px;
    margin-left: 0;
    margin-bottom: 0.25rem;
  }
}.vocabTagsSide .vocabTagsList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}.exampleCardText {
  display: flex;
  flex-direction: row;
  flex: 1;
  position: relative;
  box-sizing: border-box;
}@media (max-width: 480px) {
  .exampleCardText {
    margin: 2px;
    flex-direction: column;
    padding-bottom: 32px;
    background-color: var(--light);
  }
}.exampleCardText .exampleCardSpanishText,
.exampleCardText .exampleCardEnglishText {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  justify-content: space-between;
}@media (max-width: 480px) {
  .exampleCardText .exampleCardSpanishText,
  .exampleCardText .exampleCardEnglishText {
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 4px;
    margin: 0;
    padding-right: 40px;
    font-size: 14px;
  }
  .exampleCardText .exampleCardSpanishText p,
  .exampleCardText .exampleCardEnglishText p {
    margin: 0;
  }
}.audioWrapper {
  min-width: 48px;
  min-height: 48px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}@media (max-width: 480px) {
  .audioWrapper {
    min-width: 32px;
    min-height: 32px;
  }
  .audioWrapper .audioControlPlayPauseButton {
    padding: 6px;
  }
}.datesSection {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  margin-right: 0.5rem;
}@media screen and (max-width: 768px) {
  .datesSection {
    min-width: 100%;
    margin-right: 0;
  }
}.datesSection .lineWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}.datesSection .lineWrapper .label {
  text-wrap: nowrap;
}@media screen and (max-width: 480px) {
  .datesSection .lineWrapper .label {
    text-wrap: wrap;
  }
}.datesSection .lineWrapper .label,
.datesSection .lineWrapper .content {
  font-size: 14px;
  margin: 0.5rem 0;
  min-width: 100px;
}@media screen and (max-width: 480px) {
  .datesSection .lineWrapper .label,
  .datesSection .lineWrapper .content {
    font-size: 12px;
    min-width: 60px;
    margin: 0.25rem 0;
  }
}
}@layer legacy {.moreInfo {
  background-color: var(--accent);
  color: var(--dark);
  font-size: 14px;
  margin: 2px;
  cursor: pointer;
}.moreInfo:hover {
  background-color: var(--accent);
}.moreInfo.open {
  background-color: var(--brand);
  color: var(--light);
  margin: 0;
}@media (max-width: 480px) {
  .moreInfo {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px;
    background-color: var(--brand);
    color: var(--light);
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
  }
  .moreInfoText {
    margin: 0;
  }
}
}@layer legacy {/* ------------------ Examples Table ------------------ */.examplesTable {
  overflow-y: auto;
  padding: 0px;
}.examplesTable .buttonBox {
  text-align: center;
  color: var(--light);
  font-size: 12px;
  padding: 0px;
  align-self: stretch;
  margin: 5px 30px;
  width: auto;
}.examplesTable .buttonBox button {
  width: 100%;
  background-color: var(--theme);
  margin: 0 auto;
}.examplesTable .buttonBox button:hover {
  background-color: var(--accent);
}.displayExamplesDescription {
  width: 50%;
  background-color: var(--light);
  border: 2px solid var(--theme);
  padding: 0px 20px;
}/* ------------------ Example List Item ------------------ */.exampleCard {
  text-align: center;
  background-color: var(--accent);
  color: var(--light);
  font-size: 12px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin: 5px 30px;
}@media screen and (max-width: 768px) {
  .exampleCard {
    margin: 5px 0;
  }
}/* ------------------ Spanglish Label ------------------ */.spanglishLabel,
.spanishLabel {
  align-content: center;
  width: 8%;
  min-width: 100px;
}.spanglishLabel h4,
.spanishLabel h4 {
  color: var(--light);
}.spanglishLabel {
  background-color: var(--dark);
}.spanishLabel {
  background-color: var(--brand);
}/* ------------------ Vocabulary Button ------------------ */.exampleCardTags {
  background-color: var(--theme);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0px;
}.exampleCardTagsList {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 36px 10px 10px;
}.showTagsButton {
  height: 100%;
  background-color: var(--theme);
  color: var(--light);
  margin: 0px;
  padding: 0px 10px;
}.hideTagsButton {
  background-color: transparent;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 12px;
  cursor: pointer;
  z-index: 5;
}.hideTagsButton img {
  width: 12px;
  height: 12px;
  color: var(--light);
}/* ------------------ Add Adding Remove Custom ------------------ */button.label.customLabel {
  text-align: center;
  font-family: "Poppins", "Avenir", "Helvetica", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 30px;
  border: none;
  cursor: default;
  /* align text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light);
  background-color: var(--brand);
}button.label.customLabel:hover {
  cursor: default;
  background-color: var(--brand);
}.customLabel h4 {
  color: var(--light);
}
}@layer legacy {#bulkAddModeButtons {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 100%;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
}#bulkAddModeButtons button {
  margin: 4px;
  padding: 2px 8px;
}#bulkAddModeButtons .bulkAddExamplesButton,
#bulkAddModeButtons .bulkRemoveFlashcardsButton,
#bulkAddModeButtons .clearSelectionButton {
  font-size: 0.75rem;
  border-radius: 4px;
  height: 85%;
}#bulkAddModeButtons .bulkAddExamplesButton:hover,
#bulkAddModeButtons .bulkRemoveFlashcardsButton:hover,
#bulkAddModeButtons .clearSelectionButton:hover {
  background-color: var(--accent);
}#bulkAddModeButtons .bulkAddExamplesButton {
  background-color: darkgreen;
}#bulkAddModeButtons .bulkAddExamplesButton:disabled {
  background-color: var(--dark);
}#bulkAddModeButtons .bulkRemoveFlashcardsButton {
  background-color: darkred;
}#bulkAddModeButtons .bulkRemoveFlashcardsButton:disabled {
  background-color: var(--dark);
}#bulkAddModeButtons .clearSelectionButton {
  border: 2px solid var(--accent);
  background-color: var(--light);
  color: var(--dark);
}#bulkAddModeButtons .clearSelectionButton:disabled {
  background-color: var(--dark);
}#bulkAddModeButtons .clearSelectionButton:hover {
  color: var(--light);
}.examplesTable .displayExamplesDescription .tableOptionsWrapper,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper {
  position: absolute;
  right: 0;
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton {
  background-color: transparent;
  margin: 0;
  border: none;
  padding: 0;
  max-width: 48px;
  margin-left: 8px;
  margin-right: 8px;
  transition: transform 0.1s ease-in-out;
}@media screen and (max-width: 768px) {
  .examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton,
  .flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton {
    max-width: 32px;
    margin-left: 4px;
    margin-right: 4px;
  }
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton img,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton img {
  width: 48px;
}@media screen and (max-width: 768px) {
  .examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton img,
  .flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton img {
    width: 32px;
  }
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton:hover,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptionsButton:hover {
  transform: scale(1.15);
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions {
  position: absolute;
  bottom: 100%;
  right: 0;
  max-width: 50vw;
  background-color: var(--light);
  white-space: nowrap;
  display: inline-block;
  padding: 4px;
  border: 1px solid var(--theme);
}@media screen and (max-width: 768px) {
  .examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions,
  .flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions {
    max-width: 100vw;
    min-width: 300px;
  }
}@media screen and (max-width: 480px) {
  .examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions,
  .flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions {
    text-wrap: wrap;
  }
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button {
  color: var(--dark);
  padding: 4px;
  margin: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button p,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button p {
  margin: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button:not(:first-child),
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button:not(:first-child) {
  border-top: 1px solid var(--theme);
  padding-top: 4px;
  margin-top: 4px;
}.examplesTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button:hover,
.flashcardTable .displayExamplesDescription .tableOptionsWrapper .tableOptions button:hover {
  background-color: var(--accent);
}.examplesTable .displayExamplesDescription,
.flashcardTable .displayExamplesDescription {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}.examplesTable .displayExamplesDescription .inline-loading,
.flashcardTable .displayExamplesDescription .inline-loading {
  color: var(--dark);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 4px 0;
}.examplesTable,
.flashcardTable {
  position: relative;
  overflow: visible;
  margin: 0 2%;
}.examplesTable .tableHeader,
.flashcardTable .tableHeader {
  box-sizing: border-box;
  font-size: 12px;
  padding: 0;
  margin: 5px 30px;
}@media screen and (max-width: 768px) {
  .examplesTable .tableHeader,
  .flashcardTable .tableHeader {
    margin: 5px 0;
  }
}@media screen and (max-width: 480px) {
  .examplesTable .tableHeader,
  .flashcardTable .tableHeader {
    margin: 5px 0;
  }
}@media screen and (max-width: 480px) {
  .flashcardTable .tableHeader {
    margin: 5px 0;
    margin-bottom: 45px;
  }
  .flashcardTable .tableHeader #bulkAddModeButtons {
    top: 50px;
    left: -2px;
  }
  .flashcardTable .tableHeader #bulkAddModeButtons button {
    margin: 0;
  }
}@media screen and (max-width: 480px) {
  .flashcardTable .tableHeader {
    margin: 5px 0;
    margin-bottom: 45px;
  }
}
}@layer legacy {.selectAddButton,
.selectRemoveButton,
.disabledButton,
.pendingButton,
.selectedAddButton,
.selectedRemoveButton {
  width: 10%;
  min-width: 120px;
  cursor: pointer;
}.selectAddButton {
  background-color: white;
  border: 2px solid green;
  color: green;
}.selectRemoveButton {
  background-color: white;
  border: 2px solid red;
  color: red;
}.disabledButton {
  background-color: none;
}.selectedAddButton {
  background-color: darkgreen;
}.selectedRemoveButton {
  background-color: darkred;
}.pendingButton {
  background-color: var(--dark);
}.bulkRemoveButtonIcon {
  display: none;
}@media (max-width: 480px) {
  .pendingButton,
  .selectRemoveButton,
  .selectedRemoveButton {
    margin: 2px;
    margin-right: 0;
    padding: 0;
    min-width: 0px;
    border: none;
    background-color: var(--light);
  }
  .pendingButton:hover,
  .selectRemoveButton:hover,
  .selectedRemoveButton:hover {
    background-color: var(--light);
  }
  .pendingButton .bulkRemoveButtonText,
  .selectRemoveButton .bulkRemoveButtonText,
  .selectedRemoveButton .bulkRemoveButtonText {
    display: none;
  }
  .pendingButton .bulkRemoveButtonIcon,
  .selectRemoveButton .bulkRemoveButtonIcon,
  .selectedRemoveButton .bulkRemoveButtonIcon {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2px solid red;
    border-radius: 4px;
  }
  .selectedRemoveButton .bulkRemoveButtonIcon {
    background-color: red;
    position: relative;
  }
  .selectedRemoveButton .bulkRemoveButtonIcon img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%);
    width: 24px;
    height: 24px;
    margin: auto;
  }
}
}@layer primitives {._root_s0ihz_1 {
  display: inline-flex;
  gap: var(--lcs-space-3);
  align-items: center;
  cursor: pointer;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
}._root_s0ihz_1:has(._input_s0ihz_10:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}/* Native control stays in the accessibility tree and drives the visual box. */._input_s0ihz_10 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}._box_s0ihz_26 {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: var(--lcs-control-border) solid var(--lcs-border-checkbox);
  border-radius: var(--lcs-radius-sm);
  background-color: var(--lcs-color-surface);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._checked_s0ihz_39 {
  border-color: var(--lcs-color-action);
  background-color: var(--lcs-color-action);
}._input_s0ihz_10:focus-visible + ._box_s0ihz_26 {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._label_s0ihz_49 {
  color: var(--lcs-color-ink);
}._labelHidden_s0ihz_53 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}@media (prefers-reduced-motion: reduce) {
  ._box_s0ihz_26 {
    transition: none;
  }
}
}@layer primitives{._root_21m9r_2 {
  overflow: hidden;
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface);
}._headerRow_21m9r_9 {
  display: grid;
  align-items: center;
  padding: var(--dt-header-pad, var(--lcs-space-5) var(--lcs-space-8));
  gap: var(--dt-column-gap, var(--lcs-space-6));
  background-color: var(--lcs-color-surface-dark);
  grid-template-columns: var(--dt-columns);
}._headerCell_21m9r_18 {
  color: var(--lcs-on-dark-75);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-eyebrow);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: var(--lcs-tracking-eyebrow);
  text-transform: uppercase;
}/* No zebra striping and no vertical rules — one hairline between rows.
 * 56px is the gallery floor. Finder sets --dt-row-min-height to the in-row
 * Add (40px) plus the 14px row pad on each side. */._row_21m9r_30 {
  display: grid;
  box-sizing: border-box;
  min-height: var(--dt-row-min-height, 56px);
  align-items: center;
  padding: var(--dt-row-pad, var(--lcs-space-5) var(--lcs-space-8));
  gap: var(--dt-column-gap, var(--lcs-space-6));
  grid-template-columns: var(--dt-columns);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._row_21m9r_30 + ._row_21m9r_30,
._expandRow_21m9r_42 + ._row_21m9r_30 {
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}._row_21m9r_30:hover {
  background-color: var(--lcs-tint-hover);
}._selected_21m9r_50,
._selected_21m9r_50:hover {
  background-color: var(--lcs-tint-row-selected);
}._cell_21m9r_55 {
  min-width: 0;
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-body);
}._alignEnd_21m9r_62 {
  text-align: right;
}._expandRow_21m9r_42 {
  display: block;
  padding: var(--lcs-space-7) var(--lcs-space-8) var(--lcs-space-8);
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  background-color: var(--lcs-color-page);
}._expandFlush_21m9r_73 {
  padding: 0;
  border-top: none;
  background-color: transparent;
}._record_21m9r_79 {
  position: relative;
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}._selectedRecord_21m9r_84::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--lcs-tint-row-selected);
  pointer-events: none;
}._noRowHover_21m9r_92 ._row_21m9r_30:hover {
  background-color: transparent;
}._noRowHover_21m9r_92 ._selected_21m9r_50,
._noRowHover_21m9r_92 ._selected_21m9r_50:hover {
  background-color: var(--lcs-tint-row-selected);
}._empty_21m9r_101 {
  padding: var(--lcs-space-8);
}@media (max-width: 768px) {
  ._headerRow_21m9r_9 {
    padding: var(--dt-header-pad, var(--lcs-space-5) var(--lcs-space-7));
    /* Falls back to the desktop grid when the caller gave no mobile layout. */
    grid-template-areas: var(--dt-mobile-areas, none);
    grid-template-columns: var(--dt-mobile-columns, var(--dt-columns));
    /* Defaults match prior hardcodes so other consumers stay unchanged. */
    row-gap: var(--dt-mobile-row-gap, var(--lcs-space-1));
    column-gap: var(--dt-mobile-column-gap, var(--dt-column-gap, var(--lcs-space-6)));
  }
  ._row_21m9r_30 {
    padding: var(--dt-row-pad, var(--lcs-space-5) var(--lcs-space-7));
    grid-template-areas: var(--dt-mobile-areas, none);
    grid-template-columns: var(--dt-mobile-columns, var(--dt-columns));
    row-gap: var(--dt-mobile-row-gap, var(--lcs-space-1));
    column-gap: var(--dt-mobile-column-gap, var(--dt-column-gap, var(--lcs-space-6)));
  }
  ._placed_21m9r_122 {
    grid-area: var(--dt-mobile-area);
  }
  ._hiddenOnMobile_21m9r_125 {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {
  ._row_21m9r_30 {
    transition: none;
  }
}
}@layer primitives{._list_15rs3_2 {
  width: 330px;
  max-width: 90vw;
  padding: var(--lcs-space-2);
  margin: 0;
  list-style: none;
}._item_15rs3_10 {
  display: flex;
  width: 100%;
  gap: var(--lcs-space-5);
  align-items: flex-start;
  padding: var(--lcs-space-4) var(--lcs-space-5);
  border: none;
  border-radius: var(--lcs-radius-md);
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._item_15rs3_10:hover {
  background-color: var(--lcs-tint-hover);
}/* Paper list, not a selected table row — parchment, not action-blue tint. */._listFlush_15rs3_30 ._item_15rs3_10:hover {
  background-color: var(--lcs-color-page);
}._item_15rs3_10:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: calc(var(--lcs-focus-offset) * -1);
}._body_15rs3_39 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--lcs-space-1);
}._labelRow_15rs3_46 {
  display: flex;
  gap: var(--lcs-space-3);
  align-items: center;
}._label_15rs3_46 {
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._hint_15rs3_58 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}/* Flush actions list — 13×16 rows, hairline dividers, labels at 400. */._listFlush_15rs3_30 {
  overflow: hidden;
  padding: 0;
}._listFlush_15rs3_30 ._item_15rs3_10 {
  padding: 13px var(--lcs-space-7);
  border-radius: 0;
}._listFlush_15rs3_30 li + li ._item_15rs3_10 {
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}._listFlush_15rs3_30 ._label_15rs3_46 {
  font-weight: var(--lcs-weight-regular);
}@media (prefers-reduced-motion: reduce) {
  ._item_15rs3_10 {
    transition: none;
  }
}
}@layer primitives {._root_y6e40_1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-6);
  align-items: center;
  justify-content: space-between;
}._pages_y6e40_9 {
  display: flex;
  gap: var(--pg-gap, var(--lcs-space-3));
  align-items: center;
}._page_y6e40_9 {
  box-sizing: border-box;
  width: var(--lcs-control-height-sm);
  height: var(--lcs-control-height-sm);
  padding: 0;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  border-radius: var(--lcs-radius-lg);
  background-color: var(--lcs-color-surface);
  color: var(--lcs-color-ink);
  cursor: pointer;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-action);
  font-weight: var(--pg-idle-weight, var(--lcs-weight-bold));
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._page_y6e40_9:hover:not(:disabled) {
  background-color: var(--lcs-tint-hover);
}._page_y6e40_9:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._current_y6e40_40,
._current_y6e40_40:hover {
  border-color: var(--lcs-color-action);
  background-color: var(--lcs-color-action);
  color: var(--lcs-color-on-action);
  font-weight: var(--lcs-weight-bold);
}._parchmentEnd_y6e40_48 button:disabled {
  opacity: 1;
  border-color: var(--lcs-border-card);
  background-color: var(--lcs-color-page);
  color: var(--lcs-color-steel);
}/* Ends fade rather than disappear, so the control never reflows. */._page_y6e40_9:disabled {
  opacity: 0.35;
  pointer-events: none;
}._gap_y6e40_61 {
  width: var(--lcs-space-8);
  color: var(--lcs-color-muted);
  text-align: center;
}._range_y6e40_67 {
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}@media (prefers-reduced-motion: reduce) {
  ._page_y6e40_9 {
    transition: none;
  }
}
}@layer primitives {._root_14w7w_1 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-4);
}._rows_14w7w_7 {
  align-items: flex-start;
}._bar_14w7w_11 {
  height: 14px;
  border-radius: var(--lcs-radius-sm);
  background-color: var(--lcs-divider);
  animation: _pulse_14w7w_1 1.2s var(--lcs-ease-standard) infinite;
}._rows_14w7w_7 ._bar_14w7w_11:nth-child(5n+1) {
  width: 88%;
}._rows_14w7w_7 ._bar_14w7w_11:nth-child(5n+2) {
  width: 62%;
}._rows_14w7w_7 ._bar_14w7w_11:nth-child(5n+3) {
  width: 76%;
}._rows_14w7w_7 ._bar_14w7w_11:nth-child(5n+4) {
  width: 54%;
}._rows_14w7w_7 ._bar_14w7w_11:nth-child(5n+5) {
  width: 70%;
}@keyframes _pulse_14w7w_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}@media (prefers-reduced-motion: reduce) {
  ._bar_14w7w_11 {
    animation: none;
  }
}
}@layer features{/* One Deep Navy slab docked to the viewport. Layers stack with a hairline;
 * inner rows stay on the 1240px measure. */._slab_tdhkk_4 {
  position: fixed;
  z-index: var(--lcs-z-bottom-bar);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  animation: _rise_tdhkk_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}._row_tdhkk_18 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lcs-max-width);
  flex-wrap: wrap;
  gap: var(--lcs-space-7);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: var(--lcs-space-6) var(--lcs-space-9);
}._selection_tdhkk_31 {
  border-top: var(--lcs-border-hairline) solid var(--lcs-on-dark-12);
}._message_tdhkk_35,
._label_tdhkk_36 {
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
}._actions_tdhkk_41 {
  display: flex;
  gap: var(--lcs-space-4);
  align-items: center;
}/* On-dark ghosts toward 36/40px. Button.inline stays padding 0 in the gallery. */._dismiss_tdhkk_48 button {
  min-height: calc(var(--lcs-control-height-sm) - var(--lcs-space-1));
  padding: var(--lcs-space-3) var(--lcs-space-1);
}._clear_tdhkk_53 button {
  min-height: var(--lcs-control-height-sm);
  padding: var(--lcs-space-4) var(--lcs-space-3);
}/* Prototype primary: 13px 22px / 15px / 900, ~46px tall. Button md is 12×16. */._collect_tdhkk_59 button {
  min-height: 0;
  padding: 13px 22px;
  line-height: 20px;
}@keyframes _rise_tdhkk_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (prefers-reduced-motion: reduce) {
  ._slab_tdhkk_4 {
    animation: none;
  }
}/* Stay edge-to-edge at the narrow breakpoint — no page-pad inset. Dock above
 * the fixed mobile `TabBar` (via the offset `App.tsx` sets) rather than
 * `bottom: 0`, so the two bars stack instead of overlapping. */@media (max-width: 768px) {
  ._slab_tdhkk_4 {
    padding: 0;
    bottom: var(--lcs-mobile-tabbar-offset, 0px);
  }
}
}@layer features{._root_1v3h4_2 {
  display: inline-block;
}/* Prototype outline is 10×16 / 15/900 at ~42px. Button.sm clamps to 40px
 * because min-height includes the 1.5px border. Drop the floor and keep the
 * padding local so 15px type + outline can land at 42. */._root_1v3h4_2 > * > button {
  min-height: 0;
  padding: var(--lcs-space-4) var(--lcs-space-7);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
  line-height: normal;
}/* Button has no open/pressed prop. Scope to the trigger, not menu rows. */._root_1v3h4_2[data-state=open] > * > button {
  background-color: var(--lcs-tint-hover);
}
}@layer features {/* Trigger chrome lives in ActionsMenu. This class is the finder's hook on
 * that root for anything finder-specific. */._root_11qvw_3 {
  display: inline-block;
}
}@layer features{._sentenceCell_dt269_2 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--lcs-space-4);
}._sentenceCell_dt269_2 button:hover,
._expandToggle_dt269_10 button:hover {
  background-color: transparent;
}._sentence_dt269_2 {
  min-width: 0;
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-body);
  line-height: var(--lcs-line-body);
}._spanishRun_dt269_22 {
  font-weight: var(--lcs-weight-bold);
}._embeddedEnglish_dt269_26 {
  font-weight: var(--lcs-weight-regular);
}._actions_dt269_30 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--lcs-space-1);
}._expandToggle_dt269_10 button {
  padding: var(--lcs-space-2);
}._collectAction_dt269_41 button,
._ownedAction_dt269_42 button,
._removeAction_dt269_43 button {
  min-width: 88px;
}/* Desktop: labeled button only. Shown as the compact glyph below 768px. */._actionIcon_dt269_48 {
  display: none;
}._ownedAction_dt269_42 button,
._removeAction_dt269_43 button {
  position: relative;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
}/* Visually-hidden stable name; label text never changes with it. */._ownedA11yName_dt269_59 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}/*
 * Finder collected: "Owned" text never changes. Hover/focus matches the
 * Manager's red-fill Remove treatment exactly, including the fill
 * transition, so the two surfaces feel like one control family — only the
 * color shifts, not the label.
 */._ownedAction_dt269_42 button:not(:disabled) {
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._ownedAction_dt269_42 button:hover:not(:disabled),
._ownedAction_dt269_42 button:focus-visible:not(:disabled) {
  background-color: var(--lcs-color-error);
  border-color: var(--lcs-color-error);
  color: var(--lcs-color-on-action);
}/*
 * Manager: always "Remove". Red border/text at rest; red fill + on-action
 * (white) text on hover/focus. Disabled keeps the Button's grey treatment —
 * never the inverted hover fill. No dedicated --lcs-color-on-error token;
 * Button.destructive already pairs --lcs-color-error with --lcs-color-on-action.
 */._removeAction_dt269_43 button:not(:disabled) {
  border-color: var(--lcs-color-error);
  color: var(--lcs-color-error);
  transition: background-color var(--lcs-motion-micro) var(--lcs-ease-standard), border-color var(--lcs-motion-micro) var(--lcs-ease-standard), color var(--lcs-motion-micro) var(--lcs-ease-standard);
}._removeAction_dt269_43 button:hover:not(:disabled),
._removeAction_dt269_43 button:focus-visible:not(:disabled) {
  background-color: var(--lcs-color-error);
  border-color: var(--lcs-color-error);
  color: var(--lcs-color-on-action);
}@media (prefers-reduced-motion: reduce) {
  ._ownedAction_dt269_42 button:not(:disabled),
  ._removeAction_dt269_43 button:not(:disabled) {
    transition: none;
  }
}/*
 * Mobile action column is 44px. Icon-only controls + column-reverse keep the
 * DOM order (chevron then action) for desktop/tab, while stacking action on
 * top and chevron below. Labels stay in the accessibility tree via the
 * visually-hidden idiom — never display:none / visibility:hidden.
 */@media (max-width: 768px) {
  ._actions_dt269_30 {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--lcs-space-1);
  }
  ._collectAction_dt269_41 button,
  ._ownedAction_dt269_42 button,
  ._removeAction_dt269_43 button {
    position: relative;
    width: var(--lcs-control-height-sm);
    min-width: 0;
    height: var(--lcs-control-height-sm);
    min-height: var(--lcs-control-height-sm);
    padding: 0;
  }
  /*
   * --lcs-control-border is 1.5px; browsers rasterize a fractional stroke
   * unevenly around border-radius (corners read thicker than the sides).
   * Integer 1px keeps the outline uniform on the 40×40 control — 2px looked
   * heavy next to the 16px glyph. No matching integer token; raw px is
   * intentional. Desktop keeps the token.
   */
  ._ownedAction_dt269_42 button,
  ._removeAction_dt269_43 button {
    border-width: 1px;
  }
  ._actionVisibleLabel_dt269_145 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  ._actionIcon_dt269_48 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}._expandPanel_dt269_160 {
  position: relative;
  z-index: 1;
  display: grid;
  padding: var(--lcs-space-1) var(--lcs-space-7) var(--lcs-space-8) 60px;
  gap: var(--lcs-space-8) calc(var(--lcs-space-9) + var(--lcs-space-3));
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}._columnEyebrow_dt269_169 {
  margin-bottom: var(--lcs-space-3);
}._chipRow_dt269_173 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-2);
}._hint_dt269_179 {
  margin: var(--lcs-space-3) 0 0;
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-chip);
}._emptySpecial_dt269_186 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._dateList_dt269_193 {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: var(--lcs-space-2);
}._dateRow_dt269_200 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-3);
}._dateLabel_dt269_206 {
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._dateValue_dt269_212 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-medium);
}._vocabChip_dt269_220 button,
._specialChip_dt269_221 > * {
  padding: 5px var(--lcs-space-5);
  border-radius: var(--lcs-radius-sm);
  font-weight: var(--lcs-weight-medium);
}/*
 * Mobile: larger vocabulary tags for thumb targets (~44px). Special tags
 * match so the two columns in the expand panel stay visually even.
 * Desktop stays on the compact rule above.
 */@media (max-width: 768px) {
  ._expandPanel_dt269_160 {
    /* Match right padding so the content block centers in the card. */
    padding-left: var(--lcs-space-7);
  }
  /*
   * Containing block for Popover's mobileCentered panel once the popover
   * root is position: static. Symmetric expandPanel padding keeps this row
   * centered in the card, so left: 50% + margin-left: -42.5vw centers on
   * the screen.
   */
  ._chipRow_dt269_173 {
    position: relative;
    gap: var(--lcs-space-7);
  }
  ._vocabChip_dt269_220 button,
  ._specialChip_dt269_221 > * {
    min-height: var(--lcs-control-height);
    padding: var(--lcs-space-5) var(--lcs-space-7);
    font-size: var(--lcs-text-action);
  }
}._vocabChip_dt269_220 button {
  background-color: var(--lcs-tint-label);
  color: var(--lcs-color-on-label);
}._vocabChip_dt269_220 button[aria-pressed=true],
._vocabChip_dt269_220 button[aria-pressed=true]:hover {
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}._smokeChip_dt269_265 > * {
  background-color: var(--lcs-tint-label);
}._vocabDetail_dt269_269 {
  width: 280px;
  max-width: min(280px, 100vw - 40px);
  padding: var(--lcs-space-5) var(--lcs-space-6);
}._vocabWord_dt269_275 {
  margin: 0;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._vocabDescriptor_dt269_282 {
  margin: var(--lcs-space-1) 0 0;
  color: var(--lcs-on-dark-60);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
  font-style: italic;
}._vocabMeta_dt269_290 {
  display: flex;
  margin-top: var(--lcs-space-4);
  flex-direction: column;
  gap: var(--lcs-space-1);
}._vocabMeta_dt269_290 p {
  margin: 0;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-chip);
}._taughtIn_dt269_303 {
  margin-top: var(--lcs-space-5);
}._vocabLessonList_dt269_307 {
  display: flex;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-direction: column;
  gap: var(--lcs-space-4);
  list-style: none;
}._vocabLesson_dt269_307 {
  margin: 0;
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._vocabUnit_dt269_325 {
  margin: 0;
  color: var(--lcs-on-dark-60);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._vocabLessonItemCurrent_dt269_332 ._vocabUnit_dt269_325 {
  color: var(--lcs-color-on-surface-dark);
}/*
 * Mobile centered vocab popover is ~85vw. Drop the 280px desktop width so
 * the detail fills the panel. Keep the lesson list as the internal scroll
 * (tighter than desktop's 220px) so many lessons do not stretch the panel.
 */@media (max-width: 768px) {
  ._vocabDetail_dt269_269 {
    width: 100%;
    max-width: none;
    padding: var(--lcs-space-6) var(--lcs-space-7);
  }
  ._vocabLessonList_dt269_307 {
    max-height: 160px;
  }
}
}@layer features{._countRow_1hq56_2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: var(--lcs-space-10) 0 var(--lcs-space-5);
  gap: var(--lcs-space-7);
}/* The row doubles as the landing spot after a removal destroys the control
 * that was activated. It only takes focus programmatically, so the ring is
 * the sighted keyboard user's only clue that focus moved here. */._countRow_1hq56_2:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}._count_1hq56_2 {
  display: flex;
  align-items: baseline;
  gap: var(--lcs-space-4);
}._countNumber_1hq56_25 {
  color: var(--lcs-color-ink);
  font-family: var(--lcs-font-sans);
  font-size: 22px;
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-tight);
}._countLabel_1hq56_33 {
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
}._countTools_1hq56_39 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  gap: var(--lcs-space-3);
}/* Prototype Select all is a 40px / 10×4 / 15/900 ghost.
 * Button.inline stays padding 0 in the gallery. */._selectAll_1hq56_49 button {
  min-height: var(--lcs-control-height-sm);
  padding: var(--lcs-space-4) var(--lcs-space-1);
  font-size: var(--lcs-text-control);
  font-weight: var(--lcs-weight-bold);
}._actionsMenu_1hq56_56 {
  margin-left: var(--lcs-space-5);
}._tableCard_1hq56_60 {
  overflow: visible;
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface);
  --dt-header-pad: var(--lcs-space-5) var(--lcs-space-7);
  --dt-row-pad: var(--lcs-space-6) var(--lcs-space-7);
  --dt-column-gap: var(--lcs-space-7);
  /* 40px Add + 14px pad above and below. Do not inherit DataTable's 56px. */
  --dt-row-min-height: calc(
    var(--lcs-control-height-sm) + var(--lcs-space-6) + var(--lcs-space-6)
  );
}/* Prototype SPANISH/ENGLISH is 400. DataTable gallery stays 500. */._tableCard_1hq56_60 [role=columnheader] {
  font-weight: var(--lcs-weight-regular);
}/* DataTable already draws a card. Sit pagination in the same card.
 * overflow stays visible so the vocab popover can sit above later rows. */._tableCard_1hq56_60 [role=table] {
  overflow: visible;
  border: none;
  border-radius: 0;
}._tableCard_1hq56_60 [role=rowgroup]:first-child {
  overflow: hidden;
  border-radius: var(--lcs-radius-xl) var(--lcs-radius-xl) 0 0;
}._footer_1hq56_92 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--lcs-space-7);
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  gap: var(--lcs-space-7);
  --pg-gap: var(--lcs-space-2);
  --pg-idle-weight: var(--lcs-weight-regular);
}._range_1hq56_104 {
  color: var(--lcs-color-muted);
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-caption);
}._audio_1hq56_110 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}/* DataTable's empty slot is 20px. Prototype empty is 48px on the body itself. */._tableCard_1hq56_60 [role=rowgroup] > :has(._finderEmpty_1hq56_119),
._tableCard_1hq56_60 [role=rowgroup] > :has(._skeletonBody_1hq56_120) {
  padding: 0;
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
}/* A class plus :first-child beats EmptyState .root so a CSS-order flip
 * cannot restore the primitive's 12px stack on top of the 10px title margin. */._finderEmpty_1hq56_119 > :first-child {
  gap: 0;
}._finderEmpty_1hq56_119 > :first-child > p:first-of-type {
  margin-top: var(--lcs-space-4);
  font-weight: var(--lcs-weight-regular);
}._skeletonBody_1hq56_120 {
  padding: var(--lcs-space-11) var(--lcs-space-8);
}/* Mobile-only: tighter select↔text, more air between English and Spanish.
 * Desktop keeps the .tableCard vars above unchanged. */@media (max-width: 768px) {
  ._tableCard_1hq56_60 {
    /* Was space-1 (4px). space-4 (10px) separates the lines; between-row
     * pad stays space-6×2 + hairline (28.5px), so rows still group clearly. */
    --dt-mobile-row-gap: var(--lcs-space-4);
    /* Was space-7 (16px) via --dt-column-gap. space-3 (8px) pulls the
     * checkbox toward the sentence without crowding the 40px select col. */
    --dt-mobile-column-gap: var(--lcs-space-3);
  }
}
}@layer features {/* Trigger chrome lives in ActionsMenu. This class is the manager's hook on
 * that root for anything manager-specific. */._root_51u4j_3 {
  display: inline-block;
}
}@layer features{/* Prototype `main`: border-box max-width 1240 with 24px padding inside. */._measure_1b70s_3 {
  box-sizing: border-box;
  max-width: var(--lcs-max-width);
  margin: 0 auto;
  padding: 0 var(--lcs-page-pad);
}._titleRow_1b70s_10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lcs-space-7);
  min-height: calc(var(--lcs-text-eyebrow) * var(--lcs-line-body) + 2px + var(--lcs-text-h1) * var(--lcs-line-body));
  margin-bottom: var(--lcs-space-8);
  text-align: left;
}._quizAction_1b70s_21 {
  flex: none;
  margin-left: auto;
}._titleGroup_1b70s_26 {
  display: flex;
  flex-direction: column;
  /* Prototype: 2px under FLASHCARDS. One-off; scale starts at 4px. */
  gap: 2px;
}/*
 * The toggle reads as the filter panel's own header rather than a stray
 * switch next to the `<h1>`: same Card, same sectionHeader shape as
 * `FilterSection`, so it sits directly above the panel it opens.
 */._filterControl_1b70s_38 {
  margin-bottom: var(--lcs-space-8);
}/*
 * The default eyebrow is Green Smoke — a section kicker, not a control
 * name. Next to the switch that text *is* the toggle's label, so ink
 * matches the page title instead of reading as leftover header chrome.
 */._filterControl_1b70s_38 h2 {
  color: var(--lcs-color-ink);
}._filterControlActions_1b70s_51 {
  display: flex;
  align-items: center;
  gap: var(--lcs-space-5);
}._title_1b70s_10 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-body);
  text-align: left;
  text-wrap: balance;
}@media (max-width: 768px) {
  ._titleRow_1b70s_10 {
    min-height: 0;
  }
  /* The page title moves into the app header; the quiz action stays. */
  ._title_1b70s_10 {
    display: none;
  }
  ._quizAction_1b70s_21 {
    width: 100%;
  }
  ._quizAction_1b70s_21 button {
    width: 100%;
  }
}
}@layer features {._column_3fhmt_1 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-8);
}._title_3fhmt_7 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-body);
}._entries_3fhmt_15 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-7);
}@media (max-width: 768px) {
  ._title_3fhmt_7 {
    display: none;
  }
}
}@layer legacy {.CombinedCustomQuizWrapper .errorMessage {
  background-color: #fee;
  color: #c33;
  padding: 15px;
  border-radius: 0px;
  border: 1px solid #fcc;
  text-align: center;
  margin: 20px 0px;
}.combinedCustomQuizForm .combinedCustomQuizFormContentWrapper h4 {
  margin-bottom: 15px;
  color: #333;
}.mobileFilterSection {
  width: 100%;
}.mobileStepHeader,
.mobileStepFooter {
  display: none;
}@media (max-width: 768px) {
  .combinedCustomQuizDesktopTitle {
    display: none;
  }
  .mobileStepHeader {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 12px 16px 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .mobileStepHeader .mobileStepLabel {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="0"] .combinedCustomQuizForm,
  .myFlashcardsFormContentWrapper[data-mobile-step="1"] .combinedCustomQuizForm {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="0"] #removeSpanglishWrapper,
  .myFlashcardsFormContentWrapper[data-mobile-step="1"] #removeSpanglishWrapper {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="0"] #audioOnlyWrapper,
  .myFlashcardsFormContentWrapper[data-mobile-step="1"] #audioOnlyWrapper {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] #removeSpanglishWrapper,
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] #audioOnlyWrapper {
    display: flex;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .desktopStartButton,
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .desktopMenuButton {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .combinedCustomQuizForm .combinedCustomQuizFormContentWrapper h4 {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .desktopFlashcardsCountText {
    display: none;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .combinedCustomQuizForm {
    order: 1;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .mobileFilterSection {
    order: 2;
  }
  .myFlashcardsFormContentWrapper[data-mobile-step="2"] .mobileStepFooter {
    order: 3;
  }
  .mobileStepFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .mobileStepFooter .mobileCountText {
    font-size: 14px;
    font-style: italic;
    text-align: center;
    margin: auto;
  }
  .mobileStepFooter .mobileStepBackButton {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: 2px solid var(--brand);
    color: var(--brand);
  }
  .mobileStepFooter .mobileStepBackButton:hover {
    background-color: color-mix(in srgb, var(--brand) 8%, transparent);
  }
  .mobileStepFooter .mobileStepNextButton,
  .mobileStepFooter .mobileStartQuizButton {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .mobileStepFooter .mobileStepNextButton {
    background-color: var(--brand);
    color: var(--light);
  }
  .mobileStepFooter .mobileStepNextButton:hover {
    background-color: var(--accent);
  }
  .mobileStepFooter .mobileStartQuizButton {
    background-color: darkgreen;
    color: var(--light);
  }
  .mobileStepFooter .mobileStartQuizButton.disabled {
    background-color: var(--dark);
    cursor: not-allowed;
  }
  .mobileStepFooter .mobileStartQuizButton:not(.disabled):hover {
    background-color: green;
  }
}
}@layer features {._anchor_1yvkp_1 {
  position: relative;
}._body_1yvkp_5 {
  display: flex;
  flex-direction: column;
  padding: var(--lcs-space-7);
  gap: var(--lcs-space-5);
}._scope_1yvkp_12 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-5);
}._identity_1yvkp_18 {
  min-width: 0;
}._courseName_1yvkp_22 {
  margin-top: 2px;
  font-size: var(--lcs-text-body);
  font-weight: var(--lcs-weight-bold);
}._fromLesson_1yvkp_28 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._advancedToggle_1yvkp_33 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--lcs-space-5) 0 0;
  border: 0;
  border-top: var(--lcs-border-hairline) solid var(--lcs-divider);
  background: none;
  color: var(--lcs-color-action);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
  gap: var(--lcs-space-3);
}._advancedToggle_1yvkp_33:hover {
  color: var(--lcs-color-action-hover);
}._advancedToggle_1yvkp_33:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}/*
 * The advanced panel floats over whatever card sits below instead of pushing
 * it down, so opening it never reflows the column.
 */._panel_1yvkp_63 {
  position: absolute;
  z-index: var(--lcs-z-popover);
  top: calc(100% + var(--lcs-space-2));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: var(--lcs-space-7);
  border: var(--lcs-border-hairline) solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface);
  box-shadow: var(--lcs-shadow-popover);
  gap: var(--lcs-space-6);
}@media (min-width: 769px) {
  ._scope_1yvkp_12 {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--lcs-space-9);
  }
  ._identity_1yvkp_18 {
    flex: 1;
  }
  ._courseName_1yvkp_22 {
    font-size: var(--lcs-text-h3);
  }
  ._rangeControl_1yvkp_91 {
    width: 220px;
    flex: none;
  }
}
}@layer features {._root_1qyiy_1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: var(--lcs-space-7);
  gap: var(--lcs-space-6);
}._types_1qyiy_9 {
  display: flex;
  gap: var(--lcs-space-3);
}._options_1qyiy_14 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-6);
}._switches_1qyiy_20 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-6);
}/* Listening / speaking pair, sitting in the slot the toggles use otherwise. */._modes_1qyiy_27 {
  display: flex;
  gap: var(--lcs-space-3);
}._count_1qyiy_32 {
  margin: var(--lcs-space-2) 0 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}@media (min-width: 769px) {
  ._root_1qyiy_1 {
    padding: var(--lcs-space-8);
    gap: var(--lcs-space-7);
  }
  ._types_1qyiy_9 {
    gap: var(--lcs-space-4);
  }
  /* Switches take the free width; the length select keeps a fixed column. */
  ._options_1qyiy_14 {
    display: grid;
    align-items: center;
    gap: var(--lcs-space-9);
    grid-template-columns: 1fr 200px;
  }
  ._count_1qyiy_32 {
    margin-top: var(--lcs-space-2);
  }
}
}@layer features {._root_1clq1_1 {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: var(--lcs-space-7);
  gap: var(--lcs-space-6);
}/* The page H1 already reads "Choose tags (optional)" on mobile. */._header_1clq1_11 {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lcs-space-3);
}._selectedCount_1clq1_18 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._modes_1clq1_23 {
  display: flex;
  gap: var(--lcs-space-3);
}._search_1clq1_28 {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--lcs-space-6);
}._field_1clq1_36 {
  position: relative;
  z-index: var(--lcs-z-popover);
}/* Popover's root is inline-level; stretch it and the panel to the card. */._field_1clq1_36 > div,
._field_1clq1_36 > div > div {
  display: block;
  box-sizing: border-box;
  width: 100%;
}/*
 * Hang the suggestion sheet below the 44px field plus the 6px gap. The card
 * is unclipped so the sheet paints over the card below it.
 */._fieldOpen_1clq1_53 > div > div:last-child {
  top: calc(var(--lcs-control-height) + var(--lcs-space-2));
  right: 0;
  overflow: hidden;
  border-radius: var(--lcs-radius-xl);
  box-shadow: var(--lcs-shadow-popover);
}._selected_1clq1_18 {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}._chips_1clq1_68 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: var(--lcs-space-3);
  gap: var(--lcs-space-3);
}._empty_1clq1_76 {
  margin: var(--lcs-space-3) 0 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}@media (min-width: 769px) {
  ._root_1clq1_1 {
    padding: var(--lcs-space-8);
  }
  ._header_1clq1_11 {
    display: flex;
  }
  ._inlineCount_1clq1_89 {
    display: none;
  }
  ._modes_1clq1_23 {
    gap: var(--lcs-space-4);
  }
  /* Once the card is full the chip list scrolls rather than growing it. */
  ._chips_1clq1_68 {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }
}
}@layer features {._page_1lhm8_1 {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--lcs-space-9);
}._columns_1lhm8_7 {
  display: flex;
  flex-direction: column;
  margin-top: var(--lcs-space-7);
  gap: var(--lcs-space-4);
}._settings_1lhm8_14 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-4);
}/* The options card takes whatever height the settings column has left. */._optionsSlot_1lhm8_21 {
  display: flex;
  min-height: 0;
  flex: 1;
}._optionsSlot_1lhm8_21 > * {
  min-width: 0;
  flex: 1;
}._action_1lhm8_32 {
  display: flex;
  flex-direction: column;
  margin-top: var(--lcs-space-9);
  gap: var(--lcs-space-3);
}._actionCount_1lhm8_39 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
  text-align: center;
}._actions_1lhm8_46 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lcs-space-3);
}._cta_1lhm8_53,
._ctaSecondary_1lhm8_54 {
  display: flex;
  flex-direction: column;
  align-items: center;
}._desktopOnly_1lhm8_60 {
  display: none;
}@media (max-width: 768px) {
  /* One tree, two steps: the step chrome hides the half you are not on. */
  ._page_1lhm8_1[data-step="1"] ._tagsSlot_1lhm8_66,
  ._page_1lhm8_1[data-step="2"] ._settings_1lhm8_14 {
    display: none;
  }
  /* Step 1 has no count above the action; it already sits under the
   * length select, and repeating it there reads as a second answer. */
  ._page_1lhm8_1[data-step="1"] ._actionCount_1lhm8_39 {
    display: none;
  }
  /* Same as Official quiz setup: the primary CTA sits under the settings
   * rather than docking to the viewport on a white bar. */
  ._action_1lhm8_32 {
    margin-top: var(--lcs-space-7);
  }
  ._cta_1lhm8_53 {
    flex-direction: row;
    justify-content: center;
  }
  ._cta_1lhm8_53 > button {
    width: 100%;
    max-width: 320px;
  }
  ._ctaSecondary_1lhm8_54 {
    display: none;
  }
}@media (min-width: 769px) {
  ._mobileOnly_1lhm8_93 {
    display: none;
  }
  ._desktopOnly_1lhm8_60 {
    display: block;
  }
  ._columns_1lhm8_7 {
    display: grid;
    align-items: stretch;
    margin-top: var(--lcs-space-9);
    gap: var(--lcs-space-9);
    grid-template-columns: 1fr 1fr;
  }
  /* Keeps both columns ending flush no matter which card is taller. */
  ._settings_1lhm8_14 {
    min-height: 440px;
  }
  ._tagsSlot_1lhm8_66 {
    display: flex;
  }
  ._tagsSlot_1lhm8_66 > * {
    min-width: 0;
    flex: 1;
  }
  ._cta_1lhm8_53 > button {
    min-width: 360px;
    height: 56px;
    font-size: var(--lcs-text-h3);
  }
}
}@layer legacy {.LimitedCustomQuizWrapper {
  max-width: 400px;
  margin: 0 auto;
}.LimitedCustomQuizWrapper .errorMessage {
  background-color: #fee;
  color: #c33;
  padding: 15px;
  border-radius: 0px;
  border: 1px solid #fcc;
  text-align: center;
  margin: 20px 0px;
}.LimitedCustomQuizWrapper .lessonSelectorWrapper h3 {
  margin-bottom: 10px;
  color: #333;
}.limitedCustomQuizForm .limitedCustomQuizFormContentWrapper h4 {
  margin-bottom: 15px;
  color: #333;
}
}@layer features {/* Prototype `main`: border-box max-width 1240 with 24px padding inside. */._measure_dkymo_2 {
  box-sizing: border-box;
  max-width: var(--lcs-max-width);
  margin: 0 auto;
  padding: 0 var(--lcs-page-pad);
}._titleRow_dkymo_9 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lcs-space-7);
  min-height: calc(var(--lcs-text-eyebrow) * var(--lcs-line-body) + 2px + var(--lcs-text-h1) * var(--lcs-line-body));
  margin-bottom: var(--lcs-space-8);
  text-align: left;
}._titleGroup_dkymo_20 {
  display: flex;
  flex-direction: column;
  /* Prototype: 2px under FLASHCARDS. One-off; scale starts at 4px. */
  gap: 2px;
}._title_dkymo_9 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-body);
  text-align: left;
  text-wrap: balance;
}@media (max-width: 768px) {
  ._titleRow_dkymo_9 {
    display: none;
  }
}
}@layer legacy {.vocabulary-search {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}.vocabulary-search__selected-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--dark);
  background-color: #f5f5f5;
  font-size: 1rem;
  border-radius: 0;
}.vocabulary-search__selected-text {
  flex: 1;
}.vocabulary-search__clear-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}.vocabulary-search__clear-button:hover {
  color: #333;
}.vocabulary-search__input-container {
  position: relative;
}.vocabulary-search__input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--dark);
  font-size: 1rem;
  border-radius: 0;
}.vocabulary-search__input:focus {
  outline: none;
  border-color: var(--brand);
}.vocabulary-search__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--dark);
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.vocabulary-search__dropdown-item {
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}.vocabulary-search__dropdown-item:hover {
  background-color: #f0f0f0;
}.vocabulary-search__dropdown-item:last-child {
  border-bottom: none;
}.vocabulary-search__dropdown-item--selected {
  background-color: var(--brand);
  color: var(--light);
}.vocabulary-search__dropdown-item--selected .vocabulary-search__item-word,
.vocabulary-search__dropdown-item--selected .vocabulary-search__item-descriptor,
.vocabulary-search__dropdown-item--selected .vocabulary-search__item-subcategory {
  color: var(--light);
}.vocabulary-search__dropdown-item--selected:hover {
  background-color: var(--brand);
}.vocabulary-search__item-word {
  font-weight: bold;
  color: var(--dark);
  margin-bottom: 0.25rem;
}.vocabulary-search__item-descriptor {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}.vocabulary-search__item-subcategory {
  color: #999;
  font-size: 0.8rem;
  font-style: italic;
}.vocabulary-search__no-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--dark);
  border-top: none;
  padding: 1rem;
  text-align: center;
  color: #666;
  font-style: italic;
  z-index: 1000;
}
}@layer legacy {.lessons-table h2 {
  color: var(--dark);
  margin-bottom: 1rem;
}.lessons-table__content {
  position: relative;
}.lessons-table__table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--light);
}.lessons-table__table th,
.lessons-table__table td {
  border: 1px solid var(--dark);
  padding: 0.75rem;
  text-align: left;
}.lessons-table__table th {
  background-color: var(--accent);
  color: var(--light);
  font-weight: bold;
}.lessons-table__table tr:hover td {
  background-color: #f5f5f5;
}.lessons-table__row:hover {
  background-color: #f0f0f0;
}.lessons-table__empty-state {
  padding: 2rem;
  text-align: center;
  background-color: #f7fafc;
  border: 1px solid var(--dark);
  color: #666;
  font-style: italic;
}.lessons-table__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  font-size: 1.1rem;
  color: var(--dark);
}
}@layer legacy {.get-help-page {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}.get-help-page h1 {
  color: var(--dark);
  text-align: center;
  margin-bottom: 2rem;
}.get-help-page__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}.get-help-page__search-section h2 {
  color: var(--dark);
  margin-bottom: 1rem;
}.get-help-page__search-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}.get-help-page__search-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--dark);
  font-size: 1rem;
  border-radius: 0;
}.get-help-page__search-input:focus {
  outline: none;
  border-color: var(--brand);
}.get-help-page__vocabulary-section h2, .get-help-page__lessons-section h2 {
  color: var(--dark);
  margin-bottom: 1rem;
}.get-help-page__vocabulary-list, .get-help-page__lessons-list {
  position: relative;
}.get-help-page__vocabulary-table, .get-help-page__lessons-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--light);
}.get-help-page__vocabulary-table th,
.get-help-page__vocabulary-table td, .get-help-page__lessons-table th,
.get-help-page__lessons-table td {
  border: 1px solid var(--dark);
  padding: 0.75rem;
  text-align: left;
}.get-help-page__vocabulary-table th, .get-help-page__lessons-table th {
  background-color: var(--accent);
  color: var(--light);
  font-weight: bold;
}.get-help-page__vocabulary-table tr:hover td, .get-help-page__lessons-table tr:hover td {
  background-color: #f5f5f5;
}.get-help-page__vocabulary-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}.get-help-page__vocabulary-row:hover {
  background-color: #f0f0f0;
}.get-help-page__vocabulary-row--selected {
  background-color: var(--brand);
  color: var(--light);
}.get-help-page__vocabulary-row--selected:hover {
  background-color: var(--brand);
}.get-help-page__vocabulary-row--selected td {
  color: var(--light);
}.get-help-page__lesson-row:hover {
  background-color: #f0f0f0;
}.get-help-page__empty-state {
  padding: 2rem;
  text-align: center;
  background-color: #f7fafc;
  border: 1px solid var(--dark);
  color: #666;
  font-style: italic;
}.get-help-page__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  font-size: 1.1rem;
  color: var(--dark);
}.get-help-page__error {
  padding: 1rem;
  background-color: #fff5f5;
  border: 1px solid #e53e3e;
  border-left: 4px solid #e53e3e;
  color: #e53e3e;
  margin: 1rem 0;
}.get-help-page__error h2 {
  margin-bottom: 0.5rem;
  color: #e53e3e;
}.get-help-page__error p {
  margin: 0;
}.get-help-page__no-selection {
  padding: 2rem;
  text-align: center;
  background-color: #f7fafc;
  border: 1px solid var(--dark);
  color: #666;
  font-style: italic;
}
}@layer features {._column_3hou2_1 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-8);
  /* Stacked EntryCards read too wide at PageShell's 1240 measure; keep
   * them near the width of one home desktop card (~1/3 of that column). */
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  /* Fill the PageShell viewport (minus its vertical padding and the
   * mobile tab bar when present) so the title + cards sit in the middle. */
  min-height: calc(100dvh - 2 * var(--lcs-space-9) - var(--lcs-mobile-tabbar-offset));
  justify-content: center;
}@media (max-width: 768px) {
  ._column_3hou2_1 {
    min-height: calc(100dvh - 2 * var(--lcs-space-7) - var(--lcs-mobile-tabbar-offset));
  }
  ._title_3hou2_20 {
    display: none;
  }
}._title_3hou2_20 {
  margin: 0;
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-body);
}._entries_3hou2_32 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-7);
}
}@layer features {._root_dns97_1 {
  position: relative;
  z-index: var(--lcs-z-popover);
  overflow: visible;
}._tagSearch_dns97_7 {
  position: relative;
  z-index: var(--lcs-z-popover);
  width: 100%;
  max-width: 520px;
}._tagSearch_dns97_7 svg {
  width: var(--lcs-space-7);
  height: var(--lcs-space-7);
}._tagSearch_dns97_7 input {
  padding-left: 40px;
}._tagSearch_dns97_7 > div {
  display: block;
  width: 100%;
}._tagSearch_dns97_7 > div > div {
  box-sizing: border-box;
  width: 100%;
}/*
 * Hang the suggestion sheet below the 44px field (plus the 6px gap).
 * Card is unclipped so the sheet can paint past the section edge.
 */._tagSearchOpen_dns97_37 > div > div:last-child {
  top: calc(var(--lcs-control-height) + var(--lcs-space-2));
  right: 0;
  overflow: hidden;
  border-radius: var(--lcs-radius-xl);
  box-shadow: var(--lcs-shadow-popover);
}._loading_dns97_45 {
  margin: 0;
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._detail_dns97_51 {
  /* Give the absolute WordChips panel room to hang below the chip. */
  position: relative;
  min-height: var(--lcs-space-9);
}
}@layer features {._page_gojjr_1 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-5);
}/* Flush with PageShell's full 1240 column -- deliberately *not* inside
 * `.measure` so it doesn't shrink or shift when the tool below is centered. */._back_gojjr_9 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  color: var(--lcs-color-action);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--lcs-text-caption);
  font-weight: var(--lcs-weight-bold);
  gap: var(--lcs-space-2);
}._back_gojjr_9:hover {
  color: var(--lcs-color-action-hover);
}._back_gojjr_9:focus-visible {
  outline: var(--lcs-focus-ring);
  outline-offset: var(--lcs-focus-offset);
}@media (max-width: 768px) {
  ._back_gojjr_9 {
    display: none;
  }
}/* The tool reads too wide at PageShell's full 1240 measure -- cap it near
 * the search card's natural content width (520px field + card padding) and
 * center that narrower block on the page. Text inside stays left aligned
 * against this block's own edge, not the page's. */._measure_gojjr_8 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-8);
  max-width: 40rem;
  width: 100%;
  margin-inline: auto;
}._error_gojjr_52 {
  margin: 0;
  color: var(--lcs-color-error);
  font-size: var(--lcs-text-caption);
}
}@layer primitives {._root_12ikh_1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--lcs-space-6) var(--lcs-space-8);
  border-radius: var(--lcs-radius-xl);
  animation: _rise_12ikh_1 var(--lcs-motion-panel) var(--lcs-ease-standard);
  background-color: var(--lcs-color-surface-dark);
  color: var(--lcs-color-on-surface-dark);
}._message_12ikh_14 {
  font-family: var(--lcs-font-sans);
  font-size: var(--lcs-text-control);
}._actions_12ikh_19 {
  display: flex;
  gap: var(--lcs-space-5);
  align-items: center;
}@keyframes _rise_12ikh_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (prefers-reduced-motion: reduce) {
  ._root_12ikh_1 {
    animation: none;
  }
}
}@layer features {._intro_1xo5r_1 {
  margin: 0 0 var(--lcs-space-11);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._title_1xo5r_7 {
  margin: 0 0 var(--lcs-space-3);
  color: var(--lcs-color-ink);
  font-size: var(--lcs-text-h1);
  font-weight: var(--lcs-weight-bold);
  line-height: var(--lcs-line-tight);
}._section_1xo5r_15 {
  margin-bottom: var(--lcs-space-11);
}._sectionTitle_1xo5r_19 {
  margin: 0 0 var(--lcs-space-7);
  padding-bottom: var(--lcs-space-3);
  border-bottom: 1px solid var(--lcs-divider);
  color: var(--lcs-color-label);
  font-size: var(--lcs-text-eyebrow);
  font-weight: var(--lcs-weight-medium);
  letter-spacing: var(--lcs-tracking-eyebrow);
  text-transform: uppercase;
}._specimens_1xo5r_30 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-8);
  align-items: flex-start;
}._specimen_1xo5r_30 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-3);
}._specimenLabel_1xo5r_43 {
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._swatches_1xo5r_48 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--lcs-space-5);
}._swatch_1xo5r_48 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-2);
}._swatchChip_1xo5r_60 {
  height: 48px;
  border: 1px solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-md);
}._swatchName_1xo5r_66 {
  color: var(--lcs-color-ink);
  font-family: monospace;
  font-size: var(--lcs-text-chip);
  word-break: break-all;
}._scale_1xo5r_73 {
  display: flex;
  flex-direction: column;
  gap: var(--lcs-space-3);
}._scaleRow_1xo5r_79 {
  display: flex;
  gap: var(--lcs-space-5);
  align-items: center;
}._scaleName_1xo5r_85 {
  flex: 0 0 190px;
  font-family: monospace;
  font-size: var(--lcs-text-chip);
}._scaleBar_1xo5r_91 {
  height: 16px;
  background-color: var(--lcs-tint-action);
  border-radius: var(--lcs-radius-sm);
}._radiusBox_1xo5r_97 {
  width: 72px;
  height: 48px;
  border: var(--lcs-control-border) solid var(--lcs-border-control);
  background-color: var(--lcs-color-surface);
}._darkSwatch_1xo5r_104 {
  padding: var(--lcs-space-3);
  border-radius: var(--lcs-radius-sm);
  background-color: var(--lcs-color-surface-dark);
}._darkPanel_1xo5r_110 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lcs-space-5);
  align-items: center;
  padding: var(--lcs-space-8);
  border-radius: var(--lcs-radius-xl);
  background-color: var(--lcs-color-surface-dark);
}._note_1xo5r_120 {
  margin: 0 0 var(--lcs-space-7);
  color: var(--lcs-color-muted);
  font-size: var(--lcs-text-caption);
}._popoverBody_1xo5r_126 {
  width: 260px;
  padding: var(--lcs-space-7);
  font-size: var(--lcs-text-caption);
}._shellDemo_1xo5r_132 {
  overflow: hidden;
  border: 1px solid var(--lcs-border-card);
  border-radius: var(--lcs-radius-xl);
}
}@layer legacy {.frequensay-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 90%;
}.frequensay-page__setup {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.frequensay-page__setup .frequensay-setup__button {
  margin-top: 10px;
}.frequensay-page__setup .frequensay-setup__error {
  color: red;
}.frequensay-page__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.frequensay-page__content textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}.frequensay-page__content .text-to-check,
.frequensay-page__content .custom-vocabulary {
  min-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}.frequensay-page__content .text-to-check .text-to-check__stats,
.frequensay-page__content .custom-vocabulary .text-to-check__stats {
  display: flex;
  flex-direction: column;
  align-items: left;
}.frequensay-page__content .unknown-words {
  min-width: 80%;
  padding-bottom: 40px;
}
}@layer legacy {.searchable-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}.searchable-dropdown .content {
  padding: 0.5rem;
  border-radius: 0.25rem;
}.searchable-dropdown .options {
  width: 100%;
  padding: 0.25rem;
  border: 1px solid #ccc;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.searchable-dropdown .options .option {
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}.searchable-dropdown .options .option:hover {
  background-color: #f0f0f0;
}.searchable-dropdown .options .option:focus {
  outline: 2px solid #007bff;
  background-color: #e6f3ff;
}.searchable-dropdown .options .option.focused {
  background-color: #e6f3ff;
  outline: 2px solid #007bff;
}.clearButton {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0.5rem;
  padding: 0.5rem;
}.clearButton:hover {
  background-color: rgba(0, 0, 0, 0.1);
}.clearButton img {
  width: 1rem;
  height: 1rem;
}.displayContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding-left: 1rem;
}.displayContent p.content {
  margin: 0;
}
}
@layer legacy {.newCoachingWrapper {
  margin: 1rem;
}.tableWrapper {
  width: auto;
  max-height: 90vh;
  overflow-x: auto;
  margin-top: 1rem;
}.tableWrapper table {
  width: 100%;
  scroll-behavior: auto;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0; /* Spacing between cells */
  font-size: 1rem;
  line-height: 1.25rem;
}.tableWrapper table th,
.tableWrapper table td {
  min-width: 100px;
  border: 1px solid black;
  padding: 0.5rem;
  text-align: start;
  vertical-align: top;
  position: relative;
}.tableWrapper table thead th {
  position: sticky;
  top: 0px;
  z-index: 1;
  color: white;
  background-color: grey;
  font-weight: 600;
}.tableWrapper table thead th:first-child {
  position: sticky;
  left: 0px;
  z-index: 2;
}.tableWrapper table tbody td {
  background-color: #f2f2f2;
}.tableWrapper table tbody td:first-child {
  position: sticky;
  left: 0px;
  z-index: 1;
  background-color: var(--accent);
  font-weight: 600;
}.tableWrapper table tbody td:first-child h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: black;
  text-align: start;
}tr.failedToUpdate td {
  border: 2px solid red;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background-color: rgba(255, 0, 0, 0.05);
}tr.failedToUpdate td:first-child {
  border-left: 2px solid red;
}tr.failedToUpdate td:last-child {
  border-right: 2px solid red;
}.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
}.studentCell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}.studentCell .studentCellControlls {
  position: relative;
  margin-right: 10px;
}.studentCell .studentCellControlls .icon {
  color: black;
  position: relative;
  transform: none;
  cursor: pointer;
  padding: 12px;
  width: 48px;
}.studentCell h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: black;
  text-align: start;
  margin: 1rem 0;
}.studentCell p {
  font-size: 1rem;
  font-weight: 400;
  color: black;
  text-align: start;
  margin: 0.5rem 0;
}.cellWithContextual {
  margin: 5px;
  display: flex;
  justify-content: center;
}td button {
  display: flex;
  margin: auto;
}/* --------- contextual --------- */.checkboxWrapper,
.lineWrapper {
  display: flex;
  align-items: center;
  margin: 0;
}.checkboxWrapper .label,
.lineWrapper .label {
  background: none;
  padding: 0;
  color: black;
  font-size: 1rem;
  font-weight: 600;
}.checkboxWrapper .label.required::after,
.lineWrapper .label.required::after {
  content: "*";
  margin: 0 4px;
}.checkboxWrapper .label,
.checkboxWrapper .content,
.lineWrapper .label,
.lineWrapper .content {
  margin: 16px 0;
}.lineWrapper .label {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  text-align: start;
  white-space: pre;
  width: 30%;
  min-width: 100px;
  display: flex;
  justify-content: flex-start;
  text-wrap: wrap;
  padding-top: 8px;
}.lineWrapper .content {
  background: rgb(245, 245, 245);
  padding: 8px;
  min-height: 2.25rem;
  min-width: 150px;
  max-width: 70%;
}.lineWrapper h4 {
  color: black;
}.checkboxWrapper {
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-left: 30%;
}.coachingFilterSection {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
}.coachingFilterSection .simpleFiltering {
  width: 50%;
}.coachingFilterSection .simpleFiltering div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 0;
}.coachingFilterSection .simpleFiltering div label {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  width: 20%;
  min-width: 100px;
  display: flex;
  justify-content: flex-start;
  text-wrap: wrap;
  padding-top: 8px;
}.coachingFilterSection .simpleFiltering div select {
  background: rgb(245, 245, 245);
  padding: 8px;
  min-height: 2.25rem;
}.coachingFilterSection .advancedFilters {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}.coachingFilterSection .advancedFilters .buttonBox {
  width: 100%;
}.coachingFilterSection .advancedFilters .advancedFiltersWrapper {
  margin: auto;
  margin: 1rem;
  opacity: 1;
}.coachingFilterSection .advancedFilters .advancedFiltersWrapper .searchBox {
  padding: 4px 8px;
  border-radius: 4px;
  width: 100%;
  border: 1px solid gray;
  border-radius: 0.2rem;
}.coachingFilterSection .advancedFilters .advancedFiltersWrapper .searchBox:focus {
  outline: none;
  border: 1px solid blue;
}.coachingFilterSection .advancedFilters .advancedFiltersWrapper .filterByCompletion {
  margin-right: 1rem;
}.quantifiedRecords h4 {
  margin: 0;
}.addAttendee {
  width: 180px;
  margin: 1rem 1rem 0.25rem 1rem;
}/* --------- Delete Record Component --------- */.deleteWrapper {
  border: 2px solid red;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}.deleteWrapper h3 {
  color: red;
  font-size: x-large;
  margin: 0;
}.deleteWrapper .deleteBody {
  width: 100%;
}.deleteWrapper .deleteBody .buttonBox {
  margin: 1rem 0 auto auto;
}.attendee-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}.attendee-wrapper .redButton {
  margin: 0.25rem 0.5rem;
}.clearStudent {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.5rem;
}.clearStudent img {
  width: 16px;
  height: 16px;
}#searchStudentWrapper.customSearchStudentWrapper input {
  min-width: 300px;
}#searchStudentWrapper.customSearchStudentWrapper #optionsWrapper {
  min-width: 300px;
}/* --------- Weeks Table --------- */.editModeToggle {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}.editModeToggle button {
  margin: 0 0.5rem;
}.tableWrapper table {
  width: 100%;
  border-collapse: collapse;
}.tableWrapper table th {
  padding: 12px;
  transition: background-color 0.2s;
  user-select: none;
}.tableWrapper table th .thContentWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}.tableWrapper table th.sortable {
  cursor: pointer;
}.tableWrapper table th.sortable:hover {
  background-color: darkgrey;
}.tableWrapper table td.notesCell {
  padding: 0;
  height: 100%;
  position: relative;
  min-width: 200px;
}.tableWrapper table td.notesCell p {
  padding: 0.5rem;
  margin: 0;
}.tableWrapper table td.notesCell textarea {
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  margin: 0.5rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  resize: none;
  -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
  -moz-box-sizing: border-box; /* FF1+ */
  box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}.checkboxCell .switch {
  margin: 0.5rem;
}/* --------- Edit Icon - Weeks Table Item --------- */.tableWrapper table td.editIconCell {
  text-align: center;
  vertical-align: middle;
  background-color: var(--accent);
}.tableWrapper table td.editIconCell .editIconRowRecord {
  cursor: pointer;
  width: 3rem;
  margin: auto;
  transition: transform 0.2s;
}.tableWrapper table td.editIconCell:hover .editIconRowRecord {
  transform: scale(1.25);
}.tableWrapper table td.editIconCell .cancelEditIcon {
  cursor: pointer;
  width: 3rem;
  margin: 1rem;
  transition: transform 0.2s;
}.tableWrapper table td.editIconCell .cancelEditIcon:hover {
  transform: scale(1.25);
}.tableWrapper table td.editIconCell .submitEditButton:hover {
  background-color: darkgreen;
}
}@layer legacy {.student-deep-dive {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}.student-deep-dive h1 {
  margin-bottom: 30px;
  color: #333;
}.student-deep-dive .content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}.student-selection-section {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.student-selection-section h2 {
  margin-bottom: 20px;
  color: #444;
}.student-deep-dive-search {
  position: relative;
}.search-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}.search-input-wrapper-inner {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}.active-students-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 200px;
  width: 30%;
  margin-bottom: 10px;
}.active-students-filter p {
  margin: 0 0.5rem;
}.search-input-wrapper-inner input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}.selected-student-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background-color: #f5f5f5;
}.clear-student-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}.clear-student-button:hover {
  color: #333;
}.search-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}.search-result-item {
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}.search-result-item:hover {
  background-color: #f0f0f0;
}.search-result-item.selected {
  background-color: #e3f2fd;
}.student-details-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.student-details-section h2 {
  margin-bottom: 20px;
  color: #444;
}.student-info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.info-row {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}.info-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}.info-label {
  font-weight: 600;
  color: #666;
  width: 120px;
  flex-shrink: 0;
}.info-value {
  color: #333;
  flex-grow: 1;
}/* ------------------ Student Memberships ------------------ */.student-memberships {
  margin-top: 30px;
}.membership-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}.membership-header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  position: relative;
}.editIcon {
  width: 48px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  padding: 0.5rem;
  transform: translate(30%, -30%);
}.editIcon:hover {
  background-color: var(--accent);
}.membership-header h4 {
  margin: 0;
  color: #333;
}.membership-details {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}.detail-row {
  display: flex;
  margin: 0 0.5rem;
}.detail-label {
  font-weight: 600;
  color: #666;
  min-width: 100px;
  flex-shrink: 0;
}.detail-value {
  color: #333;
  flex-grow: 1;
  padding: 0 0.5rem;
}/*

.student-memberships h3 {
  color: #444;
  margin-bottom: 20px;
}

.memberships-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.membership-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.membership-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.membership-header h4 {
  margin: 0;
  color: #333;
}

.membership-status {
  display: flex;
  gap: 8px;
}
*/.view-weeks-button {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}.view-weeks-button:hover {
  background-color: #ddd;
  color: #333;
}.view-weeks-button.active {
  background-color: #ccc;
  color: #333;
}.down-arrow {
  width: 16px;
  height: 16px;
  margin: 0.25rem;
  transition: transform 0.3s ease-in-out;
}.down-arrow.active {
  transform: rotate(-180deg);
}.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin: 0 1rem;
}.status.active {
  background-color: #e8f5e9;
  color: #2e7d32;
}.status.on-hold {
  background-color: #fff3e0;
  color: #ef6c00;
}.status.inactive {
  background-color: #ffebee;
  color: #c62828;
}/*
.membership-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-row .label {
  color: #666;
  font-weight: 500;
}

.detail-row .value {
  color: #333;
}

.view-weeks-button {
  width: 100%;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.view-weeks-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

.view-weeks-button:active {
  background-color: #d0d0d0;
}
*//* ------------------ Membership Weeks ------------------ */.membership-weeks {
  margin: 0.5rem;
}.membership-weeks table {
  width: 100%;
  border-collapse: collapse;
}.membership-weeks table th,
.membership-weeks table td {
  border: 1px solid #eee;
  padding: 0.5rem;
}.membership-weeks table th {
  border-top: none;
}.membership-weeks table th:first-child {
  border-left: none;
}.membership-weeks table th:last-child {
  border-right: none;
}.membership-weeks table td {
  border-bottom: none;
}.membership-weeks table td:first-child {
  border-left: none;
}.membership-weeks table td:last-child {
  border-right: none;
}.membership-weeks h3 {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}.week-header {
  width: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}.weeks-list {
  width: 100%;
}/*
.membership-weeks {
  margin-top: 30px;
}

.membership-weeks h3 {
  color: #444;
  margin-bottom: 20px;
}

.weeks-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; 
}

.week-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.week-header h4 {
  margin: 0;
  color: #333;
}

.week-date {
  color: #666;
  font-size: 14px;
}

.week-stats {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 15px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  color: #666;
  font-weight: 500;
}

.stat-value {
  color: #333;
  font-weight: 600;
}

.week-notes {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.notes-label {
  display: block;
  color: #666;
  font-weight: 500;
  margin-bottom: 8px;
}

.notes-content {
  color: #333;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.week-assignments {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.assignments-label {
  display: block;
  color: #666;
  font-weight: 500;
  margin-bottom: 8px;
}

.assignments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.assignment-item {
  color: #333;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

.assignment-item:last-child {
  border-bottom: none;
}
*/.coach-students-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}.coach-student-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}.coach-student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}.coach-student-card h4 {
  margin: 0 0 8px 0;
  color: #333;
}.coach-student-card p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
}@layer legacy {.coachStudentDrillDown {
  display: flex;
  flex-direction: column;
  width: auto;
}.coachStudentDrillDown .coach-item-container {
  border-top: 1px solid #ccc;
  margin-top: 0.5rem;
  max-width: 250px;
  text-wrap: wrap;
  width: auto;
}.coachStudentDrillDown .coach-item-container p {
  margin: 0.25rem;
}.coachStudentDrillDown .coach-item-container span.coach-drilldown-label {
  padding-right: 0.25rem;
  font-weight: 600;
  color: #333;
}
}@layer legacy {.table-wrapper {
  margin: 1rem;
}.body-container {
  width: auto;
  max-height: 90vh;
  overflow-x: auto;
  margin-top: 1rem;
}.body-container table {
  width: 100%;
  scroll-behavior: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  line-height: 1.25rem;
}.body-container table th,
.body-container table td {
  min-width: 100px;
  border: 1px solid black;
  padding: 0.5rem;
  text-align: start;
  vertical-align: top;
  position: relative;
}.body-container table thead th {
  position: sticky;
  top: 0px;
  z-index: 1;
  color: white;
  background-color: grey;
  font-weight: 600;
}.body-container table thead th.sortable {
  cursor: pointer;
}.body-container table thead th.sortable:hover {
  background-color: darkgrey;
}.body-container table thead th .thContentWrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}.body-container table thead th .thContentWrapper .sortIcon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}.body-container table thead th:first-child {
  position: sticky;
  left: 0px;
  z-index: 2;
}.body-container table tbody td {
  background-color: #f2f2f2;
}.body-container table tbody td:first-child {
  position: sticky;
  left: 0px;
  z-index: 1;
  background-color: var(--accent);
  font-weight: 600;
}.edit-icon {
  width: 2r 0.25em;
  height: 2rem;
  cursor: pointer;
}.edit-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 2.25rem;
  height: 2.5rem;
  background-color: var(--accent);
  cursor: pointer;
}.table-wrapper table tbody td.edit-icon-cell:hover {
  background-color: gray;
}.table-wrapper table tbody td.edit-icon-cell:hover .edit-icon-container {
  background-color: gray;
}.noResults {
  background-color: white !important;
}
}@layer legacy {.sortingComponentWrapper {
  align-self: center;
  justify-content: center;
}.sortingComponentWrapper .lineWrapper .label {
  padding-top: 0;
  min-width: 0;
  margin-left: 10px;
}
}@layer legacy {/* ------------------ CoachingDashboard --------- */.coachingDashbaordBody {
  margin: 1rem;
}.coachingDashbaord__header__title {
  background-color: var(--accent);
  font-size: 1.5rem;
  padding: 1rem;
}/* ------------------ SectionHeader --------- */.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 2px solid #e0e0e0;
  padding: 10px;
}.sectionHeader .titleWrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}.sectionHeader .titleWrapper:hover {
  background-color: lightgray;
  border-radius: 5px;
}.sectionHeader .titleWrapper h2,
.sectionHeader .titleWrapper h3 {
  margin: 0.5rem;
}.sectionHeader .titleWrapper button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}.sectionHeader .titleWrapper button .colapsableMenuArrow {
  color: black;
  width: 1rem;
  height: 1rem;
}.sectionHeader .titleWrapper div.button {
  margin-left: auto;
}.sectionHeader button.newRecordButton {
  background-color: darkgreen;
  padding: 10px 30px;
  cursor: pointer;
}.viewRecordIconCell {
  position: relative;
}.viewRecordIconCell .viewRecordIconButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}.viewRecordIconCell .viewRecordIcon {
  width: 3rem;
  height: 3rem;
}.viewRecordIconCell:hover {
  background-color: lightgray !important;
}.monthSelectorContainer {
  margin: 0.5rem;
}.monthSelectorLabel {
  margin-right: 1rem;
}
}@layer legacy {/* Extends (does not override) the shared .sectionHeader / .table-wrapper
   styles from CoachingDashboard.scss and Table.scss. Overrides below are
   scoped under .leadsToReEngage so they only apply to this report. */.leadsToReEngage > .sectionHeader {
  justify-content: flex-start;
  gap: 1rem;
}.leadsToReEngage__coachSection {
  margin-left: 1rem;
}.leadsToReEngage__coachSection .sectionHeader {
  background-color: var(--accent);
}.leadsToReEngage__coachSection .sectionHeader .titleWrapper:hover {
  background-color: rgba(0, 0, 0, 0.1);
}.leadsToReEngage__toggleAllButton {
  background-color: black;
  color: white;
  border: 1px solid black;
  border-radius: 0.25rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}.leadsToReEngage__toggleAllButton:hover:not(:disabled) {
  background-color: white;
  color: black;
}.leadsToReEngage__toggleAllButton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}.leadsToReEngage__emptyState {
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  background-color: white;
}
}@layer legacy {/* ------------------ CoachingDashboard --------- */.coachingDashbaordBody {
  margin: 1rem;
}.coachingDashbaord__header__title {
  background-color: var(--accent);
  font-size: 1.5rem;
  padding: 1rem;
}/* ------------------ SectionHeader --------- */.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 2px solid #e0e0e0;
  padding: 10px;
}.sectionHeader .titleWrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}.sectionHeader .titleWrapper:hover {
  background-color: lightgray;
  border-radius: 5px;
}.sectionHeader .titleWrapper h2,
.sectionHeader .titleWrapper h3 {
  margin: 0.5rem;
}.sectionHeader .titleWrapper button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}.sectionHeader .titleWrapper button .colapsableMenuArrow {
  color: black;
  width: 1rem;
  height: 1rem;
}.sectionHeader .titleWrapper div.button {
  margin-left: auto;
}.sectionHeader button.newRecordButton {
  background-color: darkgreen;
  padding: 10px 30px;
  cursor: pointer;
}.viewRecordIconCell {
  position: relative;
}.viewRecordIconCell .viewRecordIconButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}.viewRecordIconCell .viewRecordIcon {
  width: 3rem;
  height: 3rem;
}.viewRecordIconCell:hover {
  background-color: lightgray !important;
}.monthSelectorContainer {
  margin: 0.5rem;
}.monthSelectorLabel {
  margin-right: 1rem;
}.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px;
}@media (max-width: 768px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
}.section-with-interactive-table .body-container table tbody td:first-child {
  cursor: pointer;
}.sectionHeader--deprecated .titleWrapper {
  cursor: not-allowed;
  color: #9e9e9e;
}.sectionHeader--deprecated .titleWrapper:hover {
  background-color: transparent;
}.sectionHeader--deprecated .titleWrapper h2 {
  color: #9e9e9e;
}.sectionHeader--deprecated .titleWrapper .colapsableMenuArrow {
  color: #bdbdbd;
}
}@layer legacy {.edit-course-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}
}@layer legacy {h2 {
  margin-bottom: 20px;
}.check-mark {
  text-align: center;
}
}@layer legacy {/* ------------------ Edit Lesson View ------------------ */.edit-lesson-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
}@layer legacy {/* ------------------ Filter Students Table ------------------ */.filter-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
}@layer legacy {/* ------------------ Filter Students Table ------------------ */.filter-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
}@layer legacy {.newStudentButtonWrapper {
  display: flex;
  justify-content: flex-end;
  margin: 1rem;
}.error-message {
  color: red;
  font-weight: bold;
  margin: 1rem;
  text-align: center;
}/* ------------------ Back Button ------------------ */.back-button-container {
  margin: 1rem;
}.back-button-container .back-button {
  position: absolute;
  padding: 0.5rem 1rem;
  background-color: var(--brand);
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}.back-button-container .back-button:hover {
  background-color: var(--accent);
  text-decoration: underline;
}/* --- From Courses ---
.back-button-container {
  margin-bottom: 20px;
}

.back-button {
  text-decoration: none;
  color: #0066cc;
  font-weight: 500;

  &:hover {
    text-decoration: underline;
  }
}
*//* --- from Lessons ---
.back-button-container {
  margin-bottom: 15px;
}

.back-button {
  text-decoration: none;
  color: #333;
  display: inline-flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
  font-weight: 500;

  &:hover {
    background-color: #e9e9e9;
  }
}
  */
}@layer legacy {/* ------------------- Example Manager Sub Nav ------------------- */.ExampleManagerSubNav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  margin: 1rem;
}.ExampleManagerSubNav .ExampleManagerSubNavOption {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  border: 1px solid var(--dark);
  padding: 1rem;
  cursor: pointer;
  background-color: var(--light);
}.ExampleManagerSubNav .ExampleManagerSubNavOption:hover {
  background-color: var(--accent);
}.ExampleManagerSubNav .ExampleManagerSubNavOption.selected {
  background-color: var(--brand);
  color: var(--light);
}.ExampleManagerSubNav .ExampleManagerSubNavOption input {
  display: none;
}.ExampleManagerSubNav .ExampleManagerSubNavOption span {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
}
}@layer legacy {.quiz-assignment-selector-container {
  margin: 1rem 1.5rem;
  max-width: 800px;
  box-sizing: border-box;
}
}@layer legacy {.student-selector-component-container {
  margin: 1rem 1.5rem;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
}.student-assignment-search {
  position: relative;
}.search-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}.search-input-wrapper-inner {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}.search-input-wrapper-inner input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}.selected-student-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background-color: #f5f5f5;
}.clear-student-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}.clear-student-button:hover {
  color: #333;
}.search-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}.search-result-item {
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}.search-result-item:hover {
  background-color: #f0f0f0;
}.search-result-item.selected {
  background-color: #e3f2fd;
}
}@layer legacy {.paste-table {
  width: 100%;
  border: 2px solid var(--dark);
  border-radius: 4px;
  /* Semantic HTML table - class applied directly to <table> element */
  /* Class applied directly to <th> element */
  /* Class applied directly to <tr> element in header */
  /* Class applied directly to <tr> element in body */
  /* Class applied directly to <td> element */
}.paste-table__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed; /* Allows column width control */
  border-bottom: 1px solid var(--dark); /* Add border to separate table from footer */
  position: relative; /* Establish a stacking context for error tooltips */
  z-index: 0; /* Base z-index for the stacking context */
  margin: 0;
}.paste-table--error {
  border: 2px solid var(--error-bg);
  border-radius: 4px;
  padding: 1rem;
}.paste-table__error {
  color: var(--error-text);
  text-align: center;
}.paste-table__error h3 {
  margin: 0 0 0.5rem;
}.paste-table__error p {
  margin: 0;
}.paste-table__column-header {
  margin: 0;
  padding: 0.5rem;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--light);
  background-color: var(--theme);
  color: var(--light);
  border-bottom: 1px solid var(--dark);
  box-sizing: border-box;
}.paste-table__column-header:last-child {
  border-right: none;
}.paste-table__header {
  margin: 0;
}.paste-table__row {
  margin: 0;
  /* Apply special styling to the last row's cells to remove bottom borders */
}.paste-table__row:last-child .paste-table__cell-container {
  border-bottom: none;
}.paste-table__cell-container {
  position: relative;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
  box-sizing: border-box;
  vertical-align: top;
  background-color: var(--light);
}.paste-table__cell-container:last-child {
  border-right: none;
}.paste-table__cell-container--active {
  background-color: rgba(68, 154, 194, 0.25);
}.paste-table__cell-container--error {
  background-color: rgba(255, 0, 0, 0.25);
}.paste-table__cell-container--error--active {
  background-color: rgba(255, 0, 0, 0.5);
}.paste-table__cell-container:has(.paste-table__cell-readonly) {
  background-color: lightgray;
  vertical-align: middle;
  text-align: center;
}.paste-table__cell-container:has(.paste-table__cell-boolean-wrapper) {
  vertical-align: middle;
  text-align: center;
}.paste-table__cell-wrapper {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: stretch;
}.paste-table__cell {
  width: 100%;
  height: 100%;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.5rem;
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  border: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
  outline: none;
}.paste-table__cell[type=text], .paste-table__cell[type=number], .paste-table__cell[type=date] {
  margin: 0;
}.paste-table__cell-boolean-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}.paste-table__cell-error {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--error-bg);
  color: var(--light);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  z-index: 10;
  width: 100%;
  max-width: 250px;
  word-wrap: break-word;
  /* For top row: position below the cell */
  /* For other rows: position above the cell */
}[aria-rowindex="2"] .paste-table__cell-error, [aria-rowindex="3"] .paste-table__cell-error {
  top: calc(100% + 4px);
}[aria-rowindex="2"] .paste-table__cell-error::before, [aria-rowindex="3"] .paste-table__cell-error::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10px;
  border: 6px solid transparent;
  border-bottom-color: var(--error-bg);
}[aria-rowindex]:not([aria-rowindex="2"]):not([aria-rowindex="3"]) .paste-table__cell-error {
  bottom: calc(100% + 4px);
}[aria-rowindex]:not([aria-rowindex="2"]):not([aria-rowindex="3"]) .paste-table__cell-error::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border: 6px solid transparent;
  border-top-color: var(--error-bg);
}.paste-table__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: var(--light);
}.paste-table__hints {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}.paste-table__hint {
  color: var(--dark);
  margin: 0;
  font-size: 0.875rem;
}.paste-table__hint--validation {
  color: var(--theme);
  font-style: italic;
}.paste-table__actions {
  display: flex;
  gap: 0.5rem;
}.paste-table__action-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}.paste-table__action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}.paste-table__action-button--primary {
  background-color: var(--brand);
  color: var(--light);
}.paste-table__action-button--primary:hover:not(:disabled) {
  background-color: var(--theme);
}.paste-table__action-button--secondary {
  background-color: var(--accent);
  color: var(--dark);
}.paste-table__action-button--secondary:hover:not(:disabled) {
  background-color: var(--theme);
  color: var(--light);
}.paste-table__cell-container--dirty {
  background-color: rgba(255, 193, 7, 0.1);
}.paste-table__cell-container--dirty input,
.paste-table__cell-container--dirty select {
  background-color: rgba(255, 193, 7, 0.15);
}.paste-table__cell-container--error {
  background-color: rgba(255, 0, 0, 0.25);
}.paste-table__cell-container--error input,
.paste-table__cell-container--error select {
  background-color: rgba(255, 0, 0, 0.3);
}.paste-table__loading {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary, #666);
  font-style: italic;
}
}@layer legacy {.vocabTagEditor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}.vocabTagEditor__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: flex-start;
}.vocabTagEditor__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: var(--light);
  border: 2px solid var(--brand);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}.vocabTagEditor__tag:hover {
  background-color: var(--brand);
  color: var(--light);
}.vocabTagEditor__remove {
  background: none;
  border: none;
  color: var(--dark);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 2px;
}.vocabTagEditor__remove:hover {
  font-weight: bold;
  color: var(--brand);
}
}@layer legacy {/* ------------------- Example Manager Nav ------------------- */.exampleManagerNav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}.exampleManagerNav .exampleManagerNavOption {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid var(--dark);
  color: var(--dark);
  background-color: var(--light);
}.exampleManagerNav .exampleManagerNavOption:not(.disabled):hover {
  background-color: var(--accent);
}.exampleManagerNav .exampleManagerNavOption.isActive {
  background-color: var(--brand);
  color: var(--light);
}.exampleManagerNav .exampleManagerNavOption.isActive:hover {
  background-color: var(--brand);
}.exampleManagerNav .exampleManagerNavOption.disabled {
  background-color: var(--dark);
  color: var(--light);
  cursor: not-allowed;
}
}@layer legacy {.searchInterfaceFilterPanel {
  width: 100%;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: start;
}.searchInterfaceFilterPanel .textInput {
  max-width: 500px;
}.vocabularyCompleteFilterWrapper {
  max-width: 700px;
}.searchByQuizFilterWrapper,
.searchByTextFilterWrapper,
.searchByRecentlyEditedFilterWrapper,
.searchByIdsFilterWrapper,
.searchByMaxFrequencyFilterWrapper {
  max-width: 700px;
}
}@layer legacy {.maxFrequencyCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 2px;
  padding: 4px;
  font-size: 16px;
  background-color: var(--light);
  color: var(--dark);
}.maxFrequencyCell span:last-child {
  margin-top: 4px;
  font-weight: 600;
}
}@layer legacy {.notValidSearchError {
  color: var(--error-text);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}.searchButton {
  margin: 1rem auto;
  display: block;
  font-size: 1.2rem;
}.selectAllButton,
.clearSelectionButton {
  margin-left: 30px;
  display: block;
}.selectAllButton {
  background-color: darkgreen;
}.clearSelectionButton {
  background-color: darkred;
}
}