/* 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?h=30595edccb0d');

: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;
  /* `--destructive` is a FILL. At 3.76:1 on white it cannot carry text, which
     is why components that needed red words kept reaching for a literal.
     These two are the text colours: both clear 7:1 on the card and on the
     muted chip, which is the bar this product sets for anything an annotator
     reads all day. */
  --destructive-text: #9f1e17;
  --warning-text: #7d4407;
  /* The readable partner of --success-color, on the same terms as
     --destructive-text above. #10b981 is an indicator colour: it reads at
     2.5:1 on white and 2.35:1 on its own 8% scrim, so used as TEXT it fails
     AA outright. /admin/iaa colours the agreement coefficients with it, which
     put the page's actual content below the floor. 5.5:1 on white, 5.1:1 on
     the scrim. */
  --success-text: #047857;
  /* Fills behind the three *-text colours above. Badges and chips kept
     inventing their own tints (amber #fef3c7, red #fee2e2, Bootstrap's
     rgba(220,53,69,.1) ...). On its own tint: destructive 6.9:1, warning
     7.1:1, success 4.9:1 -- AA for badge text, not the 7:1 reading bar. */
  --destructive-tint: #fdecea;
  --warning-tint: #fdf3e2;
  --success-tint: #e7f5ef;
  /* The accent at the same weight, for a selected/armed state that should
     not shout: chips, selected rows, the armed tool in a toolbar. Text on
     it uses --foreground (17:1); --primary on it is only 4.6:1. */
  --primary-tint: #efecfa;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #6e56cf;
  --radius: 0.5rem;
  --primary-color: #6e56cf;
  /* The navbar's fill. Its contents are white text and white chips with
     fill-coloured text, so it stays this purple in both themes. */
  --navbar-bg: #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;
  /* Chart series, in this fixed order (never cycled). Validated as a pair on
     the light surface: CVD dE 24.7, normal-vision dE 33.6, >= 3:1 contrast. */
  --chart-series-1: #2a78d6;
  --chart-series-2: #eb6834;
  --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;

  /* Neutral scales. Component rules that hard-coded these exact values now
     name them, so the light theme renders as before and the dark theme can
     invert them: step 50 is the faintest fill and 900 the strongest text in
     both themes. A new rule uses the semantic tokens above, not these. */
  --surface: #ffffff;
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

/* Component stylesheets give each colour literal a dark twin with
   light-dark(), which follows color-scheme. The <head> script sets it on
   <html> from the theme; this is the fallback when that has not run. */
:root { color-scheme: light; }

/* Dark theme. <head> sets data-theme on <html> from ui.theme, the annotator's
   choice (localStorage 'potato-theme') or prefers-color-scheme, before any
   stylesheet paints; without JavaScript the page stays light. Values are the
   zinc dark set the light neutrals derive from. Contrast on --background /
   --card: --foreground 19.1/17.0, --text-color 13.5/12.0, --muted-foreground
   7.8/6.9, --primary as text 5.5/4.9, --input (control edges) 4.1/3.7, each
   *-text on its *-tint 8.5 or more. --primary is light enough to read as text,
   so a filled primary control carries --primary-foreground, which is dark
   here (5.5:1), not white. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #09090b;
  --foreground: #fafafa;
  --card: #18181b;
  --card-foreground: #fafafa;
  --popover: #18181b;
  --popover-foreground: #fafafa;
  --primary: #8b74e8;
  --primary-foreground: #09090b;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;
  --destructive-text: #fca5a5;
  --warning-text: #fcd34d;
  --success-text: #6ee7b7;
  --destructive-tint: #3b1518;
  --warning-tint: #3a2a0c;
  --success-tint: #0f2e24;
  --primary-tint: #2a2342;
  --border: #3f3f46;
  --input: #71717a;
  --ring: #8b74e8;
  --primary-color: #8b74e8;
  --secondary-color: #9d8af0;
  --accent-color: #a18fff;
  --gray-color: #a1a1aa;
  --light-gray: #27272a;
  --light-bg: #09090b;
  --heading-color: #fafafa;
  --chart-series-1: #60a5fa;
  --chart-series-2: #fb923c;
  --text-color: #d4d4d8;
  --success-color: #34d399;
  --box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.5);
  --box-shadow-lg: 0 4px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --group-bg-odd: #141417;
  --group-bg-even: #17171b;
  --surface: #18181b;
  --zinc-50: #18181b;
  --zinc-100: #1f1f23;
  --zinc-200: #27272a;
  --zinc-300: #3f3f46;
  --zinc-400: #71717a;
  --zinc-500: #a1a1aa;
  --zinc-600: #b4b4bc;
  --zinc-700: #d4d4d8;
  --zinc-800: #e4e4e7;
  --zinc-900: #fafafa;
  --gray-50: #18181b;
  --gray-100: #1f1f23;
  --gray-200: #27272a;
  --gray-300: #3f3f46;
  --gray-400: #71717a;
  --gray-500: #a1a1aa;
  --gray-600: #b4b4bc;
  --gray-700: #d4d4d8;
  --gray-800: #e4e4e7;
  --gray-900: #fafafa;
  --slate-50: #18181b;
  --slate-100: #1f1f23;
  --slate-200: #27272a;
  --slate-300: #3f3f46;
  --slate-400: #71717a;
  --slate-500: #a1a1aa;
  --slate-600: #b4b4bc;
  --slate-700: #d4d4d8;
  --slate-800: #e4e4e7;
  --slate-900: #fafafa;
}

/* Light/dark toggle (templates/_theme_toggle.html). The icon shows the
   theme a press switches to. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-toggle .theme-toggle-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: inline; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: none; }
/* On the navbar it takes the navbar's own chip style (white on the fill,
   7:1 and up), like the jump buttons beside it. */
