/* =============================================================================
 * learning-supports.css — fully namespaced, accessible learning support styles
 * ========================================================================== */

:root {
  --ewl-color-primary: #1e293b;
  --ewl-color-accent: #2563eb;
  --ewl-color-accent-hover: #1d4ed8;
  --ewl-color-bg-glass: rgba(255, 255, 255, 0.85);
  --ewl-color-border: rgba(30, 41, 59, 0.15);
  --ewl-color-text: #0f172a;
  --ewl-color-text-muted: #475569;
  --ewl-color-white: #ffffff;
  --ewl-color-focus: #3b82f6;
  /* The supports chrome genuinely floats over the lesson — a fixed rail, a
     dialog, a panel — so it keeps elevation rather than a hairline. It is
     softened from a 30px/15% double shadow because everything it now floats
     ABOVE is flat: at the old weight the dock read as a different application
     sitting on top of the page rather than part of it. */
  --ewl-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.16);
}

/* Base Namespaced Reset & Typography */
[data-ewl-supports-root] {
  font-family:
    "Atkinson Hyperlegible",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ewl-color-text);
  box-sizing: border-box;
}

[data-ewl-supports-root] *,
[data-ewl-supports-root] *::before,
[data-ewl-supports-root] *::after {
  box-sizing: inherit;
}

/* Accessibility: Strong Focus Rings */
[data-ewl-supports-root] *:focus-visible {
  outline: 3px solid var(--ewl-color-focus) !important;
  outline-offset: 2px !important;
}

/* 1. Prepare Supports Button (Teacher Control) — docked as a vertical tab on the
   right edge of the lesson, vertically centered, so it reads as a persistent
   side control (mirrors the hub's "Prepare Learning Supports") instead of a
   bottom-corner FAB. The middle-right edge is clear of the bottom docks
   (student tools dock + Save/Resume launcher live along the bottom). */
.ewl-supports-teacher-btn-container {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9999;
}

.ewl-supports-btn-teacher {
  writing-mode: vertical-rl;
  min-height: 44px;
  min-width: 44px;
  padding: 16px 10px;
  background: var(--ewl-color-primary);
  color: var(--ewl-color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  /* Rounded on the left only — the right side is flush against the viewport. */
  border-radius: 14px 0 0 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--ewl-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.2s,
    background-color 0.2s;
}

.ewl-supports-btn-teacher:hover {
  background-color: #334155;
  /* Nudge out from the edge on hover instead of up. */
  transform: translateX(-3px);
}

.ewl-supports-btn-teacher:active {
  transform: translateX(0);
}

/* 2. Accessible Configuration Dialog */
.ewl-supports-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  background: var(--ewl-color-white);
  border: 1px solid var(--ewl-color-border);
  border-radius: 20px;
  box-shadow: var(--ewl-shadow);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s;
}

.ewl-supports-dialog.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ewl-supports-dialog[hidden] {
  display: none !important;
}

.ewl-supports-dialog-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--ewl-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.ewl-supports-dialog-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ewl-color-primary);
}

.ewl-supports-dialog-close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ewl-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.ewl-supports-dialog-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ewl-supports-dialog-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ewl-supports-dialog-intro {
  margin: 0;
  font-size: 14px;
  color: var(--ewl-color-text-muted);
  line-height: 1.6;
}

/* Checkbox Row styled with 44px target standard */
.ewl-supports-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ewl-supports-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 12px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  min-height: 56px;
}

.ewl-supports-checkbox-row:hover {
  background-color: #f8fafc;
  border-color: var(--ewl-color-focus);
}

.ewl-supports-checkbox {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.ewl-supports-checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex-grow: 1;
}

.ewl-supports-profile-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ewl-color-text);
}

.ewl-supports-profile-desc {
  font-size: 12.5px;
  color: var(--ewl-color-text-muted);
  line-height: 1.4;
}

/* Actions Panel */
.ewl-supports-dialog-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.ewl-supports-btn-action {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.1s;
  border: none;
}

.ewl-supports-btn-action:active {
  transform: scale(0.98);
}

.ewl-supports-btn-copy {
  background: var(--ewl-color-accent);
  color: var(--ewl-color-white);
}

.ewl-supports-btn-copy:hover {
  background-color: var(--ewl-color-accent-hover);
}

.ewl-supports-btn-reset {
  background: #f1f5f9;
  color: var(--ewl-color-text);
  border: 1px solid var(--ewl-color-border);
}

.ewl-supports-btn-reset:hover {
  background-color: #e2e8f0;
}

/* 3. Student "My Tools" Dock — a right-edge VERTICAL rail (never a bottom bar).
   Each student only ever sees the tools assigned to them (see learning-supports.js
   applyAssignedItems). Anchored mid-right so it clears the Save/Resume launcher
   (#nsr-root, bottom-right) and the mode-toggle pill (bottom-left). */
.ewl-supports-tools-dock {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9998;
  display: flex;
  justify-content: flex-end;
  /* The wrapper must not eat clicks aimed at the lesson behind it; only the
     rail itself is interactive. */
  pointer-events: none;
  max-height: 86vh;
}

