/* =============================================================================
   Sinny application styles — app-specific layout on top of the design system.
   Primitives live in components.css; tokens in tokens.css; base in base.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Claims list (dashboard) — dense clickable rows, Linear-style.
   -------------------------------------------------------------------------- */
.claims-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.claims-list li + li { border-top: 1px solid var(--border); }
.claims-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: background-color var(--duration) var(--ease);
}
.claims-list__row:hover { background: var(--accent); }
.claims-list__name { font-weight: var(--font-medium); color: var(--foreground); }
.claims-list__meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.claims-list__analyst { font-size: var(--text-xs); color: var(--muted-foreground); }

/* -----------------------------------------------------------------------------
   Analistas — manager-only team list and invite form.
   -------------------------------------------------------------------------- */
.analysts-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.analysts-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.analysts-list__row + .analysts-list__row { border-top: 1px solid var(--border); }
.analysts-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.analysts-list__identity { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.analysts-list__name { font-weight: var(--font-medium); color: var(--foreground); }
.analysts-list__email { font-size: var(--text-xs); color: var(--muted-foreground); overflow-wrap: anywhere; }

.analyst-form { max-width: 32rem; }
.analyst-form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* -----------------------------------------------------------------------------
   Sinistros — search form and pagination.
   -------------------------------------------------------------------------- */
.claims-index { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; min-height: 0; margin-top: var(--space-4); }
.claims-index > .claims-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.claims-index__footer { display: flex; justify-content: flex-end; }

.claims-search { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.claims-search__query { position: relative; flex: 1; }
.claims-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.claims-search__input { height: 2rem; padding-left: var(--space-8); }

.claims-filters { position: relative; }
.claims-filters > summary { list-style: none; gap: var(--space-1); }
.claims-filters > summary::-webkit-details-marker { display: none; }
.claims-filters[open] > summary { background: var(--accent); }
.claims-filters__count {
  min-width: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.625rem;
  line-height: 1rem;
  text-align: center;
}
.claims-filters__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 20;
  width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
}
.claims-filters__row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: var(--space-2); }
.claims-filters__label { font-size: var(--text-xs); color: var(--muted-foreground); }
.claims-filters__control { height: 1.75rem; padding-block: 0; font-size: var(--text-xs); }
.claims-filters__statuses { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.claims-filters__statuses legend { margin-bottom: var(--space-1); }
.claims-filters__status { cursor: pointer; }
.claims-filters__status input { position: absolute; opacity: 0; pointer-events: none; }
.claims-filters__status span {
  display: inline-block;
  padding: 0.0625rem var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.claims-filters__status:hover span { background: var(--accent); }
.claims-filters__status input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.claims-filters__status input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.claims-filters__actions { display: flex; justify-content: flex-end; gap: var(--space-1); }

.claims-pagination { display: flex; align-items: center; gap: var(--space-1); }
.claims-pagination__page { min-width: 1.5rem; text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); }

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr min(72rem, 100%) 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
}
.dashboard-layout > :nth-child(1) { grid-column: 2; grid-row: 1; }
.dashboard-layout > :nth-child(2) { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; }

/* -----------------------------------------------------------------------------
   Painel — operation stat tiles and the stage breakdown.
   Everything lives inside a single .dashboard-stats wrapper, which is the
   scroll container below the page title.
   -------------------------------------------------------------------------- */
.dashboard-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
  margin-top: var(--space-4);
  overflow-y: auto;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.stat__value {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat__value--sm { font-size: var(--text-xl); }
.stat__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.stat-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.stage-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}
.stage-row + .stage-row { border-top: 1px solid var(--border); }
.stage-row__count {
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
}

.stat-block { margin: var(--space-3) 0; }
.stat-block__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}
.stat-block__link {
  color: var(--foreground);
  font-weight: var(--font-medium);
  text-decoration: none;
}
.stat-block__link:hover { text-decoration: underline; }

