/* Shared finding, citation and evidence components.
 *
 * These styles serve the primitives in findings.js and citations.js, which every workspace
 * now renders through. Route-specific tweaks are deliberately absent: a contradiction, a
 * buried fact and a piece of charge evidence must look identical as findings, because they
 * carry identical epistemic weight.
 *
 * The visual system is inherited from tokens.css and not re-invented here. No new colour
 * values are introduced; every tone resolves to an existing status token so a status can
 * never acquire a treatment its meaning does not license.
 */

/* ---------------------------------------------------------------------------
 * Citations.
 *
 * A citation is a quiet navigational affordance, not a status. It deliberately does not
 * use the supported/green treatment: pointing at a page and having support confirmed on
 * that page are different claims, and one must never be allowed to imply the other.
 * ------------------------------------------------------------------------ */
.citation-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.citation-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink-700);
  font-size: var(--text-xs);
  text-decoration: none;
}

.citation-chip:hover { border-color: var(--rule-strong); background: var(--info-tint); }

.citation-glyph { color: var(--slate-450); }

/* Long document titles wrap instead of forcing the page to scroll sideways. */
.citation-text { min-width: 0; overflow-wrap: anywhere; }

/* An unresolvable citation is still information, so it is shown — visibly inert. */
.citation-chip--unresolved {
  border-style: dashed;
  background: var(--paper-sunken);
  color: var(--slate-600);
}

.citation-empty { margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------------------
 * Finding card.
 * ------------------------------------------------------------------------ */
.finding-card { display: grid; gap: var(--space-1); }

.finding-title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.workspace-finding--compact .finding-title { font-size: var(--text-base); }

.finding-text {
  max-width: var(--reading-max);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-reading);
}

.band-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* The claim-specific outcome. Never behind a disclosure, and never styled as decoration. */
.verifier-consequence {
  margin: var(--space-2) 0 0;
  color: var(--graphite-800);
  font-size: var(--text-sm);
}

.verifier-disclosure { margin-top: var(--space-2); }
.verifier-disclosure summary { font-size: var(--text-xs); }

.review-note {
  max-width: var(--reading-max);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-normal);
}

.workspace-review-action { margin-top: var(--space-3); }

/* Identifiers are available but never compete with the finding. */
.finding-technical { margin-top: var(--space-2); }
.finding-technical summary { color: var(--slate-600); font-size: var(--text-xs); }
.definition-grid--compact { gap: var(--space-2); font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
 * Significance.
 *
 * Compact by default. An assessment that does not exist costs one line, not a panel.
 * ------------------------------------------------------------------------ */
.workspace-significance {
  /* review.css set a border-left-color with no width or style, so the assessment band
     never actually drew its edge. The band is a provenance layer and needs one, in the
     assessment tone so it is never mistaken for a verifier result. */
  border-left: var(--border-band) solid var(--assessment-rule);
  padding: var(--space-3) var(--space-4);
}

.workspace-significance summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.workspace-significance--compact > .significance-text,
.workspace-significance--compact > .secondary-note { font-size: var(--text-xs); }

.significance-text { max-width: var(--reading-max); margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------------------
 * Records and sections shared by the workspaces.
 * ------------------------------------------------------------------------ */
.record-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  /* Long Swedish compounds and full names must not push the layout sideways. */
  overflow-wrap: anywhere;
}

.dossier-head {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair) solid var(--rule-hair);
  margin-bottom: var(--space-4);
}

.dossier-roles { margin: var(--space-1) 0 0; color: var(--slate-600); font-size: var(--text-sm); }

.dossier-section { margin-top: var(--space-5); }
.dossier-section > h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }

.workspace-group { margin-top: var(--space-3); }
.workspace-group > summary { font-weight: var(--weight-semibold); }

.workspace-intro { max-width: var(--reading-max); margin-bottom: var(--space-4); }

.section-title { font-family: var(--font-display); font-size: var(--text-lg); }

.mention-list { margin: 0; padding: 0; list-style: none; }

/* A mention is a role plus a source chip, not a Markdown-looking bullet with a raw URL. */
.mention-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hair) solid var(--rule-hair);
}

.mention-role { color: var(--slate-600); font-size: var(--text-xs); }

.dossier-ask { margin-top: var(--space-4); }

/* ---------------------------------------------------------------------------
 * Contradictions.
 *
 * The comparison is the page. Both sides get equal weight: styling one as the "true" side
 * would assert a conclusion the product does not draw. Red is avoided here for the same
 * reason — a flagged pair is a candidate for review, not a proven conflict.
 * ------------------------------------------------------------------------ */