.ewl-supports-tools-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Near-solid backing + height clamp (2026-07-14 audit): the glass panel let
     lesson text bleed through, and a 15-tool rail could outgrow the viewport
     and reach the bottom-right launcher stack. */
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--ewl-color-border);
  border-right: none;
  padding: 10px 8px;
  border-radius: 16px 0 0 16px;
  box-shadow: var(--ewl-shadow);
  backdrop-filter: blur(12px);
  max-height: min(64vh, calc(100vh - 280px));
  overflow-y: auto;
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  /* Only the rail is clickable (wrapper is pointer-events:none). */
  pointer-events: auto;
  max-height: 86vh;
}

/* Collapse (hide) button — a circle riding just right of the tools pill.
   44px, not 36px: this and the reopen pill are the two controls a student uses
   to get the dock out of the way and bring it back, and they were the only
   controls in the whole supports layer under the 44px floor the rest of it
   holds to. The circle is the TARGET, not just the paint — a pseudo-element
   patch would leave the two of them overlapping, since they sit 8px apart. */
.ewl-supports-dock-collapse {
  pointer-events: auto;
  align-self: center;
  margin-left: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ewl-color-border);
  background: var(--ewl-color-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ewl-color-text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ewl-shadow);
}
.ewl-supports-dock-collapse:hover {
  background: var(--ewl-color-border);
}

/* Reopen pill — shown only when the dock is collapsed. */
.ewl-supports-dock-reopen {
  pointer-events: auto;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid var(--ewl-color-border);
  background: var(--ewl-color-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ewl-color-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--ewl-shadow);
}

.ewl-supports-tools-dock.is-collapsed .ewl-supports-tools-inner,
.ewl-supports-tools-dock.is-collapsed .ewl-supports-dock-collapse {
  display: none;
}
.ewl-supports-tools-dock.is-collapsed .ewl-supports-dock-reopen {
  display: inline-flex;
}

.ewl-supports-tool-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: var(--ewl-color-text);
  font-weight: 700;
  font-size: 14px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.ewl-supports-tool-btn:hover {
  background-color: rgba(30, 41, 59, 0.08);
}

.ewl-supports-tool-btn.is-active,
.ewl-supports-tool-btn[aria-pressed="true"] {
  background-color: var(--ewl-color-primary);
  color: var(--ewl-color-white);
}

/* Collapsible tool groups — the rail opens as a short list of category
   headers; tapping one reveals its tools (accordion, one open at a time). */
.ewl-supports-group {
  display: flex;
  flex-direction: column;
}
.ewl-supports-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--ewl-color-text);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.ewl-supports-group-head:hover {
  background-color: rgba(30, 41, 59, 0.08);
}
.ewl-supports-group-caret {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.2s;
}
.ewl-supports-group-head[aria-expanded="true"] {
  background-color: rgba(30, 41, 59, 0.06);
}
.ewl-supports-group-head[aria-expanded="true"] .ewl-supports-group-caret {
  transform: rotate(180deg);
}
.ewl-supports-group-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 6px 8px;
}
.ewl-supports-group-body[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ewl-supports-group-head,
  .ewl-supports-group-caret {
    transition: none;
  }
}

/* "Quick setups" — one-tap accessibility presets at the top of the rail. */
.ewl-supports-quick-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ewl-color-border);
}
.ewl-supports-quick-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ewl-color-text);
  opacity: 0.75;
  padding: 2px 6px;
  white-space: nowrap;
}
.ewl-supports-quick-chip {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1px dashed var(--ewl-color-border);
  color: var(--ewl-color-text);
  font-weight: 700;
  font-size: 13px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.ewl-supports-quick-chip:hover {
  background-color: rgba(30, 41, 59, 0.08);
}
.ewl-supports-quick-chip.is-active,
.ewl-supports-quick-chip[aria-pressed="true"] {
  background-color: var(--ewl-color-primary);
  border-color: var(--ewl-color-primary);
  border-style: solid;
  color: var(--ewl-color-white);
}

/* 4. Slide-out Content Panel */
.ewl-supports-content-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--ewl-color-white);
  border-left: 1px solid var(--ewl-color-border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ewl-supports-content-panel.is-visible {
  transform: translateX(0);
}

.ewl-supports-content-panel[hidden] {
  display: none !important;
}

.ewl-supports-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ewl-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.ewl-supports-panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ewl-color-primary);
}

.ewl-supports-panel-close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--ewl-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.ewl-supports-panel-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ewl-supports-panel-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

/* Panel content styles */
.ewl-supports-panel-body p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ewl-color-text-muted);
}

.ewl-supports-vocab-list dt {
  font-weight: 800;
  font-size: 16px;
  color: var(--ewl-color-primary);
  margin-top: 14px;
}

.ewl-supports-vocab-list dd {
  margin: 4px 0 12px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ewl-color-text-muted);
}

