/* The Word review drawer (US-161): one block family, word-review — the
 * column beside the viewer in the stage's workset row
 * (.word-review-drawer), the navigator the DrawerComponent renders
 * (.word-review, its head, filter and list) and the CardComponent
 * (.word-review-card). They share the provenance label, the quote and the
 * section vocabulary, so they live in one file on purpose. */

/* A column next to the document, never over it: the panel beside it
   shrinks, and the drawer keeps the document at least half the stage. */
.word-review-drawer {
  --drawer-width: min(400px, 45%);
  flex: 0 0 var(--drawer-width);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}
/* display: flex above beats the UA's hidden rule; restate it. */
.word-review-drawer[hidden] { display: none; }
.word-review-drawer:focus { outline: none; }
.word-review-drawer:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }

.word-review-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-block-end: 1px solid var(--tblr-border-color);
}

.word-review-drawer-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The body does not scroll as a whole: head, filter and the selected
   card stay put, only the list scrolls (so a selection far down the
   list never pushes its own card out of sight). */
.word-review-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* The frame wraps the whole content; keep it transparent to the body's
   flex column like the citation panel does. */
.word-review-drawer-body > turbo-frame {
  display: contents;
}

.word-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* --- head: caption + stepper --------------------------------------- */

.word-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-block-end: 1px solid var(--tblr-border-color);
}

.word-review-caption {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-review-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.word-review-step {
  --step-bg: transparent;
  --step-color: var(--tblr-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--tblr-border-radius);
  background: var(--step-bg);
  color: var(--step-color);
}
.word-review-step, .word-review-step:hover { text-decoration: none; }
.word-review-step:hover { --step-bg: var(--gxp-slate-100); --step-color: var(--tblr-primary); }
.word-review-step:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 1px; }

.word-review-position {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--tblr-body-color);
  min-width: 4.5rem;
  text-align: center;
}

/* --- filter ------------------------------------------------------------ */

.word-review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-block-end: 1px solid var(--tblr-border-color);
}

/* The status pair (US-228) sits before the origin filters, set apart by a rule. */
.word-review-filter-group {
  display: inline-flex;
  gap: 0.375rem;
  padding-inline-end: 0.5rem;
  border-inline-end: 1px solid var(--tblr-border-color);
}

.word-review-filter {
  --filter-bg: transparent;
  --filter-color: var(--tblr-secondary);
  --filter-border: var(--tblr-border-color);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--filter-border);
  border-radius: var(--tblr-border-radius-pill);
  background: var(--filter-bg);
  color: var(--filter-color);
  font-size: 0.8125rem;
  text-decoration: none;
}
.word-review-filter:hover { --filter-bg: var(--gxp-slate-100); --filter-color: var(--tblr-body-color); }
.word-review-filter, .word-review-filter:hover { text-decoration: none; }
.word-review-filter[aria-current="true"] {
  --filter-bg: var(--traqx-blue-100);
  --filter-color: var(--traqx-blue-700);
  --filter-border: var(--traqx-blue-300);
}

.word-review-filter-count {
  font-size: 0.75rem;
  opacity: 0.8;
}

.word-review-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
}

/* --- provenance label (US-227) ------------------------------------------ */

/* Where an item comes from, as an icon and words in place of a coloured
   dot. Neutral by default; only what asks the reviewer to act carries a
   colour, always next to a hint that says what to do. */
.word-review-provenance {
  --provenance-color: var(--gxp-slate-600);
  --provenance-bg: var(--gxp-slate-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-block-start: 0.15rem;
  min-width: 0;
}
.word-review-provenance[data-attention="warning"] {
  --provenance-color: var(--gxp-warning-700);
  --provenance-bg: var(--gxp-warning-100);
}
.word-review-provenance[data-attention="danger"] {
  --provenance-color: color-mix(in srgb, var(--gxp-danger) 70%, var(--gxp-slate-900));
  --provenance-bg: color-mix(in srgb, var(--gxp-danger) 12%, var(--tblr-bg-surface));
}

.word-review-provenance-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.05rem 0.45rem;
  border-radius: var(--tblr-border-radius-pill);
  background: var(--provenance-bg);
  color: var(--provenance-color);
  font-size: 0.75rem;
  font-weight: 600;
}
.word-review-provenance-label > svg { flex-shrink: 0; }
.word-review-provenance-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-review-provenance-hint {
  font-size: 0.75rem;
  color: var(--provenance-color);
}
.word-review-provenance-hint[data-hint="reason"] { color: var(--tblr-secondary); }

