/*
 * ddw app glue — the ONLY hand-written CSS allowed next to the extracted master CSS.
 * base.css and <id>.css are generated byte-for-byte from design/masters/ by
 * scripts/ddw/extract-css.mjs and must never be edited.
 *
 * Rules (SPEC 2026-10-21): every rule here carries a comment naming why it exists, and the
 * parity gate (e2e/ddw-parity) must still PASS with it. No new colour, spacing, copy or layout.
 *
 * (rules below)
 */

/* LOI card, slice 13 (DD blitz): the editable preview shows each fill-in as an inline input so the analyst edits the exact words in place; the master only has static .lf spans. Typography is inherited from .paper. */
.ddw .paper input.lf-input{font:inherit;font-weight:inherit;color:inherit;background:transparent;border:0;border-bottom:1px dashed var(--brand);border-radius:3px;padding:0 3px;min-width:6ch;max-width:100%;box-sizing:border-box;text-overflow:ellipsis}
/* Unfilled fill-in in the LOI preview: master brand tint so a gap is visible, never silent. */
.ddw .paper input.lf-input.lf-empty{background:var(--brand-tint)}
/* LOI clause rewording (backlog 3d1d8c844cdd): the small "Edit wording" control after each clause, quiet until hovered or focused; wraps instead of clipping in a narrow party column. */
.ddw .paper .loi-clause-edit{font:500 11px/1.4 var(--font-sans,inherit);margin-left:6px;padding:0 6px;border:1px solid var(--brand);border-radius:4px;background:transparent;color:var(--brand);cursor:pointer;opacity:.55;vertical-align:middle;white-space:normal;max-width:100%;overflow-wrap:anywhere}
/* Same control at full strength when the analyst points at it or tabs to it. */
.ddw .paper .loi-clause-edit:hover,.ddw .paper .loi-clause-edit:focus-visible{opacity:1}
/* A reworded clause carries the fill-in brand tint, so the analyst sees which wording differs from the approved template. */
.ddw .paper .loi-clause-edited{background:var(--brand-tint);border-radius:3px}
/* The in-place rewording editor takes the clause's full line. */
.ddw .paper .loi-clause-editor{display:block}
/* Its textarea uses the document font so the analyst edits the exact words at their printed size. */
.ddw .paper .loi-clause-editor textarea{display:block;width:100%;box-sizing:border-box;font:inherit;margin:4px 0}
/* Seller edit requests above the preview, framed in the brand line so they are not missed. */
.ddw .loi-edit-requests{border:1px solid var(--brand);border-radius:8px;padding:10px 14px;margin:0 0 12px}
/* The request list keeps the master list indent. */
.ddw .loi-edit-requests ul{margin:6px 0;padding-left:18px}
/* Keyboard focus ring on a fill-in, same ring as .btn:focus-visible. */
.ddw .paper input.lf-input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Draft/sent/signed tracker: a wrapping row of master prep-pills, never wider than the card. */
.ddw .loi-card .loi-tracker ol{list-style:none;display:flex;gap:10px 18px;flex-wrap:wrap;margin:0 0 6px;padding:0}
/* Tracker step: pill beside its label. */
.ddw .loi-card .loi-tracker li{display:flex;align-items:center;gap:8px;min-width:0}
/* LOI card inputs never exceed the card width (360 px phones). */
.ddw .loi-card .field input{width:100%;max-width:100%;box-sizing:border-box}
/* Issued-version list: one row per version (label + PDF + DOCX), wrapping on phones. */
.ddw .loi-card .loi-versions{list-style:none;margin:6px 0;padding:0;display:grid;gap:8px}
/* Issued-version row: wraps instead of overflowing. */
.ddw .loi-card .loi-versions li{flex-wrap:wrap;gap:8px}
/* Send LOI stays in the first viewport and pinned while the long form scrolls (ASK-a327cebe36). */
.ddw .loi-card .loi-send-bar{position:sticky;top:0;z-index:5;background:var(--surface,#fff);padding:10px 0;border-bottom:1px solid var(--line)}
/* LOI card action rows wrap instead of overflowing. */
.ddw .loi-card .loi-actions{flex-wrap:wrap;gap:10px}
/* STANDING #116 phone widths: full-width action buttons. */
@media(max-width:700px){.ddw .loi-card .loi-actions .btn{flex:1 1 100%}}
/* STANDING #116 phone widths: the paper grows with its text instead of scrolling inside the page. */
@media(max-width:700px){.ddw .loi-card .paper{padding:16px;max-height:none;overflow-x:hidden}}
/* STANDING #116 phone widths: the two parties stack. */
@media(max-width:700px){.ddw .loi-card .paper .parties{grid-template-columns:1fr}}
/* Blitz S20: seller overview/request table text buttons were 20px high at tablet
 * widths. Keep the signed-off master bytes intact; enlarge only these live hit boxes. */
@media (min-width: 701px) and (max-width: 1024px) {
  #ddw[data-ddw-live] #ovCats td button,
  #ddw[data-ddw-live] #reqTable td button {
    min-height: 44px;
  }
}


/* Seller portal, live only: the engine sets data-ddw-live in real mode (seam nav-dismiss), never in fixture mode, so
   the parity gate is unaffected. The Ask panel icon buttons are 30 px wide in the master; a phone tap target must be
   at least 32 px (lane dd-seller-mobile, 26 Oct). */
/* LOI card (DD demo 27 Oct). */
.ddw[data-ddw-live] .kc-icon-btn{min-width:32px;min-height:32px}

/* Deal-room tab header chip, side-by-side head only (>980 px; at <=980 base.css stacks the head into a column).
   Live walk 27 Oct, Financials "USD · seller revenue (run)" at 1000-1150 px: base.css keeps the chip nowrap while
   `.ddw *{min-width:0}` lets flex shrink its box below the text, so the words ran up to 40 px past the panel head and
   22 px past the panel border (#923 shortened the label for phones; the shrink is the remaining cause). The chip keeps
   its own width; a chip longer than 45% of the head wraps, right-aligned, instead of overflowing. */
@media(min-width:981px){#ddw #dealRoom .panel-head>.mini{flex:0 0 auto;max-width:45%;white-space:normal;text-align:right}}

/* Deal-room live table links (Rich {link}: Findings "Evidenced in", Top risks, Report deliverables). No master table
   carries a link, so these fell back to the browser's blue / visited purple, unreadable on the dark surface (live parity
   walk 27 Oct). Master brand ink, underlined so they still read as links; long file names wrap instead of overflowing. */
#ddw .filetable td a:not(.prep-pill){color:var(--brand);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
/* Report deliverables: the row's Download / Open pill is a working link to that file; it keeps the master pill look. */
#ddw .filetable td a.prep-pill{text-decoration:none;min-height:0}
/* Keyboard focus ring on that pill, same ring as .btn:focus-visible. */
#ddw .filetable td a.prep-pill:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* Sidebar footer with the live Sign out control (src/components/ddw/shell/sign-out-control.tsx). The master footer has no
   button, so "Sign out" wrapped onto two lines, squeezed the signed-in name to a few letters and, in the collapsed rail,
   ran 42 px out of the sidebar over the page. The name ellipsises and the button keeps one line. */
#ddw .side-foot:has([data-ddw-signout-slot]) .logo-text{flex:1 1 auto;min-width:0}
/* Signed-in name / sub line: one line each, ellipsised (full text stays in the DOM). Live only (:has the slot), so the
   fixture footer and the parity gate are untouched. */
#ddw .side-foot:has([data-ddw-signout-slot]) .logo-text b,#ddw .side-foot:has([data-ddw-signout-slot]) .logo-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The Sign out slot never shrinks below its one-line button. */
#ddw [data-ddw-signout-slot]{flex:none}
/* Sign out: one line; its icon only shows in the collapsed rail. */
#ddw [data-ddw-signout]{white-space:nowrap}
/* The icon half of Sign out stays hidden outside the collapsed rail. */
#ddw [data-ddw-signout] .signout-icon{display:none}
/* Collapsed desktop rail (64 px, labels hidden like the nav): avatar above an icon-only Sign out (aria-label "Sign out"). */
@media(min-width:981px){
  #ddw.rail-collapsed .side:not(.open) .side-foot{flex-direction:column;padding-inline:0}
  /* The Sign out slot's left margin is only meaningful beside the expanded label. */
  #ddw.rail-collapsed .side:not(.open) [data-ddw-signout-slot]{margin-left:0!important}
  /* Collapsed Sign out shrinks to its icon's square. */
  #ddw.rail-collapsed .side:not(.open) [data-ddw-signout]{width:44px;padding:0;justify-content:center}
  /* The icon takes over from the label in the collapsed rail. */
  #ddw.rail-collapsed .side:not(.open) [data-ddw-signout] .signout-icon{display:block}
  /* The label is the icon's hidden counterpart in the collapsed rail. */
  #ddw.rail-collapsed .side:not(.open) [data-ddw-signout] .signout-label{display:none}
}

/* DD demo 27 Oct (notes B2/B3/C2): Seller email chips, representative picker and the one-line help under each LOI label. */
.ddw .loi-card .field .help{display:block;margin:2px 0 6px;color:var(--ink-3);font-size:.78rem;line-height:1.35}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;box-sizing:border-box;width:100%;max-width:100%;min-height:40px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--surface,#fff)}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip-box:focus-within{outline:2px solid var(--brand);outline-offset:1px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip-box.invalid{border-color:var(--neg)}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip-box input{flex:1 1 140px;min-width:120px;width:auto;border:0;outline:0;background:transparent;padding:4px 2px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 4px 3px 10px;border-radius:999px;background:var(--brand-tint);color:var(--ink);font-size:.85rem;overflow-wrap:anywhere}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip.chip-bad{background:#fde8e8;color:var(--neg)}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .chip-x{border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;min-width:28px;min-height:28px;color:inherit}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .rep-picker select{width:100%;max-width:100%;box-sizing:border-box;min-height:40px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .rep-new{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:var(--r-sm,8px)}
/* E3: the LOI on its own full-screen page (/loi/<dealId>). */
.ddw .loi-fullscreen{max-width:1480px;margin:0 auto;padding:clamp(12px,2vw,28px)}
/* E3: toolbar above the full-screen LOI composer. */
.ddw .loi-fullscreen-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
/* E3: compact back-link text inside the full-screen LOI toolbar. */
.ddw .loi-fullscreen-toolbar .mini{margin:0}
/* E3: feedback trigger button in the full-screen LOI toolbar. */
.ddw .loi-feedback-trigger{min-height:44px;padding:9px 16px;border:1px solid var(--brand);border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer}
/* E3: focus ring on the full-screen LOI feedback trigger button. */
.ddw .loi-feedback-trigger:hover,.ddw .loi-feedback-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .loi-fullscreen-link{margin-left:auto}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .choice-other{display:grid;gap:6px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .choice-other select{width:100%;max-width:100%;box-sizing:border-box;min-height:40px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .loi-auto{display:block;padding:9px 10px;border:1px dashed var(--line);border-radius:var(--r-sm,8px);color:var(--ink-3);overflow-wrap:anywhere}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .loi-view-toggle{gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* LOI card (DD demo 27 Oct). */
.ddw .loi-card .loi-view-toggle .btn[aria-pressed=true]{border-color:var(--brand);color:var(--brand)}

/* ONE Financials action area (live-demo note G4a, 27 Oct): a wrapping row of real buttons, never wider than the panel. */
.ddw .fin-actions .fin-actions-row{display:flex;flex-wrap:wrap;gap:10px}
/* Financials action buttons: 44 px taps, text wraps inside the button instead of clipping. */
.ddw .fin-actions .btn{min-height:44px;max-width:100%;white-space:normal;text-align:center;justify-content:center;overflow-wrap:anywhere}
/* Financials action result line wraps long server messages. */
.ddw .fin-actions [data-fin-note]{overflow-wrap:anywhere}
/* Phones: one action button per line (STANDING #116). */
@media(max-width:700px){.ddw .fin-actions .btn{flex:1 1 100%}}
/* Financials item cards replace the six-column table that ran off a phone. */
.ddw .fin-items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
/* One absent Financials item = one card. */
.ddw .fin-items>li{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:12px 14px;min-width:0}
/* Card head: title and status pill wrap rather than overflow. */
.ddw .fin-items .fin-item-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
/* Long item titles break inside the card. */
.ddw .fin-items .fin-item-head b{overflow-wrap:anywhere}
/* Long file names in the status line break inside the card. */
.ddw .fin-items p{margin:6px 0 0;overflow-wrap:anywhere}
/* Next / Who / Comes from as a small definition list. */
.ddw .fin-items dl{display:grid;gap:6px;margin:10px 0 0}
/* Label and value side by side on wide screens. */
.ddw .fin-items dl>div{display:grid;grid-template-columns:minmax(80px,max-content) minmax(0,1fr);gap:2px 14px}
/* Definition labels match the master table headings. */
.ddw .fin-items dt{color:var(--ink-3);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
/* Definition values wrap. */
.ddw .fin-items dd{margin:0;overflow-wrap:anywhere}
/* Phones: label above value. */
@media(max-width:700px){.ddw .fin-items dl>div{grid-template-columns:1fr}}
/* Status pills may wrap inside a card. */
.ddw .fin-items .prep-pill{white-space:normal}
/* Report tab status table (what is running / missing / ready): the question column keeps its width on wide screens. */
.ddw #rpEmptyFacts .filetable td:first-child{font-weight:600;white-space:nowrap}
/* Phones: the question column wraps so the table never needs sideways scrolling. */
@media(max-width:700px){.ddw #rpEmptyFacts .filetable td:first-child{white-space:normal}}
/* Report tab LOI entry: the link button wraps and keeps a 44 px tap. */
.ddw #rpLoi #loiOpenTab{white-space:normal;text-align:center;min-height:44px}
/* Phones: LOI entry heading and link stack. */
@media(max-width:700px){.ddw #rpLoi .row-flex{flex-wrap:wrap}}
/* Phones: LOI entry link full width. */
@media(max-width:700px){.ddw #rpLoi #loiOpenTab{flex:1 1 100%}}
/* Multi-select (DD live demo 28 Oct): tick-row dropdown, removable chips, styled Add-other. Master tokens only. */
.ddw .multi-choice-wrap{display:grid;gap:8px;max-width:100%}
.ddw .multi-choice-chips{display:flex;flex-wrap:wrap;gap:6px}
.ddw .multi-choice{border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--surface,#fff);max-width:100%;box-sizing:border-box}
.ddw .multi-choice summary{cursor:pointer;min-height:40px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;color:var(--ink)}
.ddw .multi-choice summary::-webkit-details-marker{display:none}
.ddw .multi-choice summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin-top:-3px}
.ddw .multi-choice[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.ddw .multi-choice summary:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:var(--r-sm,8px)}
.ddw .multi-choice-body{display:grid;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
.ddw .multi-choice-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:4px 12px;max-height:260px;overflow-y:auto}
.ddw .multi-choice-opt{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 6px;border-radius:6px;cursor:pointer;overflow-wrap:anywhere}
.ddw .multi-choice-opt:hover{background:var(--brand-tint)}
.ddw .multi-choice-opt:focus-within{outline:2px solid var(--brand);outline-offset:0}
.ddw .multi-choice-opt input[type=checkbox]{width:18px;height:18px;flex:none;margin:0;accent-color:var(--brand)}
.ddw .multi-choice-add{display:flex;gap:8px;align-items:stretch}
.ddw .multi-choice-add input{flex:1 1 auto;min-width:0;width:auto;min-height:40px}
.ddw .multi-choice-add .btn{flex:none;min-height:40px}
@media(max-width:600px){.ddw .multi-choice-list{grid-template-columns:minmax(0,1fr)}}
.ddw .multi-choice-wrap .chip{font-family:inherit;display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 4px 3px 10px;border-radius:999px;background:var(--brand-tint);color:var(--ink);font-size:.85rem;overflow-wrap:anywhere}
.ddw .multi-choice-wrap .chip-x{border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;min-width:28px;min-height:28px;color:inherit}
.ddw .multi-choice-add input{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--surface,#fff);padding:0 10px}
.ddw .multi-choice-add input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Wizard LOI step (28 Oct sweep): seller-email chips + new-representative form use the same tokens as the deal-room card. */
.ddw .chip-input{display:grid;gap:6px}
.ddw .chip-input .chip-box{display:flex;flex-wrap:wrap;gap:6px}
.ddw .chip-input .chip-box:empty{display:none}
.ddw .chip-input .chip{font-family:inherit;padding:3px 4px 3px 10px;border-radius:999px;background:var(--brand-tint);color:var(--ink);font-size:.85rem;overflow-wrap:anywhere}
.ddw .chip-input .chip-x{border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;min-width:28px;min-height:28px;color:inherit}
.ddw .chip-input input{width:100%;min-height:40px;box-sizing:border-box}
.ddw #loi-add-representative{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:var(--r-sm,8px)}
.ddw #loi-add-representative label{display:grid;gap:4px}