/* demand.css -- Demand & Negotiation room. Tokens only; reuses base.css components.
   Calm and dense: background steps instead of borders, color only for accent and urgency. */

/* ---------------------------------------------------------------- Interaction lane, shared (round 7)
   Three classes the lane's rooms (demand, treatment, contacts, litigation, intake) all use. They live
   here rather than five times over because CSS is not scoped by file and base.css is Foundation's:
   .field-err  the validation message beside a field (S18.4)
   .field-why  the visible reason a disabled control carries (S18.6)
   .resume-bar the boot line that offers back what was being reviewed (S19.13)
   All three are 13 px secondary lines in the F1 ladder; none of them is a chip, a badge or a banner. */
/* the words carry the meaning, so the message is in the text colour at full contrast in both themes;
   the mark is the field's own --urgency-3 border, which is a non-text mark at the 3:1 floor */
.field-err { margin: 4px 0 0; font-size: var(--fs-meta); line-height: 18px; color: var(--text); font-weight: 500; }
.field-why { margin: 4px 0 0; font-size: var(--fs-meta); line-height: 18px; color: var(--text-secondary); }
.input[aria-invalid="true"] { border-color: var(--urgency-3); }

.resume-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  width: min(100%, 974px); margin: 12px auto 0; padding: 0 16px;
}
.resume-text { margin: 0; flex: 1 1 240px; min-width: 0; color: var(--text-secondary); }
.resume-acts { display: inline-flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 560px) { .resume-bar { padding-inline: 12px; } }

/* the session-expired panel (S19.5): over the card, never instead of it -- the draft stays visible */
.reauth-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0.32); padding: 16px; }
.reauth-panel { max-width: 420px; padding: 20px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-layer); }
.reauth-panel h2 { margin: 0 0 8px; }
.reauth-panel p { margin: 0 0 12px; }
.reauth-panel p:last-child { margin-bottom: 0; }

.view.dm { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.dm .subnav { flex: none; }
.dm-sub-meta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.dm-grid {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 344px;
}
.dm-left, .dm-center, .dm-rail { min-height: 0; overflow: auto; }
.dm-left { background: var(--bg-pane); border-right: 1px solid var(--line-subtle); padding: var(--rail-pad); }
.dm-center { padding: var(--s3) var(--gutter) 64px; }
.dm-rail { background: var(--bg-pane); border-left: 1px solid var(--line-subtle); padding: var(--rail-pad); }

.dm-money { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.dm-muted { color: var(--text-secondary); }
.dm-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.005em; }

/* ---------------------------------------------------------------- sections */
.dm-sec { padding: 10px 0 12px; }
.dm-sec + .dm-sec { border-top: 1px solid var(--line-subtle); }
.dm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin-bottom: 4px; }
.dm-sec-head .linkbtn { display: inline-flex; align-items: center; gap: 4px; }
.dm-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; font-size: var(--fs-meta); }
.dm-line-lg { font-size: var(--fs-body); font-weight: 500; }
.dm-line-r { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dm-cite-sp { display: inline-block; width: 0; }
/* round 7 (S16.12): these three are compact controls in a 320 px rail; each one is at least 24 px in
   both directions so a finger or an imprecise pointer lands on it. */
.dm-disc { display: inline-flex; align-items: center; min-height: 24px; gap: 4px; border: 0; background: none; padding: 0 4px 0 0; margin-left: -2px; font-weight: 500; color: var(--text); border-radius: 4px; }
.dm-disc:disabled { cursor: default; }
.dm-disc-none { padding-left: 16px; }
.dm-disc .ico { color: var(--text-secondary); }
.dm-rows { margin: 0 0 4px 14px; }
.dm-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; font-size: var(--fs-caption); }
.dm-row-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-rows .cite { height: 18px; padding: 0 4px; font-size: var(--fs-micro); }

