/* Outfit is vendored under vendor/outfit/ rather than imported from Google:
 * an @import is invisible to the template's asset guard, so this one
 * survived the air-gap work, and it sent every annotator's IP to a third
 * party on every page load. */
@import url('vendor/outfit/outfit.css');

:root {
  /* Typography */
  --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Fira Code', monospace;

  /* Type scale (minor third — 1.2 ratio) */
  --text-xs: 0.75rem;     /* 12px — badges, fine print */
  --text-sm: 0.8125rem;   /* 13px — help text, captions */
  --text-base: 1rem;      /* 16px — body, labels, UI text */
  /* 14px — dense expert chrome: annotation toolbars, timeline transports,
     slab captions. Added because the gap between 13px and 16px was being
     filled ad hoc: 0.85 / 0.875 / 0.88 / 0.9 / 0.92 / 0.95rem and a bare 14px
     all appear across the stylesheets, ~170 declarations of the same
     intention at seven different sizes. New dense surfaces use this; the
     existing call sites are a separate sweep. */
  --text-dense: 0.875rem;
  --text-md: 1.0625rem;   /* 17px — schema titles */
  --text-lg: 1.1875rem;   /* 19px — instance text to annotate */
  --text-xl: 1.25rem;     /* 20px — page headings */

  /* Spacing scale */
  --space-xs: 0.25rem;    /* 4px — tight internal */
  --space-sm: 0.5rem;     /* 8px — within components */
  --space-md: 1rem;       /* 16px — between siblings */
  --space-lg: 1.5rem;     /* 24px — between sections */
  --space-xl: 2rem;       /* 32px — between major zones */

  /* Colors */
  --background: #ffffff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: #6e56cf;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #6e56cf;
  --radius: 0.5rem;
  --primary-color: #6e56cf;
  --secondary-color: #7c66ce;
  --accent-color: #a18fff;
  --dark-color: #09090b;
  --light-color: #fafafa;
  --gray-color: #71717a;
  --light-gray: #f4f4f5;
  --light-bg: #f5f7fb;
  --heading-color: #09090b;
  --text-color: #374151;
  --success-color: #10b981;
  --border-radius: 0.5rem;
  --box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.06);
  --box-shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --transition: all 0.15s ease;
  --section-padding-top: 100px;

  /* Overlay Z-Index Hierarchy (higher = on top)
   * Must match OVERLAY_Z_INDEX constants in span-core.js */
  --z-overlay-admin-keyword: 100;
  --z-overlay-ai-keyword: 110;
  --z-overlay-user-span: 120;
  --z-overlay-controls: 200;
  --z-overlay-tooltip: 300;
}

body {
  background-color: var(--light-bg);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Shadcn-style button */
.shadcn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  height: 2.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.shadcn-button-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.shadcn-button-primary:hover {
  background-color: var(--secondary-color);
  color: var(--primary-foreground);
}

.shadcn-button-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

.shadcn-button-outline:hover {
  background-color: var(--secondary);
  color: var(--primary);
}

.shadcn-button:active {
  transform: scale(0.97);
}

.shadcn-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Annotation status indicator (navbar badge) */
.annotation-status-indicator {
  display: flex;
  align-items: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.status-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.labeled {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.status-badge.labeled::before {
  background-color: #34d399;
}

.status-badge.unlabeled {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.status-badge.unlabeled::before {
  background-color: #fbbf24;
}

.status-badge.in_progress {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.status-badge.in_progress::before {
  background-color: #fb923c;
}

/* Skip to unannotated button hover states */
#jump-unannotated-btn:hover,
#jump-unannotated-prev-btn:hover {
  background-color: rgba(255, 255, 255, 0.35) !important;
}

/* Notification animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Card styling */
.shadcn-card {
  min-height: 250px;
  max-height: none;
  background-color: var(--card);
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Content-type-aware card sizing */
.shadcn-card.media-annotation {
  min-height: 400px;
  max-height: none;
}

.shadcn-card.text-annotation {
  min-height: 200px;
  max-height: none;
}

.shadcn-card-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.shadcn-card-content {
  padding: var(--space-lg);
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Needed for flex child to respect overflow */
}

/* Required field validation */
.required-fields-error {
  display: none;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.4;
}

.required-fields-error i {
  margin-right: 0.35rem;
}

.annotation-form.required-unfilled {
  border: 2px solid #f87171;
  border-radius: 0.5rem;
  padding: 0.25rem;
}

/* Annotation form styling */
.annotation-form {
  min-width: 0; /* Allow forms to shrink in grid layout */
}

.annotation-form fieldset {
  padding: 0.25rem;
  margin: 0;
}

.annotation-form legend {
  font-weight: 600;
  color: var(--heading-color);
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* ai help */
.ai-help {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: fit-content;
  margin-left: auto;
  overflow: visible;
}

/* Separator between AI buttons */
.ai-help > span {
  color: var(--border);
}

.ai-help-word {
  font-size: 1rem;
  margin: 0;
}

.ai-assistant-containter:hover {
  color: var(--primary);
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  padding: 0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  min-width: 300px;
  max-width: 400px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  margin-top: 0.5rem;
  border: 1px solid #e5e7eb;
  /* A per-label rationale set runs to ~700px, and the panel is absolutely
     positioned inside `.shadcn-card`, which sets `overflow: hidden` to keep the
     media canvas inside its rounded corners. Unbounded, the panel was simply
     sliced off mid-sentence at the card edge. Bounding it here keeps it a
     self-contained, scrollable component instead of relying on the card to
     clip it, without touching the card's own overflow. */
  max-height: 22rem;
  overflow-y: auto;
}

.tooltip.active {
  display: block;
  /* Bootstrap ships `.tooltip { ... opacity: 0 }` for its own JS tooltips, which
     it fades in by adding `.show`. Potato's AI assistant panels reuse the class
     name `.tooltip` and toggle `.active` instead, and never restored the
     opacity — so hint, keyword and rationale panels opened, laid out, filled
     with model output, and painted nothing at all. `.tooltip.active` outranks
     Bootstrap's single-class rule, so this is where it has to be set. */
  opacity: 1;
}

/* The card and its content pane both clip (`overflow: hidden` / `overflow-y:
   auto`) to keep the media canvas inside the rounded corners and to let long
   forms scroll. An AI panel is absolutely positioned *inside* that context, so
   a rationale set taller than the remaining card was sliced off mid-sentence —
   the model's answer was on the page and unreadable. Lift the clip only while a
   panel is actually open, so the normal scrolling behaviour is untouched. */
.shadcn-card:has(.tooltip.active),
.shadcn-card-content:has(.tooltip.active) {
  overflow: visible;
}

/* Close button for tooltip */
.tooltip .tooltip-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}

.tooltip .tooltip-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

.tooltip .assistant-content {
  padding: 1rem;
  padding-right: 2.5rem; /* Space for close button */
}

.ai-assistant-containter {
  display: flex;
}

.ai-assistant-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-assistant-img img {
  width: 1rem;
  height: 1rem;
}

.bold {
  font-weight: bold;
}

/* Fieldset content styling */
.annotation-form fieldset label {
  color: var(--text-color);
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
}

.annotation-form fieldset p,
.annotation-form fieldset > div {
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

/* Preserve newlines in instance text (default text display path) */
#text-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Text content within fieldsets */
.annotation-form fieldset .text-content {
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Instructions and descriptions */
.annotation-form fieldset .instructions,
.annotation-form fieldset .description {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--muted);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.none {
  display: none;
}

/* Schema titles — clear heading level, subordinate to instance text */
.annotation-form fieldset legend,
.annotation-form fieldset .shadcn-radio-title,
.annotation-form fieldset .shadcn-likert-title,
.annotation-form fieldset .shadcn-slider-title,
.annotation-form fieldset .shadcn-multiselect-title,
.annotation-form fieldset .shadcn-text-title,
.annotation-form fieldset .shadcn-span-title,
.annotation-form fieldset .shadcn-multirate-title,
.annotation-form fieldset .shadcn-select-title,
.annotation-form fieldset .shadcn-number-title {
  color: var(--heading-color) !important;
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* Ensure all text within fieldsets is readable */
.annotation-form fieldset * {
  color: inherit;
}

.annotation-form fieldset span,
.annotation-form fieldset strong,
.annotation-form fieldset b,
.annotation-form fieldset em,
.annotation-form fieldset i {
  color: var(--text-color) !important;
}

/* Form elements */
input[type="text"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background-color: var(--background);
  color: var(--foreground);
  transition: var(--transition);
  font-size: var(--text-base);
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(110, 86, 207, 0.25);
}

/* Keyboard focus ring for range/slider inputs (they reset outline) */
input[type="range"]:focus-visible,
.shadcn-slider-input:focus-visible,
.pairwise-scale-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.30);
}

/* Radio and checkbox styling */
input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: #6e56cf;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  color: var(--text-color);
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 0.25rem;
}

/* Slider styling */
input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--light-gray);
  outline: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}

/* Span annotation styling */
.span_container {
  position: relative;
  display: inline-block;
  border-radius: var(--radius);
}

.span-highlight {
  position: relative;
  display: inline-block;
  border-radius: var(--radius);
  padding: 1px 2px;
  margin: 0 1px;
}

.span_label {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 4px;
  color: #6e56cf;
  background-color: white;
  border: 1px solid #e4e4e7;
  z-index: 10;
  white-space: nowrap;
  font-weight: 500;
}

.span_close {
  position: absolute;
  top: -18px;
  right: 0;
  font-size: 12px;
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--destructive);
  background-color: white;
  border: 1px solid var(--destructive);
  z-index: 10;
  font-weight: bold;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}

.span_close:hover {
  background-color: var(--destructive);
  color: white;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error states */
.error-message {
  color: var(--destructive);
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--destructive);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 1rem 0;
}

/* Success states */
.success-message {
  color: var(--success-color);
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success-color);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 1rem 0;
}

/* ===== SCHEMA-SPECIFIC STYLES ===== */

/* Likert Scale Styles */
.shadcn-likert-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-sans);
  position: relative;
}

.shadcn-likert-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  text-align: left;
  width: 100%;
  margin-bottom: 0.25rem;
}

.shadcn-likert-scale {
  display: flex;
  align-items: flex-start;  /* Align to top so endpoints match track position */
  justify-content: space-between;
  width: 100%;
}

.shadcn-likert-endpoint {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  line-height: 1.25rem;  /* Match button height for vertical alignment */
  color: var(--muted-foreground);
  padding: 0 0.5rem;
  max-width: 30%;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.shadcn-likert-options {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;  /* Align options to top so track math works correctly */
  position: relative;
  padding: 0 0.5rem;
  gap: 0.5rem;
}

.shadcn-likert-track {
  position: absolute;
  height: 2px;
  background-color: var(--border);
  left: 0.5rem;
  right: 0.5rem;
  top: 0.625rem;  /* Half of button height (1.25rem / 2) - positions track at button center */
  transform: translateY(-50%);
  z-index: 0;
}

.shadcn-likert-option {
  display: flex;
  flex-direction: column;  /* Stack button and label vertically */
  align-items: center;
  justify-content: flex-start;  /* Align to top */
  position: relative;
  z-index: 1;
}

.shadcn-likert-input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.shadcn-likert-button {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #9ca3af;
  margin-bottom: 0;
  cursor: pointer;
  transition: var(--transition);
}
.shadcn-likert-input:hover + .shadcn-likert-button,
.shadcn-likert-button:hover {
  border-color: #6e56cf;
  background-color: #f5f3ff;
}

.shadcn-likert-input:checked + .shadcn-likert-button {
  background-color: var(--primary);
  border-color: var(--primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}

.shadcn-likert-input:focus + .shadcn-likert-button {
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}

.shadcn-likert-input:hover + .shadcn-likert-button {
  border-color: var(--primary);
}

.shadcn-likert-label {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  text-align: center;
}

.shadcn-likert-input:checked ~ .shadcn-likert-label {
  color: var(--primary);
  font-weight: 500;
}

.shadcn-likert-bad-text {
  display: flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
}

.shadcn-likert-bad-text-label {
  margin-left: 0.5rem;
  font-size: var(--text-base);
  color: var(--text-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
}

/* Multiselect Styles */
.shadcn-multiselect-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-sans);
  position: relative;
}

.shadcn-multiselect-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.shadcn-multiselect-grid {
  display: grid;
  gap: 0.25rem;
}

.shadcn-multiselect-item {
  display: flex;
  align-items: center;
}

.shadcn-multiselect-checkbox {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  margin-right: 0.75rem;
  transition: var(--transition);
  position: relative;
}

.shadcn-multiselect-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.shadcn-multiselect-checkbox:checked::after {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.shadcn-multiselect-checkbox:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-multiselect-checkbox:hover:not(:checked) {
  border-color: var(--primary);
}

.shadcn-multiselect-label {
  font-size: var(--text-base);
  color: var(--foreground);
}

/* Unified keybinding badge used by all schema types */
.keybinding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
  background-color: var(--muted);
  border-radius: 0.25rem;
  color: var(--muted-foreground);
  min-width: 1.2em;
  text-align: center;
  text-transform: uppercase;
}

/* Backward-compat alias */
.shadcn-multiselect-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
  background-color: var(--muted);
  border-radius: 0.25rem;
  color: var(--muted-foreground);
  min-width: 1.2em;
  text-align: center;
  text-transform: uppercase;
}

