/* disputes.css -- Disputes screen: hub, compose, letter preview */

/* ── Layout ──────────────────────────────────────────────────────────── */

/* FT-1 (2026-08-02). The document default in base.css is Inter; every
   screen overrides it on its own root container (home.css `.home`,
   report-view.css `.rv`, questions.css `.questions`, landing / results /
   id-setup / zero-flags each in their own file). Disputes declared it
   NOWHERE, so the hub, compose and the letter preview all rendered in
   Inter while the rest of the app rendered in Plus Jakarta Sans. The
   font was already loaded (index.html pulls 300-800 from Google Fonts);
   only the declaration was missing.

   ONE declaration, here on the outermost container, so anything rendered
   inside the screen but outside #disputes-mount inherits it too. Do NOT
   add a second on #disputes-mount or on any child -- the thirteen
   `font-family: inherit` rules on form controls below are what carry it
   into inputs and buttons, and they only work while there is exactly one
   root to inherit from.

   Matches home.css `.home` verbatim. Standing lesson in
   .claude/rules/vioverse-mockup.md: a new screen must declare the
   typeface on its own root container. */
#screen-disputes {
  padding: 0;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#disputes-mount {
  max-width: 1140px;
  margin: 0 auto;
  padding: 30px clamp(20px, 4vw, 48px) 90px;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.disp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.disp-header-left {
  min-width: 260px;
}

.disp-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
}

.disp-h1 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text);
}

.disp-status-line {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(30, 42, 53, 0.65);
}

/* ── Stat Pill ────────────────────────────────────────────────────────── */

.disp-stat-pill {
  display: flex;
  gap: 4px;
}

.disp-stat-half {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 42, 53, 0.05);
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.disp-stat-half:first-child {
  border-radius: 8px 0 0 8px;
}

.disp-stat-half:last-child {
  border-radius: 0 8px 8px 0;
}

.disp-stat-num {
  font-size: 28px;
  font-weight: 800;
}

/* ── Section ──────────────────────────────────────────────────────────── */

.disp-section {
  margin-bottom: 30px;
}

.disp-section-desc {
  font-size: 13.5px;
  color: rgba(30, 42, 53, 0.62);
  margin-bottom: 12px;
  max-width: 70ch;
}

/* ── Explainer Card ───────────────────────────────────────────────────── */

.disp-explainer {
  background: #F3EFE7;
  border-radius: 28px;
  padding: 26px clamp(22px, 3vw, 36px);
  margin-bottom: 30px;
  position: relative;
}

.disp-explainer-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(30, 42, 53, 0.5);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.disp-explainer-close:hover {
  background: rgba(31, 24, 19, 0.06);
  color: var(--text);
}

.disp-explainer-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.disp-explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.disp-explainer-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.disp-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-0);
  color: var(--bone-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.disp-step-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.disp-step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(30, 42, 53, 0.7);
}

.disp-mini-btn {
  display: inline-block;
  background: var(--ink-0);
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* ── Draft Cards ──────────────────────────────────────────────────────── */

.disp-drafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.disp-draft-card {
  background: #fff;
  border: 1.5px dashed rgba(242, 100, 25, 0.55);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.disp-draft-info {
  flex: 1;
  min-width: 0;
}

.disp-draft-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.disp-draft-meta {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 1px;
}

/* ── Empty State ──────────────────────────────────────────────────────── */

.disp-empty {
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 56px 36px;
  text-align: center;
}

.disp-empty-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.disp-empty-body {
  font-size: 14.5px;
  color: rgba(30, 42, 53, 0.65);
  max-width: 46ch;
  margin: 0 auto 22px;
}

/* ── Bureau Cards ─────────────────────────────────────────────────────── */

.disp-bureau-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  align-items: start;
}

.disp-bureau-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

.disp-bureau-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.disp-bureau-status {
  font-size: 13px;
  color: rgba(30, 42, 53, 0.62);
  margin-top: 3px;
  line-height: 1.5;
}

/* ── 30-Day Clock ─────────────────────────────────────────────────────── */

.disp-clock {
  margin-top: 14px;
}

.disp-clock-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.disp-clock-day {
  font-size: 13px;
  font-weight: 700;
}

.disp-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  margin-right: 7px;
  animation: vvDisputePulse 2s ease-in-out infinite;
}