.ewl-supports-vocab-visual {
  background: #f8fafc;
  border: 1px solid var(--ewl-color-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 13.5px;
  margin-bottom: 18px;
  color: var(--ewl-color-text);
  font-weight: 500;
}

.ewl-supports-example-text {
  font-family: inherit;
  white-space: pre-wrap;
  background: #f8fafc;
  border: 1px solid var(--ewl-color-border);
  border-radius: 12px;
  padding: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ewl-color-text);
  margin: 0;
}

.ewl-supports-link-model {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--ewl-color-accent);
  color: var(--ewl-color-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  margin-top: 12px;
  transition: background-color 0.2s;
}

.ewl-supports-link-model:hover {
  background-color: var(--ewl-color-accent-hover);
}

.ewl-supports-panel-body h4 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ewl-color-text-muted);
  margin: 20px 0 10px;
  border-bottom: 1px solid var(--ewl-color-border);
  padding-bottom: 4px;
}

.ewl-supports-panel-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.ewl-supports-panel-body li {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--ewl-color-text);
}

.ewl-supports-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ewl-supports-word-chip {
  background: #e2e8f0;
  color: var(--ewl-color-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
}

/* 5. Reversible Focus Mode overlay styles */
body.ewl-supports-focus-active #app {
  filter: grayscale(40%) opacity(30%);
  transition: filter 0.3s;
}

body.ewl-supports-focus-active #app input,
body.ewl-supports-focus-active #app button,
body.ewl-supports-focus-active #app textarea,
body.ewl-supports-focus-active #app [role="button"] {
  filter: none !important;
  opacity: 1 !important;
}

body.ewl-supports-focus-active [data-ewl-supports-root] {
  z-index: 100000;
}

/* 6. prefers-reduced-motion media query */
@media (prefers-reduced-motion: reduce) {
  .ewl-supports-dialog,
  .ewl-supports-content-panel,
  .ewl-supports-btn-teacher,
  body.ewl-supports-focus-active #app {
    transition: none !important;
    transform: none !important;
  }
  .ewl-supports-dialog {
    transform: translate(-50%, -50%) !important;
  }
}

/* 7. Forced Colors Mode (High Contrast Accessibility) */
@media (forced-colors: active) {
  [data-ewl-supports-root] button,
  [data-ewl-supports-root] a {
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  .ewl-supports-word-chip {
    border: 1px solid ButtonText !important;
  }
}

/* Reading Ruler (Executive Function / ADHD tracking support) */
.ewl-supports-ruler {
  position: fixed;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(253, 224, 71, 0.18);
  border-top: 2px dashed #ca8a04;
  border-bottom: 2px dashed #ca8a04;
  pointer-events: none;
  z-index: 9997;
  transform: translateY(-50%);
  display: none;
  transition: opacity 0.15s;
}

.ewl-supports-ruler.is-active {
  display: block;
}

/* Confidence Check-in Widget */
.ewl-supports-checkin-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--ewl-color-border);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}

.ewl-supports-checkin-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ewl-color-primary);
  margin: 0;
  text-align: center;
}

.ewl-supports-checkin-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ewl-supports-checkin-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--ewl-color-border);
  background: var(--ewl-color-white);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition:
    transform 0.2s,
    background-color 0.2s,
    border-color 0.2s;
  color: var(--ewl-color-text);
  text-align: left;
}

.ewl-supports-checkin-btn:hover {
  background-color: #f1f5f9;
  transform: translateY(-2px);
  border-color: var(--ewl-color-focus);
}

.ewl-supports-checkin-btn.is-selected {
  background-color: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

.ewl-supports-checkin-btn span.emoji {
  font-size: 24px;
  flex-shrink: 0;
}

.ewl-supports-checkin-feedback {
  font-size: 13.5px;
  line-height: 1.5;
  color: #0369a1;
  background-color: #e0f2fe;
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 500;
}

/* Modular Audio Pronunciation Buttons */
.ewl-supports-vocab-speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ewl-color-border);
  background: var(--ewl-color-white);
  cursor: pointer;
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
  transition:
    background-color 0.2s,
    transform 0.1s;
}

.ewl-supports-vocab-speak-btn:hover {
  background-color: #f1f5f9;
  transform: scale(1.05);
}

.ewl-supports-vocab-speak-btn:active {
  transform: scale(0.95);
}

/* Student Local Notepad */
.ewl-supports-notepad-textarea {
  width: 100%;
  height: 250px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ewl-color-text);
  background: #fff;
  resize: vertical;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ewl-supports-notepad-textarea:focus {
  outline: 3px solid var(--ewl-color-focus) !important;
  outline-offset: 0 !important;
}