.shadcn-multiselect-free-response {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.shadcn-multiselect-free-input {
  flex: 1;
  height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  padding: 0 0.75rem;
  font-size: var(--text-base);
  margin-left: 0.5rem;
  transition: var(--transition);
}

.shadcn-multiselect-free-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* Radio Styles */
.shadcn-radio-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-sans);
  position: relative;
}

.shadcn-radio-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.shadcn-radio-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  width: 100%;
}

.shadcn-radio-options.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shadcn-radio-option {
  display: flex;
  align-items: center;
}

.shadcn-radio-option.horizontal {
  margin-right: 1.5rem;
}

.shadcn-radio-input {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  margin-right: 0.5rem;
  transition: var(--transition);
  position: relative;
}

.shadcn-radio-input:checked {
  border-color: var(--primary);
}

.shadcn-radio-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--primary);
}

.shadcn-radio-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-radio-input:hover {
  border-color: var(--primary);
}

.shadcn-radio-label {
  font-size: var(--text-base);
  color: var(--foreground);
  cursor: pointer;
}

.shadcn-radio-free-response {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

.shadcn-radio-free-input {
  width: 100%;
  max-width: 300px;
  margin-left: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background-color: var(--background);
  font-size: var(--text-base);
  color: var(--foreground);
  transition: var(--transition);
}

.shadcn-radio-free-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-radio-free-input:hover {
  border-color: var(--primary);
}

/* Slider Styles */
.shadcn-slider-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.shadcn-slider-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.shadcn-slider-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 0.5rem 0;
}

.shadcn-slider-label {
  flex: 0 0 auto;
  width: 2.5rem;
  text-align: center;
  font-size: var(--text-base);
  color: var(--muted-foreground);
}

.shadcn-slider-track {
  flex: 1;
  position: relative;
  height: 1.5rem;
}

.shadcn-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.25rem;
  background: var(--border);
  border-radius: 1rem;
  outline: none;
  cursor: pointer;
}

.shadcn-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: var(--transition);
}

.shadcn-slider-input::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: var(--transition);
}

.shadcn-slider-input:focus {
  outline: none;
}

.shadcn-slider-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(110, 86, 207, 0.25);
}

.shadcn-slider-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(110, 86, 207, 0.25);
}

/* Span Styles */
.shadcn-span-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  /* Was `center`. As a column flex container, that made every child shrink to
   * its content on the cross axis — including the <fieldset>, which then became
   * ~200px wide inside an 860px box. `.shadcn-span-options` is a
   * `repeat(auto-fill, minmax(180px, 1fr))` grid resolved against that fieldset,
   * so it only ever got ONE column: five labels stacked in a narrow centred
   * strip with two thirds of the box empty beside them. */
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-sans);
  position: relative;
}

/* The fieldset is the grid's containing block, so it has to carry the box's
 * width or the label grid cannot use it. The `[schema]` in the selector is not
 * decoration: `fieldset[schema] { width: fit-content }` further down this file
 * has the same specificity as a bare `.shadcn-span-container > fieldset` and
 * comes later, so the plain form of this rule loses. */
.shadcn-span-container > fieldset[schema] {
  width: 100%;
  min-width: 0;
}

.shadcn-span-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.shadcn-span-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.shadcn-span-option {
  display: flex;
  align-items: center;
}

.shadcn-span-checkbox {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  margin-right: 0.5rem;
  transition: var(--transition);
  position: relative;
}

.shadcn-span-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.shadcn-span-checkbox:checked::after {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.shadcn-span-checkbox:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-span-checkbox:hover {
  border-color: var(--primary);
}

.shadcn-span-label {
  font-size: var(--text-base);
  color: var(--foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.shadcn-span-label span {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 500;
}

.shadcn-span-bad-text {
  margin-top: 1rem;
}

/* Text Styles */
.shadcn-text-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
}

.shadcn-text-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 1rem;
  text-align: left;
  width: 100%;
}

.shadcn-text-input {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background-color: var(--background);
  padding: 0.75rem;
  font-size: var(--text-base);
  color: var(--foreground);
  transition: var(--transition);
}

.shadcn-text-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-text-input:hover {
  border-color: var(--primary);
}

.shadcn-text-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Textbox Styles */
.shadcn-textbox-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  position: relative;
}

/* Ensure fieldset inside textbox fills width (override browser default min-width: min-content) */
.shadcn-textbox-container fieldset {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shadcn-textbox-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.shadcn-textbox-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  width: 100%;
}

.shadcn-textbox-label {
  font-size: var(--text-base);
  color: var(--foreground);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.shadcn-textbox-input {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background-color: var(--background);
  padding: 0.75rem;
  font-size: var(--text-base);
  color: var(--foreground);
  transition: var(--transition);
  height: 2.5rem;
}

.shadcn-textbox-textarea {
  min-height: 6rem;
  resize: vertical;
  height: auto;  /* Override fixed height from .shadcn-textbox-input */
}

.shadcn-textbox-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-textbox-input:hover {
  border-color: var(--primary);
}

/* Remove bottom margin from last items in schema containers to fix excessive whitespace */
.shadcn-radio-options > .shadcn-radio-option:last-child,
.shadcn-multiselect-grid > .shadcn-multiselect-item:last-child,
.shadcn-likert-options > .shadcn-likert-option:last-child,
.shadcn-textbox-item:last-child {
  margin-bottom: 0;
}

/* Remove bottom margin from container elements themselves */
.shadcn-radio-options,
.shadcn-multiselect-grid,
.shadcn-likert-scale,
.shadcn-textbox-items {
  margin-bottom: 0;
}

/* Number Styles */
.shadcn-number-container {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
}

.shadcn-number-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 1rem;
  text-align: left;
  width: 100%;
}

.shadcn-number-input {
  display: flex;
  align-items: center;
  width: 100%;
}

.shadcn-number-field {
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background-color: var(--background);
  padding: 0 0.75rem;
  font-size: var(--text-base);
  color: var(--foreground);
  transition: var(--transition);
}

.shadcn-number-field:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.shadcn-number-field:hover {
  border-color: var(--primary);
}

/* Multirate Styles */
.shadcn-multirate-container {
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 1rem auto;
  max-width: 100%;
  overflow-x: auto;
  color: #374151;
}

.shadcn-multirate-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #f3f4f6;
}

.shadcn-multirate-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
}

.shadcn-multirate-table th,
.shadcn-multirate-table td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  font-size: var(--text-base);
}

.shadcn-multirate-table th {
  background-color: #f9fafb;
  font-weight: 500;
  color: #6b7280;
}

.shadcn-multirate-table thead th:first-child,
.shadcn-multirate-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  min-width: 180px;
  max-width: 300px;
}

.shadcn-multirate-table tbody tr:hover {
  background-color: #f9fafb;
}

.shadcn-multirate-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background-color: #fff;
  cursor: pointer;
  margin: 0 auto;
  vertical-align: middle;
  position: relative;
  transition: all 0.2s ease;
}

.shadcn-multirate-radio:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
}

.shadcn-multirate-radio:checked::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shadcn-multirate-radio:hover:not(:checked) {
  border-color: #3b82f6;
}

.shadcn-multirate-radio:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.shadcn-radio-cell {
  text-align: center;
}

/* Common Tooltip Styles */
[data-toggle="tooltip"] {
  position: relative;
  cursor: help;
}

/* Fieldset schema width override */
fieldset[schema] {
  width: fit-content;
  max-width: 100%;
  overflow: visible;
  border: none;
  padding: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .shadcn-card {
    min-height: 200px;
    max-height: calc(100vh - 160px);
  }

  .shadcn-card.media-annotation {
    min-height: 300px;
    max-height: calc(100vh - 140px);
  }

  .navbar-brand {
    font-size: 1rem !important;
  }

  .shadcn-multirate-table th,
  .shadcn-multirate-table td {
    padding: 0.5rem;
    font-size: var(--text-xs);
  }

  .shadcn-multirate-table thead th:first-child,
  .shadcn-multirate-table tbody td:first-child {
    min-width: 120px;
  }
}

/* Print styling */
@media print {
  .shadcn-multirate-container {
    margin: 0;
    width: 100%;
  }

  .shadcn-multirate-table {
    border: 1px solid #000;
  }

  .shadcn-multirate-table th,
  .shadcn-multirate-table td {
    border-bottom: 1px solid #000;
  }

  .shadcn-multirate-radio {
    border: 2px solid #000;
  }

  .shadcn-multirate-radio:checked {
    background-color: #000;
  }
}

.annotation-span {
  position: relative;
  display: inline;
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0 1px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #ffeaa7;
  line-height: 1.2em;
  vertical-align: baseline;
}

/* Overlap styling for spans that overlap with others */
.annotation-span.span-overlap {
  position: relative;
  display: inline-block;
  line-height: var(--overlap-height, 1.2em);
  /* Use padding instead of margin to maintain text baseline */
  padding-top: calc(var(--overlap-offset, 0em) * 0.5);
  padding-bottom: calc(var(--overlap-offset, 0em) * 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Ensure text stays at baseline */
  vertical-align: baseline;
}

/* Specific depth-based styling */
.annotation-span.overlap-depth-1 {
  background-color: rgba(255, 234, 167, 0.8);
  border-color: rgba(255, 193, 7, 0.3);
}

.annotation-span.overlap-depth-2 {
  background-color: rgba(255, 234, 167, 0.9);
  border-color: rgba(255, 193, 7, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.annotation-span.overlap-depth-3 {
  background-color: rgba(255, 234, 167, 1);
  border-color: rgba(255, 193, 7, 0.7);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}

.annotation-span.overlap-depth-4 {
  background-color: rgba(255, 234, 167, 1);
  border-color: rgba(255, 193, 7, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Ensure text container can handle overlapping elements */
#instance-text {
  position: relative;
  line-height: 1.4em;
  min-height: 2em;
  overflow: visible;
  padding-top: 28px; /* Space for span controls above first line */
}

/* Span overlays container must allow controls to render above */
#span-overlays {
  overflow: visible !important;
}

/* Adjust label positioning for overlapping spans - use absolute positioning */
.annotation-span.span-overlap .span-label {
  position: absolute;
  top: -25px;
  left: 0;
  z-index: calc(10 + var(--overlap-depth, 0));
}

/* Adjust delete button positioning for overlapping spans - use absolute positioning */
.annotation-span.span-overlap .span-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: calc(15 + var(--overlap-depth, 0));
}
.span-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 15;
  transition: all 0.2s;
}
.span-delete-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}
.annotation-span:hover .span-delete-btn {
  display: flex;
}
.span-label {
  position: absolute;
  top: -25px;
  left: 0;
  background: #333;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 10;
  pointer-events: none;
}
.annotation-span:hover .span-label {
  display: block;
}

/* Overlay spans should allow text selection to pass through */
.annotation-span.overlay-span {
  pointer-events: none;
}

/* But allow pointer events on the span itself for hovering */
.annotation-span.overlay-span:hover {
  pointer-events: auto;
}

/* Overlay span labels should always be visible */
.annotation-span.overlay-span .span-label {
  display: block !important;
  pointer-events: auto;
}

/* Overlay span delete buttons should always be clickable */
.annotation-span.overlay-span .span-delete-btn {
  pointer-events: auto;
}

.slider {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
}

/* Container styles */
.custom-slider-container {
  position: relative;
  width: 100%;
  padding: 20px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-top: 3.5rem;
}

/* Hide the actual input but keep it in the DOM for form submission */
.custom-slider-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  z-index: 3; /* Keep above other elements for interaction */
}

/* Custom track */
.custom-slider-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
}

/* Active portion of track */
.custom-slider-track-active {
  position: absolute;
  height: 100%;
  background-color: var(--primary);
  border-radius: 2px;
  left: 0;
}

/* Custom thumb */
.custom-slider-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.1s;
  color: white;
}

.custom-slider-thumb.dragging {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  cursor: grabbing;
}

/* Tick container */
.custom-slider-ticks {
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 12px;
}

/* Tick mark styles */
.custom-slider-tick {
  position: absolute;
  transform: translateX(-50%);
}

.custom-slider-tick-mark {
  width: 1px;
  height: 8px;
  background-color: #ccc;
}

.custom-slider-tick-mark.major {
  height: 12px;
  background-color: #999;
  width: 2px;
}

.custom-slider-tick-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #666;
  white-space: nowrap;
}

/* Slider title/legend */
.custom-slider-title {
  margin-bottom: 12px;
  font-weight: 500;
}

.custom-slider-container.focus {
  outline: 2px solid #7c3aed;
  border-radius: 4px;
}

