/* ===========================================================================
   RMS — approved facelift design.

   Ported from the design prototype's globals.css rather than re-expressed in
   Bootstrap utilities. The prototype is the reviewed and approved artefact;
   restating its look through another framework's components would drift from
   what was signed off and would need re-reviewing to no user-visible benefit.

   Metronic still supplies the reset, grid, icon font and form controls, and
   this sheet loads after style.bundle.css so these rules win where they
   overlap.
   =========================================================================== */

:root {
    --rms-primary: #f26a21;
    --rms-secondary: #074367;
    --rms-tertiary: #0095e8;
    --rms-info: #3445e5;
    --rms-success: #09852e;
    --rms-error: #d92121;
    --rms-bg: #eff0f3;
    --rms-text: #424242;
    --rms-muted: rgba(0, 0, 0, .537);
    --rms-line: #e0e0e0;
    --rms-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    --rms-card-shadow: 0 3px 14px rgba(7, 67, 103, .07);
    --rms-card-border: #dfe5e9;
}

body {
    /* The facelift sets Roboto; Metronic sets Inter on body and would otherwise win
       here, since this sheet only overrides what it names. */
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: var(--rms-bg);
    color: var(--rms-text);
    font-size: 14px;
    overflow-x: hidden;
}

/* The ground has to be claimed a second time, at class strength.

   style.bundle.css paints it through the body's class rather than through `body` --
   `.app-blank { background-color: var(--bs-app-blank-bg-color) }` -- and a class selector
   outranks the bare `body` rule above however the sheets are ordered. Left alone, the app takes
   Metronic's ground instead of the facelift's: #fcfcfc under data-bs-theme=light, #0F1014 under
   dark. On the MAUI host on a phone in Dark Mode that read as a black page behind white cards,
   the cards being light only because this sheet hardcodes their colours.

   html carries it too so the canvas matches the page. Only the MAUI host sets a background on
   html at all (app.css's `html,body`), and the canvas is what iOS paints in the rubber-band
   strip past either end of the document -- white against a grey page without this. */
html,
html body.app-blank {
    background: var(--rms-bg);
}

/* Blazor.Shared/css/app.css pins `body.app-blank` and `#app` to height:100% + overflow:hidden,
   because H360's shell scrolls its own inner pane. RMS scrolls the document instead — .rms-main
   is min-height:100vh under a fixed appbar — so that rule leaves the page unscrollable: content
   past the first viewport is simply unreachable. Only the MAUI host loads app.css (RMS.Web does
   not), so this only ever bit mobile. Undone here rather than by dropping the app.css link,
   which also carries the locally bundled Material Icons @font-face needed offline.

   Prefixed with `html` purely for specificity: app.css uses the same `body.app-blank` selector, so
   an identical one would only win if this sheet loaded later — which is not something a stylesheet
   should have to depend on, and the MAUI host caches its index.html besides.

   overflow-y only: the body rule above deliberately keeps overflow-x hidden. */
html body.app-blank {
    height: auto;
    overflow-y: visible;
}

html body.app-blank #app {
    height: auto;
    overflow: visible;
}

/* --- Shell ---------------------------------------------------------------- */

.rms-appbar {
    align-items: center;
    background: #fff;
    box-shadow: var(--rms-shadow);
    color: #808080;
    display: flex;
    height: 64px;
    left: 0;
    padding: 0 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 40;
}

.rms-appbar__brand {
    color: var(--rms-secondary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 0 6px;
}

.appbar-spacer {
    flex: 1;
}

.icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: inherit;
    display: flex;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.icon-button:hover {
    background: rgba(0, 0, 0, .05);
}

.rms-appbar__user {
    color: #60727c;
    font-size: 12px;
}

.avatar {
    align-items: center;
    background: transparent;
    border: 1px solid var(--rms-success);
    border-radius: 50%;
    color: var(--rms-success);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    margin-left: 12px;
    width: 40px;
}

.rms-drawer {
    background: #fff;
    bottom: 0;
    box-shadow: var(--rms-shadow);
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform .18s ease;
    width: 240px;
    z-index: 50;
}

.rms-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    align-items: center;
    color: var(--rms-secondary);
    display: flex;
    font-size: 18px;
    font-weight: 700;
    height: 64px;
    padding: 0 24px;
}

.rms-drawer nav {
    display: flex;
    flex-direction: column;
    height: calc(100% - 64px);
}

.rms-drawer nav > a,
.drawer-bottom button {
    background: transparent;
    border: 0;
    color: var(--rms-text);
    display: block;
    min-height: 40px;
    padding: 10px 28px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.rms-drawer nav > a:hover,
.drawer-bottom button:hover {
    background: rgba(0, 0, 0, .04);
}

.rms-drawer nav > a.active {
    background: #f2f2f2;
    color: var(--rms-primary);
}

.drawer-bottom {
    margin-top: auto;
}

.drawer-bottom hr {
    border: 0;
    border-top: 1px solid var(--rms-line);
    margin: 0;
}

.drawer-bottom small {
    display: block;
    font-weight: 500;
    padding: 7px 24px;
    text-align: right;
}

.drawer-scrim {
    display: none;
}

.rms-main {
    min-height: 100vh;
    padding-top: 64px;
    transition: margin .18s ease;
}

.drawer-open .rms-main {
    margin-left: 240px;
}

.rms-container {
    margin: 0 auto;
    max-width: 1280px;
    padding: 24px 24px 50px;
}

.new-leads-banner {
    align-items: center;
    background: #e7f5ec;
    border: 1px solid #b7e0c5;
    border-radius: 8px;
    color: #0d5c26;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 14px;
    padding: 16px 18px;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease;
}

.new-leads-banner:hover,
.new-leads-banner:focus-visible {
    background: #dbeee3;
    box-shadow: 0 2px 10px rgba(9, 133, 46, .16);
    color: #0d5c26;
    text-decoration: none;
}

/* Sized just under the 24px "My Pipeline" heading below it — near enough to read as a heading in
   its own right, short of competing with the one that names the page.

   Tracking comes back to .03em at this size. The .09em a kicker carries is for 11px caps, where
   it separates letters that would otherwise crowd; at 20px it only pulls the words apart. */
.new-leads-banner__kicker {
    align-items: center;
    color: var(--rms-success);
    display: inline-flex;
    font-size: 20px;
    font-weight: 700;
    gap: 9px;
    letter-spacing: .03em;
    line-height: 1.25;
    text-transform: uppercase;
}

/* The icon tracks the caps rather than matching them: set to the full 20px it sits taller than
   the letters beside it, since the glyph fills its em box and a capital does not. */
.new-leads-banner__kicker i { font-size: 17px; }

.new-leads-banner b { font-size: 15px; font-weight: 600; }

/* --- Pipeline overview ---------------------------------------------------- */

.pipeline-block {
    background: transparent;
    padding: 8px 4px 20px;
}

.pipeline-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 2px;
}

.pipeline-header h1,
.action-title h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0;
}

