/* NOTE: selectors use the bare id — the button is re-parented to
                             #chatInterface at init (see the script below): .timeline-card and
                             .deal-room-container create fixed-position containing blocks
                             (glow filter / container-type), which would pin the button to the
                             card bottom instead of the screen. */
                          /* ── "Back to Timeline" — timeline-palette ring + glow ───────────────
                             The four colours ARE the timeline's own stage palette (#FFC107
                             yellow, #FF3B30 red, #3B82F6 blue, #22C55E green), so the control
                             that returns you to the timeline is painted in the thing it returns
                             you to.

                             Built as a gradient BORDER over a dark face, matching the reference:
                             the colour lives in the ring and the halo, the label sits on a dark
                             interior at 18.8:1.

                             Note for anyone tempted to make it a gradient FILL instead: that
                             constrains the label colour. Measured against these four stops,
                             white ranges 1.63:1 (yellow) to 3.68:1 (blue) and fails everywhere,
                             so a filled version would have to use dark ink, which does clear
                             4.5:1 on all four (5.04 worst, on the blue). It is a workable
                             design — just not this one.

                             Two-layer background is what makes that work: the first gradient
                             paints the padding-box (the face), the second paints the border-box
                             (the ring), with the border itself transparent so the second shows
                             through it. */
                          #tempDFloatBack{
                            position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
                            z-index:10050; display:none; align-items:center; gap:9px;
                            padding:11px 24px; border-radius:50px;
                            border:1.5px solid transparent;
                            background:
                              linear-gradient(180deg,#111a2c 0%,#0a1221 100%) padding-box,
                              linear-gradient(90deg,rgba(255,193,7,.62) 0%,rgba(255,59,48,.55) 34%,rgba(59,130,246,.6) 67%,rgba(34,197,94,.6) 100%) border-box;
                            color:#eef2f8; font-size:14.5px; font-weight:700; letter-spacing:.2px;
                            font-family:inherit; cursor:pointer; white-space:nowrap;
                            box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
                            transition:transform .15s ease, box-shadow .2s ease;
                          }
                          /* the halo: the same gradient, faint and still (it used to breathe; on 2026-10-06 the user asked for a calmer, more professional button).
                             z-index:-1 puts it behind the button's own face without needing a
                             wrapper element — the button already makes its own stacking context
                             (position:fixed + z-index), so it cannot slip behind the page. */
                          #tempDFloatBack::before{
                            content:""; position:absolute; inset:-7px; z-index:-1;
                            border-radius:inherit;
                            background:linear-gradient(90deg,#FFC107 0%,#FF3B30 34%,#3B82F6 67%,#22C55E 100%);
                            filter:blur(6px); opacity:.16;
                            animation:none;
                            pointer-events:none;
                          }
                          #tempDFloatBack:hover{ transform:translateX(-50%) translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
                          #tempDFloatBack:active{ transform:translateX(-50%) scale(.98); }
                          #tempDFloatBack i{ font-size:14px; color:#eef2f8 !important; }
                          /* the shared #popup23 modal (document Details drawer, access picker,
                             invite forms…) sits at z-index 9999 — BELOW this button's 10050.
                             While the modal is open the button must not float over it. */
                          body:has(#popup23[style*="display: block"]) #tempDFloatBack{ display:none !important; }
                          /* Breathing, not flashing — opacity and a few percent of scale. The
                             halo is a blurred element now, so animating it costs no repaint of
                             the button itself. */
                          @keyframes tempDBackGlow{
                            0%,100%{ opacity:.45; transform:scale(1); }
                            50%    { opacity:.9;  transform:scale(1.05); }
                          }
                          @media (prefers-reduced-motion: reduce){
                            /* keep the halo, drop the breathing */
                            #tempDFloatBack::before{ animation:none; opacity:.16; }
                            #tempDFloatBack{ transition:none; }
                            #tempDFloatBack:hover{ transform:translateX(-50%); }
                          }

                          /* ==================================================================
                             DOCUMENT MODAL — the Details drawer and its action forms.
                             ------------------------------------------------------------------
                             #popup23 is the deal room's SHARED dialog, hard-set to width:440px
                             with 32px padding. That is right for a confirm prompt and far too
                             narrow for a document record, so these rules widen and restructure
                             it — scoped with :has() on a marker element the drawer renders.
                             That scoping is deliberate: the moment any other feature replaces
                             #popupContent23, the marker leaves the DOM and the dialog reverts
                             to its own 440px self with no class bookkeeping to get stale.
                          ================================================================== */
                          #popup23:has(#tddDetailRoot),
                          #popup23:has(#tddFormRoot){
                            padding:0 !important;
                            overflow:hidden !important;          /* clip the header/footer bands */
                            border-radius:18px !important;
                            background:#0b1220 !important;
                            border:1px solid rgba(255,255,255,0.10) !important;
                            box-shadow:0 30px 80px rgba(0,0,0,.66) !important;
                          }
                          #popup23:has(#tddDetailRoot){ width:min(1040px, 95vw) !important; }
                          #popup23:has(#tddFormRoot){   width:min(560px, 95vw) !important; }
                          /* the decorative dashed inset would cut across the bands */
                          #popup23:has(#tddDetailRoot)::after,
                          #popup23:has(#tddFormRoot)::after{ display:none !important; }
                          /* the shared × becomes this modal's own header control */
                          #popup23:has(#tddDetailRoot) #close23,
                          #popup23:has(#tddFormRoot) #close23{
                            right:13px; top:13px; width:32px; height:32px; font-size:21px;
                            background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14);
                            color:#c3cee2; box-shadow:none;
                          }
                          #popup23:has(#tddDetailRoot) #close23:hover,
                          #popup23:has(#tddFormRoot) #close23:hover{
                            background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3);
                            color:#fff; transform:none; box-shadow:none;
                          }

                          /* ---------- shell: fixed header, scrolling body, fixed footer ---------- */
                          .tddm{ display:flex; flex-direction:column; max-height:min(88vh, 920px); color:#e6edf8; text-align:left; }
                          .tddm *{ box-sizing:border-box; }
                          .tddm-hd{
                            flex:0 0 auto; display:flex; gap:13px; align-items:flex-start;
                            /* 58px of right padding keeps the title clear of the × */
                            padding:17px 58px 15px 20px;
                            border-bottom:1px solid rgba(255,255,255,.08);
                            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
                          }
                          .tddm-ico{
                            width:40px; height:46px; flex:0 0 40px; border-radius:8px;
                            display:grid; place-items:center; font-size:17px; border:1px solid;
                          }
                          .tddm-ico.pdf  { color:#e5484d; background:rgba(229,72,77,.14);  border-color:rgba(229,72,77,.42); }
                          .tddm-ico.doc  { color:#4aa9ff; background:rgba(74,169,255,.14); border-color:rgba(74,169,255,.42); }
                          .tddm-ico.sheet{ color:#3ee98c; background:rgba(62,233,140,.14); border-color:rgba(62,233,140,.42); }
                          .tddm-ico.image{ color:#c9b3ff; background:rgba(201,179,255,.14);border-color:rgba(201,179,255,.42); }
                          .tddm-ico.file { color:#8b96ac; background:rgba(139,150,172,.14);border-color:rgba(139,150,172,.38); }
                          .tddm-hd-tx{ flex:1; min-width:0; }
                          .tddm-ttl{
                            margin:0 0 8px; font-size:17px; font-weight:800; line-height:1.32;
                            color:#f8fafc; letter-spacing:-.2px; overflow-wrap:anywhere;
                          }
                          .tddm-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
                          .tddm-sub{ margin-top:7px; color:#7d8798; font-size:13.5px; line-height:1.5; }
                          .tddm-sub b{ color:#a9b4c6; font-weight:600; }
                          .tddm-bd{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:17px 20px 4px; }
                          .tddm-ft{
                            flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:9px;
                            padding:13px 20px; border-top:1px solid rgba(255,255,255,.08);
                            background:rgba(255,255,255,.022);
                          }
                          .tddm-ft .note{ margin-right:auto; color:#6b7689; font-size:13px; line-height:1.45; }

                          /* two columns on desktop: the record on the left, the panels that
                             answer "what do I do with it" on the right */
                          .tddm-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; }
                          @media (min-width:840px){
                            .tddm-grid{ grid-template-columns:minmax(0,1fr) 296px; }
                            .tddm-grid > .col{ min-width:0; }
                          }

                          /* ---------- sections ---------- */
                          .tddm-sec{ margin-bottom:19px; }
                          .tddm-sh{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 9px; }
                          .tddm-sh b{ color:#93a1b8; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
                          .tddm-sh span{ color:#69738a; font-size:13px; font-weight:600; text-align:right; }
                          .tddm-panel{ background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:11px; padding:11px 13px; }
                          .tddm-empty{ color:#69738a; font-size:14px; line-height:1.55; padding:2px 0; }

                          /* ---------- notices ---------- */
                          .tddm-note{ border-radius:11px; padding:11px 13px; font-size:14px; line-height:1.6; margin-bottom:15px; border:1px solid; }
                          .tddm-note b{ font-weight:800; }
                          .tddm-note.warn{ background:rgba(246,184,63,.08);  border-color:rgba(246,184,63,.38);  color:#ffd894; }
                          .tddm-note.mute{ background:rgba(139,150,172,.07); border-color:rgba(139,150,172,.32); color:#aab4c8; }
                          .tddm-note.info{ background:rgba(74,169,255,.07);  border-color:rgba(74,169,255,.32);  color:#9ccaff; }
                          .tddm-note .ln{ display:block; margin-top:5px; }

                          /* ---------- current-file card ---------- */
                          .tddm-file{ display:flex; align-items:center; gap:11px; }
                          .tddm-file .fi{ width:32px; height:36px; flex:0 0 32px; border-radius:6px; display:grid; place-items:center; font-size:15.5px; border:1px solid; }
                          .tddm-file .ft{ flex:1; min-width:0; }
                          .tddm-file .fn{ display:block; color:#e6edf8; font-size:14.5px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
                          .tddm-file .fm{ display:block; color:#7d8798; font-size:13px; margin-top:2px; }

                          /* ---------- aligned data rows ---------- */
                          .tddm-r{ display:grid; gap:10px; align-items:center; padding:9px 0; border-top:1px solid rgba(255,255,255,.06); }
                          .tddm-r:first-child{ border-top:none; padding-top:1px; }
                          .tddm-r .t1{ color:#dbe3f2; font-size:14px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
                          .tddm-r .t2{ display:block; color:#7d8798; font-size:13px; font-weight:400; margin-top:2px; line-height:1.45; }
                          .tddm-r .t3{ display:block; color:#f6ce7c; font-size:13px; margin-top:3px; line-height:1.45; }
                          .tddm-r-sig{ grid-template-columns:minmax(0,1fr) 144px; }
                          .tddm-r-ver{ grid-template-columns:38px minmax(0,1fr) auto; align-items:start; }
                          .tddm-r-rel{ grid-template-columns:26px minmax(0,1fr) auto; }
                          .tddm-r-two{ grid-template-columns:minmax(0,1fr) auto; }
                          .tddm-r-act{ grid-template-columns:8px minmax(0,1fr); align-items:start; }
                          .tddm-r-act .dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; }
                          .tddm-vn{ padding:2.5px 0; border-radius:6px; font-size:12px; font-weight:800; text-align:center; border:1px solid; }
                          .tddm-vn.cur{ color:#9ccaff; background:rgba(74,169,255,.14); border-color:rgba(74,169,255,.45); }
                          .tddm-vn.old{ color:#8b96ac; background:rgba(139,150,172,.1); border-color:rgba(139,150,172,.32); }
                          .tddm-open{ color:#9ccaff; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
                          .tddm-open:hover{ text-decoration:underline; }

                          /* ---------- key/value details panel ---------- */
                          .tddm-kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; margin:0; }
                          .tddm-kv dt{ color:#7d8798; font-size:13.5px; line-height:1.5; }
                          .tddm-kv dd{ margin:0; color:#dbe3f2; font-size:13.5px; font-weight:600; line-height:1.5; text-align:right; overflow-wrap:anywhere; }

                          /* ---------- controls ---------- */
                          .tddm-btn{
                            display:inline-flex; align-items:center; justify-content:center; gap:7px;
                            padding:9px 13px; border-radius:9px; font-size:14px; font-weight:700;
                            font-family:inherit; cursor:pointer; white-space:nowrap;
                            background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
                            color:#e2e8f0; transition:background .15s, border-color .15s;
                          }
                          .tddm-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
                          .tddm-btn i{ font-size:13px; }
                          .tddm-btn.pri{ background:linear-gradient(180deg,#f6d374,#eec14e); border-color:transparent; color:#201a06; }
                          .tddm-btn.pri:hover{ filter:brightness(1.06); background:linear-gradient(180deg,#f6d374,#eec14e); }
                          .tddm-btn.pri i{ color:#201a06 !important; }
                          .tddm-btn.ok{ background:rgba(62,233,140,.1); border-color:rgba(62,233,140,.45); color:#8ff3bd; }
                          .tddm-btn.dgr{ border-color:rgba(255,122,122,.38); color:#ff9d9d; }
                          .tddm-btn.dgr:hover{ border-color:rgba(255,122,122,.7); background:rgba(255,122,122,.1); }
                          .tddm-btn.blk{ width:100%; }
                          .tddm-btn.sm{ padding:7px 11px; font-size:13.5px; }
                          .tddm-acts{ display:flex; flex-direction:column; gap:7px; }
                          .tddm-acts .pair{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

                          .tddm-sel{
                            width:100%; padding:7px 9px; background:#0a1223;
                            border:1px solid rgba(255,255,255,.14); border-radius:8px;
                            color:#dbe3f2; font-size:13.5px; font-family:inherit; outline:none; cursor:pointer;
                          }
                          .tddm-sel:focus{ border-color:rgba(74,169,255,.6); }
                          .tddm-sel option{ background:#0a1223; color:#dbe3f2; }

                          /* ---------- form modal fields ---------- */
                          .tddm-fld{ margin-bottom:13px; }
                          .tddm-fld:last-child{ margin-bottom:0; }
                          /* :not(.tddm-radio) matters — a radio row is also a direct-child
                             <label>, and must NOT pick up the uppercase field-caption style */
                          .tddm-fld > label:not(.tddm-radio){
                            display:block; margin:0 0 6px; color:#93a1b8; font-size:12.5px;
                            font-weight:800; text-transform:uppercase; letter-spacing:.06em;
                          }
                          .tddm-fld > label:not(.tddm-radio) .rq{ color:#f87171; }
                          .tddm-in{
                            width:100%; padding:10px 12px; background:#0a1223;
                            border:1px solid rgba(255,255,255,.14); border-radius:9px;
                            color:#f8fafc; font-size:15px; font-family:inherit; outline:none;
                          }
                          .tddm-in:focus{ border-color:rgba(74,169,255,.6); }
                          textarea.tddm-in{ min-height:66px; resize:vertical; line-height:1.55; }
                          .tddm-hint{ margin-top:6px; color:#69738a; font-size:13.5px; line-height:1.5; }
                          .tddm-radio{
                            display:flex; align-items:center; gap:10px; padding:9px 11px; margin:0 0 6px;
                            border:1px solid rgba(255,255,255,.11); border-radius:9px; cursor:pointer;
                            font-size:14.5px; font-weight:500; color:#e2e8f0;
                            text-transform:none; letter-spacing:normal;
                            transition:border-color .15s, background .15s;
                          }
                          .tddm-radio:hover{ border-color:rgba(255,255,255,.25); }
                          .tddm-radio:has(input:checked){ border-color:rgba(74,169,255,.5); background:rgba(74,169,255,.08); }
                          .tddm-radio input{ accent-color:#4aa9ff; flex:0 0 auto; margin:0; }
                          .tddm-err{ display:none; margin-top:11px; color:#f87171; font-size:14px; line-height:1.5; }

                          /* ==================================================================
                             OFFER FORM — the one .tddm that is a real FORM, not a drawer.

                             #popup23 is a fixed 440px column shared by every modal on this
                             page. Nine fields in a 440px column is ~900px of content, so the
                             offer form opened as a narrow scrolling strip: you could not see
                             the price and the closing date at the same time, and the money you
                             were committing to sat above the fold of a 340px box.

                             An offer is ONE decision made of several numbers, so it has to be
                             readable as one screen. Widened via :has() — the same hook
                             #popup23:has(.temp-room-modal) already uses to restyle this shell
                             per-modal — so nothing is added when it opens and, more
                             importantly, nothing is left behind for the next modal that
                             reuses the shell.

                             Grouped, not just widened: the money, the timing and the
                             conditions are three different questions, and a flat list of nine
                             identical inputs made the reader do that grouping themselves.
                          ================================================================== */
                          /* The shared cap is calc(100dvh - 96px), sized for a modal that sits
                             inside 32px of shell padding. This one has none, so it can have that
                             margin back — 56px of it, which is most of what was overflowing on a
                             ~650px-tall window. */
                          /* ── EXACTLY ONE SCROLLER ─────────────────────────────────────────
                             There were two, side by side on the right edge: the modal shell
                             (#popupContent23, which caps its own height and defaults to
                             overflow auto) and the sheet's body. Two bars for one overflow is
                             not just ugly — grabbing the wrong one moves the header and the
                             footer off screen, so the Send button scrolls away from a form you
                             are still filling in.

                             .tddm is already built for this: a flex column whose .tddm-bd is
                             `flex:1 1 auto; min-height:0; overflow-y:auto`, with the header and
                             the footer pinned either side of it. All the shell has to do is
                             stop competing — cap the height, hide its own overflow, and let the
                             body be the one thing that scrolls. */
                          #popup23:has(.oba-form) #popupContent23{
                            max-height:calc(100dvh - 40px) !important;
                            overflow:hidden !important;
                            display:flex !important; flex-direction:column !important;
                          }
                          .oba-form{
                            max-height:calc(100dvh - 40px) !important;
                            min-height:0; flex:1 1 auto; overflow:hidden;
                          }
                          #popup23:has(.oba-form){
                            width:min(920px, 94vw) !important;
                            /* .tddm-hd / .tddm-bd / .tddm-ft already carry their own 20px and
                               their own dividers. The shell's 32px on top of that stacked into
                               a 52px gutter and cost the grid the width it needs, so the shell
                               contributes none and the sections run edge to edge — which is
                               also what lets the header rule and the footer rail read as real
                               edges instead of floating lines. */
                            padding:0 !important;
                            overflow:hidden !important;
                            border-radius:20px !important;
                          }
                          /* the 6px inset hairline would cut straight across a header and a
                             footer that now reach the edge */
                          #popup23:has(.oba-form)::after{ display:none !important; }
                          /* The ONE scroller. Its height comes from the flex track, never from
                             a hand-computed max-height: a fixed `calc(100dvh - 210px)` guesses
                             at a header and a footer whose real heights change with the mode
                             (the amend sheet's footer carries three buttons and wraps to two
                             lines on a phone), and a guess that is too large is a second
                             scrollbar again. */
                          .oba-form .tddm-bd{
                            flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
                            padding:12px 18px 6px;
                          }
                          .oba-form .tddm-hd, .oba-form .tddm-ft{ flex:0 0 auto; }
                          .oba-form .tddm-hd{ padding:13px 58px 11px 18px; }
                          .oba-form .tddm-ttl{ font-size:19.5px; letter-spacing:.2px; }

                          /* ── THE OFFER SHEET'S PALETTE ────────────────────────────────────
                             One place to change the whole form's colour, because every rule
                             below reads these rather than a literal.

                             IT IS THE ROOM'S PALETTE, and that is the point. This sheet used
                             to be green on the argument that the surface where terms are
                             COMPOSED should look different from the board where they are read
                             and answered. What that actually produced was one screen in the
                             product and one screen out of it — the deal room, the offer card
                             the sheet feeds, and the modal shell this very form is mounted in
                             are all navy with cream-gold hairlines, and the sheet was emerald.

                             So: navy surfaces, cream-gold rules and headings, gold for what
                             you press and for the state that is switched on, and the room's
                             own blue on a focused field (see .tddm-in:focus, which every other
                             form in this room already uses). */
                          .oba-form{
                            --ofLine:   rgba(235,216,176,.18);
                            --ofLine2:  rgba(235,216,176,.34);
                            --ofPanel:  rgba(255,255,255,.022);
                            --ofField:  #0a1223;
                            --ofHead:   #ebd8b0;
                            --ofLabel:  #93a1b8;
                            --ofText:   #f8fafc;
                            --ofGold:   #eec14e;
                            --ofGoldSo: rgba(238,193,78,.12);
                            --ofFocus:  rgba(74,169,255,.60);
                          }
                          /* TRANSPARENT, not a colour of its own. #popup23 already paints the
                             room's navy gradient and wears its gold border and glow; the sheet
                             used to lay its own green sheet over the top of all of it. With
                             nothing here the form sits directly on the room's modal surface
                             and can never drift from it again. */
                          #popup23:has(.oba-form) #popupContent23{
                            background:transparent !important;
                            border:0 !important;
                          }
                          .oba-form .tddm-hd{ border-bottom-color:var(--ofLine) !important; }
                          .oba-form .tddm-ft{ border-top-color:var(--ofLine) !important; }

                          /* Two columns on a desktop, one on a phone. The pairing is
                             deliberate rather than whatever order the panels are written in:
                             the money sits beside the dates (both are what the offer commits
                             to) and the conditions sit beside the due-diligence note (both are
                             what the buyer wants settled before it is firm). */
                          .obaf-grid{
                            display:grid; grid-template-columns:1fr 1fr; gap:11px;
                            /* STRETCH, not start. Two panels side by side ending at different
                               heights is the single thing that makes a form look unaligned —
                               the eye reads the ragged bottom edge as a mistake long before it
                               reads the fields. Equal-height cards per row; the hint text at
                               the foot of the shorter one takes up the slack. */
                            align-items:stretch;
                          }
                          .obaf-wide{ grid-column:1 / -1; }
                          @media (max-width:760px){
                            .obaf-grid{ grid-template-columns:1fr; }
                          }

                          /* ── WHICH PANEL SITS BESIDE WHICH ────────────────────────────────
                             Stretching two panels to equal height is right, and on its own it
                             made things worse: a short panel paired with a tall one grew a
                             hand's-breadth of dead green with its hint stranded at the bottom.
                             The fix is not to stop stretching — it is to stop pairing a short
                             panel with a tall one.

                                 row 1   the money  |  the dates
                                 row 2   the conditions, full width
                                 row 3   the message, full width

                             THE CONDITIONS PANEL IS THE ONE THAT OUTGREW ITS COLUMN. It now
                             holds four chips, two graded fields, a list the sender builds a
                             row at a time and the seller credit — more than either of the
                             panels above it, and at half the sheet's width it was a tall thin
                             ladder beside whatever had the bad luck to share its row. Given
                             the whole width it splits into two readable columns of its own
                             (see .obaf-condgrid) and the row above stops being dragged to its
                             height.

                             Due diligence moved INTO the money panel rather than losing its
                             own: it is one field, and a whole panel for one field is what
                             left it a 460px-tall empty box next to the conditions ladder.

                             DOM order already reads money → dates → conditions → message,
                             which is both what a phone gets and the order the sheet is meant
                             to be filled in, so `order` is only keeping the two-column pairing
                             honest. Every panel is numbered rather than just the ones that
                             move: with a single `order` set, everything still at the default 0
                             would jump ahead of it. */
                          @media (min-width:761px){
                            .oba-form .obaf-prop    { order:0; }   /* the address banner   */
                            .oba-form .obaf-p-prop  { order:1; }   /* off-market only      */
                            .oba-form .obaf-p-money { order:2; }
                            .oba-form .obaf-p-time  { order:3; }
                            .oba-form .obaf-p-cond  { order:4; }   /* obaf-wide            */
                            .oba-form .obaf-p-msg   { order:5; }
                            .oba-form .obaf-changed { order:6; }
                          }
                          /* Nothing else in the sheet has a natural bottom, so the one panel
                             that is now shorter than its neighbour anchors its summary rather
                             than letting the gap open above it. Same trick as .obaf-foot. */
                          .oba-form .obaf-p-time .obaf-sum{ margin-top:auto; }
                          /* The panel is a column so its trailing hint can be pushed to the
                             bottom, which is what makes two stretched panels line up on their
                             LAST line and not just on their box. */
                          .obaf-panel{ display:flex; flex-direction:column; }
                          .obaf-panel > .obaf-foot{ margin-top:auto; padding-top:9px; }

                          /* WHICH HOUSE THIS IS ABOUT, at the top of the sheet.
                             A form full of six-figure numbers with no address on it is a form
                             you can fill in for the wrong property — and in a room with several
                             live negotiations that is not a hypothetical. */
                          .obaf-prop{
                            grid-column:1 / -1; display:flex; align-items:center; gap:11px;
                            padding:10px 13px; border-radius:13px;
                            border:1px solid var(--ofLine2); background:var(--ofPanel);
                          }
                          .obaf-prop-ic{
                            flex:0 0 auto; width:34px; height:34px; border-radius:9px;
                            display:flex; align-items:center; justify-content:center;
                            background:rgba(235,216,176,.12); border:1px solid var(--ofLine2);
                            color:#ebd8b0; font-size:15px;
                          }
                          .obaf-prop-tx{ min-width:0; flex:1 1 auto; }
                          .obaf-prop-tx b{
                            display:block; font-size:15px; font-weight:800; color:var(--ofText);
                            letter-spacing:.1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                          }
                          .obaf-prop-tx span{ display:block; font-size:13px; color:#8fa4b8; margin-top:1px; }
                          .obaf-tag{
                            flex:0 0 auto; align-self:flex-start; padding:3px 9px; border-radius:50px;
                            font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
                            color:#ebd8b0; background:rgba(235,216,176,.12);
                            border:1px solid var(--ofLine2); white-space:nowrap;
                          }
                          @media (max-width:520px){
                            .obaf-prop{ flex-wrap:wrap; }
                            .obaf-prop-tx b{ white-space:normal; }
                          }

                          .obaf-panel{
                            border:1px solid var(--ofLine); border-radius:13px;
                            padding:11px 13px 12px; background:var(--ofPanel);
                          }
                          /* DESCENDANT, not child. The conditions panel wraps its heading in a
                             column div so the chips and the note can sit side by side, which
                             took the h5 out of `.obaf-panel > h5` — it lost its size, weight,
                             colour and uppercasing and rendered as dim body text while the
                             other two headings looked correct. A heading should not depend on
                             how deeply the panel nests its columns. */
                          .obaf-panel h5{
                            margin:0 0 10px; font-size:12.5px; font-weight:800; letter-spacing:.09em;
                            text-transform:uppercase; color:var(--ofHead);
                            display:flex; align-items:center; gap:7px;
                          }
                          .obaf-panel h5 i{ font-size:12px; color:#ebd8b0; }
                          .obaf-panel.money{ border-color:var(--ofLine2); background:rgba(238,193,78,.05); }
                          .obaf-panel.money h5{ color:#ffe6ae; }

                          /* a field row that can hold one or two controls */
                          .obaf-row{ display:grid; grid-template-columns:1fr; gap:9px; }
                          .obaf-row.two{ grid-template-columns:1.15fr .85fr; }
                          .obaf-f{ min-width:0; }
                          .obaf-f + .obaf-f{ margin-top:0; }
                          .obaf-f label{
                            display:block; margin:0 0 5px; font-size:12.5px; font-weight:800;
                            letter-spacing:.06em; text-transform:uppercase; color:var(--ofLabel);
                          }
                          .obaf-f label .rq{ color:#f87171; }
                          /* three across where the row is dates or short numbers; the two-up
                             rule below still governs everything else */
                          .obaf-row.three{ grid-template-columns:1fr 1fr 1fr; }
                          .obaf-row.even{ grid-template-columns:1fr 1fr; }
                          @media (max-width:560px){
                            .obaf-row.two, .obaf-row.three, .obaf-row.even{ grid-template-columns:1fr; }
                          }

                          /* input with a unit glued to it — the $ and the % belong to the field,
                             not to a hint underneath it */
                          .obaf-in{
                            display:flex; align-items:center; gap:0; background:var(--ofField);
                            border:1px solid rgba(255,255,255,.14); border-radius:10px;
                            transition:border-color .15s, box-shadow .15s;
                          }
                          .obaf-in:focus-within{
                            border-color:var(--ofFocus); box-shadow:0 0 0 3px rgba(74,169,255,.14);
                          }
                          .obaf-in .u{
                            flex:0 0 auto; padding:0 2px 0 12px; color:#8fa4b8;
                            font-size:15px; font-weight:700; user-select:none;
                          }
                          .obaf-in .u.post{ padding:0 12px 0 4px; }
                          .obaf-in input, .obaf-in select{
                            flex:1 1 auto; min-width:0; width:100%;
                            padding:8px 12px; background:transparent; border:none; outline:none;
                            color:var(--ofText); font-size:15px; font-family:inherit;
                          }
                          .obaf-in .u + input{ padding-left:4px; }
                          .obaf-in select{ cursor:pointer; color-scheme:dark; }
                          .obaf-in select option{ background:#0a1223; color:#dbe3f2; }
                          .obaf-in input[type="date"], .obaf-in input[type="datetime-local"]{ color-scheme:dark; }

                          /* ── A PLACEHOLDER MUST NOT READ AS A VALUE ───────────────────────
                             This was a real misread, not a nicety: "465,000" sitting in a
                             money field at the same weight as a typed number looks like an
                             offer of $465,000 that is already there. Somebody skims the sheet,
                             sees a price, and sends an offer with no price in it — the field
                             is empty and the form is refused, or worse they believe they
                             offered a number they never typed.

                             Three things separate the two now, and they compound: the colour
                             drops well below the text colour, the weight stays light even in
                             the big price field (whose values are 800), and every example
                             number is prefixed "e.g." in the markup. A value never says e.g. */
                          .obaf-in input::placeholder,
                          .oba-form textarea.obaf-ta::placeholder{
                            color:#4e5a70; opacity:1; font-weight:400; letter-spacing:0; font-size:14px;
                          }
                          .obaf-in.strong input::placeholder{ font-weight:400; letter-spacing:0; color:#4e5a70; }
                          /* A disabled field is not "empty", it is "not asked" — dim the whole
                             control rather than only its text so the difference is obvious at a
                             glance and nobody types into something that will be ignored. */
                          .obaf-in:has(input:disabled){ opacity:.5; }
                          .obaf-in input:disabled{ cursor:not-allowed; }
                          /* THE HEADLINE NUMBER, WITHOUT A HEADLINE BOX.
                             The price used to be a 19px control sitting beside a 14.5px one,
                             so the two fields sharing that row were visibly different heights
                             — the ragged edge that read as "this form is not aligned". Weight
                             and colour carry the emphasis instead; the box is the same box as
                             every other box. */
                          .obaf-in.strong .u{ color:var(--ofGold); }
                          .obaf-in.strong input{ font-weight:800; letter-spacing:.3px; color:#fff6e2; }
                          .obaf-in.strong{ border-color:rgba(238,193,78,.34); }
                          .obaf-in.strong:focus-within{
                            border-color:rgba(238,193,78,.75); box-shadow:0 0 0 3px rgba(238,193,78,.12);
                          }
                          /* Every field on a row lines up on its INPUT, not on whatever the
                             tallest label wrapped to. */
                          .obaf-row{ align-items:end; }
                          .obaf-row > .obaf-f{ display:flex; flex-direction:column; justify-content:flex-end; }
                          .obaf-row > .obaf-f > label{ margin-top:auto; }

                          /* THE DOLLARS BEHIND THE PERCENTAGE, glued to the field that produced
                             them. "20%" and "$130,000" are the same fact, and a buyer typing the
                             first should not have to work out the second — getting it wrong is
                             how an offer goes out with a down payment nobody has. */
                          .obaf-in .calc{
                            flex:0 0 auto; padding:0 11px 0 6px; white-space:nowrap;
                            font-size:13px; font-weight:700; color:#ebd8b0; user-select:none;
                          }
                          /* A figure this form worked out rather than asked for. Flat, not a
                             field: it must not look like something you can type into. */
                          .obaf-ro{
                            display:flex; align-items:center; justify-content:space-between; gap:10px;
                            padding:8px 12px; border-radius:10px;
                            background:rgba(235,216,176,.06); border:1px dashed rgba(235,216,176,.28);
                            font-size:15px; font-weight:800; color:#ebd8b0;
                          }
                          .obaf-ro em{ font-style:normal; font-size:11.5px; font-weight:700;
                            letter-spacing:.06em; text-transform:uppercase; color:#8fa4b8; }

                          .obaf-hint{ margin-top:5px; font-size:13px; color:#69738a; line-height:1.5; }

                          /* contingencies as toggle chips — four stacked full-width rows was
                             half the form's height for four booleans */
                          .obaf-chips{ display:flex; flex-wrap:wrap; gap:7px; }
                          .obaf-chip{
                            display:inline-flex; align-items:center; gap:8px; cursor:pointer;
                            padding:7px 12px; border-radius:50px; font-size:14px; font-weight:600;
                            color:#c3cddd; background:rgba(255,255,255,.04);
                            border:1px solid rgba(255,255,255,.13);
                            transition:border-color .15s, background .15s, color .15s;
                            user-select:none;
                          }
                          .obaf-chip:hover{ border-color:rgba(235,216,176,.35); }
                          .obaf-chip input{ position:absolute; opacity:0; width:0; height:0; }
                          .obaf-chip .tick{
                            width:15px; height:15px; border-radius:50%; flex:0 0 auto;
                            border:1.5px solid rgba(255,255,255,.3); position:relative;
                            transition:border-color .15s, background .15s;
                          }
                          .obaf-chip:has(input:checked){
                            border-color:rgba(238,193,78,.60); background:rgba(238,193,78,.13); color:#ffe6ae;
                          }
                          .obaf-chip:has(input:checked) .tick{
                            border-color:#eec14e; background:#eec14e;
                          }
                          .obaf-chip:has(input:checked) .tick::after{
                            content:''; position:absolute; left:4.5px; top:1.5px;
                            width:4px; height:8px; border:solid #201a06;
                            border-width:0 2px 2px 0; transform:rotate(45deg);
                          }
                          .obaf-chip input:focus-visible ~ .tick{ box-shadow:0 0 0 3px rgba(74,169,255,.30); }

                          /* ── CONDITIONS THE LIST HAS NO CHIP FOR ──────────────────────────
                             The four canonical contingencies are an ordinary sale and nothing
                             else. An open permit the seller has to clear, a well-and-septic
                             pass, a tenant estoppel, "HOA documents approved within 7 days"
                             are all real walk-away conditions, and the only place they used to
                             fit was the message — where the other side could read them but
                             nothing could count them and a counteroffer could not answer one.

                             A typed line becomes a ROW, not another paragraph of free text. A
                             row can be struck out of a counteroffer on its own and the diff
                             can name which one moved; that is the whole reason this is a list
                             and not a second textarea. */
                          .obaf-ccadd{ display:flex; gap:7px; align-items:stretch; }
                          .obaf-ccadd .obaf-in{ flex:1 1 auto; min-width:0; }
                          .obaf-ccbtn{
                            flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
                            padding:0 14px; border-radius:10px; cursor:pointer;
                            font:800 13.5px/1 inherit; color:#201a06;
                            border:1px solid transparent;
                            background:linear-gradient(180deg,#f6d374,#eec14e);
                            transition:filter .15s, opacity .15s;
                          }
                          .obaf-ccbtn:hover{ filter:brightness(1.08); }
                          .obaf-ccbtn:disabled{ opacity:.4; cursor:not-allowed; filter:none; }
                          .obaf-cclist{
                            list-style:none; margin:8px 0 0; padding:0;
                            display:flex; flex-direction:column; gap:5px;
                          }
                          .obaf-cclist li{
                            display:flex; align-items:flex-start; gap:8px;
                            padding:6px 7px 6px 11px; border-radius:9px;
                            background:rgba(235,216,176,.07); border:1px solid rgba(235,216,176,.24);
                            font-size:13.5px; line-height:1.5; color:#dbe4f0;
                          }
                          /* The condition wraps; the remove button never does. These are
                             sentences, and a sentence in a nowrap row is a row that runs off
                             the side of a phone with its own delete button out of reach. */
                          .obaf-cclist li span{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
                          .obaf-cclist li button{
                            flex:0 0 auto; width:21px; height:21px; padding:0; cursor:pointer;
                            border-radius:6px; border:1px solid rgba(248,113,113,.38);
                            background:rgba(248,113,113,.12); color:#fca5a5;
                            font:800 15px/1 inherit; transition:background .15s, color .15s;
                          }
                          .obaf-cclist li button:hover{ background:rgba(248,113,113,.26); color:#fecaca; }

                          /* The due-diligence note is a FIELD inside the money panel, not a
                             panel of its own — one textarea given a whole card grew into a
                             head-height empty box beside the conditions list. Four lines to
                             start with, and draggable from there. */
                          /* .oba-form-prefixed so it outranks the base textarea rule, which is the
                             same specificity and sits LOWER in this stylesheet — without the
                             extra class the note silently kept its 70px and clipped its own
                             third line. */
                          .oba-form .obaf-dd textarea.obaf-ta{ min-height:124px; }

                          /* ── THE CONDITIONS PANEL, ACROSS THE WHOLE SHEET ─────────────────
                             At full width a single stacked column would run a "10 days" field
                             out to nine hundred pixels. Two columns instead: what the offer is
                             conditional on and how long it has on the left, the conditions the
                             list has no chip for on the right — which is also the only block
                             here that grows as it is used.

                             Collapsed below 820px, where two columns would squeeze the paired
                             inspection/appraisal fields inside the left one. */
                          .obaf-condgrid{
                            display:grid; grid-template-columns:1fr 1fr; gap:14px;
                            align-items:start; margin-top:11px;
                          }
                          @media (max-width:820px){ .obaf-condgrid{ grid-template-columns:1fr; } }
                          /* Each block carries the inline top margin that spaced it when they
                             were all stacked. At the head of a column that margin is a gap
                             under the heading that nothing asked for. */
                          .obaf-condgrid > div > :first-child{ margin-top:0 !important; }

                          /* ── SEGMENTED CHOICE ─────────────────────────────────────────────
                             Two mutually exclusive options where BOTH are worth reading. A
                             <select> hides one of the two behind a click, and this is a choice
                             with a money consequence the user is comparing, not a long list
                             they are searching. Radios underneath, so keyboard and screen
                             readers get a real radio group rather than two styled divs. */
                          .obaf-seg{
                            display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px;
                            padding:3px; border-radius:10px; background:var(--ofField);
                            border:1px solid rgba(255,255,255,.14);
                          }
                          .obaf-seg label{
                            position:relative; margin:0; display:flex; align-items:center; justify-content:center;
                            padding:6px 6px; border-radius:8px; cursor:pointer; text-align:center;
                            font-size:13px; font-weight:700; letter-spacing:0; text-transform:none;
                            color:#93a1b8; white-space:nowrap; user-select:none;
                            transition:background .15s, color .15s;
                          }
                          .obaf-seg label:hover{ color:#c8d5e4; }
                          .obaf-seg input{ position:absolute; opacity:0; width:0; height:0; }
                          .obaf-seg label:has(input:checked){
                            background:linear-gradient(135deg,#f3e2b3 0%,#e5c158 55%,#caa63f 100%);
                            color:#201a06; box-shadow:0 1px 8px rgba(238,193,78,.22);
                          }
                          .obaf-seg label:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(238,193,78,.28); }
                          @media (max-width:400px){ .obaf-seg label{ font-size:12px; padding:6px 3px; } }

                          /* ── WHAT THE MONEY ACTUALLY COMES TO ─────────────────────────────
                             Figures nobody should be doing in their head while deciding
                             whether to send an offer. They are arithmetic on the fields above
                             (see tdo_bid_math), recomputed on every keystroke, and the balance
                             due at closing is called out because it is the one that surprises
                             people — a down payment is not what you bring to the table. */
                          .obaf-calc{
                            margin-top:9px; border-radius:10px; overflow:hidden;
                            border:1px solid rgba(235,216,176,.18); background:rgba(6,17,33,.55);
                          }
                          .obaf-calc div{
                            display:flex; align-items:baseline; justify-content:space-between; gap:10px;
                            padding:7px 11px; font-size:13.5px; color:#93a1b8;
                          }
                          .obaf-calc div + div{ border-top:1px solid rgba(235,216,176,.12); }
                          .obaf-calc b{ font-size:14.5px; font-weight:800; color:#eaf1f7; }
                          .obaf-calc div.owed b{ color:var(--ofGold); }

                          /* ── WHAT CHANGED ────────────────────────────────────────────────
                             The single most useful thing on a counteroffer sheet and the one
                             the old form had no answer for: the recipient was handed a
                             complete set of terms and left to diff it against the last set in
                             their head. Only fields that actually moved appear, so an empty
                             diff means "I am re-sending the same terms" — which is itself
                             worth knowing before you press send. */
                          .obaf-changed{
                            grid-column:1 / -1; border-radius:12px; padding:10px 13px 11px;
                            border:1px solid rgba(238,193,78,.34); background:var(--ofGoldSo);
                          }
                          .obaf-changed h6{
                            margin:0 0 7px; font-size:12px; font-weight:800; letter-spacing:.09em;
                            text-transform:uppercase; color:#ffd894;
                            display:flex; align-items:center; gap:7px;
                          }
                          .obaf-changed ul{ margin:0; padding:0; list-style:none; }
                          .obaf-changed li{
                            font-size:13.5px; line-height:1.65; color:#e4d3ab;
                            display:flex; flex-wrap:wrap; gap:5px;
                          }
                          .obaf-changed li span{ color:#c9b083; }
                          .obaf-changed li i{ font-style:normal; color:#9c8a63; }
                          .obaf-changed li b{ color:#fff3d6; font-weight:800; }

                          /* chips and note share the last row instead of stacking — the
                             chips are one short line, and a note box under them left the
                             panel twice as tall as it needed to be */
                          .obaf-cond{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:start; }
                          @media (max-width:760px){ .obaf-cond{ grid-template-columns:1fr; } }
                          .obaf-cond > div:first-child > h5{ margin-bottom:10px; }

                          .oba-form textarea.obaf-ta{
                            width:100%; box-sizing:border-box; min-height:70px; resize:vertical;
                            padding:10px 12px; background:var(--ofField);
                            border:1px solid rgba(255,255,255,.14); border-radius:10px;
                            color:var(--ofText); font-size:15px; font-family:inherit; line-height:1.5; outline:none;
                          }
                          .oba-form textarea.obaf-ta::placeholder{ color:#4e5a70; }
                          .oba-form textarea.obaf-ta:focus{
                            border-color:var(--ofFocus); box-shadow:0 0 0 3px rgba(74,169,255,.14);
                          }

                          /* live read-out of what the buyer is actually committing to */
                          .obaf-sum{
                            display:flex; align-items:baseline; justify-content:space-between; gap:12px;
                            flex-wrap:wrap; margin-top:2px; padding:7px 11px; border-radius:10px;
                            background:var(--ofGoldSo); border:1px solid rgba(238,193,78,.26);
                            font-size:13.5px; color:#c9b083;
                          }
                          .obaf-sum b{ color:#ffe6ae; font-weight:800; }

                          /* ── THE FOOTER RAIL ──────────────────────────────────────────────
                             Send is the full-width primary; withdrawing a counteroffer is a
                             destructive sibling that must be reachable without being easy to
                             hit by accident, so it is outlined in red and sits BELOW the
                             action people came here for. Cancel is the quietest thing on the
                             rail because it is the one that costs nothing. */
                          .oba-form .tddm-ft{
                            padding:10px 18px; gap:9px; flex-wrap:wrap;
                            display:flex; align-items:center; justify-content:flex-end;
                          }
                          .oba-form .tddm-ft .tddm-btn{ padding:10px 18px; font-size:14.5px; }
                          .oba-form .tddm-ft .obaf-danger{
                            background:transparent; border:1px solid rgba(248,113,113,.5); color:#fca5a5;
                          }
                          .oba-form .tddm-ft .obaf-danger:hover{
                            background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.75); color:#fecaca;
                          }
                          /* On a phone the rail stacks and the primary goes first and full
                             width — a 44px target you cannot miss, rather than three buttons
                             sharing one line at 90px each. */
                          @media (max-width:560px){
                            .oba-form .tddm-ft{ flex-direction:column-reverse; align-items:stretch; gap:8px; }
                            .oba-form .tddm-ft .tddm-btn{ width:100%; justify-content:center; }
                          }

                          /* Laptop-height insurance. The grid above is sized to fit a ~650px
                             window; below that the form gives up ornament rather than handing
                             the user a scrollbar, because a form you scroll is a form where the
                             price and the closing date are never on screen together — the exact
                             problem the wide layout exists to solve. */
                          @media (max-height:660px){
                            .oba-form .tddm-hd{ padding:10px 58px 9px 18px; }
                            .oba-form .tddm-ttl{ font-size:18px; }
                            .oba-form .tddm-sub{ font-size:12.5px; }
                            .oba-form .tddm-bd{ padding:10px 16px 4px; }
                            .obaf-grid{ gap:9px; }
                            .obaf-panel{ padding:9px 11px 10px; }
                            .obaf-panel h5{ margin-bottom:8px; }
                            .oba-form textarea.obaf-ta{ min-height:56px; }
                            .obaf-hint{ margin-top:3px; font-size:12px; line-height:1.45; }
                            .obaf-panel h5{ font-size:11.5px; }
                            .obaf-f label{ font-size:11.5px; }
                            .obaf-chip{ font-size:13px; padding:6px 11px; }
                            .obaf-cclist li{ font-size:12.8px; }
                            .oba-form .tddm-ft{ padding:8px 16px; }
                            .obaf-prop{ padding:8px 11px; }
                            .obaf-prop-ic{ width:30px; height:30px; }
                            .obaf-calc div{ padding:5px 11px; font-size:12.5px; }
                            .obaf-calc b{ font-size:13.5px; }
                            .obaf-seg label{ padding:5px 5px; font-size:12px; }
                            .obaf-in input, .obaf-in select{ padding:7px 12px; font-size:14px; }
                            .obaf-f label{ margin-bottom:4px; }
                            .obaf-row{ gap:8px; }
                            /* Six sections do not fit a 560px-tall window and pretending
                               otherwise is how the price and the send button end up unable to
                               be on screen together. The sheet scrolls here — so every pixel
                               above is spent on a field rather than on air. The scroller's
                               HEIGHT is not set here: the flex track owns it, and a second
                               opinion about it is how the double scrollbar got in. */
                          }
                          @media (max-width:760px){
                            #popup23:has(.oba-form){ width:96vw !important; border-radius:16px !important; }
                            .oba-form .tddm-bd{ -webkit-overflow-scrolling:touch; }
                          }

                          /* ==================================================================
                             THE GLASS PASS — the offer sheet in the Open House material.
                             ------------------------------------------------------------------
                             Same construction as inc/open_house_panel.php: a deep blue field
                             lit from the top right, and every surface on it built from CSS
                             layers — base tint, a short top-left reflection, an edge light, a
                             contact shadow. No raster art, so it stays crisp at any density.

                             THE RULES BELOW ONLY RESTATE SURFACES. Every layout decision
                             above this block — the two-column grid, the panel order, the
                             single scroller, the laptop-height compaction — is untouched and
                             still governs; this pass changes what the boxes are made of, not
                             where they are or how big.

                             Scoped to .oba-form throughout, never to bare .tddm: that chrome
                             is shared with the document details drawer and its forms, and
                             they are not part of this.

                             Gold stays the brightest thing here, exactly as on the Open House
                             calendar, and it means the same thing in both places — what you
                             press, and what is switched on. Cyan rims sit at .34 rather than
                             the concept's full strength so the panels never read as neon.

                             No backdrop-filter. On the Open House sheet the tiles blur a
                             translucent veil; here every panel sits on the modal's own opaque
                             field, so a blur would cost GPU on a form with a dozen panels and
                             show nothing. The layered gradients are what produce the look.
                          ================================================================== */
                          #popup23:has(.oba-form){
                            background:
                              radial-gradient(70% 38% at 88% 2%, rgba(35,112,183,.30), transparent 72%),
                              radial-gradient(58% 42% at 0% 66%, rgba(14,91,151,.18), transparent 75%),
                              linear-gradient(180deg,#0A203A 0%,#071A31 52%,#061426 100%) !important;
                            border:1px solid rgba(98,183,242,.30) !important;
                            box-shadow:
                              inset 0 1px 0 rgba(191,229,255,.18),
                              0 30px 70px rgba(0,0,0,.6) !important;
                          }
                          /* One place to change the whole sheet, same as the palette above —
                             these simply repoint it at the Open House tokens. */
                          .oba-form{
                            --ofLine:   rgba(143,164,188,.22);
                            --ofLine2:  rgba(98,183,242,.34);
                            --ofPanel:  transparent;
                            --ofHead:   #F4D995;
                            --ofLabel:  #8FA4BC;
                            --ofText:   #F4F7FA;
                            --ofGold:   #F4D995;
                            --ofGoldSo: rgba(244,217,149,.12);
                            --ofFocus:  rgba(139,203,255,.75);
                            /* the material */
                            --ofRim:    rgba(98,183,242,.34);
                            --ofGlass:  linear-gradient(180deg,
                                          rgba(21,61,103,.46) 0%,
                                          rgba(11,39,70,.72) 38%,
                                          rgba(5,24,45,.90) 100%);
                            --ofLift:   inset 0 1px 0 rgba(191,229,255,.28),
                                        inset 1px 0 0 rgba(114,196,250,.12),
                                        inset 0 -12px 22px rgba(0,8,20,.22),
                                        0 8px 18px rgba(0,8,24,.24),
                                        0 0 12px rgba(42,137,212,.09);
                            --ofRefl:   radial-gradient(62% 46% at 12% 0%,
                                          rgba(188,229,255,.20), transparent 72%);
                            --ofSun:    linear-gradient(145deg,#F8E4AB 0%,#F4D995 42%,#DDB760 100%);
                            --ofInk:    #071A2E;
                          }

                          /* ---------- the bands ---------- */
                          .oba-form .tddm-hd{
                            background:linear-gradient(180deg, rgba(35,112,183,.16), rgba(10,32,58,0)) !important;
                            border-bottom:1px solid rgba(143,164,188,.22) !important;
                          }
                          .oba-form .tddm-ttl{ color:var(--ofText); }
                          .oba-form .tddm-sub{ color:var(--ofLabel); }
                          .oba-form .tddm-sub b{ color:#cfe0f2; }
                          .oba-form .tddm-ft{
                            background:linear-gradient(180deg, rgba(5,24,45,0), rgba(5,24,45,.55)) !important;
                            border-top:1px solid rgba(143,164,188,.22) !important;
                          }
                          .oba-form .tddm-ft .note{ color:var(--ofLabel); }
                          /* the shared x, in the same glass as the controls */
                          #popup23:has(.oba-form) #close23{
                            width:40px; height:40px;
                            background:var(--ofGlass);
                            border:1px solid var(--ofRim);
                            color:#cbd5e1;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.28), 0 6px 14px rgba(0,8,24,.28);
                          }
                          #popup23:has(.oba-form) #close23:hover{
                            background:var(--ofGlass);
                            border-color:rgba(98,183,242,.55); color:#fff;
                            transform:none;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.34), 0 8px 18px rgba(0,8,24,.34);
                          }
                          /* The sheet's one scroller keeps its scrolling and loses its bar:
                             the site's is a bright cyan rail and inside this sheet it lands
                             against the gold. A half-cut panel is what says there is more. */
                          .oba-form .tddm-bd{ scrollbar-width:none; -ms-overflow-style:none; }
                          .oba-form .tddm-bd::-webkit-scrollbar{ width:0; height:0; display:none; }

                          /* ---------- panels ----------
                             ::before is absolutely positioned, so it stays out of the panel's
                             flex flow and the margin-top:auto that pins a trailing hint to the
                             bottom still works. Children are lifted a layer so the reflection
                             passes behind the text, never over it. */
                          .oba-form .obaf-panel,
                          .oba-form .obaf-prop{
                            position:relative; isolation:isolate; overflow:hidden;
                            border:1px solid var(--ofRim); border-radius:16px;
                            background:var(--ofGlass);
                            box-shadow:var(--ofLift);
                          }
                          .oba-form .obaf-panel::before,
                          .oba-form .obaf-prop::before{
                            content:''; position:absolute; inset:0; border-radius:inherit;
                            pointer-events:none; background:var(--ofRefl);
                          }
                          .oba-form .obaf-panel > *,
                          .oba-form .obaf-prop > *{ position:relative; z-index:1; }
                          .oba-form .obaf-panel h5{ color:var(--ofHead); }
                          .oba-form .obaf-panel h5 i{ color:#F4D995; }
                          /* The money panel is the one that commits you, so it carries the
                             warm rim and a low gold wash — the same accent an available date
                             wears, at a fraction of the strength. */
                          .oba-form .obaf-panel.money{
                            background:var(--ofGlass);
                            border-color:rgba(244,217,149,.42);
                          }
                          .oba-form .obaf-panel.money::after{
                            content:''; position:absolute; inset:0; border-radius:inherit;
                            pointer-events:none;
                            background:radial-gradient(86% 60% at 6% 0%,
                                       rgba(244,217,149,.12), transparent 72%);
                          }
                          .oba-form .obaf-panel.money h5{ color:#F8E4AB; }
                          .oba-form .obaf-prop-ic{
                            background:linear-gradient(180deg, rgba(28,76,124,.55), rgba(6,27,50,.88));
                            border-color:rgba(244,217,149,.40); color:#F4D995;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.30), 0 4px 10px rgba(0,8,24,.3);
                          }
                          .oba-form .obaf-prop-tx b{ color:var(--ofText); }
                          .oba-form .obaf-prop-tx span{ color:var(--ofLabel); }
                          .oba-form .obaf-tag{
                            color:#F4D995; background:rgba(244,217,149,.12);
                            border-color:rgba(244,217,149,.40);
                          }

                          /* ---------- fields ---------- */
                          .oba-form .obaf-in,
                          .oba-form .obaf-seg,
                          .oba-form textarea.obaf-ta{
                            background:linear-gradient(180deg, rgba(11,39,70,.72) 0%, rgba(5,24,45,.90) 100%);
                            border:1px solid rgba(98,183,242,.28);
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.16);
                          }
                          .oba-form .obaf-in:focus-within,
                          .oba-form textarea.obaf-ta:focus{
                            border-color:rgba(139,203,255,.80);
                            box-shadow:0 0 0 3px rgba(139,203,255,.18);
                          }
                          .oba-form .obaf-in .u{ color:var(--ofLabel); }
                          .oba-form .obaf-in .calc{ color:#F4D995; }
                          .oba-form .obaf-in input,
                          .oba-form .obaf-in select,
                          .oba-form textarea.obaf-ta{ color:var(--ofText); }
                          .oba-form .obaf-in select option{ background:#0B2746; color:#dbe3f2; }
                          .oba-form .obaf-f label{ color:var(--ofLabel); }
                          .oba-form .obaf-hint{ color:#7c8da4; }
                          /* the headline number: warm rim, warm caret, same box as the rest */
                          .oba-form .obaf-in.strong{ border-color:rgba(244,217,149,.42); }
                          .oba-form .obaf-in.strong .u{ color:#F4D995; }
                          .oba-form .obaf-in.strong input{ color:#FFF6E2; }
                          .oba-form .obaf-in.strong:focus-within{
                            border-color:rgba(244,217,149,.80);
                            box-shadow:0 0 0 3px rgba(244,217,149,.16);
                          }

                          /* ---------- toggles ----------
                             A switched-on contingency is the same gold tile as a bookable
                             date, down to the white spark in its top-left corner. */
                          .oba-form .obaf-chip{
                            background:linear-gradient(180deg, rgba(21,61,103,.46), rgba(5,24,45,.90));
                            border:1px solid var(--ofRim); color:#c3cddd;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.22);
                          }
                          .oba-form .obaf-chip:hover{ border-color:rgba(244,217,149,.50); }
                          .oba-form .obaf-chip:has(input:checked){
                            color:var(--ofInk); border-color:rgba(255,235,184,.78);
                            background:
                              radial-gradient(82% 45% at 22% 4%, rgba(255,255,255,.42), transparent 70%),
                              var(--ofSun);
                            box-shadow:
                              inset 0 1px 0 rgba(255,255,255,.72),
                              0 6px 14px rgba(3,14,29,.26),
                              0 0 16px rgba(238,196,101,.26);
                          }
                          .oba-form .obaf-chip:has(input:checked) .tick{
                            border-color:var(--ofInk); background:var(--ofInk);
                          }
                          .oba-form .obaf-chip:has(input:checked) .tick::after{ border-color:#F4D995; }
                          .oba-form .obaf-chip input:focus-visible ~ .tick{
                            box-shadow:0 0 0 3px rgba(139,203,255,.35);
                          }
                          .oba-form .obaf-seg label{ color:var(--ofLabel); }
                          .oba-form .obaf-seg label:hover{ color:#cfe0f2; }
                          .oba-form .obaf-seg label:has(input:checked){
                            background:var(--ofSun); color:var(--ofInk);
                            box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 2px 10px rgba(238,196,101,.22);
                          }
                          .oba-form .obaf-seg label:has(input:focus-visible){
                            box-shadow:0 0 0 3px rgba(139,203,255,.35);
                          }

                          /* ---------- figures the sheet worked out ---------- */
                          .oba-form .obaf-calc{
                            border:1px solid rgba(98,183,242,.24);
                            background:linear-gradient(180deg, rgba(21,61,103,.34), rgba(5,24,45,.78));
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.20);
                          }
                          .oba-form .obaf-calc div{ color:var(--ofLabel); }
                          .oba-form .obaf-calc div + div{ border-top-color:rgba(143,164,188,.16); }
                          .oba-form .obaf-calc b{ color:#EAF1F7; }
                          .oba-form .obaf-calc div.owed b{ color:#F4D995; }
                          .oba-form .obaf-ro{
                            background:rgba(244,217,149,.07);
                            border:1px dashed rgba(244,217,149,.30); color:#F4D995;
                          }
                          .oba-form .obaf-ro em{ color:var(--ofLabel); }
                          .oba-form .obaf-sum{
                            background:rgba(244,217,149,.10);
                            border-color:rgba(244,217,149,.30); color:#c9b083;
                          }
                          .oba-form .obaf-sum b{ color:#F8E4AB; }
                          .oba-form .obaf-changed{
                            border-color:rgba(244,217,149,.38);
                            background:linear-gradient(180deg, rgba(244,217,149,.10), rgba(5,24,45,.60));
                            box-shadow:inset 0 1px 0 rgba(255,240,205,.18);
                          }
                          .oba-form .obaf-cclist li{
                            background:linear-gradient(180deg, rgba(21,61,103,.40), rgba(5,24,45,.80));
                            border-color:rgba(98,183,242,.26);
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.18);
                          }

                          /* ---------- the rail ---------- */
                          .oba-form .tddm-ft .tddm-btn{
                            border-radius:50px;
                            background:linear-gradient(180deg, rgba(21,61,103,.46) 0%, rgba(5,24,45,.90) 100%);
                            border:1px solid var(--ofRim); color:#cbd5e1;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.24);
                          }
                          .oba-form .tddm-ft .tddm-btn:hover{
                            background:linear-gradient(180deg, rgba(28,76,124,.55) 0%, rgba(5,24,45,.90) 100%);
                            border-color:rgba(98,183,242,.55); color:#fff;
                          }
                          .oba-form .tddm-ft .tddm-btn.pri{
                            background:var(--ofSun);
                            border-color:rgba(255,235,184,.78); color:var(--ofInk);
                            box-shadow:
                              inset 0 1px 0 rgba(255,255,255,.72),
                              0 8px 22px rgba(238,196,101,.25);
                          }
                          .oba-form .tddm-ft .tddm-btn.pri:hover{
                            background:var(--ofSun); filter:brightness(1.06);
                            border-color:rgba(255,235,184,.9);
                          }
                          .oba-form .tddm-ft .tddm-btn.pri i{ color:var(--ofInk) !important; }
                          .oba-form .tddm-ft .tddm-btn:focus-visible{
                            outline:2px solid #8BCBFF; outline-offset:3px;
                          }
                          .oba-form .obaf-ccbtn{
                            background:var(--ofSun); color:var(--ofInk);
                            border:1px solid rgba(255,235,184,.78);
                            box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
                          }
                          .oba-form .obaf-ccbtn:hover{ filter:brightness(1.08); }

                          /* ==================================================================
                             THE GLASS PASS, PART TWO — the shared .tddm chrome.
                             ------------------------------------------------------------------
                             .tddm is the shell behind the document details drawer, the
                             document action forms, and every offer confirm dialog (accept,
                             decline, withdraw, back out, reopen) — all of which are .tddm
                             WITHOUT .oba-form, so the offer-sheet block above never reaches
                             them and they were left as the last white-on-slate surfaces in a
                             room that had gone to blue glass.

                             Specificity keeps the two apart: every rule up there names
                             .oba-form and so outranks the single-class rules down here. This
                             is the floor, that is the sheet.
                          ================================================================== */
                          #popup23:has(#tddDetailRoot),
                          #popup23:has(#tddFormRoot){
                            background:
                              radial-gradient(70% 38% at 88% 2%, rgba(35,112,183,.30), transparent 72%),
                              radial-gradient(58% 42% at 0% 66%, rgba(14,91,151,.18), transparent 75%),
                              linear-gradient(180deg,#0A203A 0%,#071A31 52%,#061426 100%) !important;
                            border:1px solid rgba(98,183,242,.30) !important;
                            box-shadow:
                              inset 0 1px 0 rgba(191,229,255,.18),
                              0 30px 70px rgba(0,0,0,.6) !important;
                          }
                          #popup23:has(#tddDetailRoot) #close23,
                          #popup23:has(#tddFormRoot) #close23{
                            width:40px; height:40px; right:14px; top:14px; font-size:24px;
                            background:linear-gradient(180deg, rgba(21,61,103,.46) 0%, rgba(5,24,45,.90) 100%);
                            border:1px solid rgba(98,183,242,.34); color:#cbd5e1;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.28), 0 6px 14px rgba(0,8,24,.28);
                          }
                          #popup23:has(#tddDetailRoot) #close23:hover,
                          #popup23:has(#tddFormRoot) #close23:hover{
                            background:linear-gradient(180deg, rgba(28,76,124,.55) 0%, rgba(5,24,45,.90) 100%);
                            border-color:rgba(98,183,242,.55); color:#fff; transform:none;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.34), 0 8px 18px rgba(0,8,24,.34);
                          }

                          .tddm{ color:#F4F7FA; }
                          .tddm-hd{
                            background:linear-gradient(180deg, rgba(35,112,183,.16), rgba(10,32,58,0));
                            border-bottom:1px solid rgba(143,164,188,.22);
                          }
                          .tddm-ttl{ color:#F4F7FA; }
                          .tddm-sub{ color:#8FA4BC; }
                          .tddm-sub b{ color:#cfe0f2; }
                          .tddm-ft{
                            background:linear-gradient(180deg, rgba(5,24,45,0), rgba(5,24,45,.55));
                            border-top:1px solid rgba(143,164,188,.22);
                          }
                          .tddm-ft .note{ color:#8FA4BC; }
                          .tddm-bd{ scrollbar-width:none; -ms-overflow-style:none; }
                          .tddm-bd::-webkit-scrollbar{ width:0; height:0; display:none; }
                          .tddm-sh b{ color:#F4D995; }
                          .tddm-sh span{ color:#8FA4BC; }
                          .tddm-empty{ color:#8FA4BC; }
                          /* the panels, in the material */
                          .tddm-panel{
                            position:relative; isolation:isolate; overflow:hidden;
                            border:1px solid rgba(98,183,242,.30); border-radius:14px;
                            background:linear-gradient(180deg,
                              rgba(21,61,103,.46) 0%, rgba(11,39,70,.72) 38%, rgba(5,24,45,.90) 100%);
                            box-shadow:
                              inset 0 1px 0 rgba(191,229,255,.28),
                              inset 0 -10px 18px rgba(0,8,20,.22),
                              0 8px 18px rgba(0,8,24,.24);
                          }
                          .tddm-panel::before{
                            content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
                            background:radial-gradient(62% 46% at 12% 0%, rgba(188,229,255,.20), transparent 72%);
                          }
                          .tddm-panel > *{ position:relative; z-index:1; }
                          .tddm-r{ border-top-color:rgba(143,164,188,.16); }
                          .tddm-r .t1{ color:#dbe6f5; }
                          .tddm-r .t2{ color:#8FA4BC; }
                          .tddm-r .t3{ color:#F4D995; }
                          .tddm-kv dt{ color:#8FA4BC; }
                          .tddm-kv dd{ color:#dbe6f5; }
                          .tddm-file .fn{ color:#F4F7FA; }
                          .tddm-file .fm{ color:#8FA4BC; }
                          .tddm-open, .tddm-vn.cur{ color:#9ccaff; }
                          /* controls */
                          .tddm-btn{
                            border-radius:50px;
                            background:linear-gradient(180deg, rgba(21,61,103,.46) 0%, rgba(5,24,45,.90) 100%);
                            border:1px solid rgba(98,183,242,.34); color:#cbd5e1;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.24);
                          }
                          .tddm-btn:hover{
                            background:linear-gradient(180deg, rgba(28,76,124,.55) 0%, rgba(5,24,45,.90) 100%);
                            border-color:rgba(98,183,242,.55); color:#fff;
                          }
                          .tddm-btn.pri{
                            background:linear-gradient(145deg,#F8E4AB 0%,#F4D995 42%,#DDB760 100%);
                            border-color:rgba(255,235,184,.78); color:#071A2E;
                            box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 8px 22px rgba(238,196,101,.25);
                          }
                          .tddm-btn.pri:hover{
                            background:linear-gradient(145deg,#F8E4AB 0%,#F4D995 42%,#DDB760 100%);
                            border-color:rgba(255,235,184,.9); filter:brightness(1.06);
                          }
                          .tddm-btn.pri i{ color:#071A2E !important; }
                          .tddm-btn:focus-visible{ outline:2px solid #8BCBFF; outline-offset:3px; }
                          .tddm-in, .tddm-sel{
                            background:linear-gradient(180deg, rgba(11,39,70,.72) 0%, rgba(5,24,45,.90) 100%);
                            border:1px solid rgba(98,183,242,.28); border-radius:12px;
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.16); color:#F4F7FA;
                          }
                          .tddm-in:focus, .tddm-sel:focus{
                            border-color:rgba(139,203,255,.80);
                            box-shadow:0 0 0 3px rgba(139,203,255,.18);
                          }
                          .tddm-in::placeholder{ color:#4e5a70; }
                          .tddm-sel option{ background:#0B2746; color:#dbe3f2; }
                          .tddm-fld > label:not(.tddm-radio){ color:#8FA4BC; }
                          .tddm-hint{ color:#7c8da4; }
                          .tddm-radio{
                            border:1px solid rgba(98,183,242,.28); border-radius:12px;
                            background:linear-gradient(180deg, rgba(21,61,103,.40), rgba(5,24,45,.82));
                            box-shadow:inset 0 1px 0 rgba(191,229,255,.18); color:#e2e8f0;
                          }
                          .tddm-radio:hover{ border-color:rgba(98,183,242,.5); }
                          /* Gold for the chosen one, same as a booked date and the same as
                             every primary in the room. */
                          .tddm-radio:has(input:checked){
                            border-color:rgba(244,217,149,.6);
                            background:linear-gradient(180deg, rgba(244,217,149,.14), rgba(20,44,74,.84));
                          }
                          .tddm-radio input{ accent-color:#F4D995; }

                          /* ==================================================================
                             DOCUMENT CARDS — the "Your Documents" list inside the stage overlay.
                             Each document is a self-contained card: identity on top, the facts
                             on one meta line, the AI read in its own block, actions on a footer
                             rail. The previous flat rows let the title, chips, meta and three
                             buttons all compete for the same wrapping flex line, which is what
                             made the list read as a wall of text at overlay width.
                          ================================================================== */
                          .tdoc{
                            background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.075);
                            border-radius:12px; padding:12px 13px; margin-bottom:9px;
                            transition:border-color .15s, background .15s;
                          }
                          .tdoc:last-child{ margin-bottom:0; }
                          .tdoc:hover{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.032); }
                          /* an amendment is visibly tethered to the agreement above it */
                          .tdoc.nested{
                            margin-left:15px; border-left:2px solid rgba(74,169,255,.4);
                            border-top-left-radius:5px; border-bottom-left-radius:5px;
                            background:rgba(74,169,255,.03);
                          }
                          .tdoc.off{ opacity:.72; }
                          .tdoc-hd{ display:flex; gap:10px; align-items:flex-start; }
                          .tdoc-ico{
                            width:32px; height:37px; flex:0 0 32px; border-radius:7px;
                            display:grid; place-items:center; font-size:15.5px; border:1px solid;
                          }
                          .tdoc-tx{ flex:1; min-width:0; }
                          .tdoc-nm{
                            color:#e6edf8; font-size:15px; font-weight:700; line-height:1.38;
                            overflow-wrap:anywhere;
                          }
                          .tdoc.off .tdoc-nm{
                            color:#8b96ac; text-decoration:line-through;
                            text-decoration-color:rgba(139,150,172,.55);
                          }
                          .tdoc-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px; }
                          .tdoc-meta{
                            margin-top:7px; color:#7d8798; font-size:13.5px; line-height:1.6;
                            display:flex; flex-wrap:wrap; align-items:center; gap:0 7px;
                          }
                          .tdoc-meta i.sep{ color:#4b5568; font-style:normal; }
                          .tdoc-meta b{ color:#a9b4c6; font-weight:600; }
                          .tdoc-meta .sku{ color:#ebd8b0; font-weight:600; letter-spacing:.02em; }
                          .tdoc-reason{ margin-top:6px; color:#f6ce7c; font-size:13.5px; line-height:1.55; }
                          .tdoc-sum{
                            margin-top:10px; padding:9px 11px; border-radius:9px;
                            background:rgba(165,107,255,.07); border:1px solid rgba(165,107,255,.26);
                            color:#cfc4e8; font-size:14px; line-height:1.65;
                          }
                          .tdoc-sum i.w{ color:#a56bff; font-size:12.5px; margin-right:2px; }
                          .tdoc-acts{
                            display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px;
                            margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
                          }
                          .tdoc-acts a{ text-decoration:none; }
                          .tdoc-empty{
                            padding:18px 4px; text-align:center; color:#7d8798;
                            font-size:14.5px; line-height:1.65;
                          }
                          .tdoc-empty b{ color:#ebd8b0; }
                          .tdoc-empty .ic{ display:block; font-size:22px; color:#3d4757; margin-bottom:8px; }

                          /* ==================================================================
                             REQUIRED DOCUMENTS — a progress instrument, not a list of pills.
                             A ring answers "how far along am I", the sub-line answers "how many
                             are still outstanding", and each row names the timeline stage it
                             belongs to so the checklist is precise about WHERE a document is
                             expected. Outstanding rows carry a direct upload button that
                             pre-fills the document name.
                          ================================================================== */
                          .treq-sum{
                            display:flex; align-items:center; gap:13px;
                            padding-bottom:13px; margin-bottom:4px;
                            border-bottom:1px solid rgba(255,255,255,.07);
                          }
                          .treq-ring{ width:54px; height:54px; flex:0 0 54px; }
                          .treq-sum-tx{ flex:1; min-width:0; }
                          .treq-big{ color:#e6edf8; font-size:15.5px; font-weight:800; line-height:1.35; }
                          .treq-sub{ color:#7d8798; font-size:13.5px; line-height:1.55; margin-top:3px; }
                          .treq-sub b{ color:#ffd894; font-weight:700; }
                          .treq-sub b.ok{ color:#8ff3bd; }

                          .treq-grp{ margin-top:14px; }
                          .treq-grp-h{
                            display:flex; align-items:baseline; justify-content:space-between; gap:8px;
                            margin-bottom:5px; color:#69738a; font-size:11.5px; font-weight:800;
                            text-transform:uppercase; letter-spacing:.08em;
                          }
                          .treq-r{
                            display:grid; grid-template-columns:20px minmax(0,1fr) auto 26px;
                            gap:9px; align-items:center;
                            padding:9px 0; border-top:1px solid rgba(255,255,255,.055);
                          }
                          .treq-mk{
                            width:20px; height:20px; border-radius:50%;
                            display:grid; place-items:center; font-size:11px;
                            border:1px solid rgba(139,150,172,.3); color:#5f6a7f; background:transparent;
                          }
                          .treq-r.done .treq-mk{ border-color:rgba(62,233,140,.5); color:#3ee98c; background:rgba(62,233,140,.12); }
                          .treq-r.na .treq-mk{ border-style:dashed; opacity:.6; }
                          .treq-r.warn .treq-mk{ border-color:rgba(246,184,63,.5); color:#f6b83f; background:rgba(246,184,63,.1); }
                          .treq-nm{ min-width:0; }
                          .treq-nm .n{ display:block; color:#d5dcf2; font-size:14.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
                          .treq-r.done .treq-nm .n{ color:#e6edf8; }
                          .treq-r.na .treq-nm .n{ color:#5f6a7f; text-decoration:line-through; }
                          .treq-nm .s{ display:block; color:#69738a; font-size:12.5px; line-height:1.4; margin-top:2px; }
                          .treq-chip{ display:inline-flex; }
                          .treq-chip.tap{ cursor:pointer; }
                          .treq-go{
                            width:26px; height:26px; border-radius:7px; padding:0;
                            display:grid; place-items:center; cursor:pointer; font-size:12.5px;
                            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
                            color:#8b96ac; font-family:inherit; transition:all .15s;
                          }
                          .treq-go:hover{ background:rgba(74,169,255,.14); border-color:rgba(74,169,255,.5); color:#9ccaff; }
                          .treq-go.up:hover{ background:rgba(246,184,63,.14); border-color:rgba(246,184,63,.55); color:#ffd894; }
                          .treq-spacer{ width:26px; }

                          /* ---------- Tasks & Requirements ----------
                             Deliberately reuses the checklist's summary/row components so the
                             two sections read as siblings rather than two different features.
                             Only the row grid differs: a task has no open/upload affordance,
                             so it is three columns instead of four. */
                          .treq-r.t3{ grid-template-columns:20px minmax(0,1fr) auto; }
                          .treq-r .temp-task-pill{ cursor:pointer; border-radius:7px; transition:filter .15s; }
                          .treq-r .temp-task-pill:hover{ filter:brightness(1.22); }
                          .treq-r .temp-task-pill:active{ filter:brightness(.94); }
                          .ttsk-hint{
                            display:flex; align-items:center; gap:7px;
                            margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
                            color:#69738a; font-size:13px; line-height:1.5;
                          }
                          .ttsk-hint i{ color:#4aa9ff; font-size:12.5px; }

                          /* ==================================================================
                             STRUCTURED STAGE PIPELINES — Inspection, Appraisal, Closing,
                             Deal Complete. Each renders as: status header · progress rail ·
                             facts panel · headline metric tiles · Summary.

                             The Summary is the point of these stages: nobody reads a 40-page
                             appraisal, they need four lines (price, value, lender status, next
                             step) that answer "where does this stand" in seconds.
                          ================================================================== */
                          .tsp{ display:flex; flex-direction:column; gap:14px; }
                          .tsp *{ box-sizing:border-box; }

                          /* ---------- header: status chip + last activity ---------- */
                          .tsp-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
                          .tsp-hd .t{ min-width:0; }
                          .tsp-hd .t b{ display:block; color:#f8fafc; font-size:16px; font-weight:800; letter-spacing:-.2px; }
                          .tsp-hd .t span{ display:block; color:#7d8798; font-size:13.5px; margin-top:3px; }
                          .tsp-hd .r{ text-align:right; flex:0 0 auto; }
                          .tsp-hd .r .la{ display:block; color:#69738a; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
                          .tsp-hd .r .lv{ display:block; color:#d5dcf2; font-size:14px; font-weight:600; }
                          .tsp-chip{
                            display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
                            border-radius:50px; font-size:14px; font-weight:800; white-space:nowrap;
                            border:1px solid;
                          }
                          .tsp-chip.pending{ color:#aab4c8; background:rgba(139,150,172,.1);  border-color:rgba(139,150,172,.4); }
                          .tsp-chip.in_progress{ color:#ffd894; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.55); }
                          .tsp-chip.attention{ color:#ffb38a; background:rgba(255,138,60,.13); border-color:rgba(255,138,60,.6); }
                          .tsp-chip.complete{ color:#8ff3bd; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.55); }

                          /* ---------- STACKED, NOT SIDE BY SIDE ----------
                             Progress gets a full-width row of its own and Details follows
                             underneath. This used to be two equal columns, which was right
                             while Progress was a tall vertical list of steps — it stood about
                             as high as the facts beside it. Now that the rail is horizontal
                             and roughly 120px tall, a half-width column left a large void
                             next to seven stacked fact rows.

                             The rail also simply wants the width: six to eight nodes spread
                             evenly across it is the entire point of the shape, and cramming
                             them into half the panel is what made the labels wrap. */
                          .tsp-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }

                          .tsp-sh{ margin:0 0 10px; color:#93a1b8; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
                          .tsp-panel{ background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.075); border-radius:12px; padding:13px 14px; }

                          /* ---------- progress rail ---------- */
                          .tsp-rail{ display:flex; flex-direction:column; }
                          .tsp-step{
                            display:grid; grid-template-columns:22px minmax(0,1fr) auto;
                            gap:10px; align-items:flex-start; padding:0 0 2px;
                            position:relative; cursor:pointer; background:none; border:none;
                            font-family:inherit; text-align:left; width:100%;
                          }
                          .tsp-step:disabled{ cursor:default; }
                          .tsp-step .mk{
                            width:22px; height:22px; border-radius:50%; flex:0 0 22px;
                            display:grid; place-items:center; font-size:11.5px; z-index:1;
                            border:1.5px solid rgba(139,150,172,.35); color:#5f6a7f;
                            background:#0d1424; transition:all .18s;
                          }
                          /* the connector: drawn on the step, not between, so the last one has none */
                          .tsp-step .mk::after{
                            content:''; position:absolute; left:10px; top:22px; bottom:-4px;
                            width:1.5px; background:rgba(139,150,172,.25); z-index:0;
                          }
                          .tsp-step:last-child .mk::after{ display:none; }
                          .tsp-step .tx{ padding-bottom:14px; min-width:0; }
                          .tsp-step .tx b{ display:block; color:#aab4c8; font-size:14.5px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
                          .tsp-step .tx span{ display:block; color:#69738a; font-size:12.5px; margin-top:2px; }
                          .tsp-step .ts{ color:#69738a; font-size:12px; padding-top:3px; white-space:nowrap; }

                          /* §7 — provisional completion prompt, indented under its step
                             so it reads as a question about that step and not a banner */
                          .tsp-sug{
                            margin:-6px 0 12px 30px; padding:10px 12px; border-radius:10px;
                            background:rgba(229,193,88,.07); border:1px solid rgba(229,193,88,.32);
                          }
                          .tsp-sug-hd{
                            display:flex; align-items:center; gap:7px;
                            color:#e9d9a6; font-size:13.5px; font-weight:700; line-height:1.4;
                          }
                          .tsp-sug-hd i{ font-size:12px; color:#c9a84c; }
                          .tsp-sug-why{ color:#8b96ac; font-size:12.5px; line-height:1.5; margin-top:4px; }
                          .tsp-sug-act{ display:flex; gap:8px; margin-top:9px; }
                          .tsp-sug-act button{
                            font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
                            padding:6px 13px; border-radius:7px; border:1px solid;
                          }
                          .tsp-sug-ok{
                            color:#0d1117; background:#3ee98c; border-color:#3ee98c;
                          }
                          .tsp-sug-ok:hover{ filter:brightness(1.08); }
                          .tsp-sug-no{
                            color:#9aa4b8; background:transparent; border-color:rgba(139,150,172,.4);
                          }
                          .tsp-sug-no:hover{ color:#e6edf8; border-color:rgba(139,150,172,.7); }

                          .tsp-step.done .mk{ border-color:rgba(62,233,140,.6); color:#3ee98c; background:rgba(62,233,140,.14); }
                          .tsp-step.done .mk::after{ background:rgba(62,233,140,.4); }
                          .tsp-step.done .tx b{ color:#d5dcf2; }
                          .tsp-step.now .mk{ border-color:rgba(246,184,63,.75); color:#f6b83f; background:rgba(246,184,63,.14);
                            box-shadow:0 0 0 3px rgba(246,184,63,.1); }
                          .tsp-step.now .tx b{ color:#ffd894; font-weight:700; }
                          .tsp-step.bad .mk{ border-color:rgba(255,122,122,.75); color:#ff7a7a; background:rgba(255,122,122,.14);
                            box-shadow:0 0 0 3px rgba(255,122,122,.1); }
                          .tsp-step.bad .tx b{ color:#ff9d9d; font-weight:700; }
                          .tsp-step:not(:disabled):hover .mk{ border-color:rgba(255,255,255,.5); }

                          /* ---------- facts panel ---------- */
                          /* An AUTO-FITTING GRID, not a single stacked column. One fact per
                             full-width row is what made this panel tall enough to strand the
                             rail beside it, and every row spent most of its width on nothing.
                             auto-fit means the column count follows the space available, so
                             the same markup is a single column on a phone and three or four
                             across on a desktop with no breakpoints to maintain.

                             Each fact is its own quiet card with a champagne hairline down the
                             left. The old row separators were border-tops with a :first-child
                             exception, which in a grid draws a seam across the top of every
                             cell in the first row and none anywhere else. */
                          .tsp-kv{
                            display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
                            gap:9px; align-items:stretch;
                          }
                          .tsp-kv .r{
                            padding:11px 13px; min-width:0;
                            background:rgba(255,255,255,.028);
                            border:1px solid rgba(255,255,255,.06);
                            border-left:2px solid rgba(235,216,176,.32);
                            border-radius:10px;
                            transition:background .2s, border-color .2s;
                          }
                          .tsp-kv .r:hover{ background:rgba(255,255,255,.05); border-left-color:rgba(235,216,176,.6); }
                          /* the "nothing recorded yet" line is a sentence, not a fact — it takes
                             the whole row rather than sitting in a 190px cell */
                          .tsp-kv .r.wide{ grid-column:1 / -1; border-left-color:rgba(255,255,255,.09); }
                          .tsp-kv .k{ display:block; color:#7d8798; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
                          .tsp-kv .v{ display:block; color:#e6edf8; font-size:14.5px; font-weight:600; margin-top:3px; overflow-wrap:anywhere; }
                          .tsp-kv .v.dim{ color:#5f6a7f; font-weight:500; }
                          /* who last set this fact — several participants edit these stages */
                          .tsp-kv .by{ display:block; color:#69738a; font-size:12px; margin-top:3px; }
                          .tsp-kv .by::before{ content:'\f4ff'; font-family:'Font Awesome 6 Free'; font-weight:900;
                            font-size:10.5px; margin-right:5px; opacity:.75; }

                          /* ---------- metric tiles ---------- */
                          /* AUTO-FIT, not a fixed four. A hard 4-column grid put five tiles on
                             4 + 1 and left three empty columns staring back on the second row.
                             auto-fit fits as many as the width allows — five across at desktop
                             width, two on a phone — so a stage with an odd number of figures
                             does not leave a hole. minmax's floor keeps a tile readable rather
                             than letting eight squeeze onto one line. */
                          .tsp-tiles{
                            display:grid; gap:9px;
                            grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
                          }
                          @media (max-width:480px){
                            .tsp-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
                          }
                          .tsp-tile{
                            background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.075);
                            border-radius:12px; padding:12px 11px; text-align:center;
                          }
                          .tsp-tile .ic{
                            width:30px; height:30px; margin:0 auto 8px; border-radius:9px;
                            display:grid; place-items:center; font-size:14px; border:1px solid;
                          }
                          .tsp-tile .lb{ display:block; color:#7d8798; font-size:12.5px; line-height:1.35; }
                          .tsp-tile .vl{ display:block; font-size:16px; font-weight:800; margin-top:5px; letter-spacing:-.3px; overflow-wrap:anywhere; }
                          .tsp-tile.neutral .ic{ color:#9ccaff; background:rgba(74,169,255,.12); border-color:rgba(74,169,255,.4); }
                          .tsp-tile.neutral .vl{ color:#e6edf8; }
                          .tsp-tile.ok .ic{ color:#3ee98c; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.4); }
                          .tsp-tile.ok .vl{ color:#8ff3bd; }
                          .tsp-tile.warn .ic{ color:#f6b83f; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.4); }
                          .tsp-tile.warn .vl{ color:#ffd894; }
                          .tsp-tile.bad .ic{ color:#ff7a7a; background:rgba(255,122,122,.12); border-color:rgba(255,122,122,.4); }
                          .tsp-tile.bad .vl{ color:#ff9d9d; }

                          /* ---------- summary block (the four lines that matter) ---------- */
                          .tsp-sum{
                            border-radius:12px; padding:14px;
                            background:rgba(246,184,63,.045); border:1px solid rgba(246,184,63,.42);
                          }
                          .tsp-sum.ok{ background:rgba(62,233,140,.045); border-color:rgba(62,233,140,.42); }
                          .tsp-sum.bad{ background:rgba(255,122,122,.05); border-color:rgba(255,122,122,.45); }
                          .tsp-sum > b{
                            display:block; margin-bottom:11px; color:#ffd894;
                            font-size:15px; font-weight:800; letter-spacing:-.1px;
                          }
                          .tsp-sum.ok > b{ color:#8ff3bd; }
                          .tsp-sum.bad > b{ color:#ff9d9d; }
                          .tsp-sum .r{
                            display:flex; align-items:baseline; justify-content:space-between;
                            gap:12px; padding:6px 0; border-top:1px solid rgba(255,255,255,.06);
                          }
                          .tsp-sum .r:first-of-type{ border-top:none; }
                          .tsp-sum .r .k{ display:inline-flex; align-items:center; gap:7px; color:#aab4c8; font-size:14px; }
                          .tsp-sum .r .k i{ font-size:12.5px; color:#7d8798; width:13px; text-align:center; }
                          .tsp-sum .r .v{ color:#e6edf8; font-size:14px; font-weight:700; text-align:right; overflow-wrap:anywhere; }
                          .tsp-sum .r .v.ok{ color:#8ff3bd; } .tsp-sum .r .v.warn{ color:#ffd894; } .tsp-sum .r .v.bad{ color:#ff9d9d; }

                          .tsp-alert{
                            display:flex; align-items:flex-start; gap:9px; border-radius:11px; padding:11px 13px;
                            background:rgba(255,138,60,.09); border:1px solid rgba(255,138,60,.45);
                            color:#ffc9a3; font-size:14px; line-height:1.6;
                          }
                          .tsp-alert i{ color:#ff8a3c; font-size:14px; margin-top:2px; }
                          .tsp-hint{ display:flex; align-items:center; gap:7px; color:#69738a; font-size:13px; line-height:1.5; }
                          .tsp-hint i{ color:#4aa9ff; font-size:12.5px; }
                          .tsp-acts{ display:flex; flex-wrap:wrap; gap:8px; }

                          /* congratulations banner on a completed deal */
                          .tsp-congrats{
                            display:flex; align-items:center; gap:11px; border-radius:12px; padding:13px 15px;
                            background:linear-gradient(135deg, rgba(62,233,140,.12), rgba(62,233,140,.03));
                            border:1px solid rgba(62,233,140,.5);
                          }
                          .tsp-congrats i{ color:#3ee98c; font-size:20px; }
                          .tsp-congrats b{ display:block; color:#8ff3bd; font-size:15px; font-weight:800; }
                          .tsp-congrats span{ display:block; color:#a7d8bd; font-size:13.5px; margin-top:2px; line-height:1.5; }

                          /* ==================================================================
                             GLOBAL "YOUR NEXT ACTION" CARD
                             ------------------------------------------------------------------
                             One card, one action, deal level. It has to be findable in a
                             second without becoming the loudest thing on a board that already
                             has ten glowing planets — so: gold accent (the product's own
                             "attention" colour), a compact two-line body, and a single filled
                             CTA. Explicitly NOT a hero banner (§11); its height is bounded by
                             the copy, and long messages wrap rather than stretch it.

                             The urgency variants only change the RIM and the icon, never the
                             layout, so an overdue card cannot shift the timeline underneath it
                             as it arrives.
                          ================================================================== */
                          #tempTimelineEmptyState .tna{
                            position:relative;
                            display:flex; flex-direction:column; gap:12px;
                            margin:0 0 14px; padding:15px 16px; border-radius:16px;
                            background:
                              radial-gradient(120% 160% at 0% 0%, rgba(246,184,63,.13) 0%, rgba(246,184,63,0) 62%),
                              linear-gradient(160deg, rgba(19,26,43,.97), rgba(11,17,30,.97));
                            border:1px solid rgba(246,184,63,.42);
                            box-shadow:0 0 30px -14px rgba(246,184,63,.55),
                                       inset 0 1px 0 rgba(255,255,255,.05);
                          }
                          #tempTimelineEmptyState .tna-row{ display:flex; align-items:flex-start; gap:13px; }
                          #tempTimelineEmptyState .tna-ic{
                            flex:0 0 auto; width:40px; height:40px; border-radius:12px;
                            display:grid; place-items:center; font-size:16px;
                            color:#1c1405;
                            background:linear-gradient(180deg,#f8d97a,#eec14e);
                            box-shadow:0 3px 12px rgba(246,184,63,.35), inset 0 1px 0 rgba(255,255,255,.5);
                          }
                          #tempTimelineEmptyState .tna-tx{ min-width:0; flex:1 1 auto; }
                          #tempTimelineEmptyState .tna-h{
                            display:block; color:#ffd894; font-size:13px; font-weight:800;
                            letter-spacing:.13em; text-transform:uppercase;
                          }
                          /* the instruction itself — the one line that has to be readable on a
                             phone held at arm's length, so it is the largest text in the card */
                          #tempTimelineEmptyState .tna-msg{
                            display:block; margin-top:5px; color:#f2f6ff;
                            font-size:15.5px; font-weight:600; line-height:1.45; overflow-wrap:anywhere;
                          }
                          #tempTimelineEmptyState .tna-meta{
                            display:block; margin-top:5px; color:#8b96ac; font-size:13.5px; line-height:1.5;
                          }
                          #tempTimelineEmptyState .tna-meta b{ color:#ffb38a; font-weight:700; }

                          /* CTA: full width so the touch target is the whole card edge on a
                             phone, capped on desktop where a full-bleed button reads as a
                             banner rather than an action */
                          #tempTimelineEmptyState .tna-cta{
                            display:inline-flex; align-items:center; justify-content:center; gap:9px;
                            width:100%; min-height:46px; padding:12px 20px;
                            border:none; border-radius:12px; cursor:pointer; font-family:inherit;
                            font-size:15.5px; font-weight:800; letter-spacing:.2px; color:#1c1405;
                            background:linear-gradient(180deg,#f8d97a,#eec14e);
                            box-shadow:0 4px 14px rgba(246,184,63,.3), inset 0 1px 0 rgba(255,255,255,.5);
                            transition:filter .18s ease, transform .12s ease, box-shadow .18s ease;
                          }
                          #tempTimelineEmptyState .tna-cta i{ font-size:13px; }
                          #tempTimelineEmptyState .tna-cta:hover{
                            filter:brightness(1.06);
                            box-shadow:0 6px 20px rgba(246,184,63,.42), inset 0 1px 0 rgba(255,255,255,.55);
                          }
                          #tempTimelineEmptyState .tna-cta:active{ transform:translateY(1px); filter:brightness(.97); }
                          #tempTimelineEmptyState .tna-cta:focus-visible{ outline:2px solid #ffe6b0; outline-offset:3px; }
                          @media (min-width:560px){
                            #tempTimelineEmptyState .tna-cta{ width:auto; align-self:flex-start; min-width:190px; }
                          }

                          /* ---- urgency variants ---- */
                          #tempTimelineEmptyState .tna.blocking{
                            border-color:rgba(255,138,60,.6);
                            box-shadow:0 0 34px -12px rgba(255,138,60,.6), inset 0 1px 0 rgba(255,255,255,.05);
                          }
                          #tempTimelineEmptyState .tna.overdue{
                            border-color:rgba(255,122,122,.62);
                            box-shadow:0 0 34px -12px rgba(255,122,122,.6), inset 0 1px 0 rgba(255,255,255,.05);
                          }
                          #tempTimelineEmptyState .tna.overdue .tna-ic{
                            color:#2a0d0d; background:linear-gradient(180deg,#ffb1b1,#ff8a8a);
                            box-shadow:0 3px 12px rgba(255,122,122,.35), inset 0 1px 0 rgba(255,255,255,.5);
                          }

                          /* §11 — a subtle one-shot glow when an urgent action FIRST appears.
                             Three pulses, then it stops for good: a permanently animated card
                             is noise, and the point is to catch the eye once on arrival.
                             .tna-new is added by tnaRender() only when the action id changes. */
                          @keyframes tnaArrive{
                            0%,100%{ box-shadow:0 0 30px -14px rgba(246,184,63,.55), inset 0 1px 0 rgba(255,255,255,.05); }
                            50%    { box-shadow:0 0 40px -6px rgba(246,184,63,.85), inset 0 1px 0 rgba(255,255,255,.08); }
                          }
                          #tempTimelineEmptyState .tna.tna-new{ animation:tnaArrive 1.5s ease-in-out 3; }
                          @media (prefers-reduced-motion:reduce){
                            #tempTimelineEmptyState .tna.tna-new{ animation:none; }
                            #tempTimelineEmptyState .tna-cta{ transition:none; }
                            #tempTimelineEmptyState .tna-cta:active{ transform:none; }
                          }

                          /* the stage task the card sent the user to, briefly ringed so the
                             deep link lands on something visibly identified (§9) */
                          @keyframes tnaFocusRing{
                            0%  { box-shadow:0 0 0 0 rgba(246,184,63,.55); }
                            100%{ box-shadow:0 0 0 14px rgba(246,184,63,0); }
                          }
                          .tna-focus{
                            border-radius:12px;
                            animation:tnaFocusRing 1.4s ease-out 2;
                            outline:1px solid rgba(246,184,63,.7); outline-offset:2px;
                          }
                          @media (prefers-reduced-motion:reduce){
                            .tna-focus{ animation:none; }
                          }

                          /* ==================================================================
                             FINANCING — DYNAMIC SCENARIOS
                             ------------------------------------------------------------------
                             Financing is NOT one workflow with optional bits. It is two
                             independent questions — how the buyer pays, and what the property
                             still owes — and the screen is assembled from the answers. So the
                             styling is built around CARDS (one per active workflow) rather
                             than one long rail: a cash purchase must not look like a mortgage
                             with steps missing, it must look like a cash purchase.

                             The step rail is HORIZONTAL here, unlike the vertical .tsp-rail,
                             because these workflows are short (3-5 steps) and the reader's
                             question is "how far along is this branch", which a horizontal
                             progress line answers at a glance. It scrolls inside its own box
                             on a narrow phone — the page itself never scrolls sideways (§15).
                          ================================================================== */
                          .fin{ display:flex; flex-direction:column; gap:13px; }
                          .fin *{ box-sizing:border-box; }

                          /* ---------- "Change Purchase Type" ----------
                             The one control that reconfigures the entire stage, so it is a real
                             button rather than the dim 10.5px .view link the sibling sections
                             use for "Upload ›". Outlined and purple (financing's own accent),
                             never filled: §10 wants it visible but NOT dominant, and a solid CTA
                             here would out-shout the workflow it sits above.

                             The header wraps rather than squeezing, so on a narrow phone the
                             button drops to its own line instead of crushing the "FINANCING"
                             label beside it. It stays its natural width there rather than
                             stretching full-bleed — a full-width bar would read as the primary
                             action of the stage, which is exactly what it must not be. */
                          .fin-shead{ flex-wrap:wrap; gap:9px; }
                          .fin-typebtn{
                            flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
                            cursor:pointer; font-family:inherit;
                            font-size:14px; font-weight:800; letter-spacing:.2px;
                            padding:8px 14px; border-radius:999px;
                            color:#dcc8ff;
                            background:linear-gradient(180deg, rgba(165,107,255,.16), rgba(165,107,255,.07));
                            border:1px solid rgba(165,107,255,.5);
                            box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 8px rgba(0,0,0,.28);
                            transition:border-color .18s ease, background .18s ease,
                                       color .18s ease, transform .12s ease, box-shadow .18s ease;
                          }
                          .fin-typebtn i{ font-size:13px; opacity:.9; }
                          .fin-typebtn:hover{
                            color:#f2e9ff; border-color:rgba(196,158,255,.9);
                            background:linear-gradient(180deg, rgba(165,107,255,.26), rgba(165,107,255,.12));
                            box-shadow:0 1px 0 rgba(255,255,255,.1) inset,
                                       0 0 16px -4px rgba(165,107,255,.6), 0 3px 10px rgba(0,0,0,.32);
                          }
                          .fin-typebtn:active{ transform:translateY(1px); filter:brightness(.96); }
                          .fin-typebtn:focus-visible{ outline:2px solid #c49eff; outline-offset:2px; }
                          @media (prefers-reduced-motion:reduce){
                            .fin-typebtn{ transition:none; }
                            .fin-typebtn:active{ transform:none; }
                          }

                          /* ---------- stage header ---------- */
                          .fin-hd{
                            display:flex; align-items:center; gap:11px; flex-wrap:wrap;
                            border-radius:13px; padding:12px 14px;
                            background:linear-gradient(135deg, rgba(165,107,255,.10), rgba(165,107,255,.02));
                            border:1px solid rgba(165,107,255,.34);
                          }
                          .fin-hd .ic{
                            width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
                            background:rgba(165,107,255,.15); border:1px solid rgba(165,107,255,.5);
                            color:#c9a4ff; font-size:15.5px;
                          }
                          .fin-hd .t{ flex:1 1 150px; min-width:0; }
                          .fin-hd .t b{ display:block; color:#f8fafc; font-size:16px; font-weight:800; letter-spacing:-.2px; }
                          .fin-hd .t span{ display:block; color:#8b96ac; font-size:13.5px; margin-top:3px; line-height:1.5; }

                          /* status chips reuse the pipeline vocabulary so the two stages agree */
                          .fin-chip{
                            display:inline-flex; align-items:center; gap:6px; padding:5px 12px; flex:0 0 auto;
                            border-radius:50px; font-size:13.5px; font-weight:800; white-space:nowrap; border:1px solid;
                          }
                          .fin-chip.pending{ color:#aab4c8; background:rgba(139,150,172,.1);  border-color:rgba(139,150,172,.4); }
                          .fin-chip.in_progress{ color:#ffd894; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.55); }
                          .fin-chip.attention{ color:#ffb38a; background:rgba(255,138,60,.13); border-color:rgba(255,138,60,.6); }
                          .fin-chip.complete{ color:#8ff3bd; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.55); }

                          /* ---------- one workflow card ---------- */
                          .fin-card{
                            border-radius:14px; padding:13px 14px;
                            background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.085);
                          }
                          .fin-card.buyer{ border-color:rgba(74,169,255,.34); background:rgba(74,169,255,.035); }
                          .fin-card.cash{  border-color:rgba(62,233,140,.32); background:rgba(62,233,140,.03); }
                          .fin-card.other{ border-color:rgba(165,107,255,.34); background:rgba(165,107,255,.035); }
                          .fin-card.payoff{ border-color:rgba(246,184,63,.34); background:rgba(246,184,63,.03); }
                          .fin-card.att{ border-color:rgba(255,138,60,.6); }

                          .fin-cardhd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
                          .fin-cardhd .lb{
                            font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
                            display:inline-flex; align-items:center; gap:7px; min-width:0;
                          }
                          .fin-card.buyer  .fin-cardhd .lb{ color:#9ccaff; }
                          .fin-card.cash   .fin-cardhd .lb{ color:#8ff3bd; }
                          .fin-card.other  .fin-cardhd .lb{ color:#c9a4ff; }
                          .fin-card.payoff .fin-cardhd .lb{ color:#ffd894; }
                          .fin-cardhd .sb{ color:#7d8798; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; }
                          .fin-cardhd .sp{ flex:1 1 auto; }
                          .fin-view{
                            flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
                            background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
                            color:#dbe4f5; font:700 11px/1 'Outfit','Inter',sans-serif; padding:7px 11px; border-radius:8px;
                          }
                          .fin-view:hover{ border-color:rgba(255,255,255,.4); color:#fff; }

                          /* ---------- horizontal step rail ---------- */
                          .fin-railwrap{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; margin:0 -2px; }
                          .fin-railwrap::-webkit-scrollbar{ display:none; }
                          /* A rail too wide for its card is swipeable, and a step clipped flat at
                             the card's edge just reads as broken. .sc is set at render time only
                             when the rail actually overflows, and fades its own painted edge —
                             a mask rather than a gradient overlay because each card variant has
                             its own tinted background, so there is no one colour to cover with. */
                          .fin-railwrap.sc{
                            -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px), transparent 100%);
                                    mask-image:linear-gradient(90deg,#000 calc(100% - 28px), transparent 100%);
                          }
                          .fin-rail{ display:flex; align-items:flex-start; min-width:100%; }
                          /* 72px, not 62: at 62 a phone broke "Underwriting" across two lines
                             mid-word ("Underwritin / g"), which reads as a rendering fault.
                             72px fits the longest single word in any branch; when five of them
                             no longer fit the card, .fin-railwrap scrolls — the rail is the one
                             element allowed to, and it keeps the PAGE from scrolling (§15). */
                          .fin-node{
                            flex:1 1 0; min-width:72px; position:relative; padding:0 2px;
                            display:flex; flex-direction:column; align-items:center; gap:6px;
                            background:none; border:none; font-family:inherit; cursor:pointer; text-align:center;
                          }
                          /* the connector is drawn on the node, to its LEFT, so the first node
                             has none and the line can never overhang the rail's end */
                          .fin-node::before{
                            content:''; position:absolute; top:13px; right:50%; left:-50%; height:2px;
                            background:rgba(139,150,172,.28);
                          }
                          .fin-node:first-child::before{ display:none; }
                          .fin-node.done::before, .fin-node.now::before{ background:rgba(62,233,140,.55); }
                          .fin-node .mk{
                            width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
                            font-size:12px; position:relative; z-index:1;
                            border:1.5px solid rgba(139,150,172,.4); color:#5f6a7f; background:#0d1424;
                            transition:all .18s;
                          }
                          .fin-node .nl{
                            display:block; color:#8b96ac; font-size:11.5px; font-weight:700; line-height:1.3;
                            /* break-word, not anywhere: only split a word that cannot fit at all,
                               so labels wrap at their spaces first */
                            overflow-wrap:break-word;
                          }
                          .fin-node .nt{ display:block; color:#69738a; font-size:11px; }
                          .fin-node.done .mk{ border-color:rgba(62,233,140,.7); color:#3ee98c; background:rgba(62,233,140,.15); }
                          .fin-node.done .nl{ color:#cfe3d8; }
                          .fin-node.now .mk{
                            border-color:rgba(165,107,255,.85); color:#c9a4ff; background:rgba(165,107,255,.18);
                            box-shadow:0 0 0 4px rgba(165,107,255,.13);
                          }
                          .fin-node.now .nl{ color:#dcc8ff; }
                          .fin-node.bad .mk{
                            border-color:rgba(255,122,122,.8); color:#ff7a7a; background:rgba(255,122,122,.15);
                            box-shadow:0 0 0 4px rgba(255,122,122,.12);
                          }
                          .fin-node.bad .nl{ color:#ff9d9d; }
                          .fin-node:not(:disabled):hover .mk{ border-color:rgba(255,255,255,.55); }
                          .fin-node:disabled{ cursor:default; }

                          /* ---------- "current step" panel ---------- */
                          .fin-now{
                            margin-top:12px; border-radius:11px; padding:11px 12px;
                            background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.075);
                          }
                          .fin-now .h{
                            display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
                          }
                          .fin-now .k{ color:#69738a; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
                          .fin-now .v{ display:block; color:#e6edf8; font-size:14.5px; font-weight:700; margin-top:3px; }
                          .fin-now .d{ display:block; color:#8b96ac; font-size:13.5px; line-height:1.55; margin-top:4px; }
                          .fin-now .nx{ display:block; color:#a9b6cc; font-size:13.5px; line-height:1.55; margin-top:5px; }
                          .fin-now .nx b{ color:#dcc8ff; font-weight:700; }

                          /* ---------- facts strip under a card ---------- */
                          .fin-facts{
                            display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; margin-top:11px;
                          }
                          .fin-fact{
                            border-radius:10px; padding:9px 10px;
                            background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
                          }
                          .fin-fact .k{ display:block; color:#7d8798; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
                          .fin-fact .v{ display:block; color:#e6edf8; font-size:14.5px; font-weight:700; margin-top:3px; overflow-wrap:anywhere; }
                          .fin-fact .v.ok{ color:#8ff3bd; } .fin-fact .v.warn{ color:#ffd894; } .fin-fact .v.bad{ color:#ff9d9d; }
                          .fin-fact .by{ display:block; color:#69738a; font-size:11px; margin-top:3px; }

                          .fin-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
                          .fin-btn{
                            display:inline-flex; align-items:center; gap:7px; cursor:pointer;
                            background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.16);
                            color:#dbe4f5; font:700 11.5px/1 'Outfit','Inter',sans-serif;
                            padding:9px 13px; border-radius:9px;
                          }
                          .fin-btn:hover{ border-color:rgba(255,255,255,.42); color:#fff; }
                          .fin-btn.gold{ color:#ffd894; border-color:rgba(246,184,63,.5); background:rgba(246,184,63,.1); }
                          .fin-btn.pu{ color:#dcc8ff; border-color:rgba(165,107,255,.55); background:rgba(165,107,255,.12); }

                          /* ---------- compact property-debt states ----------
                             §6 / §8: an inactive five-step payoff timeline is worse than
                             nothing — it implies work that does not exist. These two cards
                             are what "no loan" and "not confirmed" render as instead, and
                             they are deliberately NOT the same colour: the reader must be
                             able to tell a confirmed absence from an open question. */
                          .fin-mini{
                            display:flex; align-items:flex-start; gap:11px; border-radius:13px; padding:13px 14px;
                          }
                          .fin-mini .ic{
                            width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
                            font-size:15.5px; border:1px solid;
                          }
                          .fin-mini .tx{ min-width:0; flex:1 1 auto; }
                          .fin-mini .tx .lb{
                            display:block; font-size:12.5px; font-weight:800; letter-spacing:.09em;
                            text-transform:uppercase; margin-bottom:4px;
                          }
                          .fin-mini .tx b{ display:block; color:#e6edf8; font-size:14.5px; font-weight:700; }
                          .fin-mini .tx span{ display:block; color:#8b96ac; font-size:13.5px; line-height:1.55; margin-top:3px; }
                          .fin-mini.none{ background:rgba(62,233,140,.05); border:1px solid rgba(62,233,140,.36); }
                          .fin-mini.none .ic{ color:#3ee98c; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.45); }
                          .fin-mini.none .tx .lb{ color:#8ff3bd; }
                          .fin-mini.unknown{ background:rgba(246,184,63,.055); border:1px solid rgba(246,184,63,.42); }
                          .fin-mini.unknown .ic{ color:#f6b83f; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.5); }
                          .fin-mini.unknown .tx .lb{ color:#ffd894; }

                          /* ---------- summarised multi-debt card (§10) ---------- */
                          .fin-debtsum{
                            display:flex; align-items:center; gap:11px; flex-wrap:wrap;
                            border-radius:11px; padding:10px 12px; margin-bottom:11px;
                            background:rgba(246,184,63,.07); border:1px solid rgba(246,184,63,.38);
                          }
                          .fin-debtsum b{ color:#ffd894; font-size:14px; font-weight:800; }
                          .fin-debtsum span{ color:#a9b6cc; font-size:13.5px; }
                          .fin-debtsum .tot{ margin-left:auto; color:#ffe0a8; font-size:15.5px; font-weight:800; }

                          .fin-alert{
                            display:flex; align-items:flex-start; gap:9px; border-radius:11px; padding:11px 13px;
                            background:rgba(255,138,60,.09); border:1px solid rgba(255,138,60,.45);
                            color:#ffc9a3; font-size:14px; line-height:1.6;
                          }
                          .fin-alert i{ color:#ff8a3c; font-size:14px; margin-top:2px; }
                          .fin-hint{ display:flex; align-items:flex-start; gap:7px; color:#69738a; font-size:13px; line-height:1.55; }
                          .fin-hint i{ color:#4aa9ff; font-size:12.5px; margin-top:2px; }

                          /* the audit line under the two dimension answers */
                          .fin-prov{ color:#69738a; font-size:12px; line-height:1.5; margin-top:7px; }
                          .fin-prov i{ font-size:11px; margin-right:5px; opacity:.8; }

                          /* history of a branch that is no longer the active one — proof that
                             changing the purchase type reconfigures without destroying (§10) */
                          .fin-hist{
                            border-radius:11px; padding:10px 12px;
                            background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.14);
                            color:#8b96ac; font-size:13.5px; line-height:1.6;
                          }
                          .fin-hist b{ color:#c3ccdd; font-weight:700; }

                          /* ---------- purchase-type picker (rendered into #popup23) ---------- */
                          .fin-pick{ display:flex; flex-direction:column; gap:10px; }
                          .fin-opt{
                            display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
                            border-radius:13px; padding:13px 14px; cursor:pointer; font-family:inherit;
                            background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.1);
                            transition:border-color .18s, background .18s;
                          }
                          .fin-opt .ic{
                            width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
                            font-size:16px; border:1px solid;
                          }
                          .fin-opt .tx b{ display:block; color:#f2f6ff; font-size:15px; font-weight:800; }
                          .fin-opt .tx span{ display:block; color:#8b96ac; font-size:13.5px; line-height:1.55; margin-top:3px; }
                          .fin-opt[data-t="mortgage"] .ic{ color:#9ccaff; background:rgba(74,169,255,.13); border-color:rgba(74,169,255,.45); }
                          .fin-opt[data-t="cash"]     .ic{ color:#3ee98c; background:rgba(62,233,140,.13); border-color:rgba(62,233,140,.45); }
                          .fin-opt[data-t="other"]    .ic{ color:#c9a4ff; background:rgba(165,107,255,.13); border-color:rgba(165,107,255,.45); }
                          .fin-opt:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.05); }
                          .fin-opt.on{ border-color:rgba(165,107,255,.8); background:rgba(165,107,255,.1); }
                          .fin-opt .tick{ margin-left:auto; align-self:center; color:#c9a4ff; font-size:15.5px; display:none; }
                          .fin-opt.on .tick{ display:block; }

                          /* ==================================================================
                             TASKS / ACTION ITEMS — the room's own action list.
                             A transaction is documents AND tasks: real items, assigned to a
                             real party, with a due date and a priority. Distinct from the AI's
                             per-stage checklists (which describe the standard process) — these
                             are things somebody in THIS room has to actually go and do.
                          ================================================================== */
                          /* Solid-filled colour per filter — purple / orange / green /
                             blue, white text and icon, exact tokens from the design
                             spec. Every tab carries its colour at rest (the four
                             filters are peers, not one selected state), and the
                             active one deepens to its Active fill plus a glow so the
                             selection still reads. The old version tinted only the
                             selected tab gold, which made the other three look
                             disabled. Matched to #deal-tasks-view .dtai-tab so the
                             temp room and the main deal room read as one feature. */
                          /* The panel is fluid (flex:1 1 420px, max 760px), so the tab
                             row has to answer to ITS width, not the viewport's — a
                             media query would read the desktop viewport and force
                             four cramped tabs into a 420px panel. A container query
                             gives the real answer: two columns while the panel is
                             narrow, one row of four once there is room for the
                             longest label ("Completed (13)") without squeezing. The
                             2-column default is also the fallback anywhere container
                             queries are unavailable, which stays legible. */
                          #tempTaiSec{ container-type:inline-size; }
                          /* auto tracks, not 1fr: the spec's tabs are content-width
                             (My Tasks is narrower than Completed) and auto tracks still
                             share any leftover space, so the row fills without forcing
                             every tab to the width of the longest label — which is what
                             lets four fit at all inside a 704px panel. */
                          .tai-tabs{
                            display:grid; grid-template-columns:repeat(2,auto);
                            gap:8px; margin-bottom:16px;
                          }
                          @container (min-width: 660px){
                            .tai-tabs{ grid-template-columns:repeat(4,auto); }
                          }
                          .tai-tab{
                            display:inline-flex; align-items:center; justify-content:center; gap:8px;
                            min-width:0;
                            height:40px; padding:0 14px; border-radius:12px; cursor:pointer;
                            background:var(--tbg); border:1.5px solid var(--tbd);
                            color:#ffffff; font-family:inherit; font-size:15.5px; font-weight:600;
                            white-space:nowrap; transition:background .15s, box-shadow .15s;
                            box-shadow:0 0 10px var(--tgl), inset 0 1px 0 rgba(255,255,255,.15);
                          }
                          .tai-tab i{ color:#ffffff; font-size:20px; }
                          /* ~15% darker than the spec's hexes, by request — the originals
                             read too bright against this near-black panel. The ramp is
                             kept intact (border lighter than fill, hover lighter again),
                             so only the overall level moved, not the relationships. */
                          .tai-tab[data-tai-tab="mine"]     { --tbg:#5B31C7; --tbd:#754DCF; --thv:#6841D6; --tac:#754DCF; --tgl:rgba(117,77,207,.32); }
                          .tai-tab[data-tai-tab="open"]     { --tbg:#D16112; --tbd:#D37B32; --thv:#D37B32; --tac:#D16112; --tgl:rgba(211,123,50,.32); }
                          .tai-tab[data-tai-tab="completed"]{ --tbg:#0D9B6C; --tbd:#2CB181; --thv:#2CB181; --tac:#0D9B6C; --tgl:rgba(44,177,129,.32); }
                          .tai-tab[data-tai-tab="all"]      { --tbg:#1F53C5; --tbd:#2F6DCF; --thv:#2F6DCF; --tac:#1F53C5; --tgl:rgba(47,109,207,.32); }
                          .tai-tab:hover{ background:var(--thv); }
                          .tai-tab.on{
                            background:var(--tac);
                            box-shadow:0 0 16px var(--tgl), 0 0 4px var(--tgl), inset 0 1px 0 rgba(255,255,255,.2);
                          }
                          /* the spec's 24px side padding, but only once the panel is wide
                             enough to seat four tabs. MUST come after the base .tai-tab
                             rule — same specificity, so source order decides. */
                          @container (min-width: 660px){
                            .tai-tab{ padding:0 24px; }
                          }

                          .tai-card{
                            display:grid; grid-template-columns:34px minmax(0,1fr) auto;
                            gap:11px; align-items:flex-start;
                            padding:12px; margin-bottom:9px; border-radius:12px;
                            background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08);
                            border-left:3px solid rgba(139,150,172,.5);
                            transition:border-color .15s, background .15s;
                          }
                          .tai-card:hover{ background:rgba(255,255,255,.04); }
                          .tai-card.p-high{ border-left-color:#ff8a3c; }
                          .tai-card.p-med { border-left-color:#f6b83f; }
                          .tai-card.p-low { border-left-color:#4aa9ff; }
                          .tai-card.done{ border-left-color:#3ee98c; opacity:.85; }
                          .tai-card.overdue{ background:rgba(255,122,122,.05); border-color:rgba(255,122,122,.3); }

                          /* The completion control. It must read as a CHECKBOX, not as a file
                             icon — the first version used a document glyph in a coloured tile,
                             which looked decorative and left people with no idea how to finish a
                             task. A hollow ring that fills with a check on hover is the one
                             affordance nobody has to be taught. */
                          /* A CHECKBOX, NOT A RING.
                             This was a 50% circle with the tick hidden until :hover. On a phone
                             there is no hover, so it was permanently an empty circle sitting to
                             the left of a title — which reads as a bullet or a status dot, not
                             as a control. Two changes fix that: a rounded SQUARE, which is the
                             universally-understood checkbox shape, and a tick that is always
                             drawn at low opacity so an unchecked box still shows what it is for. */
                          .tai-ic{
                            width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
                            cursor:pointer; padding:0; margin-top:2px; flex:0 0 auto;
                            border:2px solid rgba(159,171,193,.6);
                            background:rgba(255,255,255,.05); color:rgba(200,210,226,.5);
                            transition:border-color .15s, background .15s, color .15s, transform .12s;
                          }
                          .tai-ic::before{
                            content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:14px;
                          }
                          /* priority tints the border but never so faintly that the box stops
                             reading as a box — hence the .6 floor above and here */
                          .tai-ic.p-high{ border-color:rgba(255,138,60,.7); }
                          .tai-ic.p-med { border-color:rgba(246,184,63,.7); }
                          .tai-ic.p-low { border-color:rgba(74,169,255,.7); }
                          .tai-ic:hover, .tai-ic:focus-visible{
                            border-color:#3ee98c; background:rgba(62,233,140,.18);
                            color:#3ee98c; transform:scale(1.06); outline:none;
                          }
                          .tai-ic:active{ transform:scale(.94); }
                          .tai-ic.done{
                            border-color:#3ee98c; background:#3ee98c; color:#06210f;
                          }
                          .tai-ic.done:hover{
                            background:rgba(62,233,140,.18); color:#3ee98c;
                            border-color:rgba(62,233,140,.75);
                          }
                          /* spells the action out on the first card, so the ring is never a
                             guessing game even for a first-time user */
                          /* ── Type scale ──────────────────────────────────────────────────
                             The whole panel sat between 9px and 13px, which is below what
                             this product uses anywhere else and genuinely hard to read on a
                             laptop. Every size below is raised together rather than one at a
                             time, so the hierarchy — title over assignee over due date over
                             evidence — survives the change instead of flattening. */
                          .tai-hint{
                            display:flex; align-items:center; gap:7px; margin:2px 0 10px;
                            color:#7d8798; font-size:13.5px; line-height:1.55;
                          }
                          .tai-hint i{ color:#3ee98c; font-size:13px; }

                          .tai-tx{ min-width:0; }
                          .tai-tx .ti{ display:block; color:#e6edf8; font-size:16px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
                          .tai-card.done .tai-tx .ti{ color:#aab4c8; text-decoration:line-through; text-decoration-color:rgba(139,150,172,.5); }
                          /* Who owns the task and when it's due were the two dimmest lines on
                             the card (#8b96ac / #7d8798 on a near-black panel — under 4.5:1),
                             which is why the assignee was hard to read at a glance. Both lifted
                             to a legible grey, and the assignee's weight raised: "who" is the
                             field people scan this list for. */
                          .tai-tx .as{ display:block; color:#b3bdd0; font-size:14px; font-weight:600; margin-top:4px; }
                          /* the viewer's own name — the one row in a shared list that is about
                             THEM, so it gets the accent rather than another shade of grey */
                          .tai-tx .as .me{ color:#ffe08a; font-weight:800; }
                          .tai-tx .du{ display:block; color:#96a1b5; font-size:13.5px; font-weight:600; margin-top:4px; }
                          .tai-tx .du.warn{ color:#ffd894; }
                          .tai-tx .du.bad{ color:#ff9d9d; font-weight:700; }

                          /* §5 — WHY this task exists.
                             An automatically raised task that cannot say what
                             raised it is indistinguishable from a bug, so the
                             evidence line is part of the row, not a tooltip. */
                          .tai-why{
                            display:flex; align-items:flex-start; gap:6px; margin-top:6px;
                            color:#8f9bb1; font-size:13.5px; line-height:1.55; overflow-wrap:anywhere;
                          }
                          .tai-why i{ color:#c9a84c; font-size:12.5px; margin-top:2.5px; flex:0 0 auto; }
                          .tai-card.done .tai-why i{ color:#3ee98c; }
                          .tai-why.manual i{ color:#8b96ac; }

                          .tai-auto{
                            display:inline-flex; align-items:center; gap:4px;
                            padding:4px 8px; border-radius:6px; font-size:12px; font-weight:800;
                            letter-spacing:.4px; white-space:nowrap; border:1px solid;
                            color:#e9d9a6; background:rgba(229,193,88,.12); border-color:rgba(229,193,88,.45);
                          }
                          .tai-auto i{ font-size:11.5px; }
                          /* the task being confirmed, restated inside the modal — a dialog that
                             says "mark this task complete?" without naming which task is a
                             dialog you cannot safely answer */
                          .tai-cf{
                            background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
                            border-radius:11px; padding:12px 13px; margin-bottom:14px;
                          }
                          .tai-cf-t{
                            color:#e6edf8; font-size:15px; font-weight:700; line-height:1.45;
                            overflow-wrap:anywhere;
                          }
                          .tai-cf-m{ color:#9aa5ba; font-size:14px; margin-top:5px; line-height:1.55; }

                          .tai-auto.priv{
                            color:#d9b8ff; background:rgba(178,124,255,.12); border-color:rgba(178,124,255,.45);
                          }
                          .tai-auto.manual{
                            color:#9aa4b8; background:rgba(139,150,172,.1); border-color:rgba(139,150,172,.35);
                          }

                          .tai-rt{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
                          .tai-pri{
                            padding:4px 9px; border-radius:6px; font-size:12.5px; font-weight:800;
                            white-space:nowrap; border:1px solid;
                          }
                          .tai-pri.p-high{ color:#ffb38a; background:rgba(255,138,60,.13); border-color:rgba(255,138,60,.5); }
                          .tai-pri.p-med { color:#ffd894; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.5); }
                          .tai-pri.p-low { color:#9ccaff; background:rgba(74,169,255,.12); border-color:rgba(74,169,255,.45); }
                          .tai-pri.done  { color:#8ff3bd; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.5); }
                          .tai-kebab{
                            background:none; border:none; padding:2px 4px; cursor:pointer;
                            color:#69738a; font-size:14px; font-family:inherit;
                          }
                          .tai-kebab:hover{ color:#ffd894; }

                          /* ── Add New Task — the panel's primary action ────────────────────
                             It leads the panel (it used to sit under the list, reachable
                             only by scrolling past the work it creates), but it is no
                             longer the loudest thing on screen: the full-width gold
                             gradient pill with a shimmer competed with the task cards
                             for a button that gets pressed once a session. Now a
                             compact flat yellow chip — auto width, 36px tall — per the
                             design spec. Same treatment as #deal-tasks-view .dtai-add. */
                          .tai-add{
                            display:flex; align-items:center; justify-content:center; gap:8px;
                            width:auto; box-sizing:border-box;
                            /* 16px clears above (the tab row supplies it) and below,
                               per the spec's spacing table */
                            margin:0 auto 16px; height:36px; padding:0 20px;
                            border-radius:8px; cursor:pointer;
                            font-family:inherit; font-size:15.5px; font-weight:600;
                            color:#0F172A; background:#FACC15; border:1px solid #EAB308;
                            transition:background .15s;
                          }
                          .tai-add i{ font-size:15.5px; color:#0F172A !important; }
                          .tai-add:hover{ background:#FDE047; }
                          .tai-add:active{ background:#EAB308; }
                          .tai-add:focus-visible{ outline:2px solid #FDE047; outline-offset:3px; }
                          @media (prefers-reduced-motion: reduce){
                            .tai-add{ transition:none; }
                          }

                          .tai-sub{
                            margin:15px 0 9px; color:#7d8798; font-size:12.5px; font-weight:800;
                            text-transform:uppercase; letter-spacing:.08em;
                          }
                          .tai-more{
                            display:block; width:100%; margin-top:4px; padding:9px; border-radius:9px;
                            background:none; border:1px solid rgba(255,255,255,.1); cursor:pointer;
                            color:#9ccaff; font-family:inherit; font-size:14px; font-weight:700;
                          }
                          .tai-more:hover{ border-color:rgba(74,169,255,.5); background:rgba(74,169,255,.08); }
                          /* ══ NEW TASK / EDIT TASK MODAL ═══════════════════════════════════
                             Scoped to .tddm-task, which taiOpenForm adds after tddForm builds
                             the shell. tddForm is shared by fourteen callers — document forms,
                             access pickers, invites — so none of this may leak to them.

                             Each field carries its own colour in --fc, used by the leading tile
                             and by the focus ring, so the four rows are told apart at a glance
                             instead of being four identical grey boxes. */
                          /* THE DROPDOWN BUG: a <select>'s option list is painted by the OS,
                             not by this stylesheet. It defaulted to the light scheme — white
                             sheet — while the options inherited the modal's near-white text,
                             so the list came out white-on-white and unreadable.

                             color-scheme:dark is the fix that actually reaches the native
                             widget: it tells the platform to paint the popup, the scrollbar
                             and the date picker's own calendar in dark. The explicit option
                             colours below are the belt-and-braces for engines that honour
                             those but not the scheme hint. */
                          .tddm-task{ color-scheme:dark; }
                          .tddm-task .tai-inwrap .tddm-in{ color-scheme:dark; }
                          .tddm-task .tai-inwrap select.tddm-in option{
                            background-color:#111a2b; color:#eef2fa;
                            font-family:'Outfit','Inter',sans-serif;
                          }
                          .tddm-task .tai-inwrap select.tddm-in option:checked,
                          .tddm-task .tai-inwrap select.tddm-in option:hover{
                            background-color:#1d2740; color:#ffffff;
                          }
                          /* the date field's own picker button was a dark glyph on a dark
                             field; color-scheme flips it, this keeps it findable */
                          .tddm-task .tai-inwrap input[type="datetime-local"]::-webkit-calendar-picker-indicator{
                            filter:invert(1) opacity(.65); cursor:pointer;
                          }
                          .tddm-task .tai-inwrap input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
                            filter:invert(1) opacity(1);
                          }

                          .tddm-task .tddm-hd{ display:flex; align-items:flex-start; gap:13px; }
                          .tddm-task .tddm-hd-ic{
                            flex:0 0 auto; width:42px; height:42px; border-radius:12px;
                            display:grid; place-items:center;
                            background:linear-gradient(150deg,#A855F7,#7C3AED);
                            box-shadow:0 6px 16px rgba(124,58,237,.45);
                          }
                          .tddm-task .tddm-hd-ic i{ font-size:17px; color:#fff !important; }
                          .tddm-task .tddm-ttl{ font-size:20px !important; font-weight:800; color:#fff; }
                          .tddm-task .tddm-sub{ font-size:14px; color:#8b96ac; margin-top:3px; }

                          .tddm-task .tddm-fld{ margin-bottom:15px; }
                          .tddm-task .tddm-fld > label{
                            display:block; margin-bottom:7px;
                            font:800 10px/1 'Outfit','Inter',sans-serif;
                            letter-spacing:1px; text-transform:uppercase; color:#9aa4b5;
                          }
                          .tddm-task .tddm-fld .rq{ color:#ff6b7d; margin-left:2px; }

                          /* the tile sits INSIDE the field's frame, so the control reads as one
                             object rather than an icon parked next to a box */
                          .tddm-task .tai-inwrap{
                            display:flex; align-items:stretch; gap:0;
                            background:rgba(255,255,255,.04);
                            border:1.5px solid rgba(255,255,255,.12);
                            border-radius:11px; overflow:hidden;
                            transition:border-color .18s ease, box-shadow .18s ease;
                          }
                          .tddm-task .tai-inwrap:focus-within{
                            border-color:var(--fc,#A855F7);
                            box-shadow:0 0 0 3px color-mix(in srgb, var(--fc,#A855F7) 22%, transparent);
                          }
                          @supports not (color: color-mix(in srgb, red 50%, transparent)){
                            .tddm-task .tai-inwrap:focus-within{ box-shadow:0 0 0 3px rgba(168,85,247,.22); }
                          }
                          /* A rounded tile INSET in the field, not a full-height slab butted
                             against it — the reference shows a small square with the field's
                             background visible around it, which is what stops the control
                             looking like two joined halves. */
                          .tddm-task .tai-inic{
                            flex:0 0 auto; width:30px; height:30px; align-self:center;
                            margin-left:7px; border-radius:8px;
                            display:grid; place-items:center;
                            background:color-mix(in srgb, var(--fc,#A855F7) 26%, transparent);
                            border:1px solid color-mix(in srgb, var(--fc,#A855F7) 45%, transparent);
                          }
                          @supports not (color: color-mix(in srgb, red 50%, transparent)){
                            .tddm-task .tai-inic{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }
                          }
                          .tddm-task .tai-inic i{ font-size:14.5px; color:var(--fc,#A855F7) !important; }
                          /* the input itself loses its own frame — the wrapper carries it now */
                          .tddm-task .tai-inwrap .tddm-in{
                            flex:1 1 auto; min-width:0;
                            background:transparent !important; border:0 !important;
                            border-radius:0 !important; box-shadow:none !important;
                            padding:11px 12px !important;
                            color:#eef2fa !important; font-size:15px; font-weight:600;
                          }
                          .tddm-task .tai-inwrap .tddm-in:focus{ outline:none !important; }
                          .tddm-task .tddm-hint{ margin-top:6px; font-size:13px; color:#7d8798; }

                          /* footer: quiet Cancel, gold primary — matching the product's other
                             confirm dialogs rather than inventing a third button language */
                          .tddm-task .tddm-ft{ display:flex; justify-content:flex-end; gap:10px; }
                          .tddm-task .tddm-ft .tddm-btn{
                            padding:10px 18px; border-radius:10px;
                            font:800 12.5px/1 'Outfit','Inter',sans-serif; cursor:pointer;
                            background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
                            color:#cbd5e1;
                          }
                          .tddm-task .tddm-ft .tddm-btn:hover{ background:rgba(255,255,255,.11); }
                          .tddm-task .tddm-ft .tddm-btn.pri{
                            background:linear-gradient(135deg,#f3e2b3 0%,#e5c158 55%,#caa63f 100%);
                            border-color:rgba(255,255,255,.25); color:#1a1205;
                            box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 16px rgba(229,193,88,.3);
                          }
                          .tddm-task .tddm-ft .tddm-btn.pri:hover{ filter:brightness(1.05); }
                          @media (prefers-reduced-motion: reduce){
                            .tddm-task .tai-inwrap{ transition:none; }
                          }

                          .tai-empty{ padding:18px 4px; text-align:center; color:#8b96ac; font-size:14.5px; line-height:1.6; }
                          .tai-empty i{ display:block; font-size:20px; color:#3d4757; margin-bottom:8px; }

                          /* ==================================================================
                             AI CLASSIFICATION — Confirm / Change (event-engine spec §3)
                             HOUSBE AI files a document on upload: above 90% confidence it just
                             does it, between 60 and 90 it files it but ASKS, below 60 it refuses
                             to guess and the document lands unclassified. The user is always the
                             final say — one tap to confirm, two to correct.
                          ================================================================== */
                          .tcl-bar{
                            display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
                            margin-top:10px; padding:9px 11px; border-radius:9px;
                            background:rgba(246,184,63,.07); border:1px solid rgba(246,184,63,.4);
                          }
                          .tcl-bar.unclass{ background:rgba(255,138,60,.07); border-color:rgba(255,138,60,.45); }
                          .tcl-bar .ic{ color:#f6b83f; font-size:14px; margin-top:2px; flex:0 0 auto; }
                          .tcl-bar.unclass .ic{ color:#ff8a3c; }
                          .tcl-bar .tx{ flex:1; min-width:150px; color:#ffd894; font-size:13.5px; line-height:1.55; }
                          .tcl-bar.unclass .tx{ color:#ffc9a3; }
                          .tcl-bar .tx b{ color:#fff; font-weight:700; }
                          .tcl-bar .tx .ev{
                            display:block; margin-top:3px; color:#a9b4c6; font-size:12.5px;
                            font-style:italic; line-height:1.5;
                          }
                          .tcl-acts{ display:flex; gap:6px; flex:0 0 auto; }
                          .tcl-btn{
                            display:inline-flex; align-items:center; gap:5px;
                            padding:6px 11px; border-radius:7px; font-size:13.5px; font-weight:700;
                            font-family:inherit; cursor:pointer; white-space:nowrap; border:1px solid;
                          }
                          .tcl-btn.ok{ color:#06210f; background:#3ee98c; border-color:#3ee98c; }
                          .tcl-btn.ok:hover{ filter:brightness(1.08); }

                          /* The label is styled explicitly rather than inherited. An icon-only
                             green button is indistinguishable from a decoration, and inheriting
                             the colour left it one stray ancestor rule away from being invisible
                             against its own background. */
                          .tcl-btn .lb{ color:inherit; font-weight:800; letter-spacing:.1px; }
                          .tcl-btn.ok, .tcl-btn.ok .lb, .tcl-btn.ok i{ color:#06210f; }
                          .tcl-btn i{ font-size:13px; flex:0 0 auto; }

                          /* full-width primary action: cannot be squeezed to icon width, and
                             gives a proper tap target on a phone */
                          /* width:100% so a phone card can never squeeze it, max-width so a
                             desktop card does not stretch one button across 1100px */
                          .tcl-btn.wide{
                            width:100%; max-width:300px; justify-content:center;
                            padding:11px 14px; font-size:14px; border-radius:9px;
                            box-shadow:0 2px 10px rgba(62,233,140,.28);
                          }
                          .tcl-bar.unclass .tcl-acts{ width:100%; flex:1 1 100%; margin-top:3px; }
                          .tcl-bar .tx .hint{
                            display:block; margin-top:4px; color:#e7c9ad; font-size:12.5px;
                            line-height:1.5;
                          }
                          .tcl-btn.alt{ color:#e2e8f0; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
                          .tcl-btn.alt:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }

                          /* confidence chip shown beside a classified type */
                          .tcl-conf{
                            display:inline-flex; align-items:center; gap:4px; padding:2px 7px;
                            border-radius:5px; font-size:11.5px; font-weight:800; white-space:nowrap;
                            border:1px solid;
                          }
                          .tcl-conf.auto { color:#8ff3bd; background:rgba(62,233,140,.12); border-color:rgba(62,233,140,.45); }
                          .tcl-conf.prov { color:#ffd894; background:rgba(246,184,63,.12); border-color:rgba(246,184,63,.5); }
                          .tcl-conf.none { color:#ffb38a; background:rgba(255,138,60,.12); border-color:rgba(255,138,60,.5); }

                          /* the "Unclassified" tray — documents the AI refused to guess at */
                          .tcl-tray-h{
                            display:flex; align-items:center; gap:8px; margin:15px 0 9px;
                            color:#ffb38a; font-size:12px; font-weight:800;
                            text-transform:uppercase; letter-spacing:.08em;
                          }
                          .tcl-tray-h i{ font-size:13px; }
                          .tcl-tray-h span.n{
                            padding:1px 7px; border-radius:20px; font-size:11.5px;
                            background:rgba(255,138,60,.15); border:1px solid rgba(255,138,60,.45);
                          }

                          /* two-step Change flow stepper */
                          .tcl-steps{ display:flex; align-items:center; gap:9px; margin:0 0 14px; }
                          .tcl-step{ display:flex; align-items:center; gap:6px; color:#69738a; font-size:13px; font-weight:700; }
                          .tcl-step .n{
                            width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
                            font-size:12px; border:1px solid rgba(139,150,172,.4); background:rgba(255,255,255,.03);
                          }
                          .tcl-step.on{ color:#ffd894; }
                          .tcl-step.on .n{ border-color:rgba(246,184,63,.7); background:rgba(246,184,63,.14); color:#ffd894; }
                          .tcl-step.done{ color:#8ff3bd; }
                          .tcl-step.done .n{ border-color:rgba(62,233,140,.6); background:rgba(62,233,140,.14); color:#3ee98c; }
                          .tcl-steps .sep{ flex:1; height:1px; background:rgba(255,255,255,.1); }

                          /* "what moved" confirmation panel */
                          .tcl-done .hd{
                            display:flex; align-items:center; gap:10px; margin-bottom:13px;
                            color:#8ff3bd; font-size:16px; font-weight:800;
                          }
                          .tcl-done .hd i{ font-size:19px; }
                          .tcl-done .row{
                            display:flex; align-items:baseline; justify-content:space-between; gap:12px;
                            padding:8px 0; border-top:1px solid rgba(255,255,255,.07);
                          }
                          .tcl-done .row:first-of-type{ border-top:none; }
                          .tcl-done .row .k{ color:#8b96ac; font-size:14px; }
                          .tcl-done .row .v{ color:#e6edf8; font-size:14px; font-weight:700; text-align:right; }