/* ============================================================================
   legacy-theme.css — Legacy Properties DOCUMENT design system, applied to the
   agent CRM only.
   ----------------------------------------------------------------------------
   Phase 1, 2026-09-15. Purpose: make crm.html look like it came out of the same
   office as the tour briefs, route sheets and CMAs — warm paper, near-black
   ink, the orange/teal/gold brand gradient, Jost for words and Roboto Slab for
   numbers.

   SCOPING — this is the rule that protects live clients.
   legacy-ds.css is shared by crm.html, seller.html and dashboard.html. Only
   every rule in this file is written as

       body.legacy-docskin …

   which outranks the plain `.ds{…}` token block in legacy-ds.css by
   specificity without deleting or editing it. `legacy-docskin` is an explicit opt-in:
   a surface gets the document system only if its <body> carries that class AND
   the page links this file. Both, or nothing happens.

   Phase 1 (2026-09-15) put only crm.html on it, via body.ds-appshell, so the
   client portal could not move while the CRM was proven out. Phase 2 opted the
   client surfaces in deliberately, because the portal is now meant to match the
   route sheet and CMA too. body.ds-appshell still exists and still does its own
   job in legacy-ds.css (hiding the retired nav); it is simply no longer the
   theming hook.

   THE HOOK NAME MUST NOT ALREADY BE A COMPONENT CLASS.
   Phase 2 first used `ds-doc` — which was already the document ROW inside the
   portal's Documents card (legacy-ds.css:477: display:flex, padding, a
   border-bottom). Putting that on <body> turned the entire page into a flex
   row: the agent preview bar, which agent-console.js inserts as body's first
   child, became a shrink-to-fit flex item on the left, and the portal was
   pushed to the right. It shipped, and it broke a live client portal until
   Sara spotted it.

   `legacy-docskin` was checked against every .css, .js and .html under public/
   before use — zero occurrences. test/theme-hook.test.mjs now enforces that
   permanently: the hook may never be styled as a component anywhere.

   Opted in: crm.html, seller.html, dashboard.html, collection.html.
   NOT opted in, and must never be: the public marketing site, which reads
   legacy.css and legacy-ui.css and keeps its warm parchment brand.

   GEOMETRY. Sections 1-10 change only color, background, background-image,
   border-color, font-family, font-weight, letter-spacing, text-transform,
   box-shadow and outline — no padding, size, radius, display or position.
   Sections 11 and 12 are the masthead and the name blocks, which are by
   definition typographic, so they do set font-size and weight. They still
   introduce no new markup: the masthead mark is a ::before on the existing
   wordmark.

   LOAD-BEARING THINGS THIS FILE DOES NOT TOUCH: every class name, id, data-*
   and aria-* attribute; `.on` in all its forms (it is the router); the
   `.crm-view` show/hide rules; body.ds-appshell's own display:none rules for
   the retired nav; the `[data-stg="…"]` selector list, whose values come
   straight out of the database — section 4 changes the COLOR each one resolves
   to and nothing else; and the per-deal calendar palette in legacy-client.js,
   which is functional rather than decorative.

   Loaded from crm.html only, after legacy-ds.css.
   ========================================================================== */


/* ============================ 1. SELF-HOSTED FACES =========================
   No Google Fonts @import — there are already two render-blocking third-party
   imports in this stack. These are the Fontsource builds, served from /fonts/.
   Jost: SIL Open Font License 1.1 (fonts/LICENSE-jost.txt)
   Roboto Slab: Apache License 2.0 (fonts/LICENSE-roboto-slab.txt)
   ========================================================================== */

@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jost-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/jost-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/jost-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/jost-latin-700-normal.woff2') format('woff2');}

@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-slab-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-slab-latin-700-normal.woff2') format('woff2');}