.ewl-supports-notepad-hint {
  font-size: 12.5px;
  color: var(--ewl-color-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Dyslexia / Comfort Typography Active Styles */
body.ewl-supports-comfort-active,
body.ewl-supports-comfort-active [data-ewl-supports-root] {
  letter-spacing: 0.1em !important;
  word-spacing: 0.14em !important;
  line-height: 1.8 !important;
}

/* 8. Print Suppression stylesheet */
@media print {
  body:not(.ewl-supports-print-enabled) [data-ewl-supports-root],
  .ewl-supports-tools-dock,
  .ewl-supports-dock-reopen,
  .ewl-supports-dialog,
  .ewl-supports-overlay {
    display: none !important;
  }
}

/* Responsive Mobile reflow & 320px support */
@media (max-width: 480px) {
  .ewl-supports-dialog {
    width: 95%;
    max-height: 90vh;
  }
  .ewl-supports-dialog-body {
    padding: 16px;
  }
  .ewl-supports-content-panel {
    max-width: 100%;
  }
  .ewl-supports-tools-dock {
    /* Phones: a bottom sheet, not a mid-screen float (2026-07-14 audit — the
       centered translucent rail overlapped the whole page). Sits above the
       Save/Resume pill and next-phase button; scrolls internally. */
    top: auto;
    bottom: 124px;
    left: 12px;
    right: 12px;
    transform: none;
  }
  .ewl-supports-tools-inner {
    justify-content: flex-start;
    padding: 6px;
    border-right: 1px solid var(--ewl-color-border);
    border-radius: 16px;
    max-height: 46vh;
  }
}

@media (max-width: 320px) {
  .ewl-supports-btn-teacher {
    font-size: 13px;
    padding: 8px 12px;
  }
  .ewl-supports-tool-btn {
    padding: 0 8px;
    font-size: 12px;
  }
}

/* 9. Screen-reader-only live region (announcements) */
.ewl-supports-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 10. Modal backdrop behind the teacher configuration dialog */
.ewl-supports-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 10000; /* below dialog (10001), above dock/teacher button */
  opacity: 0;
  transition: opacity 0.2s;
}

.ewl-supports-backdrop.is-visible {
  opacity: 1;
}

.ewl-supports-backdrop[hidden] {
  display: none !important;
}

/* 11. Text-size accommodation — reversible zoom of the lesson content root.
 * Overlays live outside #app so they are unaffected. Removing the class
 * restores the lesson's native sizing. */
body.ewl-supports-text-lg #app {
  zoom: 1.12;
}

body.ewl-supports-text-xl #app {
  zoom: 1.25;
}

/* 12. Teacher quick-setup preset chips */
.ewl-supports-presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ewl-supports-presets-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ewl-color-text-muted);
}

.ewl-supports-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ewl-supports-preset-chip {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 99px;
  background: #f8fafc;
  color: var(--ewl-color-primary);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.1s;
}

.ewl-supports-preset-chip:hover {
  background: #eef2ff;
  border-color: var(--ewl-color-accent);
}

.ewl-supports-preset-chip:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .ewl-supports-backdrop,
  .ewl-supports-preset-chip {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .ewl-supports-backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* 13. Print with Supports — clean authored reference sheet */
.ewl-supports-btn-print {
  width: 100%;
  background: var(--ewl-color-teal, #0f766e);
  color: var(--ewl-color-white);
}

.ewl-supports-btn-print:hover {
  background: #0d5c56;
}

.ewl-supports-print-sheet {
  display: none;
}

@media print {
  /* When printing with supports, show ONLY the authored reference sheet. */
  body.ewl-supports-printing > *:not([data-ewl-supports-print-sheet]) {
    display: none !important;
  }

  body.ewl-supports-printing .ewl-supports-print-sheet {
    display: block !important;
    position: static;
    color: #000;
    background: #fff;
    font-family: Georgia, "Times New Roman", serif;
    padding: 0;
    margin: 0;
  }

  .ewl-supports-print-sheet h1 {
    font-size: 20pt;
    margin: 0 0 8pt;
  }

  .ewl-supports-print-sheet h2 {
    font-size: 13pt;
    margin: 14pt 0 4pt;
    padding-bottom: 2pt;
    border-bottom: 1px solid #000;
  }

  .ewl-supports-print-sheet dt {
    font-weight: bold;
    margin-top: 6pt;
  }

  .ewl-supports-print-sheet dd {
    margin: 0 0 4pt 0;
  }

  .ewl-supports-print-sheet pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 11pt;
    margin: 0;
  }

  .ewl-supports-print-sheet ul {
    margin: 0;
    padding-left: 18pt;
  }

  .ewl-supports-print-sheet li {
    margin-bottom: 4pt;
  }

  .ewl-supports-print-sheet p {
    font-size: 11pt;
  }
}

/* 14. Comprehensive accommodation toolkit ================================== */

/* Color tint overlay (visual-stress comfort) */
.ewl-supports-tint {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  display: none;
  mix-blend-mode: multiply;
}

/* High-contrast mode on the lesson content root */
body.ewl-supports-contrast-active #app {
  filter: contrast(1.35) saturate(1.1);
}

/* Shared small "chip" button used by several tools */
.ewl-supports-chip-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--ewl-color-primary);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.ewl-supports-chip-btn:hover {
  background: #e2e8f0;
  border-color: var(--ewl-color-accent);
}

.ewl-supports-chip-btn.is-active {
  background: var(--ewl-color-primary);
  color: var(--ewl-color-white);
  border-color: var(--ewl-color-primary);
}