/* What the drawer holds, counted by provenance. */
.word-review-summary {
  margin: 0;
  padding: 0.4rem 1rem;
  border-block-end: 1px solid var(--tblr-border-color);
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

/* --- status pill (the decision line) -------------------------------------- */

.word-review-status {
  --status-bg: var(--gxp-slate-100);
  --status-color: var(--gxp-slate-700);
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  cursor: help;
  border-radius: var(--tblr-border-radius-pill);
  background: var(--status-bg);
  color: var(--status-color);
  font-size: 0.75rem;
  font-weight: 600;
}
.word-review-status[data-level="decided"] { --status-bg: var(--traqx-blue-100); --status-color: var(--traqx-blue-700); }

/* --- clamped text blocks -------------------------------------------------- */

.word-review-clamp[data-state="collapsed"] .word-review-clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.word-review-clamp-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tblr-primary);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.word-review-clamp-toggle[aria-expanded="true"] .word-review-clamp-more,
.word-review-clamp-toggle[aria-expanded="false"] .word-review-clamp-less { display: none; }

/* --- the entry's details ------------------------------------------------- */

/* Rendered only under its list entry: the entry (see .word-review-entry)
   is the surface, the details line up with the entry's title. */
.word-review-card {
  margin: 0 0 0.25rem;
  padding-block: 0 0.75rem;
  padding-inline: var(--entry-indent) 1rem;
}

.word-review-note {
  display: flex;
  align-items: center;
  margin: 0 0 0.4rem;
  color: var(--gxp-warning-700);
  font-size: 0.75rem;
}

/* The text delta in one line: struck before, arrow, inserted after. */
.word-review-diff {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.word-review-diff del { color: var(--gxp-danger); text-decoration: line-through; }
.word-review-diff ins { color: var(--gxp-success); text-decoration: none; }
.word-review-diff-arrow { margin-inline: 0.35rem; color: var(--tblr-secondary); }

.word-review-rationale,
.word-review-file-text {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  white-space: pre-wrap;
}
.word-review-rationale { color: var(--gxp-slate-600); font-style: italic; }

/* On what: the evidence the entry's provenance label names. */
.word-review-evidence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-block-end: 0.5rem;
}

.word-review-quote {
  margin: 0 0 0.4rem;
  padding: 0.35rem 0.6rem;
  border-inline-start: 3px solid var(--traqx-blue-200);
  background: var(--gxp-slate-50);
  font-size: 0.8125rem;
  white-space: pre-wrap;
}

/* The passage a verbatim check found in the user's message (US-226). */
.word-review-verbatim {
  padding: 0 0.1em;
  border-radius: 2px;
  background: var(--traqx-blue-100);
  color: inherit;
}

.word-review-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.word-review-source {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
}

.word-review-source-label { font-weight: 600; }

.word-review-source-verdict {
  --verdict-color: var(--gxp-success);
  display: inline-flex;
  color: var(--verdict-color);
  cursor: help;
}
.word-review-source[data-status="failed"] .word-review-source-verdict { --verdict-color: var(--gxp-warning-700); }
.word-review-source[data-status="unchecked"] .word-review-source-verdict { --verdict-color: var(--tblr-secondary); }

.word-review-source-link { font-weight: 600; }

/* A source: its name, the passage quoted from it, why it no longer
   holds. */
.word-review-source { flex-direction: column; align-items: stretch; }
.word-review-source-head { display: flex; align-items: center; gap: 0.35rem; }
.word-review-source .word-review-quote { margin-block-end: 0; }
.word-review-source-reason {
  margin: 0;
  font-size: 0.75rem;
  color: var(--gxp-warning-700);
}