.dm-liens { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.dm-liens th { text-align: left; font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); padding: 2px 0 4px; }
.dm-liens th.num, .dm-liens td.num { text-align: right; padding-left: 8px; }
.dm-liens td { padding: 5px 0; vertical-align: top; }
.dm-liens td:first-child div:first-child { white-space: nowrap; }
.dm-liens td:last-child { text-align: right; padding-left: 6px; width: 1%; }
.dm-liens tr + tr td { border-top: 1px solid var(--line-subtle); }
.dm-liens .meta-quiet { font-size: var(--fs-caption); line-height: 16px; }

/* ---------------------------------------------------------- net to client */
.dm-net { position: relative; }
.dm-net::before { content: ""; position: absolute; inset: 0 -16px; background: var(--accent-soft); opacity: 0; pointer-events: none; transition: opacity 800ms var(--ease); z-index: 0; }
.dm-net > * { position: relative; z-index: 1; }
.dm-flash::before { opacity: 1; transition: none; }
.dm-flash.dm-flash-fade::before { opacity: 0; transition: opacity 800ms var(--ease); }
.dm-ver-wrap { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
/* the Inputs and settlement-statement chips keep the bordered look; the Net to client verifier is now an
   F2 scope disclosure, which carries its own glyph and secondary word */
span.dm-ver { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-caption); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--line-subtle); white-space: nowrap; }
button.dm-ver { font-size: var(--fs-meta); }
button.dm-ver.is-unv .disc-t { font-weight: 500; color: var(--text); }
.dm-reverify { min-height: 24px; padding: 0 6px; font-size: var(--fs-caption); gap: 4px; }
.dm-copy { min-height: 24px; padding: 0 6px; font-size: var(--fs-caption); }
.dm-net .dm-sec-head { flex-wrap: wrap; }
/* S11.3: the one line that says the result on screen is not the offer under review */
.dm-mismatch { margin: 2px 0 4px; font-size: var(--fs-meta); line-height: 18px; color: var(--text); }
.dm-mismatch .linkbtn { font-size: var(--fs-meta); }
/* S11.12: one select, kinds kept apart by its optgroups */
.dm-scn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; min-width: 0; }
.dm-scn-lbl { flex: 0 0 auto; }
.dm-scn-err { flex: 1 0 100%; }
.dm-scn-l { flex: 0 0 auto; font-size: var(--fs-caption); color: var(--text-secondary); }
.dm-scn-sel { flex: 1 1 auto; min-width: 0; height: var(--control-h); font-size: var(--fs-meta); }
.dm-scn-other { flex: 0 0 96px; height: var(--control-h); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.dm-math { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); table-layout: auto; }
.dm-math td, .dm-math th { padding: 3px 0; }
.dm-math th { text-align: left; font-weight: inherit; padding-right: 8px; }
.dm-math td.num { text-align: right; white-space: nowrap; vertical-align: baseline; }
/* a cell holding a state word instead of an amount wraps like prose; a table never shrinks below the
   widest unbreakable cell, and an unbroken "Unknown -- liens not screened" pushed the whole column out */