.contradiction-passages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.contradiction-passages--partial { grid-template-columns: minmax(0, 1fr); }

.contradiction-passage {
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}

.contradiction-versus {
  margin: 0;
  color: var(--slate-450);
  font-size: var(--text-xs);
  font-style: italic;
  text-align: center;
}

/* Source text is quoted material and reads as such: not as an AI answer. */
.source-passage {
  max-width: var(--reading-max);
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
  border-left: var(--border-band) solid var(--rule-strong);
  color: var(--graphite-800);
  font-family: var(--font-display);
  line-height: var(--leading-reading);
}

/* ---------------------------------------------------------------------------
 * Timeline.
 * ------------------------------------------------------------------------ */
.timeline-section { margin-bottom: var(--space-8); }

/* Undated material is separated by a rule and a recessed surface, never interleaved into
 * a chronology it has no position in. */
.timeline-section--undated {
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--rule);
}

.timeline-what {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.timeline-when {
  margin: 0;
  color: var(--ink-700);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}

.timeline-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.timeline-honesty { margin: var(--space-2) 0 0; }
.timeline-detail { margin-top: var(--space-2); }
.timeline-detail summary { font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
 * Charge and evidence (F5).
 * ------------------------------------------------------------------------ */

/* The source allegation is source material and is styled as a document extract: warm
 * paper, display face, a heavy source rule. It must not borrow the visual language of an
 * AI finding, because it was not authored by the model. */
.charge-source {
  padding: var(--space-5);
  border-left: var(--border-gutter-strong) solid var(--ink-900);
  background: var(--paper-raised);
}

.charge-source--material { border-left-color: var(--ink-900); }

/* A model-owned grouping that reaches this slot is marked as such, with a lighter,
 * dashed edge so it never reads as source-owned. */
.charge-source--model {
  border-left-style: dashed;
  border-left-color: var(--assessment-rule);
  background: var(--paper-sunken);
}

.charge-statement {
  max-width: var(--reading-max);
  margin: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-reading);
}

.evidence-map-grid { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.evidence-map-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evidence-group { min-width: 0; }
.evidence-group > h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.evidence-group--supporting { border-left: var(--border-gutter) solid var(--supported-rule); padding-left: var(--space-4); }
.evidence-group--undermining { border-left: var(--border-gutter) solid var(--partial-rule); padding-left: var(--space-4); }
.evidence-row-list { display: grid; gap: var(--space-3); }
.evidence-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-hair) solid var(--rule);
  background: var(--paper-raised);
}
.evidence-row-text { margin: 0; line-height: var(--leading-reading); }
.evidence-row-main .citation-list { margin-top: var(--space-2); }
.evidence-row-statuses { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.evidence-row-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.evidence-row-status-label { color: var(--slate-600); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.evidence-row-details > summary { cursor: pointer; color: var(--ink-700); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.evidence-row-details .workspace-significance { margin-top: var(--space-3); }

.workspace-model-grouping { margin-top: var(--space-5); }
.workspace-model-grouping summary { font-weight: var(--weight-semibold); }

/* Legal sources are their own citation namespace and never inherit case-verification
 * tones. Statute text gets a reading measure rather than the full grid width. */
.legal-source-card {
  padding: var(--space-4);
  border: var(--border-hair) solid var(--legal-source-rule);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
  background: var(--legal-source-tint);
}

.legal-source-title { margin: var(--space-2) 0; font-size: var(--text-base); }

.legal-text {
  max-width: var(--reading-max);
  margin: var(--space-3) 0;
  padding-left: var(--space-4);
  border-left: var(--border-band) solid var(--legal-source-rule);
  font-family: var(--font-display);
  line-height: var(--leading-reading);
}

/* ---------------------------------------------------------------------------
 * Interview comparison.
 *
 * Contradiction, addition and omission stay distinguishable by edge treatment as well as
 * by their Swedish label, so an addition is never mistaken for a conflict.
 * ------------------------------------------------------------------------ */
.interview-comparison-pair {
  padding: var(--space-4);
  border: var(--border-hair) solid var(--rule);
  border-left-width: var(--border-gutter);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
  background: var(--paper-raised);
}

.comparison-kind--contradiction { border-left-color: var(--partial-rule); }
.comparison-kind--addition { border-left-color: var(--info-ink); }
.comparison-kind--omission { border-left-color: var(--neutral-rule); }

.interview-comparison-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.interview-comparison-side { min-width: 0; }
.interview-comparison-actions { margin-top: var(--space-5); }
.interview-comparison-result { margin-top: var(--space-3); }

/* ---------------------------------------------------------------------------
 * Narrow widths and high zoom.
 *
 * Completeness beats layout fidelity: a side-by-side comparison stacks rather than
 * shrinking below a readable measure, and nothing is dropped on the way down.
 * ------------------------------------------------------------------------ */
@media (max-width: 60rem) {
  .evidence-map-grid--split { grid-template-columns: minmax(0, 1fr); }
  .contradiction-passages {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  /* The separator stops being a column and becomes a line between the two passages. */
  .contradiction-versus { text-align: left; }

  .interview-comparison-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .charge-source { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3); }
  .evidence-group--supporting,
  .evidence-group--undermining { padding-left: var(--space-3); }

  .mention-row { align-items: flex-start; flex-direction: column; gap: var(--space-1); }

  /* Chips are already flex-wrapped; this keeps a long document title from setting a
     minimum width that would force horizontal page scrolling. */
  .citation-chip { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * Draft workbench.
 *
 * Drafts are lawyer-owned working material. The surface is styled as a workbench —
 * editable, provisional, clearly in progress — rather than as a finished document, so a
 * generated draft is never mistaken for a deliverable.
 * ------------------------------------------------------------------------ */
.draft-instruction-field { max-width: var(--reading-max); margin-bottom: var(--space-5); }

.draft-instruction-field > label {
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* An optional field says so in its label rather than leaving the lawyer to discover it
   by submitting. */
.field-optional { color: var(--slate-600); font-weight: var(--weight-normal); }

.draft-instruction-field .field-help { margin: var(--space-1) 0 var(--space-2); }

.draft-instruction-field textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}

/* Three named tasks, not three identical grey buttons. Each states what it produces. */
.draft-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.draft-task {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}

.draft-task h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.draft-task p {
  flex: 1;
  margin: 0;
  color: var(--slate-600);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.draft-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-band) solid var(--partial-rule);
  margin-bottom: var(--space-4);
  background: var(--partial-tint);
}

.draft-progress-status { margin: 0; font-size: var(--text-sm); }

.draft-record {
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  background: var(--paper);
}

.draft-record-summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
}

.draft-record-summary:hover { background: var(--paper-raised); }

.draft-record-title {
  margin-left: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.draft-record-summary-meta {
  display: block;
  margin-top: var(--space-1);
  margin-left: calc(var(--space-5) + var(--space-1));
  color: var(--slate-600);
  font-size: var(--text-sm);
}

.draft-record-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-hair) solid var(--rule-hair);
}

.draft-item-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: var(--border-gutter) solid var(--rule);
  margin-bottom: var(--space-4);
  background: var(--paper-raised);
}

.draft-item-form textarea { width: 100%; resize: vertical; }
.draft-item-text { font-family: var(--font-display); line-height: var(--leading-reading); }

.draft-item-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.draft-status-label {
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.draft-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.draft-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--rule-hair);
  margin-top: var(--space-4);
}