@keyframes vvDisputePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.disp-clock-due {
  font-size: 12px;
  color: rgba(30, 42, 53, 0.55);
}

.disp-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 42, 53, 0.08);
  overflow: hidden;
}

.disp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--coral);
}

/* ── Item Rows ────────────────────────────────────────────────────────── */

.disp-items {
  margin-top: 16px;
}

.disp-item-row {
  border-top: 1px solid rgba(31, 24, 19, 0.08);
  padding: 14px 0 13px;
}

.disp-item-meta {
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

.disp-item-tier {
  flex-shrink: 0;
}

.disp-item-status {
  flex: 1;
  text-align: right;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-left: 10px;
}

.disp-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.disp-item-source {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 2px;
}

.disp-item-action {
  margin-top: 10px;
}

.disp-outcome-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(31, 24, 19, 0.14);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}

.disp-item-overdue {
  margin-top: 8px;
  font-size: 12.5px;
  color: #D6584C;
  font-weight: 600;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.disp-btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--coral);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.disp-btn-coral:hover {
  filter: brightness(1.08);
}

.disp-btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink-0);
  color: #fff;
  border: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.disp-btn-ink:hover {
  filter: brightness(1.15);
}

.disp-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30, 42, 53, 0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.disp-btn-ghost:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.disp-btn-full {
  width: 100%;
  margin-top: auto;
}

.disp-btn-ink-full {
  margin-top: 20px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink-0);
  color: var(--bone-0);
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.disp-btn-ink-full:hover {
  filter: brightness(1.15);
}

.disp-btn-ghost-full {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30, 42, 53, 0.18);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.disp-btn-ghost-full:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.disp-btn-ink-pill {
  background: var(--ink-0);
  color: var(--bone-0);
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  width: 100%;
}

.disp-btn-ink-pill:hover {
  filter: brightness(1.15);
}

.disp-btn-ghost-pill {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30, 42, 53, 0.18);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.disp-btn-ghost-pill:hover {
  border-color: var(--coral);
  color: var(--coral);
}

/* Letter-fidelity, ruling R3: a sent panel whose letter was never stored
   (the consumer copied the text and mailed it themselves). The hover
   rule above is restated under :disabled because a disabled button still
   matches :hover, and a control that turns coral under the pointer does
   not read as unavailable. Same muted value as .disp-muted. */
.disp-btn-ghost-pill:disabled,
.disp-btn-ghost-pill:disabled:hover {
  color: rgba(30, 42, 53, 0.45);
  border-color: rgba(30, 42, 53, 0.1);
  cursor: default;
}

/* DA2 B6: "Mark as mailed" sat in the letter-rail actions card as an 8px
   .disp-btn-coral beside two 999px pills. Its own class rather than a
   change to .disp-btn-coral, which the hub CTAs share and must keep. */
.disp-btn-coral-pill {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.disp-btn-coral-pill:hover {
  filter: brightness(1.08);
}

.disp-arrow-icon {
  width: 17px;
  height: 17px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.disp-added {
  opacity: 0.6;
  cursor: default;
}

/* ── Back Button ──────────────────────────────────────────────────────── */

.disp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(30, 42, 53, 0.6);
  cursor: pointer;
  margin-bottom: 18px;
  padding: 0;
  font-family: inherit;
}

.disp-back-btn:hover {
  color: var(--coral);
}

.disp-back-icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.disp-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 26px clamp(20px, 3vw, 32px);
}

.disp-card-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.disp-card-desc {
  font-size: 13px;
  color: rgba(30, 42, 53, 0.6);
  margin-bottom: 18px;
}

/* ── Compose View ─────────────────────────────────────────────────────── */

.disp-compose-sub {
  font-size: 15px;
  color: rgba(30, 42, 53, 0.65);
  margin-bottom: 26px;
  max-width: 72ch;
}

.disp-muted {
  color: rgba(30, 42, 53, 0.45);
}