.dm-math td.dm-words { white-space: normal; }
.dm-math td .disc { margin-left: 4px; white-space: nowrap; }
/* the scenario the subtotal belongs to sits under its own label rather than wrapping the row's first line */
.dm-at { display: block; font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); }
.dm-sub td, .dm-sub th { padding-top: 6px; border-top: 1px solid var(--line-subtle); }
.dm-total td, .dm-total th { padding-top: 7px; border-top: 1px solid var(--line); font-weight: 600; font-size: var(--fs-body); }
.dm-net-val { font-size: 15px; }
.dm-net-val.unk { font-size: var(--fs-meta); font-weight: 500; }
.dm-how { margin-top: 6px; font-size: var(--fs-meta); }
/* bodies that live inside disclosures: lists of items with their own state word */
.dm-vscope, .dm-costs, .dm-srcs { list-style: none; margin: 4px 0; padding: 0; }
.dm-vscope li, .dm-costs li, .dm-srcs li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.dm-vscope li svg, .dm-costs li svg { flex: 0 0 auto; align-self: center; color: var(--text-secondary); }
.dm-vscope li.is-open { color: var(--text-secondary); }
.dm-cost-l { flex: 1 1 auto; min-width: 0; }
.dm-costs .dm-money, .dm-costs .unk { flex: 0 0 auto; }
.dm-costs .meta, .dm-srcs .meta { flex: 0 0 auto; }
.dm-assume-h { margin: 8px 0 2px; font-size: var(--fs-caption); font-weight: 600; text-transform: none; }
.dm-assume-r { display: flex; gap: 8px; padding: 2px 0; align-items: baseline; }
.dm-assume-k { flex: 0 0 88px; font-size: var(--fs-caption); color: var(--text-secondary); }
.dm-assume-v { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); }
.dm-assume-v .meta { display: block; }
.dm-was { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-secondary); }
.dm-was s { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dm-refresh { margin-top: 2px; font-size: var(--fs-caption); }
/* round 6 3.7: Comparables is its number plus one word; the basis opens from the word */
.dm-comps-line { margin: 2px 0 0; font-size: var(--fs-meta); }

/* ----------------------------------------------------------------- inputs */
.dm-inputs-note { font-size: var(--fs-caption); margin: -2px 0 4px; }
.dm-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center; padding: 4px 6px; margin: 0 -6px; border-radius: var(--r-control); }
.dm-in:hover { background: var(--bg-hover); }
.dm-in label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-meta); cursor: pointer; }
.dm-in input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); flex: none; }
.dm-in input:disabled + .dm-in-l { color: var(--text); }
.dm-in-l { display: inline-flex; align-items: center; gap: 6px; }
.dm-in-note { grid-column: 1; padding-left: 22px; font-size: var(--fs-caption); line-height: 16px; }
.dm-in .cite { grid-column: 2; grid-row: 1 / span 2; }
.dm-in.off .dm-in-l { color: var(--text-secondary); }
.dm-in-bad { box-shadow: inset 0 0 0 1px var(--line-subtle); margin-top: 4px; }
.dm-bang { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--text-secondary); border-radius: 3px; font-size: var(--fs-micro); font-weight: 600; line-height: 1; }
.dm-changed { font-size: var(--fs-caption); color: var(--text); outline: 1px dashed var(--text-secondary); outline-offset: -1px; padding: 0 6px; border-radius: 4px; line-height: 20px; }
.dm-in-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ center */
.dm-cards { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.dm-cards:not(:empty) { margin-bottom: 20px; }
.dm-doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto 10px; }
.dm-doc-hint { font-size: var(--fs-caption); }
.dm-notready { max-width: 760px; margin: 8px auto 0; padding: 20px 0; display: grid; gap: 4px; border-top: 1px solid var(--line-subtle); }

.dm-paper {
  max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 44px 64px 52px; font-family: var(--font-doc); font-size: 16px; line-height: 27px; color: var(--text);
}
.dm-lh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line-subtle); font-family: var(--font-ui); }
.dm-lh-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.dm-lh-addr { font-size: var(--fs-caption); color: var(--text-secondary); text-align: right; }
.dm-block { position: relative; border-radius: 2px; }
.dm-meta { color: var(--text-secondary); font-size: 15px; }
.dm-lines, .dm-re { margin: 14px 0; }
.dm-re { padding-left: 24px; }
.dm-re div:first-child::before { content: "Re: "; margin-left: -28px; display: inline-block; width: 28px; }
.dm-title { font-size: 17px; line-height: 26px; font-weight: 600; margin: 22px 0 14px; }
.dm-h { font-size: 15px; line-height: 24px; font-weight: 600; margin: 20px 0 6px; }
.dm-p p { margin: 0 0 14px; }
.dm-encl { margin-top: 20px; font-size: 14px; color: var(--text-secondary); }
.dm-paper .cite { font-size: var(--fs-micro); height: 18px; padding: 0 5px; vertical-align: 2px; margin: 0 1px; }
.dm-paper .chip-illus { font-family: var(--font-ui); vertical-align: 2px; }
.dm-paper ::selection { background: var(--accent-soft); }