/* Deletion is destructive and is pushed to the end of the row so it is never the action
   adjacent to "export" that a lawyer hits by muscle memory. */
.draft-record-actions .action--danger { margin-left: auto; }

@media (max-width: 40rem) {
  .draft-task-list { grid-template-columns: minmax(0, 1fr); }
  .draft-record-actions { flex-direction: column; align-items: stretch; }
  .draft-record-actions .action { width: 100%; }
  .draft-record-actions .action--danger { margin-left: 0; }
}


/* ---- Finding-card provenance bands ---------------------------------------
 * These belong to the shared finding card in findings.js, not to the review route
 * that happened to declare them first. Values are unchanged.
 */

.workspace-band { border-left:var(--border-band) solid var(--rule-strong); padding:var(--space-3) var(--space-4); margin:var(--space-2) 0; background:var(--paper); }
.workspace-band--ai { border-left-color:var(--ink-700); }
.workspace-band--verifier { border-left-color:var(--neutral-rule); background:var(--paper-sunken); }
.workspace-band--source { border-left-color:var(--ink-500); }
.workspace-band--human { border-left-color:#876d38; background:var(--decision-surface); }
.workspace-finding { margin:var(--space-3) 0; }
.workspace-finding--compact { font-size:var(--text-sm); }

.delta-citations { display: flex; flex-wrap: wrap; gap: .5rem; }