.disp-compose-layout {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.disp-compose-main {
  flex: 999 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.disp-compose-side {
  flex: 1 1 280px;
  min-width: 260px;
  align-self: flex-start;
}

.disp-compose-note {
  font-size: 13px;
  color: rgba(30, 42, 53, 0.6);
  margin-bottom: 8px;
}

.disp-compose-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(31, 24, 19, 0.08);
  cursor: pointer;
}

.disp-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--coral);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.disp-compose-item-text {
  flex: 1;
  min-width: 0;
}

.disp-compose-item-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.disp-compose-item-source {
  display: block;
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 2px;
}

/* Compose grouping (1a). Flat headers inside the existing list rather than
   a nested card: the list is still one list, and a card per finding would
   make seven accounts look like seven letters. The head carries the same
   top rule a plain row does, so a grouped and an ungrouped list separate
   their entries identically. */

.disp-compose-group-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(31, 24, 19, 0.08);
}

.disp-compose-group-count {
  flex-shrink: 0;
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 2px;
  white-space: nowrap;
}

/* Indented by the checkbox column (18px box + 12px gap) so a sub-row's
   text hangs under the header's text rather than under its checkbox. */
.disp-compose-subrow {
  padding-left: 30px;
  border-top-color: rgba(31, 24, 19, 0.05);
}

/* The header's own rule already opens the block; a second line directly
   beneath it would read as a divider between the sentence and the
   accounts it describes. */
.disp-compose-group .disp-compose-subrow:first-of-type {
  border-top-color: transparent;
}

/* ── Identity Form ────────────────────────────────────────────────────── */

.disp-id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.disp-id-row-split {
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
}

.disp-id-row-split > .disp-id-field {
  flex: 1;
}

.disp-id-field {
  /* container */
}

.disp-id-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.disp-req {
  color: var(--coral);
}

.disp-id-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(31, 24, 19, 0.12);
  border-radius: 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
}

.disp-id-input:focus {
  border-color: var(--coral);
  outline: none;
}

/* Address-split P2 (ruling R-B, 2026-08-12). The compose identity form's
   failures used to be a 2.5s bottom toast that on a phone paints inside
   the fixed tab bar's own band. These two states replace it, on THIS form
   only.

   RED blocks Preview. `--severe` rather than `--coral`, because coral is
   this form's own focus and required-marker colour and an error has to
   read as a different thing from "this field is selected". The 2px weight
   is what survives being read at arm's length on a phone, which is the
   whole failure the toast had. */
.disp-id-input-error {
  border: 2px solid var(--severe);
  background: rgba(214, 88, 76, 0.05);
}

.disp-id-input-error:focus {
  border-color: var(--severe);
}

.disp-id-err {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--severe);
}

/* ORANGE is advisory: it explains something we noticed and blocks nothing,
   so it must not wear the blocking colour. */
.disp-id-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--coral);
}

.disp-id-note-btn {
  margin-left: 6px;
  padding: 4px 12px;
  border: 1.5px solid var(--coral);
  border-radius: 999px;
  background: transparent;
  color: var(--coral);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.disp-id-note-btn:hover {
  background: rgba(242, 100, 25, 0.08);
}

@media (max-width: 768px) {
  /* A 13px pill is not a tap target. */
  .disp-id-note-btn {
    display: block;
    margin: 8px 0 0;
    min-height: 44px;
    width: 100%;
  }
}

.disp-currently-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 18px;
}

.disp-currently-hint {
  font-size: 12px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 4px;
  padding-left: 26px;
  line-height: 1.5;
}

/* ── Tips Card ────────────────────────────────────────────────────────── */

.disp-tips-card {
  background: #F3EFE7;
  border-radius: 28px;
  padding: 24px 26px;
}

.disp-tips-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.8);
  padding: 0;
  margin: 0;
}

.disp-tips-list li {
  display: flex;
  gap: 9px;
}

.disp-tip-dot {
  color: var(--coral);
  font-weight: 800;
}

/* ── Letter Preview ───────────────────────────────────────────────────── */