.custom-slider-thumb {
  position: relative;
}

.annotation-form fieldset .slider-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.2s ease;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.custom-slider-thumb.dragging .slider-tooltip {
  opacity: 1;
}

.select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
}


/* ==================== AI SUGGESTION STYLES ==================== */

/* AI suggested label highlighting */
.ai-suggested-option {
  position: relative;
  border: 2px solid #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-radius: var(--radius);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
  animation: ai-pulse 2s ease-in-out infinite;
}

.ai-suggested-label {
  position: relative;
  font-weight: 600 !important;
  color: #92400e !important;
}

.ai-suggested {
  outline: 2px solid #f59e0b !important;
  outline-offset: 2px;
}

/* AI suggestion indicator (sparkle emoji) */
.ai-suggestion-indicator {
  font-size: 0.9em;
  vertical-align: middle;
  animation: ai-sparkle 1.5s ease-in-out infinite;
}

/* Pulse animation for highlighted options */
@keyframes ai-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
  }
}

/* Sparkle animation for the indicator */
@keyframes ai-sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}


/* ==================== OPTION HIGHLIGHTING STYLES ==================== */
/* LLM-based option highlighting: dims less-likely options */

/* Container indicator when AI highlighting is active (visual indicator removed) */
.ai-highlighting-active {
  /* Class kept for JavaScript state tracking but no visual styling */
}

