/* Screen 3 — lawyer review workspace.
 * Restrained Nordic legal editorial: evidence and responsibility before dashboard chrome.
 */

/* The workspace fills the width `main` grants it. Previously it re-clamped itself to
   --shell-max, so on a 1920px display a 1500px workspace floated inside a 1896px main. */
.review-workspace-view {
  width: 100%;
  margin: 0 auto;
}

.review-view-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.review-case-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: var(--border-hair) solid var(--rule-strong);
  border-bottom: var(--border-band) solid var(--ink-900);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}

.review-case-identity { min-width: 0; }

.review-case-header h1 {
  margin-top: var(--space-1);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.review-case-meta {
  margin-top: var(--space-2);
  color: var(--slate-600);
  font-variant-numeric: tabular-nums;
}

.review-case-facts {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}

.review-export-actions {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-width: 9rem;
  padding-left: var(--space-4);
  border-left: var(--border-hair) solid var(--rule);
}

.review-export-actions .action { justify-content: center; }

.input-coverage,
.review-counts {
  display: grid;
  align-content: center;
  min-width: 12rem;
  padding-left: var(--space-4);
  border-left: var(--border-hair) solid var(--rule);
}

.input-coverage { max-width: 24rem; }

.coverage-label,
.review-counts span,
.coverage-architecture {
  color: var(--slate-600);
  font-size: var(--text-2xs);
}

.coverage-label {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.input-coverage strong {
  margin: var(--space-1) 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.review-counts { text-align: right; }
.review-counts strong { font-size: var(--text-lg); }

.responsibility-notice {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--partial-rule);
  border-left-width: var(--border-gutter-strong);
  background: var(--decision-surface);
  box-shadow: var(--shadow-panel);
}

.responsibility-notice > strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-900);
  font-size: var(--text-sm);
}

.responsibility-notice p {
  margin: var(--space-1) 0;
  font-size: var(--text-sm);
}

.completeness-warning {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 3px solid var(--alert-rule);
  background: var(--alert-tint);
  color: var(--alert-ink);
}

.completeness-warning p { margin: 0; }
.equal-coverage-note { color: var(--graphite-800); font-weight: var(--weight-semibold); }

.review-grid {
  display: grid;
  grid-template-columns: minmax(var(--rail-width-min), var(--rail-width)) minmax(0, 1fr);
  align-items: stretch;
  min-height: 48rem;
  border: var(--border-hair) solid var(--rule-strong);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}

.claim-pane {
  position: sticky;
  top: var(--space-4);
  display: flex;
  min-width: 0;
  max-height: calc(100vh - (2 * var(--space-4)));
  flex-direction: column;
  border-right: var(--border-hair) solid var(--rule-strong);
  background: var(--paper-sunken);
}

.claim-pane-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-hair) solid var(--rule);
  background: var(--paper);
}

.claim-pane-heading h2 { font-size: var(--text-md); }

.quiet-button {
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.quiet-button:hover:not(:disabled) { background: var(--info-tint); }

/* Two of these four filters carry long Swedish values (category names with counts, claim
   types), so they take the full rail width; the two short status filters pair up. This is
   what keeps every option inside its control instead of overflowing it. */
.review-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-hair) solid var(--rule);
  background: var(--paper);
}

.review-filters label:has(#review-feature-filter),
.review-filters label:has(#review-kind-filter) { grid-column: 1 / -1; }

.review-filters label,
.review-note-grid label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--graphite-800);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.review-filters .search-filter { grid-column: 1 / -1; }
/* box-sizing: border-box is already global; min-width: 0 stops the intrinsic width of a
   long <option> from forcing the control past its grid track. */
.review-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.claim-list-status {
  border-bottom: var(--border-hair) solid var(--rule);
  background: var(--paper);
}

.filtered-count {
  margin: 0;
  padding: var(--space-2) var(--space-4) 0;
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.keyboard-help {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  color: var(--slate-600);
  font-size: var(--text-2xs);
  line-height: 1.6;
}

.claim-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  scrollbar-gutter: stable;
}

.claim-group { margin-bottom: var(--space-4); }
.claim-group:last-child { margin-bottom: 0; }

.claim-group-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--on-ink);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.claim-group-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-bold); }

.claim-group-count {
  flex: 0 0 auto;
  color: var(--on-ink-muted);
  font-weight: var(--weight-normal);
}

.claim-group-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim-list-item { min-width: 0; }