.disp-letters-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.disp-letter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.disp-letter-tab {
  padding: 8px 16px;
  border: 1px solid rgba(30, 42, 53, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.disp-letter-tab.active {
  background: var(--ink-0);
  color: #fff;
  border-color: var(--ink-0);
}

.disp-letters-layout {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.disp-letter-main {
  flex: 999 1 480px;
  min-width: 0;
}

.disp-letter-doc {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 44px);
  font-size: 14.5px;
  line-height: 1.75;
  color: #1D2430;
}

.disp-letter-rail {
  flex: 1 1 280px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Letter Document Innards ──────────────────────────────────────────── */

/* DA3 inline blanks. TWO KINDS OF HIGHLIGHT SHARE THE LETTER, and the
   dress says which is which:

     highlight alone       = your data, read-only. Nothing to tap.
     highlight + dashed    = tappable to edit. NOWHERE ELSE.

   The underline is now the WHOLE differentiator, and it belongs to
   `.disp-var-edit` alone (ruling 2b, David, 2026-08-10). It used to be a
   solid-vs-dashed distinction on a border both rules shared, described
   here as "deliberately quiet" -- and quiet is exactly what went wrong.
   At reading distance the two underlines were one underline, so a SEALED
   letter (walk fix F-A drops every `.disp-var-edit`, leaving bare
   `.disp-var`) still looked like edit mode. David re-walked the mark leg
   on working code and read a correctly-sealed letter as still editable.
   A seal nobody can see is not a seal. */
.disp-var {
  background: rgba(242, 100, 25, 0.12);
  border-radius: 3px;
  padding: 0 4px;
}

/* THE FULL SHORTHAND LIVES HERE ON PURPOSE, not a lone
   `border-bottom-style: dashed` inheriting width and color from
   `.disp-var`. That was the shape before 2b, and with the underline gone
   from `.disp-var` it would fall back to the CSS initial values --
   `medium` (~3px) in `currentColor` (navy body text), not 2px coral. The
   editable blanks would regress in the same edit that fixes the sealed
   ones, and only the sealed ones would look right. Keep it whole.
   `.disp-var-edit:hover` and `.disp-var-sample:hover` below both set
   `border-bottom-color` only, so they depend on this declaration. */
.disp-var-edit {
  border-bottom: 2px dashed rgba(242, 100, 25, 0.55);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.disp-var-edit:hover {
  background: rgba(242, 100, 25, 0.22);
  border-bottom-color: var(--coral);
}

.disp-var-edit:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  background: rgba(242, 100, 25, 0.22);
}

/* Legend swatch in the rail: shows the dashed treatment without claiming
   to be interactive. A pointer cursor on a non-clickable element is the
   fake-affordance problem this project already fixed once on the upload
   screen -- do not let the sample inherit it. */
.disp-var-sample {
  cursor: default;
}

.disp-var-sample:hover {
  background: rgba(242, 100, 25, 0.12);
  border-bottom-color: rgba(242, 100, 25, 0.55);
}

/* The shared skin. Sizing is per element type below, because the two
   kinds of blank want opposite things: a native date control is fixed
   width by nature, and the accurate-information sentence has to wrap. */
.disp-var-input {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: 3px;
  padding: 0 4px;
  max-width: 100%;
}

/* The three date blanks, unchanged: 180px is the measured width of a
   native date control, and nothing longer can be typed into one. */
input.disp-var-input {
  min-width: 180px;
}

/* The accurate-information blank (letter-edit-field P3, approved mockup
   1a). Full quote width on EVERY breakpoint, wrapping, growing to its own
   content. It is a textarea because an <input> cannot wrap: the old field
   sat at the 180px floor inside a 760px column and showed about 27
   characters, so most real values ran off the end of a box the consumer
   could not see the end of.

   `resize: none` because the height is driven by _dispAutoGrow; a drag
   handle would fight it. `overflow: hidden` so no scrollbar appears
   during the reflow that sets the height. */
textarea.disp-var-input-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  line-height: inherit;
  resize: none;
  overflow: hidden;
}

.disp-var-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 100, 25, 0.25);
}

.disp-var-editing {
  display: block;
}

/* Helper text and Cancel, under the open field. Before this the only way
   out was Escape, which is keyboard-only and unadvertised. */
.disp-var-editrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.disp-var-hint {
  font-size: 12px;
  color: rgba(30, 42, 53, 0.55);
}

.disp-var-hint-mobile {
  display: none;
}