/* Horizontal scroll container for wide reference tables */
.ewl-supports-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 16px;
}

/* Multiplication chart */
.ewl-supports-mult-table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}

.ewl-supports-mult-table th,
.ewl-supports-mult-table td {
  border: 1px solid var(--ewl-color-border);
  padding: 6px 8px;
  text-align: center;
  min-width: 34px;
}

.ewl-supports-mult-table th {
  background: #eef2ff;
  color: var(--ewl-color-primary);
  font-weight: 800;
}

.ewl-supports-mult-corner {
  background: var(--ewl-color-primary) !important;
  color: #fff !important;
}

/* Number line */
.ewl-supports-numberline {
  border: 1px solid var(--ewl-color-border);
  border-radius: 12px;
  padding: 16px 8px 8px;
  background: #f8fafc;
}

.ewl-supports-numberline-inner {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  border-top: 3px solid var(--ewl-color-primary);
}

.ewl-supports-nl-tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}

.ewl-supports-nl-mark {
  width: 2px;
  height: 12px;
  background: var(--ewl-color-primary);
}

.ewl-supports-nl-num {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ewl-color-text);
}

.ewl-supports-nl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* Place-value chart */
.ewl-supports-pv-table {
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 100%;
}

.ewl-supports-pv-table th,
.ewl-supports-pv-table td {
  border: 1px solid var(--ewl-color-border);
  padding: 8px 10px;
  text-align: center;
  min-width: 64px;
  height: 40px;
}

.ewl-supports-pv-table th {
  background: #eef2ff;
  color: var(--ewl-color-primary);
  font-weight: 800;
}

.ewl-supports-pv-dot {
  min-width: 20px !important;
  background: var(--ewl-color-primary) !important;
  color: #fff !important;
  font-weight: 800;
}

/* Calculator */
.ewl-supports-calc {
  max-width: 280px;
}

.ewl-supports-calc-display {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}

.ewl-supports-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ewl-supports-calc-key {
  min-height: 48px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ewl-color-text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ewl-supports-calc-key:hover {
  background: #f1f5f9;
}

.ewl-supports-calc-op {
  background: #eef2ff;
  color: var(--ewl-color-accent);
}

.ewl-supports-calc-clear {
  background: #fef2f2;
  color: #b91c1c;
}

/* Checklist */
.ewl-supports-checklist-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ewl-supports-checklist-input {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  font-size: 15px;
}

.ewl-supports-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ewl-supports-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ewl-color-border);
}

.ewl-supports-checklist-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ewl-supports-checklist-item label {
  flex: 1;
  font-size: 15px;
  cursor: pointer;
}

.ewl-supports-checklist-item label.is-done {
  text-decoration: line-through;
  color: var(--ewl-color-text-muted);
}

.ewl-supports-checklist-del {
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: transparent;
  color: var(--ewl-color-text-muted);
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
}

.ewl-supports-checklist-del:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* Take-a-break breathing */
.ewl-supports-break-circle {
  width: 120px;
  height: 120px;
  margin: 24px auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #bae6fd 0%, #7dd3fc 70%, #38bdf8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #075985;
  font-weight: 700;
  animation: ewl-supports-breathe 8s ease-in-out infinite;
}

.ewl-supports-break-cue {
  font-size: 14px;
}

.ewl-supports-break-timer {
  text-align: center;
  font-weight: 800;
  color: var(--ewl-color-primary);
  font-size: 18px;
}

.ewl-supports-break-done {
  display: block;
  width: 100%;
  margin-top: 12px;
}

@keyframes ewl-supports-breathe {
  0%,
  100% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1);
  }
}

/* Dictation button */
.ewl-supports-dictate-btn {
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ewl-supports-break-circle {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .ewl-supports-tint {
    display: none !important;
  }
}

/* 15. Lesson-specific guidance & personalized SCORM ======================= */

/* Common-mistakes ("Watch Out") list */
.ewl-supports-miscon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ewl-supports-miscon-item {
  border: 1px solid var(--ewl-color-border);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fffbeb;
}

.ewl-supports-miscon-mistake {
  margin: 0 0 6px;
  font-weight: 700;
  color: #92400e;
  font-size: 14.5px;
  line-height: 1.5;
}

.ewl-supports-miscon-tip {
  margin: 0;
  color: #065f46;
  font-size: 14px;
  line-height: 1.5;
}

/* Download-SCORM teacher action */
.ewl-supports-btn-scorm {
  width: 100%;
  background: #7c3aed;
  color: var(--ewl-color-white);
}

.ewl-supports-btn-scorm:hover {
  background: #6d28d9;
}

.ewl-supports-scorm-note {
  margin: -8px 0 0;
  font-size: 12.5px;
  color: var(--ewl-color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   v2 — per-student assignment surface (teacher dialog) + self-pick modal.
   ============================================================ */
.ewl-supports-assign-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 16px;
}
.ewl-supports-assign-keyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
}
.ewl-supports-assign-key {
  padding: 6px 10px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 8px;
  font-size: 14px;
  margin-left: 6px;
}
.ewl-supports-assign-consolelink {
  color: var(--ewl-color-primary);
  font-weight: 700;
  text-decoration: none;
}
.ewl-supports-assign-consolelink:hover {
  text-decoration: underline;
}
.ewl-supports-assign-secrow,
.ewl-supports-assign-sturow,
.ewl-supports-assign-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ewl-supports-assign-sec {
  min-height: 40px;
  min-width: 64px;
  padding: 0 16px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  background: #f1f5f9;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.ewl-supports-assign-sec.is-active {
  background: var(--ewl-color-primary);
  color: var(--ewl-color-white);
  border-color: var(--ewl-color-primary);
}
.ewl-supports-assign-student,
.ewl-supports-assign-add,
.ewl-supports-assign-wida select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 8px;
  font-size: 15px;
}
.ewl-supports-assign-wida {
  font-weight: 700;
  font-size: 14px;
}
.ewl-supports-assign-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ewl-supports-assign-group {
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0;
}
.ewl-supports-assign-group legend {
  font-weight: 800;
  font-size: 13px;
  padding: 0 6px;
}
.ewl-supports-assign-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  font-size: 14px;
  cursor: pointer;
}
.ewl-supports-assign-item input {
  width: 18px;
  height: 18px;
}
.ewl-supports-assign-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--ewl-color-primary);
}