.potato-navbar .theme-toggle {
  background: light-dark(rgba(255, 255, 255, 0.1), rgba(26, 26, 26, 0.1));
  border-color: light-dark(rgba(255, 255, 255, 0.18), rgba(76, 76, 76, 0.18));
  color: #ffffff;
}
.potato-navbar .theme-toggle:hover { background: light-dark(rgba(255, 255, 255, 0.22), rgba(26, 26, 26, 0.22)); }
.potato-navbar .theme-toggle:focus-visible { outline-color: light-dark(#ffffff, #4c4c4c); }
.theme-toggle-corner {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
}

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;
}

/* A right-hand rail panel (memos, codebook) is position: fixed and 360px
   wide, and the page underneath was not narrowed to make room. At a 1400px
   viewport the memo panel covered the Next button outright:
   elementFromPoint at the centre of Next returned the memo composer, so the
   only navigation control on the page could not be clicked until the
   annotator found the × in the panel header. Reserve the width instead.

   Below 1024px the panel is most of the screen, so reserving its width would
   leave nothing to annotate; there it stays an overlay and the annotator
   closes it. */
@media (min-width: 1024px) {
  body.potato-rail-open {
    padding-right: 360px;
  }
}

/* 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;
}

/* The three annotation-status pills sit on the purple navbar. They used to be
   a white scrim with translucent white text, which put "Not labeled" -- the
   state an annotator sees on every fresh item -- at 2.98:1, and the other two
   at 3.6 and 3.3. A darkened scrim under solid white reaches ~7.3:1, which is
   the bar this product sets for text annotators read all day. State is carried
   by the dot colour and the word, not by the text opacity. */
.status-badge.labeled,
.status-badge.unlabeled,
.status-badge.in_progress {
  background-color: rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

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

.status-badge.unlabeled::before {
  background-color: light-dark(#fbbf24, #4e3f18);
}

.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: light-dark(rgba(255, 255, 255, 0.35), rgba(26, 26, 26, 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: light-dark(#fef2f2, #2c1010);
  border: 1px solid light-dark(#fca5a5, #693030);
  color: light-dark(#991b1b, #e2a2a2);
  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;
  /* Undo Bootstrap's `legend { float: left; width: 100% }` reset.
     A schema whose content wrapper is display:flex or display:grid
     establishes a block formatting context, and a BFC does not overlap a
     float -- it shrinks to whatever width is left beside it, which against a
     100%-wide float is nothing. `triage` rendered its three buttons out of a
     zero-width container and past the right edge of the card, where two of the
     three were clipped and unclickable. Every schema with a flex or grid
     wrapper directly after its legend is exposed to the same thing. */
  float: none;
  width: auto;
}

/* A legend is a heading, and headings are bold -- but `pure_display` puts a
   whole block of prose in one, and every paragraph inherited the 600 weight.
   `<b>` marking each definition's term was then invisible against text that
   was already bold, and the page read as one shouted block.

   Block children carry body weight; inline emphasis inside them stands out
   again, which is the entire reason it was written. The legend's own direct
   text is untouched, so a one-line schema title still reads as a heading. */
.annotation-form legend > p,
.annotation-form legend > ul,
.annotation-form legend > ol,
.annotation-form legend > div,
.annotation-form legend > table,
.annotation-form legend > blockquote {
  font-weight: 400;
  color: var(--foreground);
}

.annotation-form legend > p:first-child {
  margin-top: 0;
}

.annotation-form legend > p:last-child {
  margin-bottom: 0;
}

/* 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: var(--slate-50);
  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: var(--surface);
  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 var(--gray-200);
  /* 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: var(--gray-500);
  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: var(--gray-800);
}

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

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

/*
 * Keep the assistant row to one line, and drop the labels when the cell is too
 * narrow to show them.
 *
 * With `layout.grid` and `ai_config.include.all` the row wrapped once per
 * assistant in a ~120px track, costing more height than the question it sat
 * above. Ellipsing the labels instead fixed the height but painted a stray
 * letter beside each icon -- "[icon] [icon]K [icon]R" -- so below the threshold
 * the label is hidden outright.
 *
 * The container is `.ai-help-shell`, not the form: `container-type:
 * inline-size` on `.annotation-form` collapses span-1 and span-2 grid items to
 * their contain-intrinsic width, measured at 18px against a 123px track, and
 * the fieldset behaves the same way. The shell is a plain block div whose width
 * comes from its parent, so containing it costs nothing.
 *
 * The label is hidden, never removed. It stays the button's accessible name,
 * and the `title` the wrapper writes gives sighted users the word back on hover
 * and focus.
 */
.ai-help-shell {
  container-type: inline-size;
  container-name: ai-help-shell;
  /* A definite width, because `.annotation-form` is a column flex container and
     a size-contained item with no definite inline size resolves to 0 -- which
     made the query match on every cell by accident rather than by measurement. */
  width: 100%;
}

.ai-help {
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
}

.ai-help .ai-assistant-containter {
  min-width: 0;
  align-items: center;
}

/* The icon must never be what shrinks -- it is the only thing left to aim at
   once the labels are gone. */
.ai-help .ai-assistant-img {
  flex: none;
}

@container ai-help-shell (max-width: 260px) {
  .ai-help {
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
  }

  .ai-help .ai-assistant-containter > span:not(.ai-assistant-img) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Without a label the icon alone is the whole target. 24px is WCAG 2.2 AA
     (2.5.8 Target Size Minimum); the 44px AAA figure does not fit -- three of
     them need 132px and the row these appear in is around 105px, so demanding
     it forced a wrap and put the row back to three lines, which is the height
     problem this rule exists to fix. */
  .ai-help .ai-assistant-containter {
    min-width: 1.5rem;
    min-height: 1.5rem;
    justify-content: 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;
}

/* ...except on the image toolbar's filled --primary controls (an armed label
   or tool; audio and video tint theirs instead), where
   page text read 2.3:1 on the purple in the light theme and 2.5:1 in the
   dark. They take the fill's own foreground. */
.annotation-form fieldset .image-annotation-container .label-btn.active span:not(.label-color-dot),
.annotation-form fieldset .image-annotation-container .tool-btn.active span {
  color: var(--primary-foreground) !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: light-dark(#6e56cf, #b2a8db);
  background-color: var(--surface);
  border: 1px solid var(--zinc-200);
  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: var(--surface);
  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 light-dark(rgba(255, 255, 255, 0.3), rgba(76, 76, 76, 0.3));
  border-radius: 50%;
  border-top-color: var(--surface);
  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: var(--surface);
  border: 2px solid var(--gray-400);
  margin-bottom: 0;
  cursor: pointer;
  transition: var(--transition);
}
.shadcn-likert-input:hover + .shadcn-likert-button,
.shadcn-likert-button:hover {
  border-color: #6e56cf;
  background-color: light-dark(#f5f3ff, #120d2d);
}

.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 measures about 1.2:1 on white, so an empty box all but
     disappeared; a control's outline needs 3:1 (WCAG 1.4.11). */
  border: 1px solid var(--muted-foreground);
  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 var(--surface);
  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(--muted-foreground); /* 3:1 minimum, as above */
  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 var(--surface);
  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;
}

/* The "nothing to mark" escape hatch, below the label grid.
   It is a block, so its label stretched the full row -- an 828px hit area
   beside 84px label chips, which reads as a heading rather than an option.
   (It never showed at all until `bad_text_label` accepted the string form,
   so the width was never visible to notice.) */
.shadcn-span-bad-text {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}

.shadcn-span-bad-text .shadcn-span-label {
  flex: 0 1 auto;
  color: var(--muted-foreground, var(--zinc-600));
}

/* 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: var(--font-sans);
  /* Left-aligned like every other schema. `margin: 1rem auto` centred the
     matrix and inset it about 64px from the card edge the questions above and
     below start at. */
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  color: var(--text-color);
}

.shadcn-multirate-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

/* The legend's inherited 12px inset put the question to the right of the
   table it heads. */
.annotation-form fieldset .shadcn-multirate-title {
  padding-left: 0;
}

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

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

.shadcn-multirate-table th {
  background-color: var(--muted);
  font-weight: 500;
  /* --muted-foreground on --muted is 4.4:1, under AA; these are the scale
     points the annotator reads on every row. */
  color: var(--text-color);
}

/* The whole cell is the target, not the 20px circle in the middle of it: the
   label fills the cell and carries the cell's padding. Table layout only; the
   stacked phone layout (max-width: 640px, below) styles the label itself. */
@media (min-width: 641px) {
  .shadcn-multirate-table td.shadcn-radio-cell {
    padding: 0;
  }

  .shadcn-multirate-table td.shadcn-radio-cell > .shadcn-multirate-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    margin: 0;
    cursor: pointer;
  }
}

.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: var(--muted);
}

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

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

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

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

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

.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: light-dark(#ffeaa7, #4f4217);
  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: light-dark(rgba(255, 234, 167, 0.8), rgba(79, 66, 23, 0.8));
  border-color: light-dark(rgba(255, 193, 7, 0.3), rgba(107, 92, 46, 0.3));
}

.annotation-span.overlap-depth-2 {
  background-color: light-dark(rgba(255, 234, 167, 0.9), rgba(79, 66, 23, 0.9));
  border-color: light-dark(rgba(255, 193, 7, 0.5), rgba(107, 92, 46, 0.5));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.annotation-span.overlap-depth-3 {
  background-color: light-dark(rgba(255, 234, 167, 1), #4f4217);
  border-color: light-dark(rgba(255, 193, 7, 0.7), rgba(107, 92, 46, 0.7));
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}

.annotation-span.overlap-depth-4 {
  background-color: light-dark(rgba(255, 234, 167, 1), #4f4217);
  border-color: light-dark(rgba(255, 193, 7, 0.9), rgba(107, 92, 46, 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: var(--gray-200);
  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: var(--primary-foreground);
}

.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: light-dark(#ccc, #333333);
}

.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: light-dark(#666, #c2c2c2);
  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: light-dark(#92400e, #e9bda2) !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: light-dark(#fef3c7, #413814);
  color: var(--gray-800);
  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: light-dark(#92400e, #e9bda2);
}

.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: light-dark(#92400e, #e9bda2);
  font-size: 11px;
  text-transform: uppercase;
}

.tooltip.hint-tooltip .content-item .value {
  color: var(--gray-800);
}

.tooltip.hint-tooltip .content-item .value.suggestion {
  font-weight: 600;
  color: light-dark(#78350f, #e9c2ac);
  background-color: light-dark(rgba(254, 243, 199, 0.8), rgba(65, 56, 20, 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: light-dark(#faf5ff, #1c0d2c);
  color: var(--gray-800);
  border: 1px solid #8b5cf6;
  padding: 0;
  max-width: 100%;
}

.tooltip.rationale-tooltip .tooltip-close {
  color: light-dark(#5b21b6, #bba2e2);
}

.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: light-dark(#5b21b6, #bba2e2);
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 8px;
}

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

.tooltip.rationale-tooltip .rationale-label {
  font-weight: 600;
  color: light-dark(#5b21b6, #bba2e2);
  font-size: 13px;
}

.tooltip.rationale-tooltip .rationale-reasoning {
  color: var(--gray-700);
  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: var(--slate-50);
  border-left: 4px solid var(--primary, #6366f1);
}

.dialogue-turn-odd {
  background-color: var(--surface);
  border-left: 4px solid var(--slate-200);
}

/* Hover effect on dialogue turns */
.dialogue-turn:hover {
  background-color: var(--slate-100);
}

/* Speaker color palette - 6 distinct colors for speaker names */
.dialogue-speaker.speaker-color-0 { color: light-dark(#4f46e5, #a39fe4); } /* Indigo */
.dialogue-speaker.speaker-color-1 { color: light-dark(#db2777, #e3a1be); } /* Pink */
.dialogue-speaker.speaker-color-2 { color: #0d9488; } /* Teal */
.dialogue-speaker.speaker-color-3 { color: #d97706; } /* Amber */
.dialogue-speaker.speaker-color-4 { color: light-dark(#7c3aed, #b89ce8); } /* 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 */
/* Dark theme (data-theme, set in <head>) */
:root[data-theme="dark"] .dialogue-turn.turn-even,
:root[data-theme="dark"] .dialogue-turn-even {
    background-color: rgba(255, 255, 255, 0.05);
  }

:root[data-theme="dark"] .dialogue-turn.turn-odd,
:root[data-theme="dark"] .dialogue-turn-odd {
    background-color: transparent;
    border-left-color: #334155;
  }

:root[data-theme="dark"] .dialogue-turn:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Lighter speaker colors for dark mode */
:root[data-theme="dark"] .dialogue-speaker.speaker-color-0 { color: #818cf8; }

:root[data-theme="dark"] .dialogue-speaker.speaker-color-1 { color: #f472b6; }

:root[data-theme="dark"] .dialogue-speaker.speaker-color-2 { color: #2dd4bf; }

:root[data-theme="dark"] .dialogue-speaker.speaker-color-3 { color: #fbbf24; }

:root[data-theme="dark"] .dialogue-speaker.speaker-color-4 { color: #a78bfa; }

:root[data-theme="dark"] .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, var(--slate-200));
  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, var(--slate-400));
  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, var(--slate-400));
  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);
}

/* Dark theme (data-theme, set in <head>) */
:root[data-theme="dark"] .dialogue-display-content.indent-replies.show-reply-lines
    .dialogue-turn[data-depth]:not([data-depth="0"])::before {
    background: #334155;
  }

:root[data-theme="dark"] .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, var(--surface));
  border: 1px solid var(--border, var(--zinc-200));
  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;
}

/* Shown in place of the item when none of the configured display fields
   exists in the data. Deliberately quiet rather than alarming: it is a
   configuration problem, and the annotator's job is to stop and report it,
   not to worry. */
.instance-display-empty {
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  border-radius: var(--radius);
  background: var(--muted);
  padding: var(--space-lg);
}

.instance-display-empty-title {
  margin: 0 0 var(--space-xs);
  font-weight: 600;
}

.instance-display-empty-body {
  margin: 0;
  /* Not --muted-foreground: on this block's own tinted background it measures
     4.40:1, just under the 4.5:1 AA floor for 13px text, and this paragraph is
     the whole instruction. */
  color: var(--zinc-600);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* The field names are the actionable half of the message -- they are what the
   reader copies into the bug report -- so they carry the block's strongest
   contrast, not the code-pink default (4.09:1 here). */
.instance-display-empty code {
  word-break: break-word;
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}

/* Individual display field container */
.display-field {
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--card, var(--surface));
  border: 1px solid var(--border, var(--zinc-200));
  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, var(--zinc-500));
  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, var(--zinc-500));
  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, var(--zinc-500));
  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;
}

/* "Show all" lifts the height cap (instance-display.js initResizableExpand).
   !important because a config max_height arrives as an inline style. */
.display-field-resizable.is-expanded {
  max-height: none !important;
}

.display-field-expand {
  display: block;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md) auto;
  min-height: 32px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-dense);
  font-weight: 500;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.display-field-expand[hidden] {
  display: none;
}

.display-field-expand:hover {
  background: var(--secondary);
}

.display-field-expand:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .display-field-expand {
    min-height: 44px;
  }
}

/* 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, var(--zinc-200)) 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: var(--gray-500);
}

.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: light-dark(rgba(255, 255, 255, 0.9), rgba(26, 26, 26, 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, var(--zinc-500));
  background: var(--muted, var(--zinc-100));
  border-radius: 4px;
}

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

/* Display error message */
.display-error {
  padding: 16px;
  color: var(--destructive, #ef4444);
  background: light-dark(#fef2f2, #2c1010);
  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, var(--zinc-500));
  background: var(--muted, var(--zinc-100));
  border-radius: 4px;
}

.display-type-video .video-error {
  /* --destructive is a fill (3.8:1 as text); this is a sentence to read. */
  color: var(--destructive-text);
  background: var(--destructive-tint);
}

/* 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, var(--zinc-100));
  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, var(--zinc-500));
  background: var(--muted, var(--zinc-100));
  border-radius: 4px;
}

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

/* 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, var(--surface));
  border: 1px solid var(--border, var(--zinc-200));
}

.display-type-dialogue .dialogue-turn.turn-even {
  background: light-dark(#f8f9fa, #1a1d20);
}

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

/* 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, light-dark(#09090b, #dfdfe4));
  margin-right: 8px;
}

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

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

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

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

.per-turn-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}

.ptr-values {
  display: flex;
  gap: var(--space-xs);
}

/* Per-turn ratings are a radio group (role=radio on each value; see
   dialogue_display.py). The old #e2e8f0 ring and #94a3b8 numerals measured
   1.2:1 and 2.56:1 on white, so an unrated turn was close to invisible. The
   numerals and end labels use --text-color, not --muted-foreground: muted is
   4.8:1 on white but 4.4:1 on the #f1f5f9 alternating turn shading. */
.ptr-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--muted-foreground);
  background: var(--card);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.ptr-value:hover {
  border-color: var(--primary);
  color: var(--foreground);
}

.ptr-value.ptr-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

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

/* Touch: 44px targets on the annotation surface. */
@media (pointer: coarse) {
  .ptr-value {
    width: 44px;
    height: 44px;
    font-size: var(--text-sm);
  }
}

.ptr-label {
  font-size: var(--text-xs);
  color: var(--text-color);
  white-space: nowrap;
}

/* Multi-dimension per-turn rating group */
.per-turn-rating-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}

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

.ptr-schema-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  min-width: 80px;
}

/* No dark-mode block: the product is light-only (.impeccable.md), so a
   dark-scheme OS used to get slate circles on the white card. */

/* Screen-reader-only text.
 *
 * Anything drawn on a <canvas> is pixels, so a canvas message needs a DOM
 * twin for assistive tech. The twin must not also appear on screen, or the
 * message reads twice. grounding-eval.css, region-caption.css and
 * rollout-eval.css each carry a scoped copy of this rule; new call sites use
 * this one. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pairwise display styles */
.display-type-pairwise .pairwise-display-content {
  /* PairwiseDisplay subtracts each cell's share of this gap from its width, so
     the two must agree. Change it here, not in the inline style. */
  --pairwise-gap: 16px;
  display: flex;
  flex-direction: row;
  gap: var(--pairwise-gap);
  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 {
  /* Without this a long unbroken string sets the cell's floor above its flex
     basis and pushes its neighbour onto the next row. */
  min-width: 0;
  box-sizing: border-box;
  padding: 16px;
  background-color: var(--card, var(--surface));
  border: 1px solid var(--border, var(--zinc-200));
  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, var(--zinc-500));
  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, var(--zinc-500));
  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, var(--zinc-500));
  background: var(--muted, var(--zinc-100));
  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): the card
   surface, white in the light theme */
#task_layout,
#task_layout.shadcn-card {
  background-color: var(--card) !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;
}

/* Tiles and the tie/neither buttons share one box: same height, border and
   padding. The tie button was 2px taller with a thinner border and sat 4px
   higher than the A/B tiles beside it. */
.pairwise-tile,
.pairwise-tie-btn,
.pairwise-neither-btn {
  box-sizing: border-box;
  min-height: 48px;
}

.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);
}

/* The tile is a div with tabindex, so this ring is the only thing telling a
   keyboard user where they are. The 20%-alpha halo it used to rely on is
   1.32:1 against the card -- WCAG 1.4.11 asks for 3:1 -- so the indicator is
   a solid outline at full strength (5.39:1) and the halo stays as decoration
   behind it. */
.pairwise-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110, 86, 207, 0.2);
}

.pairwise-tile:focus {
  border-color: var(--primary);
}

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

/* The check sits on the tile's corner, over the border, not inside it: at
   top/right 8px it landed on the [1]/[2] hotkey chip and covered it. */
.pairwise-tile.selected::after {
  content: '\2713';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px var(--card);
  background-color: var(--primary);
  color: var(--primary-foreground);
  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;
  /* Same block margin as .pairwise-selection-container, so the two inline
     groups share a baseline box. */
  margin: 8px 0 8px 12px;
  vertical-align: middle;
}

.pairwise-tie-btn,
.pairwise-neither-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 2px 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: var(--primary-foreground);
  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;
}

/* These three labels are the only thing saying which end of the slider means
   what, so they are UI labels rather than help text. At --text-sm they render
   at 13px, which is the size this file reserves for captions and fine print. */
.pairwise-scale-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  font-size: var(--text-base);
  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: light-dark(#c4c4c8, #323234);  /* 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 var(--surface);
  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 var(--surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

.pairwise-scale-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: light-dark(#c4c4c8, #323234);
  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: light-dark(#e9ecef, #222528);
  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 var(--surface);
  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 var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.brush-size-group .brush-size-value {
  font-size: 13px;
  color: light-dark(#495057, #c2c6c9);
  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: light-dark(#dc2626, #e3a1a1);
}

.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: light-dark(#dc2626, #e3a1a1);
  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);
  /* The card used to start flush under the sticky bar, its top border hidden
     behind it. */
  padding-top: var(--space-lg);
}

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

.potato-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--navbar-bg);
  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;
}

/* The brand used to be `flex-shrink: 0`, so a long task name held its full
   width and pushed the page sideways on a phone (465px of header on a 390px
   iPhone) and Logout off the edge. It now yields after `.navbar-center`, which
   has a zero flex basis and so empties first: the name truncates, and the
   full name is in its title attribute. `.navbar-end` -- Logout -- never
   shrinks. See tests/selenium/test_mobile_layouts.py. */
.potato-navbar .navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.potato-navbar .navbar-brand .task-name {
  font-weight: 600;
  color: var(--light-color);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.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;
  /* A flex item's default `min-width: auto` refuses to shrink below its own
     content, so when the row ran out of room this section held its natural
     width and pushed `.navbar-end` -- Logout -- off the right edge instead of
     giving way. Reachability of Logout beats seeing every counter at once, so
     this section is the one that yields, and it scrolls rather than clipping
     so nothing is actually lost. Engages only when the row does not fit. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.potato-navbar .navbar-center::-webkit-scrollbar {
  display: none;
}

.potato-navbar .navbar-divider {
  width: 1px;
  height: 18px;
  background: light-dark(rgba(255,255,255,0.2), rgba(26, 26, 26, 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;
  align-items: center;
  gap: 3px;
}

/* Caption between the two jump-to-unlabeled buttons. Without it the pair read
   as plain previous/next, which they are not. Hidden where the centre row is
   already tight; the buttons keep their aria-label either way. */
.potato-navbar .nav-controls-label {
  display: none;
  color: var(--light-color);
  font-size: var(--text-xs);
  opacity: 0.9;
  padding: 0 var(--space-xs);
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .potato-navbar .nav-controls-label {
    display: inline;
  }
}

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

.potato-navbar .nav-control-btn:hover {
  background: light-dark(rgba(255,255,255,0.22), rgba(26, 26, 26, 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 light-dark(rgba(255,255,255,0.55), rgba(76, 76, 76, 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 light-dark(rgba(255,255,255,0.18), rgba(76, 76, 76, 0.18));
  background: light-dark(rgba(255,255,255,0.08), rgba(26, 26, 26, 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 {
  /* 0.35 put the "#" hint at about 1.5:1 on the bar. */
  color: rgba(255,255,255,0.75);
}

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

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

.potato-navbar .goto-btn:hover {
  background: var(--surface);
}

.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: light-dark(rgba(255,255,255,0.1), rgba(26, 26, 26, 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: light-dark(rgba(255,255,255,0.1), rgba(26, 26, 26, 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: light-dark(rgba(255,255,255,0.22), rgba(26, 26, 26, 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: light-dark(rgba(255,255,255,0.88), rgba(26, 26, 26, 0.88));
  color: var(--navbar-bg);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

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

/* 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: light-dark(rgba(255,255,255,0.15), rgba(26, 26, 26, 0.15));
  color: var(--light-color);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid light-dark(rgba(255,255,255,0.15), rgba(76, 76, 76, 0.15));
  transition: background 0.15s ease;
}

.potato-navbar .adjudicate-btn:hover,
.potato-navbar .codebook-btn:hover {
  background: light-dark(rgba(255,255,255,0.25), rgba(26, 26, 26, 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;
  /* A 24px line box: the links were 16px tall, under the WCAG 2.2 minimum. */
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

.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);
}

/* Neither a success nor a failure: the study has no work for this person.
   Used by no_work_available.html, where a green tick would have read as
   "you finished" -- which is what the completion page wrongly said. */
.potato-page-icon-info {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.potato-page-icon-info i {
  color: var(--primary, light-dark(#6e56cf, #b2a8db));
}

.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: var(--primary-foreground);
  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: light-dark(#065f46, #b3f0df);
}

.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;
}

/* Compact schemas flow side-by-side; full-width schemas break the row.
   They used to be width: fit-content, so every card was as wide as its
   longest label and the rows came out ragged -- on the agent-trace example
   two cards stopped 130px short of the edge, then the next row was a single
   card of a third width. A shared basis with grow lets each row fill the
   card: two compact schemas split it, an odd one out takes the whole row. */
#annotation-forms .shadcn-radio-container,
#annotation-forms .shadcn-multiselect-container,
#annotation-forms .shadcn-likert-container {
  flex: 1 1 17.5rem;
  width: auto;
  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 ===== */

/* Labeling engine note above the item. Quiet by design: the item stays the
   loudest thing on the page. Foreground on muted keeps AA contrast. */
.engine-request-note {
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-dense);
  color: var(--foreground);
  background: var(--muted);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
}
.engine-request-note[data-purpose="verify"] { border-left-color: var(--primary); }
/* A blind request has no AI help: the routes refuse it (403), so the
   buttons that would ask are hidden rather than left to fail. */
[data-engine-visibility="blind"] .ai-help { display: none !important; }

.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 var(--surface);
  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);
}
/* Before the annotator moves a thumb there is no range: no band, no numbers,
   and a label that says so. The widget used to open with a band drawn between
   the 25th and 75th percentile while the stored value was empty. */
.range-slider-unset-hint {
  display: none;
  font-weight: 400;
  /* No `color` here on purpose. `.annotation-form fieldset span` is more
     specific and would win anyway, and it inherits --text-color at 9.6:1 --
     over the 7:1 this project asks of annotation-facing text. --muted-foreground
     would be 4.5:1, which passes AA and fails that bar. */
}
.range-slider-values.range-slider-unset .range-slider-unset-hint {
  display: inline;
}
.range-slider-values.range-slider-unset .range-slider-val-low,
.range-slider-values.range-slider-unset .range-slider-val-sep,
.range-slider-values.range-slider-unset .range-slider-val-high {
  display: none;
}
.range-slider-track.range-slider-unset .range-slider-fill {
  display: none;
}
.range-slider-track.range-slider-unset .range-slider-thumb {
  background: 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: var(--primary-foreground) !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;
  /* It is a <button> so it is focusable and announced; strip the UA chrome that
     comes with that, and keep the focus ring the UA reset would take away. */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  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:focus-visible {
  outline: 2px solid var(--ring, var(--primary, #6366f1));
  outline-offset: 1px;
  border-radius: 2px;
}
.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, var(--zinc-500));
  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, var(--zinc-900));
}
.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 var(--surface);
  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 var(--surface);
  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: var(--primary-foreground) !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);
}
/* The block only renders under require_reason_on_edit, and that key now
   actually blocks Next, so the label has to say so before the annotator
   reaches the button. */
.trajedit-reason-req {
  font-weight: 500;
  color: var(--destructive-text);
}
.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;
}

/* A fixed 250px source column leaves about 70px for the groups on a phone.
   Tapping a card and then tapping a group is now a supported way to do this
   task -- it is the only one that works on touch, where HTML5 drag does not --
   so the narrow layout has to be usable rather than merely present. */
@media (max-width: 640px) {
  .card-sort-layout {
    grid-template-columns: 1fr;
  }
}
.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 {
  /* 44px is the tap target the annotation surface asks for, and a card is now
     tapped rather than only dragged. The card is full-width in its column, so
     only the height needed raising. */
  min-height: 44px;
  display: flex;
  align-items: center;
  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: the keyboard and touch path ---------------------------------
   The widget was drag-only: no tabindex, no roles, no click-to-assign, so a
   keyboard or screen-reader annotator could not do the task at all, and HTML5
   drag does not work on touch either. A card is now picked up with Enter or a
   tap, and dropped into a focused group.                                    */

.card-sort-card:focus-visible,
.card-sort-group-items:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card-sort-card.card-sort-held {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
  cursor: grabbing;
}

/* While a card is held, show where it can go. */
.card-sort-holding .card-sort-group-items {
  border-style: dashed;
  border-color: var(--primary);
}

.card-sort-kbd-hint {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: 0.25rem 0 0.5rem;
}

/* The move announcements. Visible text would repeat what the cards already
   show; screen readers get it through role="status". */
.card-sort-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.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;
}

/* An item carrying more profiles than the scheme renders. Says so above the
   cards, because the alternative is an annotator comparing three of five
   options with nothing on screen to tell them the set is incomplete.

   Scoped through the container because `.annotation-form fieldset p` and
   `.annotation-form fieldset *` both set a colour and both outrank a bare
   class, so the unscoped rule lost and the notice rendered in body grey. */
.shadcn-conjoint-container .conjoint-truncation-notice {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--warning-text);
  margin-bottom: 0.75rem;
}
.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);
}

/* When nothing in the instance area is showing (image annotation, a media-path
   item, a pairwise item its scheme draws), the padding and rule above opened
   the card on an empty band and a line. :has() re-evaluates live, so a script
   that later reveals #instance-text brings the separator back. */
#main-content > .instance-area:not(:has(> :not([style*="display: none"]))) {
  margin-bottom: 0 !important;
  padding-bottom: 0;
  border-bottom: none;
}

/* 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: var(--primary-tint);
}

/* 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;
}

/* Why the number on the left is not yet the verdict. Sits beside the score
   rather than replacing it, so the running total stays readable while the
   annotator fills in the severities it is waiting on. */
.traj-score-note {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--warning-text);
}

.traj-score-note:empty {
  display: none;
}

.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, light-dark(#6c757d, #bec2c5));
}
:root[data-theme="dark"] .training-progress { color: var(--muted-foreground); }

.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: light-dark(#d4edda, #223627);
    color: light-dark(#155724, #bae5c4);
    border-left: 4px solid #28a745;
}

.feedback-error {
    background-color: light-dark(#f8d7da, #37181b);
    color: light-dark(#721c24, #e2b1b5);
    border-left: 4px solid #dc3545;
}

.feedback-warning {
    background-color: light-dark(#fff3cd, #3f3412);
    color: light-dark(#856404, #efdca5);
    border-left: 4px solid light-dark(#ffc107, #6b5c2e);
}

.feedback-info {
    background-color: light-dark(#d1ecf1, #1f3438);
    color: light-dark(#0c5460, #b4e4eb);
    border-left: 4px solid #17a2b8;
}

:root[data-theme="dark"] .feedback-success {
    background-color: var(--success-tint);
    color: var(--success-text);
}
:root[data-theme="dark"] .feedback-error {
    background-color: var(--destructive-tint);
    color: var(--destructive-text);
}
:root[data-theme="dark"] .feedback-warning {
    background-color: var(--warning-tint);
    color: var(--warning-text);
}
:root[data-theme="dark"] .feedback-info {
    background-color: var(--muted);
    color: var(--foreground);
}

/* ---------------------------------------------------------------------------
   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;
}

/* ==========================================================================
   Phones and touch
   --------------------------------------------------------------------------
   From a phone sweep of 20 task types (iPhone 13, 390x664; see
   plans/mobile-usability.md and tests/playwright/test_mobile_layouts.py).
   Layout rules key on max-width. Target-size rules key on `pointer: coarse`,
   so a narrow desktop window keeps its density and a tablet gets the bigger
   targets. 44px is Apple's minimum touch target; WCAG 2.2 AA asks for 24px.
   ========================================================================== */

@media (max-width: 768px) {
  /* The <=768px rule above capped the card at the viewport and let its
     content scroll inside it -- a scroller within the page, which a thumb
     cannot tell apart from the page (the image task showed 522px of 1265px).
     The page scrolls; the card grows. */
  .shadcn-card,
  .shadcn-card.media-annotation {
    max-height: none;
  }

  /* A text display's user-resizable box is a fixed-height inner scroller:
     the dialogue task held its 735px of turns in a 500px box, and a swipe on
     it moved the page 1px. On a phone the text flows at its own height.
     PDF and document viewers keep their box; they need one. */
  .display-field-resizable:not(:has(.pdf-display, .document-display)) {
    height: auto !important;
    max-height: none;
    overflow: visible;
    resize: none;
  }

  .display-field-resizable:not(:has(.pdf-display, .document-display)) .display-field-content {
    height: auto;
    overflow: visible;
  }

  .display-field-resizable:not(:has(.pdf-display, .document-display))::after {
    display: none;
  }
}

@media (max-width: 700px) {
  /* Header: two rows, not three. The brand used to fill row one alone, so
     Logout wrapped to a second row and the counters to a third -- 140px of a
     664px screen, before the banner. The brand and Logout now share row one
     and the counters take a compact row two. Not sticky here: a header that
     tall pinned to the top costs a fifth of the screen on every scroll. */
  .potato-navbar {
    position: static;
  }

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

  .potato-navbar .navbar-brand .task-name {
    font-size: var(--text-lg);
  }

  .potato-navbar .user-pill .username {
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .potato-navbar .navbar-center {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .potato-navbar .navbar-center .navbar-divider {
    display: none;
  }

  .potato-navbar .status-badge,
  .potato-navbar .progress-section,
  .potato-navbar .instance-number-section {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  /* Instance text: body size and ordinary spacing. 1.7 at the large size
     spread a four-response ranking item over 1100px. Span tasks keep the
     taller spacing their label chips need (.span-labels-on). */
  #instance-text:not(.span-labels-on),
  .instance-text-container:not(.span-labels-on) {
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* Every answer form spans the card. Forms are flex items of
     .annotation_schema and shrank to their content: the stacked multirate
     list used 187px of a 292px card, and option rows were tappable only as
     far as their text reached. */
  .annotation_schema > .annotation-form {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* fieldset[schema] is width: fit-content on desktop, which kept the
     stacked multirate list at its widest label's width. */
  .annotation_schema > .annotation-form > fieldset[schema] {
    width: 100%;
  }

  /* Likert: the end labels sat either side of the scale and the right one
     ran out of the card. Scale on its own row, end labels beneath it. */
  .shadcn-likert-scale {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .shadcn-likert-options {
    order: -1;
    flex: 1 0 100%;
  }

  .shadcn-likert-endpoint {
    flex: 1 1 0;
    max-width: 50%;
    padding: 0;
  }

  .shadcn-likert-endpoint:last-of-type {
    justify-content: flex-end;
    text-align: right;
  }

  /* Multirate: a table with five rating columns does not fit 390px, and it
     scrolled sideways inside its card with nothing to say two columns were
     hidden. Each row becomes a block: the item, then its ratings as a list
     of full-width choices. The rating text is in the label (see
     schemas/multirate.py); desktop keeps the table and hides it. */
  .shadcn-multirate-table,
  .shadcn-multirate-table tbody,
  .shadcn-multirate-table tr,
  .shadcn-multirate-table td {
    display: block;
    width: 100%;
  }

  .shadcn-multirate-table thead {
    display: none;
  }

  .shadcn-multirate-table tbody tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
  }

  .shadcn-multirate-table tbody td:first-child {
    min-width: 0;
    font-weight: 600;
    padding: 0.25rem 0;
    text-align: left;
  }

  .shadcn-multirate-table td.shadcn-radio-cell {
    padding: 0;
    border: none;
    text-align: left;
  }

  .shadcn-multirate-table td:empty {
    display: none;
  }

  .shadcn-multirate-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    cursor: pointer;
  }

  .shadcn-multirate-choice .shadcn-multirate-choice-text {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }
}

/* The rating's name inside each multirate cell: read by the stacked phone
   layout above, visually hidden in the desktop table (the column header says
   it there, and the input's aria-label already names it). */
.shadcn-multirate-choice-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (pointer: coarse) {
  /* Option rows: the whole row is the target, not the text's line box. */
  .shadcn-radio-option,
  .shadcn-multiselect-item,
  .shadcn-span-option {
    min-height: 44px;
  }

  .shadcn-radio-option > .shadcn-radio-label,
  .shadcn-multiselect-item > .shadcn-multiselect-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 44px;
  }

  .shadcn-radio-input,
  .shadcn-multiselect-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }

  /* Likert-family buttons: a 32px circle with a 44px hit area. The circle
     shrinks on a 10-point scale so the row still fits a phone. */
  .shadcn-likert-button,
  .semantic-differential-button {
    --touch-dot: clamp(24px, 8.5vw, 32px);
    width: var(--touch-dot);
    height: var(--touch-dot);
    position: relative;
  }

  .shadcn-likert-button::before,
  .semantic-differential-button::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
  }

  .shadcn-likert-track {
    top: calc(clamp(24px, 8.5vw, 32px) / 2);
  }

  .semantic-differential-button.center {
    width: calc(var(--touch-dot) - 4px);
    height: calc(var(--touch-dot) - 4px);
  }

  /* Ranking: the arrows are the touch path -- HTML5 drag-and-drop does not
     fire from a finger on most phones -- and they were 16x10px. */
  .ranking-buttons {
    flex-direction: row;
    gap: 0.25rem;
  }

  .ranking-up,
  .ranking-down {
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* Slider: the invisible native input is what a finger drags, and it was
     6px tall. Centre a 44px band on the track; enlarge the visible thumb. */
  /* `input.` because the global input[type="range"] { height: 6px } outranks
     a bare class -- it was also beating the base rule's height: 100%. */
  input.custom-slider-input {
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
  }

  .custom-slider-thumb {
    width: 28px;
    height: 28px;
  }

  /* Image annotation toolbar: label, zoom and edit buttons were 31px tall and
     each label's visibility toggle 18x11px. */
  .image-annotation-container .label-btn,
  .image-annotation-container .zoom-btn,
  .image-annotation-container .edit-btn,
  .image-annotation-container .tool-btn {
    min-height: 44px;
  }

  .image-annotation-container .zoom-btn,
  .image-annotation-container .edit-btn {
    min-width: 44px;
  }

  .image-annotation-container .label-visibility-toggle {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  /* iOS zooms the page into any focused field under 16px. */
  .annotation-form input[type="text"],
  .annotation-form input[type="number"],
  .annotation-form input:not([type]),
  .annotation-form textarea,
  .annotation-form select {
    font-size: max(16px, 1em);
  }
}

@media (hover: none) and (pointer: coarse) {
  /* Keyboard-shortcut hints mean nothing without a keyboard. */
  .keybinding-badge,
  .pairwise-tile-shortcut,
  .bws-tile-shortcut {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Dark theme: components whose light colours are literals tuned for a white
   page. Each keeps its light rule and takes the matching semantic token here.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] .required-fields-error,
:root[data-theme="dark"] .display-type-image .image-error,
:root[data-theme="dark"] .display-error,
:root[data-theme="dark"] .display-type-audio .audio-error {
  background-color: var(--destructive-tint);
  color: var(--destructive-text);
  border-color: var(--destructive);
}
:root[data-theme="dark"] .shadcn-likert-button:hover { background-color: var(--primary-tint); }
/* A highlight colour is the study's choice; the text on it stays dark so it
   reads on any of them. */
:root[data-theme="dark"] .annotation-span { color: #09090b; }
:root[data-theme="dark"] .custom-slider-tick-mark { background-color: var(--input); }
:root[data-theme="dark"] .tooltip.hint-tooltip {
  background-color: var(--warning-tint);
  color: var(--warning-text);
}
:root[data-theme="dark"] .tooltip.rationale-tooltip {
  background-color: var(--primary-tint);
  color: var(--foreground);
}
:root[data-theme="dark"] .display-type-dialogue .dialogue-turn.turn-even {
  background-color: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .brush-size-group input[type="range"] { background: var(--muted); }
:root[data-theme="dark"] .custom-slider-tick-label { color: var(--muted-foreground); }
:root[data-theme="dark"] .ai-suggested-label,
:root[data-theme="dark"] .tooltip.hint-tooltip .tooltip-close,
:root[data-theme="dark"] .tooltip.hint-tooltip .content-item .label,
:root[data-theme="dark"] .tooltip.hint-tooltip .content-item .value.suggestion {
  color: var(--warning-text);
}
:root[data-theme="dark"] .tooltip.rationale-tooltip .tooltip-close,
:root[data-theme="dark"] .tooltip.rationale-tooltip .rationale-header,
:root[data-theme="dark"] .tooltip.rationale-tooltip .rationale-label {
  color: var(--accent-color);
}
:root[data-theme="dark"] .brush-size-group .brush-size-value { color: var(--foreground); }
:root[data-theme="dark"] .bws-worst-label,
:root[data-theme="dark"] .bws-validation-error { color: var(--destructive-text); }
:root[data-theme="dark"] .potato-alert-success { color: var(--success-text); }
/* Bootstrap's dark kbd is a light chip; text here inherits light page text. */
:root[data-theme="dark"] kbd { background-color: var(--muted); color: var(--foreground); }

/* Cloze (fill-in-the-blank): blanks sit on the text line. */
.cloze-passage {
    line-height: 2.2;
    margin: 0.25rem 0 0;
}
.cloze-passage .cloze-blank {
    display: inline-block;
    height: 1.8em;
    padding: 0 0.4em;
    margin: 0 0.15em;
    font: inherit;
    line-height: 1.8em;
    vertical-align: baseline;
    border: 1px solid var(--border, #d4d4d8);
    border-radius: 0.375rem;
    background: var(--background, #fff);
    color: inherit;
}
.cloze-passage .cloze-blank:focus-visible {
    outline: 2px solid var(--ring, #6e56cf);
    outline-offset: 1px;
}

/* Sensitive-question designs (list_experiment, randomized_response): the
   statements, then the question's own form at the full width. */
.survey-experiment { width: 100%; grid-column: 1 / -1; }
.survey-experiment > .annotation-form { width: 100%; max-width: none; }
.survey-experiment-list { margin: 0.25rem 0 0.75rem; padding-left: 1.5rem; }
.survey-experiment-list li { margin: 0.2rem 0; }
.survey-experiment-note, .survey-experiment-randomizer { color: var(--muted-foreground); }
.survey-experiment-randomizer { border-left: 3px solid var(--border); padding-left: 0.75rem; }