/* Dimmed non-highlighted options */
.option-dimmed {
  opacity: var(--dim-opacity, 0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Brighten on hover to allow selection */
.option-dimmed:hover {
  opacity: 0.7;
  transform: scale(1.01);
}

/* Highlighted options remain fully visible */
.option-highlighted {
  opacity: 1;
  position: relative;
  transition: opacity 0.2s ease;
}

/* Optional: subtle background highlight for highlighted options */
.option-highlighted.shadcn-radio-option,
.option-highlighted.shadcn-checkbox-option,
.option-highlighted.option-item {
  background-color: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Ensure dimmed options are still clickable */
.option-dimmed input,
.option-dimmed label {
  cursor: pointer;
}


/* AI span overlay styles (for keyword highlighting) */
/* AI keyword overlay styles (AI-suggested highlights) */
.span-overlay-ai {
  pointer-events: none;
  z-index: var(--z-overlay-ai-keyword);
}

.span-overlay-ai .span-highlight-segment {
  pointer-events: auto;
  cursor: help;
}

/* Admin keyword highlight overlay styles */
.keyword-highlight-overlay {
  pointer-events: none;
  z-index: var(--z-overlay-admin-keyword);
}

.keyword-highlight-overlay .span-highlight-segment {
  pointer-events: auto;
  cursor: help;
  /* Keyword highlights use dashed border to distinguish from AI suggestions */
  border-style: dashed !important;
}

/* User-created span overlay styles */
.span-overlay-pure {
  z-index: var(--z-overlay-user-span);
}

/* Span controls (label + delete button) */
.span-controls {
  z-index: var(--z-overlay-controls);
}

/* Overlay tooltip */
.overlay-tooltip {
  z-index: var(--z-overlay-tooltip);
}

/* Tooltip styling for AI suggestions */
.tooltip.hint-tooltip {
  background-color: #fef3c7;
  color: #1f2937;
  border: 1px solid #f59e0b;
  border-radius: var(--radius);
  padding: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tooltip.hint-tooltip .tooltip-close {
  color: #92400e;
}

.tooltip.hint-tooltip .tooltip-close:hover {
  background-color: rgba(245, 158, 11, 0.2);
}

.tooltip.hint-tooltip .hint-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tooltip.hint-tooltip .content-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tooltip.hint-tooltip .content-item .label {
  font-weight: 600;
  color: #92400e;
  font-size: 11px;
  text-transform: uppercase;
}

.tooltip.hint-tooltip .content-item .value {
  color: #1f2937;
}

.tooltip.hint-tooltip .content-item .value.suggestion {
  font-weight: 600;
  color: #78350f;
  background-color: rgba(254, 243, 199, 0.8);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
}

/* Keyword tooltip styling */
.tooltip.keyword-tooltip {
  background-color: rgba(59, 130, 246, 0.95);
  color: white;
  border: 1px solid #3b82f6;
}

/* Rationale tooltip styling */
.tooltip.rationale-tooltip {
  background-color: #faf5ff;
  color: #1f2937;
  border: 1px solid #8b5cf6;
  padding: 0;
  max-width: 100%;
}

.tooltip.rationale-tooltip .tooltip-close {
  color: #5b21b6;
}

.tooltip.rationale-tooltip .tooltip-close:hover {
  background-color: rgba(139, 92, 246, 0.2);
}

.tooltip.rationale-tooltip .rationale-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tooltip.rationale-tooltip .rationale-header {
  font-weight: 600;
  color: #5b21b6;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
}

.tooltip.rationale-tooltip .rationale-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: var(--radius);
  border-left: 3px solid #8b5cf6;
}

.tooltip.rationale-tooltip .rationale-label {
  font-weight: 600;
  color: #5b21b6;
  font-size: 13px;
}

.tooltip.rationale-tooltip .rationale-reasoning {
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
}

/* =====================================================
   Dialogue / Multi-turn Annotation Styles
   ===================================================== */

/* =====================================================
   DIALOGUE/CONVERSATION ANNOTATION STYLES
   ===================================================== */

/* Base dialogue turn styling */
.dialogue-turn {
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-sm) 0;
  border-radius: var(--radius);
  line-height: 1.6;
  transition: background-color 0.2s ease;
}

/* Speaker name styling */
.dialogue-speaker {
  font-weight: 600;
  margin-right: 4px;
}

/* Alternating turn shading for readability */
.dialogue-turn-even {
  background-color: #f8fafc;
  border-left: 4px solid var(--primary, #6366f1);
}

.dialogue-turn-odd {
  background-color: #ffffff;
  border-left: 4px solid #e2e8f0;
}

/* Hover effect on dialogue turns */
.dialogue-turn:hover {
  background-color: #f1f5f9;
}

/* Speaker color palette - 6 distinct colors for speaker names */
.dialogue-speaker.speaker-color-0 { color: #4f46e5; } /* Indigo */
.dialogue-speaker.speaker-color-1 { color: #db2777; } /* Pink */
.dialogue-speaker.speaker-color-2 { color: #0d9488; } /* Teal */
.dialogue-speaker.speaker-color-3 { color: #d97706; } /* Amber */
.dialogue-speaker.speaker-color-4 { color: #7c3aed; } /* Violet */
.dialogue-speaker.speaker-color-5 { color: #0891b2; } /* Cyan */

/* Match left border color to speaker */
.dialogue-turn[data-speaker-index="0"] { border-left-color: #6366f1; }
.dialogue-turn[data-speaker-index="1"] { border-left-color: #ec4899; }
.dialogue-turn[data-speaker-index="2"] { border-left-color: #14b8a6; }
.dialogue-turn[data-speaker-index="3"] { border-left-color: #f59e0b; }
.dialogue-turn[data-speaker-index="4"] { border-left-color: #8b5cf6; }
.dialogue-turn[data-speaker-index="5"] { border-left-color: #06b6d4; }

/* Dark mode support for dialogue */
@media (prefers-color-scheme: dark) {
  .dialogue-turn.turn-even,
  .dialogue-turn-even {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .dialogue-turn.turn-odd,
  .dialogue-turn-odd {
    background-color: transparent;
    border-left-color: #334155;
  }

  .dialogue-turn:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Lighter speaker colors for dark mode */
  .dialogue-speaker.speaker-color-0 { color: #818cf8; }
  .dialogue-speaker.speaker-color-1 { color: #f472b6; }
  .dialogue-speaker.speaker-color-2 { color: #2dd4bf; }
  .dialogue-speaker.speaker-color-3 { color: #fbbf24; }
  .dialogue-speaker.speaker-color-4 { color: #a78bfa; }
  .dialogue-speaker.speaker-color-5 { color: #22d3ee; }
}

/* -----------------------------------------------------------------------
   THREADED DIALOGUE: reply indentation, timestamps, per-turn metadata chips

   Every decoration below is drawn with ::before/::after `content` or with
   padding driven by a custom property. None of it introduces a text node.

   That is a hard requirement, not a stylistic preference: span offsets are
   measured against the dialogue container's textContent, which the server
   reproduces in reconstruct_dialogue_dom_text() (displays/base.py) to slice
   the annotated substring. Pseudo-element content is not part of textContent,
   so this chrome is invisible to that calculation and every existing dialogue
   span task keeps byte-identical offsets. Do not convert any of these to real
   elements containing text.
   ----------------------------------------------------------------------- */

.dialogue-display-content.indent-replies .dialogue-turn {
  --turn-depth: 0;
  margin-left: calc(var(--turn-depth) * 22px);
  position: relative;
}

/* Vertical thread guide showing which turns share a parent. */
.dialogue-display-content.indent-replies.show-reply-lines
  .dialogue-turn[data-depth]:not([data-depth="0"])::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border, #e2e8f0);
  border-radius: 1px;
}

/* Depth badge, so nesting stays legible past the indent cap. */
.dialogue-display-content.indent-replies
  .dialogue-turn[data-depth]:not([data-depth="0"])::after {
  content: "↳ depth " attr(data-depth);
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted-foreground, #94a3b8);
  opacity: 0.65;
  pointer-events: none;
}

/* The focus turn of an utterance-level item: everything else is context. */
.dialogue-display-content .dialogue-turn[data-focus="true"] {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
}

.dialogue-display-content .dialogue-turn:not([data-focus="true"]) {
  /* Context turns read as secondary without becoming unreadable. */
  opacity: 1;
}

.dialogue-display-content:has(.dialogue-turn[data-focus="true"])
  .dialogue-turn:not([data-focus="true"]) {
  opacity: 0.72;
}

/* Timestamp and per-turn metadata, rendered as a single chrome line. */
.dialogue-display-content.show-timestamps .dialogue-turn[data-timestamp],
.dialogue-display-content.show-meta-chips .dialogue-turn[data-meta-chips] {
  padding-top: calc(var(--space-md, 12px) + 14px);
}

/* One absolutely-positioned chrome strip per turn carrying both signals.
   The attributes live on .dialogue-text because attr() can only read the
   attributes of the element its pseudo-element belongs to. */
.dialogue-display-content.show-timestamps .dialogue-turn[data-timestamp] > .dialogue-text::before,
.dialogue-display-content.show-meta-chips .dialogue-turn[data-meta-chips] > .dialogue-text::before {
  position: absolute;
  top: 6px;
  left: var(--space-lg, 16px);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 90px);
  pointer-events: none;
}

.dialogue-display-content.show-timestamps
  .dialogue-turn[data-timestamp] > .dialogue-text::before {
  content: attr(data-turn-timestamp);
}

.dialogue-display-content.show-meta-chips
  .dialogue-turn[data-meta-chips] > .dialogue-text::before {
  content: attr(data-turn-meta-chips);
}

.dialogue-display-content.show-timestamps.show-meta-chips
  .dialogue-turn[data-timestamp][data-meta-chips] > .dialogue-text::before {
  content: attr(data-turn-timestamp) "   ·   " attr(data-turn-meta-chips);
}

/* Highlight the parent of the hovered turn (wired in dialogue-threading.js). */
.dialogue-display-content .dialogue-turn.thread-parent-highlight {
  box-shadow: inset 3px 0 0 var(--primary, #6366f1);
  background-color: rgba(99, 102, 241, 0.06);
}

@media (prefers-color-scheme: dark) {
  .dialogue-display-content.indent-replies.show-reply-lines
    .dialogue-turn[data-depth]:not([data-depth="0"])::before {
    background: #334155;
  }

  .dialogue-display-content .dialogue-turn.thread-parent-highlight {
    background-color: rgba(129, 140, 248, 0.12);
  }
}

@media (max-width: 640px) {
  /* Deep threads must not push text off a narrow screen. */
  .dialogue-display-content.indent-replies .dialogue-turn {
    margin-left: calc(min(var(--turn-depth), 3) * 10px);
  }
}

/* Pairwise comparison layout */
.pairwise-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

.pairwise-cell {
  flex: 1;
  padding: 16px;
  background-color: var(--card, #ffffff);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 8px;
  box-shadow: var(--box-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}

.pairwise-cell:first-child {
  border-left: 3px solid #3b82f6;
}

.pairwise-cell:last-child {
  border-left: 3px solid #10b981;
}

/* For more than 2 items in comparison */
.pairwise-cell:nth-child(3) {
  border-left: 3px solid #f59e0b;
}

.pairwise-cell:nth-child(4) {
  border-left: 3px solid #ef4444;
}

/* =========================================
   Instance Display Styles
   ========================================= */

/* Main container for instance display */
.instance-display-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.instance-display-container.layout-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.instance-display-container.layout-vertical {
  flex-direction: column;
}

/* Individual display field container */
.display-field {
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--card, #ffffff);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: var(--radius);
}

/* The flex children are the per-field wrappers (.display-field or the
   .display-field-resizable wrapper), so size THOSE. flex-basis:0 +
   min-width:0 lets columns actually share the row; without it wide
   content (dialogue bubbles) pushes each past 50% and flex-wrap
   stacks them instead. */
.layout-horizontal > .display-field,
.layout-horizontal > .display-field-resizable {
  flex: 1 1 0;
  min-width: 0;
}

.layout-horizontal .display-field {
  min-width: 0;
}

.layout-horizontal .display-field .display-field-content {
  min-width: 0;
  overflow-x: auto;
}

/* Display field label — quiet caption, not a shout */
.display-field-label {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--muted-foreground, #71717a);
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: normal;
}

/* Display field content */
.display-field-content {
  line-height: 1.6;
}

/* Text display styles — primary content, typographically prominent */
.display-type-text .text-display-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--foreground);
}

.display-type-text .text-display-content.preserve-whitespace {
  white-space: pre-wrap;
}

.display-type-text .text-placeholder {
  color: var(--muted-foreground, #71717a);
  font-style: italic;
}

/* Span target text styling */
.span-target-field {
  position: relative;
}

/* Visual indicator for span-target fields */
.display-field[data-span-target="true"] {
  border-left: 3px solid var(--primary, #6e56cf);
  padding-left: 12px;
}

.display-field[data-span-target="true"] .display-field-label::after {
  content: " (click label, then highlight text)";
  font-size: var(--text-xs);
  font-weight: normal;
  color: var(--muted-foreground, #71717a);
  font-style: italic;
}

.span-target-field .text-display-content.span-target-text {
  /* Padding-top provides room for span labels that appear above highlighted text */
  padding-top: 24px;
  position: relative;
}

.span-target-field .text-content {
  position: relative;
  z-index: 1;
}

.span-target-field .span-overlays {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

/* Resizable display field container */
.display-field-resizable {
  resize: vertical;
  overflow: auto;
  min-height: 100px;
  max-height: 80vh;
}

.display-field-resizable .display-field-content {
  height: 100%;
  overflow: auto;
}

/* Resize handle indicator */
.display-field-resizable::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 50%, var(--border, #e4e4e7) 50%);
  pointer-events: none;
  opacity: 0.7;
  border-radius: 0 0 4px 0;
}

/* Resizable PDF and document displays */
.display-field-resizable .pdf-display,
.display-field-resizable .document-display {
  height: 100%;
  max-height: none;
  overflow: auto;
}

/* Ensure canvas containers adapt to resize */
.display-field-resizable .pdf-canvas-container,
.display-field-resizable .pdf-pages-container {
  height: calc(100% - 80px); /* Account for controls */
  overflow: auto;
}

/* Collapsible text container */
.collapsible-text-container {
  position: relative;
}

.collapsible-text-container .collapsible-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.collapsible-text-container .collapsible-label {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.collapsible-text-container .collapsible-toggle {
  font-size: var(--text-xs);
  padding: 2px 8px;
}

.collapsible-text-container .collapse-text-show,
.collapsible-text-container .collapse-text-hide {
  display: none;
}

.collapsible-text-container .collapsible-toggle[aria-expanded="true"] .collapse-text-hide {
  display: inline;
}

.collapsible-text-container .collapsible-toggle[aria-expanded="false"] .collapse-text-show {
  display: inline;
}

/* Image display styles */
.display-type-image {
  text-align: center;
}

.display-type-image .image-container,
.display-type-image .image-zoom-container {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.display-type-image .display-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.display-type-image .display-image.zoomable-image {
  cursor: zoom-in;
}

/* Image zoom controls */
.image-zoom-controls {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-zoom-container:hover .image-zoom-controls {
  opacity: 1;
}

.image-zoom-controls button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

/* Image placeholder and error */
.display-type-image .image-placeholder,
.display-type-image .image-error {
  padding: 32px;
  text-align: center;
  color: var(--muted-foreground, #71717a);
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
}

.display-type-image .image-error {
  color: var(--destructive, #ef4444);
  background: #fef2f2;
}

/* Display error message */
.display-error {
  padding: 16px;
  color: var(--destructive, #ef4444);
  background: #fef2f2;
  border: 1px solid var(--destructive, #ef4444);
  border-radius: 4px;
}

/* Video display styles */
.display-type-video {
  text-align: center;
}

.display-type-video .video-container {
  display: inline-block;
  max-width: 100%;
}

.display-type-video .display-video {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.display-type-video .video-placeholder,
.display-type-video .video-error {
  padding: 32px;
  text-align: center;
  color: var(--muted-foreground, #71717a);
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
}

.display-type-video .video-error {
  color: var(--destructive, #ef4444);
  background: #fef2f2;
}

/* Audio display styles */
.display-type-audio .audio-container {
  width: 100%;
}

.display-type-audio .display-audio {
  width: 100%;
}

.display-type-audio .audio-waveform {
  margin-bottom: 8px;
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
  padding: 8px;
}

.display-type-audio .waveform-canvas {
  width: 100%;
  height: 80px;
}

.display-type-audio .audio-placeholder,
.display-type-audio .audio-error {
  padding: 16px;
  text-align: center;
  color: var(--muted-foreground, #71717a);
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
}

.display-type-audio .audio-error {
  color: var(--destructive, #ef4444);
  background: #fef2f2;
}

/* Dialogue display styles */
.display-type-dialogue .dialogue-display-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.display-type-dialogue .dialogue-turn {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #e4e4e7);
}

.display-type-dialogue .dialogue-turn.turn-even {
  background: #f8f9fa;
}

.display-type-dialogue .dialogue-turn.turn-odd {
  background: var(--card, #ffffff);
}

/* Speaker-based colors */
.display-type-dialogue .dialogue-turn.speaker-0 {
  border-left: 3px solid #3b82f6;
}

.display-type-dialogue .dialogue-turn.speaker-1 {
  border-left: 3px solid #10b981;
}

.display-type-dialogue .dialogue-turn.speaker-2 {
  border-left: 3px solid #f59e0b;
}

.display-type-dialogue .dialogue-turn.speaker-3 {
  border-left: 3px solid #ef4444;
}

.display-type-dialogue .dialogue-turn.speaker-4 {
  border-left: 3px solid #8b5cf6;
}

.display-type-dialogue .dialogue-speaker {
  font-weight: 600;
  color: var(--foreground, #09090b);
  margin-right: 8px;
}

.display-type-dialogue .dialogue-text {
  color: var(--text-color, #374151);
  line-height: 1.6;
}

.display-type-dialogue .turn-number {
  color: var(--muted-foreground, #71717a);
  font-size: var(--text-xs);
  margin-right: 8px;
}

.display-type-dialogue .dialogue-placeholder {
  padding: 16px;
  text-align: center;
  color: var(--muted-foreground, #71717a);
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
  font-style: italic;
}

/* =====================================================
   PER-TURN RATING STYLES
   ===================================================== */

.per-turn-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.ptr-values {
  display: flex;
  gap: 4px;
}

.ptr-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ptr-value:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.ptr-value.ptr-selected {
  background: #8b5cf6;
  border-color: #7c3aed;
  color: white;
}

.ptr-label {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

/* Multi-dimension per-turn rating group */
.per-turn-rating-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.per-turn-rating-group .per-turn-rating {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ptr-schema-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  min-width: 80px;
}

/* Dark mode per-turn ratings */
@media (prefers-color-scheme: dark) {
  .per-turn-rating {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .per-turn-rating-group {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .ptr-schema-label {
    color: #94a3b8;
  }

  .ptr-value {
    border-color: #475569;
    background: #1e293b;
    color: #64748b;
  }

  .ptr-value:hover {
    border-color: #a78bfa;
    color: #a78bfa;
  }

  .ptr-value.ptr-selected {
    background: #7c3aed;
    border-color: #6d28d9;
    color: white;
  }

  .ptr-label {
    color: #64748b;
  }
}

/* Pairwise display styles */
.display-type-pairwise .pairwise-display-content {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.display-type-pairwise .pairwise-display-content.vertical-on-mobile {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .display-type-pairwise .pairwise-display-content.vertical-on-mobile {
    flex-direction: column;
  }

  .display-type-pairwise .pairwise-display-content.vertical-on-mobile .pairwise-cell {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.display-type-pairwise .pairwise-cell {
  padding: 16px;
  background-color: var(--card, #ffffff);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 8px;
  box-shadow: var(--box-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}

.display-type-pairwise .pairwise-cell:first-child {
  border-left: 3px solid #3b82f6;
}

.display-type-pairwise .pairwise-cell:nth-child(2) {
  border-left: 3px solid #10b981;
}

.display-type-pairwise .pairwise-cell:nth-child(3) {
  border-left: 3px solid #f59e0b;
}

.display-type-pairwise .pairwise-cell:nth-child(4) {
  border-left: 3px solid #ef4444;
}

.display-type-pairwise .pairwise-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--muted-foreground, #71717a);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.display-type-pairwise .pairwise-content {
  line-height: 1.6;
}

.display-type-pairwise .pairwise-empty {
  color: var(--muted-foreground, #71717a);
  font-style: italic;
}

.display-type-pairwise .pairwise-list {
  margin: 0;
  padding-left: 20px;
}

.display-type-pairwise .pairwise-placeholder {
  padding: 16px;
  text-align: center;
  color: var(--muted-foreground, #71717a);
  background: var(--muted, #f4f4f5);
  border-radius: 4px;
  font-style: italic;
}

/* ========================================
   PAIRWISE ANNOTATION SCHEMA STYLES
   ======================================== */

/* Pairwise annotation form container */
/* Pairwise items display container - created by JS */
.pairwise-items-display-container {
  margin-bottom: 1.5rem;
}

/* ========================================
   ANNOTATION FORM LAYOUT SYSTEM
   ======================================== */

/* CSS Custom Properties for Layout Configuration */
:root {
  --layout-columns: 2;
  --layout-gap: 1rem;
  --layout-row-gap: var(--layout-gap);
  --layout-align: start;
  --layout-content-align: left;
  --group-bg-odd: #fafafa;
  --group-bg-even: #f8f9fc;
  --group-padding: 0.5rem 0.75rem;
  --form-padding: 0.375rem 0.5rem;
}

/* Main Layout Container */
.annotation-forms-layout {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), 1fr);
  gap: var(--layout-row-gap) var(--layout-gap);
  align-items: var(--layout-align);
}

/* Legacy grid-based layout for annotation forms (backwards compatibility) */
.annotation-forms-grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns, 2), 1fr);
  gap: var(--layout-gap, 1rem);
  align-items: var(--layout-align, start);
}

/* Column Spans (1-6) for both layout containers */
.annotation-forms-layout .annotation-form[data-grid-columns="1"],
.annotation-forms-grid .annotation-form[data-grid-columns="1"] {
  grid-column: span 1;
}

.annotation-forms-layout .annotation-form[data-grid-columns="2"],
.annotation-forms-grid .annotation-form[data-grid-columns="2"] {
  grid-column: span 2;
}

.annotation-forms-layout .annotation-form[data-grid-columns="3"],
.annotation-forms-grid .annotation-form[data-grid-columns="3"] {
  grid-column: span 3;
}

.annotation-forms-layout .annotation-form[data-grid-columns="4"],
.annotation-forms-grid .annotation-form[data-grid-columns="4"] {
  grid-column: span 4;
}

.annotation-forms-layout .annotation-form[data-grid-columns="5"],
.annotation-forms-grid .annotation-form[data-grid-columns="5"] {
  grid-column: span 5;
}

.annotation-forms-layout .annotation-form[data-grid-columns="6"],
.annotation-forms-grid .annotation-form[data-grid-columns="6"] {
  grid-column: span 6;
}

/* Row Spans (2-4) */
.annotation-forms-layout .annotation-form[data-grid-rows="2"],
.annotation-forms-grid .annotation-form[data-grid-rows="2"] {
  grid-row: span 2;
}

.annotation-forms-layout .annotation-form[data-grid-rows="3"],
.annotation-forms-grid .annotation-form[data-grid-rows="3"] {
  grid-row: span 3;
}

.annotation-forms-layout .annotation-form[data-grid-rows="4"],
.annotation-forms-grid .annotation-form[data-grid-rows="4"] {
  grid-row: span 4;
}

/* Min/Max Width via CSS Custom Properties */
.annotation-forms-layout .annotation-form,
.annotation-forms-grid .annotation-form {
  min-width: var(--form-min-width, 0);
  max-width: var(--form-max-width, none);
}

/* Self Alignment Overrides */
.annotation-forms-layout .annotation-form[data-align-self="start"],
.annotation-forms-grid .annotation-form[data-align-self="start"] {
  align-self: start;
}

.annotation-forms-layout .annotation-form[data-align-self="center"],
.annotation-forms-grid .annotation-form[data-align-self="center"] {
  align-self: center;
}

.annotation-forms-layout .annotation-form[data-align-self="end"],
.annotation-forms-grid .annotation-form[data-align-self="end"] {
  align-self: end;
}

.annotation-forms-layout .annotation-form[data-align-self="stretch"],
.annotation-forms-grid .annotation-form[data-align-self="stretch"] {
  align-self: stretch;
}

/* CSS Order Support (for explicit ordering) */
.annotation-forms-layout .annotation-form[data-grid-order],
.annotation-forms-grid .annotation-form[data-grid-order] {
  /* Order value is set via JavaScript */
}

/* ========================================
   ANNOTATION FORM GROUPS
   ======================================== */

.annotation-form-group {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--group-padding);
  background-color: var(--card);
  margin-bottom: 0.25rem;
}

/* Subtle alternating background colors for visual distinction */
.annotation-form-group:nth-child(odd) {
  background-color: var(--group-bg-odd);
}

.annotation-form-group:nth-child(even) {
  background-color: var(--group-bg-even);
}

/* Per-group custom background color (set via inline style) */
.annotation-form-group[style*="--group-bg:"] {
  background-color: var(--group-bg) !important;
}

/* Main content display area (text/image/video to annotate) always white */
#task_layout,
#task_layout.shadcn-card {
  background-color: #ffffff !important;
}

/* Instance text container — the primary content, prominent and spacious */
.instance-text-container,
#instance-text {
  background-color: var(--light-bg) !important;
  border-color: transparent !important;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--foreground);
  padding: var(--space-lg) !important;
}

.annotation-form-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.375rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.annotation-form-group-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--heading-color);
  margin: 0;
}

.annotation-form-group-description {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: 0.125rem 0 0 0;
}

.annotation-form-group-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  transition: var(--transition);
}

.annotation-form-group-toggle:hover {
  background-color: var(--secondary);
  color: var(--foreground);
}

.annotation-form-group-toggle i {
  transition: transform 0.2s ease;
}

.annotation-form-group.collapsed .annotation-form-group-toggle i {
  transform: rotate(-90deg);
}

.annotation-form-group-content {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns, 2), 1fr);
  gap: var(--layout-gap, 0.75rem);
  width: 100%;
  align-items: start; /* Don't stretch forms vertically */
}

/* Forms inside groups should fill their grid cells horizontally but not stretch vertically */
.annotation-form-group-content .annotation-form,
.annotation-forms-layout .annotation-form {
  width: 100%;
  box-sizing: border-box;
  /* Keep forms at their natural height - don't stretch to fill grid row */
}

/* Reduce padding in forms within layout containers */
.annotation-forms-layout .shadcn-radio-container,
.annotation-forms-layout .shadcn-multiselect-container,
.annotation-forms-layout .shadcn-likert-container,
.annotation-forms-layout .shadcn-textbox-container,
.annotation-form-group-content .shadcn-radio-container,
.annotation-form-group-content .shadcn-multiselect-container,
.annotation-form-group-content .shadcn-likert-container,
.annotation-form-group-content .shadcn-textbox-container {
  padding: var(--form-padding);
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;  /* Don't center content vertically in layout mode */
}

/* Minimal fieldset padding within layout containers - container already has padding */
.annotation-forms-layout fieldset,
.annotation-form-group-content fieldset {
  padding: 0.125rem 0;  /* Reduced from 0.25rem 0.5rem to avoid double padding */
  margin: 0;
  text-align: var(--layout-content-align);
}

/* Ensure radio and multiselect options are left-aligned */
.annotation-form-group-content .shadcn-radio-options,
.annotation-form-group-content .shadcn-multiselect-grid,
.annotation-forms-layout .shadcn-radio-options,
.annotation-forms-layout .shadcn-multiselect-grid {
  align-items: flex-start;
  width: 100%;
}

.annotation-form-group.collapsed .annotation-form-group-content {
  display: none;
}

/* Pairwise forms wrapper - legacy flex fallback */
.pairwise-forms-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}

.annotation-form.pairwise {
  margin-bottom: 0;
  padding: 0.75rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.annotation-form.pairwise fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Hide "Text to Annotate" when pairwise items display is present */
.pairwise-has-items ~ #instance-text,
body.has-pairwise-display #instance-text {
  display: none;
}

/* Pairwise question title (compact) */
.pairwise-question {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--foreground);
  margin-bottom: 0.5rem;
  padding: 0;
}

/* Pairwise annotations container - compact layout */
.pairwise-annotations-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Side-by-side item display boxes - shown ONCE at top */
.pairwise-items-display {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.pairwise-item-wrapper {
  flex: 1;
  min-width: 0;
}

.pairwise-item-title {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
}

.pairwise-item-box {
  background-color: var(--light-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-lg);
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.7;
  color: var(--foreground);
  font-size: var(--text-lg);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Binary mode: Compact selection tiles */
.pairwise-selection-container {
  display: inline-flex;
  gap: 12px;
  margin: 8px 0;
  justify-content: flex-start;
  vertical-align: middle;
}

.pairwise-tile {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 150px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background-color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pairwise-tile:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pairwise-tile:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}

.pairwise-tile.selected {
  border-color: var(--primary);
  background-color: rgba(110, 86, 207, 0.05);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.15);
}

.pairwise-tile.selected::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.pairwise-tile-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--foreground);
}

.pairwise-tile-shortcut {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  background-color: var(--muted);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Extra options (tie/neither buttons) - inline with selection tiles */
.pairwise-extra-options {
  display: inline-flex;
  gap: 12px;
  margin-left: 12px;
  vertical-align: middle;
}

.pairwise-tie-btn,
.pairwise-neither-btn {
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  cursor: pointer;
  color: var(--foreground);
  font-size: var(--text-base);
  transition: all 0.2s ease;
}

.pairwise-tie-btn:hover,
.pairwise-neither-btn:hover {
  background: var(--muted);
  border-color: var(--primary);
}

.pairwise-tie-btn:focus,
.pairwise-neither-btn:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}

.pairwise-tie-btn.selected,
.pairwise-neither-btn.selected {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Scale mode: Rating slider widget - compact */
.pairwise-scale-widget {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--muted);
  border-radius: var(--radius);
  max-width: 600px;
}

.pairwise-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 12px;
}

.pairwise-scale-label-min {
  text-align: left;
}

.pairwise-scale-label-center {
  text-align: center;
}

.pairwise-scale-label-max {
  text-align: right;
}

.pairwise-scale-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #c4c4c8;  /* Darker gray for visible track */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.pairwise-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
}

.pairwise-scale-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.pairwise-scale-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pairwise-scale-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #c4c4c8;
  border-radius: 4px;
}

.pairwise-scale-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #c4c4c8;
  border-radius: 4px;
}

.pairwise-scale-value-display {
  margin-top: 8px;
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--primary);
}

.pairwise-scale-ticks {
  position: relative;
  width: 100%;
  height: 20px;
  margin-top: 4px;
}

.pairwise-scale-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--text-base);
  color: var(--muted-foreground);
}

.pairwise-scale-tick.center {
  font-weight: 600;
  color: var(--foreground);
}

/* ========================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ======================================== */

/* Mobile breakpoint (default 480px) - Collapse to single column */
@media (max-width: 480px) {
  .annotation-forms-layout,
  .annotation-forms-grid {
    --layout-columns: 1 !important;
  }

  .annotation-forms-layout .annotation-form[data-grid-columns],
  .annotation-forms-grid .annotation-form[data-grid-columns] {
    grid-column: span 1 !important;
  }

  .annotation-form-group-content {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet breakpoint (default 768px) - Halve column spans > 2 */
@media (min-width: 481px) and (max-width: 768px) {
  .annotation-forms-layout .annotation-form[data-grid-columns="3"],
  .annotation-forms-layout .annotation-form[data-grid-columns="4"],
  .annotation-forms-layout .annotation-form[data-grid-columns="5"],
  .annotation-forms-layout .annotation-form[data-grid-columns="6"],
  .annotation-forms-grid .annotation-form[data-grid-columns="3"],
  .annotation-forms-grid .annotation-form[data-grid-columns="4"],
  .annotation-forms-grid .annotation-form[data-grid-columns="5"],
  .annotation-forms-grid .annotation-form[data-grid-columns="6"] {
    grid-column: span 2;
  }
}

/* Responsive: Stack items vertically on tablet and mobile */
@media (max-width: 768px) {
  .annotation-forms-grid,
  .annotation-forms-layout,
  .pairwise-forms-wrapper {
    grid-template-columns: 1fr;
  }

  .annotation-forms-grid .annotation-form[data-grid-columns="2"],
  .annotation-forms-layout .annotation-form[data-grid-columns="2"] {
    grid-column: span 1;
  }

  .pairwise-items-display {
    flex-direction: column;
  }

  .pairwise-selection-container {
    flex-direction: column;
  }

  .pairwise-extra-options {
    display: flex;
    margin-left: 0;
    margin-top: 8px;
  }

  .annotation-form.pairwise {
    max-width: 100%;
    display: block;
  }

  .annotation-form-group-content {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SEGMENTATION MASK STYLES
   ======================================== */

/* Mask canvas overlay for segmentation - extends image-annotation.css */
.mask-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

.mask-canvas.active {
  pointer-events: auto;
  cursor: crosshair;
}

/* Brush size slider group - extends image-annotation.css */
.brush-size-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brush-size-group input[type="range"] {
  width: 80px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e9ecef;
  border-radius: 3px;
  outline: none;
}

.brush-size-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.brush-size-group input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.brush-size-group .brush-size-value {
  font-size: 13px;
  color: #495057;
  min-width: 24px;
  text-align: right;
}

/* ========================================
   BWS (Best-Worst Scaling) Styles
   ======================================== */

.bws-items-display {
  margin-bottom: 16px;
}

.bws-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bws-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bws-item-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  min-width: 24px;
  flex-shrink: 0;
}

.bws-item-text {
  font-size: var(--text-md);
  color: var(--foreground);
  line-height: 1.5;
}

.bws-description {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.bws-selection-section {
  margin-bottom: 12px;
}

.bws-selection-label {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--foreground);
}

.bws-best-label {
  color: #16a34a;
}

.bws-worst-label {
  color: #dc2626;
}

.bws-selection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bws-tile {
  flex: 0 0 auto;
  min-width: 60px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background-color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bws-tile:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bws-tile:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}
.bws-tile.bws-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

.bws-best-tile:hover {
  border-color: #16a34a;
}

.bws-worst-tile:hover {
  border-color: #dc2626;
}

.bws-best-tile.selected {
  border-color: #16a34a;
  background-color: rgba(22, 163, 74, 0.08);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.bws-worst-tile.selected {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.bws-tile-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--foreground);
}

.bws-tile-shortcut {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  background-color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.bws-validation-error {
  color: #dc2626;
  font-size: var(--text-base);
  margin-top: 8px;
  padding: 6px 12px;
  background-color: rgba(220, 38, 38, 0.06);
  border-radius: var(--radius);
  border: 1px solid rgba(220, 38, 38, 0.2);
}


/* =====================================================
   POTATO DESIGN SYSTEM - Layout & Navigation
   ===================================================== */

/* Container override — more horizontal breathing room */
body > .container-fluid {
  max-width: 960px;
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* ===== NAVBAR ===== */

.potato-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--primary-color);
  padding: 0 var(--space-lg);
  height: 56px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.potato-navbar .navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 1rem;
}

.potato-navbar .navbar-brand {
  flex-shrink: 0;
}

.potato-navbar .navbar-brand .task-name {
  font-weight: 600;
  color: var(--light-color);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}

.potato-navbar .navbar-brand .header-logo {
  height: 32px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.potato-navbar .navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.75rem;
}

.potato-navbar .navbar-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.potato-navbar .progress-section {
  color: var(--light-color);
  font-size: var(--text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.potato-navbar .progress-section .progress-label {
  opacity: 0.9;
  margin-right: 0.25rem;
}

.potato-navbar .instance-number-section {
  color: var(--light-color);
  font-size: var(--text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.potato-navbar .instance-number-section .instance-number-label {
  opacity: 0.9;
  margin-right: 0.25rem;
}

.potato-navbar .ibws-round-banner {
  color: var(--light-color);
  font-size: var(--text-sm);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.potato-navbar .ibws-round-banner .ibws-round-label {
  font-weight: 600;
}

.potato-navbar .ibws-round-banner .ibws-round-detail {
  opacity: 0.9;
}

.potato-navbar .nav-controls {
  display: flex;
  gap: 3px;
}

.potato-navbar .nav-control-btn {
  height: 38px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: var(--light-color);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--text-xs);
}

.potato-navbar .nav-control-btn:hover {
  background: rgba(255,255,255,0.22);
}

.potato-navbar .nav-control-btn:focus-visible,
.potato-navbar .goto-section input:focus-visible,
.potato-navbar .goto-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}

.potato-navbar .goto-section {
  display: flex;
  align-items: center;
  gap: 3px;
}

.potato-navbar .goto-section input {
  width: 48px;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--light-color);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-align: center;
  padding: 0 4px;
}

.potato-navbar .goto-section input::placeholder {
  color: rgba(255,255,255,0.35);
}

.potato-navbar .goto-section input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
}

.potato-navbar .goto-btn {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.88);
  color: var(--primary-color);
  border: none;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease;
}

.potato-navbar .goto-btn:hover {
  background: white;
}

.potato-navbar .navbar-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.potato-navbar .user-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.1);
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  border-radius: 999px;
  color: var(--light-color);
  font-size: var(--text-sm);
}

/* "Compact view" link to the card-stack interface (/pocket); hidden until
   device-routing.js confirms the task is pocket-capable. */
.potato-navbar .compact-view-link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: var(--light-color);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background 0.15s ease;
}
.potato-navbar .compact-view-link:hover {
  background: rgba(255,255,255,0.22);
  color: var(--light-color);
}
.potato-navbar .compact-view-link[hidden] { display: none; }

.potato-navbar .user-pill .username {
  font-weight: 500;
}

.potato-navbar .logout-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.88);
  color: var(--primary-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.potato-navbar .logout-btn:hover {
  background: white;
  color: var(--primary-color);
}

/* The Codebook link (annotation_codebook_url) is a sibling of these buttons in
   .navbar-end and had no rule of its own, so it fell back to the default anchor
   colour: link-blue on the purple navbar, effectively unreadable. It is the same
   kind of control, so it gets the same treatment. */
.potato-navbar .adjudicate-btn,
.potato-navbar .codebook-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.15);
  color: var(--light-color);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.15s ease;
}

.potato-navbar .adjudicate-btn:hover,
.potato-navbar .codebook-btn:hover {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* ===== NAVIGATION BUTTONS ===== */

.potato-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
}

/* ===== PROMO BANNER (HF Spaces demos) ===== */

.potato-promo-banner {
  margin-top: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.potato-promo-banner p {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-base);
  color: var(--text-color);
  line-height: 1.5;
}

.potato-promo-banner p:last-child {
  margin-bottom: 0;
}

.potato-promo-banner .promo-headline {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: var(--space-sm);
}

.potato-promo-banner .promo-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.potato-promo-banner .promo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.potato-promo-banner .promo-link-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.potato-promo-banner .promo-link-primary:hover {
  background: var(--secondary-color);
}

.potato-promo-banner .promo-link-outline {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

.potato-promo-banner .promo-link-outline:hover {
  background: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

/* ===== FOOTER ===== */

.potato-footer {
  padding: var(--space-md) 0 var(--space-lg);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  margin-top: var(--space-xs);
}

.potato-footer a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.potato-footer a:hover {
  color: var(--secondary-color);
}

.potato-footer .footer-sep {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--border);
}

/* ===== STANDALONE PAGES (login, done, error) ===== */

.potato-page-center {
  min-height: 100vh;
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.potato-page-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 2rem;
}

.potato-page-card-wide {
  max-width: 560px;
}

.potato-page-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.potato-page-icon i {
  font-size: 1.5rem;
}

.potato-page-icon-success {
  background: rgba(16, 185, 129, 0.1);
}

.potato-page-icon-success i {
  color: var(--success-color);
}

.potato-page-icon-error {
  background: rgba(239, 68, 68, 0.08);
}

.potato-page-icon-error i {
  color: var(--destructive);
}

.potato-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.potato-page-subtitle {
  color: var(--muted-foreground);
  font-size: var(--text-base);
  margin-bottom: 1.5rem;
}

/* ===== FORM STYLES FOR STANDALONE PAGES ===== */

.potato-form-group {
  margin-bottom: 1.15rem;
}

.potato-form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.3rem;
}

.potato-form-input {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.potato-form-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.12);
}

.potato-form-input::placeholder {
  color: var(--muted-foreground);
}

.potato-form-submit {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.15s ease;
}

.potato-form-submit:hover {
  background: var(--secondary-color);
}

.potato-form-submit:active {
  transform: scale(0.98);
}

/* Login page tabs */
.potato-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin: -0.5rem -0.5rem 1.5rem;
  padding: 0 0.5rem;
}

.potato-tab {
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--muted-foreground);
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  background: none;
  font-family: var(--font-sans);
}

.potato-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.potato-tab:hover:not(.active) {
  color: var(--foreground);
}

/* Alert styles for standalone pages */
.potato-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: var(--text-base);
  margin-bottom: 1rem;
}

.potato-alert-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--destructive);
}

.potato-alert-success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #065f46;
}

.potato-alert-info {
  background: rgba(110, 86, 207, 0.06);
  border: 1px solid rgba(110, 86, 207, 0.15);
  color: var(--primary);
}

/* ===== SCHEMA CONTAINER CONSISTENCY ===== */

/* Ensure consistent font across all annotation forms */
.annotation-form {
  font-family: var(--font-sans);
}

/* Annotation forms: responsive multi-column flow */
#annotation-forms {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#annotation-forms > .annotation_schema {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
}

/* Fit-content schemas flow side-by-side; full-width schemas break the row */
#annotation-forms .shadcn-radio-container,
#annotation-forms .shadcn-multiselect-container,
#annotation-forms .shadcn-likert-container {
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
}

/* These schemas need full width (textareas, span overlays, etc.) */
#annotation-forms .shadcn-textbox-container,
#annotation-forms .shadcn-span-container,
#annotation-forms .shadcn-number-container,
#annotation-forms .shadcn-select-container,
#annotation-forms .shadcn-ranking-container,
#annotation-forms .shadcn-card-sort-container,
#annotation-forms .shadcn-rubric-eval-container,
#annotation-forms .shadcn-error-span-container,
#annotation-forms .shadcn-text-edit-container,
#annotation-forms .shadcn-extractive-qa-container,
#annotation-forms .shadcn-conjoint-container,
#annotation-forms .shadcn-semantic-differential-container,
#annotation-forms .shadcn-constant-sum-container,
#annotation-forms .shadcn-vas-container {
  width: 100%;
}

/* ===== ANIMATION UTILITIES ===== */

@keyframes potato-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.potato-fade-in {
  animation: potato-fade-in 0.25s ease-out;
}

@keyframes potato-status-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ===== ANNOTATION INSTRUCTIONS BANNER ===== */

.annotation-instructions-banner {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.annotation-instructions-banner summary {
  padding: 0.625rem 1rem;
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  background: var(--secondary);
  color: var(--secondary-foreground);
  user-select: none;
}

.annotation-instructions-banner summary:hover {
  background: var(--accent);
}

.annotation-instructions-content {
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-color);
}

.annotation-instructions-content h4 {
  margin: 0.75rem 0 0.35rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--heading-color);
}

.annotation-instructions-content h4:first-child {
  margin-top: 0;
}

.annotation-instructions-content ul,
.annotation-instructions-content ol {
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding: 0;
}

.annotation-instructions-content li {
  margin-bottom: 0.2rem;
}

.annotation-instructions-content code {
  background: var(--muted);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: var(--text-sm);
}

.annotation-instructions-content strong {
  color: var(--primary);
}

/* ===== RESPONSIVE NAVBAR ===== */

@media (max-width: 900px) {
  .potato-navbar .navbar-center {
    gap: 0.5rem;
  }

  .potato-navbar .goto-section {
    display: none;
  }
}

@media (max-width: 700px) {
  .potato-navbar {
    height: auto;
    padding: 0.5rem 0.75rem;
  }

  .potato-navbar .navbar-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .potato-navbar .navbar-center {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .potato-nav .shadcn-button {
    font-size: var(--text-sm);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    height: 2.25rem;
  }
}

/* ==========================================
   Soft Label / Probability Distribution
   ========================================== */
.shadcn-soft-label-container {
  padding: 1rem;
}
.shadcn-soft-label-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.soft-label-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: var(--text-base);
  color: var(--muted-foreground);
}
.soft-label-total-indicator {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
}
.soft-label-total-indicator.valid {
  background: hsl(142 76% 36% / 0.12);
  color: hsl(142 76% 36%);
}
.soft-label-total-indicator.invalid {
  background: hsl(0 84% 60% / 0.12);
  color: hsl(0 84% 60%);
}
.soft-label-chart {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.soft-label-chart-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.25rem;
}
.soft-label-chart-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.15s ease;
  min-width: 2px;
}
.soft-label-chart-label {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.soft-label-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.soft-label-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.soft-label-label {
  min-width: 100px;
  font-size: var(--text-base);
  font-weight: 500;
}
.soft-label-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.soft-label-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.soft-label-value {
  min-width: 2.5rem;
  text-align: right;
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================
   Confidence-Calibrated Annotation
   ========================================== */
.shadcn-confidence-container {
  padding: 1rem;
}
.shadcn-confidence-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.confidence-likert-scale {
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
}
.confidence-likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  cursor: pointer;
}
.confidence-radio {
  display: none;
}
.confidence-likert-button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  color: var(--muted-foreground);
  transition: all 0.15s ease;
}
.confidence-likert-option:hover .confidence-likert-button {
  border-color: var(--primary);
}
.confidence-radio:checked + .confidence-likert-button,
.confidence-radio:checked ~ .confidence-likert-button {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.confidence-likert-label {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.3;
}
.confidence-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.confidence-slider-label-left,
.confidence-slider-label-right {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.confidence-slider-track-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.confidence-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
}
.confidence-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.confidence-slider-value {
  font-size: var(--text-base);
  font-weight: 600;
  min-width: 2rem;
  text-align: center;
}

/* ==========================================
   Constant Sum / Points Allocation
   ========================================== */
.shadcn-constant-sum-container {
  padding: 1rem;
}
.shadcn-constant-sum-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.constant-sum-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: var(--text-base);
}
.constant-sum-allocated.valid,
.constant-sum-remaining.valid {
  color: hsl(142 76% 36%);
}
.constant-sum-allocated.over,
.constant-sum-remaining.over {
  color: hsl(0 84% 60%);
}
.constant-sum-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.constant-sum-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.constant-sum-label {
  min-width: 120px;
  font-size: var(--text-base);
  font-weight: 500;
}
.constant-sum-number {
  width: 80px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  text-align: center;
}
.constant-sum-number:focus {
  outline: none;
  border-color: var(--ring, #09090b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring, #09090b) 20%, transparent);
}
.constant-sum-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
}
.constant-sum-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.constant-sum-value {
  min-width: 2rem;
  text-align: right;
  font-size: var(--text-base);
  font-weight: 600;
}

/* ==========================================
   Semantic Differential
   ========================================== */
.shadcn-semantic-differential-container {
  padding: 1rem;
}
.shadcn-semantic-differential-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 1rem;
}
.semantic-differential-matrix {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.semantic-differential-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.semantic-differential-pole {
  min-width: 80px;
  font-size: var(--text-base);
  font-weight: 500;
}
.semantic-differential-left {
  text-align: right;
}
.semantic-differential-right {
  text-align: left;
}
.semantic-differential-scale {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}
.semantic-differential-point {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.semantic-differential-radio {
  display: none;
}
.semantic-differential-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--muted-foreground);
  background: var(--background);
  cursor: pointer;
  transition: all 0.15s ease;
}
.semantic-differential-button:hover {
  border-color: var(--foreground);
  background: var(--secondary);
}
.semantic-differential-button.center {
  width: 1.25rem;
  height: 1.25rem;
  border-color: var(--gray-color);
}
.semantic-differential-radio:checked + .semantic-differential-button {
  border-color: var(--foreground);
  background: var(--foreground);
}

/* ==========================================
   Ranking / Drag-and-Drop
   ========================================== */
.shadcn-ranking-container {
  padding: 1rem;
}
.shadcn-ranking-container fieldset,
.shadcn-ranking-container fieldset[schema] {
  width: 100% !important;
  min-width: 100% !important;
}
.shadcn-ranking-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.ranking-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.ranking-item:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.ranking-item.dragging {
  opacity: 0.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: scale(1.02);
}
.ranking-item.drag-over {
  border-color: var(--primary);
}
.ranking-handle {
  color: var(--muted-foreground);
  font-size: var(--text-base);
  cursor: grab;
}
.ranking-rank {
  min-width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
}
.ranking-label {
  flex: 1;
  font-size: var(--text-base);
}
.ranking-buttons {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ranking-up, .ranking-down {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  color: var(--muted-foreground);
  padding: 0 0.25rem;
  line-height: 1;
}
.ranking-up:hover, .ranking-down:hover {
  color: var(--foreground);
}

/* ==========================================
   Range Slider / Dual-Thumb
   ========================================== */
.shadcn-range-slider-container {
  padding: 1rem;
}
.shadcn-range-slider-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.range-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.range-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.range-slider-track {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 18px 10px;
  cursor: pointer;
}
.range-slider-fill {
  position: absolute;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  pointer-events: none;
  top: 0;
}
.range-slider-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
  touch-action: none;
}
.range-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}
.range-slider-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.range-slider-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  font-weight: 600;
}
.range-slider-val-sep {
  color: var(--muted-foreground);
}

/* ==========================================
   Hierarchical Multi-Label Selection
   ========================================== */
.shadcn-hierarchical-multiselect-container {
  padding: 1rem;
}
.shadcn-hierarchical-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.hier-search-box {
  margin-bottom: 0.75rem;
}
.hier-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
.hier-search-input:focus {
  outline: none;
  border-color: var(--ring, #09090b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring, #09090b) 20%, transparent);
}
.hier-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  min-height: 0;
}
.hier-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  background: var(--primary);
  color: #ffffff !important;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.hier-tree {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
}
.hier-node {
  margin-left: 0;
}
.hier-node .hier-node {
  margin-left: 1.25rem;
}
.hier-node-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0;
  line-height: 1;
}
.hier-toggle {
  cursor: pointer;
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--muted-foreground);
  user-select: none;
  flex-shrink: 0;
}
.hier-toggle:hover {
  color: var(--foreground);
}
.hier-toggle-placeholder {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.hier-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: var(--text-base);
}
.hier-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}
.hier-label-text {
  user-select: none;
}

/* Tooltip marker for taxonomy presets (e.g. MAST failure modes). */
.hier-info {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--muted-foreground, #71717a);
  font-size: 0.85em;
  cursor: help;
  /* Full token color (~4.6:1) meets WCAG 1.4.11 non-text contrast; no opacity dimming. */
}
.hier-info:hover {
  color: var(--foreground, #18181b);
}
.hier-info:focus-visible {
  outline: 2px solid var(--ring, #6e56cf);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Text Schema Enhancements (rationale/justification features)
   ============================================================ */
.shadcn-textbox-target-grouped {
  margin-top: -0.5rem;
  border-top: none;
  padding-top: 0.25rem;
}
.shadcn-textbox-collapsible-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shadcn-textbox-collapsible-toggle:hover {
  color: var(--primary);
}
.shadcn-textbox-collapse-icon {
  display: inline-block;
  transition: transform 0.2s;
  font-size: var(--text-xs);
}
.shadcn-textbox-expanded .shadcn-textbox-collapse-icon {
  transform: rotate(90deg);
}
.shadcn-textbox-collapsible-body {
  display: none;
  overflow: hidden;
}
.shadcn-textbox-expanded .shadcn-textbox-collapsible-body {
  display: block;
}
.shadcn-textbox-char-counter {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}
.shadcn-textbox-char-counter.char-count-met {
  color: var(--primary);
}
.shadcn-textbox-char-counter.char-count-unmet {
  color: hsl(0 84.2% 60.2%);
}

/* ============================================================
   Visual Analog Scale (VAS)
   ============================================================ */
.shadcn-vas-container {
  padding: 1rem;
}
.shadcn-vas-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.vas-scale-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vas-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  padding: 0 0.25rem;
}
.vas-track-container {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
.vas-track-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--border);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.vas-input {
  position: relative;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 1;
  height: 40px;
  margin: 0;
  cursor: pointer;
}
.vas-input::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.vas-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  margin-top: -7px;
  cursor: grab;
}
.vas-input::-moz-range-track {
  height: 2px;
  background: transparent;
  border: none;
}
.vas-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: grab;
}
.vas-value-display {
  text-align: center;
  font-size: var(--text-base);
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* ============================================================
   Extractive QA
   ============================================================ */
.shadcn-extractive-qa-container {
  padding: 1rem;
}
.shadcn-eqa-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.eqa-question-box {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.eqa-question-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--primary);
  margin-right: 0.5rem;
}
.eqa-question-text {
  font-size: var(--text-md);
}
.eqa-passage-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  line-height: 1.7;
  font-size: var(--text-md);
  cursor: text;
  user-select: text;
  min-height: 60px;
}
.eqa-highlight {
  border-radius: 3px;
  padding: 1px 2px;
}
.eqa-answer-display {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--muted);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
.eqa-answer-label {
  font-weight: 600;
  margin-right: 0.5rem;
}
.eqa-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.eqa-clear-btn, .eqa-unanswerable-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.eqa-clear-btn:hover, .eqa-unanswerable-btn:hover {
  background: var(--muted);
}
.eqa-unanswerable-active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ============================================================
   Rubric Evaluation
   ============================================================ */
.shadcn-rubric-eval-container {
  padding: 1rem;
}
.shadcn-rubric-eval-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.rubric-table-wrapper {
  overflow-x: auto;
}
.rubric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.rubric-table th, .rubric-table td {
  border: 1px solid var(--border);
  padding: 0.5rem;
  text-align: center;
}
.rubric-criterion-header {
  text-align: left !important;
  font-weight: 600;
  background: var(--muted);
  min-width: 150px;
}
.rubric-scale-header {
  font-weight: 600;
  background: var(--muted);
  font-size: var(--text-sm);
  min-width: 80px;
}
.rubric-scale-number {
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.rubric-criterion-cell {
  text-align: left !important;
}
.rubric-criterion-name {
  font-weight: 500;
  text-transform: capitalize;
}
.rubric-criterion-desc {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}
.rubric-radio-cell {
  cursor: pointer;
}
.rubric-radio {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.rubric-overall-row {
  background: var(--muted);
  font-weight: 600;
}
.rubric-criterion-row:hover {
  background: hsl(210 40% 98%);
}

/* ============================================================
   Text Edit / Post-Edit
   ============================================================ */
.shadcn-text-edit-container {
  padding: 1rem;
}
.shadcn-text-edit-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.text-edit-source-block {
  margin-bottom: 0.75rem;
}
.text-edit-source-label, .text-edit-editor-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.text-edit-source-text {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--muted);
  font-size: var(--text-base);
  line-height: 1.5;
  white-space: pre-wrap;
}
.text-edit-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
}
.text-edit-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent);
}
.text-edit-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.text-edit-diff-display {
  margin-top: 0.75rem;
}
.text-edit-diff-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.text-edit-diff-content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 2rem;
}
.text-edit-diff-same {
  color: inherit;
}
.text-edit-diff-del {
  background: hsl(0 100% 95%);
  color: hsl(0 84.2% 40%);
  text-decoration: line-through;
}
.text-edit-diff-ins {
  background: hsl(120 100% 95%);
  color: hsl(120 50% 30%);
}
.text-edit-controls {
  margin-top: 0.5rem;
}
.text-edit-reset-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-sm);
  cursor: pointer;
}
.text-edit-reset-btn:hover {
  background: var(--muted);
}

/* ============================================================
   Trajectory Correction / Editing (trajectory_edit)
   ============================================================ */
.trajectory-edit-container {
  padding: 1rem;
}
.trajedit-title {
  font-size: var(--text-md);
  font-weight: 600;
}
.trajedit-summary {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--muted);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.trajedit-summary strong {
  color: var(--foreground);
}
.trajedit-step-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  background: var(--background);
}
.trajedit-final-card {
  border-left: 3px solid hsl(142 50% 45%);
}
.trajedit-step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.trajedit-step-number {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.trajedit-final-label {
  color: hsl(142 50% 35%);
}
.trajedit-edited-flag {
  font-size: var(--text-sm);
  color: hsl(28 90% 32%);
  font-weight: 600;
}
/* Non-color cue (in addition to the flag) that a field/answer was edited. */
.trajedit-field-block.trajedit-edited {
  border-left: 3px solid hsl(28 90% 45%);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}
.trajedit-step-card.trajedit-edited.trajedit-final-card {
  border-left-color: hsl(28 90% 45%);
}
.trajedit-step-thought {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.trajedit-thought-label {
  font-weight: 600;
}
.trajedit-field-block {
  margin-top: 0.6rem;
}
.trajedit-field-label {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trajedit-original {
  font-size: var(--text-sm);
  background: var(--muted);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.trajedit-original-label {
  font-weight: 600;
  color: var(--muted-foreground);
}
.trajedit-editor-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.trajedit-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  resize: vertical;
  max-height: 400px;
  overflow-y: auto;
}
.trajedit-textarea:focus {
  outline: 2px solid var(--ring, hsl(215 90% 60%));
  outline-offset: 1px;
  border-color: transparent;
}
/* Tool/action fields are code-like — monospace for precise editing & diffing. */
.trajedit-mono,
.trajedit-mono .trajedit-original-text {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-sm);
}
.trajedit-stats {
  display: flex;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-top: 0.35rem;
}
.trajedit-diff {
  margin-top: 0.4rem;
}
/* Only show the diff once a field actually changed (avoids an empty
   "Changes:" box on untouched fields). .trajedit-edited is toggled on the
   field block / final card by onEdit. */
.trajedit-diff {
  display: none;
}
.trajedit-edited .trajedit-diff {
  display: block;
}
.trajedit-diff-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.2rem;
}
.trajedit-diff-content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  min-height: 1.75rem;
}
.trajedit-diff-same { color: inherit; }
.trajedit-diff-del {
  background: hsl(0 100% 95%);
  color: hsl(0 84.2% 40%);
  text-decoration: line-through;
}
.trajedit-diff-ins {
  background: hsl(120 100% 95%);
  color: hsl(120 50% 30%);
}
.trajedit-reason-block {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trajedit-reason-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
}
.trajedit-reason {
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  font-size: var(--text-sm);
}
.trajedit-reset-btn {
  margin-top: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-sm);
  cursor: pointer;
}
.trajedit-reset-btn:hover {
  background: var(--muted);
}
.trajedit-no-steps {
  padding: 1rem;
  color: var(--muted-foreground);
  font-style: italic;
}