.dm-bad { padding-left: 14px; margin-left: -15px; border-left: 1px dashed var(--text-secondary); }
.dm-bad-tag { display: block; font-family: var(--font-ui); font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); }
.dm-new { background: var(--accent-soft); transition: background-color 800ms var(--ease); }
.dm-new.dm-new-settle { background: transparent; }

.has-sugg del { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--text-secondary); }
.has-sugg ins { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.has-sugg del .cite { opacity: 0.6; }
.dm-sugg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -6px 0 16px; padding: 6px 8px;
  font-family: var(--font-ui); font-size: var(--fs-meta); line-height: 18px;
  border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--bg-app);
}
.dm-sugg-mark { font-weight: 600; font-size: var(--fs-caption); }
.dm-sugg-q { flex: 1 1 200px; min-width: 0; color: var(--text-secondary); }
.dm-sugg .btn { height: 26px; }

.dm-exhibits { max-width: 760px; margin: 16px auto 0; padding: 8px 12px 10px; border-radius: var(--r-card); transition: background-color 800ms var(--ease); }
.dm-synced { background: var(--accent-soft); }
.dm-synced.dm-synced-settle { background: transparent; }
.dm-ex-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 28px; font-size: var(--fs-meta); }
.dm-ex-n { color: var(--text-secondary); }
.dm-ex-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-ex-internal { margin-top: 6px; font-size: var(--fs-caption); line-height: 22px; }

/* selection toolbar */
.dm-selbar {
  position: fixed; z-index: 35; display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-raised); border: 1px solid var(--line-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-float);
  font-family: var(--font-ui);
}
.dm-selbar .btn { height: 28px; gap: 5px; }
.dm-bar-form { display: flex; gap: 4px; align-items: center; }
.dm-bar-form .input { width: 320px; height: 28px; }
.dm-bar-form .btn { height: 28px; }
.dm-bar-msg { padding: 0 6px 0 8px; max-width: 320px; }

/* -------------------------------------------------------------------- rail */
.dm-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dm-rail-head .meta-quiet { font-size: var(--fs-caption); }
.dm-rail-head .plink, .dm-rail-head button { font-size: var(--fs-caption); }
.dm-limits { margin-top: 2px; font-size: var(--fs-caption); }
.dm-clock { margin: 12px 0 6px; padding: 10px 12px; background: var(--bg-raised); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-subtle); }
.dm-clock .meta { font-size: var(--fs-caption); line-height: 18px; margin-top: 4px; }
.dm-clock-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-clock-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--bg-hover); overflow: hidden; }
.dm-clock-bar span { display: block; height: 100%; border-radius: 2px; background: var(--text-secondary); }
.dm-clock-bar.u1 span { background: var(--urgency-1); }
.dm-clock-bar.u2 span { background: var(--urgency-2); }
.dm-clock-bar.u3 span { background: var(--urgency-3); }
.dm-clock-none, .dm-clock-past { background: transparent; box-shadow: none; padding: 4px 0; }
.dm-none { color: var(--text); }

