/**
 * Math Exercise Engine - Default Styles
 *
 * This file is maintained for backward compatibility.
 * All styles have been reorganized into modular CSS files.
 *
 * New structure: src/renderer/styles/
 * - variables.css     - CSS custom properties
 * - layout.css        - Layout & structure
 * - text.css          - Text content & bidi
 * - inputs.css        - Input fields
 * - widgets.css       - Drag options & keypad
 * - buttons.css       - Submit button
 * - responsive.css    - Media queries
 */

/**
 * Math Exercise Engine - Main Stylesheet
 *
 * Modular CSS architecture for maintainability and clarity.
 *
 * Import order matters:
 * 1. Variables (must be first - used by all other modules)
 * 2. Core layout and structure
 * 3. Content styles (text, inputs, widgets)
 * 4. Responsive overrides (must be last to take precedence)
 */

/* CSS Custom Properties - must be imported first */

/**
 * CSS Custom Properties (Variables)
 *
 * All theming variables for the math exercise renderer.
 * These can be overridden by consumers for custom themes.
 */

.math-exercise-renderer {
  /* ========================================
     COLOR VARIABLES
     ======================================== */

  --exercise-bg: white;
  --exercise-text: #333;
  --exercise-text-light: #555;
  --exercise-primary: #007acc;
  --exercise-accent: #705DC0;
  --exercise-highlight: #ffd700;
  --exercise-border: #ddd;
  --exercise-border-focus: var(--exercise-primary);
  --exercise-highlight-color: #aef59d;
  --exercise-correct: #22c55e;
  --exercise-incorrect: #ef4444;

  /* ========================================
     SPACING VARIABLES
     ======================================== */

  /** Main container padding - responsive with clamp() */
  --exercise-padding: clamp(1rem, 3vw, 2rem);

  /** Bottom margin for major sections */
  --exercise-margin-bottom: 1.5rem;

  /** Gap between exercise lines (0.25rem = 4px) */
  --exercise-line-gap: 0.25rem;

  /** Margin between inline elements (0.25rem = 4px) */
  --exercise-element-margin: 0.25rem;

  /* ========================================
     TYPOGRAPHY VARIABLES
     ======================================== */

  /** Base font size - responsive (14px to 20px) */
  --exercise-font-size: clamp(0.875rem, 2vw, 1.1rem);

  /** Larger font size for inputs/buttons (12px to 16px) */
  --exercise-font-size-large: clamp(1rem, 1.5vw, 0.75rem);

  /** Normal font weight */
  --exercise-font-weight: 500;

  /** Bold font weight */
  --exercise-font-weight-bold: 600;

  /* ========================================
     LAYOUT VARIABLES
     ======================================== */

  /** Input field width - responsive (40px to 64px) */
  --exercise-input-width: clamp(2.5rem, 5vw, 4rem);

  /** Input padding (6px 10px) */
  --exercise-input-padding: 0.375rem 0.625rem;

  /** Button width - responsive (48px to 64px) */
  --exercise-button-width: clamp(3rem, 6vw, 4rem);

  /** Border radius for rounded corners */
  --exercise-border-radius: 0.25rem;

  /** Border width for inputs and buttons */
  --exercise-border-width: 2px;

  /* ========================================
     NUMBER LINE — HIGHLIGHT COLORS
     ======================================== */

  --nl-axis-color:       #705DC0;
  --nl-highlight-blue:   #007ACC;
  --nl-highlight-red:    #EF4444;
  --nl-highlight-green:  #22C55E;
  --nl-highlight-orange: #F97316;
  --nl-highlight-purple: #705DC0;
  --nl-highlight-yellow: #FFD700;
}

/* Layout & Structure */

/**
 * Layout & Structure Styles
 *
 * Main container and layout grid styles.
 */

/* ========================================
   MAIN CONTAINER
   ======================================== */

.math-exercise-renderer {
  position: relative;
  background: var(--exercise-bg);
  padding: var(--exercise-padding);
  border-radius: calc(var(--exercise-border-radius) * 2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: system-ui, -apple-system, sans-serif;
}

/* ========================================
   LAYOUT CONTAINER
   ======================================== */

.exercise-layout-container {
  /* Default: regular block layout.
     position:relative makes this the anchor for the absolute tools-overlay. */
  position: relative;
}

.exercise-layout-container.has-keypad {
  /* When keypad is present, use flex layout for side-by-side */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* When inside a keypad layout, the exercise layout must grow to fill
   all available space. Without this, containers whose only content is
   a NUMBER_LINE (all children absolutely-positioned) collapse to 0 width,
   causing the number line to render as a zero-width element. */

.exercise-layout-container.has-keypad .exercise-layout {
  flex: 1;
  min-width: 0;
}

/* ========================================
   EXERCISE LAYOUT
   ======================================== */

.exercise-layout {
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  gap: var(--exercise-line-gap);
  font-size: var(--exercise-font-size);
  margin-bottom: var(--exercise-margin-bottom);
}

/* ========================================
   EXERCISE LINES
   ======================================== */

.exercise-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--exercise-element-margin);
  padding-bottom: calc(var(--exercise-line-gap) * 0.5);
}

/* Content Styles */

/**
 * Text Content Styles
 *
 * Styles for text items, questions, operators, and bidirectional text.
 */

/* ========================================
   QUESTION TEXT
   ======================================== */

.question-text {
  display: block;
  width: 100%;
  font-size: calc(var(--exercise-font-size-large) * 1);
  font-weight: var(--exercise-font-weight-bold);
  margin-bottom: var(--exercise-margin-bottom);
  color: var(--exercise-text);
  line-height: 1.4;
  text-align: center;
}

.question-text-arabic {

}

/* ========================================
   TEXT ITEMS
   ======================================== */

.text-item {
  color: var(--exercise-text);
  /* font-size: medium; */
}

.text-group {
  /**
   * Wrapper for text segments with bidirectional content.
   * unicode-bidi: plaintext lets the browser auto-detect direction
   * based on the first strong directional character.
   */
  display: inline;
  unicode-bidi: plaintext;
}

.text-item-number {
  font-variant-numeric: tabular-nums;
}

.text-item-arabic {
  /* Direction is handled by parent text-group with unicode-bidi: plaintext */
}

.text-item-not-arabic {
  /* Direction is handled by parent text-group with unicode-bidi: plaintext */
}

/* ========================================
   SPACE ELEMENT
   ======================================== */

.space {
  /**
   * Minimal width to create visual spacing between inline elements.
   * 0.5px is intentionally small - actual spacing comes from flex gap.
   * This just ensures the element exists in the layout.
   */
  width: 0.5px;
}

/* ========================================
   HIGHLIGHTED TEXT
   ======================================== */

.highlighted-text {
  /* margin: 0 var(--exercise-element-margin); */
  color: var(--exercise-text);
  /**
   * unicode-bidi: isolate prevents highlighted text from being affected
   * by parent RTL context, keeping numbers in correct order.
   */
  unicode-bidi: isolate;
}