/* Student self-pick modal */
.ewl-supports-selfpick-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ewl-supports-selfpick-card {
  background: var(--ewl-color-white);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--ewl-shadow);
  /* Large classes on short (landscape Chromebook) screens: scroll inside the
     card so the initials grid and the skip button always stay reachable. */
  max-height: 85vh;
  overflow-y: auto;
}
.ewl-supports-selfpick-card h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.ewl-supports-selfpick-card p {
  margin: 0 0 14px;
  font-size: 15px;
  color: #475569;
}
.ewl-supports-selfpick-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.ewl-supports-selfpick-sec {
  flex: 1;
  min-height: 52px;
  border: 2px solid var(--ewl-color-border);
  border-radius: 12px;
  background: #f1f5f9;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
}
.ewl-supports-selfpick-sec.is-active {
  border-color: var(--ewl-color-primary);
  background: var(--ewl-color-primary);
  color: var(--ewl-color-white);
}
.ewl-supports-selfpick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ewl-supports-selfpick-ini {
  min-height: 48px;
  border: 1px solid var(--ewl-color-border);
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.ewl-supports-selfpick-ini:hover {
  background: #eef2ff;
}
.ewl-supports-selfpick-skip {
  background: none;
  border: none;
  color: #64748b;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* v2.1 — identity chip (shared-device switcher) + teacher-dialog notices */
.ewl-supports-me-chip {
  min-height: 34px;
  padding: 4px 10px;
  margin-bottom: 4px;
  border: 1px dashed var(--ewl-color-border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ewl-color-text-muted);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ewl-supports-me-chip:hover {
  background: #eef2ff;
  color: var(--ewl-color-text);
}
.ewl-supports-assign-warn {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
}
.ewl-supports-assign-device {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ewl-color-text-muted);
}
.ewl-supports-assign-device .ewl-supports-btn-action {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* =============================================================================
 * v2.3 — auto-adaptations + assigned lessons (supports-adaptations.js)
 * Generic UDL vocabulary only; nothing below names IEP/ESOL on a student screen.
 * ========================================================================== */

/* Gentle toast notifications (praise, nudges, tool hints) */
.ewl-adapt-toast-region {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10040;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.ewl-adapt-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  animation: ewl-adapt-toast-in 0.25s ease-out;
}
@keyframes ewl-adapt-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ewl-adapt-toast-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: #34d399;
  color: #064e3b;
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
}
.ewl-adapt-toast-btn:hover {
  background: #6ee7b7;
}
.ewl-adapt-toast-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 14px;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  border-radius: 8px;
}
.ewl-adapt-toast-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Extended time / adjusted workload pills — calm, bottom-left, stackable */
.ewl-adapt-time-pill,
.ewl-adapt-workload-pill {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9995;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  pointer-events: none;
}
.ewl-adapt-workload-pill {
  bottom: 54px;
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

/* Chunking: soften everything except the card being worked on. Hover/focus
 * restores instantly; keyboard users get the same via :focus-within. */
body.ewl-adapt-chunk main .card:not(:hover):not(:focus-within) {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
body.ewl-adapt-chunk main .card:hover,
body.ewl-adapt-chunk main .card:focus-within {
  opacity: 1;
}

/* Highlighter */
body.ewl-adapt-highlighting main {
  cursor: text;
}
mark.ewl-adapt-mark {
  background: #fde68a;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}

/* Shared slide-in panel (directions / organizer) */
.ewl-adapt-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10035;
  width: min(400px, calc(100vw - 28px));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
}
.ewl-adapt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
}
.ewl-adapt-panel-head h3 {
  margin: 0;
  font-size: 16px;
}
.ewl-adapt-panel-close {
  border: 0;
  background: #f1f5f9;
  border-radius: 8px;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
  font-size: 14px;
}
.ewl-adapt-panel-body {
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
}
.ewl-adapt-dir-heading {
  font-weight: 700;
  margin: 0 0 8px;
}
.ewl-adapt-dir-steps {
  margin: 0 0 10px;
  padding-left: 22px;
}
.ewl-adapt-dir-steps li {
  margin: 6px 0;
}
.ewl-adapt-dir-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ewl-adapt-dir-row .ewl-adapt-toast-btn {
  background: #2563eb;
  color: #fff;
}
.ewl-adapt-dir-row .ewl-adapt-toast-btn:hover {
  background: #3b82f6;
}

/* Graphic organizer four-square */
.ewl-adapt-organizer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .ewl-adapt-organizer {
    grid-template-columns: 1fr;
  }
}
.ewl-adapt-organizer-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.ewl-adapt-organizer-cell textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px;
  font: inherit;
  font-weight: 400;
  resize: vertical;
  min-height: 64px;
}
.ewl-adapt-organizer-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #64748b;
}