/* ============================================================
   LLM-Judge inline suggestion (judge ↔ human alignment)
   ============================================================ */
.judge-suggestion {
  border: 1px solid var(--border);
  border-left: 3px solid hsl(265 50% 55%);
  border-radius: var(--radius);
  background: var(--muted);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.9rem;
}
.judge-suggestion-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.judge-suggestion-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.judge-badge-icon { color: hsl(265 45% 45%); font-size: 1.1em; }
.judge-suggestion-label { font-size: var(--text-sm); }
.judge-suggested-value {
  font-weight: 700;
  background: hsl(265 60% 92%);
  color: hsl(265 50% 32%);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius);
}
.judge-schema-name { color: var(--muted-foreground); }
.judge-confidence { font-size: var(--text-sm); color: var(--muted-foreground); }
.judge-running {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(265 40% 40%);
  white-space: nowrap;
}
.judge-accept-btn { font-size: var(--text-sm); padding: 0.3rem 0.7rem; }
.judge-reasoning { margin-top: 0.4rem; }
.judge-reasoning summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.judge-reasoning p { margin: 0.4rem 0 0; font-size: var(--text-sm); }

/* ============================================================
   Signal-based triage flag (why this item was prioritized)
   ============================================================ */
.triage-flag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Amber accent — a queue-priority cue, not an error. The leading glyph +
     the word "Prioritized" carry meaning without relying on colour alone. */
  border: 1px solid hsl(38 70% 80%);
  border-left: 3px solid hsl(32 85% 45%);
  border-radius: var(--radius);
  background: hsl(40 80% 96%);
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.9rem;
}
.triage-flag-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  /* AA: white-on-disc clears 4.5:1 at this depth (was hsl(32 85% 45%) ≈ 3.2:1). */
  background: hsl(30 90% 37%);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