.highlighted-text .highlight {
  /* background-color: var(--exercise-highlight-color); */
}

mark {
  /* Default background color */
  background-color: #aef59d; 
  
  /* Add padding for space around the text within the highlight */
  padding: 0.1em 0.4em; 
  
  /* Apply border-radius for rounded corners */
  border-radius: 0.8em; 
  
  /* Ensures rounded corners are applied to each line when text wraps */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* for older Safari/Chrome */
  
  /* Optional: add a border */
  border: 1px solid #aef59d; 
}

/* ========================================
   COLOR TEXT
   ======================================== */

.color-text {
  color: var(--exercise-text);
  unicode-bidi: isolate;
}

/* ========================================
   BOLD TEXT
   ======================================== */

.bold-text {
  color: var(--exercise-text);
  unicode-bidi: isolate;
}

.bold-text-strong {
  font-weight: bold;
}

/* ========================================
   IMAGE
   ======================================== */

.image-item {
  vertical-align: middle;
  max-width: 100%;
  object-fit: contain;
}

/* ========================================
   OPERATORS & SYMBOLS
   ======================================== */

.operator {
  font-weight: 900;
  color: var(--exercise-accent);
  /** Operator size: 20px - larger than text for visual emphasis */
  font-size: 20px;
}

.group {
  margin: 0 var(--exercise-element-margin);
  color: var(--exercise-text-light);
}

/* ========================================
   VERTICAL OPERATION
   ======================================== */

.vop {
  display: inline-grid;
  grid-template-columns: repeat(var(--vop-cols, 4), minmax(2.2em, auto));
  justify-content: end;
  font-variant-numeric: tabular-nums;
  font-size: 1.5em;
  color: var(--exercise-text);
  padding: 0.25em 0.5em;
  margin: 0.5em 0;
}

.vop-row {
  display: contents;
}

.vop-cell,
.vop-op-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6em;
  padding: 0.1em 0.15em;
}

.vop-cell-digit {
  font-weight: 600;
}

.vop-cell-label {
  font-weight: 600;
  font-style: italic;
}

.vop-cell-color {
  /* color applied inline via style prop */
  font-weight: 600;
}

.vop-cell-bold {
  font-weight: 700;
}

.vop-cell-highlight {
  /* <mark> inside provides the highlight background */
}

.vop-carry-cell-color {
  font-weight: 600;
}

.vop-carry-cell-bold {
  font-weight: 700;
}

.vop-carry-cell-highlight {
  /* <mark> inside provides the highlight background */
}

.vop-carry-row {
  font-size: 0.65em;
  line-height: 1;
  align-items: flex-end;
}

.vop-carry-cell-digit,
.vop-carry-cell-label {
  font-weight: 600;
}

.vop-carry-cell-empty {
  /* blank placeholder in carry row */
}

.vop-carry-cell-input {
  /* WidgetRenderer provides inner input box */
}

.vop-cell-empty {
  /* blank shift placeholder */
}

.vop-cell-input {
  /* WidgetRenderer provides the inner input box */
}

.vop-op {
  /* inherit .operator color/size but align within its cell */
  font-size: 1em;
}

.vop-sep {
  grid-column: 1 / -1;
  height: 0;
  border-top: 2px solid var(--exercise-text, currentColor);
  margin: 0.15em 0;
}

/**
 * Input Styles
 *
 * Styles for interactive input fields.
 */

/* ========================================
   INLINE INPUT
   ======================================== */

.inline-input {
  width: var(--exercise-input-width);
  padding: var(--exercise-input-padding);
  border: var(--exercise-border-width) solid var(--exercise-border);
  border-radius: var(--exercise-border-radius);
  font-size: var(--exercise-font-size-large);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--exercise-bg);
  color: var(--exercise-text);

  /**
   * Always LTR for inputs - even in RTL context, numbers should
   * be entered left-to-right for consistent UX.
   */
  direction: ltr;
}

.inline-input:focus {
  outline: none;
  border-color: var(--exercise-border-focus);
  /** Focus shadow: 3px blur with 10% opacity primary color */
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}

.inline-input:hover {
  border-color: var(--exercise-border-focus);
}

/* ========================================
   VALIDATION STATUS
   ======================================== */