/* "My Lessons" chip + popover (assigned-lesson list follows the student) */
.ewl-supports-mylessons-chip {
  border: 0;
  border-radius: 10px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1.2;
}
.ewl-supports-mylessons-chip:hover {
  background: #e0e7ff;
}
.ewl-supports-mylessons-chip.is-here {
  background: #ecfdf5;
  color: #065f46;
}
.ewl-supports-mylessons-pop {
  position: fixed;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10035;
  width: min(340px, calc(100vw - 90px));
  max-height: 70vh;
  overflow: auto;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  padding: 14px;
}
.ewl-supports-mylessons-pop h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.ewl-supports-mylessons-pop ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.ewl-supports-mylessons-pop li {
  margin: 6px 0;
  font-size: 14.5px;
}
.ewl-supports-mylessons-pop a {
  color: #2563eb;
}
.ewl-supports-mylessons-pop strong {
  color: #065f46;
}
.ewl-supports-mylessons-status {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--ewl-color-text-muted);
  white-space: nowrap;
}
.ewl-supports-mylessons-status.is-done {
  color: #065f46;
  font-weight: 600;
}

/* Frames tab: WIDA-tiered Math Talk Moves */
.ewl-supports-talk-tier {
  margin: 8px 0 12px;
}
.ewl-supports-talk-tier h5 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ewl-color-primary);
}
.ewl-supports-talk-tier ul {
  margin: 0;
  padding-left: 18px;
}
.ewl-supports-talk-tier li {
  margin: 4px 0;
}
.ewl-supports-talk-es {
  display: block;
  font-size: 12.5px;
  color: var(--ewl-color-text-muted);
}

/* Teacher dialog: "assign THIS lesson" row */
.ewl-supports-assign-lessonrow label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* ── "🧮 Math supports" — teacher-gated tool checklist (Teacher Mode only) ────
   Replaces the always-open floating tools box. A vertical side tab (mirrors the
   "Prepare Supports" tab, sitting just below it) opens a slide-out checklist;
   each checkbox drives the matching learning tool. Students never see this. */
.ewl-supports-tools-dock--teacher-hidden {
  display: none !important;
}

.ewl-supports-math-dock {
  position: fixed;
  top: calc(50% + 104px);
  right: 0;
  z-index: 9999;
}

.ewl-supports-math-tab {
  writing-mode: vertical-rl;
  min-height: 44px;
  min-width: 44px;
  padding: 16px 10px;
  background: #0f766e;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 14px 0 0 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--ewl-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.2s,
    background-color 0.2s;
}
.ewl-supports-math-tab:hover {
  background-color: #115e57;
  transform: translateX(-3px);
}

/* Split icon/label so the tabs can collapse to icon-only nubs. In normal state
   they read as full vertical tabs (writing-mode stacks icon above label). */
.ewl-supports-btn-teacher,
.ewl-supports-math-tab {
  flex-direction: column;
  justify-content: center;
}

/* Compact / minimized (teacher taps the minimize toggle on the Teacher Mode
   pill): drop the labels and shrink to a slim icon nub tucked at the right edge,
   so the tabs stop covering slide content during presentation. Panels still open
   on tap, and a hover restores full opacity. */
body.nt-overlays-compact .ewl-supports-tab-label {
  display: none;
}
body.nt-overlays-compact .ewl-supports-btn-teacher,
body.nt-overlays-compact .ewl-supports-math-tab {
  padding: 10px 6px;
  min-height: 0;
  font-size: 18px;
  opacity: 0.68;
}
body.nt-overlays-compact .ewl-supports-btn-teacher:hover,
body.nt-overlays-compact .ewl-supports-math-tab:hover {
  opacity: 1;
}
/* Re-anchor the math tab just below the (now shorter) Prepare Supports nub. */
body.nt-overlays-compact .ewl-supports-math-dock {
  top: calc(50% + 60px);
}

/* Teacher-only minimize toggle. Sits just under the Teacher Mode pill (top-right)
   so it reads as the control that shrinks these overlays. Rendered only in
   Teacher Mode (mounted from learning-supports.js). */