@media (max-width: 60rem) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-panels { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Claim detail page — two-column layout: left (card+nav+panels) | right (history)
   -------------------------------------------------------------------------- */
.claim-tags { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.section-title { font-size: var(--text-lg); font-weight: var(--font-semibold); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }

/* -----------------------------------------------------------------------------
   Claim flow — the canonical status rail. One node per rail slot, running
   left to right; segments run at every dot's center line but stop short of
   each dot. Off-rail statuses (paused, suspended, uncovered, liquidated,
   cancelled) take over
   the slot they stand in for rather than adding one, so the rail stays
   straight and the dot simply changes colour and label under the ring.
   -------------------------------------------------------------------------- */
/* Rail row — the rail and the transition button share a line while there is
   room for both, and the button drops to its own right-aligned line when
   there is not. Flex line-breaking measures the flex base sizes, so the
   rail's 20rem basis is what decides the wrap; min-width: 0 then lets the
   rail scroll inside itself rather than widen the row. */
.claim-card__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.claim-card__rail .claim-flow { flex: 1 1 30rem; min-width: 0; margin-top: 0; }

.claim-transition {
  flex: 0 0 auto;
  margin-left: auto;
  padding-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.claim-transition__prompt {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.claim-flow {
  margin-top: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.claim-flow::-webkit-scrollbar { height: 0.375rem; }
.claim-flow::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

.claim-flow__track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-8) 0 var(--space-2);
  min-width: max-content;
  position: relative;
}

/* Node — dot + label. Two segments (::before left, ::after right) flank
   the dot, stopping short of it on both sides. */
.claim-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  position: relative;
  scroll-snap-align: center;
  flex-shrink: 0;
  min-width: 4rem;
}
.claim-flow__node::before,
.claim-flow__node::after {
  content: "";
  position: absolute;
  top: 0.4375rem;
  height: 1px;
  background: var(--border);
}
.claim-flow__node::before {
  left: 0;
  right: calc(50% + 0.5625rem);
}
.claim-flow__node::after {
  left: calc(50% + 0.5625rem);
  right: 0;
}
.claim-flow__node:first-child::before {
  display: none;
}
.claim-flow__node:last-child::after {
  display: none;
}
.claim-flow__node--current::before {
  right: calc(50% + 0.875rem);
}
.claim-flow__node--current::after {
  left: calc(50% + 0.875rem);
}

.claim-flow__dot {
  position: relative;
  z-index: 1;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.125rem;
  border-radius: var(--radius-full);
  background: var(--status-expected, var(--muted-foreground));
  box-shadow: 0 0 0 3px var(--card);
}
.claim-flow__dot[data-status="triage"]         { background: var(--status-triage); }
.claim-flow__dot[data-status="expected"]       { background: var(--status-expected); }
.claim-flow__dot[data-status="running"]        { background: var(--status-running); }
.claim-flow__dot[data-status="paused"]         { background: var(--status-paused); }
.claim-flow__dot[data-status="suspended"]      { background: var(--status-suspended); }
.claim-flow__dot[data-status="covered"]        { background: var(--status-covered); }
.claim-flow__dot[data-status="uncovered"]      { background: var(--status-uncovered); }
.claim-flow__dot[data-status="in_liquidation"] { background: var(--status-in-liquidation); }
.claim-flow__dot[data-status="liquidated"]     { background: var(--status-liquidated); }
.claim-flow__dot[data-status="finished"]       { background: var(--status-finished); }
.claim-flow__dot[data-status="cancelled"]      { background: var(--status-cancelled); }

.claim-flow__node--current .claim-flow__dot {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0;
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 5px var(--ring),
    0 0 0.75rem var(--ring);
}

/* Not reached yet — grey, with the one-hop-away states left brighter than
   the rest of the rail so the immediate options still read as options. */
.claim-flow__node--next .claim-flow__dot,
.claim-flow__node--future .claim-flow__dot {
  background: var(--muted-foreground);
  box-shadow: 0 0 0 3px var(--card);
}
.claim-flow__node--next .claim-flow__dot   { opacity: 0.55; }
.claim-flow__node--future .claim-flow__dot { opacity: 0.25; }

/* Dead ends — slots this claim can no longer reach, because it resolved
   or was cancelled short of them. The dot is replaced by a ban mark, which
   carries the meaning on its own; the label stays plain grey. Sized to the
   current dot so its centre lands on the rail line without a nudge. */
.claim-flow__blocked {
  position: relative;
  z-index: 1;
  color: var(--muted-foreground);
  opacity: 0.45;
}

.claim-flow__label {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
  line-height: 1;
}
.claim-flow__node--current .claim-flow__label {
  color: var(--foreground);
  font-weight: var(--font-semibold);
}
.claim-flow__node--visited .claim-flow__label { color: var(--foreground); }
.claim-flow__node--future .claim-flow__label      { opacity: 0.7; }
.claim-flow__node--unreachable .claim-flow__label { opacity: 0.7; }

/* -----------------------------------------------------------------------------
   Claim lifespan (timeline tab)

   A horizontal band showing where the claim's time went: one rect per status
   run, width proportional to its share of the whole. The band always spans the
   full track, so the shape reads the same for a five-day claim and a ninety-day
   one — the absolute span lives in the header and the axis endpoints instead.
   Geometry comes from the server as SVG x/width percentages — presentation
   attributes, not inline styles — so colour still lives here, keyed off
   data-status like .claim-flow__dot.
   -------------------------------------------------------------------------- */
.claim-lifespan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.claim-lifespan__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.claim-lifespan__elapsed {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

.claim-lifespan__chart {
  display: block;
}

/* Document and e-mail marks. Same x-scale as the band: a tick through the
   band pins the moment, a stem drops to the label's lane. Lanes are packed
   server-side so labels never collide — a busy claim grows downwards rather
   than overprinting itself.

   Two blocks that overlap horizontally must sit in different lanes, so the
   lower one's stem always crosses the upper one's row — no packing can avoid
   that. The view emits every connector before every label, and each label is
   an opaque plate, so the stem is interrupted across the label's whole box.
   A glyph-following halo was not enough: it masks where the ink is, leaving
   the line visible through counters, inter-letter space and the date gap.

   The plates are HTML inside <foreignObject> because SVG text cannot carry an
   auto-sized background — which also buys real text-overflow instead of
   truncating names by character count. */
.claim-lifespan__event-tick {
  stroke: var(--card);
  stroke-width: 1;
  opacity: 0.75;
}

.claim-lifespan__event-stem {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  opacity: 0.4;
}

.claim-lifespan__event {
  display: flex;
  height: 100%;
}
.claim-lifespan__event--end { justify-content: flex-end; }

/* line-height has to match Claim::Lifespan::LINE_HEIGHT. The packer reserves
   LANE_HEIGHT per line but sizes the plate to LINE_HEIGHT, and that difference
   is the gap that keeps vertically adjacent plates from merging into one
   grey mass. */
.claim-lifespan__plate {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.125rem;
}

.claim-lifespan__event-day {
  flex: none;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.claim-lifespan__event-lines {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim-lifespan__event-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

/* The glyph carries the file type, so the name drops its extension and the
   action word drops the redundant "e-mail". */
.claim-lifespan__event-icon {
  flex: none;
  color: var(--muted-foreground);
}

.claim-lifespan__event-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-weight: var(--font-medium);
}

.claim-lifespan__event-action {
  flex: none;
  color: var(--muted-foreground);
}

.claim-lifespan__segment[data-status="triage"]         { fill: var(--status-triage); }
.claim-lifespan__segment[data-status="expected"]       { fill: var(--status-expected); }
.claim-lifespan__segment[data-status="running"]        { fill: var(--status-running); }
.claim-lifespan__segment[data-status="suspended"]      { fill: var(--status-suspended); }
.claim-lifespan__segment[data-status="covered"]        { fill: var(--status-covered); }
.claim-lifespan__segment[data-status="uncovered"]      { fill: var(--status-uncovered); }
.claim-lifespan__segment[data-status="in_liquidation"] { fill: var(--status-in-liquidation); }
.claim-lifespan__segment[data-status="liquidated"]     { fill: var(--status-liquidated); }
.claim-lifespan__segment[data-status="finished"]       { fill: var(--status-finished); }
.claim-lifespan__segment[data-status="cancelled"]      { fill: var(--status-cancelled); }

/* Paused is deliberately absent above, and there is no catch-all fill
   rule either: the paused run carries a fill="url(#…)" presentation
   attribute pointing at the hatch pattern, and *any* CSS fill matching it
   would win — presentation attributes sit below author styles. The amber
   lives in the pattern instead, so the paused clock reads as paused
   without depending on hue alone. */
.claim-lifespan__hatch-ground {
  fill: var(--status-paused);
}
.claim-lifespan__hatch-line {
  stroke: var(--status-paused-foreground);
  stroke-width: 3;
  opacity: 0.35;
}

.claim-lifespan__axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.claim-lifespan__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim-lifespan__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.claim-lifespan__legend-value {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.claim-show-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}
.claim-show-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow-y: auto;
}
.claim-show-main > * { flex-shrink: 0; }
.claim-history {
  overflow-y: auto;
  scrollbar-width: none;
  border-left: 1px solid var(--border);
  padding-left: var(--space-4);
  min-height: 0;
}
.claim-history::-webkit-scrollbar { display: none; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.checklist__item + .checklist__item { border-top: 1px solid var(--border); }
.checklist__form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.checklist__checkbox {
  flex-shrink: 0;
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.checklist__input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--foreground);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.25rem var(--space-2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.checklist__input:hover { border-color: var(--border); }
.checklist__input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 75%);
}
.checklist__input::placeholder { color: var(--muted-foreground); }
.checklist__add-row .checklist__input::placeholder { font-style: italic; }
.checklist__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.checklist__remove:hover { background: var(--accent); color: var(--destructive); }
.checklist__remove svg { width: 0.875rem; height: 0.875rem; }
.checklist__item > form:has(.checklist__remove) { display: flex; }

.checklist--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.checklist__subtitle {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* Stage sections — one checklist per guarded status. */
.checklists {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.checklist-stage__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.checklist-stage__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
}
.checklist-stage__progress {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.checklist-stage__lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.checklist-stage__hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.checklist-stage__actions { margin-top: var(--space-2); }
.checklist-stage--locked .checklist__input {
  color: var(--muted-foreground);
  cursor: default;
}
.checklist-stage--locked .checklist__input:hover { border-color: transparent; }

.checklist-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.checklist-picker__subtitle {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.checklist-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.checklist-picker__label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--foreground);
}
.checklist-picker__row .select { max-width: 18rem; }

/* -----------------------------------------------------------------------------
   Documents card (claim detail)
   -------------------------------------------------------------------------- */
.documents-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.documents-card__title { display: flex; align-items: center; gap: var(--space-2); color: var(--foreground); }
.documents-card__title svg { color: var(--muted-foreground); }
.documents-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.documents-card__actions > form,
.documents-card__actions > span { margin: 0; }
.documents-card__actions turbo-cable-stream-source { display: none; }
.inline-form { display: inline-flex; align-items: center; }

.documents-card__list { display: flex; flex-direction: column; }
.document-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--foreground);
  transition: background-color var(--duration) var(--ease);
}
.document-row:last-child { border-bottom: 0; }
.document-row:hover { background: var(--accent); }
.document-row__icon { display: inline-flex; color: var(--muted-foreground); flex-shrink: 0; }
.document-row__meta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); flex-shrink: 0; margin-left: auto; }