.triage-flag-text { font-size: var(--text-sm); color: hsl(28 60% 28%); }
.triage-flag-reason { font-weight: 700; }

/* ============================================================
   Error Span with Typed Severity
   ============================================================ */
.shadcn-error-span-container {
  padding: 1rem;
}
.shadcn-error-span-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.error-span-text-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  line-height: 1.7;
  font-size: var(--text-md);
  cursor: text;
  user-select: text;
  min-height: 60px;
}
.error-span-marked {
  border-radius: 2px;
  padding: 1px 2px;
  cursor: pointer;
}
.error-span-pending {
  background: hsl(210 100% 90%);
  border-bottom: 2px dashed hsl(210 100% 50%);
  border-radius: 2px;
  padding: 1px 2px;
}
.error-span-popup-selection {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.5rem;
  background: var(--muted);
  border-radius: var(--radius);
  word-break: break-word;
}
.error-span-sev-minor {
  background: hsl(45 100% 90%);
  border-bottom: 2px solid hsl(45 100% 50%);
}
.error-span-sev-major {
  background: hsl(25 100% 90%);
  border-bottom: 3px solid hsl(25 100% 50%);
}
.error-span-sev-critical {
  background: hsl(0 100% 90%);
  border-bottom: 4px solid hsl(0 84.2% 60.2%);
}
.error-span-score {
  margin-top: 0.75rem;
  font-size: var(--text-base);
  color: var(--foreground);
}
.error-span-popup {
  position: relative;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--background);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.error-span-popup-header {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 0.75rem;
}
.error-span-popup-field {
  margin-bottom: 0.5rem;
}
.error-span-popup-field label {
  font-size: var(--text-sm);
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}
.error-span-type-select {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
.error-span-severity-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.error-span-severity-option {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-base);
  cursor: pointer;
}
.error-span-popup-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.error-span-popup-save, .error-span-popup-cancel {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--border);
}
.error-span-popup-save {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.error-span-popup-cancel {
  background: var(--background);
}
.error-span-list {
  margin-top: 0.75rem;
}
.error-span-list-header {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.error-span-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.error-span-list-text {
  flex: 1;
  font-style: italic;
}
.error-span-list-type {
  font-weight: 500;
}
.error-span-list-severity {
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.error-span-list-empty {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  font-style: italic;
}
.error-span-remove-btn {
  background: none;
  border: none;
  color: hsl(0 84.2% 60.2%);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* ============================================================
   Card Sort / Grouping
   ============================================================ */
.shadcn-card-sort-container {
  padding: 1rem;
}
.shadcn-card-sort-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.card-sort-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
  min-height: 200px;
}
.card-sort-source {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.card-sort-source-header {
  background: var(--muted);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--border);
}
.card-sort-source-items {
  padding: 0.5rem;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.card-sort-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-content: flex-start;
}
.card-sort-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 180px;
  flex-shrink: 0;
}
.card-sort-group-header {
  background: var(--muted);
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--border);
}
.card-sort-group-name {
  font-weight: 600;
  flex: 1;
}
.card-sort-group-count {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  background: var(--background);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
.card-sort-group-items {
  padding: 0.5rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.card-sort-card {
  padding: 0.4rem 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.card-sort-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.card-sort-dragging {
  opacity: 0.5;
  transform: scale(0.95);
}
.card-sort-drag-over {
  background: var(--muted) !important;
  border-color: var(--primary) !important;
}
.card-sort-new-group {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.card-sort-new-group-input {
  flex: 1;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
}
.card-sort-new-group-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.card-sort-new-group-btn:hover {
  background: var(--muted);
}
.card-sort-remove-group {
  background: none;
  border: none;
  color: hsl(0 84.2% 60.2%);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

/* ============================================================
   Discrete Choice / Conjoint Analysis
   ============================================================ */
.shadcn-conjoint-container {
  padding: 1rem;
}
.shadcn-conjoint-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.conjoint-profiles {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.conjoint-profile-card {
  flex: 1;
  min-width: 200px;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.conjoint-profile-card:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}
.conjoint-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.conjoint-profile-header {
  background: var(--muted);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: var(--text-base);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.conjoint-profile-table {
  width: 100%;
  border-collapse: collapse;
}
.conjoint-attr-row td {
  padding: 0.4rem 0.75rem;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--border);
}
.conjoint-attr-name {
  font-weight: 500;
  color: var(--muted-foreground);
  width: 40%;
}
.conjoint-attr-value {
  font-weight: 400;
}
.conjoint-profile-select {
  padding: 0.75rem;
  text-align: center;
}
.conjoint-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--text-base);
}
.conjoint-radio {
  accent-color: var(--primary);
}
.conjoint-none-option {
  margin-top: 0.75rem;
  padding: 0.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.conjoint-none-label {
  color: var(--muted-foreground);
}

/* ============================================================
   Batch 2 Polish — cross-schema refinements
   ============================================================ */

/* --- Card Sort: better drop zones and card depth --- */
.card-sort-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card-sort-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.card-sort-group-items:empty::before {
  content: "Drop items here";
  display: block;
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-style: italic;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  margin: 0.25rem;
}
.card-sort-group-items {
  min-height: 80px;
}

/* --- Conjoint: card depth and hover --- */
.conjoint-profile-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.conjoint-profile-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- Error Span: selection hint --- */
.error-span-text-container::after {
  content: "";
  display: block;
}
.error-span-text-container:not(:empty)::before {
  content: "";
}
.error-span-hint {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-style: italic;
  margin-top: 0.5rem;
}

/* --- Error Span: severity badge colors in error list --- */
.error-span-list-severity.error-span-sev-minor {
  background: hsl(45 100% 90%);
  color: hsl(45 80% 30%);
}
.error-span-list-severity.error-span-sev-major {
  background: hsl(25 100% 90%);
  color: hsl(25 80% 30%);
}
.error-span-list-severity.error-span-sev-critical {
  background: hsl(0 100% 92%);
  color: hsl(0 84% 40%);
}

/* --- Extractive QA: passage background hint --- */
.eqa-passage-container {
  background: var(--background);
  transition: background 0.15s;
}
.eqa-passage-container:hover {
  background: hsl(60 100% 98%);
}

/* --- Text Edit: diff section hidden when empty --- */
.text-edit-diff-content:empty::before {
  content: "Make edits above to see changes";
  color: var(--muted-foreground);
  font-style: italic;
  font-size: var(--text-sm);
}

/* ===== POLISH PASS ===== */

/* "Text to Annotate:" heading — quiet label, not a shout */
.instance-text-heading {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0.375rem;
}

/* Space between instance text and annotation forms — generous separation between reading and annotating */
#main-content > .mb-4 {
  margin-bottom: var(--space-xl) !important;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

/* Annotation form schemas — moderate gap, tighter within groups */
#annotation-forms {
  gap: var(--space-lg);
}
#annotation-forms > .annotation_schema {
  gap: var(--space-md);
}

/* Radio/checkbox label hover state for better interaction feedback */
.annotation-form fieldset label:has(input[type="radio"]),
.annotation-form fieldset label:has(input[type="checkbox"]) {
  padding: 0.25rem 0.375rem;
  margin-left: -0.375rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.annotation-form fieldset label:has(input[type="radio"]):hover,
.annotation-form fieldset label:has(input[type="checkbox"]):hover {
  background-color: #f5f3ff;
}

/* Keybinding badges — more subtle, less visual weight */
.keybinding-badge,
.shadcn-multiselect-key {
  opacity: 0.55;
  font-size: var(--text-xs);
  padding: 0.05rem 0.3rem;
  transition: opacity 0.15s ease;
}
.annotation-form fieldset label:hover .keybinding-badge,
.annotation-form fieldset label:hover .shadcn-multiselect-key {
  opacity: 0.85;
}

/* Tile button hover — subtle lift */
.shadcn-radio-tile:hover,
.shadcn-bws-tile:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  transition: all 0.15s ease;
}

/* Multirate table radio circles — more visible */
.shadcn-multirate-table input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
}

/* Focus-visible for all interactive annotation elements */
.annotation-form input:focus-visible,
.annotation-form textarea:focus-visible,
.annotation-form select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

/* Smooth transitions on all form cards */
.annotation-form {
  transition: box-shadow 0.15s ease;
}

/* NOTE: there used to be a blanket reset here —
 *
 *   #annotation-forms > .annotation_schema > .annotation-form {
 *     border-left: none; padding-left: 0; }
 *
 * — described as "clean presentation, no uniform border". Nothing gives a plain
 * .annotation-form a left border or left padding to remove, so the rule had no
 * upside; what it did have was an id in its selector, which let it outrank every
 * schema container's own card. `.event-annotation-container`,
 * `.audio-annotation-container`, `.span-link-container`, `.mde-container` and the
 * `.shadcn-*-container` family all declare a border and shorthand padding, and
 * this stripped the LEFT side of both, leaving panels bordered on three sides
 * with their content flush against the missing edge. It also erased the left
 * edge of the red `.annotation-form.required-unfilled` outline, so the
 * "please answer this" affordance was visibly broken on every schema. */

/* Event annotation is read together with the span schema it references — the
 * labels create the entities, the panel wires them into events. Left to the
 * default flow the label box takes the full row (see .shadcn-span-container in
 * the full-width list) and the event panel lands underneath it in a narrow
 * column, so the two halves of one task are never on screen together. Pair them
 * into two columns instead; flex-wrap still stacks them on a narrow viewport. */
#annotation-forms > .annotation_schema:has(.event-annotation-container)
  > .shadcn-span-container,
#annotation-forms > .annotation_schema:has(.event-annotation-container)
  > .event-annotation-container {
  flex: 1 1 340px;
  width: auto;
  max-width: none;
  min-width: 0;
}

/* Annotation schema description text (below legend) — styled as help text */
.annotation-form fieldset .schema-description,
.annotation-form fieldset .schema-help-text {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  margin-top: -0.25rem;
  margin-bottom: 0.625rem;
  line-height: 1.5;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shadcn-radio-tile:hover,
  .shadcn-bws-tile:hover {
    transform: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   Trajectory Evaluation
   ========================================================= */
.trajectory-eval-container {
  max-width: 100%;
}

.traj-eval-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.traj-score {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--muted, 210 40% 96%));
  border-radius: 0.375rem;
  display: inline-block;
}

.traj-steps-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.traj-step-card {
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--card, 0 0% 100%));
}

.traj-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.traj-step-number {
  font-weight: 600;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
}

.traj-step-status {
  font-size: var(--text-xs);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  text-transform: capitalize;
}

.traj-status-correct {
  background: hsl(142 76% 90%);
  color: hsl(142 76% 30%);
}

.traj-status-incorrect {
  background: hsl(0 84% 92%);
  color: hsl(0 84% 35%);
}

.traj-status-partially_correct {
  background: hsl(38 92% 90%);
  color: hsl(38 92% 30%);
}

.traj-step-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.traj-correctness-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.traj-correctness-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s, border-color 0.15s;
}