.ewl-supports-min-toggle {
  position: fixed;
  top: 54px;
  right: 12px;
  z-index: 9601;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ewl-color-border, #cbd5e1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ewl-color-primary, #1e293b);
  box-shadow: 0 2px 8px rgba(18, 53, 91, 0.18);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.15s,
    background-color 0.15s;
}
.ewl-supports-min-toggle:hover {
  background: #fff;
  transform: scale(1.06);
}
.ewl-supports-min-toggle[aria-pressed="true"] {
  background: var(--ewl-color-primary, #1e293b);
  color: #fff;
  border-color: transparent;
}
@media print {
  .ewl-supports-min-toggle {
    display: none;
  }
}

/* Compact / minimized: cross-style the engine-owned Teacher Mode pill (rendered
   by engine/core/teacher-mode.js) down to an icon-only capsule. The emoji and
   label share one text node, so blank the text and re-show the emoji via ::after
   rather than reaching into the engine markup. */
body.nt-overlays-compact .mode-toggle-pill.is-teacher {
  opacity: 0.8;
}
body.nt-overlays-compact .mode-toggle-pill.is-teacher:hover {
  opacity: 1;
}
body.nt-overlays-compact .mode-toggle-pill.is-teacher .mode-toggle-action {
  display: none;
}
body.nt-overlays-compact .mode-toggle-pill.is-teacher .mode-toggle-state {
  font-size: 0;
}
body.nt-overlays-compact .mode-toggle-pill.is-teacher .mode-toggle-state::after {
  content: "👩‍🏫";
  font-size: 16px;
}

.ewl-supports-math-panel {
  position: absolute;
  right: 46px;
  top: 0;
  width: 250px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--ewl-color-white);
  border: 1px solid var(--ewl-color-border);
  border-radius: 14px;
  box-shadow: var(--ewl-shadow);
  padding: 14px 16px;
}
.ewl-supports-math-panel[hidden] {
  display: none !important;
}

.ewl-supports-math-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
  color: #0f766e;
}
.ewl-supports-math-sub {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #64748b;
}

.ewl-supports-math-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ewl-supports-math-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ewl-color-primary);
  cursor: pointer;
}
.ewl-supports-math-item:hover {
  background: #f0fdfa;
}
.ewl-supports-math-check {
  width: 18px;
  height: 18px;
  accent-color: #0f766e;
  flex: 0 0 auto;
  cursor: pointer;
}

@media (max-width: 480px) {
  .ewl-supports-math-panel {
    width: min(250px, 80vw);
  }
}

/* The teacher Presenter widget + Present Mode styles now live with the engine
   module that owns them: engine/styles/present-mode.css. The duplicate widget
   that used to be built here was removed so engine/core/present-mode.js is the
   single Presenter implementation on every lesson type. */

/* --- This lesson's supports (teacher dialog, Phase 3) ---------------------
 * A status block, not a second configuration surface. It lives inside the
 * already teacher-gated Prepare Supports dialog, so students never see it. */
.ewl-supports-lesson-profile {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d7e0ee;
  border-radius: 12px;
  background: #f7fafd;
}

.ewl-supports-lesson-profile h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.ewl-supports-lesson-profile-status {
  margin: 0 0 4px;
  font-weight: 600;
}

.ewl-supports-lesson-profile-dedup {
  margin: 0 0 8px;
  color: #55617a;
  font-size: 0.92rem;
}

.ewl-supports-lesson-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  align-items: center;
}

.ewl-supports-lesson-profile-actions a.ewl-supports-preset-chip {
  text-decoration: none;
}

.ewl-supports-lesson-profile-names {
  margin: 0 0 6px;
  color: #55617a;
  font-size: 0.92rem;
}

/* A task modification is never folded into the support count or its colour —
 * it gets its own line, its own border, and its own words. */
.ewl-supports-lesson-profile-mod {
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 2px solid #e0b48a;
  border-radius: 8px;
  background: #fffaf4;
  color: #8a5a22;
  font-size: 0.92rem;
  font-weight: 600;
}

/* ── Narrow screens: the side tabs become nubs ─────────────────────────────
   At 390px the two vertical tabs are 72px wide against a 390px viewport, and
   they sit on top of the lesson — measured covering the lesson title in
   Teacher Mode on a phone. (In Student Mode they do not render at all, which
   is why this only bites a teacher working from a handset.)

   This is the SAME treatment the teacher's minimize toggle already applies via
   body.nt-overlays-compact — labels off, icon only — reached automatically by
   width instead of by tapping. Both panels still open on tap and both keep a
   44px touch target, so nothing becomes unreachable.
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .ewl-supports-tab-label {
    display: none;
  }

  .ewl-supports-btn-teacher,
  .ewl-supports-math-tab {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 6px;
    font-size: 18px;
  }

  /* Re-anchor the math tab under the now-shorter Prepare Supports nub. */
  .ewl-supports-math-dock {
    top: calc(50% + 56px);
  }
}