/* ============================ 2. THE PALETTE ===============================
   Prefix is --leg-. Deliberately NOT --lg- (legacy-ui.css's seasonal palette)
   and NOT --lp- (legacy-app.css). A collision on either would repaint the
   public marketing site.

   Declared on :root so the values exist everywhere, but NOTHING is applied
   from here — every application is scoped in section 3 onward. Defining a
   variable paints nothing on its own.
   ========================================================================== */

:root{
  --leg-ink:#1b1b1b;          /* headings, primary text, primary button fill */
  --leg-ink-2:#4a4744;        /* secondary text */
  --leg-mute:#8a847c;         /* DECORATION ONLY — 3.70:1, never small text */
  /* --leg-faint carries caption text, including the role-and-licence line under
     every name, so it must clear 4.5:1 on all THREE surfaces a caption can land
     on, not just white. #78716a cleared white at 4.81 but missed on the page
     field (4.01) and the warm band (4.35). Corrected 2026-09-15 — now 5.74
     white / 4.79 page / 5.19 warm. */
  --leg-faint:#6c655e;        /* the readable mute — caption TEXT */
  --leg-line:#d9d2c7;         /* borders, table row rules */
  --leg-hair:#e8e2d8;         /* hairlines */
  --leg-warm:#f7f3ec;         /* warm band / hover fill */
  --leg-page:#efeae1;         /* page field */
  --leg-panel:#ffffff;        /* cards */
  --leg-teal:#1fbfa8;
  /* --leg-orange is the bright brand accent. It is used for LARGE ELEMENTS
     ONLY — stage rails, the calendar's today rule — so its floor is 3:1, not
     4.5:1. #e36a00 missed even that on the page field (2.77). Corrected
     2026-09-15 — now 3.80 white / 3.17 page / 3.43 warm, and still clearly
     the bright orange rather than --leg-orange-deep.
     It must never carry text: white on it is only 3.80. For anything with a
     label on it, use --leg-orange-deep (white text 4.94). */
  --leg-orange:#d66000;       /* bright accent — LARGE ELEMENTS ONLY, never text */
  --leg-orange-deep:#b5541c;  /* accent as TEXT or as a button fill */
  --leg-gold:#f7b52c;
  --leg-yellow:#ffe14a;
  --leg-success:#0f8a78;
  --leg-warn:#c05500;
  --leg-danger:#b3261e;
  --leg-highlight:#fff4bf;
  --leg-highlight-edge:#f2a524;
  --leg-gradient:linear-gradient(90deg,#1fbfa8 0%,#8e9046 30%,#e36a00 58%,#f2a524 80%,#ffe14a 100%);
  --leg-sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --leg-num:'Roboto Slab',Georgia,serif;
}


/* ================ 3. RE-POINT THE CRM'S LIVE TOKENS ========================
   THIS IS THE WHOLE RESTYLE. Every one of the 767 var() uses in legacy-ds.css
   resolves through these names, so re-pointing them here re-skins every
   component without a single component rule being rewritten.

   --ink-dark was navy #1d2d3d and is now ink: every .ds-btn--primary goes from
   navy to near-black.
   --muted takes --leg-ink-2 (9.23:1) and --faint takes --leg-faint (4.81:1 on
   white) — both readable. --leg-mute is deliberately NOT mapped to any token
   here; it is used only as a stage rail color in section 4, never as text.
   ========================================================================== */

body.legacy-docskin .ds,
body.legacy-docskin .ds{
  --page:var(--leg-page);        --panel:var(--leg-panel);   --band:var(--leg-warm);
  --ink:var(--leg-ink);          --ink-dark:var(--leg-ink);  --muted:var(--leg-ink-2);
  --faint:var(--leg-faint);
  --border:var(--leg-line);      --rule:var(--leg-line);     --hair:var(--leg-hair);
  --track:#ede7dd;
  --inv-label:var(--leg-gold);   --inv-sub:var(--leg-line);  --avatar:var(--leg-ink);
  --amber:var(--leg-orange-deep); --amber-bg:#fdf0e3;
  --amber-bd:var(--leg-highlight-edge); --amber-ink:#7a3a06;
  --good:var(--leg-success);     --alert:var(--leg-danger);
  --cond:var(--leg-sans);        --body:var(--leg-sans);
}

/* The page field itself. legacy-ds.css sets body.legacy-docskin{background:var(--page)}
   but --page is defined inside .ds, not on body, so body reads the legacy
   parchment. Re-point it here so the field behind the screen matches.

   The font is here for the same reason: legacy-app.css sets
   body.lp-restyle{font-family:var(--lp-sans)} and crm.html re-points --lp-sans
   at Manrope, neither of which is in scope this pass. --body only reaches
   things inside a .ds wrapper, so without this line anything rendered at body
   level on this page stays Manrope. Scoped to legacy-docskin, so it reaches only the
   surfaces that opt in. (The six overlays legacy-client.js appends to <body>
   now read --leg-* tokens after the Phase 2 sweep.) */
body.legacy-docskin{ background:var(--leg-page); font-family:var(--leg-sans); }


/* ============================ 4. STAGE COLORS ==============================
   Same selectors, same order, same specificity shape as legacy-ds.css:62-70 —
   only the hex changes. These values come out of the database as
   data-stg="…"; nothing here renames, merges, reorders or removes a selector.

   Contrast is measured against the three surfaces a rail can sit on: panel
   #ffffff, page #efeae1, warm band #f7f3ec. Threshold for rails, stripes and
   swatches is 3:1 (large non-text element). Two values miss on the page field
   and are flagged in the report rather than silently corrected.
   ========================================================================== */

body.legacy-docskin .ds [data-stg]{--stg:#8a847c;}
body.legacy-docskin .ds [data-stg="new"],
body.legacy-docskin .ds [data-stg="sphere"]{--stg:#8a847c;}                    /* 3.70 / 3.09 / 3.35 */
body.legacy-docskin .ds [data-stg="nurture"]{--stg:#808240;}                   /* 4.05 / 3.38 / 3.66  corrected */
body.legacy-docskin .ds [data-stg="consult"],
body.legacy-docskin .ds [data-stg="signed"],
body.legacy-docskin .ds [data-stg="preparing"]{--stg:#0f8a78;}                 /* 4.26 / 3.56 / 3.85 */
body.legacy-docskin .ds [data-stg="active"],
body.legacy-docskin .ds [data-stg="on_market"],
body.legacy-docskin .ds [data-stg="showing_homes"]{--stg:#1b6f8a;}             /* 5.70 / 4.75 / 5.15 */
body.legacy-docskin .ds [data-stg="reviewing_offers"],
body.legacy-docskin .ds [data-stg="writing_offers"],
body.legacy-docskin .ds [data-stg="offer"]{--stg:#b5541c;}                     /* 4.94 / 4.12 / 4.47 */
body.legacy-docskin .ds [data-stg="under_contract"],
body.legacy-docskin .ds [data-stg="in_escrow"]{--stg:var(--leg-orange);}       /* 3.80 / 3.17 / 3.43  corrected */
body.legacy-docskin .ds [data-stg="closed"]{--stg:#1b1b1b;}                    /* 17.22 / 14.38 / 15.57 */

/* Previously MISSING and silently rendering the default grey. legacy-client.js
   emits these two at line 4941 for the deadline rails. Added with no other
   change. */
body.legacy-docskin .ds [data-stg="closing"]{--stg:#1b6f8a;}                   /* 5.70 / 4.75 / 5.15 */
body.legacy-docskin .ds [data-stg="contingencies"]{--stg:#1b6f8a;}             /* 5.70 / 4.75 / 5.15 */


/* ============================ 5. NUMERALS ==================================
   Roboto Slab is for NUMBERS ONLY, never sentences. Each selector below was
   checked against its render site and holds a bare figure, with any words in a
   SIBLING element.

   Deliberately NOT touched because they mix a number with a word — listed in
   the report instead:
     .ds-dl-days   renders chip(r), e.g. "3 days" / "Overdue"
     .ds-pill      holds side and agent names ("Buyer", "Sara", "At risk")
   ========================================================================== */

body.legacy-docskin .ds-cell .fig,                    /* KPI figure; .sub holds the words   */
body.legacy-docskin .ds .kpi-card .v,                 /* KPI value; .l holds the label      */
body.legacy-docskin .ds-calday-h .num,                /* day number; .dow holds the weekday */
body.legacy-docskin .ds-lprice .num,                  /* listing price; .st holds status    */
body.legacy-docskin .ds-dcard .val .num,              /* deal price; .st holds status       */
body.legacy-docskin .ds-dt-r .val,                    /* deal table value                   */
body.legacy-docskin .ds-dealcard-price{               /* all-deals card price               */
  font-family:var(--leg-num);
  font-weight:700;
}


/* ============================ 6. THE KICKER ================================ */

body.legacy-docskin .ds-kicker{
  color:var(--leg-orange-deep);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}


/* ========================= 7. THE GRADIENT RULE ============================
   The single most recognizable thing about the documents. Nothing else on the
   page gets it.

   Drawn as an absolutely-positioned ::after on .ds-appbar-wrap, which is
   already position:sticky (legacy-ds.css:231) and therefore already a
   containing block for absolutely-positioned descendants — so no existing
   element is repositioned and no layout shifts. It overlays the bottom 4px of
   the topbar rather than adding height.

   Note: this file deliberately does NOT set position:relative on the wrap.
   Sticky already establishes the containing block, and overriding it to
   relative would break the sticky topbar.
   ========================================================================== */

/* Drawn on .ds-topbar rather than the wrap, so the rule is exactly as wide as
   the black bar above it. On the desk the topbar is full width and so is the
   rule; on the portal .ds-portal-top is max-width:1120px centred, and the rule
   now matches instead of running full-bleed past the bar on both sides.
   position:relative here is safe and shifts nothing — .ds-topbar had no
   position, and the sticky lives on the wrap above it. */
body.legacy-docskin .ds-topbar{ position:relative; }
body.legacy-docskin .ds-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:4px;
  background:var(--leg-gradient);
  pointer-events:none;
}


/* ============================ 8. BUTTONS ===================================
   Both .ds-btn and .btn are live and appear side by side in the same screens.
   Inside body.legacy-docskin they resolve to one system. Color and font only —
   every padding, font-size and radius is left exactly as it was.
   ========================================================================== */

body.legacy-docskin .ds-btn,
body.legacy-docskin .btn,
body.legacy-docskin .btn-ink,
body.legacy-docskin .btn-brass,
body.legacy-docskin .btn-ghost,
body.legacy-docskin .btn-link{ font-family:var(--leg-sans); }

body.legacy-docskin .ds-btn{
  background:transparent; border-color:var(--leg-line); color:var(--leg-ink);
}
body.legacy-docskin .ds-btn:hover:not(:disabled){ background:var(--leg-warm); }

body.legacy-docskin .ds-btn--primary{
  background:var(--leg-ink); color:#ffffff; border-color:var(--leg-ink);
}
body.legacy-docskin .ds-btn--primary:hover:not(:disabled){ background:#000000; }

/* The label was #fdf0e3, a warm off-white, which measured 4.41 against this
   fill — just under the 4.5 button text needs. Plain white is 4.94 and the
   difference is invisible at label size. */
body.legacy-docskin .ds-btn--amber{
  background:var(--leg-orange-deep); color:#ffffff; border-color:var(--leg-orange-deep);
}
body.legacy-docskin .ds-btn--amber:hover:not(:disabled){ background:#964414; }

body.legacy-docskin .btn-ink{ background:var(--leg-ink); color:#ffffff; }
body.legacy-docskin .btn-ink:hover{ background:#000000; }

body.legacy-docskin .btn-brass{ background:var(--leg-orange-deep); color:#ffffff; }
body.legacy-docskin .btn-brass:hover{ background:#964414; }

body.legacy-docskin .btn-ghost{
  background:transparent; border-color:var(--leg-line); color:var(--leg-ink);
}
body.legacy-docskin .btn-ghost:hover{ border-color:var(--leg-ink); }

body.legacy-docskin .btn-link{
  background:none; color:var(--leg-orange-deep); border-color:var(--leg-orange-deep);
}
body.legacy-docskin .btn-link:hover{ color:var(--leg-ink); border-color:var(--leg-ink); }

/* A disabled button must never read as a live one. legacy-ds.css:112 already
   does this for .ds-btn (2026-09-15) and it is left exactly as written; .btn
   had no disabled state at all, so it gets the same treatment here. Verified
   against the new palette: a disabled .ds-btn--primary drops from 17.22:1 to a
   visibly washed fill and the cursor changes. */
body.legacy-docskin .btn:disabled,
body.legacy-docskin .btn[disabled]{ opacity:.45; cursor:not-allowed; }


/* ============================ 9. FOCUS =====================================
   Every focusable element gets a visible ring. :focus-visible so a mouse click
   does not leave a ring behind, plus a plain :focus fallback for older engines.
   The ring is orange-deep: 4.94:1 on panel, 4.12:1 on the page field, 3.49:1
   on an ink button fill — above the 3:1 non-text threshold on all three.
   ========================================================================== */

body.legacy-docskin a:focus-visible,
body.legacy-docskin button:focus-visible,
body.legacy-docskin input:focus-visible,
body.legacy-docskin select:focus-visible,
body.legacy-docskin textarea:focus-visible,
body.legacy-docskin summary:focus-visible,
body.legacy-docskin [tabindex]:focus-visible{
  outline:2px solid var(--leg-orange-deep);
  outline-offset:2px;
}


/* ================== 10. HARDCODED REMNANTS IN legacy-ds.css ================
   NOT part of sections 1-9 of the brief — added because without it the restyle
   has cool-grey and blue islands in it. legacy-ds.css hardcodes these hexes
   rather than reading a token, so section 3 cannot reach them. Every rule here
   is color-only, scoped, and changes nothing else.

   Only CRM-visible components are re-pointed. The portal-only families
   (.ds-road-dot.cat-*, .ds-doc-ic[data-cat], .ds-esc-*, .ds-team-*, .ds-chan-*)
   are deliberately left alone — they render on seller.html, which must not move.
   ========================================================================== */

/* row and card hovers — were #eeeef0 cool grey */
body.legacy-docskin .ds-dcard:hover,
body.legacy-docskin .ds-ctbl-r:hover,
body.legacy-docskin .ds-lcard:hover,
body.legacy-docskin .ds-ltbl-r:hover,
body.legacy-docskin .ds-bsaved-row:hover,
body.legacy-docskin .ds-calev:hover{ background:var(--leg-warm); }

/* selected contact row — was #eef2f6 pale blue */
body.legacy-docskin .ds-ctbl-r.on{ background:var(--leg-highlight); }

/* a deal that is due — was #f2e6d3 */
body.legacy-docskin .ds-dcard.due:hover{ background:#fdf0e3; }

/* inline note boxes — were a blue-on-blue card */
body.legacy-docskin .ds-notebox,
body.legacy-docskin .ds-lnote{
  border-color:var(--leg-highlight-edge);
  background:var(--leg-highlight);
  color:var(--leg-ink);
}

/* "today" in the calendar — was #2C6B9A / #DCEBF6 / #1C4A70 blue */
body.legacy-docskin .ds-calday.today{ box-shadow:inset 0 3px 0 0 var(--leg-orange); }
body.legacy-docskin .ds-calday.today .ds-calday-h{ background:var(--leg-highlight); }
body.legacy-docskin .ds-calday.today .ds-calday-h .dow,
body.legacy-docskin .ds-calday.today .ds-calday-h .num{ color:var(--leg-ink); }

/* default event rail when no category color is bound */
body.legacy-docskin .ds-calev::before{ background:var(--_c,#8a847c); }

/* links inside the command centre and listing cards — were #416180 */
body.legacy-docskin .cd-row a,
body.legacy-docskin .ds-lcard .rost-links a{ color:var(--leg-orange-deep); }

/* buyer-match photo placeholder — was a cool grey hatch */
body.legacy-docskin .ds-bmatch-frame{
  background-image:repeating-linear-gradient(135deg,var(--leg-hair) 0 14px,var(--leg-warm) 14px 28px);
}

/* the small caption under a hero figure — was #5a4a30 */
body.legacy-docskin .ds-hero .cx{ color:var(--leg-faint); }


/* ========================= 11. THE BLACK MASTHEAD ==========================
   The first thing on every document: a near-black band carrying the gradient-
   bordered L mark and LEGACY in white caps, with the brand gradient rule
   directly beneath it (section 7 already draws that rule).

   NO MARKUP CHANGE. The mark is a ::before on the existing .ds-wordmark, using
   the icon already in the repo at /art/legacy-icon-192.png — the same mark
   printed on the CMA and the route sheet. So this works on the CRM and the
   portal alike without either page gaining an element.

   Everything else in the bar has to be re-lit for a dark ground, which is what
   the rest of this section does.
   ========================================================================== */

body.legacy-docskin .ds-appbar-wrap .ds-topbar,
body.legacy-docskin .ds-topbar{
  background:var(--leg-ink);
  border-bottom-color:var(--leg-ink);
}

/* THE WORDMARK IS ARTWORK NOW, NOT TYPE.
   Sara, 2026-09-22: "Update the mobile with our new logo."
   /art/legacy-wordmark-cream.png (620x133) is the current wordmark, drawn in
   cream for exactly this dark ground. It replaces the letter-spaced type that
   stood in for it, and sits beside the L mark as the same lockup the seller
   intake's footer already uses.

   Still no markup change, so the CRM and the portal both pick it up: the mark
   is ::before and the wordmark is ::after, with the element's own "LEGACY"
   text collapsed by font-size:0. Collapsed rather than display:none on
   purpose — the text stays in the accessibility tree, so a screen reader still
   announces the link as "Legacy" while the eye gets the artwork. */
body.legacy-docskin .ds-wordmark{
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-size:0;
  line-height:0;
}
body.legacy-docskin .ds-wordmark::before{
  content:"";
  width:30px; height:30px;
  flex:none;
  background:url('/art/legacy-icon-192.png') center/contain no-repeat;
}
body.legacy-docskin .ds-wordmark::after{
  content:"";
  display:block;
  height:17px;
  /* 620x133 — width follows the ratio so the artwork is never squashed. */
  width:79px;
  flex:none;
  background:url('/art/legacy-wordmark-cream.png') left center/contain no-repeat;
}
/* A phone gives the bar less room than anything else, and the mark alone reads
   at a glance. Trim both a little rather than let the lockup crowd the nav. */
@media (max-width:760px){
  body.legacy-docskin .ds-wordmark{ gap:10px; }
  body.legacy-docskin .ds-wordmark::before{ width:26px; height:26px; }
  body.legacy-docskin .ds-wordmark::after{ height:15px; width:70px; }
}

/* the rest of the bar, re-lit for the dark ground */
body.legacy-docskin .ds-topbar .ds-prod{ color:#b8b2a8; }
body.legacy-docskin .ds-topbar .ds-vr{ background:rgba(255,255,255,.22); }
body.legacy-docskin .ds-topbar .ds-navpill{ color:#c9c4bd; }
body.legacy-docskin .ds-topbar .ds-navpill:hover{ color:#ffffff; }
body.legacy-docskin .ds-topbar .ds-navpill.on{ color:var(--leg-ink); background:var(--leg-gold); }
body.legacy-docskin .ds-topbar .ds-more > summary{ color:#c9c4bd; }
body.legacy-docskin .ds-topbar .ds-more[open] > summary{ color:#ffffff; }

body.legacy-docskin .ds-topbar .ds-search{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.20);
}
body.legacy-docskin .ds-topbar .ds-search input{ color:#ffffff; }
body.legacy-docskin .ds-topbar .ds-search input::placeholder{ color:#9b958c; }
body.legacy-docskin .ds-topbar .ds-search .k{ color:#9b958c; }

/* buttons sitting on the black bar. A primary button is an ink fill, which is
   invisible here, so on the masthead it becomes the accent instead. */
body.legacy-docskin .ds-topbar .ds-btn{
  background:transparent; border-color:rgba(255,255,255,.28); color:#ffffff;
}
body.legacy-docskin .ds-topbar .ds-btn:hover:not(:disabled){ background:rgba(255,255,255,.12); }
/* The portal's "Message your agent" lives here, so it carries a label and the
   fill has to clear 4.5:1 against white text — not the 3:1 a bare fill needs.
   This was --leg-orange, which is only 3.80 behind white; --leg-orange-deep is
   4.94, and still reads as the accent against the black bar (3.49). */
body.legacy-docskin .ds-topbar .ds-btn--primary{
  background:var(--leg-orange-deep); border-color:var(--leg-orange-deep); color:#ffffff;
}
body.legacy-docskin .ds-topbar .ds-btn--primary:hover:not(:disabled){ background:#964414; }

body.legacy-docskin .ds-topbar .ds-user{ color:#ffffff; }
body.legacy-docskin .ds-topbar .ds-portal-addr{ color:#b8b2a8; }

/* the focus ring has to lift off black, not sink into it */
body.legacy-docskin .ds-topbar a:focus-visible,
body.legacy-docskin .ds-topbar button:focus-visible,
body.legacy-docskin .ds-topbar input:focus-visible,
body.legacy-docskin .ds-topbar summary:focus-visible{ outline-color:var(--leg-gold); }


/* ======================== 12. NAMES, AS ON THE CMA =========================
   On the documents a name is the loudest thing on the page: a small gold
   letterspaced kicker above ("PREPARED FOR CHERI WATSON"), then the name set
   large and light, then role and licence quietly beneath it.

   Three places carry a name in this product, and they now read the same way:
     .ds-headline   the portal hero — the property, already large
     .ld-head h2    the contact card — who this person is
     .ds-team-nm    the portal's "your team" block — the agent's signature
   ========================================================================== */

/* the contact's name on the contact card */
body.legacy-docskin .ld-head h2{
  font-family:var(--leg-sans);
  font-weight:300;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--leg-ink);
}
body.legacy-docskin .ld-head-meta{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--leg-faint);
}

/* the portal hero — the property address */
body.legacy-docskin .ds-headline{
  font-family:var(--leg-sans);
  font-weight:300;
  letter-spacing:-.01em;
}

/* the agent signature block in the portal's team panel */
body.legacy-docskin .ds-team-nm{
  font-family:var(--leg-sans);
  font-weight:600;
  font-size:21px;
  line-height:1.15;
  color:var(--leg-ink);
}
body.legacy-docskin .ds-team-role{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--leg-faint);
}
body.legacy-docskin .ds-team-id{ color:var(--leg-faint); }

/* the client's own name where the portal greets them */
body.legacy-docskin .ds-portal-sub{ color:var(--leg-ink-2); }


/* ================== 13. THE SECOND STATUS PALETTE ==========================
   crm.html's inline block carries its own 7-colour vocabulary on --c, keyed
   off data-people-tab / data-rost / data-lst / data-filter. It predates the
   stage colours and disagrees with them: the roster pills came out navy,
   green, brown and purple against a document palette that contains none of
   those. Two colour languages for one idea is the bug shape this repo keeps
   hitting.

   Re-pointed here rather than edited there, so crm.html's own block stays
   untouched; these selectors carry a body class, so they win on specificity.
   Values are the section 4 stage colours, so a status now means the same
   colour whether it is a pill, a rail or a stripe.
   ========================================================================== */

body.legacy-docskin [data-people-tab="leads"],
body.legacy-docskin [data-filter="new"],
body.legacy-docskin [data-rost="pending"],
body.legacy-docskin [data-lst="pending"]      { --c:#1b6f8a; }   /* was navy   */
body.legacy-docskin [data-people-tab="clients"],
body.legacy-docskin [data-rost="active"],
body.legacy-docskin [data-lst="active"]       { --c:#0f8a78; }   /* was green  */
body.legacy-docskin [data-people-tab="past"]  { --c:var(--leg-faint); }   /* was brown */
body.legacy-docskin [data-people-tab="sphere"],
body.legacy-docskin [data-rost="preparing"],
body.legacy-docskin [data-lst="preparing"]    { --c:#808240; }   /* was purple */
body.legacy-docskin [data-lst="offers"],
body.legacy-docskin [data-filter="warm"]      { --c:#b5541c; }   /* was gold   */
body.legacy-docskin [data-rost="closed"],
body.legacy-docskin [data-lst="closed"]       { --c:#1b1b1b; }   /* was charcoal */
body.legacy-docskin [data-lst="archived"],
body.legacy-docskin [data-filter="hot"]       { --c:#b3261e; }   /* was red    */


/* ===================== 14. NO DESIGN FRAME =================================
   The 2026 slate system wrapped every screen in a hairline rectangle with
   little crop-mark crosses at its four corners (.ds-screen's border and
   .ds-corners). That is the older visual language and it appears nowhere on
   the route sheet or the CMA — those are documents, not framed artboards.

   Removed in CSS rather than by deleting markup, so it stays reversible and
   no page has to change. .ds-corners is purely decorative — absolutely
   positioned and pointer-events:none — so hiding it cannot move anything.
   The frame is turned off with border-color rather than border:none so the
   1px is still occupied and nothing reflows by a pixel; the white panel keeps
   its definition against the warm page field on its own.
   ========================================================================== */

body.legacy-docskin .ds-corners{ display:none; }
body.legacy-docskin .ds-screen{ border-color:transparent; }


/* ===================== 15. SHARED SITE OVERLAYS ============================
   The sign-in sheet, toasts and .lg-btn buttons come from legacy-ui.css, the
   PUBLIC site's stylesheet, and read its --lg-* tokens: Cormorant, JetBrains
   Mono, Manrope and a gold accent. On a page opted into the document system
   they sat over the house style unchanged — the buyer dashboard's "See your
   dashboard" sign-in sheet was the most visible case (2026-09-25).

   Re-pointed here, scoped to legacy-docskin, so the public site (which is
   deliberately NOT on the house style) keeps its own look.
   ========================================================================== */

body.legacy-docskin{
  --lg-serif:var(--leg-sans); --lg-sans:var(--leg-sans); --lg-mono:var(--leg-sans);
  --lg-c2:var(--leg-gold);    /* eyebrows and ticks on the dark sheet */
}
body.legacy-docskin .lg-sheet__title{ font-style:normal; font-weight:500; }
body.legacy-docskin .lg-btn--gold{ background:var(--leg-orange-deep); color:#ffffff; }

/* The portal's "What I need from you" rows render as buttons, which do not
   inherit the body font, so they fell back to Manrope. */
body.legacy-docskin .ds-action-label,
body.legacy-docskin .ds-action-when{ font-family:var(--leg-sans); }