.claim-row {
  position: relative;
  display: grid;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hair) solid var(--rule);
  border-left: var(--border-gutter) solid var(--neutral-rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--graphite-800);
  text-align: left;
}

.claim-row:hover { border-color: var(--ink-500); }

.claim-row[aria-current="true"] {
  border-left-color: var(--ink-900);
  box-shadow: inset 3px 0 0 var(--ink-900);
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 1px;
  background: var(--info-tint);
}

.claim-row.verify-supported { border-left-color: var(--supported-rule); }
.claim-row.verify-partial { border-left-color: var(--partial-rule); border-left-style: dashed; }
.claim-row.verify-no_citation { border-left-color: var(--neutral-rule); }

.claim-list-item:is(.verify-unsupported, .verify-missing_page) .claim-row {
  border-width: 1px 1px 1px var(--border-gutter-strong);
  border-left-color: var(--alert-rule);
  background: var(--alert-tint);
  box-shadow: inset 0 0 0 1px var(--alert-rule);
}

.claim-list-item:is(.verify-unsupported, .verify-missing_page) .claim-row::after {
  position: absolute;
  top: 50%;
  left: -1px;
  width: 0.45rem;
  height: 0.8rem;
  transform: translateY(-50%);
  background: var(--paper-sunken);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}

.claim-row-heading { display: grid; gap: var(--space-1); min-width: 0; }

.claim-row-title {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  min-width: 0;
  font-weight: var(--weight-bold);
}

/* A stable per-category index. It disambiguates two claims with similar wording without
   putting an internal identifier in front of the lawyer. */
.claim-row-ordinal {
  flex: 0 0 auto;
  color: var(--slate-450);
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
}

.claim-row-title-text { min-width: 0; overflow-wrap: anywhere; }
.claim-row-kind { color: var(--slate-600); font-size: var(--text-2xs); }

.claim-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--slate-600);
  font-size: var(--text-2xs);
}

.claim-row-pages { margin-left: auto; }

.claim-filter-empty {
  padding: var(--space-6) var(--space-4);
  border: var(--border-hair) solid var(--rule);
  background: var(--paper);
  color: var(--slate-600);
  text-align: center;
}

.claim-filter-empty p { margin-top: var(--space-2); }

.claim-detail-pane {
  min-width: 0;
  padding: var(--space-5);
  background: var(--paper);
}

.empty-detail {
  display: grid;
  min-height: 30rem;
  place-items: center;
  padding: var(--space-8);
  color: var(--slate-600);
  text-align: center;
}

.provenance-spine {
  display: grid;
  gap: var(--space-3);
  max-width: 100%;
}

.provenance-band {
  position: relative;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--rule);
}