.dm-tl { position: relative; margin: 12px 0 8px; padding-left: 0; }
.dm-tl::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.dm-ev { position: relative; display: grid; grid-template-columns: 10px 40px minmax(0, 1fr); column-gap: 8px; padding: 6px 6px 6px 0; margin-right: -6px; border-radius: var(--r-control); transition: background-color 800ms var(--ease); }
.dm-ev-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--bg-pane); box-shadow: inset 0 0 0 1.5px var(--text-secondary); position: relative; z-index: 1; }
.dm-ev-offer .dm-ev-dot, .dm-ev-demand .dm-ev-dot, .dm-ev-counter .dm-ev-dot { background: var(--text); box-shadow: none; }
.dm-ev-heard .dm-ev-dot { background: var(--bg-pane); box-shadow: none; outline: 1px dashed var(--text-secondary); outline-offset: -1px; }
.dm-ev-counter .dm-ev-dot { background: var(--bg-pane); box-shadow: inset 0 0 0 2px var(--text); }
/* a rail whose events cross a calendar year prints M/D/YY, which does not fit the 40 px column */
/* one width for every row, so the kind words still line up; 58 px clears the widest M/D/YY ("11/18/25") */
.dm-tl-yrs .dm-ev { grid-template-columns: 10px 58px minmax(0, 1fr); }
.dm-ev-date { font-size: 12px; color: var(--text-secondary); line-height: 20px; white-space: nowrap; }
.dm-ev-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.dm-ev-kind { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); font-weight: 500; }
.dm-ev-line .dm-money { font-size: 13px; }
/* S12.3: the state word sits with the amount, so a heard offer never reads like a recorded one */
.dm-ev-state { flex: 0 0 auto; font-size: var(--fs-caption); }
.dm-ev-terms { font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); }
.dm-ev-sub { font-size: var(--fs-caption); line-height: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.dm-ev-sub .disc { font-size: var(--fs-caption); }
.dm-ev-sub .plink { font-size: var(--fs-caption); }
.dm-ev-sub .cite { height: 18px; font-size: var(--fs-micro); padding: 0 4px; }
.dm-ev-heard .dm-ev-kind, .dm-ev-heard .dm-money { color: var(--text-secondary); }
.dm-ev-expired .dm-ev-kind, .dm-ev-rejected .dm-ev-kind, .dm-ev-filed .dm-ev-kind, .dm-ev-ack .dm-ev-kind { font-weight: 400; }
.dm-ev-new { background: var(--accent-soft); }
.dm-ev-new.dm-ev-settle { background: transparent; }
.dm-tl-empty { padding: 4px 0 4px 20px; }

.dm-rail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
/* S12.6: the reason a disabled action is disabled is a line under it, not a hover title */
.dm-counter-why { flex: 1 0 100%; margin: 0; font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); }
.dm-rail-who { margin: 2px 0 0; font-size: var(--fs-caption); line-height: 18px; }
.dm-rail-who .disc { font-size: var(--fs-caption); }
.dm-sep { color: var(--text-secondary); }
.dm-offer-form { margin: 4px 0 10px; display: grid; gap: 4px; }
.dm-offer-row { display: flex; gap: 4px; }
.dm-offer-row .input { flex: 1 1 auto; min-width: 0; }

.dm-ask { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.dm-ask-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.dm-qchip { border: 0; cursor: pointer; height: auto; min-height: 24px; white-space: normal; text-align: left; line-height: 16px; padding: 4px 6px; gap: 4px; align-items: baseline; }
.dm-qchip .ico { flex: none; color: var(--text-secondary); vertical-align: -1px; }
.dm-qchip:hover { color: var(--text); background: var(--line-subtle); }

/* ------------------------------------------------------------ source pane */
.dm-src {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(520px, 60%);
  display: flex; flex-direction: column; background: var(--bg-pane);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-layer);
}
.dm-src-doc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dm-src-doc .pane-head { padding-right: 44px; }
.dm-src-close { position: absolute; top: 6px; right: 8px; z-index: 2; }

/* ---------------------------------------------------------- round 3: words, bills, liens */
.dm-word { font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; }
.dm-spec-meta { margin: -2px 0 4px; padding-left: 16px; font-size: var(--fs-caption); line-height: 18px; }
.dm-spec-meta .linkbtn, .dm-row-rev { font-size: var(--fs-caption); }
.dm-row-rev { white-space: nowrap; }
.dm-rows li.dm-row-unk .dm-row-n { color: var(--text-secondary); }
.dm-lien-note { font-size: var(--fs-caption); line-height: 16px; margin-top: 2px; }
.dm-lien-flag { display: flex; align-items: flex-start; gap: 6px; color: var(--text); white-space: normal; }
.dm-lien-flag .dm-bang { margin-top: 1px; flex: none; }
.dm-liens tr.dm-lien-extra td { border-top: 0; padding: 0 0 6px; text-align: left; width: auto; }
.dm-liens tr.dm-lien-extra td:first-child div:first-child { white-space: normal; }
/* the exact text an optional outbound post would send, shown before it is sent (S13.8, S22.3) */
.pprev { margin: 4px 0 0; padding: 6px 8px; border-left: 2px solid var(--line); background: var(--bg-raised); font-size: var(--fs-meta); line-height: 18px; }
.dm-net-none { font-size: var(--fs-caption); line-height: 18px; }
.dm-res-note { font-size: var(--fs-caption); line-height: 18px; }
.dm-rail-res { margin: 4px 0 8px; font-size: var(--fs-caption); }