.disp-var-cancel {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  background: none;
  border: 1px solid rgba(242, 100, 25, 0.45);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  flex: 0 0 auto;
}

.disp-var-cancel:hover {
  background: rgba(242, 100, 25, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .disp-var-edit { transition: none; }
}

.disp-letter-cert {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.disp-letter-sender {
  margin-bottom: 18px;
  line-height: 1.6;
}

.disp-letter-date {
  margin-bottom: 18px;
  color: rgba(29, 36, 48, 0.7);
  font-size: 13.5px;
}

.disp-letter-cra {
  margin-bottom: 16px;
  line-height: 1.6;
}

.disp-letter-re {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(31, 24, 19, 0.045);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.6;
}

.disp-letter-p {
  margin-bottom: 13px;
}

.disp-letter-section {
  margin: 18px 0 14px;
}

.disp-letter-section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(31, 24, 19, 0.12);
}

.disp-letter-item {
  border: 1px solid rgba(31, 24, 19, 0.1);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.disp-letter-item-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(29, 36, 48, 0.55);
  margin-bottom: 5px;
}

.disp-letter-item-desc {
  margin-bottom: 9px;
  font-weight: 600;
}

/* LM-2: the two multi-report sentences. Quieter than the description so
   the grievance still leads and the dates read as supporting evidence. */
.disp-letter-item-multi {
  margin-bottom: 9px;
  font-size: 13.5px;
  color: rgba(29, 36, 48, 0.72);
}

.disp-letter-item-persist {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(29, 36, 48, 0.78);
}

/* 1d (discharge-date lane, 2026-08-08): the no-date-claim note. Preview
   chrome explaining why this item's sworn date sentence was withheld.
   Quieter than the item body and visually an aside, because it is VioVerse
   talking to the consumer about its own reticence, not part of what the
   consumer is telling a CRA. It has no counterpart in the mailed letter. */
.disp-letter-item-nodate {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(29, 36, 48, 0.62);
  border-left: 2px solid rgba(242, 100, 25, 0.35);
  padding-left: 10px;
}

.disp-letter-quote {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 5px;
  background: rgba(31, 24, 19, 0.04);
}

.disp-letter-quote-label {
  font-size: 12px;
}

.disp-letter-item-basis {
  font-size: 13.5px;
  margin-bottom: 9px;
  color: rgba(29, 36, 48, 0.85);
}

.disp-letter-item-action {
  font-size: 13.5px;
}

.disp-letter-sig {
  margin-bottom: 2px;
  margin-top: 26px;
}

.disp-letter-sigaddr {
  font-size: 13px;
  color: rgba(29, 36, 48, 0.7);
}

/* ── Rail Cards ───────────────────────────────────────────────────────── */

.disp-rail-desc {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.6);
  margin-bottom: 14px;
}

.disp-rail-warn {
  background: rgba(214, 88, 76, 0.08);
  border: 1px solid rgba(214, 88, 76, 0.25);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: #D6584C;
  font-weight: 600;
  margin-bottom: 12px;
}

.disp-rail-field {
  margin-bottom: 12px;
}

.disp-rail-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.disp-rail-meta {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.6);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.disp-rail-edit {
  margin-top: 12px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}

.disp-actions-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.disp-actions-note {
  font-size: 11.5px;
  color: rgba(30, 42, 53, 0.5);
  text-align: center;
  margin-top: 2px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.disp-footer {
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.disp-disclaimer {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.5);
  max-width: 60ch;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

/* ── LM-4 chooser (frame 1a) ───────────────────────────────────────────── */

.disp-chooser-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--backdrop-scrim);
}

