/* In-exam toolbar dropdowns: the highlighter and the display prefs (Font Size / Colour). */
@layer components {
  .student-highlight-toolbar {
    align-items: center;
    display: flex;
    flex-shrink: 0;
  }
  .highlight-dropdown,
  .display-prefs-dropdown,
  .display-prefs-picker-wrap { position: relative; }

  /* Toolbar toggles, shared by both dropdowns */
  .highlight-dropdown-toggle,
  .display-prefs-dropdown-toggle {
    align-items: center;
    background: oklch(var(--oklch-canvas));
    block-size: 2rem;
    border: 1.5px solid oklch(var(--oklch-border));
    border-radius: var(--radius-md);
    box-sizing: border-box;
    color: oklch(var(--oklch-ink-mid));
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.375rem;
    padding: 0 0.625rem;
    transition: all 150ms ease;

    &:hover { border-color: oklch(var(--oklch-ink-mid)); }
  }
  .highlight-dropdown-toggle:active { background: var(--toolbar-pressed-background); }
  .highlight-dropdown-chevron,
  .display-prefs-dropdown-chevron {
    display: inline-block;
    font-size: 0.5rem;
    transition: transform 150ms ease;
  }

  /* Dropdown menus. Each menu only sets --menu-gap and --menu-inline-size. */
  .highlight-dropdown-menu,
  .display-prefs-dropdown-menu {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);
    display: none;
    flex-direction: column;
    gap: var(--menu-gap);
    inline-size: var(--menu-inline-size);
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-start: 0;
    padding: 0.5rem;
    position: absolute;
    z-index: 100;
  }
  .highlight-dropdown-menu {
    --menu-gap: 0.375rem;
    --menu-inline-size: 220px;

    > div {
      display: flex;
      gap: 0.375rem;
      justify-content: space-between;
    }
  }
  .display-prefs-dropdown-menu {
    --menu-gap: 0.25rem;
    --menu-inline-size: 240px;
  }
  .highlight-dropdown-menu--open,
  .display-prefs-dropdown-menu--open { display: flex; }

  /* Pressed/hovered fill for toolbar controls */
  .highlight-dropdown-toggle,
  .display-prefs-menu-item {
    --toolbar-pressed-background: light-dark(oklch(93% 0.02 0), oklch(var(--oklch-canvas-sunken)));
  }

  /* Highlighter colour swatches. Colour variants only set the --highlight-* properties. */
  .highlight-dropdown-item {
    --highlight-colour: oklch(var(--oklch-canvas));

    align-items: center;
    background-color: var(--highlight-colour);
    background-image: var(--highlight-pattern, none);
    background-size: var(--highlight-pattern-size, auto);
    block-size: 2rem;
    border: 1.5px solid oklch(var(--oklch-border));
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 2rem;
    inline-size: 2rem;
    justify-content: center;
    padding: 0;
    transition: transform 100ms ease, box-shadow 100ms ease;

    &:hover { transform: scale(1.1); }
    &:active { transform: scale(0.95); }
  }
  .highlight-dropdown-item--active {
    border-color: oklch(var(--oklch-ink-darkest));
    box-shadow: 0 0 0 2px oklch(var(--oklch-canvas)), 0 0 0 4px oklch(var(--oklch-ink-mid));
  }
  .highlight-dropdown-item--off,
  .highlight-dropdown-item--remove { color: oklch(var(--oklch-ink-mid)); }
  .highlight-dropdown-item--off {
    font-size: 0.65rem;
    font-weight: 600;
  }
  .highlight-dropdown-item--remove {
    font-size: 0.9rem;
    line-height: 1;
  }

  mark.exam-highlight {
    background-color: var(--highlight-colour, Mark);
    background-image: var(--highlight-pattern, none);
    background-size: var(--highlight-pattern-size, auto);
    border-radius: 2px;
    cursor: pointer;
    padding: 0 1px;
  }
  /* Distinct fill patterns per colour so highlights are still distinguishable without colour
     vision — not hue alone (High #8). Patterns are layered over the base hue. */
  .highlight-dropdown-item--yellow,
  .exam-highlight--yellow { --highlight-colour: oklch(88% 0.15 100); }
  .highlight-dropdown-item--green,
  .exam-highlight--green {
    --highlight-colour: oklch(88% 0.13 150);
    --highlight-pattern: repeating-linear-gradient(45deg, oklch(0% 0 0 / 12%) 0 2px, transparent 2px 6px);
  }
  .highlight-dropdown-item--blue,
  .exam-highlight--blue {
    --highlight-colour: oklch(85% 0.09 240);
    --highlight-pattern: radial-gradient(oklch(0% 0 0 / 15%) 1px, transparent 1.5px);
    --highlight-pattern-size: 6px 6px;
  }
  .highlight-dropdown-item--pink,
  .exam-highlight--pink {
    --highlight-colour: oklch(87% 0.1 0);
    --highlight-pattern: repeating-linear-gradient(-45deg, oklch(0% 0 0 / 12%) 0 2px, transparent 2px 6px);
  }

  /* Display prefs menu */
  .display-prefs-menu-group-label {
    color: oklch(var(--oklch-ink-light));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.375rem 0.5rem 0.125rem;
    text-transform: uppercase;

    &:first-child { padding-block-start: 0.125rem; }
  }
  .display-prefs-menu-item {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: oklch(var(--oklch-ink-darkest));
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    text-align: start;

    &::before {
      content: "";
      inline-size: 0.85rem;
    }
    &:hover { background: var(--toolbar-pressed-background); }
    &[aria-checked="true"]::before { content: "✓"; }
  }
  .display-prefs-reset-link {
    color: oklch(var(--oklch-primary));
    font-size: 0.8125rem;
    margin-block-start: 0.25rem;
    padding: 0.25rem 0.5rem;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  .display-prefs-colour-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
  }
  .display-prefs-colour-label {
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.8125rem;
  }
  .display-prefs-swatch-toggle {
    align-items: center;
    background: oklch(var(--oklch-canvas));
    block-size: 1.75rem;
    border: 1.5px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    gap: 0.375rem;
    padding: 0 0.5rem;
  }
  .display-prefs-swatch-preview {
    background: #000000;
    block-size: 1rem;
    border: 1px solid oklch(var(--oklch-border));
    border-radius: 3px;
    flex-shrink: 0;
    inline-size: 1rem;
  }
  .display-prefs-swatch-chevron {
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.5rem;
  }

  /* Colour picker popover */
  .display-prefs-picker-popover {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    inline-size: 200px;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
    padding: 0.625rem;
    position: absolute;
    z-index: 101;
  }
  .display-prefs-picker-popover--open { display: flex; }
  .display-prefs-picker-body {
    display: flex;
    gap: 0.5rem;
  }
  .display-prefs-sv-square {
    background-color: #ff0000;
    background-image:
      linear-gradient(to top, #000000, transparent),
      linear-gradient(to right, #ffffff, transparent);
    block-size: 120px;
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    cursor: crosshair;
    flex: 1;
    position: relative;
    touch-action: none;
  }
  .display-prefs-sv-cursor {
    block-size: 0.75rem;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.4);
    inline-size: 0.75rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .display-prefs-hue-slider {
    background: linear-gradient(to bottom, red, yellow, lime, cyan, blue, magenta, red);
    block-size: 120px;
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    inline-size: 1.25rem;
    position: relative;
    touch-action: none;
  }
  .display-prefs-hue-thumb {
    block-size: 0.25rem;
    border: 2px solid white;
    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.4);
    inline-size: 100%;
    inset-inline-start: 0;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
  }
  .display-prefs-hex-row {
    align-items: center;
    color: oklch(var(--oklch-ink-mid));
    display: flex;
    font-size: 0.75rem;
    gap: 0.5rem;
  }
  .display-prefs-hex-input {
    background: oklch(var(--oklch-canvas));
    block-size: 1.75rem;
    border: 1.5px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    color: oklch(var(--oklch-ink-darkest));
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    padding: 0 0.5rem;
  }
  .display-prefs-picker-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
  }
  .display-prefs-picker-cancel,
  .display-prefs-picker-choose {
    background: oklch(var(--oklch-canvas));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
  }
  .display-prefs-picker-choose {
    background: oklch(var(--oklch-primary));
    border-color: oklch(var(--oklch-primary));
    color: var(--color-text-on-primary);
  }
}