.traj-correctness-btn:hover {
  background: hsl(var(--accent, 210 40% 96%));
}

.traj-correctness-btn.selected {
  font-weight: 600;
}

.traj-correctness-correct.selected {
  background: hsl(142 76% 90%);
  border-color: hsl(142 76% 50%);
  color: hsl(142 76% 25%);
}

.traj-correctness-incorrect.selected {
  background: hsl(0 84% 92%);
  border-color: hsl(0 84% 55%);
  color: hsl(0 84% 30%);
}

.traj-correctness-partially_correct.selected {
  background: hsl(38 92% 90%);
  border-color: hsl(38 92% 50%);
  color: hsl(38 92% 25%);
}

.traj-error-details {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--border, 214 32% 91%));
}

.traj-field {
  margin-bottom: 0.5rem;
}

.traj-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
}

.traj-error-type {
  width: 100%;
  padding: 0.35rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.375rem;
  font-size: 0.85rem;
}

.traj-severity-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.traj-severity-option {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.traj-rationale {
  width: 100%;
  padding: 0.35rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.375rem;
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
}

.traj-no-steps {
  color: hsl(var(--muted-foreground, 215 16% 47%));
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

.traj-step-thought {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  margin-bottom: 0.5rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.traj-thought-label {
  font-weight: 600;
  color: hsl(215 16% 40%);
}

/* =========================================================
   Multi-Dimension Pairwise
   ========================================================= */
.pairwise-multi-dimension .pairwise-dimension-row {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.5rem;
}

.pairwise-dimension-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.pairwise-dimension-description {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground, 215 16% 47%));
  margin-bottom: 0.5rem;
}

.pairwise-dimension-tiles {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pairwise-dimension-tiles .pairwise-tile {
  flex: 1;
}

.pairwise-dimension-tiles .pairwise-tie-btn {
  font-size: 0.8rem;
}

/* =========================================================
   Pairwise Justification
   ========================================================= */
.pairwise-justification {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.5rem;
  background: hsl(var(--muted, 210 40% 96%) / 0.5);
}

.pairwise-justification-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.pairwise-reason-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pairwise-reason-categories label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.pairwise-rationale-textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 0.375rem;
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
}

.pairwise-rationale-counter {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground, 215 16% 47%));
  margin-top: 0.25rem;
}