.disp-chooser {
  position: relative;
  z-index: 91;
  max-width: 560px;
  margin: 48px auto;
  padding: 28px 26px 22px;
  background: var(--bone-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.disp-chooser-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.disp-chooser-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: rgba(30, 42, 53, 0.62);
}

.disp-chooser-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.disp-chooser-opt.selected {
  border-color: var(--coral);
  background: #F3EFE7;
}

.disp-chooser-opt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.disp-chooser-opt-title {
  font-size: 16px;
  font-weight: 600;
}

.disp-chooser-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.disp-chooser-opt-body {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(30, 42, 53, 0.7);
}

.disp-chooser-list {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.disp-chooser-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
  color: rgba(30, 42, 53, 0.7);
}

.disp-chooser-row-count {
  font-weight: 600;
  white-space: nowrap;
}

.disp-chooser-note {
  margin: 4px 0 18px;
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
}

.disp-chooser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .disp-chooser {
    margin: 20px 14px;
    padding: 22px 18px 18px;
  }

  .disp-chooser-title {
    font-size: 22px;
  }

  .disp-chooser-actions {
    flex-direction: column-reverse;
  }

  .disp-chooser-actions button {
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* DA3: an inline blank sits in body text, so its natural tap target is
     only one line tall. Vertical padding grows the hit area without
     changing the line box, so the letter's line spacing is untouched
     while the target clears a fingertip. */
  .disp-var-edit {
    padding: 6px 5px;
  }

  /* 180px would overflow the letter column at 375px.

     Selector matched to `input.disp-var-input` above ON PURPOSE. Written
     as the bare class it would LOSE the specificity contest (0,1,0 vs
     0,1,1) and every date blank would snap back to a 180px floor on a
     375px screen -- a regression introduced by a rule that reads like it
     is doing the opposite. The wrapping textarea is already 100% at every
     breakpoint and needs nothing here. */
  input.disp-var-input {
    min-width: 0;
    width: 100%;
  }

  /* The helper line swaps: a phone has no "tap away or press Enter". */
  .disp-var-hint-desktop {
    display: none;
  }

  .disp-var-hint-mobile {
    display: inline;
  }

  /* 44px minimum tap target, the house floor for mobile controls. */
  .disp-var-cancel {
    min-height: 44px;
    padding: 5px 18px;
  }

  .disp-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .disp-stat-pill {
    align-self: flex-start;
  }

  .disp-bureau-grid {
    grid-template-columns: 1fr;
  }

  .disp-drafts-grid {
    grid-template-columns: 1fr;
  }

  .disp-letters-layout {
    flex-direction: column;
  }

  .disp-letter-rail {
    min-width: 0;
  }

  .disp-compose-layout {
    flex-direction: column;
  }

  .disp-compose-side {
    min-width: 0;
  }
}

/* ── DT-5 2c: the letter library ──────────────────────────────────────── */
/*
 * The surface over letters a consumer has already mailed. Every value
 * here is borrowed from a sibling rule in this file rather than invented:
 * the row is .disp-draft-card's shape, the meta is .disp-draft-meta's
 * type ramp, and the frozen document reuses .disp-letter-doc's chrome.
 * A mailed letter should look like the letter it is, not like a new
 * component.
 */

.disp-library-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(18px, 3vw, 26px);
}

.disp-letter-library {
  padding: 8px clamp(14px, 2.5vw, 22px);
}

.disp-letter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}

.disp-letter-row:last-child {
  border-bottom: none;
}

.disp-letter-row-info {
  flex: 1;
  min-width: 0;
}

.disp-letter-row-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.disp-letter-row-meta {
  font-size: 12.5px;
  color: rgba(30, 42, 53, 0.55);
  margin-top: 2px;
}

/* State 2: generated, not yet mailed. Dashed coral, matching
 * .disp-draft-card -- the app already uses that treatment for "started,
 * not finished", and a letter awaiting the post is exactly that. */
.disp-letter-row.is-unsent {
  border-left: 2px dashed rgba(242, 100, 25, 0.55);
  padding-left: 14px;
  border-radius: 4px;
}

/* State 3: pre-history. Faded, because the row is a record that
 * something happened rather than something to act on. */
.disp-letter-row.is-nokeep {
  opacity: 0.62;
}

.disp-letter-row-nokeep {
  font-size: 12px;
  font-style: italic;
  color: rgba(30, 42, 53, 0.5);
  margin-top: 3px;
}

.disp-letter-asmailed {
  font-size: 13px;
  font-weight: 600;
  color: rgba(30, 42, 53, 0.6);
  margin-top: 4px;
}

/*
 * The frozen letter. `white-space: pre-wrap` is load-bearing rather than
 * cosmetic: letter_text carries its own line breaks, and the sender
 * block and the CRA address block are separated by single newlines. Let
 * the browser collapse them and the consumer's address runs into the
 * bureau's on one line -- a letter that never looked like that.
 */