.provenance-label {
  margin: 0 0 var(--space-3);
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.provenance-band--ai {
  border-left: 3px dotted var(--ink-700);
  background: var(--paper);
}

.provenance-band--verifier {
  border-left: 3px solid var(--slate-600);
  background: var(--paper-sunken);
}

.provenance-band--source {
  border: 2px solid var(--rule-strong);
  background: var(--doc-canvas);
}

.provenance-band--human {
  border-left: var(--border-band) solid var(--ink-900);
  background: var(--decision-surface);
}

.claim-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

.claim-feature {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.claim-kind {
  margin: var(--space-2) 0 0;
  color: var(--slate-600);
  font-size: var(--text-xs);
}

.claim-kind:empty { display: none; }

.claim-detail-header h2 {
  max-width: var(--reading-max);
  margin-top: var(--space-2);
  font-size: clamp(var(--text-lg), 2.4vw, var(--text-xl));
  overflow-wrap: anywhere;
}

.claim-full-text {
  max-width: var(--reading-max);
  margin: var(--space-4) 0 0;
  font-size: 1.0625rem;
  line-height: var(--leading-reading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.verifier-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

#claim-verification .status-badge {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-width: 2px;
  font-size: var(--text-xs);
}

#claim-verification .status-badge.tone-alert { border-width: 3px; }

/* Claim-specific consequence: visible at all times, weighted by the verifier's outcome. */
.verification-consequence {
  max-width: var(--reading-max);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.verification-consequence[data-verification-tone="alert"] {
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-gutter-strong) solid var(--alert-rule);
  background: var(--alert-tint);
  color: var(--alert-ink);
}

.verification-consequence[data-verification-tone="partial"] { color: var(--partial-ink); }
.verification-consequence[data-verification-tone="neutral"] { color: var(--neutral-ink); }

/* Progressive disclosure for the generic policy explanation. The three lines of identical
   prose that used to sit above every claim in the case live here instead. */
.verification-disclosure,
.technical-reference {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--rule);
}

.verification-disclosure > summary,
.technical-reference > summary {
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.verification-meaning {
  max-width: var(--reading-max);
  margin: var(--space-3) 0 0;
  color: var(--graphite-800);
  font-size: var(--text-sm);
}

.verification-meaning p + p { margin-top: var(--space-2); }

.technical-reference-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.technical-reference-facts dt {
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.technical-reference-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
}

.verifier-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.verifier-facts > div {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: var(--border-hair) solid var(--rule);
}

.verifier-facts dt {
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.verifier-facts dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.provenance-band--human h2 { margin-bottom: var(--space-3); }

.review-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.review-status-buttons button {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.review-status-buttons button[aria-pressed="true"] {
  border-width: 2px;
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 1px;
}

.review-status-buttons button.review-confirmed { color: var(--supported-ink); background: var(--supported-tint); }
.review-status-buttons button.review-needs_review { color: var(--partial-ink); background: var(--partial-tint); border-style: dashed; }
.review-status-buttons button.review-false_positive { color: var(--alert-ink); background: var(--alert-tint); border-width: 3px; }
.review-status-buttons button:is(.review-unreviewed, .review-not_relevant, .review-unknown) { color: var(--neutral-ink); background: var(--neutral-tint); }

.review-note-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 0.35fr) minmax(18rem, 1fr);
  gap: var(--space-3);
}

.review-note-grid :is(input, textarea) { width: 100%; }

.save-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.5rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--rule);
}

.save-state {
  margin: 0;
  color: var(--slate-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.save-state[data-save-state="dirty"] { color: var(--partial-ink); }
.save-state[data-save-state="saving"] { color: var(--ink-700); }
.save-state[data-save-state="saved"] { color: var(--supported-ink); }
.save-state[data-save-state="failed"] { color: var(--alert-ink); font-weight: var(--weight-bold); }

@media (max-width: 1180px) {
  /* Never below the rail's own minimum: a narrower rail is what clipped filter values. */
  .review-grid { grid-template-columns: minmax(var(--rail-width-min), 38%) minmax(0, 62%); }
  /* At this rail width even "Behöver granskas" did not fit a half-width control
     (measured 132px of text in 94px of usable space at 200% zoom), so all four filters
     take the full rail until the rail becomes the full page width at 900px. */
  .review-filters { grid-template-columns: 1fr; }
  .review-case-header { align-items: start; flex-direction: column; }
  .review-case-facts { width: 100%; }
  .input-coverage { flex: 1; padding-left: 0; border-left: 0; }
}

@media (max-width: 900px) {
  .review-grid { grid-template-columns: 1fr; }
  /* The rail is now the full page width, so the pairing is legible again. */
  .review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-filters label:has(#review-feature-filter),
  .review-filters label:has(#review-kind-filter) { grid-column: 1 / -1; }
  .claim-pane {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: var(--border-hair) solid var(--rule-strong);
  }
  .claim-list { max-height: 34rem; }
  .verifier-facts { grid-template-columns: 1fr; }
}

/* A native <select> cannot wrap. At 320px the longest selected category still exceeded
   the usable control width when either the count suffix was removed or the text was stepped
   down alone. The frontend therefore omits the duplicated count suffix at this breakpoint
   (counts remain in the sticky group headings) and uses the existing 2xs token. No value is
   clipped or replaced with an ellipsis. */
@media (max-width: 520px) {
  .review-filters select { font-size: var(--text-2xs); }
}

@media (max-width: 680px) {
  .review-view-nav,
  .review-case-facts,
  .claim-pane-heading,
  .verifier-heading,
  .save-state-row {
    align-items: stretch;
    flex-direction: column;
  }
  .review-counts,
  .input-coverage {
    width: 100%;
    padding: var(--space-3) 0 0;
    border-top: var(--border-hair) solid var(--rule);
    border-left: 0;
    text-align: left;
  }
  .review-filters,
  .review-note-grid { grid-template-columns: 1fr; }
  .review-filters .search-filter { grid-column: auto; }
  .claim-detail-pane { padding: var(--space-3); }
  .provenance-band { padding: var(--space-4); }
  .review-status-buttons { display: grid; grid-template-columns: 1fr; }
}