.document-row__view {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.document-row__view .badge { flex-shrink: 0; }

/* The name stretches over the whole row, so anywhere that isn't a control downloads. */
.document-row__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-medium);
}
.document-row__name::after { content: ""; position: absolute; inset: 0; }

/* Revealed on hover/focus. Opacity rather than display, so the row never reflows. */
.document-row__rename {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  padding: 0.25rem var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}
.document-row:hover .document-row__rename,
.document-row:focus-within .document-row__rename { opacity: 1; visibility: visible; }
.document-row__rename:hover { color: var(--foreground); text-decoration: underline; }

.document-row__form { display: none; flex: 1; min-width: 0; position: relative; z-index: 1; }
.document-row--editing .document-row__view { display: none; }
.document-row--editing .document-row__form { display: flex; }

.document-row__input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--foreground);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.25rem var(--space-2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.document-row__input:hover { border-color: var(--border); }
.document-row__input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 75%);
}

/* Document request list (inside dialog) */
.document-requests-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 16rem;
  overflow-y: auto;
}
.document-requests-list li {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.request-description { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--foreground); }
.request-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); }
.request-meta .input { flex: 1; }
.request-expires { white-space: nowrap; }
.request-expired { font-style: italic; }

.dialog__subheading { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-2); }

/* -----------------------------------------------------------------------------
   Auth + public page child constraints
   -------------------------------------------------------------------------- */