.disp-letter-frozen {
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.7;
}

.disp-sent-chip {
  background: rgba(30, 42, 53, 0.06);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ── F-F / AUTODOWNLOAD: the Mark-as-mailed cards ─────────────────────
 *
 * Built from the Actions card's own vocabulary rather than a new one:
 * the coral pill, the ghost pill and the navy 800 title are the shapes
 * this rail already uses, so a card reads as this rail changing state
 * rather than as a foreign panel dropped into it.
 *
 * All three are laid out by .disp-actions-card's own flex column and
 * gap, so none sets its own spacing between the controls it contains.
 *
 * AUTODOWNLOAD replaced the `.disp-mail-warn` family with
 * `.disp-mail-claim` (the out-of-band claim) and `.disp-mail-fail` (the
 * failure net). The shape values are carried over unchanged; only the
 * names moved, because "warn" named a moment that no longer exists.
 */
.disp-mail-claim,
.disp-mail-fail,
.disp-mail-error {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.disp-mail-claim-title,
.disp-mail-fail-title,
.disp-mail-error-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.disp-mail-claim-body,
.disp-mail-fail-body,
.disp-mail-error-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.7);
}

/* Quiet by design. Cancel is the "nothing happens" option and must not
 * compete with the ones that do something. */
.disp-mail-card-cancel {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(30, 42, 53, 0.55);
  text-decoration: underline;
  cursor: pointer;
}

.disp-mail-card-cancel:hover {
  color: var(--coral);
}

.disp-mail-claim-foot {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(30, 42, 53, 0.5);
  margin-top: 2px;
}

/* The three tracked things. Laid out by the card's own flex column, so
 * it carries no outer margin; the coral marker is the same "look here"
 * this rail uses elsewhere rather than a bullet glyph. */
.disp-mail-claim-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.7);
  padding: 0;
  margin: 0;
}

.disp-mail-claim-list li::before {
  content: '\00b7';
  color: var(--coral);
  font-weight: 800;
  margin-right: 8px;
}

/* The downloading-is-better advice. Body-sized rather than footnote-
 * sized: it is the one sentence on this card that can change what the
 * consumer does next, so it must not read as fine print. */
.disp-mail-claim-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(30, 42, 53, 0.7);
}

.disp-mail-claim-note-lead {
  font-weight: 700;
  color: var(--text);
}

/* The combined primary's sub-line. Sits directly under the button and
 * belongs to it, so it is tighter than .disp-actions-note and carries no
 * top margin of its own. */
.disp-mail-primary-sub {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(30, 42, 53, 0.55);
  margin: -3px 0 0;
}

/* The out-of-band door. Deliberately the quietest control on the card:
 * it is the honest path for someone who made their own copy, and the
 * wrong choice for everyone else, so it must be findable without
 * competing with the primary. */
.disp-mail-claim-link {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(30, 42, 53, 0.55);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.disp-mail-claim-link:hover {
  color: var(--coral);
}

/* The one place this rail uses a tinted surface. The error is not a
 * violation, so it does not take the reserved red; coral is already this
 * app's "look here" and the card sits inside the consumer's own record. */
.disp-mail-error {
  background: rgba(242, 100, 25, 0.07);
  border: 1px solid rgba(242, 100, 25, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
}

@media (max-width: 768px) {
  /* 44px minimum tap targets, matching the mobile rules below. The
   * Cancel and claim links are real controls even though they are styled
   * quiet, so they carry the tap target too. */
  .disp-mail-claim .disp-btn-coral-pill,
  .disp-mail-fail .disp-btn-coral-pill,
  .disp-mail-fail .disp-btn-ghost-pill,
  .disp-mail-error .disp-btn-coral-pill,
  .disp-mail-card-cancel,
  .disp-mail-claim-link {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .disp-letter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .disp-letter-row .disp-btn-ghost {
    width: 100%;
    /* 44px minimum tap target, matching the mobile rules above. */
    min-height: 44px;
  }

  .disp-library-teaser {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .disp-library-teaser .disp-btn-ghost {
    width: 100%;
    min-height: 44px;
  }
}