.word-review-evidence-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

.word-review-decision {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* --- the list ------------------------------------------------------------ */

.word-review-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-block-end: 1rem;
  border-block-start: 1px solid var(--tblr-border-color);
}

.word-review-group + .word-review-group {
  margin-block-start: 0.5rem;
}

.word-review-group-heading {
  margin: 0;
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

.word-review-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One entry is one surface: header row and unfolded details share the
   background and the accent edge, so the details read as the entry's
   second level, not as a box hanging under it. The indent lines the
   details up with the title (the chevron and its gap). */
.word-review-entry {
  --entry-bg: transparent;
  --entry-accent: transparent;
  --entry-indent: calc(1rem + 14px + 0.5rem);
  background: var(--entry-bg);
  border-inline-start: 3px solid var(--entry-accent);
}
.word-review-entry[data-expanded="true"] {
  --entry-bg: var(--traqx-blue-50);
  --entry-accent: var(--tblr-primary);
}

.word-review-row {
  --row-bg: transparent;
  --row-title-color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--row-bg);
}
/* The entry is a link, but it is a list row: it keeps the body colour
   and never underlines; hovering only shades it. */
.word-review-row, .word-review-row:hover { color: var(--tblr-body-color); text-decoration: none; }
.word-review-row:hover { --row-bg: var(--gxp-slate-50); }
.word-review-entry[data-expanded="true"] .word-review-row:hover { --row-bg: var(--traqx-blue-100); }
.word-review-row:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.word-review-row[aria-expanded="true"] { --row-title-color: var(--traqx-blue-700); }
.word-review-row[aria-expanded="true"] .word-review-row-summary { display: none; }

/* An item without a pin: a flag at the row's end, its reason on hover. */
.word-review-row-flag {
  margin-inline-start: auto;
  margin-block-start: 0.15rem;
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gxp-warning-700);
  cursor: help;
}

.word-review-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.word-review-row-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--row-title-color);
}

/* Two lines at most: the row says what changed, the details say the rest. */
.word-review-row-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  overflow-wrap: anywhere;
}

.word-review-row-meta {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

/* The unfold indicator in front of the entry, like a tree view: it
   turns down when the entry is open, so the gesture reads before the
   first click. */
.word-review-chevron {
  --chevron-turn: 0deg;
  flex-shrink: 0;
  display: inline-flex;
  margin-block-start: 0.2rem;
  color: var(--gxp-slate-400);
  transform: rotate(var(--chevron-turn));
  transition: transform 0.18s ease;
}
.word-review-row[aria-expanded="true"] .word-review-chevron { --chevron-turn: 90deg; }

/* The details unfold: a grid row growing from 0fr to 1fr, which
   animates to the content's own height (a fresh render per selection,
   hence a keyframe animation rather than a transition). */
.word-review-details {
  display: grid;
  grid-template-rows: 1fr;
  animation: word-review-unfold 0.2s ease-out;
}
.word-review-details-inner {
  min-height: 0;
  overflow: hidden;
}
@keyframes word-review-unfold {
  from { grid-template-rows: 0fr; opacity: 0.4; }
  to { grid-template-rows: 1fr; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .word-review-details { animation: none; }
  .word-review-chevron { transition: none; }
}

/* --- Deciding (US-162) -------------------------------------------------- */

/* The decision block stacks: the status line, the reason, then the
   actions or why there are none. */
.word-review-decision {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.word-review-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

/* Accept and Reject side by side; each is its own button_to form. */
.word-review-actions {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 0.15rem;
}
.word-review-decide-form { display: inline; margin: 0; }

/* Why the open operation cannot be decided here: quiet, not an error. */
.word-review-blocker {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

/* A refused attempt: nothing happened, and why. */
.word-review-refusal {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-inline-start: 3px solid var(--gxp-warning-700);
  background: var(--gxp-warning-100);
  color: var(--gxp-warning-700);
  font-size: 0.8125rem;
}
.word-review-refusal-changes { margin: 0; padding-inline-start: 1.1rem; }
.word-review-refusal-link { color: inherit; text-decoration: underline; }