.auth-page > * { width: 100%; max-width: 24rem; }
.auth-page__brand,
.auth-page__footer { text-align: center; }
.auth-page__footer:hover { text-decoration: underline; }
.auth-page__message { max-width: 24rem; }

.public-page__check { color: var(--status-covered); margin-bottom: var(--space-4); }
.public-page--centered .card__content { display: flex; flex-direction: column; align-items: center; }
.public-page--centered .public-page__heading { margin-bottom: var(--space-2); }

/* -----------------------------------------------------------------------------
   Notes tab (claim detail)
   -------------------------------------------------------------------------- */
.note-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin-bottom: var(--space-3);
}
.note-form__textarea { min-height: 4.5rem; }
.note-form__actions { display: flex; justify-content: flex-end; }
.note-form__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  text-align: center;
}

.note {
  padding: 0;
  margin-bottom: var(--space-3);
  min-width: 0;
  overflow-wrap: break-word;
}
.note__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-1);
}
.note__meta { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.note__author {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--foreground);
  letter-spacing: var(--tracking-tight);
}
.note__date { font-size: var(--text-xs); color: var(--muted-foreground); }
.note__delete { flex-shrink: 0; }
.note__delete form { display: inline-flex; margin: 0; }
.note__text {
  padding: var(--space-1) var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--foreground);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
  min-width: 0;
}
.note__text p { margin: 0; }
.note__text p + p { margin-top: var(--space-2); }
.note--empty {
  padding: var(--space-6) var(--space-4);
}
/* -----------------------------------------------------------------------------
   Inbox (email triage)
   -------------------------------------------------------------------------- */