.section-kicker {
    color: var(--rms-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.pipeline-intro {
    color: var(--rms-muted);
    font-size: 13px;
    margin: 5px 0 0;
}

.pipeline-overview-card {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    overflow: hidden;
}

/* The phone-only pipeline summary. Hidden by default and swapped in for
   .pipeline-overview-card at 700px — see the max-width: 700px block. */
.mobile-pipeline-card {
    display: none;
}

.pipeline-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pipeline-kpi {
    min-width: 0;
    padding: 16px 18px;
    position: relative;
}

/* Borders between columns only, never before the first of a row. nth-child is
   keyed to the three-column grid above and is overridden at each breakpoint. */
.pipeline-kpi + .pipeline-kpi {
    border-left: 1px solid #e6ebee;
}

.pipeline-kpi:nth-child(3n + 1) {
    border-left: 0;
}

.pipeline-kpi:nth-child(n + 4) {
    border-top: 1px solid #e6ebee;
}

/* The tile's name, and — where the tile's secondary figure is a volume — that volume beside it.
   Baseline rather than centre now that it holds two pieces of text at different sizes: centring set
   the 11px volume slightly high against the 12px label and read as a misalignment. */
.kpi-topline {
    align-items: baseline;
    column-gap: 9px;
    display: flex;
    flex-wrap: wrap;
}

.kpi-icon {
    align-items: center;
    background: #eaf2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    font-size: 10px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.kpi-label {
    color: #52636d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.kpi-content {
    align-items: flex-end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 13px;
}

.kpi-content strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
}

/* One treatment for every secondary figure a tile carries: the referrals side split, the
   active/upcoming split, and the volume up on the label line. */
.pipeline-kpi .kpi-secondary {
    color: #657680;
    font-size: 11px;
    margin: 6px 0 0;
    white-space: nowrap;
}

/* Up on the label line, so the 6px that sets it under a count would drop it off that baseline. */
.kpi-topline .kpi-secondary {
    margin: 0;
}

.pipeline-kpi .kpi-secondary b {
    color: #344b58;
    font-weight: 700;
}

/* Coverage note beside a volume that only part of the group contributed to. Deliberately quiet —
   it qualifies the figure rather than competing with it. */
.pipeline-kpi .kpi-secondary .kpi-partial {
    color: #a8b1b6;
    font-size: 11px;
    margin-left: 4px;
}

/* The active/upcoming split had its own quiet-grey treatment here. It is a .kpi-secondary now, set
   like the buyer/seller split it sits in the same slot as — the two say the same kind of thing, so
   they are no longer written two different ways. */

/* The "·" between the two halves of a split. Quieter than either figure: it separates them without
   being read as part of one. */
.pipeline-kpi .kpi-secondary span {
    color: #a8b1b6;
    margin: 0 3px;
}

/* --- Closing forecast ----------------------------------------------------- */

.closing-forecast {
    background: #f8fafb;
    border-top: 1px solid #e6ebee;
    padding: 18px 22px 17px;
}

/* Just the heading now. It was a space-between row holding an "N escrow files" total against the
   right edge; that total was the In Escrow tile's count restated, so it and the row are gone. */
.forecast-heading h2 {
    color: var(--rms-secondary);
    font-size: 17px;
    font-weight: 600;
    margin: 5px 0 0;
}

/* Auto-flow rather than a fixed count: past due and needs-a-date each render only when there is
   something to report, so this grid is two columns on a clean pipeline and up to four when it
   matters. A fixed count would wrap the extras onto a row of their own. max-width scales with it so
   four stay as readable as two. */
.forecast-grid {
    display: grid;
    gap: 10px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin-top: 16px;
    max-width: 840px;
}

.forecast-stat {
    align-items: center;
    display: grid;
    grid-template-columns: 38px 1fr;
}

.forecast-stat > span {
    color: #536873;
    font-size: 12px;
    font-weight: 700;
}

.forecast-stat strong {
    color: var(--rms-primary);
    font-size: 28px;
    font-weight: 500;
    grid-row: span 2;
    line-height: 1;
}

/* The only red on this card, and it only ever renders when the count is non-zero — so red here
   always means something has slipped, never "all clear". The label carries the meaning too;
   colour is not doing the work alone. */
.forecast-stat.past-due strong {
    color: var(--rms-error);
}

.forecast-stat.future strong {
    color: var(--rms-secondary);
}

.forecast-stat.needs-date strong {
    color: #82919a;
}

.forecast-stat small {
    color: #8a979f;
    font-size: 10px;
}

.forecast-bar {
    background: #edf1f3;
    border-radius: 999px;
    display: flex;
    height: 6px;
    margin-top: 17px;
    overflow: hidden;
}

.forecast-bar .seg-past-due { background: var(--rms-error); }
.forecast-bar .seg-now { background: var(--rms-primary); }
.forecast-bar .seg-later { background: var(--rms-secondary); }
.forecast-bar .seg-unknown { background: #aeb8bd; }

/* --- Metric guide --------------------------------------------------------- */

.metric-guide {
    border-top: 1px solid #e6ebee;
    color: #657680;
    padding: 0 22px;
}

.metric-guide summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    list-style-position: outside;
    padding: 13px 0;
    width: fit-content;
}

.metric-guide[open] summary {
    color: var(--rms-secondary);
}

.metric-guide > div {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 0 17px;
}

.metric-guide p {
    border-left: 2px solid #e0e7eb;
    display: flex;
    flex-direction: column;
    font-size: 10.5px;
    gap: 4px;
    line-height: 1.45;
    margin: 0;
    padding-left: 9px;
}

.metric-guide p b {
    color: #425b68;
    font-size: 11px;
}

/* --- Action Needed -------------------------------------------------------- */

.action-needed {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    overflow: hidden;
    padding: 20px 22px 22px;
}

.action-title {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px;
}

.action-title h2 {
    color: var(--rms-secondary);
}

.action-title p:last-child {
    color: #71808a;
    font-size: 12px;
    margin: 5px 0 0;
}

.action-title-tools {
    align-items: center;
    display: flex;
    gap: 12px;
}

.action-title-tools > span {
    color: #71808a;
    font-size: 11px;
}

.action-title-tools > span b {
    color: var(--rms-secondary);
    font-size: 16px;
    margin-right: 3px;
}

/* Re-running the queues is the one action on this block, so it gets the solid
   treatment rather than sitting as another muted control. */
.refresh {
    align-items: center;
    background: var(--rms-secondary);
    border: 0;
    border-radius: 5px;
    color: #fff;
    display: flex;
    font-size: 16px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.refresh:disabled {
    opacity: .6;
}

.spin {
    animation: rms-spin .6s linear infinite;
}

@keyframes rms-spin { to { transform: rotate(360deg); } }

.update-tabs {
    background: #f0f3f5;
    border-radius: 7px;
    display: inline-flex;
    gap: 3px;
    padding: 3px;
}

/*
    Queue colours. Each queue owns one hue and carries it on its tab and on its cards, so a colour
    means "which queue" rather than "which tab is selected".

    The text tones are darker than the palette's own green/blue/orange. --rms-primary (#f26a21) is
    about 3:1 on white, which fails at the 12px the tab label is set in, and --rms-tertiary has the
    same problem; these three all clear 4.5:1 as text and carry white text when filled. The tints
    are the same hues at card-background weight.
*/
.update-tabs button.new {
    --queue: var(--rms-success);
    --queue-tint: #e7f5ec;
}

.update-tabs button.standard {
    --queue: #0b74b8;
    --queue-tint: #e7f2fa;
}

.update-tabs button.transaction {
    --queue: #c4520f;
    --queue-tint: #fdeee5;
}

.update-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--queue, #60727c);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    padding: 8px 12px;
}

.update-tabs button b {
    align-items: center;
    background: var(--queue-tint, #dfe6ea);
    border-radius: 999px;
    color: var(--queue, #60727c);
    display: flex;
    font-size: 10px;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
}

.update-tabs button.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(7, 67, 103, .14);
    color: var(--queue, var(--rms-secondary));
}

/* Selected reads as the filled badge, so the count is legible at a glance without relying on
   hue alone to say which tab is active — the white card behind it does that job too. */
.update-tabs button.active b {
    background: var(--queue, #e8f2f7);
    color: #fff;
}

.queue-explanation {
    color: #6f7f88;
    font-size: 11px;
    line-height: 1.45;
    margin: 11px 0 13px;
}

.update-list {
    border: 1px solid #e0e6e9;
    border-radius: 7px;
    overflow: hidden;
}

.update-card {
    align-items: center;
    background: #fff;
    display: grid;
    gap: 14px;
    grid-template-columns: 34px minmax(190px, 1.25fr) minmax(270px, 1.25fr) minmax(150px, .8fr) auto;
    min-height: 82px;
    padding: 12px 14px;
}

.update-card + .update-card {
    border-top: 1px solid #e5eaed;
}

.update-card:hover {
    background: #fbfcfd;
}

.update-type-icon {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    font-size: 10px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

/* Same three hues as the tabs, so a card is recognisable as belonging to its queue after the
   tab strip has scrolled out of view on a phone. */
.new .update-type-icon {
    background: #e7f5ec;
    color: var(--rms-success);
}

.standard .update-type-icon {
    background: #e7f2fa;
    color: #0b74b8;
}

.transaction .update-type-icon {
    background: #fdeee5;
    color: #c4520f;
}

.update-person > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.update-person h3 {
    color: #314955;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.update-person p {
    color: #78878f;
    font-size: 10.5px;
    margin: 5px 0 0;
}

.update-person p b {
    color: var(--rms-secondary);
}

.side-pill,
.record-pill {
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
    padding: 3px 6px;
    text-transform: uppercase;
}

.side-pill.buy { background: #f0ecfa; color: #5936a2; }
.side-pill.sell { background: #e8f8f3; color: #138763; }
.record-pill { background: #fff0e8; color: #ae5526; }

.update-supporting {
    align-items: center;
    display: grid;
    gap: 15px;
    grid-template-columns: minmax(105px, 1fr) minmax(120px, 1fr);
}

.update-partner,
.update-age > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.update-partner small,
.update-age small {
    color: #8a979e;
    font-size: 8.5px;
    text-transform: uppercase;
}

.update-partner b {
    color: #4d626d;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.update-age {
    align-items: center;
    display: flex;
    gap: 6px;
}

.update-age b {
    color: #60727c;
    font-size: 10.5px;
    font-weight: 600;
}

.overdue-warning {
    align-items: center;
    background: #fff8e9;
    border: 1px solid #e0b35e;
    border-radius: 50%;
    color: #9b6918;
    display: flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.update-property {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.update-property span,
.update-property small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.update-property span { color: #5d707a; font-size: 10.5px; }
.update-property small { color: #8a979e; font-size: 9.5px; }

.update-action {
    background: var(--rms-primary);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 9px 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.update-empty {
    align-items: center;
    background: linear-gradient(135deg, #f7fbf8, #f2f8fa);
    border: 1px solid #d8e9de;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: center;
    min-height: 190px;
    padding: 28px;
    text-align: left;
}

.complete-mark {
    align-items: center;
    background: #e3f4e8;
    border: 1px solid #bcdcc5;
    border-radius: 50%;
    color: var(--rms-success);
    display: flex;
    flex: 0 0 auto;
    font-size: 23px;
    font-weight: 700;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.update-empty h3 { color: var(--rms-secondary); font-size: 19px; margin: 0 0 4px; }
.update-empty p { color: #46616e; font-size: 13px; font-weight: 600; margin: 0; }

/* --- Loading and failure -------------------------------------------------- */

.rms-loading {
    align-items: center;
    color: #71808a;
    display: flex;
    font-size: 12px;
    gap: 8px;
    padding: 18px 2px;
}

.rms-notice {
    background: #fff8e9;
    border: 1px solid #e8cf9a;
    border-radius: 6px;
    color: #7a5a17;
    font-size: 11px;
    margin-bottom: 14px;
    padding: 10px 12px;
}

/* --- Sign-in --------------------------------------------------------------

   The old RMS login, brought across: deep-blue ground, the RMS lockup over a
   white card, the house watermark anchored bottom-centre, and "Powered by
   HomeAdvantage" beneath. Expressed here in this sheet's own custom properties
   rather than through MudBlazor, which the new app does not carry.

   The whole screen is the page's, so these rules cover the frame as well as
   the form — see the .rms-main--anonymous override below, which undoes the
   shell offsets the layout would otherwise apply.                            */

.rms-login {
    align-items: center;
    background: var(--rms-secondary);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 40px 24px 28px;
    position: relative;
}

/* The watermark is a separate layer rather than a background on .rms-login so it can be
   anchored to the bottom of the viewport and clipped, while the card stays centred in the
   space regardless of how tall the screen is. */
.rms-login__watermark {
    background: url("../images/rms_white_bg.png") no-repeat center bottom;
    background-size: contain;
    bottom: 0;
    left: 0;
    opacity: .5;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.rms-login__stack {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 380px;
    position: relative; /* over the watermark */
    width: 100%;
}

.rms-login__lockup {
    height: auto;
    width: 168px;
}

.rms-login__card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    padding: 28px;
    width: 100%;
}

.rms-login__title {
    color: var(--rms-secondary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.rms-login__lede {
    color: #7a8991;
    font-size: 12px;
    margin: 4px 0 20px;
}

/* The address the code went to, on the code step. Not bold for emphasis — bold because it is the
   one thing on the screen the user has to check is right before waiting on an email. */
.rms-login__lede strong {
    color: #536873;
    font-weight: 700;
}

.rms-login__error {
    align-items: flex-start;
    background: #fdf0f0;
    border: 1px solid #f2c9c9;
    border-radius: 6px;
    color: #9b2222;
    display: flex;
    font-size: 11px;
    gap: 7px;
    margin: 0 0 16px;
    padding: 9px 11px;
}

.rms-login__error i {
    font-size: 12px;
    line-height: 1.35;
}

.rms-login__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.rms-login__field > span:first-child {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

/* The bordered box is the wrapper, not the input: the leading icon and the reveal button sit
   inside it so focus styling covers the whole control rather than a strip in the middle. */
.rms-login__control {
    align-items: center;
    background: #f7fafc;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
}

.rms-login__control:focus-within {
    background: #fff;
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.rms-login__control > i {
    color: #93a4ad;
    font-size: 15px;
}

.rms-login__control:focus-within > i {
    color: var(--rms-secondary);
}

.rms-login__control input {
    background: transparent;
    border: 0;
    color: #344e5a;
    flex: 1;
    font-size: 14px;
    min-width: 0;
    outline: none;
    padding: 0;
}

.rms-login__control input::placeholder {
    color: #a9b7bf;
}

.rms-login__peek {
    background: transparent;
    border: 0;
    color: #93a4ad;
    font-size: 15px;
    line-height: 1;
    padding: 4px;
}

.rms-login__peek:hover {
    color: var(--rms-secondary);
}

/* The consent line. Set in the quiet body grey rather than the field-label blue — it is a
   sentence to agree with, not a field to fill in — and the whole label is the hit area, which
   is what makes it a reasonable target on a phone despite the small box. */
.rms-login__terms {
    align-items: flex-start;
    color: #60747e;
    display: flex;
    font-size: 11px;
    gap: 9px;
    line-height: 1.45;
    margin-top: 18px;
}

.rms-login__terms input {
    accent-color: var(--rms-primary);
    /* Never squeezed by the sentence beside it, and nudged onto the first line of that sentence
       rather than sitting against the top edge of the text box. */
    flex: none;
    height: 15px;
    margin-top: 1px;
    width: 15px;
}

.rms-login__terms a {
    color: var(--rms-tertiary);
    text-decoration: underline;
}

.rms-login__terms a:hover {
    color: var(--rms-secondary);
}

/* Tighter than the gap that separates the button from a field: the button is the thing this
   line is a condition of, so the two read as one block. */
.rms-login__terms + .rms-login__submit {
    margin-top: 12px;
}

.rms-login__submit {
    align-items: center;
    background: var(--rms-primary);
    border: 1px solid var(--rms-primary);
    border-radius: 4px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: .04em;
    margin-top: 20px;
    min-height: 44px;
    text-transform: uppercase;
    width: 100%;
}

.rms-login__submit:hover:not(:disabled) {
    background: #d95c17;
    border-color: #d95c17;
}

.rms-login__submit:disabled {
    cursor: not-allowed;
    opacity: .65;
}

/* A code, not a word: spaced and centred so six digits read as six digits, and monospaced
   figures so the string does not shift width as it is typed. */
.rms-login__control input.rms-login__code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 20px;
    letter-spacing: .34em;
    text-align: center;
    /* The letter-spacing is applied after the last character too, which pushes the string
       off-centre by one gap. Pulled back by half of it. */
    text-indent: .34em;
}

.rms-login__control input.rms-login__code::placeholder {
    letter-spacing: .34em;
}

/* The way between the two sign-in flows. Under the button, quiet, and never the thing the eye
   lands on first — a password is still how nearly everyone gets in. */
.rms-login__alt {
    align-items: center;
    color: #b7c3c9;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 7px;
    justify-content: center;
    margin: 16px 0 0;
}

.rms-login__link {
    background: none;
    border: 0;
    color: var(--rms-tertiary);
    font-size: 11px;
    padding: 2px;
    text-decoration: underline;
}

.rms-login__link:hover:not(:disabled) {
    color: var(--rms-secondary);
}

.rms-login__link:disabled {
    color: #a9b7bf;
    cursor: not-allowed;
    text-decoration: none;
}

.rms-login__footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rms-login__powered {
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
    margin: 0;
}

.rms-login__ha {
    height: auto;
    width: 108px;
}

.rms-login__version {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    margin: 6px 0 0;
}

/* The layout's anonymous branch still renders .rms-main, which is sized for the shell: 64px of
   headroom for the fixed appbar and, above 960px, a 240px gutter for the drawer. Neither exists
   on this route, and without this the sign-in screen sat offset to the right on any desktop
   window. Doubled class purely for specificity — the drawer gutter is set inside a media query,
   which a single class would not outrank on source order alone. */
.rms-main.rms-main--anonymous {
    margin-left: 0;
    padding-top: 0;
}

@media (max-width: 700px) {
    .rms-login { padding: 28px 18px 22px; }
    .rms-login__stack { gap: 20px; }
    .rms-login__lockup { width: 140px; }
    .rms-login__card { padding: 22px 18px; }
}

/* A short landscape window — a phone on its side, mostly. The lockup and watermark are the
   first things to give way; the card is the only part that has to fit. */
@media (max-height: 620px) {
    .rms-login__watermark { display: none; }
    .rms-login__lockup { width: 120px; }
    .rms-login__stack { gap: 16px; }
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 960px) {
    .drawer-open .rms-main { margin-left: 0; }

    .rms-drawer { max-width: 86vw; z-index: 60; }

    .drawer-scrim {
        background: rgba(14, 36, 49, .38);
        border: 0;
        bottom: 0;
        display: block;
        left: 0;
        padding: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 55;
    }

    .metric-guide > div { grid-template-columns: 1fr 1fr; }

    .pipeline-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pipeline-kpi:nth-child(3n + 1) { border-left: 1px solid #e6ebee; }
    .pipeline-kpi:nth-child(2n + 1) { border-left: 0; }
    .pipeline-kpi:nth-child(n + 3) { border-top: 1px solid #e6ebee; }

    .update-card { grid-template-columns: 34px minmax(180px, 1.1fr) minmax(250px, 1.2fr) auto; }
    .update-property { display: none; }
}

@media (max-width: 700px) {
    .rms-appbar { padding: 0 8px; }
    .rms-appbar__user { display: none; }
    .avatar { margin-left: 5px; }

    .rms-container { padding: 16px 8px 32px; }

    /* Steps down with the heading below it, which goes 24px to 22px at this width. */
    .new-leads-banner { margin-bottom: 10px; padding: 13px 12px; }
    .new-leads-banner__kicker { font-size: 17px; gap: 8px; }
    .new-leads-banner__kicker i { font-size: 15px; }
    .new-leads-banner b { font-size: 13px; }

    .pipeline-block { padding: 4px 4px 14px; }
    .pipeline-header { align-items: flex-start; gap: 12px; margin-bottom: 9px; }
    .pipeline-header h1 { font-size: 22px; }
    .pipeline-intro { display: none; }

    /* The swap: the wide card off, the phone summary on. The .pipeline-kpi rules below still
       apply to the wide card and are kept only so it degrades sanely if this pair is ever
       overridden — nothing renders them while the swap holds. */
    .pipeline-overview-card { display: none; }

    .mobile-pipeline-card {
        background: #fff;
        border: 1px solid var(--rms-card-border);
        border-radius: 9px;
        box-shadow: 0 2px 9px rgba(7, 67, 103, .06);
        display: block;
        overflow: hidden;
    }

    .mobile-pipeline-card summary { cursor: pointer; list-style: none; }
    .mobile-pipeline-card summary::-webkit-details-marker { display: none; }

    /* grid-auto-flow rather than the prototype's repeat(3, 1fr): the tiles come from
       OpportunityRecordTypes, so the count is the picklist's to decide, not this sheet's.
       Identical at three, and still even columns if it ever returns two or four. */
    .mobile-pipeline-metrics {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        padding: 12px 8px 10px;
    }

    .mobile-pipeline-metrics > span {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mobile-pipeline-metrics > span + span { border-left: 1px solid #e5eaed; }

    .mobile-pipeline-metrics small {
        color: #71818a;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: center;
        text-transform: uppercase;
    }

    .mobile-pipeline-metrics strong {
        color: var(--rms-secondary);
        font-size: 25px;
        font-weight: 500;
        line-height: 1;
    }

    .mobile-pipeline-toggle {
        align-items: center;
        background: #f8fafb;
        border-top: 1px solid #e5eaed;
        color: #61737d;
        display: flex;
        font-size: 10px;
        font-weight: 600;
        justify-content: center;
        padding: 7px 10px;
    }

    .mobile-pipeline-toggle i {
        font-size: 11px;
        margin-left: 5px;
        transition: transform .15s ease;
    }

    .mobile-pipeline-card[open] .mobile-pipeline-toggle i { transform: rotate(180deg); }

    /* Same reason as .forecast-grid: two stats on a clean pipeline, up to four when something is
       past due or missing its date. */
    .mobile-closing-details {
        border-top: 1px solid #e5eaed;
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        padding: 11px 8px;
    }

    .mobile-closing-details p {
        display: grid;
        grid-template-columns: 1fr auto;
        margin: 0;
        padding: 0 8px;
    }

    .mobile-closing-details p + p { border-left: 1px solid #e5eaed; }
    .mobile-closing-details span { color: #61737d; font-size: 9px; font-weight: 700; }

    .mobile-closing-details strong {
        color: var(--rms-secondary);
        font-size: 18px;
        font-weight: 500;
        grid-row: span 2;
        line-height: 1;
    }

    .mobile-closing-details .past-due strong { color: var(--rms-error); }

    .mobile-closing-details small { color: #8a979e; font-size: 8px; margin-top: 3px; }

    .pipeline-kpi-grid { grid-template-columns: 1fr; }
    .pipeline-kpi { padding: 10px 14px; }
    .pipeline-kpi + .pipeline-kpi { border-left: 0; border-top: 1px solid #e6ebee; }
    .pipeline-kpi:nth-child(2n + 1) { border-left: 0; }
    .kpi-icon { height: 24px; width: 24px; }
    .kpi-content { margin-top: 7px; }

    .forecast-grid { gap: 6px; }
    .metric-guide > div { grid-template-columns: 1fr; }

    .action-needed { padding: 14px 12px 16px; }

    /* Stays a row, matching the design: stacking it pushed the refresh button onto its own line
       under the description, which read as a third piece of body copy rather than a control.
       Keeping the row leaves the button pinned to the top-right corner of the card, where the
       facelift puts it and where a thumb expects it.

       The "N need updates" total goes with it, as in the design. Nothing is lost: the tab pills
       directly below carry the same figure split per queue, and the total is their sum. */
    .action-title { gap: 12px; }
    .action-title-tools > span { display: none; }
    .update-tabs { width: 100%; }
    .update-tabs button { flex: 1; justify-content: center; }
    .update-card { grid-template-columns: 30px 1fr auto; }
    .update-supporting { display: none; }

}

/* Above the overlay breakpoint the drawer is part of the layout rather than a
   panel over it, so it stays open and its toggle is hidden. This keeps the open
   state a mobile-only concern: no JavaScript has to measure the viewport, and a
   navigation can close the drawer unconditionally without desktop users
   watching their menu collapse under them. */
@media (min-width: 961px) {
    .rms-drawer { transform: translateX(0); }
    .rms-main { margin-left: 240px; }
    .rms-appbar .icon-button { display: none; }
}

/* ===========================================================================
   Contacts workspace
   Ported from the design prototype's "CRM referrals workspace" block.
   =========================================================================== */

.referrals-page-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.referrals-page-header h1 {
    color: var(--rms-secondary);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
}

.referrals-page-header p:last-child {
    color: #6f7f88;
    font-size: 13px;
    margin: 5px 0 0;
}

/* The page's primary action, opposite the title. Asymmetric padding because the "+" disc carries
   its own space on the left. */
.referrals-page-header > button {
    align-items: center;
    background: var(--rms-primary);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 3px 9px rgba(242, 106, 33, .2);
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px 0 8px;
}

.add-contact-icon {
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    font-size: 18px;
    height: 26px;
    justify-content: center;
    line-height: 1;
    width: 26px;
}

.referral-pipeline,
.contacts-workspace {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 9px;
    box-shadow: var(--rms-card-shadow);
}

.referral-pipeline {
    margin-bottom: 16px;
    overflow: hidden;
}

.pipeline-title-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 16px 18px 14px;
}

.pipeline-title-row h2,
.contacts-heading h2 {
    color: var(--rms-secondary);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
}

.pipeline-title-row p,
.contacts-heading p {
    color: #7b8a92;
    font-size: 11px;
    margin: 3px 0 0;
}

.pipeline-side-tabs {
    background: #edf1f3;
    border-radius: 6px;
    display: flex;
    gap: 3px;
    padding: 3px;
}

.pipeline-side-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #60727c;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 7px;
    min-height: 31px;
    padding: 0 10px;
}

.pipeline-side-tabs button b {
    align-items: center;
    background: #dce4e8;
    border-radius: 999px;
    display: flex;
    font-size: 9px;
    height: 19px;
    justify-content: center;
    min-width: 19px;
    padding: 0 5px;
}

.pipeline-side-tabs button.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(7, 67, 103, .15);
    color: var(--rms-secondary);
}

.pipeline-side-tabs button.active b {
    background: #e8f2f7;
}

.pipeline-lanes {
    background: #f2f5f7;
    border-top: 1px solid #e5eaed;
    display: grid;
    gap: 12px;
    padding: 12px;
}

.pipeline-lane {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(7, 67, 103, .06);
    overflow: hidden;
}

.pipeline-lane.buy { border-left: 4px solid #6b49b6; }
.pipeline-lane.sell { border-left: 4px solid #159a76; }

.pipeline-lane-header {
    align-items: center;
    display: flex;
    gap: 9px;
    padding: 10px 12px 9px;
}

.pipeline-lane-header > span {
    align-items: center;
    background: #f0ecfa;
    border-radius: 50%;
    color: #5936a2;
    display: flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.pipeline-lane.sell .pipeline-lane-header > span {
    background: #e8f8f3;
    color: #138763;
}

.pipeline-lane-header > div { display: flex; flex-direction: column; gap: 2px; }
.pipeline-lane-header b { color: #354e5a; font-size: 12px; }
.pipeline-lane-header small { color: #849198; font-size: 9px; }

/* Columns are sized by how many stages RMS returns rather than a fixed eight.
   The number of milestones on a side is picklist data, and a hard-coded count
   would either crowd them or strand empty columns. */
.pipeline-stage-scroll {
    border-top: 1px solid #e5eaed;
    display: grid;
    grid-auto-columns: minmax(112px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
}

.pipeline-stage {
    background: #fbfcfd;
    border: 0;
    border-right: 1px solid #e5eaed;
    color: #61737d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 82px;
    padding: 11px 12px 10px;
    text-align: left;
}

.pipeline-stage:last-child { border-right: 0; }
.pipeline-stage:hover { background: #f4f8fa; }

.pipeline-stage.active {
    background: #f2f8fb;
    box-shadow: inset 0 3px var(--rms-secondary);
    color: var(--rms-secondary);
}

.pipeline-lane.buy .pipeline-stage.active {
    background: #f7f4fc;
    box-shadow: inset 0 3px #6b49b6;
    color: #5936a2;
}

.pipeline-lane.sell .pipeline-stage.active {
    background: #f1faf7;
    box-shadow: inset 0 3px #159a76;
    color: #137b60;
}

.pipeline-stage span { font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.pipeline-stage strong { color: var(--rms-secondary); font-size: 22px; font-weight: 500; line-height: 1; }

.contacts-workspace { overflow: hidden; }

.contacts-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.contacts-heading > button {
    background: transparent;
    border: 0;
    color: var(--rms-primary);
    font-size: 11px;
    font-weight: 600;
}

.contact-filters {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(240px, 1.6fr) minmax(150px, 1fr) minmax(145px, .8fr) minmax(145px, .8fr);
    padding: 0 18px 16px;
}

.contact-filters > label { display: flex; flex-direction: column; gap: 5px; }

/* The search field carries its purpose in its placeholder, so it drops the visible caption the
   other filters need and takes a glyph instead. Overriding the flex column above, since there is
   no label row to stack: the icon is positioned against the field itself. */
.contact-filters > label.contact-search { display: block; position: relative; }

.contact-filters .contact-search i {
    bottom: 9px;
    color: var(--rms-primary);
    font-size: 19px;
    font-style: normal;
    left: 11px;
    line-height: 1;
    position: absolute;
}

/* Scoped through .contact-filters to outrank the shared input rule below, which sets the padding
   for every filter and would otherwise win on source order and leave the glyph over the text. */
.contact-filters .contact-search input { padding-left: 36px; }

.contact-filters label > span {
    color: #71818a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.contact-filters input,
.contact-filters select {
    background: #fff;
    border: 1px solid #ccd6db;
    border-radius: 4px;
    color: #465b66;
    height: 38px;
    min-width: 0;
    padding: 0 10px;
    width: 100%;
}

.contacts-table-wrap { border-top: 1px solid #e2e8eb; overflow-x: auto; }

.contacts-table { border-collapse: collapse; min-width: 760px; width: 100%; }

.contacts-table th {
    background: #f6f8f9;
    color: #71808a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.contacts-table td {
    border-top: 1px solid #e7ecee;
    color: #536873;
    font-size: 11px;
    padding: 10px 14px;
    vertical-align: middle;
}

.contacts-table tbody tr:hover { background: #fbfcfd; }

/* The whole row is a click target. Only rows that actually resolve to a record get the pointer,
   so the cursor never promises something the click will not do. */
.contacts-table tbody tr.row-opens-record { cursor: pointer; }

/* Keyboard users focus the name, not the row, so the row lights up with it — otherwise tabbing
   through the table moves an invisible highlight. */
.contacts-table tbody tr.row-opens-record:focus-within { background: #f4f8fb; }

.contact-identity { align-items: center; display: flex; gap: 10px; min-width: 190px; }

.contact-identity > span {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.contact-identity > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-identity .contact-name { color: #2f4855; font-size: 12px; font-weight: 700; text-align: left; }
.contact-identity small { color: #87949b; font-size: 9.5px; }

/* The source lives in its own column at this width. It is carried in the markup regardless so the
   phone layout can drop that column and still show the value. The separator belongs to the source
   rather than sitting between the two, so hiding one hides it. */
.contact-identity small i { display: none; font-style: normal; }
.contact-identity small i::before { content: " · "; }

.table-side {
    border-radius: 999px;
    display: inline-block;
    font-size: 8px;
    font-weight: 800;
    margin-right: 7px;
    padding: 3px 6px;
    text-transform: uppercase;
}

.table-side.buy { background: #f0ecfa; color: #5936a2; }
.table-side.sell { background: #e8f8f3; color: #138763; }

.contacts-empty { color: #73848d; padding: 44px 20px; text-align: center; }
.contacts-empty h3 { color: var(--rms-secondary); font-size: 17px; margin: 0 0 4px; }
.contacts-empty p { font-size: 11px; }

.contacts-pagination {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 16px;
}

.contacts-pagination button {
    background: #fff;
    border: 1px solid #d7dfe3;
    border-radius: 4px;
    color: var(--rms-secondary);
    height: 34px;
    min-width: 34px;
}

.contacts-pagination button:disabled { color: #afb9be; }

@media (max-width: 960px) {
    .contact-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .referrals-page-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .referrals-page-header h1 { font-size: 22px; }
    .pipeline-title-row { align-items: flex-start; flex-direction: column; gap: 10px; }

    /*
        Two columns rather than one, but only the date pair uses them. Search and Source need the
        width; the created-from/created-to pair is one range and reads better side by side than as
        two full-width rows — which also stops the filter block pushing the table off the screen.

        Spanning is the default and the dates opt out, so adding a filter later stacks it full
        width rather than silently pairing with whatever happens to sit beside it.
    */
    .contact-filters { gap: 8px; grid-template-columns: 1fr 1fr; padding: 0 12px 12px; }
    .contact-filters > label { grid-column: 1 / -1; }
    .contact-filters > label.filter-date { grid-column: auto; }
    .contact-filters input, .contact-filters select { height: 36px; }

    /*
        The table stays a table and fits the screen, as the facelift does — rather than keeping its
        760px floor and scrolling sideways. Fixed layout with explicit widths, because auto layout
        given a narrow box distributes by content and the date column wins over the client name.

        Source is the column that goes: it is the least useful of the four for scanning, and its
        value is not lost — the markup carries it inside the client cell, revealed here.
    */
    .contacts-table { min-width: 0; table-layout: fixed; }
    .contacts-table th, .contacts-table td { padding: 9px 7px; }
    .contacts-table th:nth-child(3), .contacts-table td:nth-child(3) { display: none; }
    .contacts-table th:first-child { width: 44%; }
    .contacts-table th:nth-child(2) { width: 31%; }
    .contacts-table th:nth-child(4) { width: 25%; }

    /* Truncate rather than wrap: a long name must not push the row to three lines. */
    .contact-identity { gap: 7px; min-width: 0; }
    .contact-identity > span { height: 26px; width: 26px; }
    .contact-identity .contact-name {
        display: block;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
    .contact-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contact-identity small i { display: inline; }

    /*
        With no city recorded the sub-line would read "— · Member Concierge" — a placeholder for a
        missing value followed by a real one. Where the source is there to carry the line, the dash
        and its separator go instead. The dash stays whenever there is no source, so an empty
        sub-line never appears.
    */
    .contact-identity small:has(i) .identity-place.is-placeholder { display: none; }
    .contact-identity small:has(i) .identity-place.is-placeholder + i::before { content: none; }

    /* Side pill above the stage name rather than beside it — 31% will not hold both on one line. */
    .contacts-table td:nth-child(2) { white-space: normal; }
    .contacts-table td:nth-child(2) b { display: block; font-size: 9px; line-height: 1.25; margin-top: 3px; }
    .table-side { font-size: 7px; margin: 0; padding: 2px 5px; }
    .contacts-table td:nth-child(4) { color: #687b85; font-size: 9px; }
}

/* ===========================================================================
   Transactions workspace
   Ported from the design prototype's transactions block.
   =========================================================================== */

.transactions-heading { margin-bottom: 18px; }

.transactions-heading h1 {
    color: var(--rms-secondary);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
}

.transactions-heading > div > p:last-child {
    color: #6f7f88;
    font-size: 13px;
    margin: 5px 0 0;
}

.transaction-pipeline { margin-bottom: 16px; }

.transaction-volume-summary {
    background: #fff;
    border-top: 1px solid #e5eaed;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.transaction-volume-summary > div {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 58px;
    padding: 10px 14px;
}

.transaction-volume-summary > div + div { border-left: 1px solid #e5eaed; }

.transaction-volume-summary span {
    color: #72838b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.transaction-volume-summary strong {
    color: var(--rms-secondary);
    font-size: 21px;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

/* Coverage note, sized and coloured to read as a qualifier on the figure rather than as a second
   figure. Same treatment as the equivalent note on Home's tiles. */
.transaction-volume-summary strong em {
    color: #a8b1b6;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    margin-left: 4px;
}

/* Auto-flow rather than a fixed column count: the number of milestones a
   workspace has is picklist data. */
.transaction-stage-row {
    background: #f2f5f7;
    border-top: 1px solid #e5eaed;
    display: grid;
    gap: 1px;
    grid-auto-columns: minmax(120px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
}

.transaction-stage-row button {
    background: #fff;
    border: 0;
    color: #61737d;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-height: 76px;
    padding: 12px 14px;
    text-align: left;
}

.transaction-stage-row button.active {
    background: #f2f8fb;
    box-shadow: inset 0 3px var(--rms-secondary);
    color: var(--rms-secondary);
}

.transaction-stage-row button span { font-size: 10px; font-weight: 600; }
.transaction-stage-row button strong { color: var(--rms-secondary); font-size: 21px; font-weight: 500; }

.transaction-records { margin-bottom: 16px; }

.transaction-records-heading > div:last-child {
    align-items: center;
    display: flex;
    gap: 10px;
}

.transaction-attention-summary {
    background: #fff4e8;
    border: 1px solid #f3d7bb;
    border-radius: 999px;
    color: #9a5a20;
    font-size: 9px;
    font-weight: 700;
    padding: 5px 8px;
}

.transaction-contact-filters {
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
}

.transaction-file-grid {
    background: #f2f5f7;
    border-top: 1px solid #e2e8eb;
    display: grid;
    gap: 9px;
    grid-template-columns: 1fr;
    padding: 12px;
}

.transaction-file-grid > .contacts-empty { background: #fff; grid-column: 1 / -1; }

.transaction-file-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dce4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(7, 67, 103, .05);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(210px, 1.2fr) minmax(170px, .9fr) minmax(235px, 1.15fr) minmax(230px, 1.1fr);
    min-height: 128px;
    overflow: hidden;
    padding: 0 16px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.transaction-file-card:hover {
    border-color: #b7c9d1;
    box-shadow: 0 4px 12px rgba(7, 67, 103, .1);
    transform: translateY(-1px);
}

.transaction-file-card.needs-attention { border-left: 4px solid #dc9a50; padding-left: 13px; }

.transaction-file-property { min-width: 0; padding: 16px 20px 16px 0; }
.transaction-file-property header p { margin: 0; }
.transaction-file-property header p:last-child { color: #7d8e96; font-size: 9.5px; margin-top: 4px; }

.transaction-file-title { align-items: center; display: flex; gap: 8px; min-width: 0; }

.transaction-file-address {
    color: var(--rms-secondary);
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.transaction-file-warning {
    align-items: center;
    background: #fff4e8;
    border-radius: 4px;
    color: #955416;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    gap: 5px;
    margin: 9px 0 0;
    max-width: max-content;
    padding: 6px 8px;
}

.transaction-file-client {
    align-items: center;
    align-self: stretch;
    border-left: 1px solid #edf1f3;
    display: flex;
    gap: 9px;
    margin: 0;
    min-width: 0;
    padding: 14px 20px;
}

.transaction-file-client > span {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.transaction-file-client > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.transaction-file-client b { color: #344e5a; font-size: 11px; }

.transaction-file-client small {
    color: #829199;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-file-financials {
    align-content: center;
    align-self: stretch;
    border-left: 1px solid #edf1f3;
    display: grid;
    gap: 8px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 14px 18px;
}

.transaction-file-financials p { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.transaction-file-financials p:first-child { grid-row: 1 / span 2; justify-content: center; }

.transaction-file-financials span {
    color: #829199;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.transaction-file-financials strong { color: var(--rms-secondary); font-size: 11px; }

.transaction-file-dates {
    align-self: stretch;
    background: #f5f8f9;
    border-left: 1px solid #e7edef;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 14px 18px;
}

.transaction-file-dates > div { display: flex; flex-direction: column; gap: 3px; }

.transaction-file-dates span {
    color: #829199;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.transaction-file-dates b { color: #3e5662; font-size: 10px; }
.transaction-file-dates .overdue b { color: #a65c19; }

@media (max-width: 1100px) {
    .transaction-file-card { grid-template-columns: 1fr 1fr; }
    .transaction-file-property { grid-column: 1 / -1; padding-bottom: 0; }
    .transaction-file-client,
    .transaction-file-financials,
    .transaction-file-dates { border-left: 0; }
}

@media (max-width: 960px) {
    .transaction-contact-filters { grid-template-columns: 1fr 1fr; }
    .transaction-volume-summary { grid-template-columns: 1fr; }
    .transaction-volume-summary > div + div { border-left: 0; border-top: 1px solid #e5eaed; }
}

@media (max-width: 700px) {
    .transactions-heading h1 { font-size: 22px; }
    .transaction-file-card { grid-template-columns: 1fr; padding: 0 12px; }

    /* Two across rather than one, with search and the last filter spanning — the design's layout.
       Four stacked filters pushed the records themselves below the fold on a phone. */
    .transaction-contact-filters { grid-template-columns: 1fr 1fr; }
    .transaction-contact-filters .contact-search,
    .transaction-contact-filters label:last-child { grid-column: 1 / -1; }

    /* The stage row goes. It scrolls sideways at this width and the same choice is available from
       the Stage filter directly below it. */
    .transaction-stage-row { display: none; }
}

/* Per-tile icon colours from the design: referrals keep the default blue, listings
   take the brand orange, escrows green. */
.listings-kpi .kpi-icon { background: #fff0e8; color: var(--rms-primary); }
.escrow-kpi .kpi-icon { background: #e8f5ec; color: var(--rms-success); }

/* ===========================================================================
   Internal Referrals workspace
   Ported from the design prototype's internal referrals block.

   The prototype's own create-dialog rules (.internal-create-*, .internal-
   eligibility) are not carried over as written: that dialog was an earlier
   iteration the prototype later replaced with the shared stepper. The
   eligibility panel is kept, restyled here as a page section, because the
   content is a business rule rather than decoration.
   =========================================================================== */

/* The prototype's own page rule carried the width and padding, because there it
   was the outermost element. Here the shell's .rms-container already supplies
   both, and repeating them inset this page 48px further than Contacts and
   Transactions. Left as a grouping hook only. */
.internal-referrals-page { display: block; }

/* --- Promo ---------------------------------------------------------------- */

.referral-promo {
    align-items: stretch;
    background: linear-gradient(118deg, #073f61 0%, #0b5278 63%, #087b78 100%);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(7, 67, 103, .18);
    color: #fff;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 16px;
    overflow: hidden;
    padding: 22px 24px;
    position: relative;
}

/* Decorative disc bleeding off the top-right corner. */
.referral-promo::after {
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
    content: "";
    height: 220px;
    position: absolute;
    right: -75px;
    top: -95px;
    width: 220px;
}

.referral-promo-copy {
    align-items: flex-start;
    display: flex;
    flex: 1 1 60%;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.referral-promo-copy .section-kicker {
    color: #ffad7d;
    margin: 0;
}

.referral-promo-copy h1 {
    color: #fff;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.08;
    margin: 7px 0 9px;
    max-width: 650px;
}

.referral-promo-copy > p:last-child {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    max-width: 650px;
}

.referral-promo-visual {
    align-items: center;
    display: flex;
    flex: 0 1 440px;
    gap: 17px;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.referral-fee-badge {
    align-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 7px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: 0 9px 25px rgba(0, 0, 0, .17);
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 142px;
    flex-direction: column;
    justify-content: center;
    outline: 1px solid rgba(255, 255, 255, .5);
    text-align: center;
}

.referral-fee-badge strong {
    color: var(--rms-primary);
    font-size: 39px;
    font-weight: 750;
    letter-spacing: -.05em;
    line-height: .95;
}

.referral-fee-badge span {
    font-size: 10px;
    font-weight: 800;
    margin-top: 5px;
    text-transform: uppercase;
}

.referral-fee-badge small {
    color: #71838c;
    font-size: 8px;
    margin-top: 2px;
}

.referral-promo-visual ol {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.referral-promo-visual li {
    align-items: center;
    display: flex;
    gap: 9px;
}

.referral-promo-visual li > span {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.referral-promo-visual li > div {
    display: flex;
    flex-direction: column;
}

.referral-promo-visual li b { font-size: 10px; }

.referral-promo-visual li small {
    color: rgba(255, 255, 255, .66);
    font-size: 8px;
    margin-top: 1px;
}

/* --- Eligibility ---------------------------------------------------------- */

.referral-eligibility {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.referral-eligibility > div {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    padding: 14px 16px;
}

/* Warm ground on the exclusions, as the prototype's dialog had it. */
.referral-eligibility .not-eligible { background: #fff8ef; }

.referral-eligibility b {
    align-items: center;
    color: #344e5a;
    display: flex;
    font-size: 12px;
    gap: 7px;
}

.referral-eligibility .eligible b i { color: var(--rms-success); }
.referral-eligibility .not-eligible b i { color: var(--rms-error); }

.referral-eligibility ul {
    color: #60747e;
    font-size: 11px;
    line-height: 1.55;
    margin: 8px 0 0;
    padding-left: 18px;
}

/* --- Pipeline strip ------------------------------------------------------- */

.internal-pipeline {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

.internal-pipeline-heading {
    align-items: center;
    border-bottom: 1px solid #e5eaed;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 16px;
}

.internal-pipeline-heading h2 {
    color: var(--rms-secondary);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.internal-pipeline-heading p {
    color: #7b8a92;
    font-size: 10px;
    margin: 2px 0 0;
}

.internal-pipeline-heading > button {
    align-items: baseline;
    background: #f4f8fa;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #637781;
    column-gap: 7px;
    display: grid;
    grid-template-columns: auto auto;
    padding: 7px 10px;
    text-align: left;
}

.internal-pipeline-heading > button.active {
    border-color: #9ab8c8;
    box-shadow: inset 0 0 0 1px #d6e5ed;
}

.internal-pipeline-heading > button strong {
    color: var(--rms-secondary);
    font-size: 18px;
    grid-row: 1 / 3;
}

.internal-pipeline-heading > button span {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.internal-pipeline-heading > button small { font-size: 8px; }

.internal-pipeline-stages {
    display: flex;
    min-width: 0;
    overflow-x: auto;
}

.internal-pipeline-stages button {
    background: #fff;
    border: 0;
    border-right: 1px solid #edf0f2;
    color: #61737d;
    display: flex;
    flex: 1 0 115px;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 68px;
    padding: 9px 14px;
    text-align: left;
}

.internal-pipeline-stages button:last-child { border-right: 0; }

.internal-pipeline-stages button span {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.internal-pipeline-stages button strong {
    color: var(--rms-secondary);
    font-size: 19px;
    font-weight: 500;
}

.internal-pipeline-stages button.active {
    background: #f2f8fb;
    box-shadow: inset 0 3px var(--rms-secondary);
    color: var(--rms-secondary);
}

.internal-pipeline-note {
    background: #fafbfc;
    border-top: 1px solid #e8edef;
    color: #88959b;
    font-size: 9px;
    margin: 0;
    padding: 6px 16px;
}

/* --- Filters and table ---------------------------------------------------- */

.internal-referrals-workspace { overflow: hidden; }

.internal-referral-filters {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(300px, 1.8fr) repeat(2, minmax(170px, 1fr));
    padding: 2px 18px 16px;
}

.internal-referral-filters label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.internal-referral-filters label > span {
    color: #687b85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.internal-referral-filters input,
.internal-referral-filters select {
    background: #fff;
    border: 1px solid #ccd6db;
    border-radius: 4px;
    color: #405762;
    height: 38px;
    padding: 0 10px;
    width: 100%;
}

.internal-referral-table-wrap {
    border-top: 1px solid #e2e8eb;
    overflow-x: auto;
}

.internal-referral-table {
    border-collapse: collapse;
    min-width: 980px;
    table-layout: fixed;
    width: 100%;
}

.internal-referral-table th {
    background: #f6f8f9;
    color: #71808a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.internal-referral-table th:first-child { width: 20%; }
.internal-referral-table th:nth-child(2) { width: 8%; }
.internal-referral-table th:nth-child(3) { width: 24%; }
.internal-referral-table th:nth-child(4) { width: 17%; }
.internal-referral-table th:nth-child(5) { width: 15%; }
.internal-referral-table th:nth-child(6) { width: 16%; }

.internal-referral-table td {
    border-top: 1px solid #e7ecee;
    color: #536873;
    font-size: 11px;
    height: 52px;
    padding: 9px 14px;
    vertical-align: middle;
}

.internal-referral-table tbody tr:hover { background: #fbfcfd; }

.internal-referral-table-client {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.internal-referral-table-client > span {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.internal-referral-table-client strong {
    color: #344e5a;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.internal-referral-status {
    color: #405864;
    font-weight: 600;
    white-space: nowrap;
}

/* Distinct from a named agent without reading as an error: nobody holding the
   referral yet is its normal opening state, not a fault. */
.awaiting-assignment {
    color: #8a97a0;
    font-style: italic;
}

.internal-agent-contact {
    color: var(--rms-secondary);
    text-decoration: underline;
    text-decoration-color: #b5c8d2;
    text-underline-offset: 2px;
    word-break: break-all;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 960px) {
    .referral-eligibility { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .referral-promo {
        flex-direction: column;
        gap: 14px;
        padding: 17px 16px;
    }

    .referral-promo-copy h1 { font-size: 23px; margin: 5px 0 7px; }
    .referral-promo-copy > p:last-child { font-size: 11px; }

    .referral-promo-visual {
        flex: 0 0 auto;
        justify-content: flex-start;
        width: 100%;
    }

    /* The circle becomes a bar on narrow screens — a 142px disc plus the step
       list does not fit beside anything at this width. */
    .referral-fee-badge {
        aspect-ratio: auto;
        border: 0;
        border-radius: 8px;
        display: grid;
        flex-basis: 126px;
        gap: 0 6px;
        grid-template-columns: auto 1fr;
        min-height: 68px;
        padding: 9px 11px;
        text-align: left;
    }

    .referral-fee-badge strong { font-size: 29px; grid-row: 1 / 3; }
    .referral-fee-badge span { font-size: 8px; margin: 0; }
    .referral-fee-badge small { font-size: 7px; margin: 0; }

    .referral-promo-visual ol { flex: 1; gap: 5px; }
    .referral-promo-visual li > span { height: 19px; width: 19px; }
    .referral-promo-visual li b { font-size: 9px; }
    .referral-promo-visual li small { display: none; }

    .internal-pipeline { margin-bottom: 12px; }
    .internal-pipeline-heading { padding: 10px 12px; }
    .internal-pipeline-heading p { display: none; }
    .internal-pipeline-heading > button { padding: 5px 8px; }
    .internal-pipeline-stages button { flex-basis: 102px; min-height: 58px; padding: 7px 10px; }
    .internal-pipeline-note { padding: 5px 12px; }

    .internal-referral-filters {
        grid-template-columns: 1fr 1fr;
        padding: 0 12px 12px;
    }

    .internal-referral-filters .referral-search { grid-column: 1 / -1; }

    .internal-referral-table { min-width: 920px; }

    .internal-referral-table th,
    .internal-referral-table td {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --- Refer a client dialog ------------------------------------------------ */

/* The prototype shares this dialog between Contacts and Internal Referrals, so
   the class names stay generic even though Internal Referrals is the first page
   to use them. */

.primary-create-action {
    align-items: center;
    background: var(--rms-primary);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 5px 13px rgba(0, 0, 0, .15);
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 7px;
    margin-top: 15px;
    min-height: 40px;
    padding: 0 18px 0 14px;
    white-space: nowrap;
}

.primary-create-action span {
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    display: flex;
    font-size: 16px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.add-contact-overlay {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 90;
}

.add-contact-backdrop {
    background: rgba(12, 35, 48, .52);
    border: 0;
    inset: 0;
    padding: 0;
    position: absolute;
}

.add-contact-dialog {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(7, 41, 59, .26);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 36px);
    overflow: hidden;
    position: relative;
    width: min(680px, 100%);
}

.add-contact-dialog-header {
    align-items: center;
    border-bottom: 1px solid #e3e9ec;
    display: flex;
    justify-content: space-between;
    padding: 17px 20px 14px;
}

.add-contact-dialog-header h2 {
    color: var(--rms-secondary);
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.add-contact-dialog-header > button {
    background: transparent;
    border: 0;
    color: #6c7e87;
    font-size: 27px;
    height: 34px;
    line-height: 1;
    width: 34px;
}

.add-contact-steps {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 13px 20px;
}

/*
   Equal thirds left the last label stranded well short of the right edge, because a step only
   occupies as much of its column as its marker and text need. Letting every step but the last
   absorb the spare width puts that space into the connectors instead, so the row spans the
   dialog and keeps spanning it as the labels or the dialog change size.
*/
.add-contact-steps li {
    align-items: center;
    color: #8a979e;
    display: flex;
    flex: 1 1 auto;
    font-size: 10px;
    font-weight: 600;
    gap: 7px;
    min-width: 0;
    position: relative;
}

/* Nothing follows it, so it takes only what it needs and the row ends on the label. */
.add-contact-steps li:last-child { flex: 0 0 auto; }

/* Connector drawn behind the markers, so a completed step reads as a run. */
.add-contact-steps li:not(:last-child)::after {
    background: #dce4e8;
    content: "";
    height: 1px;
    left: 34px;
    position: absolute;
    right: 10px;
    top: 13px;
}

.add-contact-steps li span {
    align-items: center;
    background: #edf1f3;
    border-radius: 50%;
    display: flex;
    height: 26px;
    justify-content: center;
    position: relative;
    width: 26px;
    z-index: 1;
}

/* Opaque so it masks the connector running behind it rather than sitting on a struck-through line. */
.add-contact-steps li b {
    background: #fff;
    padding-right: 8px;
    position: relative;
    white-space: nowrap;
    z-index: 1;
}

.add-contact-steps li.active { color: var(--rms-secondary); }
.add-contact-steps li.active span { background: var(--rms-secondary); color: #fff; }
.add-contact-steps li.complete { color: var(--rms-success); }
.add-contact-steps li.complete span { background: #e4f3e8; color: var(--rms-success); }

.add-contact-content {
    overflow-y: auto;
    padding: 8px 20px 22px;
}

/*
   The scroll this needs for a long step is also what clips an open suggestion panel at the bottom
   edge of the content area. Only the location step opens one, and it is short enough not to need
   the scroll — so the clipping is lifted for exactly as long as a panel is open.
*/
.add-contact-content:has(.rms-autocomplete-list) { overflow: visible; }

/*
   And the dialog clips it a second time, which the rule above does not reach: .add-contact-dialog
   hides its overflow to keep the corners round, so the panel was cut at the dialog's bottom edge
   whether or not the content area let it through. Measured on the seller location step, where the
   step is short and the dialog ends just under the field: the list ran 715 to 931 against a dialog
   ending at 795, so 136 of its 216 pixels were gone and one and a half rows of eleven were
   readable.

   Lifted on the same trigger as the content area's, and safe for the same reason — the panel is
   open only while the field has focus, nothing paints into the corners while it is, and the
   overlay around the dialog does not clip. The panel opens into the space below the dialog, which
   the centred layout always leaves: the location step's dialog is the shortest of the four.
*/
.add-contact-dialog:has(.rms-autocomplete-list) { overflow: visible; }

.add-contact-step-panel > div:first-child h3 {
    color: #334d59;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
}

.add-contact-step-panel > div:first-child p {
    color: #7a8991;
    font-size: 11px;
    margin: 0 0 16px;
}

.add-contact-fields {
    display: grid;
    gap: 13px 12px;
    grid-template-columns: 1fr 1fr;
}

.add-contact-fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.add-contact-fields > .wide { grid-column: 1 / -1; }

.add-contact-fields label > span {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

.add-contact-fields input {
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    height: 40px;
    outline: none;
    padding: 0 10px;
}

.add-contact-fields input:focus {
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.add-contact-fields input[aria-invalid="true"] { border-color: var(--rms-error); }
.add-contact-fields label > small { color: var(--rms-error); font-size: 9px; }

/* A rule about the phone pair rather than about either field, so it sits under both. */
.add-contact-fields > small.wide { color: var(--rms-error); font-size: 9px; margin-top: -4px; }
.add-contact-fields > em.wide { color: #7a8991; font-size: 9px; font-style: normal; margin-top: -4px; }

/* A field filled from an existing RMS record, so it reads as reported rather
   than editable. */
.add-contact-fields input[readonly] {
    background: #f5f8f9;
    color: #60747e;
}

/* The answered email question, once RMS has been asked about it. Kept on screen rather than
   replaced so the rest of step 1 reads as being about a known address. */
.confirmed-email {
    align-items: center;
    background: #f5f8f9;
    border: 1px solid #e0e8eb;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 13px;
}

.confirmed-email > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.confirmed-email span {
    color: #526873;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.confirmed-email b {
    color: #274653;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.confirmed-email > button {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: var(--rms-secondary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 13px;
}

.confirmed-email > button:hover { border-color: var(--rms-secondary); }

/* What RMS already holds, read back for confirmation. Deliberately not inputs: the agent is
   agreeing the record stays as it is, not filling the form a second time. */
.known-contact {
    display: grid;
    gap: 1px 0;
    margin: 14px 0 0;
}

.known-contact > div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 2px;
}

.known-contact > div + div { border-top: 1px solid #eef2f4; }

.known-contact dt {
    color: #7a8991;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.known-contact dd { color: #274653; font-size: 12px; margin: 0; text-align: right; }

/* ===========================================================================
   Location autocomplete

   A real panel rather than a native <datalist>, which cannot be styled and which
   several browsers render as a bare system menu unrelated to the dialog around it.
   =========================================================================== */
.rms-autocomplete { display: flex; flex-direction: column; gap: 5px; }

.rms-autocomplete > span {
    color: #71818a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* The panel anchors to this rather than to the label, so the caption is not part of the offset. */
.rms-autocomplete-field { position: relative; }

/* Only ever shown inside the phone overlay — see the breakpoint below. A dropdown on a desktop is
   dismissed by clicking anything else, so a button there would be one more thing to explain. */
.rms-autocomplete-dismiss { display: none; }

.rms-autocomplete input {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    font: inherit;
    height: 40px;
    outline: none;
    padding: 0 34px 0 11px;
    width: 100%;
}

.rms-autocomplete input:focus {
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.rms-autocomplete.is-invalid input { border-color: var(--rms-error); }
.rms-autocomplete > small { color: var(--rms-error); font-size: 9px; }
.rms-autocomplete > em { color: #7a8991; font-size: 9px; font-style: normal; }

/* Sits inside the field's right padding, so appearing does not shift the text. */
.rms-autocomplete-busy {
    animation: rms-autocomplete-spin .6s linear infinite;
    border: 2px solid #dce4e8;
    border-radius: 50%;
    border-top-color: var(--rms-secondary);
    height: 14px;
    position: absolute;
    right: 11px;
    top: 13px;
    width: 14px;
}

@keyframes rms-autocomplete-spin { to { transform: rotate(360deg); } }

.rms-autocomplete-list {
    background: #fff;
    border: 1px solid #d7e0e5;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(20, 51, 68, .13);
    left: 0;
    list-style: none;
    margin: 4px 0 0;
    max-height: 216px;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 100%;
    /* Above the dialog's own stacking, or the panel is clipped by the field below it. */
    z-index: 20;
}

/* --- Autocomplete on a phone ---------------------------------------------------------------

   The suggestions open below the field, and on a phone the keyboard is over that. Measured on the
   emulator with the street field focused: the list ran 524 to 740 while the keyboard left only the
   first 564 visible, so all but the first row was behind it.

   The layout viewport is no help, because it does not shrink for the keyboard — innerHeight stayed
   876 while visualViewport.height reported 564. Nothing in CSS knows where the keyboard is: 100vh,
   and position: fixed with bottom: 0, are both laid out underneath it.

   So the field pins itself to the top of the screen, which is where the shipping form's
   FixedTopAutocomplete puts it, and the list opens into the space the keyboard cannot reach.

   It takes over on :focus-within — the moment the agent taps in, before there is anything to show,
   and it claims the whole visible area from that moment. Both halves of that are deliberate. The
   keyboard animates up over wherever the field happened to sit, so waiting for results would leave
   the field covered for as long as the search takes and then jump. And an opaque panel over the
   full area means the fields behind it are not half-visible under the suggestions: while this is
   open it is a search screen, not a field with a list hanging off it.

   Keyed off the DOM rather than a parameter, so it covers every autocomplete on the page at once —
   the five call sites of the component and the MLS picker that borrows its markup — and needs no
   C#. Scoped to the same 700px breakpoint as the rest of the phone layout. */
@media (max-width: 700px) {
    .rms-autocomplete:focus-within {
        background: #fff;
        box-shadow: 0 14px 34px rgba(7, 30, 42, .18);
        display: flex;
        flex-direction: column;
        left: 0;
        padding: 10px 16px 12px;
        position: fixed;
        right: 0;
        top: 0;
        /* Over the wizard's sticky footer and the step content, under a modal backdrop. */
        z-index: 90;

        /* The whole visible area, which is not any viewport unit. Measured on the emulator with
           the keyboard open: visualViewport.height was 564 while vh, dvh, svh and lvh all returned
           876 — the layout viewport does not shrink for an Android keyboard unless the host
           activity asks it to, and a MAUI BlazorWebView does not. js/viewport.js publishes the real
           figure; 100dvh is the fallback for a desktop browser, where the two agree anyway. */
        height: var(--rms-visual-height, 100dvh);
    }

    /* Small, and out of the way of the input rather than over it: the input runs the full width and
       the caption above it is short, so the corner beside the caption is the one piece of the panel
       with nothing in it. */
    .rms-autocomplete:focus-within .rms-autocomplete-dismiss {
        align-items: center;
        background: #f4f8fa;
        border: 1px solid #dde5e8;
        border-radius: 50%;
        color: #55666f;
        display: flex;
        font-size: 13px;
        height: 30px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        position: absolute;
        right: 12px;
        top: 8px;
        width: 30px;
    }

    /* The list lives inside .rms-autocomplete-field, not directly in the label, so the growing
       child has to be the field — flex on the list alone did nothing against a block parent and it
       simply overflowed, measured at 650 against a 564 overlay. The field becomes a column of its
       own so the input keeps its height and the list takes what is left. Applied while merely
       focused too, so the white below the input is one continuous panel rather than a gap. */
    .rms-autocomplete:focus-within .rms-autocomplete-field {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    /* In flow under the input rather than hung off it, and given the rest of the overlay: no cap of
       its own, so a long list fills the space and scrolls inside it instead of being cut to a
       guess. min-height: 0 on both, because a flex child will not shrink below its content
       otherwise — which is what put the bottom of the list back under the keyboard. */
    .rms-autocomplete:focus-within .rms-autocomplete-list {
        flex: 1;
        margin: 4px 0 0;
        max-height: none;
        min-height: 0;
        position: static;
    }
}

.rms-autocomplete-list li {
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
}

/* One highlight for both hover and keyboard, so the two cannot look like different states. */
.rms-autocomplete-list li:hover,
.rms-autocomplete-list li.active { background: #f2f8fb; }

.rms-autocomplete-list li b { color: #274653; font-size: 12px; font-weight: 600; }
.rms-autocomplete-list li small { color: #7a8991; font-size: 10px; }

/* "Use what I typed" — separated from the matches above it, because it is a different kind of
   answer: keeping the entry rather than choosing one RMS knows. */
.rms-autocomplete-list li.free-text {
    border-top: 1px solid #eef2f4;
    border-radius: 0 0 4px 4px;
    margin-top: 4px;
    padding-top: 10px;
}

.rms-autocomplete-list li.free-text:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 8px;
}

.rms-autocomplete-list li.free-text small { color: var(--rms-primary); }

.referral-lookup-note {
    background: #f2f8fb;
    border-left: 3px solid var(--rms-secondary);
    border-radius: 4px;
    color: #4c6470;
    font-size: 10px;
    line-height: 1.5;
    margin: 14px 0 0;
    padding: 9px 11px;
}

/* Step 1's origin choice: two cards, icon / text / tick. */
.contact-origin-options { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.contact-origin-options > button {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e0e4;
    border-radius: 7px;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px 1fr 20px;
    min-height: 82px;
    padding: 12px;
    text-align: left;
}

.contact-origin-options > button.selected {
    background: #f3f8fb;
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 1px var(--rms-secondary);
}

.contact-origin-options > button > span {
    align-items: center;
    background: #e9f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    font-size: 11px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.contact-origin-options > button:nth-child(2) > span { background: #fff0e8; color: var(--rms-primary); }
.contact-origin-options > button > div { display: flex; flex-direction: column; gap: 3px; }
.contact-origin-options b { color: #344e5a; font-size: 12px; }
.contact-origin-options small { color: #7a8991; font-size: 9.5px; line-height: 1.35; }
.contact-origin-options i { color: var(--rms-success); font-size: 16px; font-style: normal; font-weight: 800; }

/* The referral partner, shown only for a company-generated contact. A select rather than the
   prototype's free-text combobox: the value has to be a real registration source id, because the
   tenant the record is filed under is read back from it. */
.company-partner-field { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; }

.company-partner-field > span {
    color: #526873;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-partner-field select {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    height: 40px;
    outline: none;
    padding: 0 10px;
}

.company-partner-field select:focus { border-color: var(--rms-secondary); box-shadow: 0 0 0 2px rgba(7, 67, 103, .1); }
.company-partner-field select[aria-invalid="true"] { border-color: var(--rms-error); }
.company-partner-field small { color: var(--rms-error); font-size: 9px; }
.company-partner-field em { color: #7a8991; font-size: 9px; font-style: normal; }

/* Occupies the partner picker's slot, since the two are mutually exclusive. Sized to roughly the
   same height so switching origin does not resize the dialog under the agent's cursor. */
.contact-origin-warning {
    background: #fdf2f2;
    border-left: 3px solid var(--rms-error);
    border-radius: 4px;
    color: var(--rms-error);
    font-size: 10px;
    line-height: 1.5;
    margin: 16px 0 0;
    padding: 9px 11px;
}

.contact-origin-warning b { font-weight: 700; }

.contact-side-choice {
    border: 0;
    margin: 20px 0 0;
    padding: 0;
}

.contact-side-choice legend {
    color: #526873;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.contact-side-choice > div {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.contact-side-choice > div.side-choice-three { grid-template-columns: repeat(3, 1fr); }

.contact-side-choice label {
    align-items: center;
    border: 1px solid #d7e0e4;
    border-radius: 5px;
    color: #526873;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
}

.contact-side-choice label.selected {
    background: #f2f8fb;
    border-color: var(--rms-secondary);
    color: var(--rms-secondary);
}

.contact-side-choice .field-error {
    color: var(--rms-error);
    display: block;
    font-size: 9px;
    margin-top: 5px;
}

.referral-address-parts {
    display: grid;
    gap: 10px;
    grid-template-columns: 2fr 1fr 1fr;
}

.review-contact-step dl {
    border: 1px solid #e0e7ea;
    border-radius: 7px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    overflow: hidden;
}

.review-contact-step dl > div {
    border-bottom: 1px solid #e7ecee;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 11px 12px;
}

.review-contact-step dl > div:nth-child(odd) { border-right: 1px solid #e7ecee; }
.review-contact-step dl > div:nth-last-child(-n+2) { border-bottom: 0; }

.review-contact-step dt {
    color: #819098;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.review-contact-step dd {
    color: #3d5561;
    font-size: 11px;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.review-destination {
    align-items: center;
    background: #f4f8fa;
    border-radius: 6px;
    display: grid;
    gap: 2px 9px;
    grid-template-columns: 28px 1fr;
    margin: 12px 0 0;
    padding: 10px 12px;
}

.review-destination > span {
    align-items: center;
    background: #e4f0f5;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    font-size: 17px;
    grid-row: span 2;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.review-destination b { color: var(--rms-secondary); font-size: 11px; }
.review-destination small { color: #788890; font-size: 9px; }

.referral-review-notes {
    background: #f7f9fa;
    border-radius: 6px;
    margin-top: 12px;
    padding: 10px 12px;
}

.referral-review-notes b {
    color: #526873;
    font-size: 9px;
    text-transform: uppercase;
}

.referral-review-notes p {
    color: #526873;
    font-size: 10px;
    line-height: 1.45;
    margin: 5px 0 0;
    white-space: pre-wrap;
}

.referral-detail-fields {
    display: grid;
    gap: 13px;
    margin-top: 16px;
}

.referral-detail-fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.referral-detail-fields label > span {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

.referral-detail-fields input,
.referral-detail-fields textarea {
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    font: inherit;
    outline: none;
    padding: 10px;
}

.referral-detail-fields input { height: 40px; }
.referral-detail-fields textarea { min-height: 86px; resize: vertical; }

.referral-detail-fields input:focus,
.referral-detail-fields textarea:focus {
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.referral-detail-fields input[aria-invalid="true"] { border-color: var(--rms-error); }
.referral-detail-fields small { color: var(--rms-error); font-size: 9px; }

.add-contact-actions {
    align-items: center;
    border-top: 1px solid #e3e9ec;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 13px 20px;
}

.add-contact-actions button {
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    min-height: 36px;
    padding: 0 15px;
    text-transform: uppercase;
}

.add-contact-actions .secondary {
    background: #fff;
    border: 1px solid #cbd6db;
    color: #60727c;
}

.add-contact-actions .primary {
    background: var(--rms-primary);
    border: 1px solid var(--rms-primary);
    color: #fff;
}

.add-contact-actions button:disabled { cursor: not-allowed; opacity: .6; }

@media (max-width: 700px) {
    .add-contact-overlay { padding: 0; }

    .add-contact-dialog {
        border-radius: 0;
        height: 100%;
        max-height: none;
        width: 100%;
    }

    .add-contact-dialog-header { padding: 13px 14px 11px; }
    .add-contact-dialog-header h2 { font-size: 20px; }
    .add-contact-steps { padding: 10px 14px; }
    .add-contact-steps li { font-size: 9px; gap: 5px; }
    .add-contact-steps li span { height: 24px; width: 24px; }
    .add-contact-steps li:not(:last-child)::after { left: 30px; top: 12px; }
    .add-contact-content { padding: 9px 14px 18px; }
    .add-contact-step-panel > div:first-child h3 { font-size: 17px; }

    .add-contact-fields { grid-template-columns: 1fr; }
    .add-contact-fields > .wide { grid-column: auto; }

    .contact-side-choice > div,
    .contact-side-choice > div.side-choice-three { grid-template-columns: 1fr; }
    .add-contact-icon { font-size: 16px; height: 24px; width: 24px; }
    .contact-origin-options { grid-template-columns: 1fr; }
    .contact-origin-options > button { min-height: 70px; }

    .referral-address-parts { grid-template-columns: 1fr; }

    .review-contact-step dl { grid-template-columns: 1fr; }

    .review-contact-step dl > div,
    .review-contact-step dl > div:nth-child(odd),
    .review-contact-step dl > div:nth-last-child(-n+2) {
        border-bottom: 1px solid #e7ecee;
        border-right: 0;
    }

    .review-contact-step dl > div:last-child { border-bottom: 0; }

    .add-contact-actions { margin-top: auto; padding: 11px 14px; }
    .add-contact-actions button { min-height: 40px; }
}

/* ===========================================================================
   Opportunity record
   Ported from the design prototype's opportunity blocks.

   The prototype prefixes these .new-lead-*, because the new-lead screen was
   drawn first and the transactional record reuses its shapes. Renamed to
   .opportunity-* here: one page serves both states, and a class called
   "new lead" on a closed escrow would be actively misleading to the next
   person reading it.
   =========================================================================== */

.opportunity-breadcrumb {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.opportunity-breadcrumb a {
    color: var(--rms-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.opportunity-breadcrumb a:hover { text-decoration: underline; }

/* --- Client header -------------------------------------------------------- */

.opportunity-contact-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 18px 20px;
}

/* Two lines: who the client is, then how to reach them. The avatar used to sit beside a stack
   of name, chips and contact links, which made it the sibling of all three and left it centred
   against a block whose height it had nothing to do with. */
.opportunity-person {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* The avatar beside the name, topped with it rather than centred against it. The name and its
   milestone stack to roughly the avatar's own height, so centring the circle against the pair
   left it sitting a few pixels low against the line it belongs to. */
.opportunity-identity {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

.opportunity-avatar {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 auto;
    /* Column so the icon can sit above the word it labels. A single initial is unaffected. */
    flex-direction: column;
    font-size: 17px;
    font-weight: 800;
    gap: 2px;
    height: 52px;
    justify-content: center;
    line-height: 1;
    width: 52px;
}

/* The same buy and sell colours the tables use, so a record reads the same in a list and on
   its own page. Only applied when the avatar is carrying the side. */
.opportunity-avatar.buy { background: #f0ecfa; color: #5936a2; }
.opportunity-avatar.sell { background: #e8f8f3; color: #138763; }

/* The colour is stated rather than inherited. Metronic styles every icon <i> — its selector is
   `i.bi, i[class^="fa-"], i[class*=" fa-"]` and friends — with color: var(--bs-text-muted), which
   beats inheritance and left the glyph grey inside a circle whose text was buy purple or sell
   green. */
.opportunity-avatar i {
    color: inherit;
    font-size: 21px;
}

/* Small enough to clear the rim of a 52px circle with the icon above it. */
.opportunity-avatar-side {
    font-size: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opportunity-identity-text { min-width: 0; }

.opportunity-identity h1 {
    color: var(--rms-secondary);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
}

/* Under the name, so it keeps the small gap that separates them. */
.opportunity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.opportunity-stage-chip {
    background: #eef3f6;
    border-radius: 4px;
    color: #47606d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 7px;
    text-transform: uppercase;
}

/* Its own line now, so the column gap above owns the separation. */
.opportunity-contact-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.opportunity-contact-inline a {
    color: var(--rms-secondary);
    font-size: 11px;
    text-decoration: none;
}

.opportunity-contact-inline a:hover { text-decoration: underline; }

.opportunity-contact-inline .opportunity-slot-action { align-self: flex-end; }

/* The label sits above its value so the two read as one field rather than a
   run-on sentence. */
.opportunity-contact-inline a span {
    color: #8595a0;
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.opportunity-source {
    background: #f6f9fa;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: right;
}

.opportunity-source span {
    color: #8595a0;
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.opportunity-source strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 14px;
    margin-top: 2px;
}

.opportunity-source small {
    color: #7b8a92;
    display: block;
    font-size: 9px;
}

/* --- Sections ------------------------------------------------------------- */

.opportunity-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.opportunity-main-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Follow-ups come before notes at every width, and it is done in the markup rather than
   here. A task has a due date and is something the agent has to do, where a note is
   context they read; the other way round put the note composer — a textarea that is never
   the reason someone opened the record — between them and their own outstanding work.

   This was briefly a set of mobile-only `order` rules. Moving the sections instead means
   the reading and tab order match what is on screen, which `order` cannot do, and there is
   no breakpoint where the two disagree. */

.opportunity-section {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    padding: 18px 20px;
}

.opportunity-section-heading {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.opportunity-section-heading h2 {
    color: var(--rms-secondary);
    font-size: 18px;
    font-weight: 600;
    margin: 3px 0 4px;
}

.opportunity-section-heading > div > p:last-child {
    color: #7b8a92;
    font-size: 11px;
    margin: 0;
}

/* --- Status tracker ------------------------------------------------------- */

.opportunity-current-stage {
    background: #f4f8fa;
    border-radius: 8px;
    min-width: 150px;
    padding: 9px 12px;
    text-align: right;
}

.opportunity-current-stage span {
    color: #8595a0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.opportunity-current-stage em {
    color: #7b8a92;
    font-size: 9px;
    font-style: normal;
    margin-left: 5px;
}

.opportunity-current-stage strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 15px;
    margin-top: 2px;
}

/* Scrolls sideways when the milestones do not fit, with the bar itself hidden: on a
   classic scrollbar it was drawn across the milestone labels, and the labels are the
   content. Scrolling still works by touch, wheel and trackpad — only the indicator goes.
   What is left to say there is more either side is the clipped neighbour on each edge,
   which the centring in tracker.js keeps in view on purpose. */
.opportunity-progress-tracker {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.opportunity-progress-tracker::-webkit-scrollbar { display: none; }

.opportunity-progress-tracker li {
    align-items: center;
    color: #8b98a0;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 7px;
    min-width: 96px;
    position: relative;
    text-align: center;
}

/* Connector between markers, drawn behind them and stopping at the last. */
.opportunity-progress-tracker li:not(:last-child)::after {
    background: #dfe6ea;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    right: -50%;
    top: 13px;
}

.opportunity-progress-tracker li.complete:not(:last-child)::after { background: var(--rms-success); }

.opportunity-progress-tracker li i {
    align-items: center;
    background: #eef2f4;
    border-radius: 50%;
    color: #7d8b93;
    display: flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    position: relative;
    width: 28px;
    z-index: 1;
}

.opportunity-progress-tracker li span {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    padding: 0 4px;
}

.opportunity-progress-tracker li.complete i { background: #e4f3e8; color: var(--rms-success); }
.opportunity-progress-tracker li.complete { color: #5d6c74; }

.opportunity-progress-tracker li.current i {
    background: var(--rms-secondary);
    box-shadow: 0 0 0 4px rgba(7, 67, 103, .12);
    color: #fff;
}

.opportunity-progress-tracker li.current {
    color: var(--rms-secondary);
    font-weight: 700;
}

/* --- Moving the record ---------------------------------------------------- */

/* Separated from the tracker by a rule rather than a gap: it is a different kind of
   thing — the tracker reports, this acts — and on a narrow viewport the tracker
   scrolls horizontally right up to its edge. */
.opportunity-move {
    border-top: 1px solid #eef2f4;
    margin-top: 16px;
    padding-top: 14px;
    position: relative;
}

.opportunity-move-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.opportunity-move-label {
    color: #5f6b72;
    font-size: 12px;
}

.opportunity-move .primary {
    background: var(--rms-primary);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-move .quiet {
    background: none;
    border: 0;
    color: #5f6b72;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 14px;
    text-transform: uppercase;
}

.opportunity-move-more {
    background: #fff;
    border: 1px solid #cfd8dd;
    border-radius: 5px;
    color: var(--rms-secondary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 13px;
    text-transform: uppercase;
}

/* Closing a record is the one destructive action here, so its button says so rather
   than wearing the same orange as moving a milestone forward. Scoped to the confirm
   strip: the menu has its own .stop item, which is a red label on white, not a red
   button, and a looser selector here would repaint it. */
.opportunity-move-confirm .stop {
    background: var(--rms-error);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-move .primary:disabled,
.opportunity-move .quiet:disabled,
.opportunity-move-confirm .stop:disabled {
    cursor: default;
    opacity: .6;
}

/* Confirm before moving, and say what happened while doing it. Stacked rather than a
   single row: the update is required, so the field is the point of the strip and not an
   afterthought beside the buttons. */
.opportunity-move-confirm {
    background: #fff8f4;
    border: 1px solid #f7d3bf;
    border-radius: 8px;
    padding: 12px 14px;
}

/* The strip's own opening line, and only that.

   Written as a bare descendant selector it also styled every paragraph inside the components the
   strip hosts — the date field's resolved value and the upload's title are both <p> — and beat
   their own rules on specificity. That is why the resolved date came out 13px with a 10px bottom
   margin it never asked for, which pushed it 5px above the centre of the button beside it. Same
   mistake as the `> div` rule that once caught this strip's date field; a container styling bare
   tags reaches further than it means to. */
.opportunity-move-confirm > p {
    color: var(--rms-secondary);
    font-size: 13px;
    margin: 0 0 10px;
}

.opportunity-move-confirm strong { font-weight: 700; }

/* The break-end date, above the update rather than beside it: it is the narrower field
   and putting the two on one row leaves the textarea too short to type into. */
/* Spacing only, around the date field. The label, input and hint rules that used to live
   here belonged to the native <input type="date"> this replaced; once the field became a
   component they were reaching inside it and restyling its own spans, so they moved to
   .opportunity-move-reason — the one control in this strip that still needs them. */
.opportunity-move-break {
    display: block;
    margin-bottom: 10px;
}

/* The inactive-reason picker: a label wrapping its own text and select. */
.opportunity-move-reason {
    display: block;
    margin-bottom: 10px;
}

.opportunity-move-reason span {
    color: #5f6b72;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.opportunity-move-reason select {
    background: #fff;
    border: 1px solid #e4d2c6;
    border-radius: 8px;
    color: var(--rms-text);
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
}

/* Fills its container and never exceeds it.

   This used to set min-width: 260px, so a reason like "Member Unresponsive/Lost Contact" would
   not be truncated. But min-width beats max-width in the cascade, so on a phone narrower than
   about 360px the select pushed straight out of the card — and it did the same in the narrower
   of the two cancel columns between 701px and 1100px. Width comes from the container now, which
   is wide enough to read a reason everywhere it is wide enough to have one. */
.opportunity-move-reason select {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* Capped only where the strip is one full-width column, so a one-line picker does not run the
   whole width of the card. Inside the two-up cancel layout the column is already the cap. */
@media (min-width: 701px) {
    .opportunity-move-fields:not(.two-up) .opportunity-move-reason select {
        max-width: 360px;
    }
}

.opportunity-move-reason select:focus {
    border-color: var(--rms-primary);
    outline: none;
}

.opportunity-move-reason small {
    color: #8b98a0;
    display: block;
    font-size: 11px;
    margin-top: 4px;
}

/* Matches the note field in the notes card rather than inventing a second textarea
   style; the white fill is what separates it from the strip's tinted ground. */
.opportunity-move-confirm textarea {
    background: #fff;
    border: 1px solid #e4d2c6;
    border-radius: 8px;
    color: var(--rms-text);
    display: block;
    font: inherit;
    font-size: 13px;
    min-height: 76px;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

.opportunity-move-confirm textarea:focus {
    border-color: var(--rms-primary);
    outline: none;
}

.opportunity-move-confirm textarea:disabled {
    background: #faf7f5;
    color: var(--rms-muted);
}

/* The strip's own footer, by class rather than as "> div". As a descendant selector this
   caught every div the strip gained later — including the wrapper around the date field,
   which it right-aligned into the far corner of a wide card. */
.opportunity-move-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.opportunity-move-error {
    color: var(--rms-error);
    font-size: 12px;
    margin: 10px 0 0;
}

/* In flow rather than absolutely positioned: the card grows to fit it. A floating
   panel would be clipped by the status card's own rounding on a short viewport.

   Full width with columns sharing it equally, one per group. Content-width columns
   left most of the card empty, which is what this replaced. */
.opportunity-move-menu {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(7, 67, 103, .12);
    display: flex;
    margin-top: 10px;
}

/*
    The extension panel, on the same card-below-the-row footing as the move menu so the two read as
    the same kind of thing opening in the same place. Its own class rather than the menu's: that one
    is a row of columns of buttons, this is a short form, and they share only the container.
*/
.opportunity-extend {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(7, 67, 103, .12);
    margin-top: 10px;
    padding: 16px;
}

/* Side by side while there is room; the date needs the width, so it goes first and takes more. */
.opportunity-extend-fields {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.opportunity-extend-price {
    display: grid;
    gap: 5px;
}

.opportunity-extend-price > span {
    color: #5f6b72;
    font-size: 11px;
    font-weight: 600;
}

.opportunity-extend-price input {
    border: 1px solid #c7d3d9;
    border-radius: 5px;
    font-size: 13px;
    min-height: 38px;
    padding: 0 11px;
    width: 100%;
}

.opportunity-extend-price input:disabled { background: #f5f8f9; }

.opportunity-extend footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.opportunity-extend footer button {
    background: #fff;
    border: 1px solid #c7d3d9;
    border-radius: 4px;
    color: #4e626c;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 15px;
    text-transform: uppercase;
}

.opportunity-extend footer button.primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.opportunity-extend footer button:disabled { cursor: default; opacity: .6; }

@media (max-width: 700px) {
    /* Stacked, because two of these side by side on a phone leaves neither usable. */
    .opportunity-extend-fields { grid-template-columns: 1fr; }
}

/* minmax(0) equivalent: flex-basis 0 with min-width 0, so a long milestone name wraps
   inside its column rather than pushing the column past its share. */
.opportunity-move-column {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 0;
}

/* Divides the groups. Drawn on the later columns so a lone column has no stray edge,
   and stretched by the flex row so the rule runs full height whichever column is
   tallest. */
.opportunity-move-column + .opportunity-move-column {
    border-left: 1px solid #eef2f4;
}

.opportunity-move-group {
    color: #8595a0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 6px 0 2px;
    padding: 0 14px;
    text-transform: uppercase;
}

.opportunity-move-group:not(:first-child) {
    border-top: 1px solid #eef2f4;
    margin-top: 8px;
    padding-top: 10px;
}

.opportunity-move-menu button,
.opportunity-move-menu a {
    background: none;
    border: 0;
    color: var(--rms-secondary);
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 7px 14px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.opportunity-move-menu button:hover:not(:disabled),
.opportunity-move-menu a:hover { background: #f4f8fa; }

.opportunity-move-menu button.stop { color: var(--rms-error); }

.opportunity-move-menu button:disabled {
    color: #a8b2b8;
    cursor: default;
}

.opportunity-move-menu small {
    color: #8b98a0;
    display: block;
    font-size: 11px;
}

@media (max-width: 700px) {
    .opportunity-move-actions { align-items: stretch; flex-direction: column; }
    .opportunity-move-actions .primary,
    .opportunity-move-more { text-align: center; width: 100%; }

    /* Columns do not fit a phone, so they stack into one list and the divider turns to
       match. This is the layout to want here regardless: full-width rows are the
       easiest thing on the page to tap, needing no horizontal aim at all.

       flex reset to auto because the row's "1 1 0" would divide the container's height
       between the groups once the direction flips, rather than letting each take what
       its own rows need. */
    .opportunity-move-menu { flex-direction: column; }
    .opportunity-move-column { flex: 0 0 auto; }

    .opportunity-move-column + .opportunity-move-column {
        border-left: 0;
        border-top: 1px solid #eef2f4;
    }
}

/* --- Details -------------------------------------------------------------- */

/* Cells carry their own border rather than showing a shared background through
   1px gaps: with auto-fit the last row is rarely full, and the gap trick paints
   a phantom cell wherever an item is missing. */
.opportunity-details-card dl {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
}

.opportunity-details-card dl > div {
    background: #fff;
    border: 1px solid #e7ecee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
}

.opportunity-details-card .address { grid-column: 1 / -1; }

.opportunity-details-card dt {
    color: #819098;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opportunity-details-card dd {
    color: #3d5561;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.opportunity-details-card dd small {
    color: #7b8a92;
    display: block;
    font-size: 10px;
    font-weight: 400;
    margin-top: 2px;
}

/* A close date already gone by is the one fact on this panel an agent has to
   act on, so it is the one that gets colour. */
.opportunity-details-card .overdue-date dd { color: var(--rms-error); }
.opportunity-details-card .overdue-date dd small { color: var(--rms-error); }

/* --- The client ----------------------------------------------------------- */

/* Same tiles as the panel below, so the two read as one idea. The note and the
   partner's guidance take the width of the card because both are prose rather
   than a figure, and the location tile takes it through the shared .address
   rule above. */
.opportunity-client-card .notes,
.opportunity-client-card .guidance { grid-column: 1 / -1; }

/* The guidance carries its own type scale, so the tile only has to stop being a
   figure and set its attribution apart from the advice above it. */
.opportunity-client-card .guidance dd { font-weight: 400; }

.opportunity-client-card .guidance dd small { margin-top: 6px; }

/* The note is the partner's own typing, line breaks and all, so it keeps them
   instead of being reflowed into one run. Set lighter than the figures beside
   it: it is something to read rather than a number to check. */
.opportunity-client-card .notes dd {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* --- Commission note ----------------------------------------------------- */

.opportunity-cda-footer {
    color: #88959b;
    font-size: 10px;
    line-height: 1.5;
    margin: 12px 0 0;
}

/* --- Partner guidance ----------------------------------------------------- */

/* Authored elsewhere and stored as HTML, so its own tags are normalised to this
   page's scale rather than left at browser defaults. */
.opportunity-guidance-body {
    color: #55686f;
    font-size: 12px;
    line-height: 1.6;
}

.opportunity-guidance-body :is(h1, h2, h3, h4) {
    color: var(--rms-secondary);
    font-size: 13px;
    font-weight: 700;
    margin: 12px 0 5px;
}

.opportunity-guidance-body p { margin: 0 0 9px; }
.opportunity-guidance-body ul, .opportunity-guidance-body ol { margin: 0 0 9px; padding-left: 20px; }
.opportunity-guidance-body a { color: var(--rms-secondary); }
.opportunity-guidance-body img { height: auto; max-width: 100%; }

/* It sits in a tile now, and the authored markup's last paragraph would
   otherwise push the attribution under it away from its own text. */
.opportunity-guidance-body > :last-child { margin-bottom: 0; }


/* --- Breakpoints ---------------------------------------------------------- */

@media (min-width: 1100px) {
    /* The team panel moves beside the record once there is room for it. Below
       this it stacks underneath, which is also what the mobile host gets. */
    .opportunity-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 700px) {
    .opportunity-contact-card {
        align-items: stretch;
        flex-direction: column;
        /* Wrapping is for the desktop row, where the referral source drops below the client. As a
           column it does real damage: a wrapping flex container sizes each line to its content, so
           align-items: stretch stretched the rows to the widest thing in them instead of clamping
           them to the card — and one long email address pushed the whole page sideways. */
        flex-wrap: nowrap;
        gap: 14px;
        padding: 15px 16px;
    }

    /* Both on one line. A phone is a known width, so the two of them wrapping spent a whole row
       saying what fits on one — and the row it cost was above the update buttons.

       min-width and overflow are what make that safe. A flex item's automatic minimum is its
       min-content width, and an email address has no break opportunities — so without these the
       row refused to shrink below the full address and pushed the whole page sideways instead of
       letting the ellipsis do its job. */
    .opportunity-contact-inline {
        flex-wrap: nowrap;
        gap: 14px;
        min-width: 0;
        overflow: hidden;
    }

    /* Matched on the scheme rather than on position: a record with no phone puts the email
       first, and ordinal selectors would then shrink the wrong one. */
    .opportunity-contact-inline a[href^="tel:"] { flex: 0 0 auto; }

    /* Held at its own width for the same reason as the phone: the row does not wrap here, and
       an Edit that shrank would be the one control on the line you cannot read. */
    .opportunity-contact-inline .opportunity-slot-action { flex: 0 0 auto; }

    /* The email yields. It is the longer of the two and the one that survives truncation — a
       part-shown address still identifies the client, where half a phone number is useless.
       Tapping it still opens the full address, and the title carries it for anyone hovering. */
    .opportunity-contact-inline a[href^="mailto:"] {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opportunity-identity h1 { font-size: 20px; }

    .opportunity-source { text-align: left; }

    .opportunity-section { padding: 15px 16px; }

    .opportunity-section-heading h2 { font-size: 16px; }

    .opportunity-current-stage {
        min-width: 0;
        text-align: left;
        width: 100%;
    }

    .opportunity-details-card dl { grid-template-columns: 1fr; }
}

/* --- Notes, tasks, documents, activity, team ------------------------------ */

.opportunity-section-heading > button,
.opportunity-section-actions > button {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 5px;
    color: #536873;
    font-size: 10px;
    font-weight: 700;
    min-height: 34px;
    padding: 0 13px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Holds a section's own actions together at the end of its heading. Without it the
   heading's space-between pushes two buttons apart, one to each end of the row. */
.opportunity-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opportunity-section-actions > button:disabled {
    color: #97a5ad;
    opacity: .7;
}

.opportunity-section-note {
    color: #88959b;
    font-size: 10px;
    line-height: 1.5;
    margin: 11px 0 0;
}

.opportunity-inline-error {
    color: var(--rms-error);
    font-size: 10px;
    margin: 9px 0 0;
}

.opportunity-empty {
    background: #f8fafb;
    border: 1px dashed #d9e2e6;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
}

.opportunity-empty b {
    color: #47606d;
    display: block;
    font-size: 12px;
}

.opportunity-empty span {
    color: #8595a0;
    font-size: 11px;
}

/* Tasks ------------------------------------------------------------------- */

.opportunity-task-form {
    background: #f8fafb;
    border: 1px solid #e2e8eb;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 14px;
}

.opportunity-task-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: 2fr 1fr;
}

.opportunity-task-fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.opportunity-task-fields label.description { grid-column: 1 / -1; }

.opportunity-task-fields label > span {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

.opportunity-task-fields input,
.opportunity-task-fields textarea {
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    font: inherit;
    outline: none;
    padding: 9px 10px;
}

.opportunity-task-fields input { height: 38px; }
.opportunity-task-fields textarea { resize: vertical; }

.opportunity-task-fields label > small {
    color: #8595a0;
    font-size: 9px;
    text-align: right;
}

.opportunity-task-form footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.opportunity-task-form footer button {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #60727c;
    font-size: 10px;
    font-weight: 700;
    min-height: 34px;
    padding: 0 15px;
    text-transform: uppercase;
}

.opportunity-task-form footer .primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.opportunity-task-form footer .primary:disabled { opacity: .6; }

.opportunity-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opportunity-task-list article {
    background: #fff;
    border: 1px solid #e7ecee;
    border-left: 3px solid #cfd8dd;
    border-radius: 7px;
    padding: 11px 13px;
}

.opportunity-task-list article.overdue { border-left-color: var(--rms-error); }
.opportunity-task-list article.completed { border-left-color: var(--rms-success); opacity: .75; }

.opportunity-task-list article > span {
    align-items: center;
    color: #8595a0;
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opportunity-task-list article > span b { color: var(--rms-error); }

.opportunity-task-list article h3 {
    color: #344e5a;
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 0;
}

.opportunity-task-list article p {
    color: #60747e;
    font-size: 11px;
    line-height: 1.5;
    margin: 4px 0 0;
}

/* The answer given when a task was closed. Set on a tinted ground so it reads as
   reported speech rather than more of the card's own labelling — on a milestone task it
   is the only part an agent actually wrote. */
.opportunity-task-disposition {
    background: #f4f8fa;
    border-radius: 6px;
    margin-top: 8px;
    padding: 8px 10px;
}

.opportunity-task-disposition span {
    color: #8595a0;
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* pre-line, because the stored text is the agent's words then the milestone change on
   its own line; collapsing that runs the two into one sentence. Selector carries the
   list and article to out-specify ".opportunity-task-list article p" above without
   reaching for !important. */
.opportunity-task-list article .opportunity-task-disposition p {
    color: #4c5f69;
    margin: 3px 0 0;
    white-space: pre-line;
}

/* Documents and activity --------------------------------------------------- */

.opportunity-document-list,
.opportunity-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.opportunity-document-list li {
    align-items: center;
    background: #f8fafb;
    border-radius: 7px;
    display: flex;
    gap: 11px;
    padding: 10px 12px;
}

.opportunity-document-list li i {
    color: var(--rms-secondary);
    flex: 0 0 auto;
    font-size: 15px;
}

.opportunity-document-list b {
    color: #344e5a;
    display: block;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.opportunity-document-list small,
.opportunity-activity-list small {
    color: #8595a0;
    font-size: 10px;
}

/*
    The row's SkySlope standing, on its own line under the name and meta. Beside the name it does
    not fit: this card is a ~300px sidebar column and RMS names uploaded files with a GUID, so the
    two compete and both lose. `display: block` rather than inline-block because the meta above is
    inline — without it these would try to share that line whenever it happened to be short.
*/
.opportunity-document-send,
.opportunity-document-state {
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 7px;
    white-space: nowrap;
    width: fit-content;
}

.opportunity-document-send {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 5px;
    color: var(--rms-secondary);
    cursor: pointer;
    min-height: 30px;
    padding: 0 11px;
    text-transform: uppercase;
}

.opportunity-document-send:hover:enabled { border-color: var(--rms-secondary); }

.opportunity-document-send:disabled { cursor: default; opacity: .6; }

/* Stated, not celebrated — it is the resting state for anything already filed. */
.opportunity-document-state {
    color: #8595a0;
    text-transform: uppercase;
}

/*
    SkySlope was asked and does not have it. Coloured because it contradicts what RMS recorded and
    is the one case here worth catching an eye, but left as text: the fix is the button under it,
    so this only has to name the problem.
*/
.opportunity-document-state.is-missing {
    color: var(--rms-error);
    margin-bottom: 2px;
}

/*
    A document that lives only in SkySlope. Reads as a link rather than a button — it leaves RMS
    and changes nothing here — and stays quiet: these rows are for completeness, not for action.
*/
.opportunity-document-open {
    color: var(--rms-secondary);
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 7px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}

.opportunity-document-open::after {
    content: "↗";
    font-size: 11px;
    margin-left: 4px;
}

.opportunity-document-open:hover { text-decoration: underline; }

/*
    The two things offered on a SkySlope-only row. Wrapping rather than shrinking: this card is a
    ~300px sidebar column and the link and the button do not fit beside each other in it, so on a
    narrow card they stack instead of squeezing.
*/
.opportunity-document-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 7px;
}

/* Already spaced by the flex gap above. */
.opportunity-document-actions > .opportunity-document-open,
.opportunity-document-actions > .opportunity-document-send {
    margin-top: 0;
}

/* --- Attach a document to a SkySlope checklist item ------------------------ */

/*
    On the generic .rms-modal shell, like the contact dialog. Narrower than that one because this
    is a list to pick from rather than a form to fill in, and capped so a checklist of thirty items
    scrolls inside the panel rather than running off the screen.
*/
.rms-attach-modal {
    max-width: 460px;
    padding: 22px;
    width: 100%;
}

.rms-attach-modal header { margin-bottom: 14px; }

.rms-attach-modal h2 {
    color: var(--rms-secondary);
    font-size: 18px;
    margin: 0;
}

/* The document being filed. Breaks anywhere because RMS names uploads with a GUID. */
.rms-attach-modal header p {
    color: #71838c;
    font-size: 11px;
    line-height: 1.45;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.rms-attach-section + .rms-attach-section { margin-top: 14px; }

.rms-attach-section h3 {
    color: #71838c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.rms-attach-section ul {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each requirement is the target, so the whole row is the button rather than a control inside it. */
.rms-attach-section li button {
    background: #f8fafb;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    display: block;
    padding: 9px 11px;
    text-align: left;
    width: 100%;
}

.rms-attach-section li button:hover:enabled {
    background: #fff;
    border-color: var(--rms-secondary);
}

.rms-attach-section li button:disabled { cursor: default; opacity: .6; }

.rms-attach-section li button span {
    color: #33454f;
    display: block;
    font-size: 12px;
    line-height: 1.35;
}

.rms-attach-section li button small {
    color: #8595a0;
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

.rms-attach-busy {
    color: var(--rms-secondary);
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

.rms-attach-modal footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.rms-attach-modal footer button {
    background: #fff;
    border: 1px solid #c7d3d9;
    border-radius: 4px;
    color: #4e626c;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 15px;
    text-transform: uppercase;
}

.opportunity-activity-list li {
    align-items: baseline;
    border-bottom: 1px solid #eef2f4;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 0;
}

.opportunity-activity-list li:last-child { border-bottom: 0; }

.opportunity-activity-list b {
    color: #47606d;
    font-size: 12px;
    font-weight: 600;
}

/* Team --------------------------------------------------------------------- */

.opportunity-related-card {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    height: fit-content;
    padding: 18px 20px;
}

.opportunity-related-card article {
    border-top: 1px solid #eef2f4;
    display: flex;
    gap: 12px;
    padding: 13px 0 0;
}

.opportunity-related-card article:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.opportunity-related-card article + article { margin-top: 13px; }

.opportunity-related-icon {
    align-items: center;
    background: #e8f2f7;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.opportunity-related-card article span {
    color: #8595a0;
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.opportunity-related-card article strong {
    color: #344e5a;
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.opportunity-related-card article small {
    color: #97a3ab;
    font-size: 10px;
    font-style: italic;
}

.opportunity-related-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 5px;
}

.opportunity-related-links a {
    color: var(--rms-secondary);
    font-size: 11px;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: #b5c8d2;
    text-underline-offset: 2px;
}

/* ── managed contact slots ───────────────────────────────────────────
   lender, escrow and the rest, drawn by RelatedContactSlot and scoped further down. The Edit
   and error rules below belong to the main contact in the page header, which is edited in
   ContactDialog — the form rules that used to sit here went with the inline form it replaced. */
.opportunity-slot > div:last-child { flex: 1 1 auto; min-width: 0; }

/* Quiet until wanted: an Edit that shouted would compete with the name it
   sits beside, which is the thing being read. */
.opportunity-slot-action {
    background: none;
    border: 0;
    color: var(--rms-secondary);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: #b5c8d2;
    text-transform: uppercase;
    text-underline-offset: 2px;
}

.opportunity-slot-action:disabled { cursor: default; opacity: .5; }

.opportunity-slot-error {
    color: #b3402f;
    font-size: 11px;
    margin: 8px 0 0;
}

/* ── RelatedContactSlot inside this card ─────────────────────────────
   narrower than the escrow steps it was drawn for: the lookup stacks, and the
   card's micro-caps apply to the role but not to the slot's own field labels. */
.opportunity-related-card .escrow-contact-slot { gap: 8px; margin-top: 0; }

.opportunity-related-card .escrow-contact-slot span {
    color: #60747e;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.opportunity-related-card .escrow-existing-contact > span {
    color: #8595a0;
    font-size: 8px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* back to a field label, the same one the main contact's own form uses. */
.opportunity-related-card .escrow-standalone-field > span {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

.opportunity-related-card .escrow-standalone-field input { font-size: 12px; height: 34px; }

/* stacked: too narrow for an address and a button side by side. */
.opportunity-related-card .escrow-lookup,
.opportunity-related-card .escrow-standalone-field.with-keep .escrow-lookup {
    grid-template-columns: 1fr;
}

.opportunity-related-card .escrow-lookup button,
.opportunity-related-card .escrow-secondary-action { min-height: 32px; }

.opportunity-related-card .escrow-resolved-contact,
.opportunity-related-card .escrow-mapping-note { margin-top: 0; padding: 9px 11px; }

@media (max-width: 700px) {
    .opportunity-task-fields { grid-template-columns: 1fr; }
    .opportunity-task-fields label.description { grid-column: auto; }

    .opportunity-related-card { padding: 15px 16px; }
}

/* ===========================================================================
   Open Escrow wizard
   Ported from the design prototype's escrow blocks.
   =========================================================================== */

/*
    The refined workspace from the prototype's "quiet rail, focused form, live deal
    context" block, which supersedes its earlier top-stepper layout — the prototype
    ships both, and the later rules win the cascade there.

    Two deliberate departures. The prototype is a modal: a fixed backdrop, a dialog
    role and a close button, sized to the viewport. This is a page inside the RMS
    shell, so the backdrop and the close button are gone and the header is a page
    header rather than a bar over a scrim.

    The prototype also gives the panel its own scrollbar (height: 100vh - 74px,
    overflow-y: auto). Nested inside .rms-main, which already scrolls under a fixed
    64px appbar, that would put a second scrollbar inside the first. The page scrolls
    normally instead, and only the footer is sticky. The cost is that the rail scrolls
    away on a long step where the prototype keeps it in view; the alternative was a
    scrollbar inside a scrollbar, which is worse.

    Sizes are rescaled to this sheet's base, not copied: RMS runs 14px body and an
    11px kicker where the prototype runs roughly 10px and 8px. Colours are the
    prototype's exactly.
*/

/*
    Back to the record the wizard was opened from. Matches .opportunity-breadcrumb rather than
    reusing it — that name belongs to the record page, and two pages wanting the same treatment is
    not a reason for one to answer to the other's class.
*/
.escrow-breadcrumb {
    align-items: center;
    display: flex;
    margin-bottom: 14px;
}

.escrow-breadcrumb a {
    color: var(--rms-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.escrow-breadcrumb a:hover { text-decoration: underline; }

.escrow-wizard-header {
    align-items: flex-start;
    border-bottom: 1px solid #dce3e6;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.escrow-wizard-header h1 {
    color: var(--rms-secondary);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 3px 0 4px;
}

.escrow-wizard-header > div > p:last-child {
    color: #687b85;
    font-size: 12px;
    margin: 0;
}

.escrow-back-link {
    color: var(--rms-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.escrow-back-link:hover { text-decoration: underline; }

/* --- Workspace: rail + panel ---------------------------------------------- */

.escrow-wizard-workspace {
    display: grid;
    gap: 0;
    grid-template-columns: 230px minmax(0, 1fr);
    /* Both columns stretch to the taller of the two, so the rail and the panel read
       as one card the way they do in the design. The floor keeps a short step — step
       one is three upload rows — from collapsing the panel to less than the rail. */
    min-height: calc(100vh - 250px);
}

.escrow-wizard-rail {
    background: #f7f9fa;
    border: 1px solid #e0e6e9;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 16px 18px;
}

.escrow-stepper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.escrow-stepper button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #72848d;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 9px;
    justify-content: flex-start;
    min-height: 43px;
    padding: 7px 9px;
    position: relative;
    text-align: left;
    width: 100%;
}

/* The connector between consecutive steps, drawn from the marker's centre line. */
.escrow-stepper button::after {
    background: #d7e0e4;
    bottom: -5px;
    content: "";
    height: 10px;
    left: 20px;
    position: absolute;
    width: 1px;
}

.escrow-stepper button:last-child::after { display: none; }

.escrow-stepper button i {
    align-items: center;
    background: #fff;
    border: 1px solid #c8d4da;
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    height: 23px;
    justify-content: center;
    width: 23px;
}

.escrow-stepper button.active { background: #eaf3f7; color: var(--rms-secondary); }

.escrow-stepper button.active i {
    background: var(--rms-secondary);
    border-color: var(--rms-secondary);
    color: #fff;
}

.escrow-stepper button.complete i {
    background: #e3f3eb;
    border-color: #b8ddcc;
    color: var(--rms-success);
}

/* Steps not yet reached. Navigation is gated: Continue is the only way forward,
   so an unvisited step is inert rather than a link to an unvalidated form. */
.escrow-stepper button:disabled {
    color: #a6b2b9;
    cursor: default;
}

.escrow-stepper button:disabled i { color: #a6b2b9; }

/* --- Deal snapshot -------------------------------------------------------- */

.escrow-deal-preview {
    border-top: 1px solid #dde5e8;
    margin-top: 24px;
    padding-top: 16px;
}

.escrow-deal-preview > p {
    color: #829198;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.escrow-deal-preview > strong {
    color: #3d5662;
    display: block;
    font-size: 13px;
    line-height: 1.35;
}

.escrow-deal-preview > span {
    color: #778991;
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.escrow-deal-preview dl {
    display: grid;
    gap: 8px;
    margin: 15px 0 0;
}

.escrow-deal-preview dl div {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.escrow-deal-preview dt { color: #84939a; font-size: 11px; }

.escrow-deal-preview dl div {
    align-items: baseline;
}

/* The label yields, the figure does not. These two lines are what keeps every value in the rail
   ending on the same edge: a label long enough to fill the row used to push its own figure past
   that edge, because the label would not shrink and the figure would. Reversed, an over-long
   label wraps to a second line instead — which reads fine, and leaves the column of numbers
   straight. */
.escrow-deal-preview dt { flex: 0 1 auto; min-width: 0; }

.escrow-deal-preview dd {
    color: #405762;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* The sum, set apart from what it sums. A rule above rather than a fill behind it: the rail
   already carries a tinted block for the property, and a second one here would compete with it
   for the eye on a card this small. */
.escrow-deal-preview .escrow-deal-total {
    border-top: 1px solid #dde5e9;
    margin-top: 3px;
    padding-top: 7px;
}

.escrow-deal-preview .escrow-deal-total dt { color: var(--rms-secondary); font-weight: 700; }

.escrow-deal-preview .escrow-deal-total dd {
    color: var(--rms-secondary);
    font-size: 13px;
}


/* The prototype's slot here reads "Local sandbox / Nothing is sent externally",
   which is true of the prototype and not of this page. The real caveat takes it:
   this wizard collects and validates but does not submit, and an agent should not
   reach step seven before finding that out. */
.escrow-rail-note {
    color: #93a0a6;
    font-size: 11px;
    line-height: 1.45;
    margin-top: auto;
    padding-top: 22px;
}

.escrow-wizard-panel {
    background: #fff;
    border: 1px solid #e0e6e9;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.escrow-wizard-body {
    flex: 1;
    padding: 30px clamp(20px, 3vw, 40px) 30px;
}

/* --- Step body ------------------------------------------------------------ */

/* The panel is the card now, so the step body sits flat inside it rather than
   carrying its own border, radius and shadow. */
.escrow-step-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 850px;
}

.escrow-step-heading {
    border-bottom: 1px solid #e6ebed;
    margin-bottom: 2px;
    padding-bottom: 20px;
}

/*
    The closing greeting, above the first step's heading. Green like the Close button that reaches
    it, and the only congratulatory surface in the product — kept to a tinted panel rather than
    anything louder, because the agent still has seven steps to work through and the instruction
    underneath is the part they act on.
*/
.escrow-congrats {
    background: #eaf6ee;
    border: 1px solid #bfe3ca;
    border-radius: 8px;
    display: grid;
    gap: 4px;
    margin: 0 0 20px;
    padding: 14px 16px;
}

.escrow-congrats strong {
    color: var(--rms-success);
    font-size: 15px;
    font-weight: 700;
}

.escrow-congrats span {
    color: #3f5a48;
    font-size: 12px;
    line-height: 1.5;
}

/* "Step 3 of 7". In the earlier layout this lived in the page header, which is
   where the horizontal stepper made it redundant; against a vertical rail the
   position within the run belongs beside the heading it numbers. */
.escrow-step-heading > p {
    color: var(--rms-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.escrow-step-heading h2 {
    color: var(--rms-secondary);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 4px;
}

.escrow-step-heading > span {
    color: #7b8a92;
    display: block;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 6px;
    max-width: 600px;
}

.escrow-step-content fieldset {
    border: 0;
    border-top: 1px solid #eef2f4;
    margin: 0;
    padding: 18px 0 0;
}

.escrow-step-content fieldset:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.escrow-step-content fieldset + fieldset { margin-top: 18px; }

.escrow-step-content legend {
    color: var(--rms-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0;
}

.escrow-step-content legend small {
    color: #8595a0;
    font-weight: 400;
}


.escrow-step-content fieldset > p {
    color: #7b8a92;
    font-size: 11px;
    margin: -4px 0 12px;
}

.escrow-step-content fieldset > small {
    color: #8595a0;
    display: block;
    font-size: 10px;
    margin-top: 9px;
}

.escrow-form-grid {
    display: grid;
    gap: 13px 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.escrow-form-grid label,
.escrow-standalone-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.escrow-form-grid label.wide { grid-column: 1 / -1; }

/*
   A grid whose columns do not move when its contents change.

   The default above is auto-fit, which sizes columns to whatever is in the row — right nearly
   everywhere, and wrong where answering one field reveals others beside it: the listing wizard's
   transaction type sat full width until it was answered and then shrank to a third, so the control
   the agent had just used changed size under them as a result of using it.

   Three fixed columns instead, so the first field keeps its place whether it is alone or has two
   beside it. minmax(0, 1fr) rather than 1fr because a grid column's default minimum is its
   content, which a long select option would otherwise push wider than its share.
*/
.escrow-form-grid.fixed-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.escrow-standalone-field { margin-top: 13px; max-width: 320px; }

.escrow-form-grid label > span,
.escrow-standalone-field > span {
    color: #536873;
    font-size: 10px;
    font-weight: 700;
}

/* An aside inside a field label — "(your contribution)" beside Client credit. Lighter and
   unbolded so it reads as help rather than as part of the field's name, the same treatment the
   legends give their own small. */
.escrow-form-grid label > span small,
.escrow-standalone-field > span small {
    color: #8595a0;
    font-weight: 400;
}

.escrow-form-grid input,
.escrow-form-grid select,
.escrow-standalone-field input,
.escrow-standalone-field select {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    font: inherit;
    height: 38px;
    outline: none;
    padding: 0 10px;
    width: 100%;
}

.escrow-form-grid input:focus,
.escrow-form-grid select:focus,
.escrow-standalone-field input:focus,
.escrow-standalone-field select:focus {
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.escrow-form-grid label > small,
.escrow-standalone-field > small {
    color: #8595a0;
    font-size: 9px;
}

/* A currency field reads as money before anything is typed into it. */
.money-input {
    align-items: center;
    display: flex;
    position: relative;
}

.money-input i {
    color: #8595a0;
    font-size: 12px;
    font-style: normal;
    left: 10px;
    position: absolute;
}

.money-input input { padding-left: 24px; }

.escrow-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}


/* A contact the lookup resolved. Green because it is a settled answer, and bordered
   on the left like the other notes so it sits in the same family as them. */
.escrow-resolved-contact {
    background: #f2f8f5;
    border-left: 3px solid #18805f;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
}

.escrow-resolved-contact b {
    color: #36564b;
    font-size: 13px;
}

.escrow-resolved-contact span {
    color: #71857d;
    font-size: 11px;
}

/* A quiet action inside a step — "Search again", not a step control. Matches the
   choice-row buttons so the step has one button vocabulary rather than two. */
.escrow-secondary-action {
    background: #fff;
    border: 1px solid #d7e0e4;
    border-radius: 5px;
    color: #526873;
    font-size: 11px;
    font-weight: 700;
    min-height: 36px;
    padding: 0 14px;
}

.escrow-secondary-action:hover { background: #f5f8fa; }
.escrow-choice-row button {
    background: #fff;
    border: 1px solid #d7e0e4;
    border-radius: 5px;
    color: #526873;
    font-size: 11px;
    font-weight: 700;
    min-height: 38px;
    padding: 0 16px;
}

.escrow-choice-row button.selected {
    background: #f2f8fb;
    border-color: var(--rms-secondary);
    color: var(--rms-secondary);
}

.escrow-calculation {
    align-items: center;
    background: #f4f8fa;
    border-radius: 7px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 14px;
    padding: 11px 14px;
}

.escrow-calculation span {
    color: #687b85;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.escrow-calculation strong {
    color: var(--rms-secondary);
    font-size: 18px;
}

/* Two across, as the design has it, and two rather than auto-fit: the four options pair up as
   two rows of two at any width, instead of reflowing to three and leaving one on its own. */
.escrow-radio-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.escrow-radio-list label {
    align-items: center;
    border: 1px solid #e2e8eb;
    border-radius: 6px;
    color: #526873;
    display: flex;
    font-size: 11px;
    gap: 9px;
    padding: 10px 12px;
}

/*
   A checkbox with a sentence under it rather than a bare tick beside a label — for the answers
   that change what a submission does and are worth a line saying so.

   Two names on one rule. The warranty one came first and named itself after the step it was
   written for; .escrow-checkbox is the same control on the listing wizard's "already listed"
   question. Shared rather than copied, and the original name kept rather than renamed, so the
   escrow page is not churned for a stylesheet tidy-up.
*/
.escrow-warranty-toggle,
.escrow-checkbox {
    align-items: flex-start;
    background: #f8fafb;
    border: 1px solid #e2e8eb;
    border-radius: 7px;
    display: flex;
    gap: 10px;
    padding: 12px 13px;
}

.escrow-warranty-toggle b,
.escrow-checkbox b {
    color: #344e5a;
    display: block;
    font-size: 12px;
}

.escrow-warranty-toggle small,
.escrow-checkbox small {
    color: #7b8a92;
    font-size: 10px;
}

/* The box itself, in the app's own accent rather than the browser's blue — the treatment
   .rms-login__terms already gives the one checkbox outside these forms. Sized and pinned to the
   first line of the label beside it, so a two-line question does not leave it floating against
   the top edge of a block it is answering. */
.escrow-warranty-toggle input[type="checkbox"],
.escrow-checkbox input[type="checkbox"] {
    accent-color: var(--rms-primary);
    flex: none;
    height: 15px;
    margin-top: 1px;
    width: 15px;
}

/* The both-sides confirmation sits under the lookup it gates, close enough to read as part of
   it rather than as the next question on the step. */
.escrow-both-sides {
    margin-top: 10px;
}

/* A note explaining why a branch asks for nothing, rather than an empty panel. */
.escrow-mapping-note {
    background: #f4f8fa;
    border-left: 3px solid var(--rms-secondary);
    border-radius: 5px;
    margin-top: 13px;
    padding: 11px 13px;
}

.escrow-mapping-note b {
    color: var(--rms-secondary);
    display: block;
    font-size: 11px;
}

.escrow-mapping-note span {
    color: #60747e;
    font-size: 10px;
    line-height: 1.55;
}

/* A note whose message carries its own action — the contact lookup that matched nobody,
   whose next step is to create them. The action goes in the note rather than under it:
   the note's last sentence is what asks for it, and a button on its own line below read
   as a separate step rather than as the answer to what had just been said.

   A modifier, not a change to the base, because the other notes on the step explain a
   branch that asks for nothing and have no action to carry. */
.escrow-mapping-note.with-action {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

/* Centred against the message, and never stretched: the slot aligns its loose buttons to
   the start of the column, which inside this row would pin the button to the top. */
.escrow-mapping-note.with-action .escrow-secondary-action {
    align-self: center;
    flex: none;
}

/* --- Submitting (step 7) -------------------------------------------------- */

.escrow-submit-notes { margin-top: 18px; }

.escrow-submit-notes .escrow-standalone-field { max-width: none; }

.escrow-submit-notes textarea {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #344e5a;
    font: inherit;
    outline: none;
    padding: 9px 10px;
    resize: vertical;
    width: 100%;
}

.escrow-submit-notes textarea:focus {
    border-color: var(--rms-secondary);
    box-shadow: 0 0 0 2px rgba(7, 67, 103, .1);
}

.escrow-submit-notes textarea:disabled { background: #f4f7f8; color: #8595a0; }

/* Sits inside the failed-calculation alert, so it borrows that block's colour rather than
   introducing a third. */
.escrow-retry {
    background: none;
    border: 1px solid var(--rms-error);
    border-radius: 4px;
    color: var(--rms-error);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    margin-top: 9px;
    padding: 5px 11px;
}

.escrow-retry:hover { background: rgba(183, 61, 61, .06); }

/* The last thing on the last step, and the only control on this page that writes anything.
   Given its own block rather than the wizard footer: the footer carries movement between
   steps, and putting the irreversible action among those buttons invites it being hit on
   the way past. */
.escrow-submit-bar {
    align-items: center;
    background: #f4f8fa;
    border: 1px solid #dbe6ea;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 15px 17px;
}

.escrow-submit-bar > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.escrow-submit-bar b {
    color: var(--rms-secondary);
    font-size: 12px;
}

.escrow-submit-bar span {
    color: #60747e;
    font-size: 10px;
    line-height: 1.55;
}

.escrow-submit-bar button {
    align-items: center;
    background: var(--rms-secondary);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    gap: 7px;
    padding: 10px 20px;
}

.escrow-submit-bar button:disabled {
    background: #9db2bc;
    cursor: default;
}

@media (max-width: 700px) {
    .escrow-submit-bar { align-items: stretch; flex-direction: column; }
    .escrow-submit-bar button { justify-content: center; }
}

.warranty-rule-banner {
    background: #f2f8fb;
    border: 1px solid #d6e5ed;
    border-radius: 7px;
    margin-bottom: 16px;
    padding: 11px 13px;
}

/* The one warranty branch that is an answer rather than an outstanding question:
   the seller bought it and nobody has an order to place. Green rather than the
   neutral note tint, so it does not read as another thing left to do. */
.warranty-complete-note {
    background: #f2f8f5;
    border-left-color: #18805f;
}

.warranty-rule-banner b {
    color: var(--rms-secondary);
    display: block;
    font-size: 11px;
}

.warranty-rule-banner span {
    color: #60747e;
    font-size: 10px;
    line-height: 1.55;
}

/* the contact a record already holds: a name over the ways to reach them. */
.escrow-existing-contact {
    color: #60747e;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 2px;
    margin: 12px 0 0;
}

/* the role, captioning the person. */
.escrow-existing-contact > span {
    color: #8595a0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.escrow-existing-contact b { color: #344e5a; font-size: 13px; }

.escrow-existing-contact a {
    color: var(--rms-secondary);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: #b5c8d2;
    text-underline-offset: 2px;
}

/* --- Review --------------------------------------------------------------- */

.escrow-review-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
}

.escrow-review-grid > div {
    background: #f8fafb;
    border-radius: 7px;
    padding: 11px 13px;
}

.escrow-review-grid > div.wide { grid-column: 1 / -1; }

.escrow-review-grid dt {
    color: #819098;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.escrow-review-grid dd {
    color: #3d5561;
    font-size: 13px;
    font-weight: 600;
    margin: 3px 0 0;
}

.escrow-review-grid dd small {
    color: #7b8a92;
    display: block;
    font-size: 10px;
    font-weight: 400;
}

.escrow-missing {
    background: #fdf3f3;
    border-left: 3px solid var(--rms-error);
    border-radius: 5px;
    margin-top: 16px;
    padding: 12px 14px;
}

.escrow-missing b {
    color: var(--rms-error);
    font-size: 11px;
}

.escrow-missing ul {
    color: #7a5c5c;
    font-size: 11px;
    line-height: 1.6;
    margin: 6px 0 0;
    padding-left: 18px;
}



/* --- Date timeline (step 2) ----------------------------------------------- */

.escrow-subsection-heading {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.escrow-subsection-heading legend { margin: 0; }

.escrow-subsection-heading p {
    color: #7a8b93;
    font-size: 11px;
    margin: 4px 0 0;
}

/*
    The three contract dates in the order they happen. The connector is one line behind
    the whole row, drawn at the markers' centre and inset by half a marker at each end so
    it starts and stops inside the first and last circles rather than running past them.
*/
.escrow-date-timeline {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.escrow-date-timeline::before {
    background: #cfdbe0;
    content: "";
    height: 2px;
    left: 16px;
    position: absolute;
    right: 16px;
    top: 16px;
}

.escrow-date-timeline .escrow-date-step {
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
    min-width: 0;
    position: relative;
}

.escrow-date-timeline .escrow-date-step > i {
    align-items: center;
    background: #fff;
    border: 2px solid #b9cbd3;
    border-radius: 50%;
    color: #637b86;
    display: flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    position: relative;
    width: 32px;
    z-index: 1;
}

/* Acceptance is the date the other two are measured from, so it reads as the anchor. */
.escrow-date-timeline .escrow-date-step:first-child > i {
    background: var(--rms-secondary);
    border-color: var(--rms-secondary);
    color: #fff;
}

.escrow-date-timeline .escrow-date-step > div { min-width: 0; padding-top: 1px; }

.escrow-date-timeline b {
    color: #3f5864;
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
}

/* The field inside a timeline step is already introduced by the step's heading, so its
   own label reads as the caption rather than a second title. */
.escrow-date-timeline .rms-datefield-label {
    color: #829198;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}



/* One role's contact block — the lookup, or what it found, or what is already attached. */
.escrow-contact-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.escrow-contact-slot .escrow-standalone-field { margin-top: 0; max-width: 460px; }

/* A lookup that is replacing somebody carries the way back beside the search, so the row
   holds three controls instead of two — see RelatedContactSlot. Wider than the plain
   lookup, because the third button holds a person's name and squeezing the email box to
   fit it helps nobody. */
.escrow-contact-slot .escrow-standalone-field.with-keep { max-width: 620px; }

.escrow-standalone-field.with-keep .escrow-lookup {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

/* Quiet against the search, which is the path the row is for: keeping whoever is already
   attached is the exit from it. Spelled out because .escrow-lookup button paints every
   button in the row as the primary one, and stretched because the slot aligns its loose
   buttons to the start of the column, which here would leave this one short. */
.escrow-standalone-field.with-keep .escrow-lookup .escrow-secondary-action {
    align-self: stretch;
    background: #fff;
    border: 1px solid #d7e0e4;
    color: #526873;
}

.escrow-standalone-field.with-keep .escrow-lookup .escrow-secondary-action:hover {
    background: #f5f8fa;
}
.escrow-contact-slot .escrow-secondary-action { align-self: flex-start; margin-top: 0; }
.escrow-contact-slot .escrow-existing-contact { margin: 0; }

/* The MLS picker borrows the contact dialogs' autocomplete wholesale; only its width
   differs, since it sits in a step rather than a narrow dialog column. */
.escrow-service-picker { max-width: 460px; }
/* --- MLS pull (step 2) ----------------------------------------------------- */

/* The email/id field paired with the button that acts on it. */
.escrow-lookup {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.escrow-lookup button {
    background: var(--rms-secondary);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 13px;
    white-space: nowrap;
}

.escrow-lookup button:disabled { cursor: default; opacity: .5; }

.escrow-lookup input[readonly] { background: #f5f8f9; }

.mls-lookup-result {
    align-items: stretch;
    border: 1px solid #d7e3de;
    border-radius: 6px;
    display: grid;
    gap: 14px;
    grid-template-columns: 145px minmax(0, 1fr);
    margin-top: 15px;
    overflow: hidden;
}

.mls-lookup-result > div:last-child {
    align-self: center;
    padding: 13px 16px 13px 0;
}

.mls-lookup-result > div:last-child > span {
    color: #187353;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.mls-lookup-result strong {
    color: #35544a;
    display: block;
    font-size: 13px;
}

.mls-lookup-result p {
    color: #6f827a;
    font-size: 11px;
    line-height: 1.45;
    margin: 5px 0 0;
}

/* The photo cell: placeholder underneath, the listing image laid over it. Hiding the image on a
   load failure is then the whole fallback — what is behind it is already drawn and measured. */
.mls-photo { position: relative; }

/* cover, because listing photos are not one aspect ratio and the cell is a fixed 145px. */
.mls-photo > img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.mls-photo > img[hidden] { display: none; }

/* The placeholder sets the cell's height on its own, and fills it when the text beside it is taller. */
.mls-photo > .mls-photo-empty { height: 100%; }

.mls-photo-empty {
    align-items: center;
    background: #f1f5f3;
    color: #789087;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 105px;
    padding: 12px;
    text-align: center;
}

.mls-photo-empty span { font-size: 25px; }
.mls-photo-empty b { font-size: 10px; font-weight: 700; }

/* Connected, but nothing under that id. Amber rather than red: a mistyped listing
   number is the usual cause and it is the agent's to correct, not a failure. */
.mls-lookup-result.no-match {
    align-items: center;
    background: #fffaf3;
    border-color: #edd8b8;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px 15px;
}

.mls-lookup-result.no-match > i {
    align-items: center;
    background: #fff0d8;
    border-radius: 50%;
    color: #9c6819;
    display: flex;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mls-lookup-result.no-match > div:last-child { padding: 0; }
.mls-lookup-result.no-match > div:last-child > span { color: #9c6819; }
.mls-lookup-result.no-match strong { color: #6a5432; }
.mls-lookup-result.no-match p { color: #806f55; }
/* --- Review step (step 7) -------------------------------------------------- */

.escrow-review { gap: 16px; }

/*
    The deal at a glance. Property gets the wide column because a street address is the
    one value here that cannot be read at a fixed width.
*/
.review-deal-summary {
    background: #edf5f8;
    border-left: 4px solid var(--rms-secondary);
    display: grid;
    grid-template-columns: 1.8fr repeat(3, minmax(0, 1fr));
}

.review-deal-summary > div {
    border-left: 1px solid #d6e2e7;
    min-height: 82px;
    padding: 14px;
}

.review-deal-summary > div:first-child { border-left: 0; }

.review-deal-summary span {
    color: #71858e;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.review-deal-summary strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 16px;
    margin-top: 8px;
}

.review-deal-summary small {
    color: #6f8189;
    display: block;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
}

.review-property strong { font-size: 17px; }

/* --- Disclosures ---------------------------------------------------------- */

.review-disclosures { display: grid; gap: 9px; }

.review-disclosure {
    background: #fff;
    border: 1px solid #dce5e9;
    border-radius: 7px;
}

/* list-style and the webkit marker both have to go, or the native triangle sits
   beside the category icon. */
.review-disclosure > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 14px 16px;
}

.review-disclosure > summary::-webkit-details-marker { display: none; }

.review-disclosure > summary > div { display: grid; gap: 3px; }

.review-disclosure > summary > div > b {
    color: var(--rms-secondary);
    font-size: 13px;
}

.review-disclosure > summary > div > span {
    color: #74868e;
    font-size: 11px;
}

.review-disclosure > summary > i {
    color: #68808a;
    font-size: 14px;
    font-style: normal;
    margin-left: auto;
    transition: transform .18s ease;
}

.review-disclosure[open] > summary > i { transform: rotate(180deg); }

.review-disclosure[open] > summary { border-bottom: 1px solid #dce5e9; }

.review-category-icon {
    align-items: center;
    background: #edf5f8;
    border-radius: 50%;
    color: var(--rms-secondary);
    display: flex;
    flex: 0 0 34px;
    font-size: 17px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
}

.review-category-icon svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 19px;
}

.review-category-icon.financials { background: #e9f6ef; color: #177a58; }
.review-category-icon.people { background: #eef0fb; color: #5e53aa; }
.review-category-icon.documents { background: #edf5f8; color: #0c5a7e; }
.review-category-icon.warranty { background: #fff1e8; color: #c45d22; }

/* --- Disclosure contents -------------------------------------------------- */

.review-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-detail-grid > section {
    border-bottom: 1px solid #e4eaed;
    min-width: 0;
    padding: 16px;
}

.review-detail-grid > section:nth-child(odd) { border-right: 1px solid #e4eaed; }

/* The last row draws no bottom edge — the panel's own border closes it. With an odd
   number of sections this clears the final one and its empty neighbour's slot. */
.review-detail-grid > section:nth-last-child(-n + 2) { border-bottom: 0; }

.review-detail-grid h3 {
    color: var(--rms-secondary);
    font-size: 12px;
    margin: 0 0 11px;
}

.review-detail-grid p {
    color: #536873;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

.review-detail-grid dl { display: grid; gap: 8px; margin: 0; }

.review-detail-grid dl div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.review-detail-grid dt {
    color: #829198;
    font-size: 10px;
    text-transform: uppercase;
}

/* overflow-wrap because a file name or an email has no spaces to break at. */
.review-detail-grid dd {
    color: #405762;
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    max-width: 62%;
    overflow-wrap: anywhere;
    text-align: right;
}
/* --- Document slots ------------------------------------------------------- */

/*
    The design draws each slot as one bordered row: what it is on the left, the way
    to add a file on the right, and an orange edge on the one that is required.
    RmsDocumentUpload stacks its title above its drop zone, which is right on the
    record page where the slots sit in a narrow column.

    Scoped to .escrow-upload-list so the record page keeps the stacked form. The
    component's own markup is untouched — it is shared, and the difference here is
    presentation, not structure.
*/
.escrow-upload-list { display: grid; gap: 10px; }

.escrow-upload-list .rms-upload {
    align-items: center;
    background: #fbfcfc;
    border: 1px dashed #bacbd2;
    border-radius: 7px;
    column-gap: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 86px;
    padding: 15px 16px;
}

/* The required slot, marked the way the design marks it. :has is how the row learns
   about a flag its own child carries — the component sets no class on the wrapper. */
.escrow-upload-list .rms-upload:has(.rms-upload-title span) {
    border-left: 3px solid var(--rms-primary);
}

.escrow-upload-list .rms-upload-title { margin: 0; }

/* The zone stops being a full-width target and becomes the action on the right. The
   input still covers it, so drag and drop keeps working over the smaller area. */
.escrow-upload-list .rms-upload-zone {
    min-width: 190px;
    padding: 12px 14px;
}

.escrow-upload-list .rms-upload-prompt small { font-size: 10px; }

/* Errors and the chosen-file list belong under both columns, not beside one. */
.escrow-upload-list .rms-upload-errors,
.escrow-upload-list .rms-upload-files {
    grid-column: 1 / -1;
}

/* What Continue refused, in a dialog over the step rather than a notice at the end of it.
   Narrower than the contact form: this is a list to read, not a form to fill in. */
.escrow-blocked-modal { max-width: 440px; }

.escrow-blocked-modal h2 { color: var(--rms-error); }

.escrow-blocked-list {
    display: grid;
    gap: 7px;
    list-style: none;
    margin: 0;
    /* Long on step 2, which can fail nine checks at once. Scrolls inside the dialog so the
       button underneath it stays put rather than being pushed off a short screen. */
    max-height: 45vh;
    overflow-y: auto;
    padding: 0;
}

.escrow-blocked-list li {
    background: #fdf3f2;
    border-left: 3px solid var(--rms-error);
    border-radius: 5px;
    color: #8f2f22;
    font-size: 12px;
    line-height: 1.4;
    padding: 9px 12px;
}
/* --- Footer --------------------------------------------------------------- */

/* Sticky to the bottom of the viewport while the page scrolls, so Continue stays
   reachable on a long step without the panel needing a scrollbar of its own. */
.escrow-wizard-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #dde5e8;
    bottom: 0;
    display: flex;
    gap: 12px;
    /* Back and Continue are the only things left in here now that "Save & exit" is gone, so they
       sit at the end rather than being spread against a link that is no longer beside them. */
    justify-content: flex-end;
    margin-top: auto;
    padding: 14px clamp(20px, 3vw, 40px);
    position: sticky;
    z-index: 2;
}

.escrow-wizard-footer > div {
    display: flex;
    gap: 8px;
}

.escrow-wizard-footer button {
    background: #fff;
    border: 1px solid #cbd6db;
    border-radius: 4px;
    color: #60727c;
    font-size: 11px;
    font-weight: 700;
    min-height: 38px;
    padding: 0 18px;
}

.escrow-wizard-footer button.primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.escrow-wizard-footer button:disabled { opacity: .5; }

/*
    The rail collapses to a scrolling strip along the top, as it does in the
    prototype. The breakpoint is 1060px rather than the prototype's 820px because
    the drawer takes 240px out of the content width above 960px: 820 + 240 is the
    viewport at which the panel gets as narrow as the prototype's own cutoff.
*/

/* --- Create-contact form --------------------------------------------------- */

/* Over the whole page rather than the panel: it is a detour from the step, and the
   step behind it should read as suspended rather than still in play. */
.escrow-person-modal-backdrop {
    align-items: center;
    background: rgba(7, 30, 42, .65);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 95;
}

.escrow-person-modal {
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
    max-height: 92vh;
    max-width: 650px;
    overflow-y: auto;
    padding: 22px;
    width: 100%;
}

.escrow-person-modal header { margin-bottom: 16px; }

.escrow-person-modal h2 {
    color: var(--rms-secondary);
    font-size: 20px;
    margin: 0;
}

.escrow-person-modal header p,
.escrow-person-modal > small {
    color: #71838c;
    font-size: 11px;
    line-height: 1.45;
    margin: 6px 0 0;
}

.escrow-person-modal > small { display: block; margin-top: 12px; }

.escrow-person-modal input[readonly] { background: #f5f8f9; }


/* The backdrop itself, as a button so a click outside dismisses and a screen reader is
   told what that does — the pattern RmsDateField's calendar already uses. */
.escrow-person-modal-dismiss {
    background: transparent;
    border: 0;
    cursor: default;
    inset: 0;
    padding: 0;
    position: absolute;
}

.escrow-person-modal { position: relative; }
.escrow-person-modal footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.escrow-person-modal footer button {
    background: #fff;
    border: 1px solid #c7d3d9;
    border-radius: 4px;
    color: #4e626c;
    font-size: 11px;
    font-weight: 800;
    min-height: 38px;
    padding: 0 16px;
}

.escrow-person-modal footer button.primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.escrow-person-modal footer button:disabled { cursor: default; opacity: .5; }
@media (max-width: 1060px) {
    .escrow-wizard-workspace { display: block; }

    .escrow-wizard-rail {
        border: 0;
        border-bottom: 1px solid #dfe6e9;
        border-radius: 10px 10px 0 0;
        display: block;
        padding: 0 8px;
        position: static;
    }

    .escrow-stepper {
        flex-direction: row;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .escrow-stepper button {
        border-bottom: 3px solid transparent;
        border-radius: 0;
        flex: 0 0 auto;
        min-height: 52px;
        padding: 7px 10px;
        white-space: nowrap;
        width: auto;
    }

    .escrow-stepper button::after { display: none; }
    .escrow-stepper button.active { background: transparent; border-bottom-color: var(--rms-primary); }

    .escrow-stepper button.active i {
        background: var(--rms-primary);
        border-color: var(--rms-primary);
    }

    /* The caveat is rail furniture with nowhere to go in a horizontal strip, and it is repeated
       on the Review step. */
    .escrow-rail-note { display: none; }

    /* The snapshot stays. It used to be hidden here because its three figures were also in the
       strip at the foot of step 3; now it is the only place they are, so hiding it would take
       every figure off the phone. Laid out as wrapping columns rather than a tall list, since
       the rail is a horizontal strip at this width. */
    .escrow-deal-preview {
        border-top: 0;
        margin-top: 0;
        padding: 12px 8px 14px;
    }

    .escrow-deal-preview dl {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px 18px;
    }

    .escrow-wizard-panel { border-radius: 0 0 10px 10px; }

}

@media (max-width: 700px) {
    .escrow-wizard-body { padding: 20px 16px; }
    .escrow-step-heading h2 { font-size: 18px; }
    .escrow-form-grid { grid-template-columns: 1fr; }
    /* Named again because the modifier outranks the rule above it, and three columns of a phone
       is not a layout. One field per row here, where nothing can shift sideways anyway. */
    .escrow-form-grid.fixed-three { grid-template-columns: 1fr; }
    .escrow-form-grid label.wide { grid-column: auto; }
    .escrow-radio-list { grid-template-columns: 1fr; }
    .escrow-standalone-field { max-width: none; }
    .escrow-review-grid { grid-template-columns: 1fr; }
    .escrow-review-grid > div.wide { grid-column: auto; }

    .escrow-wizard-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 12px 16px;
    }

    .escrow-wizard-footer > div { justify-content: space-between; }
    .escrow-wizard-footer button { flex: 1; }

    /* The timeline stands up: one date per row, and the connector becomes the vertical
       line down the left of the markers rather than the horizontal one behind them. */
    .escrow-date-timeline { gap: 0; grid-template-columns: 1fr; }

    .escrow-date-timeline::before {
        bottom: 18px;
        height: auto;
        left: 15px;
        right: auto;
        top: 16px;
        width: 2px;
    }

    .escrow-date-timeline .escrow-date-step { gap: 12px; padding-bottom: 19px; }
    .escrow-date-timeline .escrow-date-step:last-child { padding-bottom: 0; }


    /* Property takes the full first row; the three figures pair up beneath it. */
    .review-deal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .review-deal-summary .review-property {
        border-bottom: 1px solid #d6e2e7;
        grid-column: 1 / -1;
    }

    .review-deal-summary > div { min-height: 70px; padding: 11px; }
    .review-deal-summary > div:nth-child(2) { border-left: 0; }
    .review-deal-summary > div:last-child { border-top: 1px solid #d6e2e7; }

    .review-detail-grid { grid-template-columns: 1fr; }

    .review-detail-grid > section,
    .review-detail-grid > section:nth-child(odd),
    .review-detail-grid > section:nth-last-child(-n + 2) {
        border-bottom: 1px solid #e4eaed;
        border-right: 0;
    }

    .review-detail-grid > section:last-child { border-bottom: 0; }
    .review-disclosure > summary { gap: 10px; padding: 13px 12px; }

    .escrow-lookup { grid-template-columns: 1fr; }

    /* Stacked here like every other lookup, so the widened replacement row does not hold
       the field to 620px on a screen narrower than that. */
    .escrow-contact-slot .escrow-standalone-field.with-keep { max-width: none; }
    .escrow-standalone-field.with-keep .escrow-lookup { grid-template-columns: 1fr; }
    .mls-lookup-result { grid-template-columns: 1fr; }
    .mls-lookup-result > div:last-child { padding: 0 14px 14px; }
    .mls-photo-empty { min-height: 78px; }

    .escrow-person-modal { padding: 16px 14px; }
    .escrow-person-modal footer button { flex: 1; }
}

/* Holds the current-stage panel. Kept as a flex column from when the escrow link lived
   here too; the link now sits with the other update controls. */
.opportunity-status-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Into the escrow wizard, which is a different page and a multi-step form — not an
   update made here like the three controls beside it. Navy rather than the primary
   orange so it is plainly a different destination rather than a second next step, and
   solid rather than outlined because going under contract is the biggest thing that
   happens to a record. It is separated from the update controls as well as recoloured;
   see the margin rules with .opportunity-move-actions. */
.opportunity-open-escrow {
    background: var(--rms-secondary);
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 9px 15px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Pushed to the far end of the row, which is where it used to sit before it joined the
   update controls — the auto margin is the separation on a wide screen. */
.opportunity-move-actions .opportunity-open-escrow { margin-left: auto; }

@media (max-width: 700px) {
    .opportunity-status-actions {
        align-items: stretch;
        width: 100%;
    }

    /* Stacked, so the row's auto left margin separates nothing — a rule above it does
       the same job vertically, dividing the three updates made here from the one control
       that leaves the page. */
    .opportunity-open-escrow { text-align: center; }

    /* 6px on top of the row's 10px gap. A wider separation read better but cost 7px more
       than the viewport had: it pushed the buttons back below the fold on a 375x667
       screen, which is the whole thing this card was rearranged to avoid. */
    .opportunity-move-actions .opportunity-open-escrow {
        margin-left: 0;
        margin-top: 6px;
        position: relative;
    }

    /* The rule is a pseudo-element above the button rather than a border on it: a border
       would sit inside the navy fill and push the label off centre. -8px centres it in
       the 16px gap. */
    .opportunity-move-actions .opportunity-open-escrow::before {
        background: #eef2f4;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
        top: -8px;
    }

    /* Redundant on a phone: the button directly beneath it already reads "Move to
       {milestone}". Worth 27px with the row gap, which is what buys the escrow separator
       its space without going past the fold. Kept on a wide screen, where it labels the
       row rather than repeating the button. */
    .opportunity-move-label { display: none; }

    /* The status card's heading block earns its space on a wide screen and costs it on a
       phone. Measured at 375x720: the update buttons started at y=649 with a 150px block,
       so they sat below the fold on a record an agent opened specifically to update.
       Removing the kicker, heading, subtitle and current-stage panel lifts them to about
       y=519 — on screen without scrolling.

       Nothing is lost by it. The milestone is named by the chip in the record header
       above and highlighted in the tracker immediately below, so this panel was saying
       it a third time. Dropping only the panel saves 61px, which was not enough on its
       own — the buttons' bottom edge still landed past 720. */
    .opportunity-status-card .opportunity-section-heading { margin-bottom: 10px; }

    /* Both the kicker and the subtitle; they are the two direct p children. The actions
       wrapper goes whole rather than just the stage panel inside it — with the escrow
       link moved to the update row it holds nothing else, and an empty flex child would
       still draw the heading's 14px gap. */
    .opportunity-status-card .opportunity-section-heading > div > p,
    .opportunity-status-card .opportunity-status-actions { display: none; }

    /* Not display:none — the section is labelled by this heading through
       aria-labelledby, and hiding it outright would leave the region unnamed. */
    .opportunity-status-card .opportunity-section-heading h2 {
        clip-path: inset(50%);
        height: 1px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}

/* --- Links into the opportunity record ------------------------------------ */

/* The identity on a row is what opens it. Styled as the surrounding text rather
   than as a link, because a list where every row is blue and underlined is
   harder to read than one where the whole row reads as a record. */
a.transaction-file-address,
a.contact-name,
.internal-referral-table-client a,
.update-person h3 a {
    color: inherit;
    text-decoration: none;
}

a.transaction-file-address:hover,
a.contact-name:hover,
.internal-referral-table-client a:hover,
.update-person h3 a:hover {
    color: var(--rms-secondary);
    text-decoration: underline;
}

a.transaction-file-address:focus-visible,
a.contact-name:focus-visible,
.internal-referral-table-client a:focus-visible,
.update-person h3 a:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--rms-secondary);
    outline-offset: 2px;
}

/* Matches the strong it replaces, so the row does not shift when it becomes a link. */
.internal-referral-table-client a {
    color: #344e5a;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================================================
   My Stats and Team Stats

   No facelift design covers these pages — the prototype's own nav calls them
   outside its phase. So they reuse the language the approved pages established
   rather than introducing a second vocabulary for one corner of the app.
   =========================================================================== */

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

.stats-header h1 {
    color: var(--rms-secondary);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 3px 0 4px;
}

.stats-header > div > p:last-child {
    color: #6f7f88;
    font-size: 12px;
    margin: 0;
}

.stats-range {
    display: flex;
    gap: 10px;
}

.stats-range label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-range span {
    color: #687b85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stats-range input {
    background: #fff;
    border: 1px solid #ccd6db;
    border-radius: 4px;
    color: #405762;
    height: 36px;
    padding: 0 10px;
}

.stats-tabs {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding: 6px;
}

.stats-tabs button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #61737d;
    flex: 1 0 auto;
    font-size: 11px;
    font-weight: 700;
    min-height: 36px;
    padding: 0 16px;
    white-space: nowrap;
}

.stats-tabs button.active {
    background: #f2f8fb;
    box-shadow: inset 0 0 0 1px #d6e5ed;
    color: var(--rms-secondary);
}

.stats-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-block {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    padding: 18px 20px;
}

.stats-block-heading { margin-bottom: 14px; }

/* Title on the left, row count on the right, as the legacy report headings ran. */
.stats-block-title {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

/* The window qualifier — "(in date range)", "(year over year)". Deliberately
   quiet: it disambiguates the title without competing with it. */
.stats-block-note {
    color: #9aa7ae;
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
    white-space: nowrap;
}

.stats-block-meta {
    color: #7b8a92;
    font-size: 11px;
    white-space: nowrap;
}

.stats-block-heading h2 {
    color: var(--rms-secondary);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.stats-block-heading p {
    color: #7b8a92;
    font-size: 11px;
    margin: 3px 0 0;
}

.stats-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.stats-kpis > div {
    background: #f6f9fa;
    border-radius: 8px;
    padding: 12px 14px;
}

.stats-kpis span {
    color: #819098;
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stats-kpis strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 21px;
    margin-top: 3px;
}

.stats-kpis small {
    color: #7b8a92;
    display: block;
    font-size: 10px;
    margin-top: 1px;
}

.stats-table-wrap { overflow-x: auto; }

.stats-table {
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.stats-table th {
    background: #f6f8f9;
    color: #71808a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 12px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.stats-table td {
    border-top: 1px solid #e7ecee;
    color: #4a5f6a;
    font-size: 11px;
    padding: 9px 12px;
    vertical-align: top;
}

.stats-table tbody tr:hover { background: #fbfcfd; }

/* Figures right-align and share a column width, so they can be compared down
   the column rather than read one at a time. */
.stats-table .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.stats-table td a {
    color: var(--rms-secondary);
    display: block;
    overflow-wrap: anywhere;
}

/* A report that ran and found nothing, kept visually distinct from one that
   failed — those get the standard notice treatment instead. */
.stats-empty {
    color: #8595a0;
    font-size: 11px;
    font-style: italic;
    margin: 0;
}

.stats-note {
    color: #88959b;
    font-size: 10px;
    line-height: 1.5;
    margin: 11px 0 0;
}

.stats-link {
    color: var(--rms-secondary);
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .stats-header { align-items: stretch; }
    .stats-range { width: 100%; }
    .stats-range label { flex: 1; }
    .stats-block { padding: 15px 16px; }
    .stats-kpis { grid-template-columns: 1fr 1fr; }
}

/* --- Date field and calendar ---------------------------------------------- */

/* A generic centred dialog, for RmsDateField and whatever else needs one.
   .add-contact-overlay / -backdrop / -dialog are the same pattern under a name that
   describes one caller; they are left alone rather than renamed, since two working
   dialogs depend on them. Worth folding together the next time either is touched. */
.rms-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 95;
}

.rms-modal-backdrop {
    background: rgba(12, 35, 48, .52);
    border: 0;
    inset: 0;
    padding: 0;
    position: absolute;
}

/* Bounded to the viewport, which is the whole point of putting the calendar in here:
   it cannot open off the top of the screen the way the native picker does. */
.rms-modal-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(7, 41, 59, .26);
    max-height: calc(100vh - 36px);
    overflow: auto;
    position: relative;
}

/* The shared contact dialog, ContactDialog, on the generic shell above.
   It was .escrow-person-modal until the escrow wizard's contact slot became a component;
   those rules stay where they are, because the blocked-step and submit-issues dialogs on
   that page share the class family. .rms-modal-panel brings no width or padding, so each
   caller sets its own. */
.rms-contact-modal {
    max-width: 650px;
    padding: 22px;
    width: 100%;
}

.rms-contact-modal header { margin-bottom: 16px; }

.rms-contact-modal h2 {
    color: var(--rms-secondary);
    font-size: 20px;
    margin: 0;
}

.rms-contact-modal header p,
.rms-contact-modal > small {
    color: #71838c;
    font-size: 11px;
    line-height: 1.45;
    margin: 6px 0 0;
}

.rms-contact-modal > small { display: block; margin-top: 12px; }

.rms-contact-modal input[readonly] { background: #f5f8f9; }

.rms-contact-modal footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.rms-contact-modal footer button {
    background: #fff;
    border: 1px solid #c7d3d9;
    border-radius: 4px;
    color: #4e626c;
    font-size: 11px;
    font-weight: 800;
    min-height: 38px;
    padding: 0 16px;
}

.rms-contact-modal footer button.primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.rms-contact-modal footer button:disabled { cursor: default; opacity: .5; }

@media (max-width: 1060px) {
    .rms-contact-modal { padding: 16px 14px; }
    .rms-contact-modal footer button { flex: 1; }
}

.rms-datefield-label {
    color: #5f6b72;
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

/* The one-tap answers. Sized for a thumb rather than to the 12px the menu rows use —
   these are the primary way the field is filled in, not a secondary control. */
.rms-datefield-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rms-datefield-quick button {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 20px;
    color: var(--rms-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 9px 14px;
}

.rms-datefield-quick button.chosen {
    background: #fff8f4;
    border-color: var(--rms-primary);
    color: #c2500f;
    font-weight: 600;
}

.rms-datefield-quick button:disabled { cursor: default; opacity: .6; }

/* The picks, on their own line. */
.rms-datefield-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The calendar button and the date it resolved to, side by side on the line below.

   Both used to sit on separate lines — the button inline with the picks, the date under
   everything — which left the answer two rows away from the question and, on a field with no
   picks, a centred button above a left-aligned date. Together they read as one control. */

/* What the chosen interval resolved to. Always shown, so the interval never hides the
   actual date being written. */


/* Left-aligned, deliberately, after measuring the alternative.

   Centring was tried and removed. On a phone it changes nothing — the picks already span the
   field, 264px of 264px — and on a wide card the strip's inner width is around 847px against
   the same 264px of picks, so centring puts 291px of nothing on each side of them. That gap is
   what centring produces, not what it fixes. Left-aligned, the picks sit under the prompt and
   above the textarea in line with everything else in the strip. */

/* Into the calendar. The brand blue rather than the primary orange, so it reads as a way in
   rather than the thing that saves — orange is spent once per panel, on the save. This is
   --rms-secondary, the blue the wordmark, the headings and the current milestone all use;
   --rms-tertiary was tried and is a generic bright blue that belongs to nothing else here.
   Uppercase at 10px to match every other button in the app. */

/* The way into the calendar, and where the chosen date is read back. Styled as an input
   because that is what it is to the agent, even though nothing is typed into it. */
.rms-datefield-input {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23074367' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") no-repeat right 11px center;
    background-size: 16px 16px;
    border: 1px solid #c8d4da;
    border-radius: 5px;
    color: var(--rms-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    min-height: 42px;
    padding: 9px 34px 9px 11px;
    width: 100%;
}

.rms-datefield-input:focus {
    border-color: var(--rms-primary);
    box-shadow: 0 0 0 2px rgba(242, 106, 33, .11);
    outline: 0;
}

.rms-datefield-input:disabled {
    background-color: #f5f7f8;
    color: #93a0a6;
    cursor: default;
}

.rms-datefield-input::placeholder { color: #93a0a6; }


.rms-calendar { width: min(320px, 100%); }

.rms-calendar header {
    align-items: center;
    border-bottom: 1px solid #e3e9ec;
    display: flex;
    justify-content: space-between;
    padding: 11px 12px;
}

.rms-calendar header strong {
    color: var(--rms-secondary);
    font-size: 14px;
    font-weight: 600;
}

/* 40px square: these are the controls most likely to be tapped repeatedly, and a month
   arrow that misses is more annoying than a day that misses. */
.rms-calendar header button {
    background: none;
    border: 0;
    color: var(--rms-secondary);
    cursor: pointer;
    font-size: 20px;
    height: 40px;
    line-height: 1;
    width: 40px;
}

.rms-calendar header button:disabled { color: #c9d2d7; cursor: default; }


/* The quick picks when they live inside the calendar rather than on the page. Same
   pills as the on-page row, separated from the grid by a rule so they read as an
   alternative to picking a day rather than a caption for it. */
.rms-calendar-quick {
    border-bottom: 1px solid var(--rms-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    /* Even top and bottom: the row sat against the header rule with air only beneath it. */
    padding: 12px 0;
}

.rms-calendar-quick button {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 20px;
    color: var(--rms-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 8px 13px;
}

.rms-calendar-quick button.chosen {
    background: #fff8f4;
    border-color: var(--rms-primary);
    color: #c2500f;
}
.rms-calendar-weekdays,
.rms-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 10px;
}

.rms-calendar-weekdays {
    padding-top: 10px;
}

.rms-calendar-weekdays span {
    color: #8595a0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.rms-calendar-grid { padding-bottom: 4px; padding-top: 4px; }

.rms-calendar-grid button {
    aspect-ratio: 1;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--rms-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}

/* Hover, but only where a pointer can actually leave.

   A tap on a touch screen leaves :hover stuck on the day just tapped, and this selector outranks
   .chosen below it — one class plus two pseudo-classes against two classes. So the day an agent had
   just chosen kept this near-white background under .chosen's white text and disappeared, which on
   the phone made the whole calendar look like it had lost the dark blue.

   Excluding .chosen fixes the clash; the hover query stops a tap leaving any hover style behind. */
@media (hover: hover) {
    .rms-calendar-grid button:hover:not(:disabled):not(.chosen) { background: #f4f8fa; }
}

/* Out of the milestone's window. Left in the grid rather than blanked so the shape of
   the month still reads, and disabled so it cannot be chosen by hand. */
.rms-calendar-grid button:disabled { color: #c9d2d7; cursor: default; }

.rms-calendar-grid button.today { box-shadow: inset 0 0 0 1px #cfd8dd; }

.rms-calendar-grid button.chosen {
    background: var(--rms-secondary);
    color: #fff;
    font-weight: 600;
}

.rms-calendar-hint {
    border-top: 1px solid #eef2f4;
    color: #8b98a0;
    font-size: 11px;
    margin: 6px 0 0;
    padding: 8px 12px 0;
}

.rms-calendar footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 12px 12px;
}

.rms-calendar footer .quiet {
    background: none;
    border: 0;
    color: #5f6b72;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 12px;
    text-transform: uppercase;
}

.rms-calendar footer .primary {
    background: var(--rms-primary);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 15px;
    text-transform: uppercase;
}

.rms-calendar footer .primary:disabled { cursor: default; opacity: .5; }


/* --- Document upload ------------------------------------------------------ */

.rms-upload + .rms-upload { margin-top: 14px; }

.rms-upload-title {
    color: var(--rms-secondary);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
}

.rms-upload-title span {
    color: var(--rms-error);
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}

/* The zone is the label, and the file input inside it is stretched across the whole
   thing at zero opacity. That is what makes the area both clickable and a drop target
   without any script: a file input accepts a drop natively, so covering the zone with
   one is the entire implementation. */
.rms-upload-zone {
    align-items: center;
    background: #fbfdfe;
    border: 1px dashed #cfd8dd;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 16px 12px;
    position: relative;
    text-align: center;
}

.rms-upload-zone:hover { background: #f4f8fa; border-color: var(--rms-primary); }

/* -1px, not 0: an absolutely positioned box is placed against its container's padding box,
   so inset:0 leaves the zone's own dashed border outside the drop target. Pulling it out by
   the border width makes the whole zone, edge included, both clickable and droppable. */
.rms-upload-zone input[type="file"] {
    cursor: pointer;
    inset: -1px;
    opacity: 0;
    position: absolute;
}

/* Keyboard users get no hover and no drop, so the focus ring is the only thing telling
   them where they are. */
.rms-upload-zone:focus-within {
    border-color: var(--rms-primary);
    border-style: solid;
    outline: none;
}

.rms-upload-prompt strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.rms-upload-prompt small {
    color: #8b98a0;
    display: block;
    font-size: 11px;
    margin-top: 2px;
}

.rms-upload.disabled .rms-upload-zone { cursor: default; opacity: .6; }
.rms-upload.disabled .rms-upload-zone:hover { background: #fbfdfe; border-color: #cfd8dd; }

.rms-upload-errors {
    color: var(--rms-error);
    font-size: 11px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.rms-upload-files {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.rms-upload-files li {
    align-items: center;
    background: #f4f8fa;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 6px;
    padding: 7px 10px;
}

/* Wraps rather than truncating: a contract's file name is often the only thing telling
   two otherwise identical uploads apart. */
.rms-upload-files span {
    color: var(--rms-secondary);
    flex: 1 1 auto;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* A row carrying a type picker puts the file name on its own line, with the picker and Remove
   under it. Not a narrow-screen concession: the name wraps at any character, which makes its
   min-content width one letter, so sharing a line with the picker collapses it into a vertical
   column of letters however wide the card is. */
.rms-upload-files.with-picker li { flex-wrap: wrap; row-gap: 6px; }

.rms-upload-files.with-picker span { flex: 1 0 100%; }

/* Matching the inactive-reason picker further up the page rather than inventing a third look:
   these are the two dropdowns an agent meets on this record. */
.rms-upload-files select {
    background: #fff;
    border: 1px solid #e4d2c6;
    border-radius: 8px;
    color: var(--rms-text);
    flex: 1 1 auto;
    font: inherit;
    font-size: 13px;
    min-width: 0;
    padding: 8px 10px;
}

.rms-upload-files select:focus {
    border-color: var(--rms-primary);
    outline: none;
}

.rms-upload-files select:disabled { color: #a8b2b8; cursor: default; }

.rms-upload-files button {
    background: none;
    border: 0;
    color: var(--rms-error);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 4px;
}

.rms-upload-files button:disabled { color: #a8b2b8; cursor: default; }

/* The upload form inside the documents card. Bordered like the task form above it rather
   than tinted, since it is a place to put things rather than a decision to confirm. */
.opportunity-document-form {
    border: 1px solid #e7ecee;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 14px;
}

.opportunity-document-form footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

.opportunity-document-form footer button {
    background: #fff;
    border: 1px solid #cfd8dd;
    border-radius: 5px;
    color: var(--rms-secondary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 14px;
    text-transform: uppercase;
}

.opportunity-document-form footer .primary {
    background: var(--rms-primary);
    border-color: var(--rms-primary);
    color: #fff;
}

.opportunity-document-form footer button:disabled { cursor: default; opacity: .6; }

/* --- SkySlope transaction file -------------------------------------------- */

/*
    Tone classes are shared by the section chips and the item chips, so a section reads the same
    way as the items inside it. The four map to ChecklistTone; the fifth covers a status SkySlope
    sent that we could not interpret, which stays grey rather than guessing.
*/
.opportunity-skyslope-chip {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    gap: 6px;
    line-height: 1;
    padding: 6px 10px;
    white-space: nowrap;
}

.opportunity-skyslope-chip strong { font-weight: 700; }

.opportunity-skyslope-chip.is-done {
    background: #eaf6ee;
    border-color: #bfe3ca;
    color: var(--rms-success);
}

.opportunity-skyslope-chip.is-attention {
    background: #fdf0e8;
    border-color: #f7d2ba;
    color: #b4501a;
}

.opportunity-skyslope-chip.is-problem {
    background: #fdecec;
    border-color: #f4c4c4;
    color: var(--rms-error);
}

.opportunity-skyslope-chip.is-not-needed,
.opportunity-skyslope-chip.is-unknown {
    background: #f2f5f7;
    border-color: #dfe5e9;
    color: #6d7d86;
}

/* Reads as a link rather than an action: it leaves RMS, it does not change anything here. */
.opportunity-skyslope-open {
    align-items: center;
    border: 1px solid #cbd6db;
    border-radius: 5px;
    color: var(--rms-secondary);
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    min-height: 34px;
    padding: 0 13px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-skyslope-open::after {
    content: "↗";
    font-size: 11px;
    margin-left: 6px;
}

.opportunity-skyslope-open:hover {
    border-color: var(--rms-secondary);
}

.opportunity-skyslope-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opportunity-skyslope-toggle {
    background: none;
    border: none;
    color: var(--rms-tertiary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    margin-top: 12px;
    padding: 0;
}

.opportunity-skyslope-toggle:hover { text-decoration: underline; }

.opportunity-skyslope-warning {
    color: var(--rms-error);
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

.opportunity-skyslope-sections {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.opportunity-skyslope-section {
    border: 1px solid var(--rms-card-border);
    border-radius: 8px;
    padding: 12px 14px;
}

.opportunity-skyslope-section-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.opportunity-skyslope-section-heading h3 {
    color: var(--rms-secondary);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.opportunity-skyslope-items {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.opportunity-skyslope-items > li + li {
    border-top: 1px solid #eef2f4;
    padding-top: 10px;
}

/*
    The name wraps and the status chip does not: a long document name should take the space rather
    than squeeze the one word that says whether it is done.
*/
.opportunity-skyslope-item {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.opportunity-skyslope-item > span:first-child {
    color: #33454f;
    font-size: 12px;
    line-height: 1.4;
}

.opportunity-skyslope-meta {
    color: #88959b;
    font-size: 10px;
    margin: 5px 0 0;
}

/*
    The documents filed against a requirement, by name. Bulleted so several read as a list rather
    than a run-on, and breaking anywhere because RMS uploads under GUID filenames that have no
    natural wrap point.
*/
.opportunity-skyslope-filed {
    color: #88959b;
    display: grid;
    font-size: 10px;
    gap: 2px;
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
}

.opportunity-skyslope-filed li {
    overflow-wrap: anywhere;
    padding-left: 11px;
    position: relative;
}

.opportunity-skyslope-filed li::before {
    content: "•";
    left: 2px;
    position: absolute;
}

.opportunity-skyslope-comment {
    background: #f6f9fb;
    border-left: 2px solid #cbd6db;
    color: #4a5b64;
    font-size: 11px;
    line-height: 1.5;
    margin: 6px 0 0;
    padding: 7px 10px;
}

.opportunity-skyslope-comment em {
    color: #88959b;
    display: block;
    font-size: 10px;
    font-style: normal;
    margin-top: 3px;
}

@media (max-width: 700px) {
    /* The link drops below the heading rather than shrinking it. */
    .opportunity-skyslope-card .opportunity-section-heading { gap: 10px; }

    .opportunity-skyslope-open { width: 100%; justify-content: center; }

    .opportunity-skyslope-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* --- SkySlope search and link --------------------------------------------- */

.opportunity-skyslope-search {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* The record's own address, beside the button, so it is clear what is searched for. */
.opportunity-skyslope-search > span {
    color: #7b8a92;
    font-size: 11px;
}

.opportunity-skyslope-search-button {
    background: var(--rms-secondary);
    border: 1px solid var(--rms-secondary);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    min-height: 33px;
    padding: 0 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-skyslope-search-button:disabled {
    cursor: default;
    opacity: .5;
}

.opportunity-skyslope-matches {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.opportunity-skyslope-matches > li {
    align-items: center;
    border: 1px solid var(--rms-card-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 13px;
}

.opportunity-skyslope-matches strong {
    color: var(--rms-secondary);
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.opportunity-skyslope-matches span {
    color: #7b8a92;
    font-size: 10px;
}

/* Orange, because linking is the one action on this card that writes anything. */
.opportunity-skyslope-link {
    background: var(--rms-primary);
    border: 1px solid var(--rms-primary);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    min-height: 31px;
    padding: 0 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-skyslope-link:disabled {
    cursor: default;
    opacity: .5;
}

@media (max-width: 700px) {
    .opportunity-skyslope-search-button { width: 100%; }

    .opportunity-skyslope-matches > li {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .opportunity-skyslope-link { width: 100%; }
}

/* --- Side column ---------------------------------------------------------- */

/*
    Who to call, and what is on file. The column was a single team card; it now stacks, so the
    gap matches the main column's and the cards read as the same kind of thing at the same rhythm.
*/
.opportunity-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: fit-content;
    min-width: 0;
}

/*
    Documents live here rather than in the run of sections down the middle: an agent looks up
    what is on file, they do not work through it. That means a 300px column, so this card is
    tighter than the ones it used to sit beside — smaller rows, a smaller drop target, and no
    subtitle. Everything it does is unchanged; there is just less of it on screen.
*/
.opportunity-documents-card { padding: 16px 17px; }

.opportunity-documents-card .opportunity-section-heading {
    align-items: center;
    margin-bottom: 13px;
}

.opportunity-documents-card .opportunity-document-list { gap: 6px; }

.opportunity-documents-card .opportunity-document-list li {
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
}

.opportunity-documents-card .opportunity-document-list li i { font-size: 13px; }

.opportunity-documents-card .opportunity-document-list b { font-size: 11px; }

/* The dashed zone sits in a narrow column, so it gives up the height it does not need. */
.opportunity-documents-card .rms-upload-zone { padding: 11px 10px; }

/* Side by side does not fit at 300px, so the two stack with the primary action on top. */
.opportunity-documents-card .opportunity-document-form footer {
    flex-direction: column-reverse;
    gap: 7px;
}

.opportunity-documents-card .opportunity-document-form footer button { width: 100%; }

@media (max-width: 1099px) {
    /* One column again, where there is room for the card to breathe as it did before. */
    .opportunity-documents-card { padding: 18px 20px; }

    .opportunity-documents-card .opportunity-document-form footer {
        flex-direction: row;
        gap: 9px;
    }

    .opportunity-documents-card .opportunity-document-form footer button { width: auto; }
}

/* --- Cancel contract ------------------------------------------------------ */

/*
    Filled red, not red text on white. It sits in the same row as Edit escrow and does the
    opposite, so it has to read as the weightier of the two at a glance — an agent scanning for
    "amend" should never land on "cancel" because both were quiet outlines.
*/
.opportunity-move-danger {
    background: var(--rms-error);
    border: 1px solid var(--rms-error);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    min-height: 33px;
    padding: 0 15px;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-move-danger:hover { background: #c11d1d; border-color: #c11d1d; }

/*
    Closing the escrow. Green because it is the good ending, against the red of cancelling it —
    the two outcomes of a contract sit beside each other and the colour is what tells them apart
    at a glance. Built like .opportunity-move-danger rather than the navy escrow link: it is an
    outcome being recorded, not a trip to another page, even though the form is where it happens.
*/
.opportunity-move-close {
    align-items: center;
    background: var(--rms-success);
    border: 1px solid var(--rms-success);
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    gap: 5px;
    min-height: 33px;
    padding: 0 15px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.opportunity-move-close:hover { background: #076a25; border-color: #076a25; }

.opportunity-move-danger:disabled { cursor: default; opacity: .5; }

@media (max-width: 700px) {
    .opportunity-move-danger { width: 100%; }
}

/* --- Confirm strip fields -------------------------------------------------- */

/*
    One column by default, so the milestone and hold forms are unchanged. The cancel form asks
    for twice as much, and side by side it reads as two short questions rather than a stack.
*/
.opportunity-move-fields {
    display: grid;
    gap: 12px;
}

.opportunity-move-fields > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

@media (min-width: 701px) {
    /* The reason and date are narrow; the drop zone takes the room it needs to be a target. */
    .opportunity-move-fields.two-up {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
    }
}

/*
    Beside the reason picker, the upload's title has to be the same kind of label — same size,
    colour, weight and gap — or the two label blocks are different heights and the controls below
    them start at different y positions, which is what made the columns look misaligned. In the
    documents card the same title is a heading in its own right and keeps its own weight.
*/
.opportunity-move-fields .rms-upload-title {
    color: #5f6b72;
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 4px;
}

/*
    Spacing inside the columns is the grid gap's job alone. These two carry their own bottom
    margin for the single-column strip, and left on they stack with the gap and pull the left
    column's fields out of step with the right.
*/
.opportunity-move-fields .opportunity-move-reason,
.opportunity-move-fields .opportunity-move-break {
    margin-bottom: 0;
}

/*
    Going live on the MLS: the MLS picker, the listing id and the date it went active.

    The wizard's own field furniture — .escrow-form-grid, .escrow-lookup, .escrow-mapping-note —
    reused wholesale, the same way the related-contacts card above reuses it. Only the spacing
    differs: everything there sits in a wizard step that owns its own rhythm through margins, and
    here one flex gap owns it, so the margins those pieces carry are taken back off.
*/
.opportunity-move-listed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* No cap on the picker's width. It has a 460px one for a wizard step, which is wider than this
   strip ever is, and leaves the field ending short of the boxes above and below it. */
.opportunity-move-listed .escrow-service-picker { max-width: none; }

.opportunity-move-listed .escrow-mapping-note { margin-top: 0; }

/* The picker sits in the field grid here, where it does not in the wizard, so the grid's input
   rule beats the autocomplete's on source order and takes the right padding with it — which is
   the room the busy spinner spins in. Given back. */
.opportunity-move-listed .rms-autocomplete input { padding-right: 34px; }

/*
    Separates the fields from the update box below them. It used to come from the bottom margin
    those fields carried, which was removed so the grid gap could own the spacing inside the
    columns — and took this gap with it, leaving the date sitting on top of the textarea.

    Only where there are fields above. A plain milestone move has none, and the strip is short
    enough there that its opening line and the textarea want to stay close.
*/
.opportunity-move-fields:has(.opportunity-move-reason, .opportunity-move-break, .rms-upload, .opportunity-move-listed) + textarea {
    margin-top: 14px;
}

/* The running version, under Log Out.

   Deliberately the quietest thing in the drawer: it is reference material for a support call,
   not a control. Left-aligned on the same 28px as the nav items above it so the column of text
   stays a column. */
.drawer-version {
    color: #8b98a0;
    font-size: 10px;
    margin: 0;
    padding: 4px 28px 12px;
}

/* ===========================================================================
   Impersonation

   The appbar control renders on any host that implements impersonation, which
   today is the web host only; the page below it lives in RMS.Web.Client.
   =========================================================================== */

/*
    Loud on purpose, and the only thing in the appbar that is. Someone working inside another
    person's session has to be able to tell at a glance — every other cue in the shell (the name,
    the avatar, the data) reads exactly as it would if they had signed in as themselves.

    A warning tone rather than the error red: nothing is broken, and red here would compete with
    the genuine failures pages report.
*/
.rms-impersonation-exit {
    align-items: center;
    background: #fff3e6;
    border: 1px solid var(--rms-primary);
    border-radius: 999px;
    color: #a64708;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    margin-right: 12px;
    min-height: 32px;
    padding: 0 12px;
    white-space: nowrap;
}

.rms-impersonation-exit:hover:not(:disabled) {
    background: var(--rms-primary);
    color: #fff;
}

.rms-impersonation-exit:disabled {
    opacity: .6;
}

.rms-impersonation-exit i {
    font-size: 14px;
}

/*
    Below 700px the appbar loses the user's name, so this is the only thing identifying the
    session. The label goes rather than the control: the icon plus the colour still reads as a
    warning, and a full-width pill would push the avatar off the bar.
*/
@media (max-width: 700px) {
    .rms-impersonation-exit span { display: none; }
    .rms-impersonation-exit { margin-right: 6px; padding: 0 9px; }
}

/* --- Impersonate page ------------------------------------------------------ */

.impersonate-header {
    margin-bottom: 18px;
}

.impersonate-header h1 {
    color: var(--rms-secondary);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
}

.impersonate-header p:last-child {
    color: #6f7f88;
    font-size: 13px;
    margin: 5px 0 0;
    max-width: 70ch;
}

.impersonate-panel {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 9px;
    box-shadow: var(--rms-card-shadow);
    overflow: hidden;
}

/* Padding only where the panel holds prose or a lone control; the table and its heading bring
   their own, and would otherwise sit inside a double margin. */
.impersonate-panel > .rms-notice,
.impersonate-panel > .impersonate-action {
    margin: 18px;
}

.impersonate-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.impersonate-heading h2 {
    color: var(--rms-secondary);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
}

.impersonate-heading p {
    color: #7b8a92;
    font-size: 11px;
    margin: 3px 0 0;
}

.impersonate-search input {
    background: #fff;
    border: 1px solid #ccd6db;
    border-radius: 4px;
    color: #465b66;
    height: 38px;
    min-width: 240px;
    padding: 0 10px;
}

.impersonate-table-wrap { border-top: 1px solid #e2e8eb; overflow-x: auto; }

.impersonate-table { border-collapse: collapse; min-width: 700px; width: 100%; }

.impersonate-table th {
    background: #f6f8f9;
    color: #71808a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.impersonate-table td {
    border-top: 1px solid #e7ecee;
    color: #536873;
    font-size: 11px;
    padding: 10px 14px;
    vertical-align: middle;
}

.impersonate-table tbody tr:hover { background: #fbfcfd; }

.impersonate-table td b { color: var(--rms-secondary); display: block; font-size: 12px; }
.impersonate-table td small { color: #86959d; font-size: 10px; }

.impersonate-row-action { text-align: right; white-space: nowrap; }

.impersonate-action {
    background: var(--rms-secondary);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-height: 32px;
    padding: 0 14px;
}

.impersonate-action:disabled { opacity: .55; }

.impersonate-no-user { color: #9aa7ae; font-size: 10px; font-style: italic; }

.impersonate-empty { color: #73848d; padding: 44px 20px; text-align: center; }
.impersonate-empty h3 { color: var(--rms-secondary); font-size: 17px; margin: 0 0 4px; }
.impersonate-empty p { font-size: 11px; }

.impersonate-pagination {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 16px;
}

.impersonate-pagination button {
    background: #fff;
    border: 1px solid #d7dfe3;
    border-radius: 4px;
    color: var(--rms-secondary);
    height: 34px;
    min-width: 34px;
}

.impersonate-pagination button:disabled { color: #afb9be; }

@media (max-width: 700px) {
    .impersonate-header h1 { font-size: 22px; }

    .impersonate-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .impersonate-search, .impersonate-search input { width: 100%; }

    /*
        The table fits the screen rather than scrolling sideways, as Contacts does at this width.
        Status is the column that goes — it is the least useful for picking a person out of a
        list, and the agent cell already carries the org unit beneath the name.
    */
    .impersonate-table { min-width: 0; table-layout: fixed; }
    .impersonate-table th, .impersonate-table td { padding: 9px 7px; }
    .impersonate-table th:nth-child(3), .impersonate-table td:nth-child(3) { display: none; }
}

/* The same line once the server is serving a newer build, as a refresh.

   Sized and placed like .drawer-version above rather than like the Log Out button, because it is
   still reference material that happens to be actionable — not a second primary control. The
   .drawer-bottom selector is needed to win over `.drawer-bottom button`, which would otherwise
   impose the nav-row colour and padding on it. */
.drawer-bottom .drawer-version--update {
    color: var(--rms-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    min-height: 0;
    padding: 4px 28px 12px;
}

.drawer-bottom .drawer-version--update:hover {
    text-decoration: underline;
}

/* Resources */

.resources-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.resources-heading h1 {
    color: var(--rms-secondary);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0;
}

.resources-heading > div > p:last-child {
    color: #6f7f88;
    font-size: 13px;
    margin: 5px 0 0;
}

.resources-block {
    background: #fff;
    border: 1px solid var(--rms-card-border);
    border-radius: 10px;
    box-shadow: var(--rms-card-shadow);
    padding: 18px 20px;
}

.resources-block-heading { margin-bottom: 14px; }

.resources-block-heading h2 {
    color: var(--rms-secondary);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.resources-block-heading p {
    color: #7b8a92;
    font-size: 12px;
    margin: 3px 0 0;
}

.resources-block-heading a {
    color: var(--rms-secondary);
    font-weight: 700;
}

/* auto-fit rather than two fixed columns, so a third video would not need a rule here */
.resources-training-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.resources-video {
    border: 1px solid var(--rms-card-border);
    border-radius: 9px;
    color: var(--rms-secondary);
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.resources-video:hover {
    box-shadow: 0 6px 18px rgba(7, 67, 103, .12);
    color: var(--rms-secondary);
    transform: translateY(-1px);
}

/* the thumbnails are branded artwork of differing sizes, so they scale rather than crop */
.resources-video img {
    display: block;
    height: auto;
    width: 100%;
}

.resources-video > span {
    align-items: center;
    border-top: 1px solid var(--rms-card-border);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    padding: 10px 12px;
}

.resources-video i {
    color: var(--rms-primary);
    font-size: 16px;
}

@media (max-width: 700px) {
    .resources-heading h1 { font-size: 22px; }

    .resources-block { padding: 15px 14px; }
}