/* ---------------------------------------------------- settlement statement (4.3.5) */
.dm-stmt { max-width: 760px; margin: 0 auto; }
.dm-st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.dm-st-ver { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-st-ver .meta-quiet { font-size: var(--fs-caption); }
.dm-st-wrap { overflow-x: auto; background: var(--bg-pane); border-radius: var(--r-card); padding: 4px 14px; }
.dm-st { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.dm-st th, .dm-st td { padding: 7px 0; vertical-align: baseline; text-align: left; }
.dm-st th { font-weight: 500; white-space: nowrap; padding-right: 16px; }
.dm-st td.num { text-align: right; padding-right: 20px; white-space: nowrap; }
.dm-st .dm-st-note { color: var(--text-secondary); font-size: var(--fs-caption); line-height: 18px; }
.dm-st .dm-st-src { width: 1%; text-align: right; padding-left: 8px; white-space: nowrap; }
.dm-st .dm-st-src .cite { height: 18px; font-size: var(--fs-micro); padding: 0 4px; }
.dm-st tr + tr > * { border-top: 1px solid var(--line-subtle); }
.dm-st-sub th { padding-top: 10px; padding-bottom: 2px; font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 500; }
.dm-st tr.dm-st-lien > * { border-top: 0; padding-top: 3px; padding-bottom: 5px; }
.dm-st-lien th { font-weight: 400; padding-left: 14px; }
.dm-st-total > * { border-top: 1px solid var(--line) !important; font-weight: 600; }
.dm-st-total .dm-st-note { font-weight: 400; }
.dm-st-net { font-size: 15px; }
.dm-st .dm-word { font-size: var(--fs-meta); color: var(--text); }
.dm-st-foot { margin-top: 8px; font-size: var(--fs-caption); line-height: 18px; }
.dm-st-card { max-width: 760px; margin: 0 auto; }
.dm-st-card:not(:empty) { margin-top: 16px; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1280px) {
  .dm-grid { grid-template-columns: 272px minmax(0, 1fr) 312px; }
  .dm-paper { padding: 36px 40px 44px; }
}
@media (max-width: 1040px) {
  .dm-grid { grid-template-columns: 272px minmax(0, 1fr); }
  .dm-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-subtle); overflow: visible; }
  .view.dm { height: auto; }
  .dm-left, .dm-center { overflow: visible; }
}
@media (max-width: 720px) {
  .dm-grid { display: block; }
  .dm-left { border-right: 0; border-bottom: 1px solid var(--line-subtle); }
  .dm-center { padding: 16px; }
  .dm-paper { padding: 24px 18px 28px; font-size: 15.5px; line-height: 26px; }
  .dm-lh { flex-direction: column; gap: 2px; }
  .dm-lh-addr { text-align: left; }
  .dm-doc-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dm-src { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 70vh; z-index: 45; border-left: 0; border-top: 1px solid var(--line); }
  .dm-bar-form .input { width: 60vw; }
  .dm-sub-meta { display: none; }
  .dm-ex-list li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dm-ex-list li .meta-quiet { display: none; }
  .dm-st-wrap { padding: 2px 10px; }
  .dm-st th { white-space: normal; }
  .dm-st tr:not(.dm-st-sub) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .dm-st tr:not(.dm-st-sub) > .dm-st-note { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .dm-st tr:not(.dm-st-sub) > .dm-st-src { grid-column: 1 / -1; text-align: left; width: auto; padding: 0 0 6px; border-top: 0; }
  .dm-st td.num { padding-right: 0; }
}