.pairwise-rationale-counter.insufficient {
  color: hsl(0 84% 50%);
}


/* ---------------------------------------------------------------------------
   Training phase
   Ported from the standalone training.html, which used to be a separate page.
   Training now renders through base_template_v2 like every other phase, so its
   chrome lives here rather than in a template-local <style> block.
   Feedback classes are keyed by feedback_type: success | error | warning | info.
   --------------------------------------------------------------------------- */
.training-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
}

.training-progress-label {
    font-weight: 600;
}

.feedback-alert {
    border-radius: 0.5rem;
    border: none;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.feedback-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.feedback-error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.feedback-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.feedback-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* ---------------------------------------------------------------------------
   Keystroke logging disclosure notice
   Rendered under the navbar on every page that can hold a free-text field,
   whenever keystroke_logging.disclose_to_annotators is on. Deliberately not
   dismissible: it is a standing statement about what the task records, not a
   one-time alert. Kept visually quiet so it reads as a status line rather than
   a warning -- an alarming banner would bias how people write, which is the
   very behaviour being measured.
--------------------------------------------------------------------------- */
.keystroke-disclosure {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background-color: var(--muted);
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.keystroke-disclosure-icon {
    flex: 0 0 auto;
    opacity: 0.75;
}

.keystroke-disclosure-text {
    flex: 1 1 auto;
}

/* Two collections can be on at once -- typing dynamics on free-text answers
   and drawing dynamics on the canvas. Each is a separate opt-in and each keeps
   its own line, because merging them would let one notice imply consent to the
   other. But stacked with a full border between them they read as two
   competing banners, so only the last one carries the separating rule and the
   pair reads as one statement about what the task records. */
.keystroke-disclosure + .keystroke-disclosure {
    border-top: none;
    padding-top: 0;
}