/* The review layer of the Word viewer (US-161), block viewer-review:
 * change bars in the page margin, passage halos and the page marker,
 * plus the toolbar toggle and the "show decided" switch.
 *
 * Linked by the viewer iframe, which loads no app bundle (FE-18) — so the
 * tokens are pinned with their effective values as fallbacks and every
 * rule is scoped to the viewer's own blocks (this file is also served
 * app-wide via the components directory; nothing here may leak). */

/* The toolbar's left end: the drawer toggle and the switch. */
.viewer-review-tools {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}

.viewer-review-toggle {
  --toggle-bg: transparent;
  --toggle-color: var(--gxp-slate-500, #566a8a);
  --toggle-border: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--toggle-border);
  border-radius: var(--tblr-border-radius-pill, 9999px);
  background: var(--toggle-bg);
  font: inherit;
  font-size: 12.5px;
  color: var(--toggle-color);
  cursor: pointer;
}
.viewer-review-toggle:hover { --toggle-bg: var(--gxp-slate-200, #d9e3ee); --toggle-color: var(--traqx-blue-600, #026cff); }
.viewer-review-toggle:focus-visible { outline: 2px solid var(--traqx-blue-600, #026cff); outline-offset: 1px; }
/* The split count is the longest label; where the drawer narrows the
   viewer, it gives way to the icon before it runs into the variant tabs
   (the accessible name keeps the counts). */
@media (max-width: 960px) {
  .viewer-review-toggle--split .viewer-review-toggle-text { display: none; }
}
.viewer-review-show-decided { padding-inline: 7px; }
.viewer-review-show-decided[aria-pressed="true"] {
  --toggle-bg: var(--tblr-bg-surface, #ffffff);
  --toggle-color: var(--gxp-slate-700, #2a3a4f);
  --toggle-border: var(--gxp-slate-300, #b3c4db);
}

/* Each page renders its open layer and, when it carries decided items,
   an all layer beside it (US-225). The switch on the root picks one;
   a layer without a scope serves both. */
.viewer-review-layer[data-review-scope="all"] { display: none; }
[data-review-show-decided] .viewer-review-layer[data-review-scope="all"] { display: block; }
[data-review-show-decided] .viewer-review-layer[data-review-scope="open"] { display: none; }

/* The layer covers the page image exactly; only the tabs take pointer
   events, so the page beneath stays scrollable and selectable. */
.viewer-review-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.viewer-review-item {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The tab: an outlined bar on the page's left edge spanning the
   passage, the way an editor's gutter outlines a changed range (a
   proposal from the design review). A light fill inside a two pixel
   stroke keeps it quiet; the current one is filled solid, pointing at
   it darkens the stroke. The button itself is invisible: ::after draws
   the bar, ::before is the hand's target, a 32px column reaching 12px
   beyond the bar's ends. Coming near (into that column) lets the bar
   grow a few pixels in every direction, so the thing under the hand
   feels bigger than the quiet mark it rests as. */
.viewer-review-tab {
  --tab-ink: var(--traqx-blue-600, #026cff);
  --tab-fill: var(--traqx-blue-50, #f0f7ff);
  --tab-current-fill: var(--traqx-blue-700, #0256cc);
  --tab-stroke-style: solid;
  --tab-outline: none;
  --tab-count-visibility: hidden;
  --tab-grow: 0px;
  position: absolute;
  inset-block-start: var(--tab-y);
  inset-inline-start: -6px;
  inline-size: 8px;
  block-size: var(--tab-h);
  min-block-size: 16px;
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  outline: var(--tab-outline);
  outline-offset: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.viewer-review-tab::before {
  content: "";
  position: absolute;
  inset-block: -12px;
  inset-inline-start: -10px;
  inline-size: 32px;
}
.viewer-review-tab::after {
  content: "";
  position: absolute;
  inset-block: calc(-1 * var(--tab-grow));
  inset-inline-start: calc(-1 * var(--tab-grow));
  inset-inline-end: calc(-1.5 * var(--tab-grow));
  box-sizing: border-box;
  border: 2px var(--tab-stroke-style) var(--tab-ink);
  border-radius: var(--tblr-border-radius-sm, 2px);
  background: var(--tab-fill);
  background-clip: padding-box;
  pointer-events: none;
  transition: inset 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out;
}
/* Decided items, shown on request: one grey for every kind, so a
   decided change never looks like work still to do.
   The selectors outrank the hover and current rules below. */
.viewer-review-item--decided .viewer-review-tab,
.viewer-review-item--decided .viewer-review-tab:hover,
.viewer-review-item--decided .viewer-review-tab:focus-visible {
  --tab-ink: var(--gxp-slate-400, #8096b5);
  --tab-fill: var(--gxp-slate-100, #edf2f7);
}
.viewer-review-item.viewer-review-item--decided[data-review-current] .viewer-review-tab {
  --tab-ink: var(--gxp-slate-500, #566a8a);
  --tab-fill: var(--gxp-slate-300, #b3c4db);
}
/* Marks people left in the file: a dashed stroke, and the current one
   stays light so the dashes remain readable. */
.viewer-review-item[data-kind="people"] .viewer-review-tab {
  --tab-stroke-style: dashed;
  --tab-current-fill: var(--traqx-blue-100, #e5f0ff);
}
.viewer-review-tab:hover,
.viewer-review-tab:focus-visible {
  --tab-ink: var(--traqx-blue-700, #0256cc);
  --tab-fill: var(--traqx-blue-100, #e5f0ff);
  --tab-count-visibility: visible;
  --tab-grow: 3px;
}
.viewer-review-item[data-review-current] .viewer-review-tab {
  --tab-ink: var(--traqx-blue-700, #0256cc);
  --tab-fill: var(--tab-current-fill);
  --tab-count-visibility: visible;
}
.viewer-review-tab:focus-visible {
  --tab-outline: 2px solid var(--traqx-blue-700, #0256cc);
}
/* Open bars are blue; where an open agent change asks the reviewer to
   act, the bar takes the colour of its provenance label in the drawer
   (US-227): warning for a changed source, danger for nothing provable.
   Pointing at it or selecting it keeps the colour. Decided bars stay
   grey (their item carries no attention). */
.viewer-review-item[data-attention="warning"] .viewer-review-tab {
  --tab-ink: var(--gxp-warning-700, #b45309);
  --tab-fill: var(--gxp-warning-100, #fef3c7);
  --tab-current-fill: var(--gxp-warning, #f59e0b);
}
.viewer-review-item[data-attention="danger"] .viewer-review-tab {
  --tab-ink: var(--gxp-danger, #ef4444);
  --tab-fill: color-mix(in srgb, var(--gxp-danger, #ef4444) 12%, var(--tblr-bg-surface, #ffffff));
  --tab-current-fill: var(--gxp-danger, #ef4444);
}
.viewer-review-item[data-attention][data-review-current] .viewer-review-tab {
  --tab-fill: var(--tab-current-fill);
}
/* Several items on one line: a small badge beside the bar's start,
   shown while the bar is pointed at or current. */
.viewer-review-tab-count {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(100% + 4px);
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  box-sizing: border-box;
  min-inline-size: 18px;
  min-block-size: 18px;
  padding-inline: 4px;
  border: 1px solid var(--traqx-blue-200, #cce0ff);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-bg-surface, #ffffff);
  color: var(--traqx-blue-700, #0256cc);
  font: 600 11px/16px var(--tblr-font-sans-serif, "DM Sans", -apple-system, "Segoe UI", sans-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  visibility: var(--tab-count-visibility);
  pointer-events: none;
}
/* A shared bar counts open and decided items apart: the decided share
   in grey after the open one. */
.viewer-review-count-decided {
  color: var(--gxp-slate-500, #566a8a);
}
.viewer-review-tab-count > span + .viewer-review-count-decided,
.viewer-review-marker > span + .viewer-review-count-decided {
  margin-inline-start: 4px;
  padding-inline-start: 4px;
  border-inline-start: 1px solid var(--gxp-slate-300, #b3c4db);
}

/* The halo over the passage's lines: quiet, and only while the reviewer
   points at the tab or the drawer points at the item. */
.viewer-review-halo {
  --halo-opacity: 0;
  position: absolute;
  inset-inline-start: var(--halo-x);
  inset-block-start: var(--halo-y);
  width: var(--halo-w);
  height: var(--halo-h);
  border-radius: var(--tblr-border-radius-sm, 2px);
  background: var(--traqx-blue-200, #cce0ff);
  opacity: var(--halo-opacity);
  mix-blend-mode: multiply;
  transition: opacity 0.12s ease;
}
.viewer-review-halo--decided { background: var(--gxp-slate-200, #d9e3ee); }
.viewer-review-item:hover .viewer-review-halo,
.viewer-review-item:focus-within .viewer-review-halo,
.viewer-review-item[data-review-current] .viewer-review-halo {
  --halo-opacity: 0.7;
}

/* Items whose page is certain but whose spot is not: one counter at the
   page's top edge, never a tab that pretends to know. */
.viewer-review-marker {
  --marker-outline: none;
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px dashed var(--traqx-blue-600, #026cff);
  border-radius: var(--tblr-border-radius-pill, 9999px);
  background: var(--traqx-blue-50, #f0f7ff);
  color: var(--traqx-blue-700, #0256cc);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  outline: var(--marker-outline);
  outline-offset: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.viewer-review-marker:focus-visible,
.viewer-review-marker[data-review-current] {
  --marker-outline: 2px solid var(--traqx-blue-600, #026cff);
}
.viewer-review-marker[data-attention="warning"] {
  border-color: var(--gxp-warning-700, #b45309);
  background: var(--gxp-warning-100, #fef3c7);
  color: var(--gxp-warning-700, #b45309);
}
.viewer-review-marker[data-attention="danger"] {
  border-color: var(--gxp-danger, #ef4444);
  background: color-mix(in srgb, var(--gxp-danger, #ef4444) 12%, var(--tblr-bg-surface, #ffffff));
  color: color-mix(in srgb, var(--gxp-danger, #ef4444) 70%, var(--gxp-slate-900, #0c1525));
}
.viewer-review-marker--decided {
  border-color: var(--gxp-slate-400, #8096b5);
  background: var(--gxp-slate-100, #edf2f7);
  color: var(--gxp-slate-500, #566a8a);
}

@media (prefers-reduced-motion: reduce) {
  .viewer-review-halo, .viewer-review-tab::after { transition: none; }
}