.inline-input.widget--correct {
  border-color: var(--exercise-correct, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.inline-input.widget--incorrect {
  border-color: var(--exercise-incorrect, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.inline-input-chip.widget--correct {
  border-color: var(--exercise-correct, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.inline-input-chip.widget--incorrect {
  border-color: var(--exercise-incorrect, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/**
 * Widget Styles
 *
 * Styles for drag options, numeric keypad, and other interactive widgets.
 */

/* ========================================
   DRAG OPTIONS
   ======================================== */

.drag-options-container {
  /* Container for drag options widget */
}

.pill-bg-path {
  fill: var(--exercise-pill-bg, #FFE7B4);
}

/*
 * Shared base for every widget that sits inline within a text line.
 *
 * unicode-bidi: isolate — shields the widget from the surrounding bidi context
 * so that symbols like > or < are never mirrored when the parent line carries
 * dir="rtl" (RTL Arabic lines with inline widgets).
 *
 * To opt a new inline widget into this protection, simply add the class
 * "inline-widget" to its root element. No other CSS changes needed.
 */

.inline-widget {
  unicode-bidi: isolate;
  display: inline-block;
}

.drag-options {
  display: flex;
  justify-content: center;
  gap: calc(var(--exercise-element-margin) * 2);
  flex-wrap: wrap;
}

.drag-option {
  /** Padding: 10px vertical, 16px horizontal for comfortable touch targets */
  padding: 10px 16px;
  border: var(--exercise-border-width) solid var(--exercise-border);
  border-radius: var(--exercise-border-radius);
  background: var(--exercise-bg);
  color: var(--exercise-text);
  cursor: grab;
  user-select: none;
  font-size: var(--exercise-font-size);
  font-weight: var(--exercise-font-weight);
  transition: all 0.2s ease;
  min-width: var(--exercise-button-width);
  text-align: center;
}

.drag-option:hover {
  border-color: var(--exercise-primary);
}

.drag-option:active {
  cursor: grabbing;
  /** Scale down slightly (98%) when dragging for visual feedback */
  transform: scale(0.98);
}

.drag-option.selected {
  background: var(--exercise-primary);
  color: white;
  border-color: var(--exercise-primary);
  /** Shadow: 2px offset, 4px blur, 20% opacity for depth */
  box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
}

/* Legacy button-style drag options for backward compatibility */

button.drag-option {
  border: none;
  border-radius: var(--exercise-border-radius);
  cursor: pointer;
  font-size: var(--exercise-font-size);
  color: white;
  background: var(--exercise-accent);
  font-weight: var(--exercise-font-weight);
}

/* ========================================
   RADIO OPTIONS
   ======================================== */

.radio-options {
  display: flex;
  justify-content: center;
  gap: calc(var(--exercise-element-margin) * 2);
  flex-wrap: wrap;
}

.radio-option {
  padding: 10px 16px;
  border: var(--exercise-border-width) solid var(--exercise-border);
  border-radius: var(--exercise-border-radius);
  background: var(--exercise-bg);
  color: var(--exercise-text);
  cursor: pointer;
  user-select: none;
  font-size: var(--exercise-font-size);
  font-weight: var(--exercise-font-weight);
  transition: all 0.2s ease;
  min-width: var(--exercise-button-width);
  text-align: center;
}

.radio-option:hover {
  border-color: var(--exercise-primary);
}

.radio-option:active {
  transform: scale(0.98);
}

.radio-option.selected {
  background: var(--exercise-primary);
  color: white;
  border-color: var(--exercise-primary);
  box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
}

/* ========================================
   VALIDATION STATUS
   ======================================== */

.radio-option.widget--correct {
  background: var(--exercise-correct, #22c55e);
  border-color: var(--exercise-correct, #22c55e);
  color: white;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.25);
}

.radio-option.widget--incorrect {
  background: var(--exercise-incorrect, #ef4444);
  border-color: var(--exercise-incorrect, #ef4444);
  color: white;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

/* ========================================
   NUMERIC KEYPAD
   ======================================== */

.numeric-keypad-container {
  /**
   * Keypad container dimensions:
   * - min-width: 150px ensures keypad is always usable
   * - margins: 5px on each side for spacing
   */
  min-width: 150px;
  margin-right: 5px;
  margin-left: 5px;
}

.numeric-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--exercise-element-margin);
}

.numeric-keypad-with-operators {
  grid-template-columns: repeat(4, 1fr);
}

.keypad-btn {
  padding: var(--exercise-input-padding);
  border: var(--exercise-border-width) solid var(--exercise-border);
  border-radius: var(--exercise-border-radius);
  background: var(--exercise-bg);
  color: var(--exercise-text);
  font-size: var(--exercise-font-size-large);
  font-weight: var(--exercise-font-weight);
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keypad-btn:hover {
  border-color: var(--exercise-primary);
  /** Hover background: 5% opacity primary color */
  background: rgba(0, 122, 204, 0.05);
}

.keypad-btn:active {
  /** Scale down to 95% when clicked for tactile feedback */
  transform: scale(0.95);
  background: var(--exercise-primary);
  color: white;
}

/* ========================================
   NUMERIC KEYPAD V2 (diamond / 45-degree style)
   ======================================== */

.diamond-keypad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
}

.diamond-keypad-row {
  display: flex;
  gap: 20px;
}

.diamond-keypad .keypad-btn {
  transform: rotate(45deg);
}

.diamond-keypad .keypad-btn span {
  transform: rotate(-45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

.diamond-keypad .keypad-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.18);
}

.diamond-keypad .keypad-btn:active {
  transform: rotate(45deg) scale(0.92);
}

.diamond-keypad .keypad-btn-backspace {
  border-color: var(--exercise-accent, #705dc0);
  color: var(--exercise-accent, #705dc0);
}

/* ========================================
   TABLE LAYOUT
   ======================================== */

.exercise-table {
  border-spacing: 0;
  border: 2px solid var(--exercise-table-border, #8b7ec8);
  border-radius: 12px;
  overflow: hidden;
  font-size: small;
}

.exercise-table-cell {
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  min-height: 36px;
  color: var(--exercise-text);
}

.exercise-table-container {
  border: 2px solid #7c6cf2;
  border-radius: 8px;
  overflow: hidden;
}

table.exercise-table {
  border-collapse: collapse;
}

td.exercise-table-cell,
th.exercise-table-cell {
  border: 2px solid #7c6cf2;
}

/* ========================================
   FRACTION WIDGET
   ======================================== */

.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: -0.15em;
  margin: 0 0.2em;
  line-height: 1;
}

.fraction-numerator {
  margin-bottom: 3px;
}

.fraction-numerator,
.fraction-denominator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.05em 0.1em;
  line-height: 2.2;
}

.fraction-bar {
  width: 100%;
  min-width: 2em;
  height: 3px;
  background-color: var(--exercise-accent);
  border-radius: 1px;
  margin: 1px 0;
}

.fraction-fixed {
  color: var(--exercise-text);
  min-width: 1ch;
  text-align: center;
}

.fraction-input {
  padding: 0.15em 0.2em;
  font-size: 0.9em;
  text-align: center;
}

.fraction-chip {
  font-size: 0.9em;
  padding: 0.1em 0.3em;
}

.fraction-slot-droppable {
  display: inline-flex;
}

/* ========================================
   VISUAL FRACTION WIDGET
   ======================================== */

.visual-fraction-widget {
  --visual-fraction-size: clamp(7rem, 24vw, 12rem);
  --visual-fraction-part-size: 1.35rem;
  --visual-fraction-line-width: 1px;
  --visual-fraction-svg-line-width: 0.5px;
  --visual-fraction-gap: var(--visual-fraction-line-width);
  --visual-fraction-border-radius: 0;
  --visual-fraction-border-color: #705dc0;
  --visual-fraction-empty-bg: var(--exercise-bg, #fff);
  --visual-fraction-hover-color: #e6e0ff;
  --visual-fraction-part-color: #ae9cff;
  --visual-fraction-part-text-color: #fff;
  --visual-fraction-label-color: var(--exercise-text-light, #555);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  vertical-align: middle;
}

.visual-fraction-widget__parts {
  display: grid;
  gap: var(--visual-fraction-gap);
  border: var(--visual-fraction-line-width) solid var(--visual-fraction-border-color);
  border-radius: var(--visual-fraction-border-radius);
  background: var(--visual-fraction-border-color);
  max-width: 100%;
  overflow: hidden;
}

.visual-fraction-widget__parts--horizontal {
  grid-template-columns: repeat(var(--visual-fraction-divisions, 1), 1fr);
  grid-template-rows: var(--visual-fraction-part-size);
  width: var(--visual-fraction-size);
}

.visual-fraction-widget__parts--vertical {
  grid-template-columns: var(--visual-fraction-part-size);
  grid-template-rows: repeat(var(--visual-fraction-divisions, 1), 1fr);
  height: var(--visual-fraction-size);
}

.visual-fraction-widget__part {
  min-width: 0;
  min-height: 0;
  background: var(--visual-fraction-empty-bg);
  color: var(--exercise-text, #333);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

.visual-fraction-widget__part[role='button'] {
  cursor: pointer;
}

.visual-fraction-widget__part[role='button']:hover {
  background: var(--visual-fraction-hover-color);
}

.visual-fraction-widget__part[role='button']:focus-visible {
  outline: 2px solid var(--exercise-border-focus, var(--exercise-primary, #007acc));
  outline-offset: -2px;
}

.visual-fraction-widget__part--filled,
.visual-fraction-widget__part--answer {
  background: var(--visual-fraction-part-color);
  color: var(--visual-fraction-part-text-color);
}

.visual-fraction-widget__part--filled[role='button']:hover,
.visual-fraction-widget__part--answer[role='button']:hover {
  background: var(--visual-fraction-part-color);
  color: var(--visual-fraction-part-text-color);
}

.visual-fraction-widget__sector {
  fill: var(--visual-fraction-empty-bg);
  stroke: var(--visual-fraction-border-color);
  stroke-width: var(--visual-fraction-svg-line-width);
  stroke-linejoin: round;
  stroke-linecap: round;
  transition:
    fill 0.2s ease,
    filter 0.2s ease;
}

.visual-fraction-widget__sector[role='button'] {
  cursor: pointer;
}

.visual-fraction-widget__sector[role='button']:hover {
  fill: var(--visual-fraction-hover-color);
}

.visual-fraction-widget__sector[role="button"]:focus {
  outline: none;
}

.visual-fraction-widget__sector[role="button"]:focus-visible {
  /* Keyboard-only focus indicator: a drop-shadow that follows the SVG shape
     instead of a rectangle, preserving accessibility without the visual glitch. */
  outline: none;
  filter: drop-shadow(0 0 0.18rem var(--exercise-border-focus, var(--exercise-primary, #007acc)));
}

.visual-fraction-widget__sector.visual-fraction-widget__part--filled,
.visual-fraction-widget__sector.visual-fraction-widget__part--answer,
.visual-fraction-widget__sector.visual-fraction-widget__part--filled[role='button']:hover,
.visual-fraction-widget__sector.visual-fraction-widget__part--answer[role='button']:hover {
  fill: var(--visual-fraction-part-color);
}

.visual-fraction-widget.widget--correct .visual-fraction-widget__parts {
  border-color: var(--exercise-correct, #22c55e);
  background: var(--exercise-correct, #22c55e);
}

.visual-fraction-widget.widget--incorrect .visual-fraction-widget__parts {
  border-color: var(--exercise-incorrect, #ef4444);
  background: var(--exercise-incorrect, #ef4444);
}

.visual-fraction-widget.widget--correct .visual-fraction-widget__sector {
  stroke: var(--exercise-correct, #22c55e);
}

.visual-fraction-widget.widget--incorrect .visual-fraction-widget__sector {
  stroke: var(--exercise-incorrect, #ef4444);
}

.visual-fraction-widget__shape {
  width: var(--visual-fraction-size);
  height: var(--visual-fraction-size);
  overflow: visible;
}

.visual-fraction-widget--grid .visual-fraction-widget__parts {
  grid-template-columns: repeat(var(--visual-fraction-grid-cols, 3), 1fr);
  grid-template-rows: repeat(var(--visual-fraction-grid-rows, 3), 1fr);
  width: var(--visual-fraction-size);
  height: var(--visual-fraction-size);
}

.visual-fraction-widget__label {
  color: var(--visual-fraction-label-color);
  font-size: 0.9em;
  font-weight: var(--exercise-font-weight, 500);
}

/* ========================================
   MATCHER WIDGET
   ======================================== */

.matcher-widget {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.5vw, 16px);
  width: min(100%, 580px);
  margin-inline: auto;
}

.matcher-row {
  display: grid;
  grid-template-columns: repeat(var(--matcher-cols, 3), minmax(0, 1fr));
  gap: clamp(10px, 2.5vw, 16px);
}

.matcher-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(72px, 14vw, 96px);
  padding: clamp(8px, 2vw, 12px);
  border: 2px solid #ffca76;
  border-radius: clamp(12px, 3vw, 17px);
  background: #ffffff;
  color: #333333;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(255, 202, 118, 0.22);
  transition:
    background 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 280ms ease;
}

.matcher-card:active {
  transform: scale(0.95);
}

/* Intentionally dropped — kept for reference if hover feedback is restored.
.matcher-card:hover {
  border-color: var(--exercise-accent, #705dc0);
  box-shadow: 0 4px 10px rgba(112, 93, 192, 0.22);
} */

.matcher-card--selected {
  background: color-mix(in srgb, var(--matcher-card-color) 12%, #ffffff);
  border-color: var(--matcher-card-color);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--matcher-card-color) 30%, transparent);
  transform: scale(1.04);
}

.widget--correct .matcher-card--selected {
  border-color: #43b925;
  background: #f2ffee;
  box-shadow: 0 4px 0 rgba(67, 185, 37, 0.3);
}

.widget--incorrect .matcher-card--selected {
  border-color: #d6234d;
  background: #fff0f7;
  box-shadow: 0 4px 0 rgba(214, 35, 77, 0.25);
}

/* Intentionally dropped — kept for reference if unselected-card validation feedback is restored.
.widget--correct .matcher-card:not(.matcher-card--selected) {
  border-color: var(--exercise-correct, #22c55e);
  opacity: 0.5;
}

.widget--incorrect .matcher-card:not(.matcher-card--selected) {
  border-color: var(--exercise-incorrect, #ef4444);
  opacity: 0.5;
} */

/* ========================================
   PAIR MATCHER WIDGET
   ======================================== */

.pair-matcher-widget {
  --pm-orange: #FFCA76; --pm-purple: #705DC0;
  --pm-selected-bg: #E7E2FF; --pm-selected-border: #AE9CFF;
  --pm-card-width: 163px; --pm-card-height: 82px; --pm-card-radius: 12px; --pm-card-border-width: 1px;
  --pm-dot-size: 17px; --pm-dot-border-width: 2px;
  --pm-line-color: var(--pm-orange); --pm-line-color-correct: #43B925; --pm-line-color-incorrect: #D6234D; --pm-line-width: 4px;
  position: relative; display: flex; flex-direction: column;
  gap: 52px; width: max-content; max-width: 100%; margin-inline: auto; padding: 0;
}

.pair-matcher-row {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: repeat(var(--pm-cols, 3), minmax(0, var(--pm-card-width)));
  justify-content: center; gap: 18px; align-items: stretch; min-width: 0;
}

.pair-matcher-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.pair-matcher-card {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; max-width: 100%; align-self: stretch; flex: 1 1 auto;
  min-height: var(--pm-card-height); height: auto; padding: 6px 8px;
  border: var(--pm-card-border-width) solid var(--pm-orange); border-radius: var(--pm-card-radius);
  background: #fff; color: var(--pm-purple);
  font: 500 1rem / 1.2 var(--exercise-font-family, inherit); letter-spacing: 0;
  text-align: center; word-break: normal; overflow-wrap: break-word;
  white-space: normal; hyphens: auto; overflow: visible; cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}

.pair-matcher-card:not([aria-disabled="true"]):active { transform: scale(0.98); }

.pair-matcher-card[aria-disabled="true"] { cursor: default; }

.pair-matcher-card--pending, .pair-matcher-card--flash { border-color: var(--pm-selected-border); background: var(--pm-selected-bg); }

.pair-matcher-card--correct   { border-color: #43B925; background: #F2FFEE; color: #43B925; }

.pair-matcher-card--incorrect { border-color: #D6234D; background: #FFF0F7; color: #D6234D; }

.pair-matcher-dot {
  position: relative; z-index: 3; flex-shrink: 0;
  width: var(--pm-dot-size); height: var(--pm-dot-size);
  border: var(--pm-dot-border-width) solid var(--pm-orange); border-radius: 50%; background: #fff;
}

.pair-matcher-dot--south   { margin-top:    calc(var(--pm-dot-size) / -2); }

.pair-matcher-dot--north   { margin-bottom: calc(var(--pm-dot-size) / -2); }

.pair-matcher-dot--active  { background: var(--pm-orange); }

.pair-matcher-dot--pending { border-color: var(--pm-selected-border); background: #fff; }

.pair-matcher-dot--correct   { border-color: #43B925; background: #43B925; }

.pair-matcher-dot--incorrect { border-color: #D6234D; background: #D6234D; }

.pair-matcher-lines {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}

.pair-matcher-line { stroke-dasharray: 1; animation: pair-matcher-line-draw 0.5s ease both; }

@keyframes pair-matcher-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.pair-matcher-card .text-item,
.pair-matcher-card .question-text,
.pair-matcher-card .group {
  margin: 0; min-width: 0; max-width: 100%;
  color: inherit; font: inherit;
  overflow-wrap: break-word; word-break: normal; white-space: normal;
}

.pair-matcher-card:not(.pair-matcher-card--rtl) .text-item,
.pair-matcher-card:not(.pair-matcher-card--rtl) .question-text,
.pair-matcher-card:not(.pair-matcher-card--rtl) .group { overflow-wrap: break-word; }

.pair-matcher-card--rtl { direction: rtl; unicode-bidi: plaintext; }

.pair-matcher-card-content {
  display: block; width: 100%; min-width: 0; max-width: 100%; text-align: inherit; white-space: normal;
}

.pair-matcher-card-content .space { display: inline; width: auto; }

.pair-matcher-card .text-item-arabic,
.pair-matcher-card .question-text-arabic {
  direction: rtl; font-size: 0.72rem; line-height: 1.15;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}

@media (max-width: 420px) {
  .pair-matcher-widget { gap: 46px; }
  .pair-matcher-row { grid-template-columns: repeat(var(--pm-cols, 3), minmax(0, 1fr)); gap: 12px; }
  .pair-matcher-card { min-height: 58px; padding: 6px 7px; font-size: 0.92rem; }
}

/**
 * Number Line Styles
 *
 * Layout and visual styles for the number line component.
 * Follows the same token and convention patterns as widgets.css / inputs.css.
 * All sizing, spacing and color values use --exercise-* design tokens.
 */

/* ========================================
   NUMBER LINE — ROOT
   ======================================== */

.number-line {
  position: relative;
  width: 100%;
  margin-bottom: var(--exercise-margin-bottom);
  user-select: none;
  --nl-chip-zone-height: 3rem;
  --nl-position-content-height: 0px;
  --nl-position-content-min-height: 2.8rem;
  --nl-visual-fraction-part-size: clamp(0.8rem, 2vw, 1rem);
  --nl-visual-fraction-size: clamp(5.5rem, 18vw, 8rem);
  /* Visual gap between end ticks and arrowheads — pure CSS, no effect on calculations */
  --nl-arrow-gap: 8px;
  --nl-arrow-arc-color: var(--exercise-danger, #D6234D);
  --nl-arrow-arc-stroke-width: 1.75;
}

/* ========================================
   VALIDATION FEEDBACK
   ======================================== */

/* Axis colour: overriding --nl-axis-color on root propagates to track, ticks, arrows and labels. */

.number-line--correct   { --nl-axis-color: #43B925; }

.number-line--incorrect { --nl-axis-color: #D6234D; }

/* Disable track transition for instant colour on submit. */

.number-line--correct .number-line-track,
.number-line--incorrect .number-line-track { transition: none; }

/* Reserve space above axis for chips overflowing upward. */

.number-line--drag-mode {
  padding-top: var(--nl-chip-zone-height);
}

/* ========================================
   ROW 1 — POSITION CONTENT (inputs / labels above axis)
   ======================================== */

.number-line-content-row {
  position: relative;
  width: 100%;
  min-height: max(var(--nl-position-content-min-height), var(--nl-position-content-height));
}

.number-line-position-content {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.number-line-position-content .visual-fraction-widget {
  --visual-fraction-part-size: var(--nl-visual-fraction-part-size);
  --visual-fraction-size: var(--nl-visual-fraction-size);
}

/* ========================================
   ROW 2 — ARROW ANNOTATION ARCS
   ======================================== */

.number-line-arrow-arcs-row {
  position: relative;
  width: 100%;
  margin-top: 0.1rem;
}

.number-line-arrow-arc {
  position: absolute;
  height: 80px;
  pointer-events: none;
}

.number-line-arrow-arc-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  overflow: visible;
  pointer-events: none;
}

.number-line-arrow-arc-path {
  fill: none;
  stroke: var(--nl-arrow-arc-color);
  stroke-width: var(--nl-arrow-arc-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.number-line-arrow-arc-head {
  fill: var(--nl-arrow-arc-color);
  stroke: none;
}

.number-line-arrow-arc-label {
  position: absolute;
  /* top is always set via inline style from getArrowArcLabelTop() */
  left: 50%;
  transform: translateX(-50%);
  color: var(--nl-arrow-arc-color);
  font-size: calc(var(--exercise-font-size) * 0.8);
  font-weight: var(--exercise-font-weight-bold, 600);
  line-height: 1.1;
  pointer-events: auto;
  /* Centre content horizontally; allow LayoutRenderer to size naturally */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   ROW 3 — AXIS (track + ticks + arrows + dots)
   ======================================== */

.number-line-axis-row {
  position: relative;
  width: 100%;
  height: 2rem;
}

.number-line-axis-row:has(.number-line-cursor-label) {
  height: 3rem;
}

/* In drag mode, chip zone is handled by .number-line--drag-mode padding-top on root */

/* Horizontal track line — spans [--nl-side-pad, 100% - --nl-side-pad] by default */

.number-line-track {
  position: absolute;
  left: var(--nl-side-pad, 7%);
  right: var(--nl-side-pad, 7%);
  top: 50%;
  height: 2px;
  background-color: var(--nl-axis-color);
  transform: translateY(-50%);
  /* transition on base state so both enter and exit are smooth */
  transition: all 0.2s ease;
}

/* Extend the track toward the arrow only when the arrow is present —
   keeps the track flush with the last tick when no arrow exists on that side */

.number-line-axis-row:has(.number-line-arrow-left) .number-line-track {
  left: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
}

.number-line-axis-row:has(.number-line-arrow-right) .number-line-track {
  right: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
}

/* Geometric line style — track extends to the full container edges
   so the axis looks like an infinite line, not a closed segment */

.number-line--style-line .number-line-track {
  left: 0;
  right: 0;
}

/* ── Arrowheads (CSS border-triangle technique) ── */

.number-line-arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
}

/* Right-pointing arrow — base sits at the right end of the track, offset outward by --nl-arrow-gap */

.number-line-arrow-right {
  left: calc(100% - var(--nl-side-pad, 7%) + var(--nl-arrow-gap, 8px));
  transform: translateY(-50%);
  border-top:    5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left:   8px solid var(--nl-axis-color);
}

/* Left-pointing arrow — tip extends just past the left end of the track, offset outward by --nl-arrow-gap */

.number-line-arrow-left {
  left: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
  transform: translate(-100%, -50%);
  border-top:    5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right:  8px solid var(--nl-axis-color);
}

/* Geometric line style — arrows reach the full container edges */

.number-line--style-line .number-line-arrow-right {
  left: calc(100%);
}

.number-line--style-line .number-line-arrow-left {
  left: 0;
}

/* ── Major ticks ── */

.number-line-major-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 14px;
  background-color: var(--nl-axis-color);
  z-index: 2;
  transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
}

/* ── Minor ticks ── */

.number-line-minor-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 8px;
  background-color: var(--nl-axis-color);
  z-index: 2;
  transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
}

/* ── Position marker dots ── */

.number-line-position-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--exercise-accent, #705DC0);
  box-shadow: 0 1px 3px rgba(112, 93, 192, 0.25);
  z-index: 2;
}

/* ========================================
   PLACED CHIP (free-drag mode)
   ======================================== */

/*
 * After the student drops a chip on the axis, a labelled button appears
 * above the snapped position. Clicking it returns the chip to the bank.
 *
 * Structure:
 *   .number-line-placed-chip          — absolute wrapper, positioned by left%
 *     .number-line-placed-chip-inner  — flex row holding btn + X button
 *       .number-line-placed-chip-btn  — the visible chip button (draggable)
 *       .number-line-placed-chip-remove — ✕ badge (always visible)
 *     ::after pseudo                  — thin connector line down to the axis
 */

/* Drop landing animation — subtle scale for professional feel */

@keyframes nl-chip-land {
  0%   { transform: translateX(-50%) scale(0.75); opacity: 0.6; }
  60%  { transform: translateX(-50%) scale(1.06); opacity: 1;   }
  100% { transform: translateX(-50%) scale(1);    opacity: 1;   }
}

.number-line-placed-chip {
  position: absolute;
  bottom: calc(50% + 2px);
  left: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* Play landing animation when class is toggled on by React */

.nl-chip-landing {
  animation: nl-chip-land 0.28s ease-out forwards;
}

/* Hide original chip while DragOverlay clone follows cursor — no ghost double */

.nl-chip-dragging {
  opacity: 0 !important;
  pointer-events: none;
}

.nl-chip-dragging::after {
  display: none;
}

/* Thin connector between chip and axis */

.number-line-placed-chip::after {
  content: '';
  display: block;
  width: 1.5px;
  height: 10px;
  background-color: var(--exercise-accent, #705DC0);
  opacity: 0.5;
  margin-top: 1px;
}

/* Item 3 — Inner flex row: position: relative so ✕ badge can be anchored inside */

.number-line-placed-chip-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  pointer-events: all;
}

/* ✕ badge: hidden by default, revealed on chip hover — clean, non-distracting */

.number-line-placed-chip-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid white;
  background-color: var(--exercise-text-light, #555);
  color: white;
  font-size: 0.5rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease, background-color 0.12s ease;
  pointer-events: all;
  z-index: 1;
  opacity: 0;
}

/* Show ✕ on chip hover or when badge itself has focus */

.number-line-placed-chip-inner:hover .number-line-placed-chip-remove,
.number-line-placed-chip-remove:focus-visible {
  opacity: 1;
}

.number-line-placed-chip-remove:hover {
  opacity: 1;
  transform: scale(1.15);
  background-color: var(--exercise-danger, #ef4444);
}

.number-line-placed-chip-btn {
  pointer-events: all;
  background-color: var(--exercise-accent, #705DC0);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: var(--exercise-font-size, 0.875rem);
  font-weight: var(--exercise-font-weight-bold, 600);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(112, 93, 192, 0.25);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.number-line-placed-chip-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 3px 10px rgba(112, 93, 192, 0.35);
}

/* Nearest snap tick highlights during drag — scaleY keeps layout intact */

.number-line-major-tick.nl-tick-hover {
  transform: translate(-50%, -50%) scaleY(1.5);
  width: 2.5px;
  background-color: var(--exercise-accent, #705DC0);
}

.number-line-minor-tick.nl-tick-hover {
  transform: translate(-50%, -50%) scaleY(1.8);
  width: 1.5px;
  background-color: var(--exercise-accent, #705DC0);
}

/* Snap preview — static subtle dot at landing position */

.nl-snap-preview {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--exercise-accent, #705DC0);
  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
  transition: left 0.06s ease;
}

/* Axis glow on drag-over intentionally disabled — axis stays neutral */

/* ========================================
   ROW 4 — NUMERIC TICK LABELS
   ======================================== */

.number-line-labels-row {
  position: relative;
  width: 100%;
  height: 1.2rem;
  margin-top: calc(var(--exercise-line-gap) * 0.5);
}

.number-line-tick-label {
  position: absolute;
  transform: translateX(-50%);
  /** Slightly smaller than base font — same pattern as secondary text in the app */
  font-size: calc(var(--exercise-font-size) * 0.8);
  color: var(--nl-axis-color);
  white-space: nowrap;
}

/* ========================================
   ROW 5 — HIGHLIGHT BANDS / LABELS
   ======================================== */

/* A coloured band spanning [from%, to%] on the axis row */

.number-line-highlight-band {
  position: absolute;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background-color: var(--nl-highlight-color, var(--nl-highlight-purple, #705DC0));
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
}

/* Highlight label row — sits below tick labels, never overlaps inputs */

.number-line-highlight-labels-row {
  position: relative;
  width: 100%;
  height: 1.2rem;
  margin-top: 0.1rem;
}

.number-line-highlight-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: calc(var(--exercise-font-size) * 0.75);
  font-weight: var(--exercise-font-weight-bold, 600);
  color: var(--exercise-text-light, #555);
  white-space: nowrap;
  pointer-events: none;
}

/* ========================================
   CURSOR BALL
   ======================================== */

/* Filled range between the cursor's initial value and its current position */

.number-line-cursor-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background-color: var(--nl-cursor-color, var(--exercise-accent, #705DC0));
  opacity: 0.28;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* The ball rendered at the cursor's current value */

.number-line-cursor-ball {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 2.5px solid var(--nl-cursor-color, var(--exercise-accent, #705DC0));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  cursor: grab;
  z-index: 4;
  touch-action: none; /* required for pointer capture on mobile */
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.number-line-cursor-ball:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%) scale(1.15);
}

.number-line-cursor-ball--dragging {
  cursor: grabbing;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%) scale(1.25);
  transition: none;
}

@keyframes number-line-cursor-jiggle {
  0%, 100% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); }
  20%      { transform: translate(-50%, -50%) translateX(-5px) rotate(-2deg); }
  40%      { transform: translate(-50%, -50%) translateX(5px) rotate(2deg); }
  60%      { transform: translate(-50%, -50%) translateX(-3px) rotate(-1deg); }
  80%      { transform: translate(-50%, -50%) translateX(3px) rotate(1deg); }
}

.number-line-cursor-ball--jiggle {
  animation: number-line-cursor-jiggle 0.55s ease-in-out 0.4s 2 both;
}

.number-line-cursor-label {
  position: absolute;
  top: calc(50% - 0.6rem);
  display: block;
  max-width: min(8rem, 26vw);
  transform: translate(-50%, -100%);
  overflow: hidden;
  color: var(--nl-cursor-color, var(--exercise-text-light, #555));
  font-size: calc(var(--exercise-font-size) * 0.75);
  font-weight: var(--exercise-font-weight-bold, 600);
  line-height: 1.1;
  pointer-events: none;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 5;
}

/* Validation feedback — mirrors the correct/incorrect axis colors */

.number-line-cursor-ball--correct,
.number-line-cursor-fill--correct,
.number-line-cursor-label--correct {
  --nl-cursor-color: #43B925;
}

.number-line-cursor-ball--incorrect,
.number-line-cursor-fill--incorrect,
.number-line-cursor-label--incorrect {
  --nl-cursor-color: #D6234D;
}

.number-line-cursor-ball:focus-visible {
  outline: 2px solid var(--nl-cursor-color, var(--exercise-accent, #705DC0));
  outline-offset: 3px;
}

/* ========================================
   COUNTER UI
   ROW 6 — COUNTER UI
   ======================================== */

.number-line-counter {
  /* ── Color tokens (override to restyle) ── */
  --nl-counter-bg:           #FFFFFF;
  --nl-counter-border-color: #FFCA76;
  --nl-counter-value-color:  #705DC0;
  --nl-counter-btn-bg:       #E7E2FF;
  --nl-counter-btn-color:    #705DC0;

  /* ── Layout ── */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0.5rem auto 0;
  padding: 0.4rem 0.75rem;
  width: fit-content;
  box-sizing: border-box;
  background: var(--nl-counter-bg);
  border: 1px solid var(--nl-counter-border-color);
  border-radius: 9px;
}

.number-line-counter-label {
  font-size: calc(var(--exercise-font-size) * 0.85);
  color: var(--exercise-text-light, #555);
  text-align: center;
}

.number-line-counter-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.number-line-counter-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2ch;
  font-size: calc(var(--exercise-font-size) * 2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  color: var(--nl-counter-value-color);
}

.number-line-counter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 9px;
  background: var(--nl-counter-btn-bg);
  color: var(--nl-counter-btn-color);
  font-size: 0;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.number-line-counter-btn:hover:not(:disabled)  { filter: brightness(0.94); }

.number-line-counter-btn:active:not(:disabled) { transform: scale(0.93); }

.number-line-counter-btn:disabled              { opacity: 0.45; cursor: not-allowed; }

/* ── Icon pseudo-elements (horizontal bar shared; vertical bar on + only) ── */

.number-line-counter-btn::before,
.number-line-counter-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.number-line-counter-btn::before                    { width: 29px; height: 7px; }

.number-line-counter-btn[aria-label='Increase']::after { width: 7px;  height: 29px; }

/* ========================================
   ACCESSIBILITY — FOCUS-VISIBLE RINGS  (item 6)
   ======================================== */

.number-line-placed-chip-btn:focus-visible,
.number-line-placed-chip-remove:focus-visible,
.number-line-counter-btn:focus-visible {
  outline: 2px solid var(--exercise-accent, #705DC0);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Clock Widget Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.clock {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 4px;
  user-select: none;
}

/* ── Analog ──────────────────────────────────────────────────────────────── */

.clock-analog {
  position: relative;
}

/* Circular wrapper — width/height/offset set via inline styles in ClockRenderer.tsx
   (derived from FACE_RADIUS and INTERACTIVE_SCALE so they stay in sync).
   box-shadow respects border-radius, so shadows align with the face.
   Inset shadow goes on ::after (z-index:1) so it paints above the SVG child. */

.clock-face-ring {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0px 4.57px 0px 0px #00000040;
}

.clock-face-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0px 3px 0px 4px #00000026 inset;
  pointer-events: none;
  z-index: 1;
}

.clock-svg {
  display: block;
  touch-action: none;
  /* top/left offset set via inline style in ClockRenderer.tsx */
  position: absolute;
}

.clock-face {
  fill: #ffffff;
  stroke: #ae9cff;
  stroke-width: 7;
}

.clock-tick-hour {
  stroke: #705dc0;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.clock-tick-minute {
  stroke: #c6b6ff;
  stroke-width: 1;
  stroke-linecap: round;
}

.clock-number {
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  fill: #705dc0;
  stroke: #ae9cff;
  stroke-width: 2.5px;
  paint-order: stroke fill;
}

.clock-hand {
  stroke: transparent;
}

/* ── Arrow hands ─────────────────────────────────────────────────────────── */

.clock-arrow {
  fill: #ae9cff;
  stroke: #705dc0;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.clock-interactive .clock-arrow {
  stroke-dasharray: 3 2;
}

.clock-arrow-minute {
  fill: #705dc0;
}

.clock-center {
  fill: #705dc0;
}

.clock-interactive .clock-hand {
  cursor: grab;
}

.clock-interactive .clock-hand:active {
  cursor: grabbing;
}

.clock-interactive .clock-arrow-hour {
  fill: #c8b8ff;
}

.clock-period-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #705dc0;
  background: rgba(255, 255, 255, 0.92);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Digital ─────────────────────────────────────────────────────────────── */

.clock-digital-wrapper {
  --clock-digital-border: 5px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.clock-digital-tabs {
  display: block;
  margin-bottom: calc(-1 * var(--clock-digital-border));
}

.clock-digital-display {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 28px;
  font-weight: 700;
  color: #705dc0;
  background: #fffbf3;
  padding: 6px 12px;
  border-radius: 12px;
  border: var(--clock-digital-border) solid #ffca76;
  box-shadow: 0px 4px 1px 0px rgba(255, 202, 118, 0.4) inset;
  letter-spacing: 2px;
}

/* ── Validation states ───────────────────────────────────────────────────── */

.clock-interactive.clock-correct .clock-arrow,
.clock-interactive.clock-incorrect .clock-arrow {
  stroke-dasharray: none;
}

.clock-correct .clock-arrow {
  fill: #16a34a;
  stroke: #16a34a;
}

.clock-correct .clock-arrow-hour {
  fill: #f2ffee;
  stroke: #16a34a;
}

.clock-incorrect .clock-arrow {
  fill: #dc2626;
  stroke: #dc2626;
}

.clock-incorrect .clock-arrow-hour {
  fill: #fff0f7;
  stroke: #dc2626;
}

.clock-correct .clock-digital-display {
  border-color: #16a34a;
  background: #f0fdf4;
}

.clock-incorrect .clock-digital-display {
  border-color: #dc2626;
  background: #fef2f2;
}

/**
 * Button & Action Styles
 *
 * Styles for submit buttons and other action controls.
 */

/* ========================================
   SUBMIT BUTTON
   ======================================== */

.exercise-submit-btn {
  padding: var(--exercise-input-padding);
  border: var(--exercise-border-width) solid var(--exercise-primary);
  border-radius: var(--exercise-border-radius);
  background: var(--exercise-primary);
  color: white;
  font-size: var(--exercise-font-size);
  font-weight: var(--exercise-font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: var(--exercise-margin-bottom);
}

.exercise-submit-btn:hover {
  background: var(--exercise-bg);
  color: var(--exercise-primary);
}

.exercise-submit-btn:active {
  /** Scale down to 98% when clicked for tactile feedback */
  transform: scale(0.98);
}

/* Responsive Overrides - must be last */

/**
 * Responsive Design Styles
 *
 * Media queries for different screen sizes.
 */

/* ========================================
   TABLET & SMALLER (max-width: 768px)
   ======================================== */

@media (max-width: 768px) {
  .math-exercise-renderer {
    /** Reduce padding by 25% on tablets */
    padding: calc(var(--exercise-padding) * 0.75);
  }

  .exercise-line {
    /** Reduce gap between inline elements by 25% */
    gap: calc(var(--exercise-element-margin) * 0.75);
  }

  .drag-options {
    /** Reduce gap between drag options */
    gap: var(--exercise-element-margin);
  }

  .numeric-keypad {
    /** Reduce gap between keypad buttons */
    gap: var(--exercise-element-margin);
  }
}

/* ========================================
   MOBILE (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
  .question-text {
    /** Smaller question text on mobile */
    font-size: var(--exercise-font-size-large);
  }

  .inline-input {
    /** Reduce input width by 20% on mobile */
    width: calc(var(--exercise-input-width) * 0.8);
  }

  .drag-option {
    /** Reduce drag option width by 20% on mobile */
    min-width: calc(var(--exercise-button-width) * 0.8);
  }

  button.drag-option {
    /** Reduce button drag option width by 20% on mobile */
    width: calc(var(--exercise-button-width) * 0.8);
  }
}
/* ============================================
   DND STYLES
   ============================================ */

/* Draggable base */
.draggable {
  display: inline-block;
  user-select: none;
}

.draggable.dragging {
  /* Hide original while drag overlay follows cursor to avoid duplicate render.
     visibility:hidden preserves layout space so neighbors don't shift. */
  visibility: hidden;
}

/* Droppable base */
.droppable {
  display: inline-block;
}

.droppable.drop-active {
  outline: 2px dashed #4a90d9;
  outline-offset: 2px;
  background-color: rgba(74, 144, 217, 0.1);
  border-radius: 4px;
}

.droppable.drop-invalid {
  outline: 2px dashed #e74c3c;
  outline-offset: 2px;
}

/* Drag overlay - the item following cursor. Matches the rendered button look,
   which is the `button.drag-option` legacy rule in styles/widgets.css
   (accent background + white text, no border).
   NOTE: @dnd-kit DragOverlay renders in a portal at document.body, outside
   the .math-exercise-renderer scope — so CSS vars must include fallbacks. */
.drag-overlay-option {
  padding: 10px 16px;
  border: none;
  border-radius: var(--exercise-border-radius, 0.25rem);
  background: var(--exercise-accent, #705DC0);
  color: white;
  font-size: var(--exercise-font-size, clamp(0.875rem, 2vw, 1.1rem));
  font-weight: var(--exercise-font-weight, 500);
  min-width: var(--exercise-button-width, clamp(3rem, 6vw, 4rem));
  text-align: center;
  cursor: grabbing;
}

/* Note: .drag-options and .drag-option base styles live in styles/widgets.css
   (themed via CSS vars). Don't duplicate them here. */

.drag-option-wrapper {
  display: inline-block;
}

/* Slot container - maintains space when item is dragged out */
.drag-option-slot {
  display: inline-flex;
  min-width: 60px;
  min-height: 44px;
}

/* Empty slot - shows where item came from */
.drag-option-empty {
  min-width: 60px;
  min-height: 44px;
  border: 2px dashed #d4c5a9;
  border-radius: 8px;
  background: rgba(212, 197, 169, 0.2);
}

/* Inline input droppable */
.inline-input-droppable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* min-width: 50px;
  min-height: 40px; */
}

.inline-input {
  padding: 4px 8px;
  border: 2px dashed #b8a88a;
  border-radius: 8px;
  font-size: inherit;
  text-align: center;
  background: rgba(212, 197, 169, 0.15);
  transition: border-color 0.15s ease;
}

.inline-input:focus {
  outline: none;
  border-color: #4a90d9;
}

/* Chip style for dropped values - matches drag-option button */
.inline-input-chip {
  padding: 10px 20px;
  border: 2px solid #9b8fc7;
  border-radius: 8px;
  background: #e8e4f3;
  font-size: 16px;
  font-weight: 500;
  color: #5c5470;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inline-input-chip:hover {
  background: #ddd8eb;
  border-color: #8578b0;
}

/* Original chip dims while its copy is shown in the drag overlay */
.inline-input-chip.dragging {
  opacity: 0.4;
}

/* When droppable is active, style the input inside */
.inline-input-droppable.drop-active .inline-input {
  border-color: #4a90d9;
  background-color: rgba(74, 144, 217, 0.05);
}

/* ============================================
   DRAGGABLE TOOLS (Ruler, Protractor, etc.)
   ============================================ */

/* Default overlay — absolute positioning (for floating-over-exercise future use) */
.tools-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: visible;
}

.draggable-tool {
  pointer-events: auto;
  touch-action: none;
  border-radius: 3px;
}

.draggable-tool:hover {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.draggable-tool.dragging {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* Ensure exercise container allows tools to float outside */
.math-exercise-renderer {
  position: relative;
  overflow: visible;
}

/* ── Intro jiggle — plays on mount so students know tools are draggable ─────── */
@keyframes tool-jiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%       { transform: translateX(-5px) rotate(-2deg); }
  40%       { transform: translateX(5px)  rotate(2deg); }
  60%       { transform: translateX(-3px) rotate(-1deg); }
  80%       { transform: translateX(3px)  rotate(1deg); }
}

.tool-content-jiggle {
  animation: tool-jiggle 0.55s ease-in-out 0.4s 2 both;
}

/* ── Flip button (set-square mirror) ─────────────────────────────────────────── */
.tool-flip-btn {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border: 1.5px solid #705DC0;
  border-radius: 50%;
  background: #fff;
  color: #705DC0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 102;
  opacity: 0.78;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
  box-shadow: 0 1px 5px rgba(112, 93, 192, 0.22);
}

.tool-flip-btn:hover {
  opacity: 1;
  background: #705DC0;
  color: #fff;
}

.tool-flip-btn--active {
  background: #705DC0;
  color: #fff;
  opacity: 1;
  box-shadow: 0 1px 5px rgba(112, 93, 192, 0.4);
}