.inbox-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.inbox-row { padding: 0; margin-bottom: var(--space-2); }
.inbox-row__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--foreground);
  min-width: 0;
}
.inbox-row__link:hover { background: var(--muted); }
.inbox-row__icon { display: inline-flex; color: var(--muted-foreground); flex-shrink: 0; }
.inbox-row__body { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; }
.inbox-row__from {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--muted-foreground);
}
.inbox-row__subject {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.inbox-show {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--space-4);
  align-items: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 60rem) {
  .inbox-show { grid-template-columns: minmax(0, 1fr); }
}
.inbox-message__body {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
}
.inbox-message__body p { margin: 0; }
.inbox-message__body p + p { margin-top: var(--space-2); }
.inbox-message__attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inbox-attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.inbox-actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* Analysis card — the machine read of an inbox e-mail. Recessed onto the
   --system surface so it never reads as something a person wrote; the grenat
   icon is the only brand cue. */
.inbox-thread { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.analysis {
  background: var(--system);
  border-color: var(--system-border);
  color: var(--system-foreground);
}
.analysis .card__title { display: flex; align-items: center; gap: var(--space-2); }
.analysis .card__title svg { color: var(--primary); }
.analysis .separator { margin: var(--space-4) 0; background: var(--system-border); }
.analysis__candidate { box-shadow: var(--shadow-sm); }
.analysis__pending {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.analysis__summary {
  margin: var(--space-3) 0 0;
  max-width: 70ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.analysis__empty {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.analysis__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.analysis__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.analysis__candidates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-2);
  align-items: start;
}
.analysis__candidate {
  padding: var(--space-3);
  border: 1px solid var(--system-border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.analysis__candidate-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.analysis__policy { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.analysis__principal { display: block; font-size: var(--text-xs); color: var(--muted-foreground); }
.analysis__evidence {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.analysis__evidence li {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.analysis__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-2) var(--space-4);
}
.analysis__facts li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 var(--space-2);
  align-items: baseline;
}
.analysis__fact-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--muted-foreground);
}
.analysis__fact-value {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.analysis__fact-origin {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.inbox-row__summary {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Email tab (claim detail)
   -------------------------------------------------------------------------- */
.mail-thread { list-style: none; margin: 0; padding: 0; }
.mail-reply__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.mail-reply__context span { display: inline-flex; align-items: center; gap: var(--space-1); }
.mail-reply__switch { text-decoration: underline; }
.mail-message--replying { outline: 2px solid var(--sidebar-grenat); }
.mail-thread__reply-address {
  margin-right: auto;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.mail-message { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); min-width: 0; }
.mail-message--outbound { border-left: 2px solid var(--sidebar-grenat); }
.mail-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.mail-message__meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.mail-message__from {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--foreground);
}
.mail-message__subject {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-message__aside { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.mail-message__aside form { display: inline-flex; margin: 0; }
.mail-message__date { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted-foreground); }
.mail-message__show { font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: underline; }
.mail-message__show:hover { color: var(--foreground); }
.mail-message__body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
  white-space: normal;
}
.mail-message__body p { margin: 0; }
.mail-message__body p + p { margin-top: var(--space-2); }

/* Policy editor — the "Apólice" tab of a claim. */
.policy-empty__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}
.policy-form__note { margin: 0 0 var(--space-3); }
.policy-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.policy-form__principal {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.policy-form__principal strong { color: var(--foreground); font-weight: var(--font-medium); }
.policy-form__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.policy-form__groups:disabled { opacity: 0.75; }
.policy-form__legend {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.policy-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}
.policy-form__grid .field { margin-bottom: 0; }
.policy-form__grid .field__hint,
.policy-form__grid .field__error { margin: 0; }
.policy-form__field--wide { grid-column: 1 / -1; }
.policy-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Machine-authored notes — the apólice audit trail. Recessed like the e-mail
   analysis card rather than tinted, so it reads as below the analyst's own
   notes instead of competing with them. */
.note--system {
  background: var(--system);
  border-color: var(--system-border);
  color: var(--system-foreground);
  box-shadow: none;
}
.note--system .note__badge { color: var(--primary); align-self: center; }
.note--system .note__text { font-variant-numeric: tabular-nums; }
.note__origin {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  letter-spacing: var(--tracking-tight);
}

/* -----------------------------------------------------------------------------
   Claim title — the heading doubles as an inline rename field. The pencil sits
   in the card's top-right corner, so the row spans the card even though the
   title itself only takes the width of its own words.
   -------------------------------------------------------------------------- */
.claim-title__view {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.claim-title__view .page-title { min-width: 0; overflow-wrap: anywhere; }

/* Revealed on hover. Transparent rather than hidden, so it keeps its place in
   the layout and in the tab order — a keyboard can reach a button it cannot
   hover over. */
.claim-title__edit {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}
.claim-title:hover .claim-title__edit,
.claim-title__edit:focus-visible { opacity: 1; }
.claim-title__edit:hover { color: var(--foreground); }

.claim-title__form { display: none; }
.claim-title--editing .claim-title__view { display: none; }
.claim-title--editing .claim-title__form { display: block; }

.claim-title__input {
  width: 100%;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.claim-title__input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 75%);
}